/* ventana.css · constructor 4 · v8.3 (22-sep, tarde: la tira) · v8.4 (22-sep, 17 h: el encuadre, ver abajo)
   Lo que pasa por la ventana de la capsula (.ventana) y la banda del valle (.banda-ciudad, #valle).
   POR LA VENTANA PASA LA CIUDAD LIGADA AL SCROLL: una tira horizontal de 2N+1 escenas fijas (imagenes) en UNA
   capa (.tira) que ventana.js traslada con translate3d segun t (el progreso del viaje que emite metro.js).
   Sin <video>, sin loop, sin crossfade, sin parallax, sin tunel, sin anillos ni pilares, sin vallas.
   Solo selectores que empiezan por .ventana, .banda-ciudad o #valle. Tokens de tokens.css. Nada de vh.
   Spec: docs/web/v8-21sep/52-spec-ventana-tira.md */

/* ─── el marco ─────────────────────────────────────────────────────────────────────────────── */
.ventana{position:relative;overflow:hidden;background:var(--fondo,#0B1E2B);isolation:isolate;--foco-y:50%;
  contain:layout paint;user-select:none;-webkit-user-select:none}
.ventana>img.ventana-quieta{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--foco-y);z-index:0;display:block;max-width:none}
.ventana.viva>img.ventana-quieta{display:none}

/* ─── la tira: 2N+1 escenas fijas en UNA capa; ventana.js pone el transform (px) según t ───────
   Escena j en left: j×100 % (más el solape). Las de estación montan --solape sobre sus dos vecinas con una
   máscara suave y van encima: en la parada no se ve costura; en marcha cada costura es un fundido de 6 %.
   --fundido = solape / (1 + 2·solape) del ancho de la imagen (6/112 = 5,36 %). «A tope»: --solape:0% y
   quitar la regla .estacion. Sin transiciones: la tira sigue t cuadro a cuadro. */
.ventana{--solape:6%;--fundido:5.36%}
.ventana .tira{position:absolute;inset:0;z-index:1;will-change:transform;transform:translate3d(0,0,0)}
.ventana .tira>img{position:absolute;top:0;height:100%;left:calc(var(--i) * 100%);width:100%;
  object-fit:cover;object-position:50% var(--foco-v,var(--foco,50%));display:block;max-width:none;z-index:1;
  min-height:0;margin:0;isolation:auto;overflow:hidden;box-sizing:border-box;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important}
.ventana .tira>img:not([src]),.ventana .tira>img.rota{visibility:hidden}

/* ─── v8.4 (22-sep, 17 h) EL ENCUADRE ─────────────────────────────────────────────────────────
   Por qué solo se veía cielo: ventana.js les pone a las imágenes la clase «escena», y base.css tiene un
   componente .escena (la escena a sangre de la v7) con min-height:76svh (64svh en teléfono) y margin-top:48px.
   Cada imagen medía 684 px de alto dentro de una ventana de 224 px y arrancaba 48 px más abajo: por el hueco
   pasaba solo el cuarto de arriba de cada lámina. La línea min-height:0;margin:0… de arriba lo anula.
   Y las de estación llevan además la clase «estacion», que viaje.css pinta como tarjeta del catálogo
   (#viaje .estacion: padding 16 px, borde, radio y fondo --superficie, con especificidad de id): cada lámina
   de estación salía con un marco plano de 17 px (arriba se veía como una franja azul oscura). Por eso esas
   cuatro van con !important: es la única manera de ganarle a un selector con id sin salir de .ventana.
   Qué se ve ahora: la imagen mide 112 % del ancho del hueco (el solape), así que cover muestra el 36,7 % del
   alto, y la banca del plate tapa el 12 % de abajo de la caja: queda a la vista una franja del 31,6 % del alto
   de cada lámina, centrada en c = 0,633·P + 0,164 (P = foco de object-position). P = 0 → franja 0,6–32 %;
   P = 50 % → 32–64 %; P = 100 % → 64–95,5 %. Para centrar un contenido en c: P = (c − 0,164) / 0,633.
   Estaciones: el foco sale de estaciones.json (ventana.foco_y), que ventana.js pone como --foco en línea.
   Culturales: ventana.js les pone --foco 50 % fijo; su foco va aquí como --foco-v, atado al ARCHIVO (por el
   nombre del src, @900 o 1600), no a la posición: si cambia el orden de data-vias el foco viaja con la
   lámina, y si un src cae a la red (la lámina quieta) vuelve a su --foco. Medido en docs/web/v8-21sep/81. */
.ventana .tira>img.cultural[src*="-pano"]{--foco-v:55%}  /* las panorámicas a la medida (opción C, 22-sep 18:50) */
.ventana .tira>img.cultural[src*="/via-0-16x9"]{--foco-v:66%}  /* Atanasio: montañas, estadio entero, guayacanes */
.ventana .tira>img.cultural[src*="/via-1-16x9"]{--foco-v:60%}  /* Gemelos: fachadas, el cerro con luces, guayacanes */
.ventana .tira>img.cultural[src*="/via-2-16x9"]{--foco-v:66%}  /* Pablo Tobón: la marquesina entera y la calle */
.ventana .tira>img.cultural[src*="/via-3-16x9"]{--foco-v:42%}  /* Ciudad Universitaria: laderas con casas, la torre */
.ventana .tira>img.cultural[src*="/via-4-16x9"]{--foco-v:62%}  /* Biblioteca España: las rocas, cables, la ciudad */
.ventana .tira>img.cultural[src*="/via-5-16x9"]{--foco-v:58%}  /* Planetario: la cúpula completa y los cubos */
.ventana .tira>img.cultural[src*="/via-6-16x9"]{--foco-v:55%}  /* Palacio de la Cultura: la fachada y la calle */
.ventana .tira>img.cultural[src*="/via-7-16x9"]{--foco-v:58%}  /* Metropolitano: los arcos, el cerro, el lago */
.ventana .tira>img.cultural[src*="/via-8-16x9"]{--foco-v:52%}  /* Museo del Río: la bodega, la chimenea, el cerro */
.ventana .tira>img.cultural[src*="/via-9-16x9"]{--foco-v:66%}  /* Veracruz: la iglesia con su portada, la torre, los guayacanes */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .ventana .tira>img{left:calc(var(--i) * 100% - var(--solape));width:calc(100% + 2 * var(--solape))}
  .ventana .tira>img.estacion{z-index:2;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fundido),#000 calc(100% - var(--fundido)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--fundido),#000 calc(100% - var(--fundido)),transparent)}
}

/* ─── la banda del valle (#valle) ────────────────────────────────────────────────────────── */
.banda-ciudad{position:relative;overflow:hidden;aspect-ratio:21/9;max-height:420px;background:var(--fondo,#0B1E2B);
  border-radius:var(--radio-ventana,32px);isolation:isolate;contain:layout paint}
.banda-ciudad .banda-marco{position:absolute;inset:0}
.banda-ciudad .banda-tira{position:absolute;top:0;left:0;height:100%;display:flex;width:max-content;
  animation:banda-pasa 60s linear infinite;will-change:transform}
.banda-ciudad .banda-escena{position:relative;flex:none;height:100%;aspect-ratio:16/9;margin:0;overflow:hidden}
.banda-ciudad .banda-escena img{width:100%;height:100%;object-fit:cover;display:block}
.banda-ciudad .banda-escena figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;
  font-family:var(--f-titulo,Jost,sans-serif);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta,#F7F1E6);background:linear-gradient(0deg,rgba(11,30,43,.85),rgba(11,30,43,0))}
.banda-ciudad .banda-pilares{position:absolute;top:0;bottom:0;left:0;width:200%;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 636px,rgba(43,57,64,.9) 636px 639px,#C9D1D6 639px 645px,#EAEFF1 645px 647px,rgba(108,124,134,.9) 647px 650px,transparent 650px 660px);
  animation:banda-pasa 21s linear infinite;opacity:.9}
.banda-ciudad .banda-vela{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--fondo,#0B1E2B) 0%,rgba(11,30,43,0) 8%,rgba(11,30,43,0) 92%,var(--fondo,#0B1E2B) 100%)}
@keyframes banda-pasa{to{transform:translateX(-50%)}}
/* donde existe, la banda ademas deriva un poco con el scroll (encima del paso continuo) */
@supports (animation-timeline: view()){
  .banda-ciudad .banda-marco{animation:banda-deriva linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes banda-deriva{from{transform:translateX(3%)}to{transform:translateX(-3%)}}
}
html[data-vel="0"] .banda-ciudad .banda-tira,html[data-vel="0"] .banda-ciudad .banda-pilares{animation-play-state:paused}
/* y con #valle fuera de pantalla (main.js pone .dormida): la banda no anda si nadie la ve */
#valle.dormida .banda-tira,#valle.dormida .banda-pilares{animation-play-state:paused}
@media(max-width:860px){
  .banda-ciudad{aspect-ratio:16/9;border-radius:var(--radio,16px)}
  .banda-ciudad .banda-escena figcaption{font-size:11px;padding:28px 12px 10px}
  .banda-ciudad .banda-pilares{background-size:auto;opacity:.8}
}
#valle .wrap>.como,#valle .nota{color:var(--tinta-2,#8FA3AD);font-family:var(--f-cuerpo,Figtree,sans-serif);font-size:14px;max-width:62ch;margin:18px auto 0}
#valle .banda-ciudad{margin-top:28px}
#valle .palanca-valle{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-family:var(--f-cuerpo,Figtree,sans-serif);font-size:13px;color:var(--tinta-2,#8FA3AD)}

/* ─── quietud ──────────────────────────────────────────────────────────────────────────────── */
/* la tira no lleva transiciones nunca (sigue t cuadro a cuadro; en quietud t salta y ella salta con el): no hay nada que apagar */
@media(prefers-reduced-motion:reduce){
  .banda-ciudad .banda-tira,.banda-ciudad .banda-pilares,.banda-ciudad .banda-marco{animation:none}
  .banda-ciudad{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .banda-ciudad .banda-marco{position:relative;width:max-content;height:100%}
  .banda-ciudad .banda-tira{position:relative}
  .banda-ciudad .banda-escena{scroll-snap-align:start}
  .banda-ciudad .banda-pilares{display:none}
}