/* ============================================================
   CLIENT-STRIP.CSS — carrusel de clientes en badges
   ============================================================ */

/* Contenedor principal */
.cs-wrap {
    background: #f8f9fb;
    border-top: 1px solid #e8eaf0;
    border-bottom: 1px solid #e8eaf0;
    padding: 14px 0;
    overflow: hidden;
    position: relative;
}

    /* Fade en los bordes */
    .cs-wrap::before,
    .cs-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
    }

    .cs-wrap::before {
        left: 0;
        background: linear-gradient(to right, #f8f9fb, transparent);
    }

    .cs-wrap::after {
        right: 0;
        background: linear-gradient(to left, #f8f9fb, transparent);
    }

/* Track animado */
.cs-track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    animation: cs-scroll 40s linear infinite;
}

/* Pausa al hacer hover */
.cs-wrap:hover .cs-track {
    animation-play-state: paused;
}

/* Badges individuales */
.cs-track span {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4a4a6a;
    background: #ffffff;
    border: 1px solid #e2e4ed;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.1px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: default;
}

    .cs-track span:hover {
        background: #f0effe;
        border-color: #c5beff;
        color: #6C63FF;
    }

/* Animación */
@keyframes cs-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Mobile: un poco más compacto */
@media (max-width: 576px) {
    .cs-wrap {
        padding: 10px 0;
    }

    .cs-track {
        gap: 8px;
        animation-duration: 30s;
    }

        .cs-track span {
            padding: 5px 11px;
            font-size: 0.78rem;
        }
}