/* ==========================================================================
   Boxti — Seção "Empresas que confiaram na Box TI"
   Título + faixa de logos em marquee (scroll horizontal contínuo).
   ========================================================================== */

/* Mesmo bloco dark levemente mais claro das seções de sintomas/provas */
#clientes {
    background-color: #10212a;
}

.clients__title {
    font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
    margin: 0 0 clamp(3.5rem, 2rem + 5vw, 7rem);
}

/* Marquee (2 linhas em direções opostas) ----------------------------------- */
.clients__marquee {
    width: 100%;
    overflow: hidden;
    /* esmaece as bordas esquerda/direita */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.clients__marquee + .clients__marquee {
    margin-top: clamp(2rem, 1rem + 2vw, 3.5rem);
}

.clients__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clients-marquee 72s linear infinite;
}

/* linha de baixo: direita -> esquerda */
.clients__track--reverse {
    animation-name: clients-marquee-reverse;
}

.client-logo {
    flex: 0 0 auto;
    height: 100px;
    width: auto;
    margin: 0 clamp(3rem, 2rem + 3vw, 6rem);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.client-logo:hover {
    opacity: 1;
}

/* esquerda -> direita (track tem 2 cópias idênticas -> loop sem emenda) */
@keyframes clients-marquee {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* direita -> esquerda */
@keyframes clients-marquee-reverse {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Responsivo --------------------------------------------------------------- */
@media (max-width: 768px) {
    .client-logo {
        height: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clients__track {
        animation: none;
        transform: none;
    }
}