/* ════════════════════════════════════════════════════════════════════════
   Puyella — lo que necesitan las transiciones entre secciones
   (sitio/transiciones.js). Todo cuelga de html.st, que pone ese JS cuando
   arranca: sin JavaScript o con movimiento reducido no aplica nada.

   🚨 Vive en /sitio/ y NO en /assets/: vercel.json cachea /assets/ un año
   como inmutable, y un cambio acá no le llegaría a nadie.
   ════════════════════════════════════════════════════════════════════════ */

/* Cada bloque del flujo es una capa del mismo nivel: el que sigue tapa al de
   antes (pin, parallax) y el reveal, con z-index 0, sale de abajo del suyo.
   Va en todos y no solo en los marcados: ScrollTrigger envuelve al que fija
   en un .pin-spacer, y un selector de hermanos ya no alcanzaría al de al lado. */
.st :is(body, main) > :is(header, section, main, footer) { position: relative; z-index: 1 }

/* Tapar exige fondo: por una sección transparente se veía la de atrás.
   Especificidad 0: cualquier fondo propio de la página le gana. */
:where(.st) :where(body, main) > :where(header, section, main) { background-color: #fff }