/* ═══════════════════════════════════════════════════════════════════════
   AIA · sistema de diseño v1
   ─────────────────────────────────────────────────────────────────────
   Origen declarado: el design system de Duolingo. De ahí vienen tres
   cosas y solo tres: la disciplina de un color, el botón con labio duro
   que se hunde, y el ritmo editorial de texto contra ilustración.

   Lo demás es nuestro, y lo importante es lo que NO copiamos:

   Duolingo pone su verde saturado en titulares de 48px. Ese verde da
   2.09:1 sobre blanco. Nuestro ámbar da 2.12:1 — el mismo problema. Ellos
   pueden permitírselo porque su mensaje también viaja en la ilustración,
   el sonido y el juego. Nosotros le vendemos automatización a alguien que
   está decidiendo si somos una empresa seria, y un titular que se
   desvanece en una laptop barata no lee "divertido": lee "no funciona".

   DE AHÍ SALE LA REGLA MADRE DEL ARCHIVO:
     ámbar brillante  = RELLENO.  Nunca texto sobre fondo claro. A ningún
                        tamaño. Ni a 120px.
     ámbar de texto   = --ambar-800 (5.31:1).
     titulares        = --tinta-900.

   El color de marca vive en el ÁREA, no en los glifos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── tipografía auto-hospedada ────────────────────────────────────────
   Dentro del binario, no en Google Fonts: una petición a terceros menos,
   un punto de fallo menos, y ningún visitante nuestro le queda registrado
   a Google por el solo hecho de abrir la página. 67 KB en total. */

@font-face {
  font-family: "Nunito";
  font-weight: 200 1000;          /* variable: un archivo cubre todo el eje */
  font-style: normal;
  font-display: swap;
  src: url("/fuentes/nunito-display.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fuentes/nunito-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fuentes/nunito-sans-700.woff2") format("woff2");
}

:root {
  /* ── ÁMBAR · el acento ────────────────────────────────────────────
     Sale del ojo encendido del robot. Significa "algo te está
     atendiendo". Si un elemento ámbar no representa atención, acción o
     algo aprendido, va en tinta o en crema. */
  --ambar-500: #f4a01c;  /* 2.12:1 · SOLO relleno. Encima solo --tinta-900. */
  --ambar-400: #ffad38;  /* hover del relleno. Nunca texto sobre claro.    */
  --ambar-200: #fad5aa;  /* superficie de chip.                            */
  --ambar-100: #fae8d5;  /* fondo de callout, píldora activa.              */
  --ambar-700: #b47300;  /* 3.89:1 · contornos, iconos. No cuerpo de texto.*/
  --ambar-800: #975f00;  /* 5.31:1 · EL ÁMBAR DE TEXTO. Y el labio.        */

  /* ── FRÍO · uno solo, para enlaces y foco ───────────────────────── */
  --azul-600: #1355c7;   /* 6.66:1 · enlaces, foco de teclado.             */
  --azul-700: #0f4aa8;   /* 8.19:1 · hover y visitado.                     */

  /* ── TINTA · grises CÁLIDOS ───────────────────────────────────────
     Nada de grises fríos. El sesgo azul contra un ámbar saturado
     produce un halo sucio. */
  --tinta-900: #241d15;  /* 16.65:1 · titulares. Sustituye a #000 siempre. */
  --tinta-700: #5a4f44;  /*  7.96:1 · cuerpo.                              */
  --tinta-600: #796e63;  /*  4.97:1 · tenue. PISO del texto.               */
  --tinta-500: #958a80;  /*  3.37:1 · NO ES TEXTO. Bordes, iconos.         */
  --tinta-300: #d9d3cd;  /* líneas y divisores.                            */
  --tinta-200: #ece7e2;  /* superficie deshabilitada.                      */

  /* ── SUPERFICIES · sacadas del cuerpo del robot ─────────────────── */
  --blanco:     #ffffff;
  --crema-050:  #fbf6ed;  /* lavado de sección.                            */
  --crema-100:  #f8f0e2;  /* tarjeta, zona de ilustración.                 */
  --crema-200:  #f0e4cc;  /* = cuerpo literal del robot. Pie y cierre.     */
  --carbon-900: #14110c;  /* único sitio donde el ámbar brillante SÍ es
                             texto: --ambar-500 sobre carbón da 8.87:1.    */

  /* ── tipografía ──────────────────────────────────────────────────── */
  --display: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", Roboto, system-ui, sans-serif;
  --texto:   "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --peso-display: 1000;   /* lo que iguala a Feather.                      */
  --peso-cuerpo: 500;     /* piso. Nunca 400: el 400 adelgaza la página.   */
  --peso-fuerte: 700;
  --peso-boton: 800;

  --t-heroe:   clamp(34px, 6vw, 60px);
  --t-seccion: clamp(30px, 4.4vw, 46px);
  --t-h3: 23px;
  --t-cuerpo: 18px;
  --t-chico: 15px;

  --alto-display: 1.06;
  --alto-cuerpo: 1.56;
  --track-display: -0.02em;
  --track-boton: 0.06em;

  /* ── geometría ───────────────────────────────────────────────────── */
  --radio-boton: 12px;
  --radio-tarjeta: 16px;
  --radio-chip: 999px;
  --labio-primario: 4px;   /* la jerarquía se expresa en PROFUNDIDAD */
  --labio-secundario: 2px;
  --borde: 2px;

  /* ── ritmo ───────────────────────────────────────────────────────── */
  --ancho: 1120px;
  --ancho-texto: 480px;
  --ancho-ilustracion: 500px;
  --gap-fila: 88px;
  --aire: 96px;
  --aire-movil: 64px;
  --alto-nav: 72px;
  --margen: 20px;

  /* ── movimiento ──────────────────────────────────────────────────── */
  --dur-color: 120ms;
  /* Dos curvas y ya. El resorte pasa de 1 y regresa: es lo que le da el
     rebote seco de calcomania. La suave no rebota, y sirve para opacidad,
     donde un rebote se ve como parpadeo. */
  --curva-resorte: cubic-bezier(.34, 1.56, .64, 1);
  /* Mas rebote que el resorte y con vuelta lenta: es la "gelatina". Se guarda
     para movimientos que el visitante mira de frente, como el relevo de la
     nav. Usarla en todo la vuelve mareo. */
  --curva-gelatina: cubic-bezier(.22, 1.45, .36, 1);
  --curva-suave: cubic-bezier(.22, 1, .36, 1);
  --dur-entrada: 460ms;
  --paso-cascada: 70ms;
  /* El press es INSTANTÁNEO. Es lo que da sensación de tecla mecánica;
     cualquier transición en transform lo vuelve blando y "web". */
}

/* ═══════════════════════════════════ base ═══════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta-700);
  font-family: var(--texto);
  font-weight: var(--peso-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--peso-display);
  line-height: var(--alto-display);
  letter-spacing: var(--track-display);
  color: var(--tinta-900);
  text-wrap: balance;
}
h1 { font-size: var(--t-heroe); }
h2 { font-size: var(--t-seccion); }
h3 { font-size: var(--t-h3); font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }

p { margin: 0; max-width: 46ch; }
p + p { margin-top: 16px; }

/* Todo enlace lleva subrayado además del color: el color nunca es el
   único portador del significado. */
a {
  color: var(--azul-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* El :not(.btn) NO es cosmetico, es la misma trampa que en la banda oscura:
   `a:visited` tiene especificidad 0,1,1 y le gana a `.btn-primario`, que es
   0,1,0. Sin esto el texto del boton se pone AZUL en cuanto el visitante
   entra una vez al demo — y solo le pasa a quien ya visito, que es
   justamente el caso que nunca ves mientras lo desarrollas. */
a:not(.btn):hover, a:not(.btn):visited { color: var(--azul-700); }

:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* video entra aqui a proposito: sin el, un <video width="860"> se pinta a sus
   860px naturales dentro de un hueco de 430 y se desborda. Paso exactamente
   eso la primera vez. */
img, video { display: block; max-width: 100%; height: auto; }

.caja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* ═══════════════════════════════ tipografía ═════════════════════════ */

/* El rótulo que abre cada sección. Va en ámbar-800, que sí es texto. */
.rotulo {
  display: block;
  font-family: var(--texto);
  font-weight: var(--peso-fuerte);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-800);
}

/* EL MARCADOR. Así conservamos la energía del ámbar sin ponerlo en los
   glifos: el color de marca vive en el área, detrás de la palabra.

   Va como SVG y no como rectángulo de CSS porque un rectángulo perfecto es lo
   único de la página que se delata como hecho por computadora. Este trazo
   tiene los bordes ondulados y las puntas redondeadas, como un plumón que se
   levanta del papel. No hay forma pura en CSS de conseguirlo: border-radius
   da esquinas regulares y clip-path con polígono da aristas duras.

   preserveAspectRatio="none" lo estira al ancho de la palabra. La ondulación
   es sobre todo vertical, así que estirar en horizontal no la deforma.

   El SVG va inline en un data URI: una petición menos, y el color viaja con
   la forma en vez de quedar en un archivo que alguien puede desincronizar. */
.marca {
  position: relative;
  font-style: normal;
  /* Sin esto, si la frase marcada se parte en dos líneas el ::after se ancla
     al primer fragmento y el ámbar aparece como una barra suelta al final del
     renglón. Pasa con dos palabras —"a tiempo", "in time", "à temps"— en
     cuanto cambia el ancho o el idioma. */
  white-space: nowrap;
}
.marca::after {
  content: "";
  position: absolute;
  left: -0.09em; right: -0.09em;
  bottom: 0.04em;
  height: 0.72em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2C4%20C2%2C2%206%2C1%2010%2C2%20C48%2C0%2090%2C6%20130%2C2%20C164%2C0%20186%2C4%20195%2C2%20C199%2C1%20201%2C4%20199%2C7%20L199%2C18%20C201%2C21%20198%2C24%20194%2C23%20C160%2C25%20120%2C17%2078%2C22%20C44%2C25%2016%2C21%206%2C23%20C2%2C24%200%2C21%202%2C18%20Z%22%20fill%3D%22%23f4a01c%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}
h1, h2 { isolation: isolate; }   /* el contexto que encierra al marcador */

.tenue { color: var(--tinta-600); font-size: var(--t-chico); }

/* El veredicto: la frase que remata una sección. Va en display y a tamaño de
   subtítulo, con una barra ámbar al costado — el acento vive en el ÁREA, no en
   los glifos, igual que el marcador. */
.veredicto {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 6px solid var(--ambar-500);
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta-900);
  max-width: 30ch;
}

/* ═════════════════════════════════ botones ══════════════════════════
   El patrón: el elemento NO tiene fondo. La cara vive en un ::before con
   z-index:-1, y el labio es un box-shadow de blur 0 sobre ese ::before.

   Dos detalles sin los cuales esto no funciona, y los dos son el bug
   número uno al clonar el patrón:

   1. transform: translateZ(0) crea el contexto de apilamiento que
      encierra al ::before. Sin él, el ::before se va detrás del fondo de
      la sección y el botón DESAPARECE.
   2. El labio se reserva con un border-bottom transparente, para que la
      altura de layout ya lo incluya. Sin eso, al hundirse el botón
      empuja lo que tenga debajo y las filas bailan. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--texto);
  font-weight: var(--peso-boton);
  font-size: var(--t-chico);
  line-height: 1.2;
  letter-spacing: var(--track-boton);
  text-transform: uppercase;
  transform: translateZ(0);
  border-radius: var(--radio-boton);
  transition: none;
  /* las tres cosas que lo hacen sentir nativo en el teléfono */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn:focus-visible { outline: 3px solid var(--azul-600); outline-offset: 3px; }

/* --- primario: cara ámbar, labio de 4px --- */
.btn-primario {
  height: 52px;
  padding: 0 24px;
  color: var(--tinta-900);                     /* 7.84:1 sobre el ámbar */
  border-style: solid;
  border-color: transparent;
  border-width: 0 0 var(--labio-primario);
}
.btn-primario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ambar-500);
  /* El contorno le da al botón su 3:1 contra el lienzo blanco. Un botón
     ámbar flotando sin contorno es un fallo de accesibilidad aunque su
     texto pase. */
  border: var(--borde) solid var(--ambar-700);
  border-radius: var(--radio-boton);
  box-shadow: 0 var(--labio-primario) 0;       /* sin color: hereda el de abajo */
  color: var(--ambar-800);                     /* ← así se pinta el labio */
  transition: background-color var(--dur-color) linear;
}
.btn-primario:hover::before { background-color: var(--ambar-400); }
.btn-primario:active { transform: translateY(var(--labio-primario)) translateZ(0); }
.btn-primario:active::before { box-shadow: none; }

/* --- secundario: otra geometría, no el primario recoloreado --- */
.btn-secundario {
  height: 52px;
  padding: 0 22px;
  color: var(--ambar-800);
  border-style: solid;
  border-color: transparent;
  border-width: 2px 2px var(--labio-secundario);
}
.btn-secundario::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background-color: var(--blanco);
  border: var(--borde) solid var(--ambar-700);
  border-radius: var(--radio-boton);
  box-shadow: 0 var(--labio-secundario) 0;
  color: var(--ambar-700);   /* contorno y labio del mismo color: el labio
                                lee como continuación del trazo */
  transition: background-color var(--dur-color) linear;
}
.btn-secundario:hover::before { background-color: var(--crema-050); }
.btn-secundario:active { transform: translateY(var(--labio-secundario)) translateZ(0); }
.btn-secundario:active::before { box-shadow: none; }

.btn-compacto { height: 44px; padding: 0 18px; }

/* ═══════════════════════════════════ nav ════════════════════════════ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--alto-nav);
  background: var(--blanco);
  /* nace transparente para que al encenderse no haya salto de 2px */
  border-bottom: var(--borde) solid transparent;
  transition: border-color 300ms linear;
}
.nav[data-scroll="si"] { border-bottom-color: var(--tinta-300); }
.nav .caja {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  position: relative;            /* el bloque contenedor del boton absoluto */
}

/* Los dos enlaces se deslizan como una pieza para abrirle sitio al boton.
   El ancho lo mide el script y lo deja en --ancho-cta: fijarlo a mano se
   rompe en cuanto alguien cambia el texto del boton. */
.nav-enlaces { display: flex; align-items: center; gap: 8px; }
.hueco { flex: 1; }

.marca-aia {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--tinta-900);
  text-decoration: none;
}
.marca-aia:hover, .marca-aia:visited { color: var(--tinta-900); }

.pildora {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radio-chip);
  border: var(--borde) solid transparent;
  font-family: var(--texto);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-chico);
  color: var(--tinta-700);
  text-decoration: none;
  transition: background-color var(--dur-color) linear;
}
.pildora:hover { background-color: var(--crema-100); color: var(--tinta-700); }
.pildora:visited { color: var(--tinta-700); }
.pildora[aria-current="page"] {
  background-color: var(--ambar-100);
  border-color: var(--ambar-700);
  color: var(--ambar-800);
}

/* EL CTA DE LA NAV SE TURNA CON EL DEL HEROE.
   Nunca se ven los dos a la vez: el de la nav entra en cuanto el del heroe
   sale de pantalla, y se va cuando vuelve. Asi la accion siempre esta a un
   clic sin gastar dos veces el ambar en la misma vista, que es lo que diluye
   cual es LA accion.

   Se queda en el layout siempre (opacidad, no display) para que la nav no
   brinque al aparecer. Como la barra alinea a la derecha, el hueco invisible
   se lee como margen. */
/* EL RELEVO, EN DOS TIEMPOS.
   Mostrar: primero los enlaces abren el hueco, y cuando ya cabe entra el
   boton. Ocultar: al reves, primero se va el boton y solo entonces los
   enlaces recuperan su sitio. Nunca se pisan.

   La coreografia es puro transition-delay, sin una linea de JS: el estado de
   ocultar es el de por defecto, asi que sus retrasos gobiernan el camino de
   regreso. */
.nav .btn {
  position: absolute;
  /* var(--margen) y no 0: un elemento absoluto se posiciona contra la caja de
     RELLENO del contenedor, asi que right:0 lo saca 20px mas a la derecha que
     el borde de contenido donde viven los enlaces. Se veia desalineado. */
  right: var(--margen);
  opacity: 0;
  pointer-events: none;
  /* OJO: translateZ(0) tiene que sobrevivir. Es lo que encierra al ::before
     con z-index:-1; si el scale lo pisa, el boton DESAPARECE. */
  transform: translateZ(0) scale(.8);
  transition: opacity 150ms linear 0ms,
              transform 300ms var(--curva-gelatina) 0ms;
}
.nav[data-cta="si"] .btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0);
  transition: opacity 200ms linear 300ms,
              transform 460ms var(--curva-gelatina) 300ms;
}

.nav-enlaces {
  transform: translateX(0);
  transition: transform 420ms var(--curva-gelatina) 200ms;   /* al volver, espera al boton */
}
.nav[data-cta="si"] .nav-enlaces {
  transform: translateX(calc(-1 * var(--ancho-cta, 0px)));
  transition-delay: 0ms;                                     /* al abrir, va primero */
}

/* El enlace de salto vive fuera de pantalla hasta que recibe el foco. No se
   usa display:none ni visibility:hidden porque eso lo saca del orden de
   tabulacion y deja de existir para quien lo necesita. */
.saltar {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  padding: 12px 18px;
  background: var(--ambar-500);
  border: var(--borde) solid var(--ambar-700);
  border-radius: var(--radio-boton);
  color: var(--tinta-900);
  font-weight: var(--peso-boton);
  text-decoration: none;
  transition: top 180ms var(--curva-suave);
}
/* :focus y NO solo :focus-visible. El enlace de saltar es alcanzable
   unicamente con teclado, asi que la distincion no aporta nada, y
   :focus-visible no dispara con foco programatico ni en algunos navegadores
   asistivos. Aqui el riesgo de que no aparezca es peor que el de que aparezca
   de mas. */
.saltar:focus, .saltar:focus-visible { top: 12px; color: var(--tinta-900); }

/* El selector de idioma. Tres códigos de dos letras, no banderas: una bandera
   representa un país, no una lengua, y elegir cuál poner para el inglés o el
   español ofende a alguien siempre. */
.idiomas { display: flex; gap: 2px; align-items: center; }
.idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  font-family: var(--texto);
  font-weight: var(--peso-fuerte);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta-600);
  transition: background-color var(--dur-color) linear;
}
.idiomas a:hover, .idiomas a:visited { color: var(--tinta-700); }
.idiomas a:hover { background: var(--crema-100); }
.idiomas a[aria-current] {
  background: var(--ambar-100);
  color: var(--ambar-800);
}

.shell { padding-top: var(--alto-nav); }

/* ═══════════════════════════════ secciones ══════════════════════════ */

.seccion { padding: var(--aire-movil) 0; }
.seccion-crema { background: var(--crema-050); }

/* BLANCO PURO, Y ES UN COMPROMISO, NO UN DEFECTO.
   La seccion que aloja al personaje se fija en #ffffff explicitamente porque
   de ahi depende el plan de video: un MP4 no lleva alfa, asi que el clip se
   entrega con fondo blanco plano y se funde con la seccion. Si alguien le
   pone un lavado crema encima, el video aparece como un rectangulo blanco
   recortado sobre la crema. */
.seccion-blanca { background: var(--blanco); }

/* Y esto es lo que hace el empate a prueba de balas: el video se codifica en
   YUV y el blanco puede volver como #fefefe o con bandeo en los bordes.
   multiply resuelve los dos: blanco x blanco = blanco (la costura desaparece)
   y los pixeles del robot pasan intactos sobre blanco.
   SOLO funciona sobre fondo blanco o casi. Sobre crema tine, sobre carbon
   mata el clip. De ahi la regla: video unicamente en secciones blancas. */
.media-sobre-blanco { mix-blend-mode: multiply; }

/* Dos <video> encimados para poder variar de clip sin recargar nada: mientras
   uno corre, el otro ya trae el siguiente precargado. El fundido corto tapa el
   cambio de pose entre clips que no terminan donde empiezan.

   Sin este apilamiento habria que cambiarle el src al mismo elemento, y eso
   provoca un parpadeo al poster mientras carga. */
/* LA VENTANA.
   El clip entregado cumple el canon —cuerpo al 64%, ojos al 38%— y para
   lograrlo lleva relleno blanco. Ese relleno sirve DENTRO del archivo, para
   que todas las piezas se alineen entre si, pero en la pagina es aire muerto:
   medido, el robot es apenas el 37% del area y el 63% es blanco. Ese aire
   empujaba el texto y se comia la pantalla en movil.

   La solucion no es recortarle el aire al archivo, que romperia el canon y lo
   volveria inservible para otras secciones. Es taparlo con una ventana: el
   asset se queda canonico y la pagina decide su encuadre. Como todas las
   piezas comparten geometria, recortarlas igual las mantiene alineadas.

   Los numeros salen de medir el contenido en todos los cuadros del clip:
   el robot vive en 506x547 dentro de 860, empezando en (176,184). La ventana
   le deja un 5% de respiro alrededor. */
.escena-robot {
  --lienzo: 860;                 /* el lado del video entregado */
  --vx: 133; --vy: 141;          /* esquina de la ventana, en pixeles del lienzo */
  --vw: 592; --vh: 633;          /* tamaño de la ventana */
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--vw) / var(--vh);
  background: var(--blanco);     /* explicito: mix-blend-mode necesita fondo
                                    contra que mezclar dentro del contenedor */
}
.escena-robot video {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--lienzo) / var(--vw) * 100%);
  max-width: none;               /* la regla global `img, video {max-width:100%}`
                                    lo capaba al ancho del contenedor y anulaba
                                    el acercamiento entero */
  height: auto;
  /* El desplazamiento va en translate y no en top/left porque los porcentajes
     de translate se resuelven contra el PROPIO elemento, no contra el
     contenedor. Asi el mismo par de numeros sirve para los dos ejes. */
  transform: translate(calc(var(--vx) / var(--lienzo) * -100%),
                       calc(var(--vy) / var(--lienzo) * -100%));
}
.escena-robot video {
  transition: opacity 260ms linear;
}
.escena-robot video[data-fondo] { opacity: 0; pointer-events: none; }
.seccion-robot { background: var(--crema-100); }  /* para que el cuerpo crema
                                                     del robot se funda con
                                                     la superficie */

/* La fila editorial: texto a un lado, ilustración al otro.

   La ilustración va suelta sobre la superficie, sin recuadro ni contenedor.
   El PNG trae su propia sombra de contacto y un reflejo tenue: eso es lo que
   la asienta. Un marco alrededor del personaje lo despega de la página en vez
   de integrarlo. */
.fila { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.fila-texto { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.fila-arte { width: min(320px, 78vw); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pie-acciones {
  margin-top: 14px;
  font-size: var(--t-chico);
  color: var(--tinta-600);
}

/* ═══════════════════════════════ tarjetas ═══════════════════════════ */

.rejilla {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tarjeta {
  background: var(--crema-050);
  border: var(--borde) solid var(--tinta-300);
  border-radius: var(--radio-tarjeta);
  padding: 26px;
}
.tarjeta p { margin-top: 10px; font-size: 17px; }
.tarjeta-destacada { background: var(--crema-100); border-color: var(--ambar-700); }

/* El número de un paso. Ámbar de relleno con tinta encima: el uso
   canónico del acento. */
.paso-n {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radio-chip);
  background: var(--ambar-500);
  border: var(--borde) solid var(--ambar-700);
  color: var(--tinta-900);
  font-family: var(--display);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  flex: none;
}

/* Los pasos numerados. Lista real (<ol>), no divs: un lector de pantalla
   tiene que oir "1 de 3". El marcador propio se apaga con list-style. */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
.pasos li { display: flex; gap: 18px; align-items: flex-start; }
.pasos h3 { margin-bottom: 6px; }
.pasos p { font-size: 17px; }

.canal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: var(--borde) solid var(--tinta-300);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  font-weight: var(--peso-fuerte);
  color: var(--tinta-900);
  font-size: 17px;
}
.canal svg { flex: none; }

/* ══════════════════════════════ banda y pie ═════════════════════════ */

/* El único lugar donde el ámbar brillante puede ser texto: sobre carbón
   da 8.87:1, que es AAA. Es a la vez el uso más expresivo y el más
   accesible del color. */
.banda-oscura {
  background: var(--carbon-900);
  color: #cfc7bc;
  padding: var(--aire-movil) 0;
}
.banda-oscura h2 { color: var(--ambar-500); }
.banda-oscura .rotulo { color: var(--ambar-400); }
.banda-oscura a:not(.btn) { color: var(--ambar-400); }
.banda-oscura a:not(.btn):hover, .banda-oscura a:not(.btn):visited { color: var(--ambar-400); }
/* El :not(.btn) NO es cosmetico. Sin el, `.banda-oscura a` (0,1,1) le gana a
   `.btn-primario` (0,1,0) y le pinta el texto del boton en ambar-400 sobre una
   cara ambar-500: el boton queda como una pildora naranja SIN TEXTO. Pasa solo
   dentro de la banda, que es justo donde vive el CTA final. */

.pie {
  background: var(--crema-200);   /* el color del cuerpo del robot: la
                                     página termina fundiéndose con él */
  border-top: var(--borde) solid var(--tinta-500);
  padding: 64px 0 40px;
  color: var(--tinta-700);        /* aquí --tinta-600 ya no es válido */
}
.pie-rejilla { display: grid; gap: 32px; grid-template-columns: 1fr; }
.pie h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--tinta-900);
}
.pie a:not(.btn) { color: var(--azul-600); }   /* 5.29:1 sobre crema-200 */
.pie-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: var(--borde) solid var(--tinta-500);
  font-size: var(--t-chico);
}

/* ══════════════════════════════ escritorio ══════════════════════════ */

@media (min-width: 1080px) {
  .seccion { padding: var(--aire) 0; }
  .banda-oscura { padding: var(--aire) 0; }

  .fila {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-fila);
  }
  /* UNA declaración para alternar, no dos plantillas */
  .fila-invertida { flex-direction: row-reverse; }
  .fila-texto { flex: 0 0 var(--ancho-texto); }
  .fila-arte  { flex: 0 0 var(--ancho-ilustracion); width: auto; }

  /* El heroe reparte distinto: el titular va a 60px y necesita mas columna.
     600 + 88 + 430 = 1118 <= 1120.

     Medido, no estimado: el renglon mas largo del titular mide 556px, asi que
     en 560 quedaba a 4px del borde — un ancho de fuente distinto en otra
     maquina lo desbordaba. Con 600 quedan 44px de holgura.

     Y ojo: text-wrap:balance NO reparte este titular. Da exactamente el mismo
     corte que normal, porque los cortes los fijan los anchos de las palabras.
     No cuentes con balance para arreglar un titular apretado: mide. */
  .fila-heroe .fila-texto { flex-basis: 600px; }
  /* Con la ventana quitando el aire, la separacion de 88px ya no hace falta:
     el respiro lo da el 5% que la ventana deja alrededor del robot. Ese ancho
     recuperado se lo pasamos a la ilustracion. 600 + 48 + 472 = 1120. */
  .fila-heroe { gap: 48px; }
  .fila-heroe .fila-arte  { flex-basis: 472px; }

  .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }

  /* Tres pasos en fila: cada uno es una columna, no un renglon. */
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .pasos li { flex-direction: column; gap: 16px; }
}

@media (max-width: 719px) {
  .oculta-movil { display: none; }

  /* La × del chat tiene que ser tocable: 27px se queda corto. */
  .chat-cerrar { min-width: 44px; min-height: 44px; }
  /* en móvil los botones del héroe van a ancho completo, el primario arriba */
  .acciones-heroe { flex-direction: column; align-items: stretch; }
  .acciones-heroe .btn { width: 100%; }
}

/* ═══════════════════════════════ movimiento ═════════════════════════
   El estado escondido solo existe bajo html.movimiento, y esa clase la pone
   un script en el <head>. Sin JS, o si el script falla, la pagina se ve
   entera: nunca se esconde contenido que no tengamos forma de mostrar. */

html.movimiento .aparece {
  opacity: 0;
  transform: translateY(22px);
}
/* Variantes laterales para las filas editoriales: el texto entra desde su
   lado y la ilustracion desde el suyo, asi la fila se ARMA en vez de solo
   aparecer. Es el efecto que mas se nota y el que menos cuesta. */
html.movimiento .aparece-izq { transform: translateX(-28px); }
html.movimiento .aparece-der { transform: translateX(28px); }
html.movimiento .aparece-escala { transform: scale(.92); }
/* Solo opacidad, sin transform. Es para elementos que YA tienen una animacion
   propia de transform —los objetos que flotan—: si la entrada tambien tocara
   transform, las dos se pisarian y el flotado se congelaria. */
html.movimiento .aparece-fundido { opacity: 0; }
html.movimiento .aparece-fundido.dentro {
  opacity: 1;
  transition: opacity 620ms var(--curva-suave);
  transition-delay: calc(var(--i, 0) * 180ms);
}
html.movimiento .aparece.dentro,
html.movimiento .aparece-izq.dentro,
html.movimiento .aparece-der.dentro,
html.movimiento .aparece-escala.dentro {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-entrada) var(--curva-suave),
              transform var(--dur-entrada) var(--curva-resorte);
  transition-delay: calc(var(--i, 0) * var(--paso-cascada));
}

/* El numero del paso entra girando un poco: es el unico elemento que rota en
   toda la pagina, y por eso lee como acento y no como adorno. */
html.movimiento .aparece .paso-n { transform: scale(.5) rotate(-12deg); }
html.movimiento .aparece.dentro .paso-n {
  transform: none;
  transition: transform 520ms var(--curva-resorte);
  transition-delay: calc(var(--i, 0) * var(--paso-cascada) + 120ms);
}

/* Las tarjetas y los canales se levantan 2px al pasar el raton. Sin sombra:
   el sistema no admite blur, asi que el relieve lo da el desplazamiento y el
   borde, no una sombra suave. */
.tarjeta, .canal {
  transition: transform 200ms var(--curva-suave),
              border-color var(--dur-color) linear;
}
.tarjeta:hover, .canal:hover {
  transform: translateY(-2px);
  border-color: var(--tinta-500);
}

/* Duolingo no tiene ni un bloque de estos en sus bundles. Es una omisión
   real, no algo que copiar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn-primario:active,
  .btn-secundario:active { transform: translateZ(0); }
  .nav .btn { transform: translateZ(0); }
  .nav-enlaces, .nav[data-cta="si"] .nav-enlaces { transition-duration: 0.01ms !important; }
  html.movimiento .aparece,
  html.movimiento .aparece-izq,
  html.movimiento .aparece-der,
  html.movimiento .aparece-escala,
  html.movimiento .aparece-fundido,
  html.movimiento .aparece .paso-n { opacity: 1; transform: none; }
  .tarjeta:hover, .canal:hover { transform: none; }
}

/* ═══════════════════════════════ el chat ════════════════════════════
   PROVISIONAL Y HONESTO. Todavia no hay backend conectado a esta ventana, y
   un chat falso que finja contestar seria mentirle al visitante. Asi que la
   respuesta dice la verdad y ofrece el camino que SI funciona: Telegram.

   La pregunta viene escrita porque es exactamente la que el titular le acaba
   de sembrar. El visitante no tiene que redactar nada; solo decidir si la
   manda. */

.chat-fondo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(36, 29, 21, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms linear;
}
.chat-fondo[data-abierto] { opacity: 1; pointer-events: auto; }

.chat {
  position: fixed;
  z-index: 41;
  right: 20px; bottom: 20px;
  width: min(400px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: var(--borde) solid var(--tinta-900);
  border-radius: var(--radio-tarjeta);
  transform: translateY(24px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms linear,
              transform 380ms var(--curva-gelatina);
}
.chat[data-abierto] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.chat-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: var(--borde) solid var(--tinta-300);
}
.chat-barra strong {
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
  color: var(--tinta-900);
}
.chat-luz {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--ambar-500);
  flex: none;
}
.chat-cerrar {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--tinta-600);
  padding: 4px 6px;
  border-radius: 8px;
}
.chat-cerrar:hover { background: var(--crema-100); color: var(--tinta-900); }

/* El aviso de IA. Discreto pero permanente: la ley pide que se entienda, no
   que grite, y un aviso que solo aparece en el primer mensaje se pierde en
   cuanto la conversación avanza. */
.chat-ia {
  margin: 0;
  padding: 8px 16px;
  background: var(--ambar-100);
  border-bottom: var(--borde) solid var(--ambar-700);
  color: var(--ambar-800);
  font-size: 13px;
  line-height: 1.35;
  font-weight: var(--peso-fuerte);
  max-width: none;
}

.chat-hilo {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.burbuja {
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.45;
}
.burbuja-bot {
  align-self: flex-start;
  background: var(--crema-100);
  border: var(--borde) solid var(--tinta-300);
  color: var(--tinta-700);
  border-bottom-left-radius: 6px;
}
.burbuja-yo {
  align-self: flex-end;
  background: var(--ambar-500);
  border: var(--borde) solid var(--ambar-700);
  color: var(--tinta-900);
  border-bottom-right-radius: 6px;
  font-weight: var(--peso-fuerte);
}
.burbuja a { color: var(--azul-600); }

.chat-pie {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: var(--borde) solid var(--tinta-300);
}
.chat-pie input {
  flex: 1;
  min-width: 0;
  font: var(--peso-cuerpo) 16px/1.3 var(--texto);
  color: var(--tinta-900);
  padding: 12px 14px;
  border: var(--borde) solid var(--tinta-500);
  border-radius: 12px;
  background: var(--blanco);
}
.chat-pie input:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 1px;
  border-color: var(--tinta-900);
}
.chat-enviar { height: 46px; padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .chat, .chat-fondo { transition-duration: 0.01ms !important; }
}

/* ═════════════════════════ escena con props ═════════════════════════
   El robot ancla y los objetos flotan alrededor. Van en archivos separados a
   proposito: asi cada uno se dimensiona, se coloca y entra por su cuenta.
   Una sola imagen plana no se puede animar por partes.

   Las tres duraciones son numeros primos entre si (7s, 9s, 11s) para que los
   ciclos NUNCA se sincronicen. Si coincidieran, los tres subirian y bajarian
   a la vez y se veria como un carrusel en vez de objetos sueltos. */

.escena { position: relative; width: 100%; }
/* SELECCION POSITIVA, no exclusion.
   Primero esto era `.escena > img`, que con especificidad (0,1,1) le ganaba a
   `.prop-precio` (0,1,0) y pintaba los objetos al 100% del ancho. Lo parche
   con :not(.prop)... y al agregar los manpu volvio a pasar exactamente igual,
   porque la lista de exclusiones hay que acordarse de ampliarla cada vez.

   La forma correcta es nombrar lo que SI se estira. Una clase nueva que flote
   ya no rompe nada por olvido. */
.escena > img.ancla { display: block; width: 100%; }

.prop {
  position: absolute;
  display: block;
  filter: none;
}
.prop-precio  { width: 22%; top: 4%;  left: -2%; }
.prop-horario { width: 34%; top: 12%; right: -4%; }
.prop-caja    { width: 27%; bottom: 6%; left: 2%; }

@media (prefers-reduced-motion: no-preference) {
  .prop-precio  { animation: flota-a 7s  ease-in-out infinite; }
  .prop-horario { animation: flota-b 9s  ease-in-out infinite; }
  .prop-caja    { animation: flota-c 11s ease-in-out infinite; }
}

/* Recorridos distintos, no el mismo con otro retraso: si los tres hicieran el
   mismo gesto se leerian como un sistema mecanico. */
@keyframes flota-a {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes flota-b {
  0%, 100% { transform: translateY(-6px) rotate(2deg); }
  50%      { transform: translateY(10px) rotate(-2deg); }
}
@keyframes flota-c {
  0%, 100% { transform: translateY(4px) rotate(1deg); }
  50%      { transform: translateY(-12px) rotate(-2deg); }
}

/* Seccion 3. Los objetos NO estan colocados al azar: van en el orden en que
   los pasos los nombran, de arriba a abajo —fuentes, respuesta, pregunta— asi
   que la escena se lee en la misma direccion que el texto. */
.prop-carpeta  { width: 25%; top: -2%;   left: -7%; }
.prop-burbuja  { width: 22%; top: 26%;   right: -7%; }
.prop-telefono { width: 17%; bottom: 2%; right: 4%; }

@media (prefers-reduced-motion: no-preference) {
  .prop-carpeta  { animation: flota-b 8s  ease-in-out infinite; }
  .prop-burbuja  { animation: flota-c 10s ease-in-out infinite; }
  .prop-telefono { animation: flota-a 13s ease-in-out infinite; }
}

/* LOS MANPU. Los signos del manga no flotan como los objetos: ORBITAN cerca
   de la cabeza, con un recorrido corto y mas rapido. Esa diferencia de ritmo
   es la que hace que se lean como pensamiento del personaje y no como otro
   objeto suelto en la escena. */
.manpu { position: absolute; }
.manpu-pregunta { width: 13%; top: -4%; left: 46%; }
.manpu-gota     { width: 9%;  top: 14%; left: 30%; }

@media (prefers-reduced-motion: no-preference) {
  .manpu-pregunta { animation: orbita 4.5s ease-in-out infinite; }
  .manpu-gota     { animation: orbita 5.5s ease-in-out infinite reverse; }
}
@keyframes orbita {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  35%      { transform: translate(5px, -9px) rotate(4deg); }
  70%      { transform: translate(-4px, -4px) rotate(-2deg); }
}

/* En movil los props se encogen y se meten mas, para no invadir al robot
   cuando la escena mide 320px de ancho. */
@media (max-width: 719px) {
  .prop-precio  { width: 19%; left: 0; }
  .prop-horario { width: 29%; right: 0; }
  .prop-caja     { width: 23%; }
  .prop-carpeta  { width: 25%; left: 0; }
  .prop-burbuja  { width: 22%; right: 0; }
  .prop-telefono { width: 17%; }
}

/* ─────────────────────────────────────────────────────────────────────
   ESTE BLOQUE VA AL FINAL A PROPOSITO.
   `html.movimiento .aparece-izq` tiene la misma especificidad aqui que en su
   definicion base, asi que lo unico que decide es el ORDEN. Cuando estaba
   arriba, la regla base lo pisaba y en movil los laterales seguian saliendose
   del viewport aunque el CSS pareciera correcto.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  /* En movil las entradas laterales se vuelven verticales. Con 20px de margen
     de pagina, un translateX de -28px deja el contenido en -8px: FUERA del
     viewport. Y de todos modos, en 375px un movimiento lateral casi no se
     percibe. */
  html.movimiento .aparece-izq,
  html.movimiento .aparece-der { transform: translateY(22px); }
}

/* Portada 2026-09: blanco, carbón y violeta. Se limita a .portada para
   conservar la dirección artística de la historia de Juan aprobada. */
.portada {
  --p-ink: #232127;
  --p-copy: #605c68;
  --p-accent: #7044d9;
  --p-hover: #6135c7;
  --p-light: #f4f1fa;
  --p-line: #e7e3ed;
  --tinta-900: var(--p-ink);
  --tinta-700: var(--p-copy);
  --azul-600: var(--p-accent);
  --azul-700: var(--p-hover);
  background: #fff;
  color: var(--p-ink);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}
.portada *,
.portada *::before,
.portada *::after {
  box-sizing: border-box;
}
.portada :is(h1, h2, h3, p, ol) {
  margin: 0;
}
.portada :is(h1, h2, h3) {
  font-family: var(--display);
  color: var(--p-ink);
  font-weight: 900;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.portada h1 {
  font-size: clamp(40px, 4.9vw, 68px);
  line-height: 1.06;
  max-width: 11.8ch;
}
.portada h1 > span,
.portada h2 > span {
  color: var(--p-accent);
}
.portada h2 {
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.12;
}
.portada h3 {
  font-size: 23px;
  line-height: 1.25;
}
.portada a {
  color: inherit;
  text-decoration: none;
}
.portada :is(a, summary):focus-visible {
  outline: 3px solid var(--p-accent);
  outline-offset: 5px;
  border-radius: 6px;
}
.portada section[id] {
  scroll-margin-top: 100px;
}
.portada .p-container {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.portada .p-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fffffff5;
  border-bottom: 1px solid var(--p-line);
}
.portada .p-nav-inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.portada .p-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 1000 28px/1 var(--display);
  letter-spacing: -0.08em;
  flex: 0 0 auto;
}
.portada .p-visor {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  border-radius: 11px;
  background: var(--p-ink);
  box-shadow: 0 0 0 4px #f0edf4;
}
.portada .p-visor i {
  width: 6px;
  height: 6px;
  background: #aa88ff;
  border-radius: 50%;
}
.portada .p-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.portada .p-links a {
  font-size: 14px;
  font-weight: 700;
  padding-block: 14px;
}
.portada .p-links a:hover {
  color: var(--p-accent);
}
.portada .p-languages {
  display: flex;
  align-items: center;
  gap: 2px;
  border-left: 1px solid var(--p-line);
  padding-left: 18px;
}
.portada .p-languages a {
  padding: 10px 7px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--p-copy);
}
.portada .p-languages a[aria-current] {
  color: var(--p-accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.portada .p-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 54px;
  padding: 12px 24px;
  background: var(--p-accent);
  color: white;
  border: 1px solid var(--p-accent);
  border-bottom: 3px solid #4d249f;
  border-radius: 12px;
  font: 800 16px/1.3 var(--display);
  letter-spacing: 0;
  transition:
    background 0.16s,
    transform 0.16s;
}
.portada .p-button > span {
  font-size: 22px;
  line-height: 1;
}
.portada a.p-button:visited,
.portada a.p-button:hover {
  color: #fff;
}
.portada a.p-logo:visited,
.portada a.p-logo:hover {
  color: var(--p-ink);
}
.portada .p-button:hover {
  background: var(--p-hover);
}
.portada .p-button:active {
  transform: translateY(2px);
}
.portada .p-button-secondary {
  background: #fff;
  color: var(--p-ink);
  border-color: var(--p-line);
  border-bottom-color: #d6d0df;
}
.portada a.p-button-secondary:visited,
.portada a.p-button-secondary:hover {
  color: var(--p-ink);
}
.portada .p-button-secondary:hover {
  background: var(--p-light);
}
.portada .p-button-small {
  min-height: 44px;
  padding: 9px 17px;
  gap: 14px;
  font-size: 14px;
}
.portada .p-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--p-copy);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.portada .p-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-accent);
  flex-shrink: 0;
}
.portada .p-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  min-height: min(770px, calc(100svh - 88px));
  padding-block: 76px 64px;
}
.portada .p-hero-copy {
  position: relative;
  z-index: 1;
}
.portada .p-lead {
  margin-top: 24px;
  color: var(--p-copy);
  font-size: 18px;
  line-height: 1.65;
  max-width: 47ch;
}
.portada .p-hero .p-lead {
  max-width: 40ch;
  margin-top: 26px;
}
.portada .p-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.portada .p-note {
  color: var(--p-copy);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
}
.portada .p-hero-art {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
}
.portada .p-hero-art img {
  width: 150%;
  max-width: none;
  margin-left: -27%;
  height: auto;
}
.portada .p-art-caption {
  position: absolute;
  bottom: 8%;
  left: 13%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--p-copy);
  border-left: 2px solid var(--p-line);
  padding-left: 18px;
}
.portada .p-art-caption .p-dot {
  margin-top: 7px;
}
.portada .p-art-caption strong {
  display: block;
  color: var(--p-ink);
  font-weight: 700;
}
.portada .p-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-block: 1px solid var(--p-line);
  padding-block: 26px;
}
.portada .p-principles p {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}
.portada .p-principles span {
  font: 800 12px/1 var(--display);
  color: var(--p-accent);
}
.portada .p-section {
  padding-block: 104px;
}
.portada .p-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.portada .p-art {
  min-width: 0;
}
.portada .p-art img {
  display: block;
  width: 100%;
  height: auto;
}
.portada .p-listen img {
  width: 125%;
  max-width: none;
  margin-left: -10%;
}
.portada .p-verdict {
  margin-top: 24px;
  border-left: 3px solid var(--p-accent);
  padding-left: 16px;
  font-weight: 700;
  font-size: 16px;
}
.portada .p-knowledge {
  background: #f7f5fa;
  padding-block: 88px;
}
.portada .p-section-heading {
  max-width: 650px;
}
.portada .p-section-heading h2 {
  max-width: 21ch;
}
.portada .p-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0;
  list-style: none;
  margin-top: 56px;
}
.portada .p-steps li {
  padding-top: 24px;
  border-top: 1px solid #d9d3e2;
}
.portada .p-step-number {
  display: block;
  font: 900 14px/1 var(--display);
  color: var(--p-accent);
  margin-bottom: 24px;
}
.portada .p-steps p {
  color: var(--p-copy);
  margin-top: 16px;
  font-size: 16px;
  max-width: 34ch;
}
.portada .p-story {
  background: #232127;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  overflow: hidden;
}
.portada .p-story-art {
  position: relative;
  min-height: 540px;
}
.portada .p-story-art img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}
.portada .p-story-tag {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 7px 12px;
  background: #232127cc;
  border: 1px solid #ffffff40;
  color: #fff;
  border-radius: 8px;
  font: 800 13px/1.4 var(--display);
}
.portada .p-story-copy {
  padding: 48px;
  align-self: center;
}
.portada .p-story-copy h2 {
  font-size: clamp(30px, 3vw, 40px);
  color: #fff;
}
.portada .p-story-copy .p-eyebrow {
  color: #c3aaff;
}
.portada .p-story-copy > p:not(.p-eyebrow):not(.p-note) {
  color: #d6d2de;
  margin-top: 24px;
  font-size: 16px;
}
.portada .p-story-copy .p-button {
  margin-top: 28px;
}
.portada .p-story-copy .p-note {
  color: #bdb7c8;
  font-size: 12px;
}
.portada .p-story-route {
  padding: 24px 0 0;
  display: flex;
  counter-reset: story;
  list-style: none;
  justify-content: space-between;
  gap: 24px;
}
.portada .p-story-route li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--p-copy);
  counter-increment: story;
}
.portada .p-story-route li::before {
  content: counter(story);
  color: var(--p-accent);
  font-weight: 700;
}
.portada .p-faq {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 64px;
  padding-bottom: 64px;
}
.portada .p-faq h2 {
  font-size: 32px;
}
.portada .p-faq details {
  border-bottom: 1px solid var(--p-line);
}
.portada .p-faq details:first-child {
  border-top: 1px solid var(--p-line);
}
.portada .p-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-weight: 700;
  font-size: 16px;
}
.portada .p-faq summary::-webkit-details-marker {
  display: none;
}
.portada .p-faq summary span {
  color: var(--p-accent);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}
.portada .p-faq details[open] summary span {
  transform: rotate(45deg);
}
.portada .p-faq details p {
  color: var(--p-copy);
  font-size: 16px;
  padding: 0 30px 24px 0;
}
.portada .p-contact {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  border-top: 1px solid var(--p-line);
  padding-block: 64px;
}
.portada .p-contact .p-button {
  margin-top: 28px;
}
.portada .p-contact .p-note {
  overflow-wrap: anywhere;
}
.portada .p-footer {
  border-top: 1px solid var(--p-line);
  padding-block: 32px;
}
.portada .p-footer .p-container {
  display: flex;
  align-items: center;
  gap: 24px;
}
.portada .p-footer p {
  font-size: 12px;
  color: var(--p-copy);
}
.portada .p-footer a:last-child {
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 12px;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .portada .p-hero-art img {
    animation: p-welcome 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes p-welcome {
    from {
      opacity: 0.3;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (max-width: 1100px) {
  .portada .p-container {
    width: calc(100% - 64px);
  }
  .portada .p-nav-inner {
    gap: 20px;
  }
  .portada .p-links {
    gap: 20px;
  }
  .portada .p-hero {
    padding-block: 56px;
    min-height: 680px;
  }
  .portada .p-split {
    gap: 40px;
  }
  .portada .p-story-copy {
    padding: 32px;
  }
}
@media (max-width: 800px) {
  .portada .p-container {
    width: calc(100% - 40px);
  }
  .portada .p-nav-inner {
    min-height: 72px;
    gap: 16px;
  }
  .portada .p-links {
    display: none;
  }
  .portada .p-languages {
    margin-left: auto;
    border: 0;
    padding: 0;
  }
  .portada .p-button-small {
    font-size: 12px;
    padding-inline: 12px;
    gap: 8px;
  }
  .portada .p-button-small > span {
    display: none;
  }
  .portada .p-logo {
    font-size: 25px;
    gap: 8px;
  }
  .portada .p-visor {
    width: 30px;
    height: 26px;
    gap: 6px;
    border-radius: 9px;
  }
  .portada .p-visor i {
    width: 5px;
    height: 5px;
  }
  .portada .p-hero {
    grid-template-columns: 1fr;
    padding-block: 48px 28px;
    min-height: 0;
  }
  .portada h1 {
    max-width: 16ch;
    font-size: clamp(40px, 7.5vw, 58px);
  }
  .portada .p-hero .p-lead {
    max-width: 45ch;
  }
  .portada .p-hero-art {
    height: clamp(280px, 65vw, 450px);
    margin-top: 4px;
    overflow: hidden;
  }
  .portada .p-hero-art img {
    width: 120%;
    margin-left: -12%;
  }
  .portada .p-art-caption {
    bottom: 2%;
    left: 0;
    font-size: 12px;
    padding-left: 12px;
  }
  .portada .p-principles {
    gap: 16px;
  }
  .portada .p-principles p {
    font-size: 12px;
    display: block;
  }
  .portada .p-principles span {
    display: block;
    margin-bottom: 8px;
  }
  .portada .p-section {
    padding-block: 64px;
  }
  .portada .p-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portada .p-split .p-art {
    grid-row: 2;
    max-width: 500px;
    margin-inline: auto;
  }
  .portada .p-listen img {
    width: 110%;
    margin-left: -5%;
  }
  .portada .p-eyebrow {
    margin-bottom: 20px;
    font-size: 11px;
  }
  .portada .p-knowledge {
    padding-block: 64px;
  }
  .portada .p-steps {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
  }
  .portada .p-steps li {
    padding-left: 44px;
    position: relative;
  }
  .portada .p-step-number {
    position: absolute;
    left: 0;
    top: 28px;
  }
  .portada .p-steps p {
    max-width: none;
    margin-top: 10px;
  }
  .portada .p-story {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }
  .portada .p-story-art {
    min-height: 320px;
  }
  .portada .p-story-art img {
    object-position: center 43%;
  }
  .portada .p-story-copy {
    padding: 32px 24px;
  }
  .portada .p-story-copy h2 {
    font-size: 34px;
  }
  .portada .p-story-route {
    gap: 12px;
  }
  .portada .p-story-route li {
    display: block;
    font-size: 11px;
    flex: 1;
  }
  .portada .p-story-route li::before {
    display: block;
    margin-bottom: 6px;
  }
  .portada .p-faq {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 48px;
  }
  .portada .p-contact {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portada .p-contact .p-art {
    max-width: 450px;
    margin-inline: auto;
  }
  .portada .p-footer .p-container {
    flex-wrap: wrap;
    gap: 16px;
  }
  .portada .p-footer p {
    flex: 1;
  }
  .portada .p-footer a:last-child {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 370px) {
  .portada .p-container {
    width: calc(100% - 32px);
  }
  .portada .p-nav-inner {
    gap: 10px;
  }
  .portada .p-languages a {
    padding-inline: 5px;
    font-size: 11px;
  }
  .portada .p-visor {
    display: none;
  }
  .portada .p-actions .p-button {
    width: 100%;
    justify-content: space-between;
  }
  .portada .p-hero-art {
    height: 270px;
  }
}