/* Laura Romano — scaffold. Tema claro, mobile-first. Visual fino: Julia. */
:root {
  --r: 5px; /* redondeo leve de fotos y recuadros */
  /* tono base = crema del fondo de las home de Laura, tirado un toque más al blanco (pedido de Laura) */
  --bg: #efeee4;
  --fg: #1f1c15;
  --muted: #7c766a;
  --line: #d5d2c2;
  --tile: #e1dfd0;
  --max: 1200px;
  --gap: clamp(12px, 2vw, 20px);
  /* M5 (Julia 26-08): en mobile 4vw daba 16px; el piso sube a 22 */
  --pad: clamp(22px, 4vw, 48px);
  /* 07 (Julia 26-08): Georgia -> Newsreader */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* sans actual (fallback, no se pierde): system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif */
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400; /* antes 300: quedaba muy fina */
  /* 07 (Julia 26-08): cuerpo 16px con 24 de interlineado (antes 17/27.2) */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Header / nav ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  letter-spacing: 0.06em;
  /* 07 (Julia 26-08): de 18px a 21px */
  font-size: 21px;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}
.brand .logo {
  width: 46px; height: 24px;
  background: url("assets/brand/logo-pez.png") center / contain no-repeat;
  flex: none;
}
nav.menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.navitem { position: relative; }
.navitem > button {
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.84rem; font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
}
.navitem > button:hover,
.navitem.active > button { border-bottom-color: var(--fg); }

/* dropdown de subgrupos (series / muestras) */
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* 08 (Julia 26-08): mas ancho. Los nombres largos no se parten */
  min-width: 300px;
  width: max-content;
  max-width: min(440px, 92vw);
  padding: 8px;
  display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.navitem:hover .dropdown, .navitem.open .dropdown { display: block; }
.dropdown a {
  display: block; text-decoration: none;
  padding: 8px 10px; font-size: 0.9rem; color: var(--muted);
  border-radius: 4px; white-space: nowrap;
}
.dropdown a:hover { background: var(--tile); color: var(--fg); }

.burger { display: none; background: none; border: 0; cursor: pointer; font-size: 1.4rem; color: inherit; }

/* ---------- Vistas ---------- */
main { width: 100%; max-width: var(--max); margin: 0 auto; padding: var(--pad); flex: 1 0 auto; }
.view { display: none; }
.view.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Inicio */
.home {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(12px, 1.8vh, 18px); padding: clamp(10px, 2vh, 32px) 0;
}
.home .logo-big {
  width: 54px; height: 54px;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  border: 2px solid var(--fg);
}
.home h1 {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: 0.2em; font-size: clamp(1.7rem, 5vw, 2.8rem);
  /* el tracking agrega aire despues del ultimo glifo y desbordaba 2px en 360 */
  margin-right: -0.2em;
}
.home .obra-hero {
  position: relative;
  height: min(600px, 64vh); width: auto; max-width: 88vw; aspect-ratio: 5 / 6;
  border-radius: 50%; /* óvalo suave (Laura: óvalo, no círculo) */
  background: #ecdcc9; /* papel: el óvalo hace de fondo, la obra entra entera sin cortarse */
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em;
  overflow: hidden;
}
/* reel: dibujos apilados, cross-fade lento. contain = la obra NUNCA se corta */
.home .obra-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1.6s ease;
}
.home .obra-hero img.on { opacity: 1; }
/* Variante SIN MARCO (Laura): sin óvalo ni papel, el dibujo sobre el fondo de la
   página. Las versiones B ya traen el papel corrido a --bg, así que el contain
   no deja borde visible. La caja mantiene el alto para que el reel no salte. */
.home .obra-hero.sin-marco {
  border-radius: 0; background: transparent; overflow: visible;
  /* 92vw ignoraba el padding del main y derramaba 2px en 360 */
  aspect-ratio: 4 / 5; height: min(640px, 68vh); max-width: min(92vw, 100%);
}

/* Layout galería: grid izq + texto der (maqueta) */
.gallery-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 28px; }
.subnav button {
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted);
  font-size: 0.8rem; letter-spacing: 0.04em; padding: 0 0 2px;
  border-bottom: 1.5px solid transparent;
}
.subnav button:hover { color: var(--fg); }
.subnav button.active { color: var(--fg); border-bottom-color: var(--fg); }

/* M4 (Julia 26-08): la primera obra, grande, arriba de todo — sólo en mobile.
   Va ACÁ arriba y no al final del archivo: definida después del media query, su
   `display: none` le ganaba por orden al `display: block` de mobile. */
.destacada { display: none; }
.destacada button {
  display: block; width: 100%; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; background: var(--tile); cursor: pointer;
}
.destacada img { width: 100%; height: auto; display: block; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tile {
  aspect-ratio: 1; background: var(--tile); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.78rem; overflow: hidden;
  transition: filter .2s;
}
.tile.flyer { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: var(--r); }
.tile:hover { filter: brightness(0.96); }
.tile img { width: 100%; height: 100%; object-fit: cover; }

.info h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 4px; }
.info .subtitulo { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1rem; margin-bottom: 14px; }
.info .anio { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 14px; }
.info p { color: #3a3630; margin-bottom: 16px; text-align: justify; text-wrap: pretty; hyphens: auto; }
.info .ficha { font-size: 0.88rem; color: var(--muted); line-height: 1.55; border-top: 1px solid var(--line); padding-top: 12px; }
.empty-msg { color: var(--muted); font-size: 0.95rem; letter-spacing: 0.02em; padding: clamp(24px, 6vh, 64px) 0; }
.dropdown:empty { display: none; }
.ver-completo { display: inline-block; margin-bottom: 16px; font-size: 0.88rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ver-completo:hover { color: var(--fg); }
.serie-fulltext { margin: 26px 0 0; border-top: 1px solid var(--line); padding-top: 18px; }
.serie-fulltext:empty { display: none; }
.serie-fulltext .ft-titulo { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; margin-bottom: 10px; color: var(--fg); }
.serie-fulltext p { color: #3a3630; white-space: pre-line; text-align: justify; hyphens: auto; font-size: 0.94rem; }
/* 10 (Julia 26-08): los enlaces de prensa dejan de estar sueltos en el texto y
   van agrupados al pie, bajo su propio titulito. */
.prensa { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.prensa:empty { display: none; }
.prensa h3 {
  font-family: var(--serif); font-weight: 400; font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
/* M2 (Julia 26-08): la ficha se parte en lineas en vez de ser un parrafo corrido */
.info .ficha .l { display: block; }
.resenas { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.resenas a { font-size: 0.9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.resenas a:hover { color: var(--fg); }

/* Bio / Statement: foto izq + texto der */
.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
/* Bio/Statement sin foto todavía: el texto ocupa la columna, en caja legible */
.split.sin-foto { grid-template-columns: 1fr; max-width: 74ch; }
.split .txt h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 18px; }
.split .txt p { color: #3a3630; margin-bottom: 14px; text-align: justify; hyphens: auto; }
.split .foto { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: 96px; }
.split .foto img { width: 100%; height: auto; display: block; }
.split .txt { max-width: 52ch; }
.split .txt h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin-bottom: 16px; }
.split .txt p { color: #3a3630; }

/* Contacto */
.contacto-wrap { display: grid; grid-template-columns: minmax(0,40ch) 1fr; gap: clamp(24px,5vw,72px); align-items: center; }
.contacto { max-width: 40ch; }
.contacto-deco { justify-self: end; transform: translate(clamp(-72px, -4.5vw, -28px), clamp(18px, 2.6vw, 44px)); }
/* 04 (Julia 26-08): el conejito dibujado, chico (eligio la version "peque") */
.contacto-deco img { width: 100%; max-width: 470px; height: auto; }
.contacto h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin-bottom: 20px; }
.contacto a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; letter-spacing: 0.03em; }
.contacto a:hover { color: var(--muted); }

/* ---------- Lightbox + carrousel ---------- */
/* Un solo negro: overlay y stage comparten el mismo tono (pedido de Laura) */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: #141210;
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lb-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; max-width: 92vw;
}
.lightbox .stage {
  width: min(88vw, 1100px); height: min(78vh, 800px);
  background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center;
  color: #a9a29a; font-size: 0.9rem; letter-spacing: 0.1em;
  overflow: hidden;
}
/* el transform lo maneja el rAF del zoom, cuadro por cuadro: una transición
   CSS acá pelearía con él (y era lo que hacía que la escala saltara de una) */
.lightbox .stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: none; will-change: transform; }
/* mientras el cursor pasea, la transicion se acorta: 450ms se sentiria pegajoso */
/* visor: click acerca un paso, se arrastra, rueda y pinch. El tamaño lo maneja
   el transform, así que la imagen NO cambia de layout al acercarse (antes se le
   soltaba el max-width y eso daba un salto). `touch-action: none` porque los
   gestos los manejamos nosotros: sin eso el navegador se queda el pinch. */
.lightbox .stage { touch-action: none; user-select: none; -webkit-user-select: none; }
.lightbox .stage.zoomable img { cursor: zoom-in; }
.lightbox .stage.zoomed { overflow: hidden; }
.lightbox .stage.zoomed img { cursor: grab; }
.lightbox .stage.zoomed img:active { cursor: grabbing; }
.lightbox .stage img { -webkit-user-drag: none; user-drag: none; }
.lb-ficha {
  max-width: min(88vw, 1100px); text-align: center;
  /* 09 (Julia 26-08): se perdia al pie. 0.8rem -> 0.95rem */
  color: #d8d2ca; font-size: 0.95rem; line-height: 1.55; letter-spacing: 0.01em;
}
.lb-ficha:empty { display: none; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer;
  padding: 10px 18px; opacity: .8; z-index: 2;
}
.lb-btn:hover { opacity: 1; }
.lb-prev { left: 2vw; } .lb-next { right: 2vw; }
.lb-close { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer; opacity: .8; z-index: 2; }
.lb-close:hover { opacity: 1; }
.lb-zoom {
  position: absolute; top: 18px; right: 64px; background: none; border: 0;
  color: #fff; font-size: 1.5rem; cursor: pointer; opacity: .8; z-index: 2; line-height: 1;
}
.lb-zoom:hover, .lb-zoom.on { opacity: 1; }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #cfc9c1; font-size: 0.8rem; letter-spacing: 0.1em; }

/* ---------- Mobile ----------
   Reescrito con la devolución de Julia del 26-08. Su prioridad, textual: "sacar
   el justificado + compactar la navegación de muestras + mostrar una imagen
   mucho antes. Esas tres cambiarían muchísimo la experiencia mobile." */
@media (max-width: 760px) {
  .burger { display: block; }
  nav.menu {
    position: fixed; inset: 56px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 18px; display: none;
  }
  nav.menu.open { display: flex; }
  .navitem > button { width: 100%; text-align: left; padding: 12px 0; font-size: 0.9rem; }
  .dropdown { position: static; transform: none; border: 0; box-shadow: none; min-width: 0; padding: 0 0 6px 14px; display: none; }
  .navitem.open .dropdown { display: block; }
  /* M4: el orden lo pidió Julia entero — título, una imagen, texto breve, ficha,
     galería, texto curatorial, prensa. `display: contents` sube los bloques de
     .info a hermanos de .grid para poder intercalarlos sin duplicar marcado. */
  .gallery-layout { display: flex; flex-direction: column; gap: 0; }
  .info { display: contents; }
  .info-head      { order: 1; }
  .destacada      { order: 2; display: block; margin: 4px 0 18px; }
  .info-texto     { order: 3; }
  .info-ficha     { order: 4; margin-bottom: 20px; }
  .grid           { order: 5; grid-template-columns: repeat(2, 1fr); }
  .serie-fulltext { order: 6; }
  .prensa         { order: 7; }
  /* la destacada ES la primera obra: se esconde su tile para no repetirla */
  .grid .tile:first-child { display: none; }
  /* M1: el justificado abría huecos enormes entre palabras */
  /* M3: el título más chico, para que "(2026)" no quede aislado en su renglón */
  .info h2 { font-size: 1.35rem; text-wrap: balance; }
  /* M3: una sola fila que se arrastra, en vez de todas las muestras abiertas */
  .subnav {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    gap: 18px; margin: 0 calc(-1 * var(--pad)) 22px; padding: 0 var(--pad) 10px;
    scrollbar-width: none;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav button { flex: none; white-space: nowrap; scroll-snap-align: start; }
  /* M2: la ficha, alineada a la izquierda y en bloques */
  .info .ficha { text-align: left; }
  .split { grid-template-columns: 1fr; }
  .contacto-wrap { grid-template-columns: 1fr; gap: 32px; }
  .contacto-deco { justify-self: center; transform: none; }
  .contacto-deco img { max-width: 300px; }
  .split .foto { max-width: 320px; position: static; }
}

/* ---------- Footer ---------- */
.site-footer {
  flex: none;
  border-top: 1px solid var(--line);
}
.foot-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a {
  color: var(--muted); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.03em;
}
.foot-links a:hover { color: var(--fg); }
.foot-place {
  color: var(--muted); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
@media (max-width: 640px) {
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Home: escena con los peces en capas (variante artística) ----------
   01 (Julia 26-08): "me encanta cómo entran los peces, deberían después quedarse
   en la obra flotando (movimiento suave) o estáticos... si siguen de largo es
   como que desarmamos la obra". Así que ya NO cruzan en loop: entran UNA vez por
   la derecha, llegan a su lugar exacto en la lámina y se quedan ahí flotando —
   al terminar el viaje la obra queda reconstruida tal cual la dibujó Laura.
   Los tres entran del mismo lado porque los tres miran a la izquierda: así
   ninguno nada de cola ni tiene que darse vuelta al llegar (el volteo se veía).
   Esto además arregla que en mobile no se vieran: antes había que agarrarlos
   durante los 23s de cruce; ahora quedan puestos. Sólo transform. */
/* la lámina vuelve a ser un bloque común: el movimiento no vive acá */
.home .obra-hero.escena { overflow: visible; }
/* las láminas del reel van apiladas y se cruzan con un fundido lento */
.home .obra-hero.escena .lamina {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1.5s ease-out;
}
.home .obra-hero.escena .lamina.on { opacity: 1; }
/* la primera obra no hace fade-in: el home tiene que abrir con la lámina puesta */
.home .obra-hero.escena .lamina.arranque { transition: none; }
/* la obra que se va antes de un respiro en vacío se apaga más rápido */
.home .obra-hero.escena .lamina.saliendo { transition: opacity 0.5s ease-in; }
/* capa de peces: llega hasta el borde del main (se come su padding) y en vez de
   cortar en seco, desvanece a los costados: el pez entra y sale del papel */
.home .peces-capa {
  position: absolute; pointer-events: none;
  left: 0; right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
}
/* La capa entra con fundido propio después de un respiro en vacío: apareciendo
   a plena opacidad sobre una lámina todavía a medio subir, el dibujo pega un
   salto de contraste que se lee como un corte. Va por @keyframes, no por
   transition: la transición necesita que el navegador pinte el estado inicial
   antes del cambio, y acá el montaje ocurre todo en el mismo tick. */
.home .peces-capa.aparece { animation: capa-entra 0.6s ease-out both; }
@keyframes capa-entra { from { opacity: 0; } to { opacity: 1; } }

/* cada pez arranca donde está en la lámina; las medidas vienen de --lam-* (px) */
.home .peces-capa .pez {
  position: absolute;
  top: calc(var(--y) * var(--lam-h) / 100);
  left: calc(50% - var(--lam-w) / 2 + var(--x) * var(--lam-w) / 100);
  width: calc(var(--w) * var(--lam-w) / 100);
  will-change: transform;
  /* backwards: durante el delay ya toman el estado del 0% (fuera de cuadro),
     así el home arranca con la obra vacía */
  animation: pez-entra var(--dur, 9s) cubic-bezier(.22,.61,.36,1) var(--delay, 0s) 1 both;
}
/* cuatro capas de movimiento: el div de afuera cruza, `nado` planea, el cuerpo
   gira desde el pedúnculo (la cabeza es la que más barre) y la cola cuelga de él
   con su propio ángulo en contrafase. */
.home .peces-capa .nado {
  position: relative; display: block;
  animation: pez-planea 8s ease-in-out infinite alternate;
}
.home .peces-capa .cuerpo-wrap {
  position: relative; display: block;
  animation: pez-ondula var(--bat, 1.6s) ease-in-out infinite alternate;
  will-change: transform;
}
.home .peces-capa .cola-wrap {
  position: absolute; top: 0; left: 0; width: 100%;
  animation: pez-aletea var(--bat, 1.6s) ease-in-out infinite alternate;
  will-change: transform;
}
.home .peces-capa .cuerpo,
.home .peces-capa .cola { width: 100%; height: auto; display: block; opacity: 1; }

/* duraciones y delays distintos: llegan escalonados, no como un mecanismo. */
.home .peces-capa .pez-atun    { --dur: 6s;    --delay: 0s;   --bat: 1.9s; }
.home .peces-capa .pez-perca   { --dur: 7s;    --delay: 0.4s; --bat: 1.5s; }
.home .peces-capa .pez-volador { --dur: 8s;    --delay: 0.8s; --bat: 1.2s; }
/* vb-8: un solo pez, y carga una piedra. Entra más lento y bate más despacio
   que los chicos —el peso se lee en la velocidad— y planea menos. */
.home .peces-capa .pez-roca    { --dur: 9.5s;  --delay: 0.3s; --bat: 2.4s; }
.home .peces-capa .pez-roca .nado { animation-duration: 11s; }

/* --- entrada. `--out-r` lo mide el JS: el mínimo para arrancar justo afuera
   del cuadro (un valor fijo en vw se pasaba de largo en desktop y no alcanzaba
   en mobile). Termina en translateX(0) = su lugar exacto en la lámina. --- */
@keyframes pez-entra {
  from { transform: translateX(var(--out-r, 68vw)); }
  to   { transform: translateX(0); }
}
/* --- nado --- */
@keyframes pez-planea {
  from { transform: translateY(-2.4%) rotate(-2.6deg); }
  to   { transform: translateY(2.4%) rotate(2.6deg); }
}
/* la cola suma su ángulo al del cuerpo: en contrafase el pez serpentea */
@keyframes pez-aletea {
  from { transform: rotate(13deg); }
  to   { transform: rotate(-13deg); }
}
/* gira desde el pedúnculo: el extremo libre es la cabeza, que es donde se ve */
@keyframes pez-ondula {
  from { transform: rotate(-4.2deg) translateX(1.1%); }
  to   { transform: rotate(4.2deg) translateX(-1.1%); }
}
/* --- Escena del ropero: las piezas no entran de afuera, ya están en su lugar.
   Cada cabeza gira despacio sobre su soporte, como si mirara. Ángulos y tiempos
   distintos por pieza: en bloque parecería un mecanismo, no siete bichos. --- */
.home .peces-capa.quietas .pez:not(.cruza) { animation: none; }
.home .peces-capa.quietas .pez:not(.cruza) .nado { animation: none; }
/* Las CABEZAS quedaron quietas (Kiyo 02-09): son hijas directas de la capa. El
   vaivén de viento se conserva solo para lo que vive dentro de la ventana —el
   árbol y las plantas del paisaje—, que es donde se lee como aire y no como
   objetos moviéndose solos en una repisa. */
.home .peces-capa.quietas > .pez .cuerpo-wrap { animation: none; }
.home .peces-capa.quietas .ventana .pez:not(.cruza) .cuerpo-wrap {
  animation: cabeza-mira var(--giro-t, 7s) ease-in-out var(--giro-d, 0s) infinite alternate;
}
/* el que cruza la ventana conserva el nado completo: planea, ondula desde el
   pedúnculo y bate la cola. Sin esto quedaba rígido, arrastrado de lado. */
.home .peces-capa.quietas .pez.cruza .nado {
  animation: pez-planea 5s ease-in-out infinite alternate;
}
.home .peces-capa.quietas .pez.cruza .cuerpo-wrap {
  animation: pez-ondula var(--bat, 1.1s) ease-in-out infinite alternate;
}
.home .peces-capa.quietas .pez.cruza .cola-wrap {
  animation: pez-aletea var(--bat, 1.1s) ease-in-out infinite alternate;
}
.home .peces-capa .pez-volador2 { --bat: 0.95s; }
@keyframes cabeza-mira {
  from { transform: rotate(calc(var(--giro, 3deg) * -1)) translateY(var(--cabeceo, 0.6%)); }
  to   { transform: rotate(var(--giro, 3deg)) translateY(calc(var(--cabeceo, 0.6%) * -1)); }
}
/* Kiyo 02-09: al ropero, más movimiento. Los ángulos suben de 1,4-2,8° a 3-5,5°
   y se les suma un cabeceo. Verificado a 6° —el techo— que la cabeza girada
   sigue tapando su propio lugar en la lámina y no destapa hueco. */
.home .peces-capa .pez-cresta { --giro: 5.5deg; --cabeceo: 1%; --giro-t: 10s; --giro-d: 0s; }
.home .peces-capa .pez-pelicano { --giro: 4deg; --cabeceo: 0.7%; --giro-t: 13s; --giro-d: 2.5s; }
.home .peces-capa .pez-campana { --giro: 5deg; --cabeceo: 0.9%; --giro-t: 11.5s; --giro-d: 4.5s; }
.home .peces-capa .pez-penacho { --giro: 5.5deg; --cabeceo: 0.9%; --giro-t: 12s; --giro-d: 1.2s; }
.home .peces-capa .pez-cuervo { --giro: 6deg; --cabeceo: 1.2%; --giro-t: 9s; --giro-d: 3.4s; }
.home .peces-capa .pez-buho { --giro: 6deg; --cabeceo: 1.1%; --giro-t: 9.5s; --giro-d: 5.5s; }
.home .peces-capa .pez-gallo { --giro: 4.5deg; --cabeceo: 0.7%; --giro-t: 14s; --giro-d: 1.8s; }
/* la vegetación del panel se mece más despacio y más suave que las cabezas: es
   viento, no un bicho mirando. Pivote al pie, así el tronco queda quieto. */
.home .peces-capa .pez-arbol { --giro: 1.8deg; --cabeceo: 0.25%; --giro-t: 16s; --giro-d: 0s; }
.home .peces-capa .pez-arbolito { --giro: 2.4deg; --cabeceo: 0.3%; --giro-t: 13.5s; --giro-d: 3s; }
.home .peces-capa .pez-flor_izq { --giro: 3deg; --cabeceo: 0.45%; --giro-t: 11s; --giro-d: 1.6s; }
.home .peces-capa .pez-flor_der { --giro: 3.4deg; --cabeceo: 0.5%; --giro-t: 9.8s; --giro-d: 4.2s; }

/* --- Ventana: un recorte de la obra con vida propia. Lo de adentro se corta
   con el marco, no con el borde de la lámina. --- */
.home .peces-capa .ventana {
  position: absolute; overflow: hidden;
  top: calc(var(--y) * var(--lam-h) / 100);
  left: calc(50% - var(--lam-w) / 2 + var(--x) * var(--lam-w) / 100);
  width: calc(var(--w) * var(--lam-w) / 100);
  height: calc(var(--h) * var(--lam-h) / 100);
}
/* el pez cruza el paisaje de derecha a izquierda —mira hacia donde va— y se
   come el marco a los dos lados */
.home .peces-capa .ventana .pez { position: absolute; }
/* `backwards` es OBLIGATORIO acá: sin fill-mode, durante el delay el pez no
   tiene transform y queda PARADO en el medio del panel, visible y quieto,
   hasta que arranca — eso era el "pescadito que aparece y se va antes de que
   aparezca la animación". Con backwards toma ya el estado del 0% (fuera de
   cuadro) y el panel arranca vacío. Mismo truco que `pez-entra` en el home.
   El delay de 2,5 s lo hace entrar con la obra ya puesta (el cambio tarda
   1,5 s en dejar la lámina nueva al 100%). */
.home .peces-capa .ventana .pez.cruza {
  animation: pez-cruza-ventana 6s linear 1.2s infinite backwards;
}
/* va y vuelve dentro de la escena: cruza, se da vuelta FUERA de cuadro (el
   scaleX salta en el 42%, cuando ya salió por la izquierda) y vuelve mirando
   hacia el otro lado. */
@keyframes pez-cruza-ventana {
  /* va y vuelve, y NO por la misma línea: la vuelta pasa más abajo. El salto de
     altura y el scaleX ocurren en el 45%, con el pez ya fuera de cuadro. */
  0%   { transform: translate(150%, 0) scaleX(1); }
  44%  { transform: translate(-250%, 0) scaleX(1); }
  45%  { transform: translate(-250%, 260%) scaleX(-1); }
  94%  { transform: translate(150%, 260%) scaleX(-1); }
  100% { transform: translate(150%, 260%) scaleX(-1); }
}
}

/* con reduced-motion la obra se ve completa y quieta: es el mismo estado final */
@media (prefers-reduced-motion: reduce) {
  .home .peces-capa .pez, .home .peces-capa .nado,
  .home .peces-capa .cuerpo-wrap, .home .peces-capa .cola-wrap,
  .home .peces-capa.quietas .cuerpo-wrap {
    animation: none !important; transform: none !important;
  }
}

/* Variante artística: pedacito de obra asomando al pie de una sección.
   No lleva caja ni borde: el papel del dibujo se funde con el fondo. */
/* --- Variante artística: un pedacito de obra al pie de cada sección ---------
   Los recortes vienen del original en alta y traen ya el crema del sitio como
   fondo (no hay borde que disimular). El ancho lo fija cada obra en data.js:
   son detalles grandes, no viñetas. */
.seccion-deco {
  margin-top: clamp(28px, 6vh, 64px);
  display: flex; justify-content: flex-start;
  pointer-events: none;
}
/* 03 (Julia 26-08): en Bio el caracol pasa a la derecha, al pie de la columna de
   texto, para que la ilustracion intervenga en la composicion y no quede de viñeta. */
.seccion-deco.deco-der { justify-content: flex-end; }
.seccion-deco.deco-centro { justify-content: center; }
/* 02 (Julia 26-08): "me encanta la cebritaaa, la acercaría un poco más y la
   mudaría a statement, con este criterio de que esté mirando". La cebra mira
   hacia arriba: al pie de Statement mira hacia el texto. Acercar = ocupar el
   ancho entero de la columna y con menos aire arriba. NO se recorta más ceñido
   sobre la cebra: eso sería alterar la obra, justo lo que pide evitar en 2b. */
.seccion-deco.deco-centro { margin-top: clamp(10px, 2vh, 26px); }
.seccion-deco img {
  width: min(var(--deco-w, 430px), 100%);
  height: auto; display: block;
}
.galeria-deco { pointer-events: none; }
.galeria-deco img { display: block; height: auto; }

/* la cebra asoma desde el pie de Obras y se funde por arriba y por los costados */
.deco-banda {
  margin: clamp(40px, 9vh, 96px) 0 calc(-1 * clamp(24px, 5vh, 56px));
  display: flex; justify-content: center;
}
.deco-banda img {
  width: min(var(--deco-w, 1180px), 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%),
                      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%),
                      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* pieza suelta al costado, al pie de una galería */
.deco-suelta {
  margin-top: clamp(36px, 8vh, 80px);
  display: flex; justify-content: flex-end;
}
.deco-suelta img { width: min(var(--deco-w, 430px), 62vw); }
@media (max-width: 760px) {
  .seccion-deco, .deco-suelta { justify-content: center; }
  .deco-banda { margin-bottom: 0; }
}