/* ==========================================================================
   konempleo.css — pagina de caso, en clave de galeria
   --------------------------------------------------------------------------
   Copiado del modulo de Barkys (00_LEEME_Portafolio_MKT.md), con los mismos
   tres principios y los tokens de esta cuenta. Sin laminas de Behance: el
   respiro entre secciones lo dan dos tiras compuestas con piezas propias
   (ver .lamina y build_assets.py / componer_tira), igual que en Coltanques.

   TRES DECISIONES QUE EXPLICAN TODO LO DEMAS, HEREDADAS DE TODO EL PORTAFOLIO

   1. Un solo tema, blanco. Una galeria se pinta de blanco por la misma razon
      que un museo.
   2. La pagina calla para que el trabajo hable. Sin cajas, sombras,
      degradados ni rotulos sobre las imagenes. El acento de marca tiene un
      solo trabajo: titulos de seccion y boton. Morado = lo que pone
      Konempleo. Negro = lo que dice el estudio.
   3. Radio 0 en todo, incluido el boton.

   PALETA — muestreada de los JPG originales, no inventada:
     #0b355b azul marino (logotipo y bloques de dato)   #8b1e8b morado (CTA y highlights)
   El marino da 12,5:1 sobre blanco: sirve de fondo del hero sin ajustar nada.
   El morado da 7,9:1 sobre blanco: pasa AA de sobra como acento de interfaz,
   tal cual se muestrea, sin bajarlo como hubo que hacer con el rojo de Barkys.
   ========================================================================== */

.caso-konempleo {
  color-scheme: light;

  --tinta:        #131313;
  --tinta-media:  #5c5c5c;   /* 6,9:1 sobre blanco */
  --tinta-suave:  #767676;   /* 4,7:1 sobre blanco: el minimo para texto */
  --linea:        #e8e8e8;
  --papel:        #ffffff;
  --papel-alt:    #fafafa;
  --acento:       #8b1e8b;   /* 7,9:1 sobre blanco */
  --marino:       #0b355b;   /* fondo del hero, bajo las tiras */

  --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-sans-serif, system-ui, sans-serif;
  --texto:   "Poppins", 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-konempleo, .caso-konempleo *, .caso-konempleo *::before, .caso-konempleo *::after {
  box-sizing: border-box;
}

.caso-konempleo {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

.caso-konempleo a { color: inherit; }

.caso-konempleo ::selection { background: var(--acento); color: #fff; }

.caso-konempleo :focus-visible { outline: 2px solid var(--acento); 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 del feed desplazandose en cuatro tiras a
   velocidades distintas, con un velo marino al 90 %. El marino es el color
   mas consistente de la marca (el del logotipo y los bloques de dato), asi
   que sirve de ancla del hero sin muestrear nada aparte. */

.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78dvh, 760px);
  overflow: hidden;
  background: var(--marino);
  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; }

/* Contraste verificado por construccion: el peor pixel posible (blanco) bajo
   un velo marino al 90 % da rgb(35,73,107), que con texto blanco es 9,35:1. */
.portada__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(6 30 51 / .55), transparent 62%),
    rgb(11 53 91 / .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: 700;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.06; 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;
  /* Dos lineas, no tres: el mismo recorte que .bloque--centrado > .bloque__texto,
     con su propio techo de cinco lineas en movil un poco mas abajo. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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

/* --- Tira a sangre ----------------------------------------------------------
   No hay carpeta de presentacion de Behance para este proyecto: el respiro
   entre secciones se compone con piezas propias de fondo lleno (ver
   componer_tira en build_assets.py). Se trata igual que una lamina: ancho de
   la VENTANA, no del contenedor, sin marco ni pie. */
.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); }

/* EN VERSALES, con un separador a manera de filete corto: un vector minimo,
   sin icono, que le da a cada titulo de seccion un acompanamiento propio sin
   romper el silencio del resto de la pagina (sin cajas, sin sombras). El
   filete es un `::after` (o `::before` cuando el titulo va centrado) hecho
   con dos bordes y currentColor, asi que hereda el acento sin CSS aparte. */
.bloque__titulo {
  margin: 0 0 var(--e3);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--acento);
  text-transform: uppercase;
}
.bloque__titulo::after {
  content: "";
  flex: 0 0 2.4rem;
  height: .32rem;
  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.4rem;
  height: .32rem;
  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);
  text-wrap: balance;
}
.bloque__texto + .bloque__texto { margin-top: var(--e2); }

/* La linea de apoyo bajo un titulo centrado se recorta a dos renglones para
   que no quede pegada a la rejilla que sigue: dos lineas es lo correcto al
   ancho del contenedor, y el margen de abajo abre el aire que le faltaba
   antes de la galeria. Abajo de 900 px la misma frase mide mas lineas, asi
   que el techo sube a cinco en vez de perder la mitad del texto. */
.bloque--centrado > .bloque__texto {
  margin-bottom: var(--e4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 899px) {
  .bloque--centrado > .bloque__texto,
  .portada__bajada { -webkit-line-clamp: 5; }
}

.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 -----------------------------------------------------
   Ni pies, ni nombres, ni fechas: solo la imagen y el zoom. La descripcion
   viaja en el alt, asi que un lector de pantalla la lee aunque no se vea. */

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

/* Una de cada seis ocupa 2x2, como en el resto del portafolio: filas iguales
   se leen como hoja de contactos y lo que se quiere es una galeria. */
@media (min-width: 900px) {
  .galeria:not(.galeria--vertical) > li:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Con 19 piezas la ultima cae justo en la posicion grande (19 = 6x3 + 1) y
     quedaba sola en su fila: forzar su grid-column a la derecha dejaba un
     recuadro reservado sin contenido arriba, porque el "dense" del navegador
     ya habia usado esa fila para acomodar piezas mas chicas antes de llegar
     a esta. Mas simple y sin ese riesgo: la ultima pieza vuelve a 1x1 cuando
     cae en la posicion grande, y se acomoda sola donde toque, como cualquier
     ultima fila incompleta. Si el conteo del feed cambia y deja de caer en
     un 6n+1, esta regla sencillamente no aplica. */
  .galeria:not(.galeria--vertical) > li:last-child:nth-child(6n + 1) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.galeria--vertical { grid-auto-flow: row; }

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

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

/* ==========================================================================
   CARRUSEL INFINITO — componente compartido por «Una pieza, dos formatos» y
   «Vacantes». Mismo mecanismo que las tiras del fondo del hero, aplicado a
   contenido que SI hay que poder abrir: la pista dobla el contenido (una
   vuelta real e interactiva, una vuelta decorativa) y se desliza sin parar;
   `overflow: hidden` mas una mascara en los bordes evita que el corte de la
   pista se note al entrar o salir del contenedor.
   ========================================================================== */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__pista {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 16px);
  width: max-content;
  margin: 0; padding: 0; list-style: none;
}
.marquee__pista > li { flex: 0 0 auto; margin: 0; }
.marquee__pista .pieza { width: auto; }

/* La pista solo se mueve con JS activo: sin el, el carrusel se queda quieto
   y sigue siendo una galeria completa y clicable, igual que las tiras del
   hero. `--vel` la fija cada instancia en linea. */
.js .marquee__pista {
  animation: desliza-marquee var(--vel, 45s) linear infinite;
}
.marquee--reversa.js .marquee__pista,
.js .marquee--reversa .marquee__pista { animation-direction: reverse; }

/* Pausa al pasar el mouse o el foco por CUALQUIER pieza de la pista, no solo
   al entrar al contenedor: asi da tiempo de mirar y de hacer clic sin que la
   pieza se escape deslizando. */
.marquee__pista:has(.pieza:hover),
.marquee__pista:has(.pieza:focus-visible) {
  animation-play-state: paused;
}

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

/* --- Una pieza, dos formatos: galeria a la izquierda, texto a la derecha --- */

.pares-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  align-items: center;
}
@media (min-width: 900px) {
  .pares-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e5); }
}
.pares__galeria { min-width: 0; }
.pares__texto { min-width: 0; }
.pares__texto .bloque__texto { margin-top: var(--e2); }

/* `img` a secas, no `.pieza img`: la mitad decorativa del bucle (ver
   `img_decorativa()` en generar_pagina.py) es una imagen suelta sin boton, y
   sin esta regla se quedaba al tamano nativo del archivo (1080 px). */
.pares__galeria .marquee__pista img { width: auto; height: clamp(140px, 15vw, 220px); }

/* --- Vacantes: dos filas que giran en direcciones opuestas ------------------
   «Que se saquen de una baraja»: al pasar el mouse la pieza se levanta y se
   agranda por encima de sus vecinas, en vez del zoom-en-el-sitio que usa el
   resto de la pagina. Por eso ESTA pieza es la unica del portafolio con
   sombra, y solo en el estado de hover: el resto de la pagina la sigue sin
   usar en reposo. */

.baraja {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-top: var(--e2);
}
/* Calculado para que unas 6 tarjetas quepan a la vez en el ancho del
   contenedor (1240 px): a ese ancho, 6 tarjetas de 9:16 con el gap de
   `.marquee__pista` piden unos 315 px de alto. */
.baraja .marquee__pista img { width: auto; height: clamp(220px, 24vw, 320px); }

.baraja .pieza {
  position: relative;
  z-index: 1;
  transition: transform .35s var(--salida), box-shadow .35s var(--salida);
}
.baraja .pieza:hover,
.baraja .pieza:focus-visible {
  z-index: 5;
  transform: translateY(-14px) scale(1.09);
  box-shadow: 0 24px 38px -18px rgb(19 19 19 / .38);
}
/* El zoom ya lo hace el boton entero: la imagen adentro no vuelve a escalar. */
.baraja .pieza:hover img, .baraja .pieza:focus-visible img { transform: none; }

/* --- 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 konempleo.js). */

.reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--e2), 2vw, var(--e3));
  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: 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. */

.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(--acento);
  font-size: .95rem;
  color: var(--tinta-media);
}
.creditos strong { font-weight: 500; color: var(--tinta); }

.cierre__contenido h2 {
  margin: 0 0 var(--e2);
  color: var(--acento);
  max-width: none;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, .95rem + 1.55vw, 2.15rem);
  line-height: 1.15; letter-spacing: -.015em;
  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);
}

/* OJO CON EL SELECTOR: el boton es un <a>, y `.caso-konempleo a { color:
   inherit }` (0,1,1) le gana a `.boton { color: #fff }` (0,1,0) si no se
   empata la especificidad. El fallo real que esto evita esta documentado en
   barkys.css; aqui se copia ya corregido. */
.caso-konempleo .boton {
  display: inline-block;
  padding: .95rem 2rem;
  background: var(--acento); color: #fff;
  font-family: var(--texto); font-weight: 500; font-size: 1rem;
  text-decoration: none;
  transition: background .2s var(--salida), transform .2s var(--salida);
  /* Unica excepcion al radio 0 de la pagina, igual que en Klear tos: el
     boton de cierre en pildora. */
  border-radius: 999px;
}
.caso-konempleo .boton:hover { background: #711671; }
.caso-konempleo .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(--acento); }

@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 17 17 / .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));
}
.visor__marco img {
  max-width: 100%; max-height: 100%;
  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: 100%;
  width: auto; height: auto;
  background: #000;
}

/* EL FALLO QUE INFLABA LA IMAGEN. `.caso-konempleo img, .caso-konempleo
   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
   `<video>` oculto del visor (y 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.

   La solucion es que el elemento oculto DEJE de participar en el grid, y
   para eso hace falta ganarle la especificidad a `[hidden]` con la propia. */
.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: #9a9a9a; 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 — identico al de Barkys, ver ese LEEME para el porque de cada
   capa y el detector de compositor "soportar no es ejecutar".
   ========================================================================== */

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

    /* .pares y .baraja quedan fuera a proposito: son carruseles que ya se
       mueven solos (ver .marquee__pista), y sumarles ademas la entrada en
       perspectiva volvia confuso el gesto de deslizar sin parar. */
    .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, .js .marquee__pista { 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, .pieza video, .boton, .baraja .pieza { transition: none; }
  .pieza:hover img, .pieza:focus-visible img,
  .pieza:hover video, .pieza:focus-visible video { transform: none; }
  .baraja .pieza:hover, .baraja .pieza:focus-visible {
    transform: none; box-shadow: none;
  }
}

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