.logos-container {
    overflow: hidden; /* Oculta lo que sale del cuadro */
    padding: 40px 0;
    background: white;
    white-space: nowrap; /* Evita que las imágenes se bajen de línea */
    position: relative;
}

.logos-track {
    display: inline-flex; /* Alinea imágenes en cadena */
    width: max-content; /* Se ajusta al ancho de todas las fotos */
    animation: scroll-infinito 25s linear infinite; /* 20s = velocidad */
}

    .logos-track img {
        height: 550px; /* Ajusta el alto a tu gusto */
        margin: 0px 10px; /* Espacio entre cada imagen */
    }

/* La animación que crea el efecto de cadena */
@keyframes scroll-infinito {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0); /* Se mueve hasta la mitad (donde empiezan las copias) */
    }
}


.logos-container::before,
.logos-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

.logos-container::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.logos-container::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}


@media (max-width: 599px) {
    .logos-track img {
        height: 300px; /* Ajusta el alto a tu gusto */
        margin: 0 7px; /* Espacio entre cada imagen */
    }  
}

@media (min-width: 600px) and (max-width: 839px) {
    .logos-track img {
        height: 400px; /* Ajusta el alto a tu gusto */
        margin: 0 5px; /* Espacio entre cada imagen */
    }
}