/* --- SECCIÓN DE CLIENTES (CARRUSEL ROBUSTO) --- */

.clients-section {
    padding: 50px 0;
    text-align: center;
    overflow: hidden; /* Esconde lo que se sale por los lados */
    background: var(--bg-color);
}

.slider {
    height: 150px;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    
    /* Máscara de desvanecimiento a los lados */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.slide-track {
    display: flex;
    /* TRUCO 1: max-content 
       Hacemos que el ancho sea automático según el contenido. 
       Ya no necesitamos calcular pixeles manualmente. */
    width: max-content; 
    
    /* Animación: Ajusta los '40s' si quieres que vaya más lento o rápido */
    animation: scroll 40s linear infinite;
}

/* Animación del movimiento */
@keyframes scroll {
    0% { transform: translateX(0); }
    /* TRUCO 2: -33.333% 
       Al tener 3 bloques idénticos, movemos la cinta exactamente un tercio.
       Cuando llega a -33%, el Bloque 2 está exactamente donde empezó el Bloque 1.
       El salto al 0% es imperceptible. */
    100% { transform: translateX(-33.333%); } 
}

.slide {
    height: 100px;
    width: 250px; /* Ancho fijo para cada hueco de logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    
    /* TRUCO 3: PROHIBIDO ENCOGER
       Esto evita que los logos se hagan pequeños si añades muchos. */
    flex-shrink: 0; 
}

.neumo-logo {
    max-width: 110%;
    max-height: 150%;
    /* Si tus logos son rectangulares y se ven pequeños, 
       puedes aumentar esto un poco o quitar el padding */
    padding: 0px; 
    border-radius: 10px;
    
    /* Estilo inicial: Escala de grises y semi-transparente */
   /*filter: grayscale(100%);
    opacity: 0.6;*/
    transition: all 0.3s ease;
}

.neumo-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}