/* Efectos al hacer scroll (prueba 2026-10-29). Solo transform/opacity; sin efecto si el usuario pide reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal.reveal-lados main { overflow-x: clip; }
  .js-reveal [data-reveal] {
    opacity: 0;
    transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0s);
  }
  .js-reveal [data-reveal="up"]    { transform: translateY(34px); }
  .js-reveal [data-reveal="left"]  { transform: translateX(-56px); }
  .js-reveal [data-reveal="right"] { transform: translateX(56px); }
  .js-reveal [data-lado][data-reveal="left"]  { transform: translateX(-90px) rotate(-2deg); }
  .js-reveal [data-lado][data-reveal="right"] { transform: translateX(90px) rotate(2deg); }
  .js-reveal [data-reveal="zoom"]  { transform: scale(.9); }
  .js-reveal [data-reveal].visible { opacity: 1; transform: none; }
}
/* «Separar» (2026-10-29): las tarjetas parten apiladas al centro del grupo y se abren a su lugar (como estudioideas.cl). */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal="separar"] { opacity: 1; transform: none; }
  .js-reveal [data-reveal="separar"] > * {
    position: relative;
    transition: transform 1s cubic-bezier(.22, .8, .2, 1), opacity .45s ease;
  }
  .js-reveal [data-reveal="separar"]:not(.visible) > * { opacity: 0; }
}
/* «abrir» (2026-10-29, tarjetas de infraestructura en móvil): cada tarjeta, al llegar a ella, se abre desde su centro hacia los lados. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal="abrir"] {
    transform: scale(.8, .96);   /* leve (Ricardo 29/10; antes .35, .9) */
    transform-origin: 50% 50%;
    transition: opacity .9s ease, transform 1.6s cubic-bezier(.22, .8, .2, 1);   /* más lento (Ricardo 29/10) */
  }
  .js-reveal [data-reveal="abrir"].visible { opacity: 1; transform: none; }
}
/* «salir» (2026-10-29, tarjetas de infraestructura en móvil, menos brusco que «abrir»): igual que las cápsulas de cifras, pero una a una
   al llegar a cada tarjeta: parte montada sobre la anterior (por debajo) y se desliza a su lugar. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal="salir"] {
    transform: translateY(-45%) scale(.92);
    transition: opacity .45s ease, transform 1s cubic-bezier(.22, .8, .2, 1);
  }
  .js-reveal [data-reveal="salir"].visible { opacity: 1; transform: none; }
}