/* ==========================================================================
   RUWAY — ANIMACIÓN DE SECCIONES (todas las páginas)
   Una sola animación por sección: todo su contenido entra junto, en bloque,
   al aparecer en pantalla. Sin desfases ni efectos por elemento.
   El fondo de la sección no se anima (solo su contenido), así no aparecen huecos.
   Estado inicial solo si JS está activo (.js-anim); respeta prefers-reduced-motion.
   ========================================================================== */
:root {
  --anim-dur: 1200ms;                            /* duración del bloque */
  --anim-dist: 20px;                            /* cuánto sube el bloque */
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* salida suave */
}

.js-anim [data-block] > * {
  opacity: 0;
  transform: translateY(var(--anim-dist));
  transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease);
}
.js-anim [data-block].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-block] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}