.slideshow {
    height: 200px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    padding: 0px;
}

.mover-1, .mover-2 {
    position: absolute;
    width: 100%;
    height: clamp(55px, 5vh, 200px);
}

.mover-1 {
    top: 20px;
    background: url(../images/tecnologia/LOGOS-1.png) repeat-x center center;
    background-size: cover;
    animation: moveSlideshow 20s linear infinite;
}

.mover-2 {
    top: 100px;
    background: url(../images/tecnologia/LOGOS-2.png) repeat-x center center;
    background-size: cover;
    animation: moveSlideshowReverse 30s linear infinite;
}

/* Animación para dispositivos grandes (desktop) */
@media (min-width: 992px) {
    .mover-1 {
        animation: moveSlideshow 60s linear infinite; /* velocidad más lenta */
    }
    .mover-2 {
        animation: moveSlideshowReverse 70s linear infinite;
    }
}

/* Animación para dispositivos medianos (tablet) */
@media (min-width: 768px) and (max-width: 991px) {
    .mover-1 {
        animation: moveSlideshow 40s linear infinite; /* velocidad moderada */
    }
    .mover-2 {
        animation: moveSlideshowReverse 50s linear infinite;
    }
}

/* Animación para dispositivos pequeños (mobile) */
@media (max-width: 767px) {
    .mover-1 {
        animation: moveSlideshow 20s linear infinite; /* velocidad rápida */
    }
    .mover-2 {
        animation: moveSlideshowReverse 30s linear infinite;
    }
}

@keyframes moveSlideshow {
    0% {
        background-position: 100vw center;
    }
    100% {
        background-position: -100vw center;
    }
}

@keyframes moveSlideshowReverse {
    0% {
        background-position: -100vw center;
    }
    100% {
        background-position: 100vw center;
    }
}
