@keyframes scroll {
    0% {
        top: 10px;
        opacity: 1;
    }
    100% {
        top: 30px;
        opacity: 0;
    }
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

@keyframes scrollLogos {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(-50%);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.6s both;
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top {
    transform: translateY(20px);
}

.back-to-top.show {
    transform: translateY(0);
    opacity: 1;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(255, 0, 0, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 0, 0, 0.6); }
}

    @keyframes waPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    }

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

/* === ANIMACIONES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scroll {
    0% { top: 10px; opacity: 1; }
    50% { top: 25px; opacity: 0.5; }
    100% { top: 10px; opacity: 1; }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    50.1%, 100% { opacity: 0; }
    50% { border-color: transparent; }
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* === ANIMACIÓN DE ENTRADA === */
@keyframes modalSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* === ANIMACIÓN DEL ICONO === */
@keyframes iconBounce {
    0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.15); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); }
}