/* Contenedor que oculta lo que se sale de la pantalla */
.logo-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* La tira que contiene todos los logos alineados */
.logo-track {
    display: flex;
    width: calc(200px * 12); /* Ancho estimado para albergar los 12 items */
    animation: scrollLogos 40s linear infinite;
}

/* Cada bloque de logo individual */
.logo-item {
    /* En pantallas grandes, 20% equivale a mostrar 5 logos exactos en el contenedor (100 / 5) */
    width: 20%; 
    min-width: 150px; /* Evita que se deformen en pantallas chicas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.logo-item img {
    width: 120px; /* Ajusta el tamaño de tus logos uniformemente */
    height: auto;
    object-fit: contain;
}

/* Animación que desplaza la mitad exacta de la tira (los 6 primeros logos) */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se mueve hacia la izquierda la mitad exacta del contenedor */
        /*transform: translateX(calc(-200px * 6)); */
        transform: translateX(-50%);
    }
}

/* Opcional: Detener el movimiento si el usuario pasa el mouse por encima */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}