* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #ffffff; }
body { display: flex; justify-content: center; font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
#stage-wrapper { margin: 0 auto; overflow: hidden; }
#stage-stack { transform-origin: top left; }
.stage { position: relative; overflow: hidden; }

/* Animaciones de scroll: la seccion arranca oculta/desplazada y se revela
   la primera vez que entra en pantalla (ver IntersectionObserver en main.js).
   Sin data-anim (o "none") no se toca nada, se ve normal desde el inicio. */
.stage[data-anim] { transition: opacity 0.8s ease, transform 0.8s ease; }
.stage[data-anim="fade"] { opacity: 0; }
.stage[data-anim="slide-up"] { opacity: 0; transform: translateY(50px); }
.stage[data-anim="slide-left"] { opacity: 0; transform: translateX(-60px); }
.stage[data-anim="slide-right"] { opacity: 0; transform: translateX(60px); }
.stage[data-anim="zoom"] { opacity: 0; transform: scale(0.85); }
.stage[data-anim].in-view { opacity: 1; transform: none; }