/* =========================================================================
   FoolArt · Pagina publica
   =========================================================================

   Todos los colores, tamanos, radios y espaciados salen de `DESIGN.md`, capa
   "Institutional Precision". La regla D2 dice que ningun token vive fuera de
   ese documento: aqui no se inventa ninguno, solo se copian.

   Esto NO es Modo Escenario. Modo Escenario es la capa para operar a oscuras,
   en vivo, con el show corriendo. Una pagina de producto se mira de dia, con
   calma, y parecerse a la consola confundiria las dos superficies.
   ========================================================================= */

:root {
  /* Superficies */
  --hero: #04080F;              /* DESIGN.md: hero de alto impacto */
  --surface: #061423;
  --surface-container-lowest: #020f1e;
  --surface-container-low: #0f1c2c;
  --surface-container: #132030;

  /* Texto */
  --on-surface: #d6e4f9;
  --on-surface-variant: #c5c6d0;

  /* Lineas */
  --outline-variant: #44464f;

  /* Acentos */
  --primary: #b2c5ff;
  --secondary: #87ceff;         /* Cyan Accent: senales interactivas */
  --on-secondary: #00344d;

  /* Error */
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* Forma */
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-panel: 20px;

  /* Espaciado */
  --section-v-pad: 7rem;
  --gutter: 1.5rem;
  --container-max: 1280px;
  --stack-sm: 0.5rem;
  --stack-md: 1.5rem;
  --stack-lg: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Open Sans si esta instalada. No se enlaza a un CDN de fuentes: la portada
     del producto no tiene por que contarle a un tercero la IP de cada visita. */
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface);
  background: var(--hero);

  /* Rejilla tecnica: lineas de 1px al 5% de blanco (DESIGN.md, Layout). */
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Barra --------------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: var(--stack-md) var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.barra .marca {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-right: auto;
  color: var(--on-surface);
  text-decoration: none;
}

.barra .marca span { color: var(--secondary); }

.enlace-barra {
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-control);
}

.enlace-barra:hover { color: var(--secondary); background: rgba(135, 206, 255, 0.08); }

/* El boton de la barra. Es el unico sitio de la portada donde algo lleva fuera
   de la lectura, y lleva al formulario: no distrae, remata. */
.boton-barra {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-control);
  background: var(--secondary);
  color: var(--on-secondary);
  text-decoration: none;
  transition: filter 120ms ease, transform 120ms ease;
}

.boton-barra:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* El llamado de media pagina: enlace, no boton. A mitad del recorrido el
   lector esta leyendo, no decidiendo, y un boton grande ahi interrumpe. */
.llamado {
  margin: var(--stack-md) 0 0;
  font-size: 15px;
  font-weight: 600;
}

.llamado a {
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(135, 206, 255, 0.35);
  padding-bottom: 2px;
}

.llamado a:hover { border-bottom-color: var(--secondary); }

/* ---- Estructura ---------------------------------------------------------- */

.envoltorio {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-v-pad) var(--gutter);
}

.hoja { max-width: 30rem; }
.hoja.ancha { max-width: 46rem; }

.pie {
  display: flex;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding: var(--stack-md) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: var(--on-surface-variant);
}

/* ---- Titulos ------------------------------------------------------------- */

/* El rotulo con su icono, como la barra lateral de la aplicacion. */
.eyebrow { display: flex; align-items: center; gap: 0.5rem; }
.eyebrow .icono { flex: none; opacity: 0.85; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 var(--stack-sm);
}

h1 {
  /* h1-fluid de DESIGN.md, tal cual. */
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--stack-md);

  /* El titular no lleva saltos de linea a mano. Un <br> escrito para que quede
     bonito en un portatil deja una linea huerfana en un telefono. Se limita el
     ancho en unidades de texto y que rompa donde le toque. */
  max-width: 16ch;
  text-wrap: balance;
}

.hoja h1 { font-size: 36px; letter-spacing: -0.01em; }

h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: var(--stack-lg) 0 var(--stack-md);
}

.entrada-texto {
  font-size: 18px;
  line-height: 1.8;
  color: var(--on-surface-variant);
  margin: 0 0 var(--stack-lg);
}

.nota { font-size: 16px; color: var(--on-surface-variant); margin: 0 0 var(--stack-md); }
.nota strong { color: var(--on-surface); font-weight: 600; }
.tenue { font-size: 14px; }

a { color: var(--secondary); }

/* ---- Captura de correo --------------------------------------------------- */

.captura-correo {
  display: flex;
  gap: var(--stack-sm);
  flex-wrap: wrap;
  margin-bottom: var(--stack-md);
}

.captura-correo input[type="email"] { flex: 1 1 16rem; }

/* La oferta va pegada al boton, no enterrada al final.
   Los datos de paginas de lista de espera dicen que lo que quita el "¿esto es
   real?" es la prueba o el incentivo en el momento exacto de decidir, no tres
   pantallas mas abajo. */
.oferta {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-surface);
  border-left: 2px solid var(--tertiary);
  padding-left: var(--stack-md);
  margin: 0 0 var(--stack-sm);
  max-width: 34rem;
}

.oferta strong { color: var(--tertiary); font-weight: 700; }

.comunidad {
  font-size: 13px;
  color: var(--on-surface-variant);
  margin: 0 0 var(--stack-md);
  max-width: 34rem;
  text-wrap: balance;
}

/* Las listas tecnicas llevan guion, no punto (DESIGN.md, Components). */
.promesas {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--stack-md);
  font-size: 16px;
  color: var(--on-surface-variant);
}

.promesas li { padding-left: 1.25rem; position: relative; }
.promesas li::before { content: '—'; position: absolute; left: 0; color: var(--secondary); }

.ya-tengo { font-size: 14px; color: var(--on-surface-variant); margin: 0; }

/* El campo trampa. `display:none` lo saltan los robots que leen el CSS; sacarlo
   del lienzo lo deja invisible y rellenable, que es justo lo que se quiere. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Formularios --------------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--stack-sm);
}

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-family: inherit;
  font-size: 16px;   /* menos de 16px hace que iOS haga zoom al enfocar */
  font-weight: 300;
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-control);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(135, 206, 255, 0.25);
}

.apilada { display: block; margin-bottom: var(--stack-md); }
.apilada input { margin-bottom: var(--stack-md); }
.apilada button { width: 100%; }

.en-linea { display: inline-block; margin: 0; }
.en-linea.separada { margin-top: var(--stack-lg); }

.codigo {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Botones ------------------------------------------------------------- */

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-control);
  border: none;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

button:hover { transform: translateY(-2px); filter: brightness(1.2); }
button:active { transform: translateY(0); }

.principal { background: var(--secondary); color: var(--on-secondary); }
.fantasma  { background: transparent; color: var(--on-surface);
             border: 1px solid rgba(255, 255, 255, 0.3); }
.peligro   { background: var(--error-container); color: var(--on-error-container);
             font-size: 12px; padding: 0.4rem 0.8rem; }

/* Un boton que parece enlace. Es un boton porque cambia algo del servidor, y
   eso jamas viaja en un enlace: un antivirus de correo que abre enlaces no
   puede tener el poder de cambiar nada. */
.enlace {
  background: none;
  border: none;
  color: var(--secondary);
  padding: 0;
  font-size: 14px;
  text-decoration: underline;
}

.enlace:hover { transform: none; }

/* ---- Mensajes ------------------------------------------------------------ */

.mensaje {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-card);
  margin: 0 0 var(--stack-md);
  font-size: 14px;
  border-left: 3px solid var(--secondary);
  background: rgba(135, 206, 255, 0.08);
  max-width: 40rem;
}

.mensaje.error {
  border-left-color: var(--error);
  background: rgba(255, 180, 171, 0.08);
  color: var(--on-error-container);
}

/* ---- Fichas de la cuenta ------------------------------------------------- */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--stack-md);
}

.ficha {
  background: linear-gradient(180deg, var(--surface-container) 0%, var(--surface-container-low) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  padding: var(--stack-md);
}

.ficha .rotulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.ficha .dato {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---- Tabla de equipos ---------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
  white-space: nowrap;
}

td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 300;
  vertical-align: middle;
}

td.numerico { font-variant-numeric: tabular-nums; white-space: nowrap; }

tr.apagada td { color: var(--on-surface-variant); opacity: 0.55; }

.distintivo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-control);
}

.distintivo.fuera { background: var(--error-container); color: var(--on-error-container); }

/* ---- Movil --------------------------------------------------------------- */

@media (max-width: 768px) {
  /* DESIGN.md, Layout: en movil el padding de seccion baja a 4rem. */
  .envoltorio { padding: 4rem 1rem; }
  .hoja h1 { font-size: 28px; }
  .barra { padding: 1rem; }
  .captura-correo button { width: 100%; }
}

/* Quien pide menos movimiento no tiene por que recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:hover { transform: none; }
}

/* =========================================================================
   EL TUNEL
   =========================================================================

   Dos versiones de la misma pagina, y la de abajo es la que manda:

   1. SIN la clase `tunel` en <html> — que es lo que ocurre sin JavaScript, y
      tambien lo que ocurre si el visitante pide menos movimiento — esto es una
      pagina normal: secciones apiladas, todo legible, todo indexable.
   2. CON la clase `tunel`, los mismos paneles se colocan a distintas
      profundidades y se vuela entre ellos.

   Ni un color, tamano o radio nuevo: todo sale de los tokens de arriba, que a
   su vez salen de DESIGN.md (regla D2).
   ========================================================================= */

/* ---- Version apilada (la base, la que se sirve sin JavaScript) ----------- */

.estacion {
  max-width: 46rem;
  margin: 0 auto var(--section-v-pad);
}

.panel > :last-child { margin-bottom: 0; }

/* El sello de "Proximamente". Es un estado, no una accion: por eso va arriba
   como etiqueta y NO en el boton. Un boton que dice "Proximamente" no se pulsa. */
.sello {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tertiary);
  border: 1px solid rgba(251, 188, 0, 0.4);
  border-radius: var(--radius-control);
  padding: 0.2rem 0.6rem;
  margin: 0 0 var(--stack-md);

  /* `inline-block` no basta: dentro de la rejilla de la portada el sello es un
     elemento de rejilla y se estira a todo el ancho de la columna, con lo que
     parece un campo de formulario vacio. */
  width: fit-content;
  justify-self: start;
}

/* Las cifras.
   ONYX construye toda su credibilidad con numeros contables —12.000 aparatos,
   128 universos— y aqui estaban escondidas dentro de un JPEG. Un tecnico lee
   "248 canales" y sabe al instante si esto le sirve; leyendo un parrafo, no. */
.cifras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 var(--stack-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

.cifras li::after {
  content: '·';
  color: var(--outline);
  margin: 0 0.6rem;
}

.cifras li:last-child::after { content: none; }

/* La credencial: lo mas convincente de la pagina, y por eso esta en la primera
   pantalla y no enterrada al final. */
.credencial {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface);
  border-left: 2px solid var(--tertiary);
  padding-left: var(--stack-md);
  margin: 0 0 var(--stack-md);
}

.cuerpo {
  font-size: 18px;
  line-height: 1.8;
  color: var(--on-surface-variant);
  margin: 0 0 var(--stack-md);
}

.remate {
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface);
  border-left: 2px solid var(--secondary);
  padding-left: var(--stack-md);
  margin: 0 0 var(--stack-md);
}

/* Las pruebas obligatorias del proyecto. Van en ambar porque son el sello de
   "esto se comprueba", no un adorno (DESIGN.md: el ambar marca lo excepcional). */
.prueba {
  border: 0.5px solid rgba(251, 188, 0, 0.35);
  background: rgba(251, 188, 0, 0.06);
  border-radius: var(--radius-card);
  padding: var(--stack-md);
  margin: 0 0 var(--stack-md);
}

.prueba .rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin: 0 0 var(--stack-sm);
}

.prueba p:last-child { margin: 0; font-size: 15px; color: var(--on-surface-variant); }

figure.captura {
  margin: var(--stack-md) 0 0;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-container-lowest);
}

figure.captura img { display: block; width: 100%; height: auto; }

.pista, .riel, .niebla, .anillos { display: none; }

/* ---- Version tunel ------------------------------------------------------ */

/* `dvh` es la altura que queda DE VERDAD, ya descontada la barra del navegador.
   Con `100vh` a secas, en el Safari de un iPhone la escena mide mas que la
   pantalla y el panel de lectura queda cortado por abajo. El `100vh` se deja
   antes como respaldo para los navegadores que no conocen `dvh`.

   `overscroll-behavior: none` mata el "tirar para recargar" de Android: sin
   ella, el primer deslizamiento hacia abajo del tunel recarga la pagina. */
.tunel body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;

  /* La rejilla tecnica de la aplicacion, la misma que se ve detras de sus
     pantallas. Se habia quitado del tunel porque al 5% peleaba con los marcos:
     dos retículas compitiendo y ninguna legible. Al 2.5% deja de competir y
     hace lo que tiene que hacer — dar fondo a un espacio que si no se queda en
     negro plano. */
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;

  /* Aqui habia un `background-attachment: fixed` y en el tunel no pintaba nada:
     el body lleva `overflow: hidden` y no se desplaza, asi que no habia de que
     despegar el fondo. Lo que si hacia era sacar la rejilla de la capa normal y
     obligar a repintarla por el camino largo — y en un telefono eso se paga en
     cada cuadro. */
}

.tunel .barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0.92) 0%, rgba(4, 8, 15, 0) 100%);
  border-bottom: none;
}

.tunel .envoltorio { padding: 0; max-width: none; }

.tunel .pie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  border-top: none;
  background: linear-gradient(0deg, rgba(4, 8, 15, 0.92) 0%, rgba(4, 8, 15, 0) 100%);
  pointer-events: none;
}

/* El escenario. `perspective` aqui y `preserve-3d` dentro: sin las dos, los
   hijos se aplastan contra el plano de la pantalla y el tunel desaparece. */
.tunel .viaje {
  position: fixed;
  inset: 0;
  /* 2200 y no 1100.
     Con una perspectiva corta, un panel que ya pasaste se agranda hacia el
     infinito en cuanto te alejas un poco del plano de camara: a 1000 px ya iba
     por once veces su tamano. Eso obligaba a apagarlo muy pronto, y al volver
     hacia atras la estacion a la que regresabas no aparecia hasta el ultimo
     tercio del trayecto. El resto del camino se veia vacio.
     Con 2200 esos mismos 1000 px son 1.83x, asi que el panel puede seguir
     visible casi todo el recorrido. Se pierde algo de profundidad dramatica y
     se gana que el viaje de vuelta se vea. */
  perspective: 2200px;
  perspective-origin: 50% 46%;
  overflow: hidden;

  /* `pan-x pan-y` y NO `none`, aunque `none` sea lo comodo.
     Lo que hace falta es quedarse el arrastre de un dedo, que es como se
     avanza por el tunel. `none` se quedaba ademas el gesto de DOS dedos, y con
     el, el zoom de pinza de todo el movil. Aqui hay texto de 14 px claro sobre
     fondo oscuro: dejar a alguien sin poder acercarlo es una barrera de verdad
     —WCAG 1.4.4— y no se gana nada a cambio, porque el motor solo escucha un
     dedo. Esta forma conserva el arrastre y devuelve la pinza. */
  touch-action: pan-x pan-y;
}

.tunel .mundo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* `preserve-3d` aqui, y no es opcional.
   Sin ella este contenedor APLASTA a sus hijos contra su propio plano. Con los
   marcos de antes no se notaba —solo llevaban desplazamiento, y un plano
   desplazado se aplasta sin cambiar de forma— pero una pared ROTADA aplastada
   se convierte en una linea: alto cero, ancho cero, invisible. Estuvieron dos
   dias subidas y sin verse por esto. */
.tunel .anillos {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ---- Los marcos del tunel --------------------------------------------------

   Cuadros vistos DE FRENTE. Se probo con cuatro paredes largas —mas baratas,
   densidad gratis— y no funcionaba: un pasillo lo bastante ancho para que
   quepan los paneles deja sus paredes en el filo de la pantalla, donde casi no
   se ve superficie. Los marcos se ven enteros y convergen hacia el fondo, que
   es lo que hace que aquello parezca un tunel.

   Van densos, uno cada tercio de tramo. Se recortaron a uno por estacion por
   miedo al rendimiento y con eso se rompio el efecto: quedaron cuadros sueltos
   flotando. La medicion dijo despues que el atasco no era de los marcos sino
   del desenfoque de los paneles, y ese ya no esta.

   Sin `border-radius`: cada esquina redondeada de una capa en 3D obliga a
   rasterizar una mascara aparte, y aqui hay una capa por marco.
   -------------------------------------------------------------------------- */

.marco {
  position: absolute;
  left: 50%;
  top: 46%;
  /* Circulos EXACTOS, medidos en vmax.
     Las dos medidas son la misma unidad, asi que la forma nunca se deforma: un
     circulo, no un ovalo. Y `vmax` —el lado largo de la pantalla— y no `vmin`,
     porque el aro tiene que ser mas ancho que el panel para encuadrarlo. Con
     `vmin` en un monitor apaisado el aro salia mas estrecho que el texto y solo
     asomaban trozos por las esquinas.

     Comprobado: en 1440x820 el aro mide 1152 y el panel 1088; en un telefono de
     375x812 mide 650 y el panel 352. Encuadra en los dos. */
  width: 80vmax;
  height: 80vmax;
  margin: -40vmax 0 0 -40vmax;
  border: 1px solid rgba(135, 206, 255, 0.22);

  /* Circulos, no cuadros. El cuadro se lo queda la rejilla del fondo, que es
     plana y estatica; el camino se lo queda el circulo, que es el que se mueve.
     Dos formas distintas para dos cosas distintas, en vez de cuadros delante de
     cuadros.

     El radio cuesta: cada capa redondeada en 3D obliga al navegador a rasterizar
     una mascara aparte, y aqui hay diecisiete. Cabe porque el desenfoque de los
     paneles —que era el gasto de verdad— ya no esta. */
  border-radius: 50%;

  /* Aqui habia un `backface-visibility: hidden` y costaba caro.
     Esa propiedad obliga al navegador a darle a CADA aro su propia capa de
     video, y solo sirve para esconder el reverso de algo que gira. Estos aros
     no giran nunca: solo se desplazan. Se pagaba una capa por aro a cambio de
     nada. */
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}

/* En un telefono el aro se cine al panel en vez de desbordarlo.
   `80vmax` se mide contra el lado LARGO, asi que en vertical daba 650 px de
   circulo para encuadrar un panel de 352: mas del doble de la textura
   necesaria, y toda transparente salvo la linea del borde. Medido contra el
   lado corto queda en 450, encuadra igual de bien y cuesta la mitad. */
@media (max-width: 768px) and (orientation: portrait) {
  .marco {
    width: 120vmin;
    height: 120vmin;
    margin: -60vmin 0 0 -60vmin;
  }
}

/* La niebla hace dos trabajos por el precio de uno: apaga los aros lejanos sin
   gastar un solo cuadro de animacion en ellos, y evita que el texto compita con
   la geometria en los bordes de la pantalla. */
.tunel .niebla {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 116% 108% at 50% 46%,
      rgba(4, 8, 15, 0) 0%,
      rgba(4, 8, 15, 0.22) 76%,
      var(--hero) 100%);
}

.tunel .estacion {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(46rem, 88vw);
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
  /* Sin esto, un panel medio desvanecido de otra profundidad se come los clics
     del que estas leyendo. El motor lo devuelve a `auto` solo en el enfocado. */
  pointer-events: none;

  /* Le dice al navegador que nada de dentro de esta estacion afecta al resto de
     la pagina, ni al reves. Con nueve paneles moviendose a la vez, eso evita
     que tocar uno obligue a repasar los otros ocho. */
  contain: layout paint;
}

.tunel .panel {
  max-height: 84vh;
  /* `auto` y no `hidden`: si algo no cabe, que se pueda alcanzar. Recortar en
     silencio fue como se perdio el boton del formulario en un portatil de 700
     px de alto, sin que nada avisara. */
  overflow-y: auto;
  /* SIN backdrop-filter, y no es por gusto.
     Un blur(14px) obliga a la GPU a copiar el fondo que hay detras del panel,
     desenfocarlo en dos pasadas y recomponerlo EN CADA CUADRO. Sobre un panel
     de 992x600 en una pantalla de densidad 2 son 1984x1200 pixeles procesados
     sesenta veces por segundo, y mientras vuelas hay dos o tres paneles
     visibles a la vez. Sobre un fondo casi negro no se distingue de un
     degradado opaco, que cuesta cero. */
  background: linear-gradient(180deg, rgba(17, 29, 45, 0.96) 0%, rgba(13, 25, 40, 0.93) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-panel);
  padding: var(--stack-lg);
}

.tunel .panel h1 { max-width: 14ch; }

.tunel .estacion.con-captura { width: min(62rem, 92vw); }
.tunel .estacion.portada { width: min(68rem, 94vw); }
.tunel .estacion.portada .panel {
  max-height: 90vh;
  /* Menos aire que el resto. En la portada el espacio no es estetica: cada
     margen de mas empuja el formulario un poco mas cerca del borde. */
  padding: 2rem 2.2rem;
}
.tunel .estacion.portada .cuerpo { margin-bottom: var(--stack-sm); }
.tunel .estacion.portada .cifras { margin-bottom: var(--stack-md); }
.tunel .estacion.portada figure.captura { max-height: 26vh; margin: var(--stack-md) 0; }

/* El titular de la portada NO usa la escala gigante del resto.
   Aqui compite con el campo del correo, y el campo tiene que ganar: de nada
   sirve un titular espectacular si empuja fuera de la pantalla lo unico que la
   pagina quiere del visitante. */
.tunel .estacion.portada h1 { font-size: clamp(1.9rem, 2.9vw, 2.7rem); max-width: 17ch; }

/* En pantalla ancha, la portada va a dos columnas: el texto y el formulario a
   la izquierda, la captura a la derecha. Asi el campo del correo queda siempre
   por encima del pliegue, que era el problema que trajo toda esta reescritura.
   El DOM es plano, asi que se coloca por rejilla: todo a la columna 1 y la
   figura a la 2, ocupando el alto entero. */
@media (min-width: 900px) {
  .tunel .estacion.portada .panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: var(--stack-lg);
    align-items: start;
  }
  .tunel .estacion.portada .panel > * { grid-column: 1; }
  .tunel .estacion.portada .panel > figure.captura {
    grid-column: 2;

    /* `span`, NO `1 / -1`.
       `-1` apunta a la ultima linea de la rejilla EXPLICITA, y aqui todas las
       filas son implicitas: no hay rejilla explicita que apuntar. El resultado
       era que la captura no se repartia entre las filas — se metia entera en la
       primera y empujaba el resto hacia abajo. Asi es como el formulario
       acababa fuera de la pantalla, y por eso recortar texto no lo arreglaba. */
    grid-row: 1 / span 10;
    align-self: center;
    margin: 0;
    max-height: 52vh;
  }
}

.tunel figure.captura {
  aspect-ratio: 1600 / 920;
  max-height: 42vh;
  margin: var(--stack-md) auto 0;
}

.tunel figure.captura img { width: 100%; height: 100%; object-fit: contain; }

/* ---- La pista de "rueda para avanzar" ----------------------------------- */

.con-dedo { display: none; }

/* Se decide por el tipo de puntero, no por el ancho: un portatil tactil no es
   un movil, y una tablet con raton conectado sí tiene rueda. */
@media (pointer: coarse) {
  .con-rueda, .pista .rueda { display: none; }
  .con-dedo { display: inline; }
}

.tunel .pista {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: var(--stack-lg) 0 0;
  font-size: 14px;
  color: var(--on-surface);
  transition: opacity 400ms ease;
}

.tunel .pista.ida { opacity: 0; pointer-events: none; }

.pista .rueda {
  width: 18px;
  height: 28px;
  border: 1px solid var(--outline);
  border-radius: 9px;
  position: relative;
  flex: none;
}

.pista .rueda::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--secondary);
  animation: rodar 1.8s ease-in-out infinite;
}

@keyframes rodar {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(9px); opacity: 0.15; }
}

.pista .atajo { margin-left: 0.4rem; color: var(--secondary); }

/* ---- El mando de avance ---------------------------------------------------

   Siempre visible. La pista de "rueda para avanzar" se desvanece al primer
   gesto y solo sale en la portada: quien llega a media pagina sin haber pillado
   como se avanza se quedaba sin ninguna salida a la vista.
   -------------------------------------------------------------------------- */

.mando { display: none; }

/* A la esquina y no al centro. Centrado quedaba justo encima del formulario de
   la portada y se lo comia: el control de navegacion tapando aquello a lo que
   queremos que la gente llegue. */
.tunel .mando {
  display: flex;
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--stack-md) + 2.4rem);
  z-index: 20;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(2, 15, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mando .paso {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
}

.mando .paso:hover:not(:disabled) { color: var(--secondary); background: rgba(135, 206, 255, 0.10); transform: none; }

/* Deshabilitado y no escondido: que se vea donde empieza y donde acaba. */
.mando .paso:disabled { opacity: 0.25; cursor: default; }

.mando .rueda-mando {
  width: 16px;
  height: 25px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  position: relative;
  flex: none;
}

.mando .rueda-mando::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--secondary);
  animation: rodar 1.8s ease-in-out infinite;
}

/* ---- El riel de avance --------------------------------------------------- */

.tunel .riel {
  display: flex;
  position: fixed;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.tunel .riel.visible { opacity: 1; }

.riel .barra-riel {
  width: 1px;
  height: 26vh;
  background: var(--outline-variant);
  position: relative;
}

.riel .lleno {
  position: absolute;
  inset: 0;
  background: var(--secondary);
  transform-origin: top center;
  transform: scaleY(0);
}

.riel .total { color: var(--outline); }

/* ---- La marca con el logotipo de verdad --------------------------------- */

.barra .marca { display: flex; align-items: center; gap: 0.6rem; }
.barra .marca img { width: 26px; height: 26px; border-radius: 6px; display: block; }

/* ---- Movil --------------------------------------------------------------- */

@media (max-width: 768px) {
  .tunel .panel { padding: var(--stack-md); max-height: 84vh; }

  /* En un telefono, marcos mas tenues. El efecto se conserva entero; se
     pinta menos linea en una pantalla donde cada pixel ya cuesta el doble
     por la densidad. */
  .marco { border-color: rgba(135, 206, 255, 0.12); }
  .tunel .estacion { width: 92vw; }
  .tunel figure.captura { max-height: 30vh; }
  .tunel .estacion.con-captura { width: 92vw; }

  /* La portada en un telefono lleva mucho encima: sello, rotulo, titular,
     bajada, credencial, captura, formulario y aviso. Con la escala de
     escritorio no cabe, y como el panel recorta lo que sobra, lo primero que
     desaparece es el boton. Aqui se aprieta todo y la captura se queda
     pequena: el campo del correo tiene que verse sin desplazar nada. */
  .tunel .estacion.portada { width: 94vw; }
  .tunel .estacion.portada h1 { font-size: 1.55rem; line-height: 1.15; max-width: none; }
  .tunel .estacion.portada .cuerpo { font-size: 14px; line-height: 1.55; }
  .tunel .estacion.portada .credencial { font-size: 14px; }
  .tunel .estacion.portada figure.captura { max-height: 11vh; margin: 0.7rem 0; }
  .tunel .estacion.portada .panel { padding: 1.4rem 1.3rem; }
  .oferta { font-size: 12.5px; }

  /* El boton de la barra, compacto. A tamano de escritorio se partia en dos
     lineas y se comia la marca. */
  .boton-barra { font-size: 12px; padding: 0.4rem 0.7rem; white-space: nowrap; }
  .barra .marca { font-size: 17px; }

  /* La pista sobra justo aqui. El gesto se descubre solo en cuanto el dedo
     toca la pantalla, y esos cincuenta pixeles son los que hacen que el sello
     se meta debajo de la barra de arriba. */
  .tunel .estacion.portada .pista { display: none; }

  /* Y la portada se centra de verdad: el 46% del resto sube el panel para dejar
     aire abajo, pero este panel es casi tan alto como la pantalla y ese sesgo
     lo mete debajo de la barra. */
  .tunel .estacion.portada { top: 50%; }

  /* Red de seguridad: si aun asi algo no cabe, el panel se desplaza por dentro
     en vez de recortar en silencio. `pan-y` le devuelve al panel el gesto
     vertical que la escena le habia quitado con `touch-action: none`. */
  .tunel .estacion.portada .panel {
    max-height: 88vh;
    overflow-y: auto;
    touch-action: pan-y;
  }
  .tunel .riel { right: 0.5rem; }
  .tunel .mando {
    bottom: var(--stack-sm);
    right: var(--stack-sm);
    gap: 0.35rem;
    padding: 0.25rem 0.35rem;
  }
  .mando .paso { width: 30px; height: 30px; }
  .mando .rueda-mando { display: none; }
  .riel .barra-riel { height: 18vh; }
}

/* Pantallas bajas: la captura es lo primero que sobra, no el texto. */
@media (max-height: 620px) {
  .tunel figure.captura { display: none; }
}


/* ---- El aviso de privacidad ------------------------------------------------

   Una pagina para LEER, no para recorrer: mas ancha que una tarjeta, con aire
   entre apartados y renglones largos. Aqui nadie viene a que le impresionen;
   viene a enterarse de algo, muchas veces molesto y con prisa. */

.hoja.legal {
  max-width: 44rem;
  line-height: 1.7;
}

.hoja.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 19px;
  color: var(--secondary);
}

.hoja.legal ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.hoja.legal li { margin-bottom: 0.5rem; }

.hoja.legal p { margin: 0.75rem 0; }

.hoja.legal .volver {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline);
}

/* Un hueco del aviso que todavia no se ha llenado. Grita a proposito: un dato
   del responsable que falta deja el aviso incompleto ante la ley, y un hueco
   discreto es un hueco que nadie arregla. */
.hoja.legal .pendiente {
  background: rgba(255, 184, 0, 0.18);
  color: var(--on-surface);
  padding: 0 0.35rem;
  border-radius: 3px;
  font-style: italic;
}

/* La linea de datos bajo el formulario. Tiene que leerse, asi que no baja del
   gris de texto secundario por muy de relleno que parezca. */
.aviso-datos {
  margin-top: 0.75rem;
  line-height: 1.5;
}

.aviso-datos a { color: var(--secondary); }

/* Los dos enlaces del pie, juntos y separados entre si. */
.enlaces-pie {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}