/* Animaciones de deslizamiento */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animaciones aplicadas */
.index5 h1, .index5 p, 
.index2 h1, .index2 .about-row .text-columns .column p, .index2 img,
.index3 h1, .index3 .about-row .text-columns .column p, .index3 .about-row .text-columns .column h2,
.index4 h1, .index4 p, .index4 img,
.index6 h1, .index6 .quote-container h1,
.values-row .value, .values-row .value h3 {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Animación para h1, img y p de index2 */
.index2 h1.animate-slide-in, .index2 img.animate-slide-in,
.index2 .about-row .text-columns .column p.animate-slide-in {
    animation-name: slideInLeft;
}

/* Animación para h1 y p de index3 */
.index3 h1.animate-slide-in,
.index3 .about-row .text-columns .column p.animate-slide-in,
.index3 .about-row .text-columns .column h2.animate-slide-in {
    animation-name: slideInRight;
}

/* Animación para h1, p e img de index4 */
.index4 h1.animate-fade-up,
.index4 p.animate-fade-up,
.index4 img.animate-fade-up {
    animation-name: slideInUp;
}

/* Animación para h1 y p de index6 */
.index6 h1.animate-fade,
.index6 .quote-container h1.animate-fade {
    animation-name: fadeIn;
}

/* Animación para valores en values-row */
.values-row .value.animate-fade {
    animation-name: fadeIn;
}

.values-row .value h3.animate-slide-up {
    animation-name: slideInUp;
    animation-duration: 1.2s; /* Ajuste opcional para más suavidad */
    animation-delay: 0.2s; /* Retraso inicial */
}
