/* ==========================================================================
   momenta.css — pagina de caso, en clave de galeria
   --------------------------------------------------------------------------
   Mismo patron que Barkys, Bonfibra y La Mera Mera: galeria en blanco, radio
   0, el color de marca como unico acento interactivo. Dos cosas propias de
   este caso:

   1. LA SECCION "LA TRANSICION DE MARCA" (.transicion). Ningun otro caso del
      portafolio la necesita: Momenta cambio de identidad completa a mitad
      del material -rojo a verde, hecho por una agencia internacional, no
      por Ballestastudio- y esta seccion muestra las tres eras (antes / en
      transicion / despues) como una secuencia, no como un tema mas del feed.

   2. EL BANNER NO VA A SANGRE (.lamina--contenida). El unico archivo
      horizontal del material es la portada de Facebook, a su resolucion
      nativa de 851x315 (el tamano que exige Facebook). Estirarlo a 100vw en
      una pantalla grande se ve borroso, asi que se muestra a un ancho
      contenido y centrado, como una pieza mas -no como respiro a sangre-.

   PALETA — muestreada de piezas reales, no inventada:
     Antes (2021-medios de 2022):        #E01E24 rojo de marca original
     Transicion (fin 2022):              #00B386 turquesa del sistema nuevo,
                                          conviviendo con el rojo en piezas
                                          reales de esa fecha
     Despues (2023, ya consolidado):     #007A61 verde de marca, tomado de
                                          un post con el sistema ya completo
   El verde vivo (#00B386) da 2,7:1 sobre blanco y NO pasa AA: se reserva
   para superficies grandes (velo del hero, insignias). El token de acento
   de texto e interfaz es #00785A, el mismo verde bajado hasta 5,3:1. El rojo
   original solo aparece como marca historica -la tarjeta "antes" y el
   filete del logotipo viejo en el banner-, nunca como acento interactivo.
   ========================================================================== */

.caso-momenta {
  color-scheme: light;

  --tinta:        #16211d;
  --tinta-media:  #526059;   /* 7,6:1 sobre blanco */
  --tinta-suave:  #6c7972;   /* 4,7:1 sobre blanco: el minimo para texto */
  --linea:        #dde8e2;
  --papel:        #ffffff;
  --papel-alt:    #f4faf7;
  --verde:        #00785a;   /* 5,3:1 sobre blanco */
  --verde-vivo:   #00b386;   /* fondo del hero, insignias grandes */
  --verde-hondo:  #00453a;   /* velo del hero, mas hondo que el vivo */
  --rojo:         #d21f28;   /* solo como marca historica, nunca interactivo */

  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2.5rem;
  --e5: 4rem;   --e6: 6rem;   --e7: clamp(5rem, 12vw, 9rem);

  --ancho: 1240px;
  --margen: clamp(1.25rem, 5vw, 3.5rem);

  --display: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --texto:   "Inter", ui-sans-serif, system-ui, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --salida: cubic-bezier(.16, 1, .3, 1);
}

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

.caso-momenta {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Ya hay estados de foco y hover propios (:focus-visible, .pieza:hover):
     el flash gris del tap movil de fabrica no hace falta. */
  -webkit-tap-highlight-color: transparent;
}

body:has(> .caso-momenta) { margin: 0; background: var(--papel); }

.caso-momenta img, .caso-momenta video { display: block; max-width: 100%; }

.caso-momenta a { color: inherit; }

.caso-momenta ::selection { background: var(--verde-vivo); color: #fff; }

.caso-momenta :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.salta { position: absolute; left: -9999px; }
.salta:focus {
  left: var(--margen); top: var(--e2); z-index: 60;
  padding: .7rem 1.1rem; background: var(--tinta); color: #fff;
  font-family: var(--dato); font-size: .82rem;
}

/* --- Apertura -------------------------------------------------------------
   El fondo son las piezas reales en cuatro tiras, igual que en Barkys y La
   Mera Mera: el feed de salud ya trae suficiente registro visual propio. */

.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78dvh, 760px);
  overflow: hidden;
  background: var(--verde-hondo);
  isolation: isolate;
}

.portada__fondo {
  position: absolute; inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(8px, 1.2vw, 16px);
}
@media (max-width: 699px) {
  .portada__fondo { grid-template-columns: repeat(2, 1fr); }
  .portada__fondo > :nth-child(n+3) { display: none; }
}

.tira {
  display: grid;
  gap: clamp(8px, 1.2vw, 16px);
  align-content: start;
  will-change: transform;
}
.tira img { width: 100%; height: auto; }

.portada__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 30 24 / .55), transparent 62%),
    rgb(0 69 58 / .90);
}

.portada__texto {
  position: relative;
  width: 100%;
  padding-block: clamp(6rem, 14vw, 9rem) clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.portada__rotulo {
  margin: 0 0 var(--e2);
  font-family: var(--dato);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgb(255 255 255 / .82);
}
.portada__titulo {
  margin: 0;
  max-width: 30ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.12; letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.portada__bajada {
  margin: var(--e3) 0 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  color: rgb(255 255 255 / .92);
  text-wrap: balance;
}

/* Una palabra del titular, resaltada en el turquesa de la transicion: el
   resto del titulo ya es blanco solido, un cambio de color es lo unico que
   se nota sin agregar peso ni subrayado. Contraste contra el peor caso del
   velo: 3,4:1. Texto grande (min. 2,1rem, siempre sobre el umbral de 24px),
   el minimo AA es 3:1, no 4,5:1. */
.destaca { color: var(--verde-vivo); }

.marca {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(var(--e2), 2.5vw, var(--e4)) var(--margen);
}
.marca a { display: inline-block; }
.marca img { width: clamp(104px, 11vw, 132px); height: auto; }

/* --- Bloques de texto ---------------------------------------------------- */

.bloque { margin-block: clamp(3.5rem, 7vw, 5.5rem); }

.bloque__titulo {
  margin: 0 0 var(--e3);
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.5rem);
  line-height: 1.15; letter-spacing: 0;
  text-wrap: balance;
  color: var(--verde);
  text-transform: uppercase;
}
/* El texto del h2 va en un <span> para que reciba min-width: 0 y pueda
   partirse en dos lineas: un nodo de texto crudo dentro de un flex item
   hereda min-width: auto y nunca se encoge sin envolver (bug documentado en
   La Mera Mera, punto 5c de la skill). */
.bloque__titulo > span { min-width: 0; }

.bloque__titulo::after {
  content: "";
  flex: 0 0 2.6rem;
  height: .35rem;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .55;
}
.bloque--centrado > .bloque__titulo::before,
.bloque__titulo--solo::before {
  content: "";
  flex: 0 0 2.6rem;
  height: .35rem;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .55;
}
.bloque--centrado > .bloque__titulo,
.bloque__titulo--solo { justify-content: center; }

.bloque__titulo--solo {
  margin-bottom: var(--e4);
  text-align: center;
}

.bloque--centrado > .bloque__titulo,
.bloque--centrado > .bloque__texto {
  text-align: center;
  margin-inline: auto;
}
.bloque__texto {
  margin: 0;
  max-width: 62ch;
  color: var(--tinta-media);
}
.bloque__texto + .bloque__texto { margin-top: var(--e2); }

.dos-columnas {
  display: grid; gap: var(--e3) var(--e5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.alcance { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.alcance li {
  padding-top: var(--e2);
  border-top: 1px solid var(--linea);
  color: var(--tinta-media);
}

/* --- La transicion de marca -------------------------------------------------
   Tres tarjetas en secuencia (antes / en transicion / despues), cada una con
   una insignia de era. El color de la insignia sigue la paleta real de cada
   momento: rojo para "antes", turquesa para "transicion", verde para
   "despues" -la unica vez que el rojo aparece en toda la pagina, a proposito,
   como marca historica. */
.transicion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 699px) {
  .transicion { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

.transicion__tarjeta { display: grid; gap: .85rem; }
.transicion__tarjeta .pieza { background: var(--papel-alt); }

.transicion__era {
  margin: 0;
  justify-self: center;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-family: var(--dato); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.transicion__tarjeta:nth-child(1) .transicion__era { background: var(--rojo); }
.transicion__tarjeta:nth-child(2) .transicion__era {
  background: linear-gradient(90deg, var(--rojo), var(--verde-vivo));
}
.transicion__tarjeta:nth-child(3) .transicion__era { background: var(--verde); }

/* Banner contenido, no a sangre: el archivo original es una portada de
   Facebook a 851x315, la resolucion que exige la plataforma. Estirarlo a
   100vw en una pantalla grande se ve borroso, asi que se centra a un ancho
   que se queda cerca de su tamano real. */
.lamina--contenida {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 700px;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.lamina--contenida img { width: 100%; height: auto; }
.lamina__pie {
  margin: 0;
  padding: .7rem var(--e2);
  background: var(--papel-alt);
  border-top: 1px solid var(--linea);
  font-size: .82rem;
  color: var(--tinta-suave);
  text-align: center;
}

/* --- Rejilla de galeria -------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  margin: 0; padding: 0; list-style: none;
  grid-auto-flow: dense;
}

@media (min-width: 900px) {
  .galeria:not(.galeria--historias) > li:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 899px) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Historias: marquesina continua ----------------------------------------
   Seis piezas de Storie, todas en 9:16. Antes esto avanzaba a saltos (un
   temporizador en JS empujaba el scroll cada 3,2 s) y se sentia entrecortado:
   ahora es una marquesina que se desliza sin parar, misma tecnica que las
   tiras del hero.

   POR QUE EL CICLO SE CALCULA Y NO ES UN -50%: la lista lleva las seis piezas
   dos veces (las seis segundas son clones aria-hidden, ver generar_pagina.py).
   Un translate de -50% no cierra el bucle sin costura, porque el ancho total
   son 12 piezas + 11 huecos y la mitad de eso cae dentro de un hueco. El
   salto exacto es "seis piezas + seis huecos": ahi la pieza 7 queda justo
   donde arranco la 1 y el reinicio no se ve. Como las seis son 9:16 exactas,
   el ancho de cada una se deduce del alto y el calculo es cerrado.

   El riel ocupa el ancho completo de .contenedor, igual que la rejilla del
   feed de arriba: el desborde lo esconde .historias-carrusel. */
.historias-carrusel {
  --alto-hist: clamp(230px, 30vw, 320px);
  --hueco-hist: clamp(10px, 1.4vw, 20px);
  --ancho-hist: calc(var(--alto-hist) * 9 / 16);
  --ciclo-hist: calc(6 * (var(--ancho-hist) + var(--hueco-hist)));

  overflow: hidden;
}

.galeria--historias {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--hueco-hist);
  height: var(--alto-hist);
  will-change: transform;
}
.js .galeria--historias {
  animation: desfilar-historias 42s linear infinite;
}
/* Se detiene con el mouse o el foco encima, para poder mirar una pieza o
   abrirla en el visor sin perseguirla. */
.historias-carrusel:hover .galeria--historias,
.galeria--historias:focus-within {
  animation-play-state: paused;
}

@keyframes desfilar-historias {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--ciclo-hist)), 0, 0); }
}

.galeria--historias > li {
  flex: 0 0 var(--ancho-hist);
  width: var(--ancho-hist);
  height: 100%;
}
.galeria--historias .pieza {
  height: 100%;
  background: none;
}
.galeria--historias .pieza img {
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
}
/* Los clones existen solo para cerrar el bucle: no son botones, no reciben
   foco y no entran al visor (ver el selector de momenta.js). */
.pieza--clon { cursor: default; }
.pieza--clon:hover img { transform: none; }

/* Sin JS la marquesina no corre (la animacion cuelga de `.js`), asi que el
   riel vuelve a ser un carrusel que se desliza a mano. */
html:not(.js) .historias-carrusel {
  overflow-x: auto;
}

.pieza {
  position: relative;
  display: block; width: 100%; padding: 0;
  border: 0; background: var(--papel-alt);
  cursor: zoom-in;
  overflow: hidden;
  touch-action: manipulation;
}
.pieza img {
  width: 100%; height: auto;
  transition: transform .5s var(--salida), opacity .3s ease;
}
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.06); }

/* --- Reels -------------------------------------------------------------------
   Sin controles nativos: se ven en bucle, mudas, como vista previa de
   cuadricula. Un clic abre el visor y ahi reproducen completas, con sonido y
   controles (ver momenta.js). Cuatro piezas, siempre en una sola fila -sin
   punto de quiebre a dos filas-: se van angostando en pantallas chicas antes
   que envolver. */

.reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.4vw, 12px);
  margin: 0; padding: 0; list-style: none;
}

.reel { margin: 0; }
.reel .pieza { cursor: pointer; }
.reel video {
  width: 100%; aspect-ratio: 9 / 16; height: auto;
  background: #000;
  pointer-events: none;
}

/* --- Creditos y cierre, en una sola seccion -------------------------------- */

.creditos-cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--linea);
}
@media (max-width: 699px) {
  .creditos-cierre { grid-template-columns: 1fr; gap: var(--e4); }
  .creditos-cierre__boton { grid-column: auto; }
}

.creditos-cierre__columna .bloque__titulo { margin-bottom: var(--e3); }

.creditos {
  max-width: 68ch;
  margin: 0;
  padding-left: var(--e3);
  border-left: 2px solid var(--verde);
  font-size: .95rem;
  color: var(--tinta-media);
}
.creditos strong { font-weight: 600; color: var(--tinta); }

.cierre__contenido h2 {
  margin: 0 0 var(--e2);
  color: var(--verde);
  max-width: none;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, .95rem + 1.4vw, 2rem);
  line-height: 1.15; letter-spacing: 0;
  text-wrap: balance;
  text-transform: uppercase;
}
.cierre__contenido p { margin: 0; max-width: 60ch; color: var(--tinta-media); }

.creditos-cierre__boton {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--e2);
}

/* El boton es un <a>: `.caso-X a { color: inherit }` le gana por
   especificidad a `.boton { color: #fff }` si el selector no lleva la clase
   del caso delante. Se evita desde el inicio. Unica excepcion al radio 0. */
.caso-momenta .boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 2.1rem;
  background: var(--verde); color: #fff;
  font-family: var(--texto); font-weight: 600; font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  touch-action: manipulation;
  transition: background .2s var(--salida), transform .2s var(--salida);
}
.caso-momenta .boton:hover { background: #005c44; }
.caso-momenta .boton:active { transform: translateY(1px); }

.pie {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--margen) clamp(2rem, 4vw, 3rem);
  background: var(--papel);
  text-align: center;
}
.pie > .contenedor { padding-inline: 0; }

.pie__filete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.pie__filete::before,
.pie__filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.pie__filete img { height: 26px; width: auto; }

.pie__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2) 0;
  margin-bottom: var(--e4);
}
.pie__menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(9px, 1.4vw, 17px);
  font-size: .87rem;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .2s;
}
.pie__menu a + a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 11px;
  margin-top: -5px;
  background: var(--linea);
}
.pie__menu a:hover { color: var(--verde); }

@media (max-width: 699px) {
  .pie__menu { gap: 0 var(--e1); }
  .pie__menu a::before { display: none; }
}

.pie__legal { margin: 0; font-size: .8rem; color: var(--tinta-suave); }
.pie__nota { margin: 6px 0 0; font-size: .78rem; color: var(--tinta-suave); opacity: .85; }

/* --- Visor (lightbox) ------------------------------------------------------ */

.visor {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: manipulation;
}
.visor::backdrop { background: rgb(10 15 13 / .95); }
/* `minmax(0, 1fr)` y no `1fr`: son cosas distintas. `1fr` equivale a
   `minmax(auto, 1fr)`, y ese minimo `auto` es el min-content de lo que hay
   dentro — o sea el alto INTRINSECO de la imagen. Con una pieza vertical la
   fila crecia hasta el tamano real del archivo, la imagen se salia por abajo
   del dialogo y tapaba la barra de navegacion. Medido en Eterna: en un visor
   de 257px de alto, una pieza de 600x1600 se pintaba a 981px.
   El `0` de minimo deja que la fila se encoja y la imagen se ajuste. */
.visor[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }

/* Flex y no grid: con `place-items: center` la imagen quedaba de item de
   rejilla y su `max-height: 100%` se resolvia contra una altura que la propia
   imagen estaba estirando. En flex el marco manda y la imagen se ajusta.
   `overflow: hidden` es el cinturon de seguridad por si algo se escapa. */
.visor__marco {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
  overflow: hidden;
  padding: clamp(var(--e3), 5vw, var(--e5));
}
/* max-height en dvh, nunca en %: el padre recibe su alto de un track 1fr de
   grid, y ese alto no cuenta como "definido" para que un descendiente
   resuelva un porcentaje contra el (bug documentado en La Mera Mera, punto
   5b de la skill). dvh es un numero absoluto sin importar la cadena de
   contenedores. */
.visor__marco img {
  max-width: 100%; max-height: 78dvh;
  width: auto; height: auto;
  object-fit: contain;
  background: #fff;
}
.visor__marco video {
  max-width: 100%; max-height: 78dvh;
  width: auto; height: auto;
  background: #000;
}
/* `.caso-momenta img, .caso-momenta video { display: block }` gana en
   especificidad a la regla del navegador para [hidden]: sin esto, el
   elemento oculto del visor seguiria contando como una fila mas dentro del
   grid de .visor__marco (mismo bug del punto 5b, corregido de entrada). */
.visor__marco img[hidden], .visor__marco video[hidden] { display: none; }
.visor__barra {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) clamp(var(--e2), 4vw, var(--e4))
           max(var(--e4), env(safe-area-inset-bottom));
  color: #f2f2f2;
}
.visor__cuenta {
  flex: 1;
  font-family: var(--dato); font-size: .78rem;
  color: #9fb0aa; white-space: nowrap;
}
.visor__nav { display: flex; gap: .5rem; }

.visor button {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  color: #fff; background: rgb(255 255 255 / .1);
  border: 0; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: background .2s var(--salida);
}
.visor button:hover:not(:disabled) { background: rgb(255 255 255 / .24); }
.visor button:disabled { opacity: .3; cursor: default; }
.visor__cerrar {
  position: absolute;
  top: max(var(--e2), env(safe-area-inset-top));
  right: max(clamp(var(--e2), 4vw, var(--e4)), env(safe-area-inset-right));
}

/* ==========================================================================
   MOVIMIENTO — mismo patron que Barkys, Bonfibra y La Mera Mera.
   ========================================================================== */

.js [data-entra] {
  opacity: 0;
  transform: translateY(20px) scale(.985);
}
.js [data-entra].visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .75s var(--salida) var(--retraso, 0ms),
    transform .75s var(--salida) var(--retraso, 0ms);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* El carrusel de historias queda fuera de esta capa a proposito. Sus
       piezas no "entran" una por una: ya se mueven solas, y encima
       `.historias-carrusel` tiene `overflow: hidden`, lo que lo convierte en
       el scroll container de sus hijos. Una `view()` timeline medida contra
       un contenedor que no puede desplazarse deja el progreso congelado, y
       las piezas se arriesgan a quedarse en el fotograma inicial de `llega`
       (opacidad 0) para siempre. */
    .galeria:not(.galeria--historias), .reels, .transicion { perspective: 1500px; }
    .galeria:not(.galeria--historias) > li,
    .reels > li, .transicion > li { transform-style: preserve-3d; }

    .js:not(.sin-timeline) .galeria:not(.galeria--historias) > li,
    .js:not(.sin-timeline) .reels > li,
    .js:not(.sin-timeline) .transicion > li {
      opacity: 1;
      transform: none;
      animation: llega linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 34%;
    }

    .js:not(.sin-timeline) .bloque__titulo[data-entra],
    .js:not(.sin-timeline) .bloque__texto[data-entra] {
      opacity: 1;
      transform: none;
      animation: asoma linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }

    .js:not(.sin-timeline) .lamina--contenida { opacity: 1; transform: none;
      animation: asoma linear both;
      animation-timeline: view(); animation-range: entry 4% cover 22%; }
  }
}

@keyframes llega {
  from { opacity: 0; transform: translate3d(0, 44px, -150px) rotateX(11deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes asoma {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.js .tira {
  animation: desfilar var(--vel, 70s) linear infinite;
}
.js .tira:nth-child(even) { animation-direction: reverse; }
.js .tira:nth-child(1) { --vel: 68s; }
.js .tira:nth-child(2) { --vel: 84s; }
.js .tira:nth-child(3) { --vel: 74s; }
.js .tira:nth-child(4) { --vel: 92s; }

@keyframes desfilar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.js .portada__rotulo { animation: sube .8s var(--salida) both; animation-delay: .1s; }
.js .portada__titulo { animation: sube .9s var(--salida) both; animation-delay: .22s; }
.js .portada__bajada { animation: sube .9s var(--salida) both; animation-delay: .38s; }
.js .marca { animation: sube .7s var(--salida) both; animation-delay: .05s; }

@keyframes sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-entra] { opacity: 1; transform: none; transition: none; }
  .js .tira { animation: none; }
  .js .marca, .js .portada__rotulo, .js .portada__titulo,
  .js .portada__bajada,
  .js .galeria > li, .js .reels > li, .js .transicion > li, .js .lamina--contenida {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .pieza img, .boton { transition: none; }
  .pieza:hover img, .pieza:focus-visible img { transform: none; }

  /* La marquesina se detiene, y el riel vuelve a ser un carrusel que se
     desliza a mano: las piezas siguen todas alcanzables. */
  .js .galeria--historias { animation: none; transform: none; }
  .historias-carrusel { overflow-x: auto; }
}

@media print {
  .visor, .creditos-cierre__boton { display: none; }
  .js [data-entra] { opacity: 1; transform: none; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
}