/* Comportamiento del scroll y tipografía */
html { 
    scroll-behavior: smooth; 
    font-family: 'Inter', sans-serif; /* Mantenemos la fuente Inter */
}

/* =========================================
   SECCIÓN CLIENTES (SLIDER INFINITO)
   ========================================= */

:root {
    --slide-width: 200px;
    --slide-count: 10;
    --slide-total: 20;
}

/* Contenedor principal del slider */
.client-slider {
    background: white;
    height: 180px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Efecto de desvanecimiento en los bordes (Vignette blanca) */
.client-slider::before,
.client-slider::after {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    content: "";
    height: 180px;
    position: absolute;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.client-slider::before { left: 0; top: 0; }
.client-slider::after { right: 0; top: 0; transform: rotateZ(180deg); }

/* Pista que se mueve */
.slide-track {
    display: flex;
    width: calc(var(--slide-width) * var(--slide-total));
    animation: scroll 40s linear infinite;
}

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

/* Cada logo individual */
.slide {
    width: var(--slide-width);
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    flex-shrink: 0;
}

.slide img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.4s ease;
    cursor: pointer;
}

.slide img:hover {
    transform: scale(1.1);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(var(--slide-width) * var(--slide-count) * -1)); }
}