/* Google Material Symbols base */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Revelado al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

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

/* Carrusel infinito (Logos / Testimonios) */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 60s linear infinite;
    /* Subimos a 60s para mantener un deslizamiento suave con los logos grandes */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Evita que los logos se achiquen y les aplica mayor tamaño manteniendo la distancia del HTML */
.animate-scroll>* {
    flex-shrink: 0;
}

/* Tamaño intermedio de logos en la marquesina */
.animate-scroll img {
    height: 2.5rem !important;
    /* Mobile: ~40px */
    max-height: 2.5rem !important;
}

@media (min-width: 640px) {
    .animate-scroll img {
        height: 3rem !important;
        /* Tablet: ~48px */
        max-height: 3rem !important;
    }
}

@media (min-width: 768px) {
    .animate-scroll img {
        height: 3.5rem !important;
        /* Desktop: ~56px */
        max-height: 3.5rem !important;
    }
}

.pause-on-hover:hover .animate-scroll {
    animation-play-state: paused;
}

/* Entrada suave */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

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

/* Brillo Glassmorphism */
@keyframes glassShimmer {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    100% {
        transform: translateX(200%) skewX(-20deg);
    }
}

.animate-glass-shimmer {
    animation: glassShimmer 3s infinite ease-in-out;
}

/* Latido suave y fluido para los círculos de proceso */
@keyframes iconPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }

    50% {
        transform: scale(1.14);
        /* Escala sutil en lugar de 1.3 */
        box-shadow: 0 0 14px 2px rgba(16, 185, 129, 0.3);
        /* Resplandor suave */
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.animate-icon-pulse {
    animation: iconPulse 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}