.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    display: flex;
}

.hero-slider .slide {
    flex: 1;
    height: 100%;
    background-size: cover;
    background-position: 50% 0%;
    opacity: 1;
    /* las 3 visibles al mismo tiempo */
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    /* Separador opcional sutil */
}

.hero-slider .slide:last-child {
    border-right: none;
}

/* Animaciones de entrada inicial */
@keyframes slide-in-bottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Animaciones de paneo vertical (arriba-abajo-arriba) combinadas con el slide de entrada */
.hero-slider .slide-1 {
    background-image: url('../img/hero/main-img-1.jpg');
    animation: 
        slide-in-bottom 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 normal both,
        pan-vertical-1 20s ease-in-out 0s infinite alternate none;
}

.hero-slider .slide-2 {
    background-image: url('../img/hero/main-img-2.jpg');
    /* Animación inversa para que se muevan diferente, entrando desde arriba con un pequeño retraso */
    animation: 
        slide-in-top 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s 1 normal both,
        pan-vertical-2 25s ease-in-out 0.2s infinite alternate-reverse none;
}

.hero-slider .slide-3 {
    background-image: url('../img/hero/main-img-3.jpg');
    /* Entrando desde abajo con un retraso poco mayor */
    animation: 
        slide-in-bottom 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s 1 normal both,
        pan-vertical-3 22s ease-in-out 0.4s infinite alternate none;
}

@keyframes pan-vertical-1 {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 100%;
    }
}

@keyframes pan-vertical-2 {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 100%;
    }
}

@keyframes pan-vertical-3 {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 100%;
    }
}


/* Version Mobile para optimizar: ajustamos la 1ra y escondemos las otras */
@media (max-width: 768px) {
    .hero-slider .slide-1 {
        background-image: url('../img/hero/main-img-1.jpg');
        opacity: 1;
        animation: 
            slide-in-bottom 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 normal both,
            pan-vertical-mobile 15s ease-in-out 0s infinite alternate none;
    }

    .hero-slider .slide-2,
    .hero-slider .slide-3 {
        display: none;
        /* oculta las demas para mobile */
    }

    @keyframes pan-vertical-mobile {
        0% {
            background-position: 50% 0%;
        }

        100% {
            background-position: 50% 100%;
        }
    }
}