@font-face{
            font-family: 'Lemon Milk';
            src: url('/fontes/lemonmilk-bold.woff2') format('woff2');
            font-weight: 700;
            font-display: swap;
        }
        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-regular.woff2') format('woff2');
            font-weight: 400;
            font-display: swap;
        }
        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-medium.woff2') format('woff2');
            font-weight: 500;
            font-display: swap;
        }
        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-bold.woff2') format('woff2');
            font-weight: 700;
            font-display: swap;
        }

        #block-clientes, #block-clientes *{ margin: 0; padding: 0; box-sizing: border-box; }

        #block-clientes{
            --navy: #253064;
            --gold:  #D89A14;
            --white: #ffffff;
        }

        #block-clientes,
#block-clientes{
            background: #fff;
            font-family: 'Ekster', sans-serif;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        /* ── SECTION ─────────────────────────────────────── */
        #block-clientes .clients-section{
            width: 100%;
            padding: clamp(48px, 6vw, 96px) 0;
            background: var(--white);
            overflow: hidden;
        }

        /* ── HEADER ──────────────────────────────────────── */
        #block-clientes .clients-header{
            padding: 0 clamp(24px, 7.3vw, 140px);
            margin-bottom: clamp(32px, 4vw, 56px);
            opacity: 0;
        }

        #block-clientes .clients-tag{
            display: block;
            font-family: 'Ekster', sans-serif;
            font-weight: 700;
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 8px;
        }

        #block-clientes .clients-title{
            font-family: 'Lemon Milk', sans-serif;
            font-size: 34px;
            line-height: 1.1;
            text-transform: uppercase;
            color: var(--navy);
            letter-spacing: 0.5px;
            max-width: 600px;
        }

        /* ── SLIDER ──────────────────────────────────────── */
        #block-clientes .clients-slider{
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: clamp(24px, 3vw, 48px) 0;
            user-select: none;
            opacity: 0;
        }

        /* Fade edges */
        #block-clientes .clients-slider::before,
#block-clientes .clients-slider::after{
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: clamp(40px, 6vw, 100px);
            z-index: 10;
            pointer-events: none;
        }
        #block-clientes .clients-slider::before{
            left: 0;
            background: linear-gradient(to right, #fff 0%, transparent 100%);
        }
        #block-clientes .clients-slider::after{
            right: 0;
            background: linear-gradient(to left, #fff 0%, transparent 100%);
        }

        #block-clientes .logos-track{
            display: flex;
            align-items: center;
            gap: 0;
            white-space: nowrap;
            will-change: transform;
            cursor: grab;
        }
        #block-clientes .logos-track:active{ cursor: grabbing; }

        #block-clientes .logo-item{
            flex: 0 0 auto;
            height: 80px;
            margin-right: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #block-clientes .logo-item img{
            height: 100%;
            width: auto;
            max-width: none;
            /* 68%: as logos novas vieram recortadas mais justas (menos
               espaço em branco) que as antigas — em 100% ficariam maiores
               que o padrão original desta seção. */
            max-height: 68%;
            object-fit: contain;
            filter: grayscale(1);
            opacity: 0.5;
            transition: filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                        opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            pointer-events: none;
            -webkit-user-drag: none;
        }

        #block-clientes .logo-item:hover img{
            filter: grayscale(0);
            opacity: 1;
            transform: scale(1.1);
        }

        /* Logo em traço claro (pensada pra fundo escuro) — sem isso ela
           "some" no hover, quando o filtro escurecedor padrão é removido. */
        #block-clientes .logo-item.logo-item--invert img{
            filter: invert(1) grayscale(1);
            opacity: 0.6;
        }
        #block-clientes .logo-item.logo-item--invert:hover img{
            filter: invert(1) !important;
            opacity: 1 !important;
        }

        /* ── MOBILE ──────────────────────────────────────── */
        @media (max-width: 1024px){
            #block-clientes .clients-tag{ font-size: 14px; }
            #block-clientes .clients-title{ font-size: 28px; }
            #block-clientes .logo-item{ height: 60px; margin-right: 72px; }
        }
        @media (max-width: 600px){
            #block-clientes .clients-header{ text-align: center; }
            #block-clientes .clients-tag{ font-size: 11px; letter-spacing: 2px; }
            #block-clientes .clients-title{ font-size: 22px; max-width: 100%; }
            #block-clientes .logo-item{ height: 50px; margin-right: 48px; }
        }