/* --- Estilos del Carrusel --- */
.logo-carousel {
    width: 100%;
    /*max-width: 1000px;*/ /* Limita el ancho en pantallas grandes */
    overflow: hidden; /* Oculta los logos que están fuera de la vista */
    background-color: #fff;
    padding: 20px 0;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.logo-slide-track {
    display: inline-block;
    /* Aplica la animación 'scroll' que definimos abajo */
    animation: scroll 30s linear infinite; 
    /* Pausa la animación cuando el usuario pasa el ratón por encima */
    animation-play-state: running; 
}

.logo-slide-track:hover {
    animation-play-state: paused;
}

.logo-carousel img {
    /* FORZAR TAMAÑO UNIFORME */
    width: 120px;   /* Ancho fijo para todos */
    height: 60px;   /* Alto fijo para todos */
    object-fit: contain; /* Escala la imagen para que quepa sin distorsión */

    margin: 0 30px; /* Espacio entre logos */
    vertical-align: middle; /* Alineación vertical */

    /* Efectos visuales opcionales */
    transition: all 0.3s ease-in-out;
    filter: grayscale(100%); /* Ej: logos en blanco y negro */
    opacity: 0.7;
}

.logo-carousel img:hover {
    filter: grayscale(0%); /* Ej: color al pasar el ratón */
    opacity: 1;
    transform: scale(1.1);
}

/* --- Definición de la Animación --- */
@keyframes scroll {

    0% {
        /* Inicia en la posición original */
        transform: translateX(0);
    }
    100% {
        /* Desplaza el ancho total del conjunto original de logos (la mitad del contenedor track) */
        transform: translateX(-50%);

    }
}