/* Landing de rutas — hero con video, hilo de ruta y paradas por país.
   Carga después del <style> de index.html (misma especificidad, gana por orden).
   Modos:
     sin clase `lm`  → maquetación estática (sin JS, reduced-motion, Save-Data, conexión lenta).
     con `html.lm`   → paneles sticky + GSAP/ScrollTrigger (lo activa assets/js/landing/gate.js).
   Tokens: solo los del repo (--navy #0F172A, --page #F8FAFC, --orange #F97316). */

:root {
  --H: max(100vh, 640px);
  --H: max(100svh, 640px);
  --R: calc(var(--H) * 0.7);          /* tramo de scroll del hero → Japón (nube): antes 1,4 */
  --S: calc(var(--H) * 7.6);          /* tramo de escenas: 7 × 0,70 (escena) + 6 × 0,45 (transición) */
  --panel-r: 36px;
  --ink: #F8FAFC;
  --ink-2: #CBD5E1;
  --fuji-x: 47%;
}
html.lm { scroll-behavior: auto; }
@media (max-width: 680px) { :root { --R: calc(var(--H) * 0.625); --panel-r: 26px; } }   /* antes 1,25 */

/* ------------------------------------------------------------ cabecera
   Sobre el hero y la ruta: transparente, sin franja; solo un degradado azul marino muy suave arriba (≈ 60 % → 0 %)
   para que los botones se lean. Al entrar al bloque claro pasa a azul marino sólido (header.js pone `is-solid`).
   Sin JS el degradado no se aplica (la cabecera queda sólida): header.js no corre y el bloque claro llega a la cabecera. */
.site-header, .site-header.is-scrolled {
  background: #0F172A;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.js .site-header, html.js .site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(15,23,42,.6) 0%, rgba(15,23,42,.42) 30%, rgba(15,23,42,.18) 65%, rgba(15,23,42,.05) 88%, rgba(15,23,42,0) 100%);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #0F172A; opacity: 0; transition: opacity .25s ease;
}
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid { box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 10px 26px rgba(2,6,23,.22); }
.brand-word { text-shadow: 0 1px 10px rgba(8,13,28,.45); }
/* Contraste AA del idioma inactivo sobre el píldora translúcida (antes #94A3B8 ≈ 2.3:1). */
.site-header .lang button[aria-pressed="false"] { color: #475569; }
.brand { color: var(--ink); }
.site-header .brand:focus-visible,
.site-header .lang button:focus-visible { outline-color: rgba(249,115,22,.9); }

/* ------------------------------------------------------------ estructura
   main
   ├─ .opening   hero + nubes + hilo de apertura (flujo normal; con movimiento flota sobre .route)
   └─ .route     Japón … paradas … panel final + panel claro; el hilo se mide desde su borde superior */
main { position: relative; background: var(--navy); }
.route { position: relative; isolation: isolate; background: var(--navy); }
.stage { position: relative; }
.track { display: none; }
html.lm .track { display: block; }
html.lm .runway { height: var(--R); }
html.lm .span { height: var(--S); }
/* Con movimiento: un solo escenario fijo; las escenas (países) se funden unas con otras atadas al scroll. */
html.lm .stage { position: sticky; top: 0; height: var(--H); overflow: hidden; background: var(--navy); }
html.lm .stage .stop { position: absolute; inset: 0; height: auto; }
html.lm .stage .stop:not(:first-child) { opacity: 0; visibility: hidden; }
html.lm:not(.lm-on) .stage .stop:not(:first-child) { display: none; }   /* sin cargar sus fotos lazy hasta `load` */
html.lm .stage .stop--first .stop__text, html.lm .stage .stop--first .stop__tag, html.lm .stage .stop--first .stop__inset { visibility: hidden; }
html.lm .opening {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--H) + var(--R));
  z-index: 10;
  pointer-events: none;
}
html.lm .opening .hero { pointer-events: auto; }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: var(--H);
  padding: calc(var(--header-h) + 28px) 0 clamp(96px, 16svh, 150px);
  display: grid;
  align-content: center;
  isolation: isolate;
  color: var(--ink);
  background: var(--navy);
}
.hero::before, .hero::after { display: none; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0B1322; }
.hero-poster, .hero-poster img, .hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuji-x) 50%;
}
/* El video aparece encima del poster solo cuando ya está reproduciendo (sin parpadeos). */
.hero-video { opacity: 0; transition: opacity .5s ease; }
/* Capa propia desde el primer pintado: así GSAP no la promueve a mitad de la entrada (eso podía repintar el video con un tirón). */
html.lm .hero-media { will-change: transform; }
.hero-video.is-playing { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,23,42,.84) 0%, rgba(15,23,42,.62) 40%, rgba(15,23,42,.16) 74%, rgba(15,23,42,.05) 100%),
    linear-gradient(180deg, rgba(15,23,42,.5) 0%, rgba(15,23,42,0) 24%, rgba(15,23,42,0) 58%, rgba(15,23,42,.78) 100%);
}
.hero-layout { display: block; }
.hero-copy { max-width: 640px; }
/* título: sin letras ni palabras pegadas (antes -0.073em), sin palabras huérfanas */
.hero h1 {
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(15,23,42,.35);
  font-size: clamp(2rem, calc(1.2rem + 3.2vw), 3.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  word-spacing: normal;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 [data-l] { display: block; }
/* etiqueta superior: texto simple en mayúsculas, sin píldora ni punto */
.hero .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .hero-lede { color: var(--ink-2); max-width: 520px; }
.hero .hero-lede strong { color: #fff; }
.hero .form-note { color: var(--ink-2); font-size: .8125rem; text-wrap: balance; }
.hero .form-note.is-error { color: #FECACA; }
.hero .form-note.is-success { color: #BBF7D0; }
/* formulario: vidrio oscuro (navy translúcido) en vez de tarjeta blanca; mismo marcado y mismo JS */
.hero .waitlist-form {
  background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 54px rgba(2,6,23,.42);
}
.hero .waitlist-form input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
  color: #fff;
  caret-color: var(--orange);
}
.hero .waitlist-form input::placeholder { color: #CBD5E1; opacity: 1; }
.hero .waitlist-form .btn-primary { background: var(--orange); color: var(--navy); box-shadow: 0 10px 22px rgba(249,115,22,.22); }
.hero .waitlist-form .btn-primary:hover { background: #FB8A3C; box-shadow: 0 10px 24px rgba(249,115,22,.28); }
.hero .btn-primary:focus-visible,
.hero input:focus-visible { outline: 3px solid rgba(249,115,22,.85); }

.hero-foot { position: absolute; left: 0; right: 0; bottom: clamp(22px, 6svh, 56px); pointer-events: none; }
.hero-cue {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(15,23,42,.6);
}
.hero-cue:focus-visible { outline: 3px solid rgba(249,115,22,.9); outline-offset: 6px; border-radius: 8px; }
.hero-cue__line { position: relative; flex: 0 0 auto; width: 1px; height: 48px; background: rgba(255,255,255,.34); }
.hero-cue__bead { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.55); animation: cueDrop 2.8s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes cueDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(42px); opacity: 0; } }

/* Modo con movimiento: el hero queda fijo encima de Japón durante el tramo --R */
html.lm .hero { position: sticky; top: 0; z-index: 10; height: var(--H); min-height: 0; }
html.lm .hero .reveal { transition: none; }

/* ------------------------------------------------------------ nubes y hilo de apertura (solo con movimiento) */
.clouds { display: none; }
html.lm .clouds {
  display: block;
  position: sticky;
  top: 0;
  height: var(--H);
  margin-top: calc(var(--H) * -1);
  pointer-events: none;
}
html.lm .clouds { z-index: 11; overflow: hidden; opacity: .80; }   /* cobertura real máxima ≤ 80 % (medida con fondo negro/blanco) */
.cloud { position: absolute; left: -8%; width: 116%; height: 230%; top: 100%; will-change: transform; }
.cloud img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Nubes volumétricas WebGL (clouds-gl.js): el canvas llena la cortina; plan B = oscurecimiento a #0F172A + bruma fina. Los sprites quedan solo de respaldo. */
.clouds-gl { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
.clouds-dim { position: absolute; inset: 0; background: #0F172A; opacity: 0; }
.clouds-haze { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(51,65,85,0) 40%, rgba(51,65,85,.34) 54%, rgba(24,36,58,0) 70%); }
html.lm .clouds.is-gl, html.lm .clouds.is-pb { opacity: 1; }
.clouds.is-gl .cloud, .clouds.is-pb .cloud { display: none; }

/* ------------------------------------------------------------ paradas */
.stop {
  position: relative;
  height: var(--H);
  color: var(--ink);
}
.stop__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy);
}
.stop__img { position: absolute; inset: 0; }
/* Gradación común (fotos y video del hero): una sola clase, para que todo parezca la misma película.
   Velo azul marino tenue, saturación ~0.9, contraste algo más alto y viñeta suave en los bordes. */
.grade { filter: saturate(.9) contrast(1.06); }
.grade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 125% 105% at 50% 46%, rgba(15,23,42,0) 54%, rgba(15,23,42,.42) 100%),
    linear-gradient(rgba(15,23,42,.14), rgba(15,23,42,.14));
}
/* Grano de película (≤ 20 KB, ~5 % de opacidad). Solo con movimiento; nunca con reduced-motion. */
.film { display: none; }
html.lm .film { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .05; background: url(../img/grain.webp) 0 0 / 128px 128px; }
@media (prefers-reduced-motion: reduce) { .film { display: none !important; } }
html.lm .stop__img { inset: -4% 0; }
.stop__img picture, .stop__img img { display: block; width: 100%; height: 100%; }
.stop__img img { object-fit: cover; object-position: var(--pos, 50% 50%); background: #131d33; }
.stop__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.5) 0%, rgba(15,23,42,0) 22%, rgba(15,23,42,0) 42%, rgba(15,23,42,.8) 100%);
}
.stop__shade { position: absolute; inset: 0; background: var(--navy); opacity: 0; pointer-events: none; }   /* velo azul marino del fundido */

.stop__text {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  bottom: clamp(48px, 13svh, 150px);
  max-width: 64%;
}
.stop--r .stop__text { left: auto; right: clamp(20px, 5vw, 72px); text-align: right; }
.stop__name {
  margin: 0;
  font-size: clamp(3.3rem, 13vw, 11rem);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 44px rgba(15,23,42,.5);
}
.stop__name .ln { display: block; }
.stop__name .li { display: block; will-change: transform, opacity; }
.stop__name .w { display: inline-block; }
.stop__cap {
  margin: 14px 0 0;
  max-width: 36ch;
  color: #E2E8F0;
  font-size: .82rem;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(8,13,28,.75), 0 0 14px rgba(8,13,28,.7);
}
.stop--r .stop__cap { margin-left: auto; }
/* Pies de foto legibles (>= 12 px, AA): el de las tarjetas va dentro de la foto sobre un degradado en su base;
   la etiqueta de Japón y el pie principal descansan sobre velos amplios y suaves, sin cajas. */
.stop__inset { overflow: visible; }
.stop__inset figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 38px 12px 10px;
  border-radius: 0 0 18px 18px;
  color: #fff;
  background: linear-gradient(0deg, rgba(8,13,28,.9) 0%, rgba(8,13,28,.7) 50%, rgba(8,13,28,0) 100%);
}
.stop__tag { color: #fff; }
.stop--first .stop__scrim {
  background:
    radial-gradient(ellipse 70% 42% at 16% 17%, rgba(8,13,28,.74) 0%, rgba(8,13,28,.5) 50%, rgba(8,13,28,0) 100%),
    linear-gradient(180deg, rgba(15,23,42,.5) 0%, rgba(15,23,42,0) 22%, rgba(15,23,42,0) 42%, rgba(15,23,42,.8) 100%);
}

.stop__inset {
  position: absolute;
  top: calc(var(--header-h) + clamp(18px, 5svh, 56px));
  right: clamp(20px, 5vw, 72px);
  width: clamp(118px, 17vw, 270px);
  margin: 0;
}
.stop--r .stop__inset { right: auto; left: clamp(20px, 5vw, 72px); }
.stop__inset picture, .stop__inset img { display: block; width: 100%; }
.stop__inset img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  background: #131d33;
  box-shadow: 0 24px 60px rgba(2,6,23,.5);
  outline: 1px solid rgba(255,255,255,.18);
  outline-offset: -1px;
}
.stop__inset figcaption {
  margin-top: 9px;
  color: #E2E8F0;
  font-size: .78rem;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(8,13,28,.75), 0 0 14px rgba(8,13,28,.7);
}
.stop__tag {
  position: absolute;
  top: calc(var(--header-h) + clamp(18px, 5svh, 56px));
  left: clamp(20px, 5vw, 72px);
  max-width: min(46%, 300px);
  margin: 0;
  color: #E2E8F0;
  font-size: .82rem;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(8,13,28,.75), 0 0 14px rgba(8,13,28,.75);
}
.stop__tag strong { display: block; color: #fff; font-size: .9rem; letter-spacing: -.01em; }

.stop--end .stop__inner {
  background:
    radial-gradient(circle at 50% 118%, rgba(249,115,22,.22), transparent 56%),
    linear-gradient(180deg, #0F172A 0%, #18243A 100%);
}
/* Foto de fondo del cierre (nocturna): velo desde la izquierda y desde abajo, donde va el texto; el resto queda intacto. */
.stop--end .stop__scrim {
  background:
    linear-gradient(90deg, rgba(8,13,28,.88) 0%, rgba(8,13,28,.74) 30%, rgba(8,13,28,.4) 50%, rgba(8,13,28,0) 68%),
    linear-gradient(0deg, rgba(8,13,28,.7) 0%, rgba(8,13,28,.5) 24%, rgba(8,13,28,.14) 44%, rgba(8,13,28,0) 58%),
    linear-gradient(180deg, rgba(8,13,28,.3) 0%, rgba(8,13,28,0) 20%);
}
.stop--end .stop__text { max-width: 58%; }
.stop--end .stop__name { font-size: clamp(2.6rem, 9vw, 7.5rem); }
.stop__note { margin: 18px 0 0; max-width: 34ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.stop__fine { margin: 22px 0 0; max-width: 46ch; color: #CBD5E1; font-size: .76rem; line-height: 1.6; }
.stop--end .stop__cap { margin-top: 20px; }   /* mismo pie que los demás países, separado del bloque de aviso */
.stop__fine a { color: #E2E8F0; text-underline-offset: 3px; }
.stop__fine a:focus-visible { outline: 3px solid rgba(249,115,22,.9); outline-offset: 3px; border-radius: 4px; }



/* ------------------------------------------------------------ Universidades: galería de campus + lo que se está preparando
   Sección azul marino que continúa la ruta. Tapa el escenario fijo igual que el panel claro, un nivel por debajo (29 vs 30). */
.uni {
  position: relative;
  z-index: 29;
  background: var(--navy);
  color: var(--ink);
  padding: clamp(72px, 10vw, 128px) 0;
  scroll-margin-top: var(--header-h);
}
.uni { border-top: 1px solid rgba(248, 250, 252, .06); }
/* Cabecera en una sola columna, alineada al borde de las fotos: etiqueta, título y subtítulo uno debajo del otro. */
.uni-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.uni .section-label { font-size: .8125rem; }
.uni .section-title {
  max-width: 20ch;
  margin-bottom: 22px;
  color: var(--ink);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.02em;      /* antes -0.06em: «por el» se leía «porel» */
  word-spacing: normal;
  text-wrap: balance;
}
.uni .section-copy { max-width: 56ch; margin: 0; color: #CBD5E1; font-size: clamp(1.125rem, 1.7vw, 1.25rem); line-height: 1.6; letter-spacing: 0; }
.uni-gallery, .uni-cards { display: grid; margin: 0; padding: 0; list-style: none; }
/* Cuadrícula: dos columnas iguales (tablet también), una en móvil; todas las fotos 3:2, mismo hueco y mismo radio. */
.uni-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.uni-photo { min-width: 0; }
.uni-photo figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: var(--navy-soft); }
.uni-photo picture, .uni-photo img { display: block; width: 100%; height: 100%; }
.uni-photo picture { position: relative; }
.uni-photo img { object-fit: cover; }          /* el tono ya viene unificado en los archivos: sin filtros CSS encima */
/* Pie: solo el nombre del país, en versalitas pequeñas, sobre un degradado inferior suave. */
.uni-photo figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 38%; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 13, 28, .88) 0%, rgba(8, 13, 28, .5) 48%, rgba(8, 13, 28, 0) 100%);
}
.uni-photo figcaption {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px;
  color: #F8FAFC; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase;
}
/* grano de película muy tenue solo con movimiento (ya existía) */
html.lm .uni-photo picture::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .045; background: url(../img/grain.webp) 0 0 / 128px 128px; }
.uni-legend { max-width: 70ch; margin: 22px 0 0; color: #CBD5E1; font-size: .9375rem; line-height: 1.6; }
.uni-legend a { color: #F8FAFC; text-underline-offset: 3px; }
.uni-legend a:focus-visible { outline: 3px solid rgba(249, 115, 22, .9); outline-offset: 3px; border-radius: 4px; }
.uni-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.uni-card { padding: 26px 22px 28px; background: var(--navy-soft); border: 1px solid rgba(248, 250, 252, .08); border-radius: 16px; }
.uni-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: rgba(249, 115, 22, .1); color: var(--orange); }
.uni-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uni-card h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; word-spacing: normal; line-height: 1.25; }
.uni-card p { margin: 0; color: #CBD5E1; font-size: 1rem; line-height: 1.6; }
.uni-foot { margin-top: clamp(32px, 4vw, 44px); }
.uni-cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 12px; background: var(--orange); color: var(--navy);
  font-size: .9375rem; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.uni-cta:hover { background: #FB8B3C; transform: translateY(-1px); }
.uni-cta:focus-visible { outline: 3px solid rgba(248, 250, 252, .9); outline-offset: 3px; }
@media (max-width: 1099px) { .uni-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .uni-gallery { grid-template-columns: 1fr; gap: 16px; } .uni .section-title { max-width: none; } }
@media (max-width: 599px) { .uni-cards { grid-template-columns: 1fr; } .uni-card { padding: 22px 20px 24px; } }

/* ------------------------------------------------------------ panel claro que sube sobre la ruta */
.sheet {
  position: relative;
  z-index: 30;
  background: var(--page);
  border-radius: var(--panel-r) var(--panel-r) 0 0;
  box-shadow: 0 -14px 36px rgba(2,6,23,.32);
  overflow: clip;
}
.sheet > :first-child { padding-top: 96px; }
/* Contraste AA en el bloque claro: etiquetas naranjas y gris de la ventana de vista previa (el cierre oscuro no cambia). */
.sheet section.section .section-label { color: #C2410C; }
.sheet .window-status { color: #64748B; }
/* Sin backdrop-filter en el panel claro: con capas grandes debajo provoca repintados y parpadeos. */
.sheet .route-stage, .sheet .scene-tag, .sheet .floating-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Las animaciones ambientales del panel claro solo corren mientras se ven (route.js quita .ambient-off). */
.sheet .ambient-off *, .sheet .ambient-off *::before, .sheet .ambient-off *::after { animation-play-state: paused !important; }
/* Todo el contenido del panel claro es visible desde el primer momento (sin esperar a que se "revele"). */
.sheet .reveal { opacity: 1; transform: none; transition: none; }

/* Sin barra de desplazamiento lateral en el modo con movimiento: sobre las fotos a pantalla completa se veía como una tira gris.
   El scroll sigue funcionando con rueda, táctil y teclado; en modo estático (sin JS, reduced-motion) la barra se conserva. */
html.lm { scrollbar-width: none; }
html.lm::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ------------------------------------------------------------ entrada del hero
   Primero solo la imagen; el scrim, el texto y el formulario entran después.
   Solo con movimiento (html.lm): si GSAP falla se quita `lm` y todo se ve de inmediato. */
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* El titular parte de .01 (no 0): así el navegador lo cuenta como primer contenido pintado (LCP) aunque entre 1.4 s después. */
@keyframes heroH1 { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Secuencia: 1) solo la imagen (poster, que es el primer cuadro del video); 2) el video continúa desde ahí;
   3) cuando el video ya se está viendo, hero.js añade `hero-go` y entran barra, scrim, texto y formulario.
   Así nunca coinciden el cambio poster → video y la aparición del resto (eso se leía como un parpadeo). */
html.lm .hero-poster { animation: heroFade .7s ease both; }
html.lm:not(.hero-go) .site-header,
html.lm:not(.hero-go) .hero-scrim,
html.lm:not(.hero-go) .hero-copy .eyebrow,
html.lm:not(.hero-go) .hero-copy .hero-lede,
html.lm:not(.hero-go) .hero-copy .waitlist-wrap,
html.lm:not(.hero-go) .hero-foot { opacity: 0; }
html.lm:not(.hero-go) .hero-copy h1 { opacity: .01; }
html.lm.hero-go .site-header { animation: heroFade .9s ease .15s both; }
html.lm.hero-go .hero-scrim { animation: heroFade 2s cubic-bezier(.4,0,.2,1) both; }
html.lm.hero-go .hero-copy .eyebrow { animation: heroIn 1s cubic-bezier(.2,.75,.25,1) .25s both; }
html.lm.hero-go .hero-copy h1 { animation: heroH1 1s cubic-bezier(.2,.75,.25,1) .4s both; }
html.lm.hero-go .hero-copy .hero-lede { animation: heroIn 1s cubic-bezier(.2,.75,.25,1) .55s both; }
html.lm.hero-go .hero-copy .waitlist-wrap { animation: heroIn 1s cubic-bezier(.2,.75,.25,1) .7s both; }
html.lm.hero-go .hero-foot { animation: heroFade 1.1s ease .95s both; }

/* ------------------------------------------------------------ móvil */
@media (max-width: 980px) {
  .hero { align-content: end; padding-bottom: clamp(88px, 14svh, 130px); }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(15,23,42,.5) 0%, rgba(15,23,42,0) 20%, rgba(15,23,42,.22) 40%, rgba(15,23,42,.84) 66%, rgba(15,23,42,.92) 100%);
  }
}
@media (max-width: 767px) {
  .stop__img img, .hero-poster img, .hero-video { object-position: 50% 50%; }   /* versión móvil ya recortada sobre el volcán */
  .hero { padding-top: calc(var(--header-h) + 14px); }
  .stop__inset { width: clamp(104px, 31vw, 170px); }
  .stop__inset figcaption { font-size: .76rem; }
  .stop__tag { max-width: 52%; font-size: .78rem; }
  .stop__text { max-width: 88%; bottom: clamp(40px, 11svh, 110px); }
  .stop--end .stop__text { max-width: 64%; }
  .stop--end .stop__scrim {
    background:
      linear-gradient(0deg, rgba(8,13,28,.84) 0%, rgba(8,13,28,.76) 38%, rgba(8,13,28,.5) 54%, rgba(8,13,28,.16) 68%, rgba(8,13,28,0) 78%),
      linear-gradient(180deg, rgba(15,23,42,.34) 0%, rgba(15,23,42,0) 20%);
  }
}

/* ------------------------------------------------------------ sin JS: contenido siempre visible */
@media (prefers-reduced-motion: reduce) {
  .hero-cue__bead { animation: none; transform: translateY(21px); opacity: 1; }
}

/* ------------------------------------------------------------ cabecera: redes y CTA
   Redes: dos botones circulares de 40 px (contorno blanco al 20 %), glifo monocromo. La CTA «Quiero enterarme»
   solo aparece cuando el formulario del hero sale de la pantalla (header.js pone `is-in`); sin JS se ve siempre. */
.social-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.social-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.social-btn:focus-visible { outline: 3px solid rgba(249,115,22,.9); outline-offset: 3px; }
html.js .site-header .header-cta { display: none; }
html.js .site-header .header-cta.is-in { display: inline-flex; }
@media (max-width: 520px) { html.js .site-header .header-cta.is-in { display: none; } }   /* como antes: sin CTA en el header en móviles estrechos */

/* «La oportunidad existe. Ahora necesitas una ruta.»: título algo más grande (66 px → 72 px en escritorio). */
.teaser-copy .section-title { font-size: clamp(2rem, 5vw, 4.5rem); }
.teaser-copy .section-copy { font-size: clamp(1.0625rem, 1.25vw, 1.125rem); max-width: 480px; }   /* subtítulo un punto más grande (16 → 18 px) */
@media (min-width: 981px) {
  /* Título: ancho = 8.125 em (lo que mide «The opportunity») + 8 px, así «Ahora necesitas» cabe en una línea (4 líneas en todo el rango).
     Mockup: se alinea al margen derecho del header (su chip derecho termina en el borde del botón del header) y su ancho se calcula para dejar
     ≥ 48 px entre el texto más largo del título y el chip izquierdo (−8 px respecto a la ventana). */
  .teaser-copy .section-title { width: calc(8.125em + 8px); max-width: none; }
  .teaser-grid { --C: min(100vw - 40px, 1180px); --H: min(100vw - 56px, 1220px); }   /* --C: ancho del contenedor; --H: ancho del header */
  .teaser-stage { justify-self: end; margin-right: calc(12px - (var(--H) - var(--C)) / 2); width: max(420px, calc((var(--C) + var(--H)) / 2 - 68px - 8.125 * clamp(32px, 5vw, 72px))); }
}


/* Título «La oportunidad existe. Ahora necesitas una ruta.»: interletraje y espaciado de palabras más abiertos (mismo tamaño). Cada frase en su bloque. */
.teaser-copy .section-title { letter-spacing: -.02em; word-spacing: .06em; font-weight: 700; line-height: 1.08; }
.teaser-copy .section-title .t-frase { display: block; text-wrap: balance; }

/* Enlaces legales dentro de las notas del formulario: heredan el color de la nota y se subrayan (contraste igual al del texto). */
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.form-note a:hover { color: #fff; }
.form-note a:focus-visible { outline: 2px solid rgba(249,115,22,.7); outline-offset: 2px; border-radius: 3px; }

/* Móvil (≤ 767 px): fluidez del tramo cinematográfico. Las capas que se animan con el scroll pasan a la GPU como capas propias; así el movimiento
   ya no vuelve a rasterizar la foto a pantalla completa (con su gradación y viñeta) en cada fotograma. El escritorio no cambia. */
@media (max-width: 767px) {
  html.lm .stop__img { will-change: transform; }
  html.lm .stage .stop { will-change: opacity; }
  html.lm .stop__inset { will-change: transform, opacity; }
  html.lm .stop__shade { will-change: opacity; }
}

/* Móvil (≤ 767 px): primera pantalla con menos texto. Se oculta la segunda mitad del párrafo y el mensaje por defecto bajo el formulario
   (los mensajes de estado —éxito, error— los inserta JS y siguen viéndose). El aviso de edad y de privacidad se mantiene. Escritorio igual. */
@media (max-width: 767px) {
  .hero .hero-lede .m-hide { display: none; }
  .hero .form-note#formNote { min-height: 0; }
  .hero .form-note#formNote > span[data-l] { display: none; }
}

/* Móvil/tableta (≤ 980 px): el escenario fijo y el hero miden el viewport GRANDE (lvh), no el pequeño (svh).
   Con svh, al ocultarse la barra del navegador al hacer scroll, el viewport crece y quedaba una franja al pie con el borde del hero (una línea de agua clara).
   --bar = lo que la barra puede tapar al pie; se suma a los márgenes inferiores para que el texto no quede escondido tras la barra. Escritorio: lvh = svh, sin cambios. */
@media (max-width: 980px) {
  :root { --H: max(100lvh, 640px); --bar: max(0px, calc(100lvh - 100svh)); }
  .hero { padding-bottom: calc(clamp(88px, 14svh, 130px) + var(--bar)); }
  .hero-foot { bottom: calc(clamp(22px, 6svh, 56px) + var(--bar)); }
}
@media (max-width: 767px) {
  .stop__text { bottom: calc(clamp(40px, 11svh, 110px) + var(--bar)); }
}