/* ============================================
   Animaciones - Todas las páginas
   ============================================ */

/* --- Keyframes --- */
@keyframes animFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes animFadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animFadeInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes animZoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes animShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes animPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.95; }
}

/* --- Animaciones al cargar (run once) --- */
.anim-fade-in {
  animation: animFadeIn 0.6s ease-out forwards;
}

.anim-fade-up {
  animation: animFadeInUp 0.65s ease-out forwards;
}

.anim-fade-down {
  animation: animFadeInDown 0.6s ease-out forwards;
}

.anim-fade-left {
  animation: animFadeInLeft 0.6s ease-out forwards;
}

.anim-fade-right {
  animation: animFadeInRight 0.6s ease-out forwards;
}

.anim-scale-in {
  animation: animScaleIn 0.5s ease-out forwards;
}

.anim-zoom-in {
  animation: animZoomIn 0.5s ease-out forwards;
}

/* Delays para efecto escalonado al cargar */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }

/* Estado inicial para animaciones al cargar (evitar flash) */
.anim-fade-in,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in,
.anim-zoom-in {
  opacity: 0;
}

/* --- Animate on scroll (data-aos): estado inicial --- */
[data-aos] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade"] {
  transform: none;
}

[data-aos="fade-up"] {
  transform: translateY(36px);
}

[data-aos="fade-down"] {
  transform: translateY(-24px);
}

[data-aos="fade-left"] {
  transform: translateX(-40px);
}

[data-aos="fade-right"] {
  transform: translateX(40px);
}

[data-aos="scale"] {
  transform: scale(0.92);
}

[data-aos="zoom"] {
  transform: scale(0.88);
}

/* Cuando el elemento entra en viewport (JS añade .aos-visible) */
[data-aos].aos-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Delays para AOS */
[data-aos-delay="100"].aos-visible { transition-delay: 0.1s; }
[data-aos-delay="200"].aos-visible { transition-delay: 0.2s; }
[data-aos-delay="300"].aos-visible { transition-delay: 0.3s; }
[data-aos-delay="400"].aos-visible { transition-delay: 0.4s; }
[data-aos-delay="500"].aos-visible { transition-delay: 0.5s; }
[data-aos-delay="600"].aos-visible { transition-delay: 0.6s; }

/* Duración personalizada */
[data-aos-duration="400"] { transition-duration: 0.4s; }
[data-aos-duration="800"] { transition-duration: 0.8s; }
[data-aos-duration="1000"] { transition-duration: 1s; }

/* --- Hover suaves (uso en tarjetas/botones) --- */
.anim-hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.anim-hover-lift:hover {
  transform: translateY(-4px);
}

.anim-hover-scale {
  transition: transform 0.25s ease;
}

.anim-hover-scale:hover {
  transform: scale(1.02);
}

.anim-hover-glow {
  transition: box-shadow 0.3s ease;
}

.anim-hover-glow:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}