/* =====================================================================
   Hay Equipo IA — v2
   Reconstrucción limpia. Hereda tokens/ sin tocarlos; lo que corrige
   está aislado aquí para que el sistema original quede intacto.

   Tres reglas duras que sostienen todo el archivo:

   1 · TRES SUELOS. Toda sección se para sobre --ground-deep,
       --ground-base o --ground-raise. Ningún otro fondo full-bleed
       existe. El contraste entre secciones lo da el suelo, no el glow.

   2 · UNBOUNDED SÓLO EN DECLARACIONES. Es display: geométrica y muy
       ancha. Aguanta hasta cinco palabras. Párrafos, bajadas, títulos
       de tarjeta y UI van en Poppins. Un párrafo en Unbounded es el
       error que hacía ver la página anterior "rara".

   3 · GLOW SÓLO DE FONDO. Las sombras separan planos, no iluminan, y
       ningún elemento lleva halo propio. El único glow es el de luz
       ambiente de [data-glow]: quieto, tenue y detrás de todo.
   ===================================================================== */

/* =====================================================================
   SUELOS — rampa oscura derivada dentro del tono de marca
   ===================================================================== */
:root{
  /* Pasos nuevos, interpolados desde --blue-950 hacia el negro por el
     mismo tono. No inventan color: extienden la rampa hacia abajo. */
  --ground-deep:  #000B1F;  /* hero y CTA final — el fondo del sistema */
  --ground-base:  #00122F;  /* suelo por defecto */
  --ground-raise: #001C4C;  /* banda elevada (= --blue-950) */

  /* Paleta del hero. Salen del dibujo (tools/hero-draw.js: JACA, GREEN,
     el degradé del cielo): son los colores de la ciudad de día, y abajo
     vuelven como acentos para que la página no cambie de mundo después
     del hero. Los 200/300/400 son para sobre oscuro; los 600/700 para
     sobre blanco (dan más de 4,5:1 contra #FFF). */
  --jaca-200:#D3C2F4;  --jaca-400:#A98BE3;  --jaca-600:#7A5FC0;
  --park-300:#9BD36A;  --park-500:#5DAE4E;  --park-700:#347A3D;
  --sky-300: #8BBDF0;  --sky-500: #3F84E2;  --sky-600: #1D56C4;

  --container-pad: clamp(20px, 4vw, 64px);
  --nav-h: 64px;

  /* Tracking por tamaño (apple-design §15): nunca un valor único.
     Cuanto más grande el texto, más negativo. */
  --ls-hero:    -0.05em;
  --ls-h2:      -0.04em;
  --ls-h3:      -0.03em;
  --ls-title:   -0.012em;
  --ls-ui:       0em;

  /* Resortes: response en segundos, damping 1 = crítico (sin rebote).
     Los lee js/v2.js; acá viven para que el sistema tenga un solo
     lugar donde se define el "feel". */
  --spring-response: .38;
  --spring-damping: 1;
}

/* El documento entero es oscuro. data-surface="dark" en <html> ya
   re-mapea toda la semántica de tokens/colors.css. */
html{ background: var(--ground-base); }
body{ background: var(--ground-base); }

/* <picture> sólo elige el archivo (WebP o el original); no es una caja.
   Sin esto, cualquier img{height:100%} medía contra un inline sin alto
   y las fotos de la secuencia y del equipo se colapsaban. */
picture{display:contents}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.wrap--narrow{max-width:var(--container-narrow)}

/* Una sección = un suelo + un ritmo vertical. Nada más. */
.sec{position:relative;padding-block:clamp(72px, 9vw, 128px)}
.sec--deep {background:var(--ground-deep)}
.sec--base {background:var(--ground-base)}
.sec--raise{background:var(--ground-raise)}

/* GLOW DE FONDO — los halos cyan y verde de la marca, como luz ambiente.
   Un halo cyan grande y uno verde más chico que se le monta encima: donde
   se cruzan sale el verde agua característico de Hay Equipo IA. El
   tercero, del otro lado, es violeta jacarandá: el árbol del hero. Mismos
   tonos que --bloom-cyan y --bloom-green (tokens/colors.css) pero en sus
   pasos claros y con menos carga: acá son fondo, no el acento de un
   elemento.

   Tres reglas para que no vuelva la v1:
   · quietos: no animan ni siguen el scroll;
   · el contraste entre secciones lo sigue dando el suelo, no el glow;
   · el lado se alterna sección por sección (left/right/center), para
     que no se lea como un patrón pegado.

   Van en background-image, debajo del contenido y sin capas extra. En
   las escenas ancladas se ponen en el panel sticky (100svh), no en la
   sección: la sección mide doce pantallas y el halo quedaría estirado.
   :is(section,div) sube la especificidad para ganarle al background
   shorthand de los CSS de cada sección, que carga después. */
:is(section, div)[data-glow]{
  /* Pasos claros de la rampa, no los 400: sobre los suelos oscuros los
     400 daban un halo saturado; los claros dan luz, no mancha. */
  --glow-c:rgba(79,214,236,.18);   /* --cyan-300 */
  --glow-g:rgba(182,243,182,.12);  /* --green-200 */
  background-image:
    radial-gradient(ellipse min(760px, 110vw) min(560px, 90vw) at var(--g1x) var(--g1y), var(--glow-c), transparent 70%),
    radial-gradient(ellipse min(520px, 80vw) min(400px, 70vw) at var(--g2x) var(--g2y), var(--glow-g), transparent 70%),
    radial-gradient(ellipse min(600px, 90vw) min(460px, 80vw) at var(--g3x) var(--g3y), rgba(211,194,244,.11), transparent 70%);  /* --jaca-200 */
  background-repeat:no-repeat;
}
[data-glow="left"]  {--g1x:6%; --g1y:22%;--g2x:20%;--g2y:36%;--g3x:94%;--g3y:84%}
[data-glow="right"] {--g1x:94%;--g1y:22%;--g2x:80%;--g2y:36%;--g3x:6%; --g3y:84%}
[data-glow="center"]{--g1x:50%;--g1y:50%;--g2x:62%;--g2y:58%;--g3x:50%;--g3y:50%;
  --glow-c:rgba(79,214,236,.15);--glow-g:rgba(182,243,182,.10)}
@media (prefers-contrast: more){
  :is(section, div)[data-glow]{background-image:none}
}

/* MOTIVOS — piezas del mundo del hero, de noche, en los bordes de
   algunas secciones: la rama de jacarandá, el farol de plaza, la
   avioneta del banner y la luna. Salen de tools/hero-draw.js con la
   misma mano que el hero, así lo de abajo sigue siendo la misma ciudad.
   Uno distinto por sección, nunca repetido, y alternando el lado: dos
   iguales o del mismo lado seguidos se leen como un patrón pegado.

   Van detrás del contenido y delante del suelo: la sección se aísla
   (isolation) y la rama baja a z-index:-1. Así no hay que posicionar
   el .wrap, que cambiaría la referencia de los absolutos de adentro.
   Sin :has() la rama queda detrás del suelo, invisible: degrada sola.

   Siempre en un borde, nunca más de una por pantalla y nunca detrás
   de texto: se mide (tools/, 1440 y 1180). Quietas. */
.sec:has(> .deco){isolation:isolate}
.deco{
  position:absolute;z-index:-1;
  width:clamp(200px, 23vw, 380px);height:auto;
  pointer-events:none;user-select:none;
}
.deco--tl{top:0;left:0}
.deco--tr{top:0;right:0}
.deco--bl{bottom:0;left:0}
.deco--br{bottom:0;right:0}
/* Cada motivo tiene su escala: el farol es alto y angosto, la avioneta
   chica y despegada del borde, como volando. */
.deco--lamp {width:clamp(96px, 9vw, 150px);right:3%}
.deco--plane{width:clamp(170px, 16vw, 260px);right:4%;top:clamp(56px, 6vw, 96px)}
.deco--moon {width:clamp(170px, 15vw, 250px);left:2%;top:1%}
/* Por debajo de 1320 no queda borde libre: medido, a 1280 la rama de
   Equipo y a 1000 la de FAQ caían detrás de texto y tarjetas
   (translúcidas) y se leían mal. Es un detalle de pantalla ancha. */
@media (max-width:1320px){
  .deco{display:none}
}
/* Equipo tiene el párrafo de la izquierda más cerca del borde: su rama
   necesita más ancho (a 1340 todavía lo rozaba). */
@media (max-width:1400px){
  .equipo > .deco{display:none}
}

/* Costura entre suelos: una hairline en vez de un corte seco.
   El borde duro entre dos azules cercanos lee como error de render. */
.sec + .sec{box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}

/* ---------------------------------------------------------------------
   CABECERA DE SECCIÓN — una sola pieza para toda la página

   Regla 4 de esta landing: TODA sección abre igual — píldora, título y
   bajada centrados, en columna, sobre el mismo eje. Ninguna sección
   define su propia cabecera; se usa .sec__head y punto.

   Está acá y no en cada css/<seccion>.css a propósito: cuando cada
   sección resolvía su propio encabezado, cinco secciones terminaron con
   cinco alineaciones distintas (dos a la izquierda en grilla de dos
   columnas, una centrada, una dentro de una columna lateral). Con la
   pieza compartida esa deriva no puede volver a pasar.

   Apple §4 (Familiaridad): lo que se ve igual tiene que comportarse
   igual y vivir en el mismo lugar. El lector aprende una vez dónde
   empieza una sección y ya no vuelve a buscarlo.
   --------------------------------------------------------------------- */
.sec__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-5);
  margin:0 auto clamp(40px, 5vw, 72px);
}

/* El título se corta antes que la bajada: una declaración de Unbounded a
   más de ~20 caracteres por línea deja de leerse como declaración. */
.sec__head .display{margin:0;max-width:20ch}
.sec__head .lead{margin:0;max-width:56ch}

/* Lo que cuelga de la cabecera (una nota, un CTA) sigue el mismo eje. */
.sec__head-extra{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-5);margin-top:var(--space-2);
}

/* ---------------------------------------------------------------------
   BANDA DE CTA — el corte entre dos secciones que además ofrece salida

   Del hero al mapa había cinco secciones seguidas sin un solo botón:
   el visitante terminaba de convencerse en Casos y tenía que seguir
   scrolleando hasta Proceso para poder hacer algo. La banda cierra ese
   hueco sin abrir una sección nueva.

   Hereda el suelo de la sección que cierra (.sec--deep/base/raise, las
   mismas tres de la regla 1). No estrena un cuarto suelo y no se lee
   como sección aparte: se lee como el remate de la anterior. Por eso
   la costura va DESPUÉS de la banda, no antes.

   Una declaración de hasta cinco palabras y un botón. Nada más: si
   necesitara un párrafo para justificarse, el argumento tendría que
   estar en la sección de arriba.
   --------------------------------------------------------------------- */
.cta-band{
  /* Casi una pantalla, con el contenido al centro: la banda es una
     parada, no un renglón entre dos secciones. Pegada a la sección de
     arriba no se leía como una invitación sino como un pie. */
  min-height:min(82svh, 760px);
  display:grid;align-content:center;
  padding-block:clamp(72px, 9vw, 128px);
  text-align:center;
}
.cta-band__in{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px, 2.2vw, 26px);
}
.cta-band .display{margin:0;max-width:18ch}

/* Entrada con el scroll. --v (0→1) lo escribe js/v2.js: 0 cuando el
   centro de la banda (frase y botón) asoma por abajo, 1 cuando sube al
   45 % de la pantalla. Es posición, no un evento: si se vuelve para arriba, la
   frase y el botón se retiran por el mismo camino.

   El botón (--k:1) arranca un tramo después que la frase. translate y
   scale, no transform: el transform del botón es del efecto magnético
   y se pisarían.

   Reposo = visible. var(--v, 1): si el motor nunca corre, --e vale 1. */
.cta-band.is-js .cta-band__in > *{
  --e:clamp(0, calc((var(--v, 1) - var(--k, 0) * .14) / .66), 1);
  opacity:var(--e);
  translate:0 calc((1 - var(--e)) * 56px);
  scale:calc(.92 + var(--e) * .08);
}
@media (prefers-reduced-motion: reduce){
  .cta-band.is-js .cta-band__in > *{opacity:1;translate:none;scale:none}
}
/* Sin costura arriba: la banda y la sección que la precede son la misma
   superficie. Va después de .sec + .sec para ganarle por orden. */
.sec.cta-band{box-shadow:none}
/* Y la costura que sí corresponde: entre la banda y lo que viene. */
.cta-band + .sec{box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}

/* =====================================================================
   TIPOGRAFÍA — regla 2 en código
   ===================================================================== */

/* Declaración: Unbounded. Es la única clase con derecho a usarla. */
.display{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:var(--text-strong);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-h2);
  text-wrap:balance;
  margin:0;
}
.display--hero{font-size:var(--type-hero-size);letter-spacing:var(--ls-hero)}
.display--xl  {font-size:var(--type-h1-size);letter-spacing:var(--ls-hero)}
.display--lg  {font-size:var(--type-h2-size);letter-spacing:var(--ls-h2)}
.display--md  {font-size:var(--type-h3-size);letter-spacing:var(--ls-h3);line-height:var(--lh-snug)}

/* Todo lo demás: Poppins. */
.title{
  font-family:var(--font-subhead);
  font-weight:var(--fw-semibold);
  font-size:var(--text-md);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-title);
  color:var(--text-strong);
  margin:0;
}
.lead{
  font-family:var(--font-body);
  font-size:var(--type-lead-size);
  line-height:1.55;
  color:var(--text-body);
  max-width:52ch;
  margin:0;
  text-wrap:pretty;
}
.body{
  font-size:var(--text-sm);
  line-height:var(--lh-body);
  color:var(--text-muted);
  margin:0;
  text-wrap:pretty;
}
/* .eyebrow NO existe en esta página. El rótulo de sección es .ask-pill y
   sólo .ask-pill (ver .sec__head arriba). La clase sigue definida en
   tokens/ y en css/landing.css para la v1; acá se borró a propósito
   porque tenerla a mano fue lo que hizo que cinco secciones nuevas la
   usaran y rompieran el patrón. Si la necesitás, no la necesitás. */

/* Acento tipográfico. Uno por pantalla, nunca dos. */
.accent{
  background:var(--grad-cyan);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* =====================================================================
   NAVBAR — píldora de vidrio flotante, centrada
   Arriba de todo flota sobre el cielo del hero: vidrio claro. Al
   scrollear (.is-stuck, lo pone js/v2.js) toma tinte del suelo para
   seguir leyéndose sobre las secciones oscuras. El logo va sobre su
   propia baldosa, así se lee igual sobre cualquier fondo.

   El nav son dos piezas: la marca y el botón. Los .nav__link se
   borraron con el menú — ver el comentario del <header> en el HTML.
   Por eso tampoco hay hamburguesa: no hay nada que plegar en celular.
   ===================================================================== */
.nav{
  position:fixed;top:16px;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding-inline:var(--container-pad);
  pointer-events:none;
}
.nav__pill{
  display:flex;align-items:center;gap:var(--space-3);
  padding:6px;border-radius:16px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 8px 30px rgba(0,11,31,.18);
  pointer-events:auto;
  transition:
    background-color 320ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft);
}
.nav.is-stuck .nav__pill{
  background:rgba(0,18,47,.72);
  border-color:rgba(255,255,255,.14);
}
/* min-height 44px en las dos piezas: es el mínimo cómodo para el dedo
   (Apple HIG). El logo solo medía 38 y el botón 39 en celular. */
.nav__brand{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:44px;
  color:var(--white);text-decoration:none;
}
.nav__mark{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.18);
}
.nav.is-stuck .nav__mark{background:var(--blue-700)}
.nav__mark img{height:22px;width:auto}
.nav__name{
  font-family:var(--font-body);font-size:15px;font-weight:var(--fw-medium);
  padding-right:var(--space-2);white-space:nowrap;
}
.nav__cta{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;
  padding:10px 12px 10px 18px;border-radius:11px;border:0;
  background:var(--ground-deep);color:var(--white);
  font-family:var(--font-body);font-size:15px;font-weight:var(--fw-medium);
  white-space:nowrap;cursor:pointer;
  transition:background-color 180ms var(--ease-standard), transform 120ms var(--ease-standard);
}
.nav__cta:hover{background:#0B1D3F}
/* Sobre los suelos oscuros el botón casi negro desaparece dentro de la
   píldora: toma el azul que la rampa reserva para CTA sobre oscuro. */
.nav.is-stuck .nav__cta{background:var(--blue-400)}
.nav.is-stuck .nav__cta:hover{background:var(--blue-700)}
.nav__cta:active{transform:scale(.97)}
.nav__cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nav__chev{
  display:inline-grid;place-items:center;flex:none;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
}
.nav__chev .ico{--ico-size:11px}

@media (max-width:560px){
  .nav__name{display:none}
  .nav__cta{font-size:14px;padding:9px 10px 9px 14px}
}
@media (prefers-reduced-transparency: reduce){
  .nav__pill{background:var(--blue-700);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.is-stuck .nav__pill{background:var(--ground-deep)}
}
@media (prefers-contrast: more){
  .nav__pill{border-color:rgba(255,255,255,.6)}
}

/* =====================================================================
   PANEL — la tarjeta blanca que contiene un bloque de texto
   Lo usan los problemas de "¿Te pasa esto?" y las fichas de "Así
   funciona": el título y el párrafo sueltos sobre el suelo se leían
   como texto flotando, no como una pieza.

   Blanca sobre los suelos oscuros: es el único plano claro de la
   página, así que es también el elemento brillante de su pantalla
   (regla 3). La sombra la separa del suelo; no ilumina.

   Adentro se redefine la rampa de texto en vez de pisar color por
   color: los componentes escriben var(--paper), var(--paper-dim) y
   var(--cyan-400), y acá esas variables pasan a la rampa del sistema
   claro. El cuerpo no es gris neutro: el --ink-700 del sistema claro
   chocaba con el título azul. Es el mismo --blue-950 de la marca
   aclarado con blanco, así título y párrafo son de la misma familia.
   El cyan sobre blanco da 2:1 de contraste: íconos y filetes pasan al
   azul eléctrico, que da 6,6:1.
   ===================================================================== */
.panel{
  --paper:var(--blue-900);
  --paper-dim:color-mix(in srgb, var(--blue-950) 74%, var(--white));
  --paper-mute:color-mix(in srgb, var(--blue-950) 66%, var(--white));
  --cyan-400:var(--blue-700);
  padding:clamp(24px, 3vw, 40px);
  border-radius:var(--radius-lg);
  background:var(--white);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 60px rgba(0,6,20,.45);
}
/* Tono del acento (ícono y filete) por tarjeta, con la paleta del hero.
   Mismo mecanismo que arriba: se redefine --cyan-400. Todos pasan
   4,5:1 sobre blanco. Sin data-tone queda el azul eléctrico. */
.panel[data-tone="sky"] {--cyan-400:var(--sky-600)}
.panel[data-tone="jaca"]{--cyan-400:var(--jaca-600)}
.panel[data-tone="park"]{--cyan-400:var(--park-700)}

/* Las negritas del párrafo toman el azul del título. */
.panel b{color:var(--paper)}
@media (prefers-contrast: more){
  .panel{--paper-dim:var(--blue-950);--paper-mute:var(--blue-950);border-color:var(--blue-950)}
}

/* =====================================================================
   BOTONES
   Cuatro capas del sistema anterior, menos el glow. La sombra separa
   el botón del fondo; no lo ilumina. El press es instantáneo (§1).
   ===================================================================== */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-6);min-height:46px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-ui);text-decoration:none;cursor:pointer;
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:box-shadow 240ms var(--ease-out-soft),
             border-color 180ms var(--ease-standard),
             color 180ms var(--ease-standard);
}
.btn--lg{padding:var(--space-4) var(--space-8);min-height:54px;font-size:var(--text-base)}
.btn--sm{padding:var(--space-2) var(--space-5);min-height:38px;font-size:var(--text-sm)}

/* Barrido de relleno */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateX(-101%);
  transition:transform 460ms var(--ease-out-soft);
}
.btn:hover::before{transform:translateX(0)}

/* Viaje del ícono: el movimiento apunta a dónde lleva el botón (§8) */
.btn__label{transition:transform 240ms var(--ease-organic)}
.btn__icon{display:inline-flex;transition:transform 240ms var(--ease-organic)}
.btn:hover .btn__label{transform:translateX(-2px)}
.btn:hover .btn__icon{transform:translateX(4px)}

.btn--primary{
  background:var(--grad-cyan);color:var(--white);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 20px rgba(0,8,24,.45);
}
.btn--primary::before{background:linear-gradient(135deg,var(--cyan-400) 0%,var(--cyan-300) 100%)}
.btn--primary:hover{color:var(--blue-900);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 10px 28px rgba(0,8,24,.55)}

.btn--ghost{
  background:rgba(255,255,255,.06);color:var(--paper);
  border-color:rgba(255,255,255,.14);
}
.btn--ghost::before{background:rgba(255,255,255,.10)}
.btn--ghost:hover{color:var(--white);border-color:rgba(255,255,255,.28)}

/* Feedback en el pointer-down, no en el release (§1) */
.btn:active{transform:translate3d(var(--mx,0),var(--my,0),0) scale(.975)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* =====================================================================
   ÍCONOS y PIEZAS SUELTAS
   Lucide enmascarado; hereda currentColor. css/icons.css sólo aporta
   las máscaras: la caja del glifo se define acá.
   ===================================================================== */
.ico{
  display:inline-block;flex:0 0 auto;
  width:var(--ico-size,18px);height:var(--ico-size,18px);
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}

/* PÍLDORA DE PREGUNTA — el rótulo que acompaña a una escena anclada.
   Vidrio pesado porque flota sobre contenido, no sobre un fondo plano: necesita separarse de lo que le pasa por debajo.

   Definida una sola vez porque la usan dos secciones (los problemas del
   zseq y las soluciones). Cada una pone dónde va y cuándo se enciende;
   el material es este y no se toca. */
.ask-pill{
  margin:0;
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:9px var(--space-5);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,6,20,.45);
  white-space:nowrap;

  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--paper);
}
@media (prefers-reduced-transparency: reduce){
  .ask-pill{background:#0A1B3C;-webkit-backdrop-filter:none;backdrop-filter:none}
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);
  background:var(--cyan-400);color:var(--blue-900);font-weight:var(--fw-semibold);
}
.skip:focus{left:var(--space-4);top:var(--space-4)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:640px){
  /* Los botones grandes van a todo el ancho: en celular, dos botones
     lado a lado quedaban de 150px con el texto partido. */
  .btn--lg{width:100%}
}

/* =====================================================================
   ACCESIBILIDAD — no son extras (apple-design §14)
   ===================================================================== */
@media (prefers-reduced-transparency: reduce){
  .nav.is-stuck{background:var(--ground-deep);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){
  .btn--ghost{border-color:rgba(255,255,255,.5)}
  .body{color:var(--paper-dim)}
}

/* El ícono de un CTA que baja viaja hacia abajo, no hacia la derecha:
   el movimiento intermedio tiene que apuntar al destino. */
.btn:hover .btn__icon--down{transform:translateY(3px)}

/* =====================================================================
   REVELADO DE ENTRADA
   js/v2.js sólo agrega .is-in; el estado y el escalonado viven acá.
   El stagger sale de --i en el marcado: un delay calculado, no un
   timer por elemento. Travel corto (12px): un desplazamiento largo en
   una sección de texto se lee como "la página todavía está cargando".
   ===================================================================== */
/* Paso 1 — devolver el estado visible.
   tokens/motion.css declara [data-reveal]{opacity:0;filter:blur()} sin
   ninguna condición, y tokens/ no se toca. Sin JavaScript nadie agrega
   .is-in, así que la página entera quedaba invisible: no era sólo el
   fundido lo que se perdía, era el contenido. Misma especificidad que
   la regla de tokens y más abajo en la cadena de @import, así que gana
   por orden. */
[data-reveal]{opacity:1;transform:none;filter:none}

/* Paso 2 — volver a esconderlo, pero sólo si hay JS para devolverlo.
   La marca .is-js la pone un script inline en el <head>, antes del
   primer pintado. Misma convención que los desplegables, el formulario
   y las escenas: el reposo es lo que se lee, y el script pide permiso
   para animarlo. */
.is-js [data-reveal]{
  opacity:0;
  /* --travel-x deja que un elemento entre desde el costado además de
     desde abajo. Por defecto 0, así que nada de lo ya escrito cambia.
     Lo usa el mapa de proceso: cada tarjeta entra desde el lado donde
     está su nodo, no desde un lado arbitrario (consistencia espacial). */
  transform:translate3d(var(--travel-x, 0), var(--travel-sm), 0);
  filter:blur(var(--reveal-blur));
  transition:
    opacity   var(--dur-reveal) var(--ease-scene),
    transform var(--dur-reveal) var(--ease-scene),
    filter    var(--dur-reveal) var(--ease-scene);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.is-js [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* =====================================================================
   PROBLEMA — el dolor, sin CTA
   Una columna de texto angosta arriba y tres costos abajo. Las
   tarjetas no son clickeables, así que no tienen hover: un estado de
   hover sobre algo que no responde al click miente sobre la interfaz.
   ===================================================================== */
/* El bloque .problem__* / .cost vivía acá: era la sección de costos de
   la v1. En la v2 la reemplazó el zseq (css/zseq.css) y quedó muerto.
   Borrado — CSS muerto que se parece al vivo termina copiado. */

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}