/* PersalOne Business — movimiento base de la portada (revelado al scroll).
   Adaptado del kit de movimiento (30/10/2026). Solo opacity/transform.
   Todo vive bajo `.js`: sin JS (o si el kit no arranca) el contenido es visible y estático.
   Uso: data-reveal ("left" | "right" | "zoom"), data-stagger en el padre para escalonar. */

:root {
  --mv-ease: cubic-bezier(.22, 1, .36, 1);
  --mv-t: .6s;
}

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--mv-t) var(--mv-ease) var(--d, 0ms),
              transform var(--mv-t) var(--mv-ease) var(--d, 0ms);
}
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Entradas laterales solo con espacio: en móvil un desplazamiento horizontal
   ensancharía la página (desborde) antes de revelarse. */
@media (min-width: 901px) {
  .js [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
  .js [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
  .js [data-reveal].is-in   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}