/* ════════════════════════════════════════════════════════════════════════
 * v4.css — La portada en una sala de cristal blanco (v4.html), sin scroll:
 * el logotipo de píxeles y, después, la rueda de modos con su escena y su
 * definición (una frase de entrada y un párrafo). Las escenas tienen su CSS
 * en css/v4-scenes.css.
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  --hv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #0b0c10;
  --blue: #2c6bff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.5, 0.64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body.v4 { background: #f3f4f7; color: var(--ink); font-family: var(--hv); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ La sala: cristal blanco a toda altura, con grandes paños de luz ═══ */
.hall { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #f3f4f7; }
.hall-wall { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 60% at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fbfbfc 0%, #f3f5f8 60%, #eceff3 100%); }
.hall-wall::after { content: ""; position: absolute; inset: -10% -18%; pointer-events: none; background: linear-gradient(116deg, transparent 20%, rgba(255, 255, 255, 0.95) 27%, rgba(255, 255, 255, 0) 33%, transparent 58%, rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0) 72%), radial-gradient(32% 46% at 16% 40%, rgba(196, 208, 228, 0.22), transparent 70%), radial-gradient(34% 46% at 86% 46%, rgba(206, 214, 232, 0.24), transparent 70%); transform: translateX(calc((var(--sx, 50%) - 50%) * 0.14)); transition: transform 1.4s var(--ease); }
.hall-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 110% at 50% 40%, rgba(28, 34, 46, 0) 60%, rgba(28, 34, 46, 0.07) 100%); }

/* ═══ 1 · Portada ═══ */
.v4-home { position: fixed; inset: 0; z-index: 2; }
.pf-host { position: absolute; left: 4vw; right: 4vw; top: 5vh; height: 62vh; cursor: pointer; outline: 0; }
/* (la máscara va en el lienzo: si fuera en la caja, también borraría su reflejo) */
.pf-canvas { display: block; width: 100%; height: 100%; }
.home-tag { position: absolute; left: 0; right: 0; top: 68vh; margin: 0; text-align: center; font: 500 clamp(15px, 1.2vw, 19px)/1.4 var(--hv); letter-spacing: -0.01em; color: rgba(11, 12, 16, 0.66); }
.home-join { position: absolute; left: 50%; top: 72vh; width: min(440px, 88vw); translate: -50% 0; }
.home-next { position: absolute; right: 3vw; bottom: 3vh; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; background: none; cursor: pointer; font: 600 10.5px/1 var(--hv); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 12, 16, 0.5); }
.home-next i { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(11, 12, 16, 0.5), rgba(11, 12, 16, 0)); transform-origin: top; animation: nextLine 1.9s var(--ease) infinite; }
@keyframes nextLine { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.home-tag, .home-join, .home-next { opacity: 0; translate: 0 12px; transition: opacity 0.8s ease, translate 1s var(--ease), visibility 0s; }
.home-join { translate: -50% 12px; }
body.in .home-tag, body.in .home-join, body.in .home-next { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
body.in .home-join { translate: -50% 0; transition-delay: 1.25s; }
body.in .home-next { transition-delay: 1.5s; }
body[data-stage="list"] .home-tag, body[data-stage="list"] .home-join, body[data-stage="list"] .home-next { opacity: 0; visibility: hidden; translate: 0 18px; transition: opacity 0.4s ease, translate 0.6s ease, visibility 0s linear 0.6s; }
body[data-stage="list"] .home-join { translate: -50% 18px; }
body[data-stage="list"] .pf-host { pointer-events: none; }

/* La lista de espera: cristal (deja ver el suelo y sus reflejos, desenfocados) */
.v4-join .field { position: relative; display: flex; align-items: center; gap: 6px; height: 50px; padding: 5px 5px 5px 20px; border-radius: 999px; cursor: text; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0.32) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.25), 0 20px 44px -26px rgba(20, 28, 40, 0.5); transition: box-shadow 0.3s ease; }
/* El filo de luz de arriba (como el canto de un cristal) */
.v4-join .field::after { content: ""; position: absolute; left: 22px; right: 22px; top: 1px; height: 45%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
.v4-join .field:focus-within { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.45), 0 20px 44px -26px rgba(20, 28, 40, 0.5); }
.v4-join .field.bad { box-shadow: inset 0 0 0 1.5px rgba(180, 83, 9, 0.55), 0 20px 44px -26px rgba(20, 28, 40, 0.5); }
.v4-join .field.shake { animation: shake 0.42s ease-in-out; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.v4-join .field > * { position: relative; z-index: 1; }
.v4-join input[type="email"] { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 15px/1 var(--hv); color: var(--ink); }
.v4-join input::placeholder { color: rgba(11, 12, 16, 0.45); }
.v4-join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v4-join .join-go { height: 100%; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--hv); color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 60%, rgba(236, 240, 246, 0.8) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(20, 28, 40, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 18px -10px rgba(20, 28, 40, 0.5); transition: transform 0.15s ease, box-shadow 0.25s ease; }
.v4-join .join-go:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #fff, 0 0 18px -2px rgba(255, 255, 255, 0.9), 0 10px 22px -10px rgba(20, 28, 40, 0.55); }
.v4-join .join-go:active { transform: scale(0.95); }
.v4-join .note { min-height: 1em; margin: 10px 0 0; text-align: center; font: 500 13px/1.3 var(--hv); color: rgba(11, 12, 16, 0.5); }
.v4-join .note.ok { color: var(--ink); }
.v4-join .note.err { color: #b45309; }

/* ═══ 2 · Los modos ═══ */
.v4-list { position: fixed; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
body[data-stage="list"] .v4-list { opacity: 1; visibility: visible; transition: opacity 0.9s ease 0.35s, visibility 0s; }
.v4-top { position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 5; }
.top-logo { position: absolute; left: 2.4vw; top: 26px; width: 78px; height: 31px; padding: 0; border: 0; background: var(--ink); cursor: pointer; -webkit-mask: url(../assets/img/wordmark.svg) left center / contain no-repeat; mask: url(../assets/img/wordmark.svg) left center / contain no-repeat; transition: opacity 0.2s ease; }
.top-logo:hover { opacity: 0.6; }
.top-join { position: absolute; right: 2.4vw; top: 18px; width: 372px; }
/* Dentro, el campo se recorta sobre el cristal blanco: más blanco que la sala, con filo y sombra */
.top-join .field { height: 48px; padding-left: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 251, 0.9) 100%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11, 12, 16, 0.13), 0 16px 36px -18px rgba(20, 28, 40, 0.42), 0 3px 8px -3px rgba(20, 28, 40, 0.14); }
.top-join .field:focus-within { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(11, 12, 16, 0.28), 0 0 0 5px rgba(140, 150, 165, 0.16), 0 16px 36px -18px rgba(20, 28, 40, 0.42); }
.top-join input[type="email"] { font-size: 14.5px; font-weight: 500; }
.top-join input::placeholder { color: rgba(11, 12, 16, 0.6); }
/* Join plateado: cuerpo de metal cepillado y filo de metal (como el botón de enviar de Niva), con un brillo que lo cruza */
.top-join .join-go { position: relative; overflow: hidden; padding: 0 20px; font-size: 13.5px; border: 1.5px solid transparent; color: #15171c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, #ffffff 0%, #e6e9ed 34%, #c3c9d1 52%, #d9dde3 70%, #f5f6f8 100%) padding-box, conic-gradient(from 210deg, #6b7280, #ffffff, #8a93a0, #f2f4f7, #6b7280, #cfd5dd, #6b7280) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(60, 68, 80, 0.18), 0 8px 18px -8px rgba(20, 28, 40, 0.55); }
.top-join .join-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); transition: left 0.7s var(--ease); pointer-events: none; }
.top-join .join-go:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(60, 68, 80, 0.14), 0 0 16px -2px rgba(255, 255, 255, 0.9), 0 10px 22px -8px rgba(20, 28, 40, 0.6); }
.top-join .join-go:hover::after { left: 115%; }
.top-join .note { position: absolute; right: 8px; top: 100%; margin-top: 7px; text-align: right; font-size: 12px; color: rgba(11, 12, 16, 0.62); }

/* La rueda (bien a la izquierda) */
.v4-wheel { position: absolute; left: 0; top: 9vh; height: 84vh; width: 22vw; }
.wh { overflow: hidden; outline: 0; touch-action: none; cursor: grab; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.wh.dragging { cursor: grabbing; }
.wh-item { position: absolute; left: var(--apex, 40%); top: 50%; padding: 6px 0; border: 0; background: none; transform-origin: 0 50%; white-space: nowrap; cursor: pointer; font: 500 clamp(17px, 1.68vw, 27px)/1 var(--hv); letter-spacing: -0.03em; color: rgba(0, 0, 0, 0.26); transition: color 0.3s ease; will-change: transform; }
.wh-item:hover { color: rgba(0, 0, 0, 0.5); }
.wh-item.on, .wh-item.on:hover { color: #0a0a0a; font-weight: 700; }
.wh-marker { position: absolute; top: 50%; left: calc(var(--apex, 40%) - 16px); width: 11px; height: 11px; margin-left: -11px; border-radius: 50%; background: var(--blue); transform: translateY(-50%); box-shadow: 0 0 0 5px rgba(44, 107, 255, 0.12); }
/* El logo 3D (js/wheellogo.js) en lugar del punto: flota junto al nombre elegido; se toca, se arrastra y se marea */
.wh-marker.gl { z-index: 2; left: calc(var(--apex, 40%) - 2px); width: 66px; height: 66px; margin-left: -66px; border-radius: 0; background: none; box-shadow: none; cursor: grab; touch-action: none; }
.wh-marker.gl.grabbing { cursor: grabbing; }
.wl-gl { display: block; width: 100%; height: 100%; }
body[data-stage="list"] .wh-item { animation: whIn 0.9s var(--ease) both; animation-delay: 0.3s; }
@keyframes whIn { from { opacity: 0; } }

/* La escena (en el centro: tu pantalla, con Niva encima a tamaño real) */
.v4-scene { position: absolute; left: 20.6vw; width: 45.2vw; top: 6vh; height: 89vh; }
.v4-scene-in { position: absolute; left: 0; top: 0; width: 660px; height: 760px; transform-origin: 0 0; }

/* La definición (a la derecha, en Helvetica negrita): la frase de entrada, grande, y el párrafo; palabra a palabra */
.v4-def { position: absolute; right: 2.4vw; width: 29.8vw; top: 50%; margin: 0; translate: 0 -50%; }
.def-lead { margin: 0; font: 700 clamp(24px, 2.45vw, 42px)/1.08 var(--hv); letter-spacing: -0.032em; color: #0a0a0a; }
.def-text { margin: 22px 0 0; font: 700 clamp(15px, 1.3vw, 22px)/1.45 var(--hv); letter-spacing: -0.012em; color: #1a1c21; }
.dw { display: inline; opacity: 0; filter: blur(6px); transition: opacity 0.6s ease, filter 0.6s ease; transition-delay: var(--d, 0ms); }
.def-lead.in .dw, .def-text.in .dw { opacity: 1; filter: none; }
.def-lead:not(.in) .dw, .def-text:not(.in) .dw { transition: opacity 0.15s ease, filter 0.15s ease; transition-delay: 0s; }

/* ═══ Pantallas más pequeñas: arriba, la tira de modos (va de lado a lado); debajo, solo la frase de entrada; y la escena, grande ═══ */
@media (max-width: 1000px) {
  .v4-top { height: 62px; }
  .top-logo { left: 16px; top: 19px; width: 64px; height: 25px; }
  .top-join { right: 12px; top: 11px; width: min(268px, 64vw); }
  .top-join .field { height: 40px; padding-left: 14px; }
  .top-join input[type="email"] { font-size: 13px; }
  .top-join .join-go { padding: 0 14px; font-size: 12.5px; }
  .v4-wheel { left: 0; top: 62px; width: 100vw; height: 54px; }
  .wh.h { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
  .wh.h .wh-item { left: 50%; transform-origin: 50% 50%; font-size: 22px; }
  /* El logo plano de Niva (sin 3D ni efectos), justo antes del nombre elegido */
  .wh.h .wh-marker, .wh.h .wh-marker.gl { left: calc(50% - var(--sel-w, 120px) / 2 - 10px); width: 30px; height: 30px; margin-left: -30px; border-radius: 0; background: url(../assets/img/mark-logo.png) center / contain no-repeat; box-shadow: none; pointer-events: none; transition: left 0.3s var(--ease); }
  .wh.h .wl-gl { display: none; }
  .v4-def { left: 18px; right: 18px; width: auto; top: 122px; bottom: auto; translate: none; text-align: center; }
  .def-lead { font-size: clamp(18px, 5vw, 26px); line-height: 1.15; }
  .def-text { display: none; }
  .v4-scene { left: 0; width: 100vw; top: 182px; bottom: 6px; height: auto; overflow: hidden; }
  .home-tag { top: 66vh; }
  .home-join { top: 74vh; }
  .pf-host { height: 62vh; }
}
@media (max-width: 700px) {
  .pf-host { left: 0; right: 0; top: 18vh; height: 40vh; }
  .home-tag { padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-next i { animation: none; }
}