/* == Elementos en cascada ======================= */
.cascade-item{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s ease, transform .6s ease;
}
.cascade-item.show{
  opacity:1;
  transform:translateY(0);
}

/* == Fondo azul ================================= */
.cascade-bg{
  opacity:0;
  transform:translateY(60px) scale(.98);
  transition:opacity .8s ease, transform .8s ease;
  will-change:transform, opacity;
}
.cascade-bg.show{
  opacity:1;
  transform:translateY(0) scale(1);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* == Respeta a usuarios con Reduce Motion ======= */
@media (prefers-reduced-motion: reduce){
  .cascade-item,
  .cascade-bg{
    transition:none !important;
    transform:none !important;
  }
}

/* == Ajustes mobile (≤ 767 px) ================== */
@media (max-width: 767px){
  .cascade-item{                 /* desplazamiento menor */
    transform:translateY(25px);
    transition-delay:0ms !important; /* anula retrasos largos */
  }

  .cascade-bg{                   /* zoom más sutil y rápido */
    transform:translateY(40px) scale(.99);
    transition-duration:.6s;
  }
}
