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

   1. NO HAY PARES 1:1/9:16. A diferencia de Barkys, no se confirmo que un
      post y una story compartan exactamente la misma pieza recompuesta, asi
      que no se fuerza el bloque. Las historias van en su propia galeria
      vertical, independiente del feed.

   2. DOS BANNERS A SANGRE, NO COMPUESTOS. La Mera Mera no tiene laminas de
      Behance, pero SI tiene banners de sitio web reales a 1920x700: se usan
      tal cual, sin componer una tira (a diferencia de Coltanques o Famoc).

   PALETA — muestreada del propio logo (el sticker en Redes/2022/06-Abr/Extras
   Inauguracion.jpg), no inventada:
     #EC1E5F  rosa vivo de marca      #27D9C3  turquesa secundario del lockup
   El rosa vivo da 4,27:1 sobre blanco y NO pasa AA. El token de acento es
   #C81950, el mismo rosa bajado hasta 5,66:1. El vivo no se usa en interfaz,
   solo en superficies grandes (velo del hero, selection).
   ========================================================================== */

.caso-meramera {
  color-scheme: light;

  --tinta:        #171316;
  --tinta-media:  #5c5560;   /* 7,2:1 sobre blanco */
  --tinta-suave:  #7a7278;   /* 4,6:1 sobre blanco: el minimo para texto */
  --linea:        #ecdfe4;
  --papel:        #ffffff;
  --papel-alt:    #fdf7f9;
  --rosa:         #c81950;   /* 5,66:1 sobre blanco */
  --rosa-vivo:    #ec1e5f;   /* fondo del hero, bajo las tiras */
  --rosa-hondo:   #9c1140;   /* velo del hero, mas hondo que el vivo */
  --turquesa:     #17a896;   /* decorativo: nunca lleva texto encima */

  --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: "Rye", ui-serif, Georgia, serif;
  --texto:   "Nunito Sans", 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-meramera, .caso-meramera *, .caso-meramera *::before, .caso-meramera *::after {
  box-sizing: border-box;
}

.caso-meramera {
  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;
}

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

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

.caso-meramera a { color: inherit; }

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

.caso-meramera :focus-visible { outline: 2px solid var(--rosa); 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 a distintas velocidades,
   igual que en Barkys. La Mera Mera no tiene una lamina grande para abrir
   con ella, y el material del feed ya es suficientemente fuerte: rosa,
   turquesa, patron otomi. */

.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78dvh, 760px);
  overflow: hidden;
  background: var(--rosa-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(90 10 40 / .55), transparent 62%),
    rgb(156 17 64 / .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: 22ch;
  font-family: var(--display); font-weight: 400;
  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. Turquesa y no blanco: el resto del
   titulo ya es blanco solido, asi que un cambio de color es lo unico que se
   nota como enfasis sin agregar peso ni subrayado.
   Contraste contra el peor caso del velo (un pixel blanco de una pieza
   detras, al 90%): 3,85:1. El titulo es texto grande (min. 2,1rem, siempre
   por encima del umbral de 24px), asi que el minimo AA es 3:1 y no 4,5:1. */
.destaca { color: var(--turquesa); }

.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; }

/* --- Banners a sangre -------------------------------------------------- */

.lamina {
  margin-block: clamp(3.5rem, 7vw, 5.5rem);
  margin-inline: 0;
  overflow: hidden;
}
.lamina img { width: 100%; height: auto; }

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

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

/* Titulos de seccion en versales con un filete corto, patron de Klear tos y
   Konempleo: el filete hereda `currentColor` (el rosa del titulo), asi que
   no hace falta un segundo token de color solo para la linea. */
.bloque__titulo {
  margin: 0 0 var(--e3);
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.15; letter-spacing: 0;
  text-wrap: balance;
  color: var(--rosa);
  text-transform: uppercase;
}
/* EL BUG QUE INFLABA EL TITULO, encontrado ago 2026 en la seccion de
   banners (el titulo mas largo de la pagina, el primero en topar con esto).
   El texto del h2 viajaba como nodo de texto suelto, y un flex item creado a
   partir de texto crudo hereda `min-width: auto`: no se encoge nunca por
   debajo de su ancho SIN ENVOLVER, sin importar cuanto `text-wrap: balance`
   se le pida. Con un titulo largo en Rye (una fuente ancha) a 2,75rem, ese
   ancho minimo superaba el del contenedor y el titulo se salia de la
   pagina entero, en una sola linea, en vez de partirse en dos.
   La salida es envolver el texto en un <span>: un elemento normal SI puede
   recibir `min-width: 0` y wrappear como se espera. */
.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);
}

/* --- 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):not(.banners-sitio) > 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 y correos: una fila, todas a la misma altura ---------------
   Seis piezas de proporciones muy distintas (Storie 9:16 junto a correos de
   hasta 1:2,45): meterlas en una rejilla que respeta el ancho de cada una
   deja alturas descuadradas y la fila se ve rota. La salida es la misma que
   agrupar videos por forma en Klear tos: flex con una ALTURA fija y cada
   pieza aporta su propio ancho a partir de su proporcion real. Nadie se
   recorta, nadie se estira. */
.galeria--historias {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 20px);
  height: clamp(230px, 30vw, 320px);
}
.galeria--historias > li {
  flex: 0 0 auto;
  height: 100%;
}
.galeria--historias .pieza {
  height: 100%;
  background: none;
}
.galeria--historias .pieza img {
  height: 100%;
  width: auto;
  max-width: none;
}
/* Cuando envuelve, la fila deja de tener una altura comun: cada pieza vuelve
   a su ancho de columna normal para no dejar una tira suelta y angosta. */
@media (max-width: 699px) {
  .galeria--historias {
    height: auto;
  }
  .galeria--historias > li {
    flex: 0 0 calc(50% - .5 * clamp(10px, 1.4vw, 20px));
    height: auto;
  }
  .galeria--historias .pieza img {
    height: auto;
    width: 100%;
  }
}

/* --- Banners para el sitio web ---------------------------------------------
   1920x700 (2,74:1): dos por fila alcanzan para leerlos, cuatro los dejaria
   en estampillas. */
.galeria.banners-sitio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 699px) {
  .galeria.banners-sitio { grid-template-columns: 1fr; }
}

.pieza {
  position: relative;
  display: block; width: 100%; padding: 0;
  border: 0; background: var(--papel-alt);
  cursor: zoom-in;
  overflow: hidden;
}
.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 una vista previa de
   cuadricula. Un clic abre el visor y ahi si reproducen completas, con
   sonido y controles (ver meramera.js). Gap mas apretado que el resto de la
   pagina a proposito: seis vistas previas mudas leen mejor juntas, como una
   tira de contactos, que separadas como si fueran piezas independientes. */

.reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 10px);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 899px) { .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.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 --------------------------------
   Antes eran dos bloques apilados; ahora van uno al lado del otro, como en
   Klear tos y Konempleo: creditos a la izquierda, la pregunta de cierre a la
   derecha, y el boton centrado abajo de las dos columnas. En movil cae a una
   sola columna y el boton sigue centrado. El texto de creditos se mantuvo a
   proposito en unas cuatro lineas: mas largo y desequilibra la columna de al
   lado, que es mas corta. */

.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(--rosa);
  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(--rosa);
  max-width: none;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, .95rem + 1.55vw, 2.15rem);
  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);
}

/* Mismo fallo que ya aparecio en Barkys, Coltanques y Bonfibra: el boton es
   un <a>, asi que `.caso-X a { color: inherit }` le gana por especificidad a
   `.boton { color: #fff }` si el selector del boton no lleva la clase del
   caso delante. Se evita desde el inicio, no se corrige despues. */
/* Unica excepcion al radio 0 de la pagina, igual que en Klear tos y
   Konempleo: el boton de cierre en pildora. La floritura (el signo "❧") es
   el mismo ornamento blanco que se repite en las piezas de la cuenta
   alrededor de las palabras que quieren enfasis ("❧CATERING❧", "❧FELIZ
   DÍA!❧"): aqui se copia, no se inventa uno nuevo. */
.caso-meramera .boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 2.1rem;
  background: var(--rosa); color: #fff;
  font-family: var(--texto); font-weight: 600; font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  transition: background .2s var(--salida), transform .2s var(--salida);
}
.caso-meramera .boton::before,
.caso-meramera .boton::after {
  content: "❧";
  font-size: .85em;
  color: rgb(255 255 255 / .75);
}
.caso-meramera .boton::after { transform: scaleX(-1); }
.caso-meramera .boton:hover { background: #a81443; }
.caso-meramera .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(--rosa); }

@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;
}
.visor::backdrop { background: rgb(17 15 16 / .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));
}
/* EL BUG QUE HACIA VER MAL CUALQUIER PIEZA ABIERTA, encontrado ago 2026 al
   revisar este caso. `max-height: 100%` aqui NUNCA se resolvia: el padre
   (`.visor__marco`) recibe su alto del track `1fr` de `.visor[open]`, y ese
   alto resultante no cuenta como "definido" para que un descendiente resuelva
   un porcentaje contra el, ni con grid ni con object-fit ni fijandole un
   pixel exacto por JS de prueba. El navegador entonces trataba `max-height`
   como si no existiera y pintaba la pieza a su tamano NATURAL: una imagen de
   1080 px o un video de 1920 px de alto, desbordando la ventana entera. Es
   el mismo sintoma que describio Miguel: "cuando abro una imagen se ve mal".

   La salida es no depender de un porcentaje: `dvh` es siempre un numero
   absoluto sin importar la cadena de contenedores. 78dvh deja de sobra los
   pocos rem de `.visor__barra` (contador y flechas) debajo. */
.visor__marco img {
  max-width: 100%; max-height: 78dvh;
  width: auto; height: auto;
  object-fit: contain;
  background: #fff;
}
/* Los reels abren en el mismo visor que las imagenes, pero con controles y
   sonido: en la rejilla van mudos y en bucle, aqui se ven completos. Fondo
   negro porque un video vertical con marco blanco se lee como una foto mal
   recortada. */
.visor__marco video {
  max-width: 100%; max-height: 78dvh;
  width: auto; height: auto;
  background: #000;
}

/* EL FALLO QUE INFLABA LA IMAGEN. `.caso-meramera img, .caso-meramera video {
   display: block; }`, mas arriba en esta hoja, le gana en especificidad a la
   regla del navegador para `[hidden]` (que es solo `display: none` con
   especificidad de una clase). El resultado: el elemento oculto del visor
   (el <video>, o el <img> cuando un reel lo oculta a EL) seguia contando como
   una fila mas dentro del grid de `.visor__marco`, aunque no se viera. Con
   dos filas en vez de una, el alto de `.visor__marco` dejaba de ser un numero
   fijo y pasaba a depender de su propio contenido, y el `max-height: 100%` de
   la imagen quedaba resolviendo contra una referencia circular: el navegador
   se rinde en ese caso y pinta la imagen a su tamano natural, sin limite. Se
   ve exactamente asi: una pieza que deberia caber en la pantalla,
   desbordandola entera. Corregido de entrada, no encontrado despues, porque
   ya se documento en Konempleo. */
.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)) var(--e4);
  color: #f2f2f2;
}
.visor__cuenta {
  flex: 1;
  font-family: var(--dato); font-size: .78rem;
  color: #a89aa0; 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: var(--e2); right: clamp(var(--e2), 4vw, var(--e4));
}

/* ==========================================================================
   MOVIMIENTO — mismo patron que Barkys y Bonfibra, ver esos LEEME para el
   porque de cada capa. Aqui no hay `.par`, asi que esa capa se quita entera.
   ========================================================================== */

.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) {

    .galeria, .reels { perspective: 1500px; }
    .galeria > li, .reels > li { transform-style: preserve-3d; }

    .js:not(.sin-timeline) .galeria > li,
    .js:not(.sin-timeline) .reels > 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 { opacity: 1; transform: none;
      animation: asoma linear both;
      animation-timeline: view(); animation-range: entry 4% cover 22%; }

    .lamina { overflow: hidden; }
    .js:not(.sin-timeline) .lamina img {
      animation: acerca linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}

@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; }
}
@keyframes acerca {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

.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 .lamina, .js .lamina img {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .pieza img, .boton { transition: none; }
  .pieza:hover img, .pieza:focus-visible img { transform: none; }
}

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