/* Keyframes para animaciones */
@keyframes fadeInLeft2 {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Elementos invisibles por defecto con clase hidden2 */
.hidden2 {
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Cuando el elemento entra en viewport */
.scroll-section.is-visible .fade-in-left-2 {
    animation: fadeInLeft2 2s forwards;
}

.scroll-section.is-visible .fade-in-right-2 {
    animation: fadeInRight2 2s forwards;
}
/* Keyframes para video */
@keyframes fadeInLeftVideo {
    from {
        opacity: 0;
        transform: translateX(-300px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes para texto */
@keyframes fadeInUpText {
    from {
        opacity: 0;
        transform: translateY(300px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Cuando el elemento entra en viewport */
.scroll-section.is-visible .fade-in-left-video {
    animation: fadeInLeftVideo 2s ease forwards;
}

.scroll-section.is-visible .fade-in-up-text {
    animation: fadeInUpText 2s ease forwards;
}