/* =========================
   Animaciones Hero Vortex
   ========================= */

/* Entradas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay fade-out */
@keyframes overlayFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Pulso del botón */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.6);
    }

    50% {
        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.3);
    }
}

/* Zoom-out del video */
@keyframes zoomOutVideo {
    0% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* Clases utilitarias */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-overlay-fade {
    animation: overlayFade 2.5s ease-out forwards;
    animation-delay: 0s;
}

.animate-zoom-out {
    animation: zoomOutVideo 2.5s ease-out forwards;
    animation-delay: 0s;
}

/* Secuencia de beneficios */
.beneficio {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

    .beneficio.delay-1 {
        animation-delay: 0.4s;
    }

    .beneficio.delay-2 {
        animation-delay: 0.6s;
    }

    .beneficio.delay-3 {
        animation-delay: 0.8s;
    }

    .beneficio.delay-4 {
        animation-delay: 1s;
    }

/* Pulso temporal del botón */
.cta-pulse {
    animation: pulseGlow 2s ease-in-out infinite;
}