.clients-section {
    overflow: hidden;

    padding-top:
        clamp(
            2.75rem,
            4vw,
            4rem
        );

    padding-bottom: 0;

    background:
        var(--color-white);
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.clients-section__header {
    margin-bottom:
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );
}


.clients-section__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(20rem, 0.92fr);

    align-items: start;

    gap:
        clamp(
            2rem,
            6vw,
            5.5rem
        );
}


.clients-section__intro {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.clients-section__intro .section-eyebrow {
    margin-bottom:
        1rem;
}


.clients-section__intro h2 {
    max-width: 15ch;

    margin: 0;

    color:
        var(--color-navy);

    font-size:
        clamp(
            2.5rem,
            4.1vw,
            4rem
        );

    letter-spacing:
        -0.045em;

    line-height:
        0.98;
}


/* =========================================================
   BLOCO DIREITO
   ========================================================= */

.clients-section__support {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap:
        1rem;

    margin-top: 2.4rem;

    padding:
        1.35rem
        1.55rem;

    background:
        rgb(0 38 62 / 2.5%);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);
}


.clients-section__support-text {
    max-width: 36rem;

    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        0.98rem;

    line-height:
        1.7;
}


.clients-section__highlights {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        0.55rem;

    padding: 0;

    margin: 0;

    list-style: none;
}


.clients-section__highlights li {
    position: relative;

    padding:
        0.5rem
        0.8rem;

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        999px;

    color:
        var(--color-navy);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.1;
}


/* =========================================================
   CARROSSEL
   ========================================================= */

.clients-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding-block:
        1.25rem;

    border-top:
        1px solid
        var(--color-border);

    border-bottom: 0;


    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 8%,
            black 92%,
            transparent
        );


    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 8%,
            black 92%,
            transparent
        );
}


.clients-marquee__track {
    width: max-content;

    display: flex;

    animation:
        clients-marquee-scroll
        38s
        linear
        infinite;

    will-change: transform;
}


.clients-marquee__group {
    display: flex;

    flex-shrink: 0;

    align-items: center;

    gap:
        clamp(
            2rem,
            4.5vw,
            4.5rem
        );

    padding:
        0
        clamp(
            1rem,
            2vw,
            2rem
        );

    margin: 0;

    list-style: none;
}


/* =========================================================
   LOGOS
   ========================================================= */

.client-logo {
    width:
        clamp(
            12rem,
            17vw,
            16rem
        );

    height:
        6.5rem;

    display: grid;

    flex:
        0 0 auto;

    place-items: center;
}


.client-logo figure {
    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    margin: 0;
}


.client-logo img {
    width: auto;

    max-width:
        13rem;

    height: auto;

    max-height:
        4.25rem;

    object-fit: contain;

    filter:
        grayscale(1);

    opacity:
        0.72;

    transition:
        filter 220ms ease,
        opacity 220ms ease,
        transform 220ms ease;
}


.client-logo:hover img {
    filter:
        grayscale(0);

    opacity: 1;

    transform:
        scale(1.06);
}


/* =========================================================
   PAUSA NO HOVER
   ========================================================= */

.clients-marquee:hover
.clients-marquee__track,

.clients-marquee:focus-within
.clients-marquee__track {
    animation-play-state:
        paused;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.clients-section__empty {
    padding:
        var(--space-4);

    background:
        var(--color-background);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    color:
        var(--color-text-muted);

    text-align: center;
}


/* =========================================================
   ANIMAÇÃO
   ========================================================= */

@keyframes clients-marquee-scroll {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .clients-section {
        padding-top:
            3rem;
    }

    .clients-section__heading {
        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            1.75rem;
    }

    .clients-section__intro h2 {
        max-width:
            12ch;
    }

    .clients-section__support {
        max-width:
            40rem;

        margin-top: 0;
    }


    .clients-marquee {

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent,
                black 4%,
                black 96%,
                transparent
            );


        mask-image:
            linear-gradient(
                90deg,
                transparent,
                black 4%,
                black 96%,
                transparent
            );
    }


    .clients-marquee__track {
        animation-duration:
            42s;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .clients-section {
        padding-top:
            2.5rem;
    }


    .clients-section__intro h2 {
        font-size:
            clamp(
                2.3rem,
                11vw,
                3.3rem
            );
    }


    .clients-section__support {
        padding:
            1.1rem;
    }


    .clients-section__support-text {
        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    .clients-section__highlights {
        gap:
            0.45rem;
    }


    .clients-section__highlights li {
        padding:
            0.5rem
            0.7rem;

        font-size:
            0.72rem;
    }


    .clients-marquee {
        padding-block:
            1rem;
    }


    .client-logo {
        width:
            9rem;

        height:
            5.5rem;
    }


    .client-logo img {
        max-width:
            8rem;

        max-height:
            3.4rem;
    }


    .clients-marquee__group {
        gap:
            var(--space-4);
    }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .clients-marquee {
        overflow-x:
            auto;

        -webkit-mask-image:
            none;

        mask-image:
            none;
    }


    .clients-marquee__track {
        width:
            auto;

        animation:
            none;
    }


    .clients-marquee__group {
        flex-wrap:
            wrap;

        justify-content:
            center;
    }


    .clients-marquee__group[
        aria-hidden="true"
    ] {
        display:
            none;
    }

}