/* llegada.css · v8.1 · constructor 1 · #llegada: LA LLEGADA (Nicolás, punto 5). El metro llega a
   Cisneros y abre las puertas; un botón «Entrá» sobre las puertas; al tocarlo, un fundido corto lleva
   adentro del vagón (header#hero, hero.css). #llegada es HIJO de header#hero y lo tapa entero (inset 0,
   z 30, fondo opaco) hasta que la persona entra. Solo selectores que empiezan por #llegada.
   El video NO usa object-fit: .marco reproduce a mano el «cover» con unidades de contenedor (cqw/cqh) y
   guarda el 16:9 del cuadro (1284 x 716). Así el anuncio y el botón se colocan en coordenadas DEL CUADRO:
   las puertas están al 44 % del ancho y al 43 % del alto, y ahí caen en cualquier pantalla.
   Estados (los pone llegada.js): .js (tomó el control) · .lista (botón visible) · .saliendo (fundido) ·
   .saltando (v8.5: el salto de la barra, 150 ms). */

#llegada{position:absolute;inset:0;z-index:30;overflow:hidden;background:#0B1E2B;container-type:size;
  transition:opacity .7s var(--cromo),scale .7s var(--cromo),visibility 0s linear .7s}
#llegada.saliendo{opacity:0;scale:1.06;visibility:hidden;pointer-events:none}
#llegada[hidden]{display:none}

/* el cuadro, encuadrado como cover: primero 100 %/100 % (navegadores sin cq: object-fit hace el resto),
   después el cálculo exacto */
#llegada .marco{position:absolute;left:50%;top:50%;translate:-50% -50%;width:100%;height:100%;
  width:max(100cqw,100cqh * 1.7933);height:max(100cqh,100cqw / 1.7933)}
#llegada video,#llegada img.final{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:44% 50%;display:block}
#llegada video[hidden],#llegada img.final[hidden]{display:none}
/* 23-sep 21:40 (Nicolás: «mejorá la calidad»): teléfono vertical (html[data-llegada=recorte], lo decide la cabeza). Un
   celular vertical ve solo ~26 % del ancho del cuadro; bajar el cuadro entero desperdiciaba 3/4 de los píxeles. Ahora el
   video es SOLO la franja 16,1994 %–72,2742 % del cuadro (1440×1432, reescalada con IA x2): la caja del video es esa
   franja. Con cover y object-position 36,8795 %, un medio de cuadro entero (16:9) cae exacto en la misma franja
   (0,161994 / (1 − 0,560748)), así que el póster, el respaldo y el zoom quedan alineados aunque vengan enteros.
   Cubre cualquier pantalla con ancho ≤ alto (la franja alcanza hasta 1,003 de proporción). */
html[data-llegada=recorte] #llegada video,html[data-llegada=recorte] #llegada img.final{left:16.1994%;width:56.0748%;
  object-position:36.8795% 50%}

/* el anuncio de andén y el botón, debajo de las puertas abiertas (44,3 % · 43 % del cuadro) */
#llegada .anuncio{position:absolute;left:44.3%;top:56%;translate:-50% 0;margin:0;white-space:nowrap;
  font:500 12px/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:#F7F1E6;
  padding:9px 14px;border-radius:999px;background:rgba(11,30,43,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--orbe)}
#llegada .entra{white-space:nowrap;position:absolute;left:44.3%;top:63%;translate:-50% 0;padding:16px 36px;font-size:19px;
  box-shadow:0 12px 32px rgba(11,30,43,.45);opacity:0;scale:.92;
  transition:opacity .32s var(--orbe),scale .32s var(--peluche),background .16s var(--cromo)}
#llegada.lista .anuncio{opacity:1}
#llegada.lista .entra{opacity:1;scale:1}
#llegada .entra:focus-visible{outline-offset:4px}

/* teléfono: el cuadro se corre para que las puertas (44,3 % del cuadro) caigan en el centro de la pantalla */
@media(max-width:760px){
  #llegada .marco{translate:-44.3% -50%}
  #llegada .anuncio{top:57%;font-size:11px;letter-spacing:.12em}
  #llegada .entra{top:64%;padding:15px 32px;font-size:18px}
}

/* red de seguridad: si llegada.js no llega (404, red), la cortina se corre sola a los 12 s.
   Sin JS no existe: se ve el vagón de una. */
@keyframes llegada-salva{to{opacity:0;visibility:hidden}}
#llegada:not(.js){animation:llegada-salva .6s var(--cromo) 12s both}
@media(scripting:none){#llegada{display:none}}
@media(prefers-reduced-motion:reduce){
  #llegada{transition:none}
  #llegada .anuncio,#llegada .entra{transition:none}
  #llegada:not(.js){animation:none}
}

/* v8.2 · LA ENTRADA (Nicolás, 22-sep 15:10; spec 71): al tocar «Entrá» #llegada se despega del hero y se fija a
   la pantalla (.zoom) mientras corre el zoom hacia la puerta (video.zoom, disolvencia de 240 ms desde el último
   cuadro de la llegada) y la página se pasa al vagón por debajo. .saliendo (700 ms) se conserva para el final.
   z 40: debajo del nav (--z-nav 50), como la llegada de siempre. Un hijo fijo del hero solo pinta encima de
   #viaje porque llegada.js apaga la aislación del hero al fijar (isolation:auto en línea).
   Estados: .zoom (fijo) · video.zoom.va (visible). Sin vh (guarda de arma): inset 0. */
#llegada.zoom{position:fixed;inset:0;z-index:40}
#llegada video.zoom{opacity:0;transition:opacity .24s var(--cromo)}
#llegada video.zoom.va{opacity:1}
#llegada.zoom .anuncio,#llegada.zoom .entra{opacity:0;pointer-events:none;transition:opacity .24s var(--cromo)}
@media(prefers-reduced-motion:reduce){#llegada video.zoom{transition:none}}

/* v8.5 · EL SALTO (barra de secciones, 90-llegada-rapida.md §3): quien toca una sección durante la llegada se salta
   la experiencia. La cortina se va en 150 ms, sin escala ni zoom; llegada.js la esconde (hidden) al terminar. */
#llegada.saltando{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s linear,visibility 0s linear .15s}
@media(prefers-reduced-motion:reduce){#llegada.saltando{transition:none}}

/* 23-sep: si la persona intenta bajar con el botón a la vista, el botón late (hay que tocarlo para entrar) */
#llegada .entra.late{animation:entra-late .6s var(--cromo,ease) 1}
@keyframes entra-late{0%,100%{scale:1}40%{scale:1.1}70%{scale:.97}}
@media(prefers-reduced-motion:reduce){#llegada .entra.late{animation:none;outline:2px solid currentColor;outline-offset:4px}}