.SliderInfinito {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 0; 
    overflow: hidden; 
    position: relative;
    width: 100%;  
}

.SliderInfinito::before,
.SliderInfinito::after {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
}

.SliderInfinito::before {
    left: 0;
    /* background: linear-gradient(to right, white 20%, transparent); */ /* Descomentar para fade */
}

.SliderInfinito::after {
    right: 0;
    /* background: linear-gradient(to left, white 20%, transparent); */ /* Descomentar para fade */
}


.slider-track {
    display: flex; /* Pone los logos en línea */
    /* Ancho total: (Número de logos ORIGINALES * ancho de cada logo) */
    /* Para el ejemplo: 8 logos * 150px = 1200px. Duplicado = 2400px */
    width: calc(150px * 34); /* 8 logos originales + 8 duplicados */
    animation: scrollLogos 25s linear infinite;
    /* '25s' es la duración de la animación. Ajusta para velocidad. */
    /* 'linear' asegura velocidad constante. */
    /* 'infinite' para que se repita. */
}

.slide-logo {
    width: 150px; /* Ancho de cada logo (incluye padding si lo tiene) */
    height: 80px; /* Alto para cada logo */
    display: flex;
    align-items: center; /* Centra verticalmente la imagen */
    justify-content: center; /* Centra horizontalmente la imagen */
    padding: 0 15px; /* Espaciado horizontal entre logos */
    box-sizing: border-box;
}

.slide-logo img {
    max-width: 100%; /* Asegura que la imagen no exceda el contenedor */
    max-height: 60px; /* Alto máximo de la imagen del logo */
    filter: grayscale(100%); /* Opcional: logos en blanco y negro */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.slide-logo img:hover {
    filter: grayscale(0%); /* Opcional: color al pasar el mouse */
    opacity: 1;
    transform: scale(1.1); /* Opcional: pequeño zoom al pasar el mouse */
}

/* Animación para el scroll */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mueve el track hacia la izquierda la mitad de su ancho total (el ancho de UN set de logos) */
        transform: translateX(calc(-150px * 8)); /* 8 es el número de logos ORIGINALES */
    }
}

/* Opcional: Pausar animación al pasar el mouse sobre el track */
.SliderInfinito:hover .slider-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .slide-logo img {
        filter: none;
        opacity: 1;
    }
}