/* Animaciones para fade-in desde diferentes direcciones */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

/* Clases de animación */
.fade-in {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fade-up {
    opacity: 1;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate-left {
    opacity: 1;
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate-right {
    opacity: 1;
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Establecer opacidad inicial */
.index5 h1,
.index5 p,
.index6 h1,
.index6 .servicio,
.index6 .servicio .imagen img,
.index6 .servicio .contenido,
.index6 .servicio h2,
.index6 .servicio p {
    opacity: 0;
}

/* Estilos específicos para animaciones en index6 */
.index6 .servicio {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/* Ajustar animaciones según posición de los servicios */
.index6 .servicio:nth-child(odd),
.index6 .servicio:nth-child(even) h2 {
    animation-name: fadeInLeft;
}

.index6 .servicio:nth-child(even),
.index6 .servicio:nth-child(even) h2 {
    animation-name: fadeInRight;
}

/* Animaciones para imágenes */
.index6 .servicio .imagen img {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-name: fadeIn;
}

/* Animaciones para contenido */
.index6 .servicio .contenido {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-name: fadeInUp;
}

/* Animaciones para el título y subtítulos */
.index6 h1,
.index6 .servicio h2,
.index6 .servicio p {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-delay: 0.5s;
}

/* Animaciones aplicadas a elementos específicos en index5 */
.index5 h1,
.index5 p {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.index5 h1.animate-left,
.index5 p.animate-left {
    animation-name: fadeInLeft;
}