.swiper-pagination-bullet-active {
    background: var(--main-color);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--main-color);
}

.delay-0 {
    animation-delay: 0s;
}

.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 2s;
}

.delay-3 {
    animation-delay: 3s;
}

/* Contenedor de cada mitad */
.pre-hero-door {
    width: 50%;
    height: 100%;
    position: relative;
    transition: transform 1.5s ease;
    backface-visibility: hidden;
    perspective: 1000px;
    overflow: hidden;
}

/* Eje de rotación para cada lado */
.left-door {
    transform-origin: left center;
}

.right-door {
    transform-origin: right center;
}

/* Animaciones */
.left-door.animate-left-open {
    animation: doorLeftOpen 1.5s ease forwards;
}

.right-door.animate-right-open {
    animation: doorRightOpen 1.5s ease forwards;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

@keyframes doorLeftOpen {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes doorRightOpen {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(90deg);
        opacity: 0;
    }
}


@media screen and (min-width: 700px) 
{
    #videomontana { width: 400px; min-width: 400px; height: 250px; min-height: 250px; }

    #hero2 > span { width: 600px; text-align: center; }
    #hero3 { width: 500px; min-width: 500px; margin: auto; }
    #hero4 > span { width: 600px; text-align: center; }
    #hero5 { width: 500px; min-width: 500px; margin: auto; margin-top: 80px; }
    #hero8 { width: 500px; min-width: 500px; margin: auto; margin-top: 80px; }
    #hero9 { width: 500px; min-width: 500px; margin: auto; margin-top: 40px; }
    #hero10 { width: 500px; min-width: 500px; margin: auto; margin-top: 80px; }
    #hero11 { width: 500px; min-width: 500px; margin: auto; margin-top: 80px; }
}