/* Estado inicial: oculto y desplazado */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.9, 0.3, 1),
              transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Estado visible: cuando el observador añade la clase */
.fade-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* Opcional: para elementos que quieras animar solo con opacidad */
.fade-opacity-only {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.fade-opacity-only.visible {
  opacity: 1;
}
@media (max-width: 768px) {
  .fade-on-scroll {
    transform: translateY(12px);
    transition-duration: 0.4s;
  }
}





/* ===== GALERÍA - EFECTO SECUENCIAL (IZQUIERDA A DERECHA) ===== */
.gallery-item {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  will-change: opacity, transform;
}

.gallery-item.gallery-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Retrasos en cascada (hasta 12 elementos) */
.gallery-item:nth-child(1) { transition-delay: 0.00s; }
.gallery-item:nth-child(2) { transition-delay: 0.06s; }
.gallery-item:nth-child(3) { transition-delay: 0.12s; }
.gallery-item:nth-child(4) { transition-delay: 0.18s; }
.gallery-item:nth-child(5) { transition-delay: 0.24s; }
.gallery-item:nth-child(6) { transition-delay: 0.30s; }
.gallery-item:nth-child(7) { transition-delay: 0.36s; }
.gallery-item:nth-child(8) { transition-delay: 0.42s; }
.gallery-item:nth-child(9) { transition-delay: 0.48s; }
.gallery-item:nth-child(10) { transition-delay: 0.54s; }
.gallery-item:nth-child(11) { transition-delay: 0.60s; }
.gallery-item:nth-child(12) { transition-delay: 0.66s; }

/* Ajuste mínimo para móviles: nada especial, el código funciona igual */