/* ============================================================
   SMARTLEASE — SECCIÓN: CLIENTES (Ticker / Banda deslizante)
   ============================================================
   Contiene la banda horizontal infinita con los logos de
   los clientes. El título tipo banner está en navigation.css.
   Orden de carga: 6°
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   BLOQUE: CONTENEDOR GENERAL DE LA SECCIÓN CLIENTES
   ══════════════════════════════════════════════════════════ */

.section-clients {
    padding: 0 0 60px 0;
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: BANDA DESLIZANTE DE LOGOS (Ticker)
   ══════════════════════════════════════════════════════════ */

/* Ventana visible: lo que se muestra al usuario */
.ticker-container {
    width: 100%;
    overflow: hidden;       /* Oculta los logos que salen del área */
    position: relative;
    padding: 30px 0;
    background: var(--white);
}

/* La tira completa de logos que se mueve (doble para efecto infinito) */
.ticker-wrapper {
    display: inline-flex;
    width: max-content;     /* Se expande para contener todos los logos */
    align-items: center;
    gap: 60px;
    animation: ticker-move 40s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* Activa aceleración GPU */
}

/* ── Logo individual ── */
.client-logo-item {
    flex: 0 0 auto;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo-item img {
    height: 40px;
    width: auto;
    filter: grayscale(100%);  /* En escala de grises por defecto */
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Hover de logo: solo en dispositivos con mouse */
@media (hover: hover) {
    .client-logo-item:hover img {
        filter: grayscale(0%);  /* Muestra el color real */
        opacity: 1;
        transform: scale(1.1);
    }

    /* Pausa la animación cuando el usuario pasa el mouse */
    .ticker-container:hover .ticker-wrapper {
        animation-play-state: paused;
    }
}


/* @keyframes ticker-move → centralizada en variables.css (sección animaciones globales) */


/* ══════════════════════════════════════════════════════════
   BLOQUE: RESPONSIVE DE CLIENTES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ticker-wrapper {
        gap: 30px;
        animation-duration: 25s; /* Más rápido en móvil */
    }

    .client-logo-item img {
        filter: grayscale(0%); /* En móvil se muestran en color siempre */
        opacity: 1;
        height: 35px;
    }
}