/* ==============================================================
           TOKENS
           ============================================================== */
        :root {
            /* A identidade congelada e os aliases `--preto`, `--marrom`,
               `--ouro`, `--rose` e `--branco` vêm de identidade.css.
               Derivados abaixo são exclusivos desta composição. */
            /* Derivados — tintas das cores acima, não cores novas.
               O `--papel` deixou de ser fundo quando as faixas claras saíram:
               hoje é a cor do TEXTO claro sobre o preto e o marrom. */
            --papel: var(--color-paper-home);
            --ouro-claro: var(--color-secondary-light); /* ouro sobre tinta escura */

            /* v5 · A superfície do formulário. NÃO é cor nova: é o marrom da
               marca puxado para o preto da marca, do mesmo jeito que o
               `--ouro-claro` é o ouro puxado para a luz. Escrito como
               `color-mix` de propósito — assim fica IMPOSSÍVEL alguém achar
               que apareceu um quarto marrom na paleta, e se o `--marrom`
               mudar um dia, esta muda junto.
               Vive no `:root` porque o formulário e a borda dele são escopos
               diferentes que precisam do mesmo valor (AGENTS.md §Variáveis
               reusadas: token compartilhado declarado por escopo apaga onde o
               escopo não alcança). */
            /* ══ A RAMPA DO MARROM ══════════════════════════════════
               Quatro degraus entre o marrom da marca e o preto, cada um com um
               PAPEL. Todos escritos como `color-mix` do marrom com o preto —
               os dois da identidade —, para ficar impossível alguém achar que
               apareceu marrom novo na paleta.

                 --marrom            #593B2D   a cor da marca (congelada)
                 --marrom-campo      48%       o CAMPO: contato, pé do "quem
                                               somos", divisor e topo do rodapé
                 --marrom-profundo   30%       o pé da página

               ⚠️ O `--marrom-campo` é o `#31221B` pedido. Conferido: ele cai
               EXATAMENTE em 48% de marrom sobre preto, ou seja, já estava na
               rampa da marca — não é cor nova, é um degrau que faltava. */
            --marrom-campo:   color-mix(in srgb, var(--marrom) 48%, var(--preto));

            /* A superfície das peças ELEVADAS sobre o campo (o painel do
               formulário e as células dos números). Véu de papel, não uma
               quarta cor: assim ela se compõe com o que estiver atrás e
               acompanha o campo sozinha se ele mudar. */
            --superficie-elevada: rgba(245, 241, 234, .10);

            /* O pé da página: o degrau mais fundo da rampa. */
            --marrom-profundo: color-mix(in srgb, var(--marrom) 30%, var(--preto));
            --fio-ouro-forte: rgba(171, 149, 94, .72);

            /* v7 · O fio mais fino do ouro, que o design das publicações usa
               em toda separação interna (cabeçalho, cartões da pauta, topo da
               grade expandida). Vive no `:root` porque três escopos diferentes
               precisam do mesmo valor — declarado por escopo, ele apagaria
               onde o escopo não alcança (AGENTS.md §Variáveis reusadas). */
            --fio-ouro-fraco: rgba(171, 149, 94, .14);
            --tinta-suave: rgba(245, 241, 234, 0.62);
            --tinta-fraca: rgba(245, 241, 234, 0.55);
            --fio-escuro: rgba(245, 241, 234, 0.14);
            --fio-ouro: rgba(171, 149, 94, 0.45);

            --respiro-x: clamp(1.25rem, 4vw, 3.25rem);
            --largura: 74rem;
            --faixa-y: clamp(3.5rem, 7vw, 5.5rem);

            /* v4 · Altura REAL do topo sticky: logo + os 12px de padding de
               cada lado + o fio da borda. Vira token porque duas coisas
               precisam do mesmo número — o recuo de âncora e nada mais, hoje,
               mas o dia em que alguém mudar a altura do logo e esquecer do
               recuo é exatamente o bug que este token evita. Reajustado em
               cada breakpoint que muda `.topo__logo`. */
            --topo-h: 79px;                /* 54 + 12 + 12 + 1 */

            --curva: cubic-bezier(.2, .75, .25, 1);
            --motion-ease: cubic-bezier(.33, 0, .18, 1);
            --motion-enter: 1.5s;
            --motion-piece: 1.7s;
            --motion-line: 1.8s;
            --motion-exit: .4s;
            --motion-stagger: .2s;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border-radius: 0;
        }

        /* ── v4 · Recuo de âncora sob o topo sticky ──
           ⚠️ CORREÇÃO DE UM DIAGNÓSTICO ERRADO MEU, registrada porque o erro
           é mais instrutivo que o conserto: eu tinha anunciado isto como
           DEFEITO da v3 ("o título fica coberto pela barra"), com base na
           captura de celular do `capturar.py --secoes`. Estava errado. O
           `--secoes` posiciona cada seção por script, sem passar pelo
           `scroll-padding` — ele mostra o pior enquadramento possível, não o
           que o visitante vê ao clicar no menu.

           Medido de verdade (caixa do título contra caixa da barra, depois de
           navegar para a âncora), a v3 nunca cobriu nada:

             v3 desktop  +19 / +28 / +48 / +39 px de folga
             v3 celular   +2 /  +1 / +26 / +22 px de folga

           O `padding-top` da própria faixa já fazia o trabalho. O que existe
           de fato é uma folga APERTADA no celular: +1px é o título encostando
           na barra, e basta alguém mexer na altura do logo para virar defeito
           de verdade. Então isto é REFINO, não conserto — e o valor é só a
           altura da barra, sem respiro somado: a faixa já tem o dela, e somar
           os dois jogava o título para 197px do topo num viewport de 900
           (quase um quarto da tela em branco depois do clique).

           No `html` (o elemento que ROLA) e não item a item: pega toda âncora
           de uma vez, inclusive o pulo por teclado e o `:target`. */
        html {
            scroll-padding-top: var(--topo-h);
            scroll-behavior: smooth;
        }

        /* Quem pediu menos movimento não quer a página deslizando sozinha —
           mas continua precisando do recuo acima. */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
        }

        body {
            font-family: var(--sans);
            font-weight: 400;
            font-size: 1rem;
            line-height: 1.7;
            color: var(--tinta-suave);
            background-color: var(--preto);
            -webkit-font-smoothing: antialiased;
        }

        img, video { display: block; max-width: 100%; }
        ul { list-style: none; }
        a { color: inherit; text-decoration: none; }

        :focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        .grade { max-width: var(--largura); margin-inline: auto; }
        .faixa { padding: var(--faixa-y) var(--respiro-x); }

        /* ══════════════════════════════════════════════════════════════
           A DINÂMICA DE COR — um arco, não um xadrez

           A página não alterna mais claro e escuro: ela ATRAVESSA uma cor.
           Preto no herói, preto em "nossa atuação" e nas publicações, e daí
           um degradê que abre para o marrom em "quem somos", segura o marrom
           no contato e volta ao preto no rodapé.

           A regra que rege tudo: nenhuma emenda é um CORTE. Cada faixa
           começa exatamente na cor em que a anterior terminou — por isso os
           degradês vivem DENTRO das seções, nunca entre elas.
           ══════════════════════════════════════════════════════════════ */

        /* ── Losango: o motivo do design, e o mesmo do divisor do site ── */
        .losango {
            width: 7px;
            height: 7px;
            flex-shrink: 0;
            display: block;
            background-color: var(--ouro);
            transform: rotate(45deg);
        }

        /* ── Eyebrow (a "voz técnica" que no design era mono) ── */
        /* `flex`, não `inline-flex`. Sendo inline, o eyebrow ficava dentro de
           uma linha do PAI e herdava a meia-entrelinha dele (1,7 do corpo) —
           uns 10px de ar acima que ninguém pediu e que desalinhavam o rótulo
           do primeiro campo do formulário ao lado. Como bloco ele encosta no
           topo do container. `width: max-content` preserva a largura do
           conteúdo, que era o motivo de ser inline. */
        .eyebrow {
            display: flex;
            width: max-content;
            max-width: 100%;
            align-items: center;
            gap: 12px;
            line-height: 1;
            font-size: .65rem;
            font-weight: 500;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--tinta-suave);
        }

        /* ── Títulos ── */
        .titulo {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(2rem, 4vw, 2.75rem);
            line-height: 1.12;
            letter-spacing: -.02em;
            color: var(--papel);
        }

        .titulo em { font-style: italic; color: var(--ouro-claro); }

        /* ── Ações ── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 15px 28px;
            font-family: var(--sans);
            font-size: .8125rem;
            font-weight: 600;
            letter-spacing: .02em;
            cursor: pointer;
            border: 1px solid transparent;
            background: none;
            transition: transform .35s var(--curva), box-shadow .35s var(--curva),
                        background-color .35s var(--curva), color .35s var(--curva),
                        border-color .35s var(--curva);
        }

        .btn__seta { display: inline-block; transition: transform .35s var(--curva); }
        .btn:hover .btn__seta { transform: translateX(5px); }

        .btn--ouro { background-color: var(--ouro); color: var(--preto); }
        .btn--ouro:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(171, 149, 94, .32); }

        .btn--vazado { border-color: rgba(245, 241, 234, .3); color: var(--papel); }
        .btn--vazado:hover { border-color: var(--ouro); color: var(--ouro-claro); }

        /* No claro, o vazado escuro é o par certo — e é aqui que o MARROM
           volta: a cor primária da marca não aparecia no design. */
        /* ==============================================================
           TOPO
           ============================================================== */
        /* A BARRA sangra (o fio atravessa a tela); o CONTEÚDO fica na régua do
           container, igual aos blocos do meio. Sem isso o topo respira 52px da
           borda enquanto a manchete começa 121px adentro, e as duas peças leem
           como se fossem de páginas diferentes. Vale igual para o rodapé. */
        .topo {
            position: sticky;
            top: 0;
            z-index: 20;
            padding: 12px var(--respiro-x);
            border-bottom: 1px solid var(--fio-escuro);
            background-color: color-mix(in srgb, var(--preto) 88%, transparent);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .topo__grade {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }

        /* Logo SEM a assinatura ("consultoria e treinamento em licitações"):
           na altura do topo aquela linha era ilegível de qualquer forma, e
           cortá-la libera altura para a marca em si crescer. */
        .topo__logo { height: 54px; width: auto; }

        .topo__nav { display: flex; gap: 26px; }

        /* v6 · O gatilho e o botão do menu só existem no celular. Aqui em
           cima ficam fora do fluxo — o `display: none` no checkbox o tiraria
           da navegação por teclado no breakpoint em que ele importa, então a
           regra de esconder mora no celular, junto do resto. */
        .topo__gatilho,
        .topo__hamburguer { display: none; }

        .topo__link {
            font-size: .75rem;
            font-weight: 500;
            color: var(--tinta-suave);
            transition: color .3s var(--curva);
        }

        .topo__link:hover { color: var(--ouro-claro); }
        .topo__link:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

        .topo__atalhos { display: flex; align-items: center; gap: 8px; }

        .topo__atalho {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: var(--tinta-suave);
            transition: color .3s var(--curva), border-color .3s var(--curva);
        }

        .topo__atalho:hover,
        .topo__atalho:focus-visible { color: var(--ouro-claro); }
        .topo__atalho:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        .topo__atalho-icone {
            flex: none;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .topo__atalho-icone .cheio { fill: currentColor; stroke: none; }
        .topo__atalho-icone--preenchido { fill: currentColor; stroke: none; }
        .topo__atalho-icone--instagram { stroke-width: 1.75; }
        .topo__atalho--whatsapp { display: none; }

        .topo__cta {
            padding: 9px 18px;
            border: 1px solid var(--fio-ouro);
            font-size: .7188rem;
            font-weight: 600;
            color: var(--ouro-claro);
            transition: background-color .35s var(--curva), color .35s var(--curva);
        }

        .topo__cta:hover { background-color: var(--ouro); color: var(--preto); }

        /* ==============================================================
           1 · HERÓI — do design "Bloco Principal · alternativa 2c"

           A faixa de frentes que existia ABAIXO do herói foi absorvida por
           ele: as três frentes viraram um rotativo dentro de um cartão de
           vidro, à direita do vídeo. A página encurta uma seção inteira e o
           herói passa a responder "o que vocês fazem" sem exigir rolagem.
           ============================================================== */
        .hero {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            padding: clamp(4rem, 7vw, 5.5rem) var(--respiro-x) clamp(3rem, 5vw, 4rem);
        }

        .hero__midia,
        .hero__foto {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 60% 45%;
            z-index: -2;
        }

        .hero__foto { display: none; }

        /* Scrim do design: quase opaco onde o texto vive, abrindo até quase
           nada sobre a janela, e fechando de leve na borda direita para o
           cartão de vidro ter contra o que se destacar. */
        .hero__veu {
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(90deg,
                        rgba(13, 11, 10, .93) 2%,
                        rgba(13, 11, 10, .62) 34%,
                        rgba(13, 11, 10, .14) 60%,
                        rgba(13, 11, 10, .34) 100%);
        }

        /* ── A dissolução do pé do vídeo ──
           Era aqui que nascia a sensação de corte: o vídeo ia claro até a
           última linha e o bloco seguinte começava preto chapado. Esta camada
           apaga a imagem no terço final, então o herói TERMINA na mesma cor em
           que "nossa atuação" começa, e a emenda desaparece. */
        .hero__dissolve {
            position: absolute;
            inset: auto 0 0 0;
            height: 42%;
            z-index: -1;
            background: linear-gradient(180deg,
                        rgba(13, 11, 10, 0) 0%,
                        rgba(13, 11, 10, .55) 45%,
                        var(--preto) 100%);
        }

        /* ── Barra do topo: o progresso REAL do vídeo ──
           No design ela roda em 7s fixos. Aqui a duração vem do arquivo (o JS
           lê `video.duration`), senão o ornamento mentiria sobre o loop. Some
           junto com o vídeo — sem vídeo não há progresso para mostrar. */
        .hero__progresso {
            position: absolute;
            inset: 0 0 auto;
            height: 2px;
            z-index: 1;
            overflow: hidden;
        }

        .hero__progresso span {
            display: block;
            height: 100%;
            transform: scaleX(0);
            transform-origin: left;
            background: linear-gradient(90deg, var(--ouro), rgba(171, 149, 94, 0));
        }

        .hero__grade {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
            gap: clamp(2rem, 4vw, 3.5rem);
            align-items: start;
        }

        .hero__conteudo { max-width: 34rem; }

        .hero__titulo {
            margin-top: 22px;
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(2.25rem, 4vw, 3.25rem);
            line-height: 1.04;
            letter-spacing: -.015em;
            color: var(--papel);
        }

        .hero__titulo em { font-style: italic; color: var(--ouro-claro); }

        .linha { display: block; overflow: hidden; }

        .hero__par {
            display: block;
            margin-top: 20px;
            font-family: var(--sans);
            font-size: clamp(1rem, 1.5vw, 1.1875rem);
            font-weight: 300;
            line-height: 1.45;
            letter-spacing: 0;
            color: rgba(245, 241, 234, .82);
        }

        .hero__par b { display: block; font-weight: 300; }
        .hero__par b + b { margin-top: 2px; }

        /* O fio de margem se manteve: é ele que separa a explicação do par
           acima sem gastar uma linha inteira. */
        .hero__lead {
            position: relative;
            max-width: 28rem;
            margin-top: 24px;
            padding-left: 1.25rem;
            font-size: .9063rem;
            line-height: 1.75;
            color: rgba(245, 241, 234, .58);
        }

        .hero__lead::before {
            content: '';
            position: absolute;
            left: 0;
            top: .4rem;
            bottom: .5rem;
            width: 1px;
            background: linear-gradient(180deg,
                        var(--ouro) 0%,
                        rgba(171, 149, 94, .35) 55%,
                        rgba(171, 149, 94, 0) 100%);
            transform-origin: top;
        }

        .hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
        .hero__acao-principal { display: grid; gap: 10px; }
        .hero__acao-nota {
            margin: 0;
            color: rgba(245, 241, 234, .72);
            font-size: .7rem;
            line-height: 1.35;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        /* ==============================================================
           VITRINE — o cartão de vidro com o rotativo de frentes
           ============================================================== */
        .vitrine { display: flex; flex-direction: column; gap: 14px; }

        .vitrine__cartao {
            padding: 24px;
            border: 1px solid rgba(171, 149, 94, .34);
            background: linear-gradient(160deg,
                        rgba(14, 12, 10, .84), rgba(14, 12, 10, .72));
            backdrop-filter: blur(22px) saturate(.9);
            -webkit-backdrop-filter: blur(22px) saturate(.9);
            box-shadow: 0 28px 70px rgba(0, 0, 0, .7);
        }

        .vitrine__titulo {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.75rem;
            line-height: 1.14;
            color: var(--papel);
        }

        .vitrine__texto {
            margin: 12px 0 18px;
            font-size: .8125rem;
            line-height: 1.6;
            color: rgba(245, 241, 234, .62);
        }

        /* Altura reservada: sem ela, um serviço de título curto encolhe o
           cartão e a peça inteira "pula" a cada troca do rotativo. */
        .vitrine__rotativo {
            padding-top: 18px;
            border-top: 1px solid rgba(245, 241, 234, .12);
            min-height: 5.25rem;
        }

        .vitrine__nome {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.375rem;
            line-height: 1.2;
            color: var(--papel);
        }

        .vitrine__nota {
            margin-top: 7px;
            font-size: .7813rem;
            line-height: 1.5;
            color: rgba(245, 241, 234, .62);
        }

        /* ── As três barras: indicador E controle ── */
        .vitrine__barras { display: flex; gap: 6px; margin-top: 20px; }

        .barra {
            flex: 1;
            height: 2px;
            padding: 0;
            position: relative;
            overflow: hidden;
            border: 0;
            background-color: rgba(245, 241, 234, .16);
            cursor: pointer;
        }

        /* Alvo de toque de 44px sem engordar a barra de 2px: o pseudo estende
           a área clicável para cima e para baixo. Sem isto, o controle tem 2px
           de altura — impossível de acertar com o dedo. */
        .barra::after {
            content: '';
            position: absolute;
            inset: -21px 0;
        }

        .barra__fill {
            position: absolute;
            inset: 0;
            display: block;
            transform: scaleX(0);
            transform-origin: left;
            background-color: var(--ouro);
        }

        .barra:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

        .vitrine__pe {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 20px;
        }

        .vitrine__acao {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: .6563rem;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--ouro-claro);
        }

        .vitrine__nav { display: flex; gap: 8px; }

        /* ⚠️ Quadrado, não redondo: o design trazia `border-radius: 50%`, e
           radius 0 é regra congelada da identidade — a mesma decisão do botão
           do WhatsApp no rodapé. */
        .seta {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            padding: 0;
            border: 1px solid rgba(245, 241, 234, .22);
            background-color: transparent;
            font-family: var(--sans);
            font-size: .75rem;
            color: rgba(245, 241, 234, .6);
            cursor: pointer;
            transition: border-color .3s var(--curva), color .3s var(--curva),
                        background-color .3s var(--curva);
        }

        .seta:hover,
        .seta:focus-visible { border-color: var(--ouro); color: var(--ouro-claro); }

        .seta--frente { border-color: var(--fio-ouro); color: var(--ouro-claro); }
        .seta--frente:hover,
        .seta--frente:focus-visible { background-color: rgba(171, 149, 94, .14); }

        /* ── Os outros dois serviços, fora do cartão ── */
        .vitrine__outros { display: flex; gap: 10px; }

        .outro {
            flex: 1;
            min-height: 4.75rem;
            padding: 14px 16px;
            text-align: left;
            border: 1px solid rgba(245, 241, 234, .16);
            background-color: rgba(14, 12, 10, .86);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1rem;
            line-height: 1.2;
            color: rgba(245, 241, 234, .9);
            cursor: pointer;
            transition: border-color .35s var(--curva), transform .35s var(--curva);
        }

        .outro:hover,
        .outro:focus-visible { border-color: var(--ouro); transform: translateY(-3px); }

        /* ── "Ver todos os serviços" ──
           Antes era um link solto, sem superfície, pousado direto sobre a
           parte CLARA do vídeo (a janela) — ouro sobre luz dourada, ilegível.
           O conserto não é escurecer a letra: é dar chão a ela. Vira a última
           peça da pilha da vitrine, com a mesma moldura e o mesmo vidro dos
           cartões acima, e a seta encostada na direita. Deixa de parecer
           sobra e passa a fechar o conjunto. */
        .vitrine__todos {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            border: 1px solid rgba(245, 241, 234, .16);
            background-color: rgba(14, 12, 10, .86);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            font-size: .6563rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            transition: border-color .35s var(--curva), background-color .35s var(--curva);
        }

        .vitrine__todos:hover,
        .vitrine__todos:focus-visible {
            border-color: var(--ouro);
            background-color: rgba(14, 12, 10, .94);
        }

        .vitrine__todos .btn__seta { margin-left: auto; }

        /* ── Divisor clássico da Duae ──
           Hairlines convergindo num losango de ouro, com respiro generoso.
           Entre duas faixas da MESMA cor é ele que marca a passagem: sem ele,
           "nossa atuação" e "publicações" leriam como um bloco só. */
        .divisor {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.1rem;
            padding: clamp(2.75rem, 6vw, 4.5rem) var(--respiro-x);
        }

        .divisor::before,
        .divisor::after {
            content: '';
            height: 1px;
            width: min(11rem, 26vw);
            background: linear-gradient(90deg, transparent, var(--fio-ouro));
        }

        .divisor::after { background: linear-gradient(270deg, transparent, var(--fio-ouro)); }

        /* ⚠️ O divisor é uma faixa como outra qualquer: PRECISA da cor do
           lugar onde entra. Entre duas faixas marrons, um divisor sem fundo
           mostraria o preto do corpo e abriria justamente o corte que ele
           existe para evitar. */
        .divisor--marrom { background-color: var(--marrom-campo); }

        /* ══ v7 · O FECHO — régua, não ornamento ═══════════════════════
           O divisor entre o contato e o rodapé abria 333px entre o fim do
           formulário e a marca (medido: 88 de faixa + 151 de divisor + 94 de
           rodapé). O losango com as duas hairlines curtas é uma BATIDA DE
           RESPIRO entre dois blocos de conteúdo — e aqui não há dois blocos
           de conteúdo: há o fim do conteúdo e o começo do fecho. O ornamento
           estava sendo cobrado num lugar onde não tinha o que marcar.

           Vira uma linha só, de ponta a ponta. "Suave" no sentido literal: o
           ouro aparece no miolo e se dissolve nas duas bordas, que é a MESMA
           gramática das hairlines curtas do divisor comum — só estendida à
           largura da tela. Sem o fade, a linha bateria seca na borda do
           viewport e leria como corte, não como fecho.

           O `padding-inline: 0` é o que a deixa chegar às bordas: o
           `--respiro-x` herdado do `.divisor` a encolheria para a régua do
           conteúdo, e aí ela não seria de 100%. */
        .divisor--fecho {
            display: block;
            padding: clamp(.875rem, 1.8vw, 1.375rem) 0;
        }

        .divisor--fecho::before { display: none; }

        .divisor--fecho::after {
            display: block;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg,
                        transparent 0%,
                        rgba(171, 149, 94, .38) 26%,
                        rgba(171, 149, 94, .38) 74%,
                        transparent 100%);
        }

        /* ══ v6 · A LINHA PRETA FINA NAS BORDAS DO MARROM ═══════════════
           Relatada pela equipe; e eu NÃO consegui reproduzi-la. Varri toda a
           faixa marrom (1.958 fileiras, 5 colunas) em DPR 1 / 1,25 / 1,5 /
           1,75 / 2 / 2,625: zero pixel escuro, marrom `#593B2D` uniforme nas
           quatro emendas. Ou seja, a linha NÃO está no arquivo — e é
           justamente por isso que ela aparece na tela deles e não na minha.

           O que ela é: costura de SUBPIXEL. `.sobre`, os divisores, `.contato`
           e `.rodape` são caixas EMPILHADAS, cada uma pintando o próprio
           marrom. Quando a página é ampliada (zoom de 110%, 125%) ou cai num
           DPR fracionário, a borda de uma caixa termina em pixel quebrado, o
           arredondamento abre uma fresta de menos de 1px — e quem está atrás
           é o `body`, que é PRETO. A fresta vira exatamente o que foi
           descrito: fio preto fino no topo e no pé da faixa.

           O conserto não é caçar a fresta, é tirar o PRETO de trás dela: cada
           caixa marrom passa a pintar 1px de marrom para FORA de si, e a
           fresta (se abrir) vaza marrom sobre marrom, invisível.

           Por que `box-shadow` e não um invólucro com fundo marrom: o rodapé
           mora FORA do `<main>`, então uma div só não cobriria todas as
           emendas, e mover o `<footer>` para dentro do `<main>` seria trocar
           um defeito visual por um erro de semântica. Sombra sem desfoque e
           sem espalhamento não entra no layout — não empurra nada, não muda
           altura nenhuma — e cobre as QUATRO emendas de uma vez.

           A direção de cada lâmina importa: `.sobre` só embaixo e `.rodape`
           só em cima, porque os dois COMEÇAM/TERMINAM em preto (são
           degradês). Pintar marrom do lado preto criaria justamente o
           problema oposto — um fio marrom no escuro. */
        .sobre  { box-shadow: 0 1px 0 var(--marrom-campo); }
        .rodape { box-shadow: 0 -1px 0 var(--marrom-campo); }
        .contato,
        .divisor--marrom { box-shadow: 0 1px 0 var(--marrom-campo), 0 -1px 0 var(--marrom-campo); }

        /* ⚠️ v6 · AS HAIRLINES VOLTARAM — a v5 as tirou por leitura errada
           minha. O relato era "uma linha PRETA fina no topo e no pé da faixa
           marrom"; eu li como sendo as hairlines douradas do próprio divisor
           e removi o ornamento certo pelo defeito errado. As hairlines fazem
           parte do divisor e ficam. O defeito de verdade está tratado acima,
           na lâmina de marrom das caixas (§ costura de subpixel). */

        /* ==============================================================
           3 · NOSSA ATUAÇÃO — do design "Duae - Nossa Atuação", direção 1a
           ("malha de losangos · linhas que respiram · revelação em cascata").

           ── A TRADUÇÃO ───────────────────────────────────────────────────
           #c9a86e → var(--ouro) / var(--ouro-claro)  ·  #100d0a →
           var(--preto)  ·  #f0ebe2 e #ece5da → var(--papel)  ·  Cormorant
           GARAMOND → Cormorant INFANT  ·  Jost → Montserrat.

           ⚠️ OS ÍCONES SÃO OS DAQUI, não os do design. Ele traz caixas
           tracejadas escritas "ÍCONE" e o próprio texto do projeto diz que
           são placeholders para os ícones da Duae. Os nove SVGs autorais
           entram na caixa de 36px (28 no celular) sem mudar nada neles.

           ⚠️ A MALHA DE LOSANGOS voltou, e vale saber: já houve um
           `revert(mockup): remove o trilho de losangos de fundo` no
           histórico. Aquilo era um TRILHO (uma fileira de peças); isto é uma
           trama diagonal de fio quase invisível, que existe para dar
           superfície ao bloco e não para ser vista. Se incomodar como o
           trilho incomodou, o conserto é a opacidade destas duas linhas.

           ⚠️ A CHAVE DE SETORES DO CELULAR SAIU. Ela era decisão anterior —
           "os dois setores não cabem lado a lado, entra a chave" — e o design
           novo empilha os dois. Ganha-se "nada fica escondido" (e o conteúdo
           do setor público deixa de depender de um clique para existir na
           página); perde-se metade do comprimento no celular. É troca, não
           melhoria pura, e está na mesa do usuário.
           ============================================================== */
        .atuacao {
            position: relative;
            overflow: hidden;
            /* Três camadas: o véu que apaga a malha no topo (para a emenda
               com o herói não mostrar a trama nascendo), e as duas diagonais
               que se cruzam formando os losangos. */
            background-color: var(--preto);
            background-image:
                linear-gradient(180deg, rgba(13, 11, 10, 0) 0%,
                                rgba(13, 11, 10, .55) 34%, var(--preto) 62%),
                repeating-linear-gradient(45deg, transparent 0 33px,
                                rgba(171, 149, 94, .055) 33px 34px),
                repeating-linear-gradient(-45deg, transparent 0 33px,
                                rgba(171, 149, 94, .055) 33px 34px);
        }

        /* As duas peças soltas ao fundo. `pointer-events: none` porque elas
           cobrem área de texto e um quadrado invisível que come clique é o
           tipo de defeito que ninguém associa a um enfeite. */
        .atuacao__peca {
            position: absolute;
            border: 1px solid rgba(171, 149, 94, .14);
            pointer-events: none;
        }

        /* ⚠️ A rotação vive na propriedade `rotate`, NÃO dentro do keyframe.
           A referência põe `rotate(45deg)` nos dois quadros da animação — o
           que significa que, com `prefers-reduced-motion: reduce` (animação
           desligada), o quadrado nasce SEM rotação e vira um quadrado reto no
           meio da malha. `rotate` e `translate` são propriedades individuais e
           se compõem: a pose de repouso fica no CSS, o movimento no keyframe,
           e desligar o movimento não desfaz a pose. */
        .atuacao__peca--grande {
            top: 120px;
            right: 64px;
            width: 180px;
            height: 180px;
            rotate: 45deg;
        }
        .atuacao__peca--pequena {
            right: 180px;
            bottom: 90px;
            width: 74px;
            height: 74px;
            border-color: rgba(171, 149, 94, .12);
            transform: rotate(45deg);
        }

        .atuacao__cabeca { margin-bottom: 0; }

        /* O fio curto que cresce sob o título — a assinatura de motion desta
           seção, e o único gesto do cabeçalho. */
        .atuacao__fio {
            width: 88px;
            height: 1px;
            margin-top: 26px;
            background: linear-gradient(90deg, var(--ouro), rgba(171, 149, 94, 0));
            transform-origin: left;
        }

        /* A coluna do meio é um FIO, não um `border`: ela precisa desvanecer
           nas duas pontas, e borda não faz degradê. */
        .setores {
            display: grid;
            grid-template-columns: 1fr 1px 1fr;
            gap: 52px;
            margin-top: 52px;
        }

        .setores__fio {
            background: linear-gradient(180deg,
                        rgba(171, 149, 94, 0),
                        rgba(171, 149, 94, .28),
                        rgba(171, 149, 94, 0));
        }

        .setor__titulo {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 8px;
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.5625rem;
            color: var(--papel);
        }

        .setor__titulo em { font-style: italic; color: var(--ouro-claro); }

        /* O losango do subtítulo sobe 3px: alinhado pela `baseline` ele
           desceria até o pé da letra, e o olho lê isso como desalinho. */
        .setor__titulo .losango { position: relative; top: -3px; width: 6px; height: 6px; }

        .setor__lista { display: flex; flex-direction: column; }

        /* ── A linha de serviço ──
           Fio SÓ no topo, e o último ganha um no pé: assim as linhas se
           encostam sem dobrar de espessura (dois `border` vizinhos somam) —
           é a razão de não usar `border-bottom` em todas. */
        .servico {
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 18px;
            padding: 20px 12px 20px 0;
            border-top: 1px solid rgba(171, 149, 94, .15);
            transition: background .45s var(--curva), padding .45s var(--curva);
        }

        .servico:last-child { border-bottom: 1px solid rgba(171, 149, 94, .15); }

        /* A linha "respira" ao ser mirada: o ouro entra pela esquerda e o
           conteúdo recua junto. O degradê morre em 78% para o fim da linha
           não ganhar uma borda que ela não tem. */
        .servico:hover {
            padding-left: 12px;
            background: linear-gradient(90deg, rgba(171, 149, 94, .08), transparent 78%);
        }

        /* Os nove ícones autorais, agora numa caixa sem moldura: o design põe
           o ícone solto sobre a linha, e a moldura da versão anterior
           competiria com os fios horizontais. */
        .servico__icone {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            color: var(--ouro-claro);
        }

        .servico__icone svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.25;
            stroke-linecap: square;
            stroke-linejoin: miter;
        }

        .servico__nome {
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: .13em;
            text-transform: uppercase;
            line-height: 1.4;
            color: var(--papel);
        }

        .servico__texto {
            margin-top: 8px;
            font-size: .875rem;
            font-weight: 300;
            line-height: 1.62;
            color: rgba(245, 241, 234, .68);
            text-wrap: pretty;
        }

        /* ── O fecho da coluna pública ──
           Ganhou peça própria no design: fundo em degradê de ouro, moldura, e
           um losango espiando pelo canto. O `overflow: hidden` é o que corta
           o losango na quina — sem ele a peça vaza para fora do cartão. */
        .setor__fecho {
            position: relative;
            overflow: hidden;
            margin-top: 30px;
            padding: 26px 28px;
            border: 1px solid rgba(171, 149, 94, .2);
            background: linear-gradient(135deg, rgba(171, 149, 94, .09), rgba(171, 149, 94, .02));
        }

        .setor__fecho-losango {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(171, 149, 94, .35);
            transform: rotate(45deg);
            pointer-events: none;
        }

        .setor__fecho-texto {
            max-width: 44ch;
            font-size: .875rem;
            font-weight: 300;
            line-height: 1.62;
            color: rgba(245, 241, 234, .72);
            text-wrap: pretty;
        }

        .setor__fecho-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 18px;
            font-size: .7188rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            transition: gap .35s var(--curva), color .35s var(--curva);
        }

        .setor__fecho-link:hover { gap: 18px; color: var(--papel); }
        .setor__fecho-link:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }
        /* ==============================================================
           4 · PUBLICAÇÕES — do design "Redesign publicações consultoria",
           direção 1b (Destaque + pauta), aprovada.

           ── A TRADUÇÃO (a tinta do canvas NÃO é a da marca) ──────────────
           #c9a961 → var(--ouro) / var(--ouro-claro) em texto ·  #0d0b08 →
           var(--preto) ·  #f4efe6 e #f7f3ec → var(--papel) ·  Cormorant
           GARAMOND → Cormorant INFANT ·  Manrope → Montserrat.

           ⚠️ `border-radius: 999px` das pílulas de métrica NÃO veio. A marca
           é de linhas retas (`* { border-radius: 0 }` lá em cima) e esta
           mesma decisão já foi tomada uma vez neste arquivo — ver o botão do
           WhatsApp no rodapé, cujo comentário registra o design trazendo
           pílula e o projeto recusando. Repetir a exceção aqui abriria um
           segundo precedente e a régua deixaria de existir.

           ⚠️ `backdrop-filter: blur(6px)` das pílulas fica SÓ no desktop.
           No celular é o que travava a tela (§FORA O VIDRO NO CELULAR).

           Curtidas e visualizações vêm dos agregados reais do app de artigos.
           Zeros permanecem ocultos para evitar prova social negativa.
           ============================================================== */
        .artigos { background-color: transparent; }

        /* ⚠️ Estes são `<span>` dentro de `<a>` — o cartão inteiro é um link,
           e `<a>` não pode conter `<div>`/`<p>` sem quebrar o HTML. Span é
           INLINE por padrão, e em elemento inline `height`, `overflow` e
           `max-width` simplesmente NÃO SE APLICAM: a capa de 392px sairia com
           a altura da linha de texto e o `overflow:hidden` do zoom da imagem
           não recortaria nada. O `display: block` é o que faz o markup
           semântico e o layout conviverem — sem ele o bloco parece
           "misteriosamente quebrado" e a causa não está em nenhuma das regras
           de tamanho, que estão todas certas. */
        .destaque__capa,
        .destaque__cat,
        .destaque__titulo,
        .destaque__resumo,
        .pauta__cat,
        .pauta__titulo,
        .extra__capa,
        .extra__cat,
        .extra__titulo { display: block; }

        .artigos__cabeca {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 48px;
            padding-bottom: 26px;
            border-bottom: 1px solid var(--fio-ouro-fraco);
        }

        /* Botão-texto: o gap ABRE no hover, e é esse crescimento que faz a
           seta parecer avançar sem mover mais nada. */
        .artigos__ver {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 2px;
            border: 0;
            border-bottom: 1px solid rgba(171, 149, 94, .4);
            background: none;
            font-family: var(--sans);
            font-size: .6563rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            cursor: pointer;
            white-space: nowrap;
            transition: gap .35s var(--curva), border-color .35s var(--curva);
        }

        .artigos__ver:hover { gap: 16px; border-color: var(--ouro); }
        .artigos__ver:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

        .artigos__acoes {
            display: flex;
            justify-content: flex-end;
            margin-top: 26px;
        }

        .artigos__grade {
            display: grid;
            grid-template-columns: 1.55fr 1fr;
            gap: 26px;
            padding-top: 26px;
        }

        .artigos__pauta { display: flex; flex-direction: column; gap: 18px; }

        /* ── Destaque: a capa inteira é o card ── */
        .destaque {
            position: relative;
            display: block;
            overflow: hidden;
            color: inherit;
            transition: transform .5s var(--curva);
        }

        .destaque:hover { transform: translateY(-4px); }
        .destaque:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        .destaque__capa { position: relative; height: 392px; overflow: hidden; background-color: var(--color-bg-media); }

        .destaque__capa img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s var(--curva);
        }

        .destaque:hover .destaque__capa img { transform: scale(1.04); }

        /* O véu vive no ::after da capa, não numa div — assim ele não entra
           na contagem de filhos nem pode ser reordenado por engano. */
        /* ⚠️ A RAMPA É MAIS RÁPIDA QUE A DA REFERÊNCIA, e por medição. Lá ela
           é `0 em 30% → .94 no fim`; com ela, a linha de categoria — que é o
           elemento mais ALTO do corpo, por volta de 54% da capa — caía sobre
           um véu de ~.30 e media 3,32:1, reprovada em AA sobre a página clara
           do livro. Antecipar os stops põe o escuro onde o TEXTO está, sem
           tapar o terço de cima da foto, que é o que a direção queria
           mostrar. Acessibilidade é responsabilidade da implementação — o
           próprio handoff diz que a referência não tem voto nisso. */
        .destaque__capa::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                        rgba(13, 11, 10, 0) 18%,
                        rgba(13, 11, 10, .58) 42%,
                        rgba(13, 11, 10, .92) 64%,
                        rgba(13, 11, 10, .97) 100%);
        }

        .destaque__metricas { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
        .destaque__corpo { position: absolute; right: 0; bottom: 0; left: 0; padding: 30px 30px 28px; z-index: 2; }

        .destaque__cat {
            font-size: .5938rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            padding-bottom: 12px;
        }

        .destaque__titulo {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 2.25rem;
            line-height: 1.15;
            color: var(--papel);
            max-width: 32rem;
            text-wrap: pretty;
        }

        .destaque__resumo {
            margin-top: 12px;
            max-width: 28.75rem;
            font-size: .8438rem;
            line-height: 1.6;
            color: var(--tinta-suave);
        }

        .destaque__pe { display: flex; align-items: center; gap: 18px; padding-top: 20px; }
        .destaque__data { font-size: .7188rem; font-weight: 500; color: rgba(245, 241, 234, .5); letter-spacing: .04em; }
        .destaque__regua { height: 1px; flex: 1; background-color: rgba(171, 149, 94, .25); }

        .destaque__ler {
            font-size: .6563rem;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            white-space: nowrap;
        }

        /* ── Pauta: as duas linhas secundárias ──
           NÃO se chama `.linha`: essa classe já existe no herói (a máscara de
           revelação do título) e reusá-la faria duas coisas sem relação
           dividirem estilo. */
        .pauta {
            display: flex;
            gap: 16px;
            padding: 18px;
            border: 1px solid var(--fio-ouro-fraco);
            color: inherit;
            transition: border-color .4s var(--curva), background-color .4s var(--curva);
        }

        .pauta:hover { border-color: rgba(171, 149, 94, .42); background-color: rgba(171, 149, 94, .05); }
        .pauta:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        .pauta__capa { width: 78px; flex: none; overflow: hidden; background-color: var(--color-bg-media); }
        .pauta__capa img { width: 100%; height: 100%; object-fit: cover; }
        .pauta__corpo { flex: 1; min-width: 0; }

        .pauta__cat {
            font-size: .5625rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            padding-bottom: 9px;
        }

        .pauta__titulo {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.3125rem;
            line-height: 1.25;
            color: var(--papel);
        }

        .pauta__pe,
        .extra__pe { display: flex; align-items: center; gap: 14px; padding-top: 14px; flex-wrap: wrap; }
        .pauta__data,
        .extra__data { font-size: .6875rem; font-weight: 500; color: rgba(245, 241, 234, .5); }
        .vao { flex: 1; }

        /* ── Boletim: fecha a coluna da pauta ──
           Fio TRACEJADO de propósito: é o único elemento da seção que não
           leva a um artigo, e o tracejado o marca como campo a preencher sem
           precisar de um segundo tom. */
        .boletim { border: 1px dashed rgba(171, 149, 94, .28); padding: 18px 20px; }

        .boletim__titulo {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.25rem;
            line-height: 1.3;
            color: var(--papel);
        }

        .boletim__forma { display: flex; gap: 8px; padding-top: 14px; }

        .boletim__campo {
            flex: 1;
            min-width: 0;
            padding: 11px 12px;
            border: 1px solid rgba(171, 149, 94, .28);
            background-color: rgba(245, 241, 234, .04);
            font-family: var(--sans);
            font-size: .75rem;
            color: var(--papel);
        }

        .boletim__campo::placeholder { color: rgba(245, 241, 234, .42); }
        .boletim__campo:focus { outline: none; border-color: var(--ouro); }
        .boletim__campo:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        .boletim__ok {
            padding: 0 16px;
            border: 0;
            background-color: var(--ouro);
            font-family: var(--sans);
            font-size: .6563rem;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--preto);
            cursor: pointer;
        }

        .boletim__ok:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

        /* ── Métricas ──
           ⚠️ SEM `border-radius`. O design trazia pílula (999px) e a marca é
           de linhas retas — mesma decisão já registrada no botão do WhatsApp.
           O `backdrop-filter` fica só no `.selo`, e só no desktop. */
        .metrica,
        .curtir {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--sans);
            font-size: .6875rem;
            font-weight: 600;
            color: rgba(245, 241, 234, .5);
        }

        .metrica svg,
        .curtir svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }

        .curtir {
            padding: 6px 2px;
            min-height: 44px;             /* alvo de toque */
            border: 0;
            background: none;
            cursor: pointer;
            transition: color .3s var(--curva);
        }

        .curtir:hover { color: var(--ouro-claro); }
        .curtir:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
        .curtir[aria-pressed="true"] { color: var(--ouro-claro); }
        .curtir[aria-pressed="true"] svg { fill: var(--ouro-claro); }

        /* A batida do coração ao curtir. Reinicia por remoção+reflow da
           classe (ver o script), senão o segundo clique não anima. */
        @keyframes duBatida {
            0%   { transform: scale(1); }
            45%  { transform: scale(1.35); }
            100% { transform: scale(1); }
        }

        .curtir.batendo svg { animation: duBatida .45s var(--curva); }

        /* A pílula do destaque vira SELO reto — o fundo existe porque ali
           atrás há foto, não chapa. */
        /* O selo mora no ALTO da capa, onde o véu ainda é zero — então ele
           precisa carregar o próprio contraste. A referência usa .62 e isso
           deu 2,79:1 sobre a página clara do livro; .86 resolve e continua
           deixando a foto transparecer, que é o ponto do vidro. */
        .selo {
            padding: 8px 12px;
            border: 1px solid rgba(171, 149, 94, .28);
            background-color: rgba(13, 11, 10, .86);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: rgba(245, 241, 234, .88);
        }

        .selo.curtir { min-height: 34px; }
        .selo:hover { border-color: var(--ouro); }

        /* ── Grade expandida ── */
        .artigos__extra {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            padding-top: 26px;
            margin-top: 26px;
            border-top: 1px solid var(--fio-ouro-fraco);
        }

        /* Fechada, ela sai do LAYOUT e do foco. `display:none` e não altura
           zero: o handoff pede sem animação de altura (evita salto), e altura
           zero deixaria os links tabuláveis dentro de uma caixa invisível. */
        .artigos[data-aberto="false"] .artigos__expansao,
        .artigos__expansao[hidden] { display: none; }

        .artigos__acervo {
            display: flex;
            justify-content: center;
            gap: 12px;
            width: fit-content;
            margin: 24px auto 0;
            padding: 10px 2px 8px;
            border-bottom: 1px solid rgba(171, 149, 94, .4);
            font-size: .6563rem;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--ouro-claro);
        }

        .artigos__acervo:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

        .extra { display: block; color: inherit; transition: transform .45s var(--curva); }
        .extra:hover { transform: translateY(-5px); }
        .extra:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
        .extra__capa { height: 150px; overflow: hidden; background-color: var(--color-bg-media); }
        .extra__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
        .extra:hover .extra__capa img { transform: scale(1.04); }

        .extra__cat {
            font-size: .5625rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ouro-claro);
            padding: 16px 0 9px;
        }

        .extra__titulo {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.375rem;
            line-height: 1.25;
            color: var(--papel);
        }

        /* ── Placeholder de capa ──
           Os três artigos da grade expandida não têm foto ainda, e a decisão
           foi NÃO gerar imagem só para o mockup (custo de crédito sem
           retorno). A trama listrada é o placeholder do próprio handoff: ela
           se lê como "falta a foto" à primeira vista, e ninguém a confunde
           com arte final. Sai quando as fotos reais chegarem — e a `.legenda`
           junto. */
        .capa-vazia {
            position: relative;
            background-color: var(--color-bg-media);
            background-image: repeating-linear-gradient(135deg,
                              rgba(171, 149, 94, .1) 0 2px, transparent 2px 10px);
        }

        .capa-vazia__legenda {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: .5313rem;
            font-weight: 500;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(210, 188, 139, .62);
        }

        /* Carrossel e pontos pertencem somente à composição mobile legada. */
        .carrossel,
        .pontos { display: none; }

        /* ==============================================================
           5 · QUEM SOMOS — do design "Bloco Quem Somos", alternativa 1b
           (editorial assimétrico: texto à esquerda, a dupla em destaque)

           A declaração centrada deu lugar a uma composição: o texto ancora a
           esquerda e duas peças RECORTADAS (a dupla e a balança) flutuam à
           direita, sobre o próprio fundo da faixa. É o único bloco da página
           com figura humana — e o único que precisava de uma.

           O degradê do arco de cor continua sendo o fundo: esta é a faixa
           onde o preto vira marrom, e isso não muda por causa do layout.
           ============================================================== */
        .sobre {
            position: relative;
            /* `hidden` cria um contêiner de rolagem e neutraliza os dois
               elementos sticky da narrativa. `clip` conserva o recorte do
               degradê sem roubar a referência de scroll. */
            overflow: clip;
            /* v7 · O degradê desce mais: o marrom chegava aos 62% e o terço
               final da seção já era chapado. Levando o ponto de chegada a 82%,
               a virada acompanha o bloco quase até o fim e o marrom encosta na
               emenda com o divisor em vez de esperá-la parado.

               ⚠️ O 100% continua sendo marrom PURO (é onde a rampa termina), e
               isso é o que mantém invisível a lâmina de 1px do `.sobre` que
               fecha a costura de subpixel. Terminar a rampa antes do fim é
               seguro; terminar em outra cor, não. */
            background: linear-gradient(180deg, var(--preto) 0%, var(--marrom-campo) 82%);
        }

        /* Anel de ouro atrás da dupla. O design o fazia girar em 46s — mas um
           círculo perfeito girando é visualmente IDÊNTICO a um parado: a
           animação custava uma camada no compositor e não entregava
           movimento nenhum. Fica estático. */
        /* v5 · Agora medido contra a CAIXA DA ARTE, não contra a seção. Os
           valores saíram da medição do desktop, para ele não mudar: o anel
           estava a −2px do topo da arte e ocupava 96% da largura dela. */
        .sobre__anel {
            position: absolute;
            top: 0;
            left: 11%;
            width: 96%;
            aspect-ratio: 1;
            border: 1px solid rgba(171, 149, 94, .28);
            border-radius: 50%;   /* exceção: é um anel, não uma peça de layout */
            pointer-events: none;
        }

        .sobre__grade {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(2rem, 4vw, 3.5rem);
            align-items: center;
        }

        .sobre__titulo {
            margin-top: 24px;
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(1.75rem, 3.6vw, 2.75rem);
            line-height: 1.12;
            letter-spacing: -.02em;
            color: var(--papel);
        }

        .sobre__titulo em { font-style: italic; color: var(--ouro-claro); }

        .sobre__texto {
            margin-top: 24px;
            max-width: 30rem;
            font-size: .9063rem;
            line-height: 1.85;
            color: rgba(245, 241, 234, .72);
        }

        /* ── Os três números ──
           Grade de fio: `gap: 1px` sobre um fundo de fio é o que desenha as
           divisórias, sem uma borda por célula. */
        .numeros-grade {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            margin-top: 30px;
            background-color: rgba(171, 149, 94, .22);
        }

        /* ⚠️ MESMA INVERSÃO, pelo mesmo motivo. A célula era preto a 55%
           sobre o marrom da marca, e isso lhe dava 1,54 de separação do fundo.
           Sobre o campo novo o mesmo preto entrega 1,18 — a grade quase some,
           e some junto com ela a única coisa que fazia os três números lerem
           como um bloco.

           Invertida para PAPEL a 10%, a separação volta a 1,34 e o ouro dos
           números fica em 6,14 sobre a célula. Preto sobre campo escuro não
           tem para onde ir; papel tem. */
        .num {
            padding: 18px 14px;
            background-color: var(--superficie-elevada);
        }

        .num__valor {
            display: block;
            font-family: var(--serif);
            font-weight: 400;
            font-size: 2rem;
            line-height: 1;
            color: var(--ouro-claro);
        }

        .num__rotulo {
            display: block;
            margin-top: 6px;
            font-size: .625rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            line-height: 1.4;
            /* .62 dava 3,95:1 sobre a célula clara — o rótulo dos números é
               texto pequeno e não pode ficar abaixo de AA. */
            color: rgba(245, 241, 234, .8);
        }

        .sobre__acao { margin-top: 30px; }

        /* ── A arte ──
           A coluna reserva a altura; as duas peças são absolutas dentro dela
           e ancoradas no PÉ, para se apoiarem na mesma linha de base. */
        .sobre__arte {
            position: relative;
            min-height: clamp(24rem, 40vw, 34rem);
        }

        .sobre__dupla,
        .sobre__objetos {
            position: absolute;
            bottom: 0;
            height: auto;
        }

        .sobre__dupla {
            right: 0;
            z-index: 2;
            width: min(88%, 26rem);
        }

        /* A balança avança para a esquerda e passa por TRÁS da dupla: é a
           sobreposição que dá profundidade e evita duas peças enfileiradas.
           ⚠️ A ordem se faz com z-index POSITIVO (1 contra 2), nunca com -1:
           `.sobre` tem `position: relative` sem z-index, então não abre
           contexto de empilhamento, e um -1 aqui joga a peça para trás do
           FUNDO da seção — ela some por completo (aconteceu). */
        .sobre__objetos {
            left: 0;
            z-index: 1;
            width: min(42%, 11rem);
        }

        /* ==============================================================
           6 · CONTATO — do design "Contato - Mockups", direção 1c
           ("Dossiê"), aprovada.

           ── A TRADUÇÃO ───────────────────────────────────────────────────
           #c9a86a → var(--ouro) / var(--ouro-claro)  ·  #4a352a (seção) →
           var(--marrom-campo)  ·  #2b1e18 (painel) → var(--superficie-elevada)  ·
           #efe7dc e #f4ede4 → var(--papel)  ·  Cormorant GARAMOND →
           Cormorant INFANT  ·  Jost → Montserrat.

           ⚠️ IBM PLEX MONO NÃO VEIO. A identidade tem duas famílias e ponto;
           adotar uma mono é mexer em identidade congelada. Esta decisão já
           foi tomada uma vez neste arquivo — o cabeçalho registra a JetBrains
           Mono do design anterior virando "Montserrat com letterspacing", e é
           exatamente esse tratamento que as etiquetas usam aqui: peso 600,
           corpo pequeno e `letter-spacing` largo. O que a mono comunicava
           (voz técnica, de dossiê) sobrevive; a família, não.

           ⚠️ O PONTO do "sigiloso" reusa o `.pulso` que já existe no rodapé —
           mesma forma, mesma exceção de raio já nomeada, e o mesmo
           significado ("tem alguém do outro lado"). Um segundo ponto pulsante
           com CSS próprio seria a mesma peça escrita duas vezes.

           ── CONTEÚDO QUE É AFIRMAÇÃO, NÃO DESIGN ─────────────────────────
           O design trouxe "ATUAÇÃO · Nacional" e um telefone
           "(61) 9 0000-0000". Os dois são afirmação comercial e não se
           inventam: o telefone ficou como o WhatsApp que o site já usa, e o
           par RETORNO/ATUAÇÃO está na tela para a Duae confirmar ou trocar.
           ============================================================== */
        .contato { background-color: var(--marrom-campo); }

        /* ── A tarja de topo ──
           Duas etiquetas nas pontas e um fio que as costura. É o que dá ao
           bloco a leitura de DOSSIÊ (uma folha com cabeçalho) em vez de
           "mais uma seção com título". */
        .contato__tarja {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        /* ⚠️ `flex`, não texto corrido: o `.losango` é `display: block` (ele
           precisa disso para ter tamanho), e num parágrafo comum isso o joga
           para uma linha só dele, com o rótulo embaixo. O mesmo motivo está
           registrado no `.eyebrow` lá em cima — é a segunda vez que esta
           armadilha aparece no arquivo. */
        .contato__marca,
        .contato__selo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .625rem;
            font-weight: 600;
            letter-spacing: .3em;
            text-transform: uppercase;
        }

        .contato__marca { color: var(--ouro-claro); }
        .contato__selo { letter-spacing: .24em; color: rgba(245, 241, 234, .62); }

        /* O fio SE DESENHA da esquerda para a direita quando o bloco entra.
           Ele é a assinatura de motion desta seção: um gesto só, e no
           elemento que estrutura a leitura. */
        .contato__fio {
            height: 1px;
            margin: 20px 0 46px;
            background-color: rgba(171, 149, 94, .28);
            transform-origin: left;
        }

        .contato__grade {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
        }

        .contato__titulo {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            line-height: .98;
            letter-spacing: -.015em;
            color: var(--papel);
        }

        .contato__titulo em { font-style: italic; font-weight: 300; color: var(--ouro-claro); }

        /* O cursor piscando depois do título: é o que diz "aqui se escreve",
           antes de o olho chegar ao formulário. */
        .contato__cursor {
            display: inline-block;
            width: 14px;
            height: 4px;
            margin-left: 8px;
            vertical-align: baseline;
            background-color: var(--ouro);
        }

        .contato__lead {
            margin-top: 34px;
            max-width: 25rem;
            font-size: .9375rem;
            font-weight: 300;
            line-height: 1.8;
            color: rgba(245, 241, 234, .72);
            text-wrap: pretty;
        }

        .contato__numeros {
            display: grid;
            grid-template-columns: repeat(2, max-content);
            gap: 34px 60px;
            margin-top: 50px;
        }

        .contato__rotulo {
            font-size: .625rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(245, 241, 234, .72);
        }

        .contato__valor {
            margin-top: 8px;
            font-family: var(--serif);
            font-weight: 300;
            font-size: 2.125rem;
            line-height: 1;
            color: var(--ouro-claro);
        }

        /* ── O painel do formulário ──
           Mais escuro que a faixa, com moldura de fio. É a resposta à queixa
           de "formulário apagado": ele deixa de ser texto sobre marrom e
           passa a ser uma PEÇA pousada sobre a faixa. */
        .form {
            padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.375rem);
            border: 1px solid rgba(245, 241, 234, .12);
            /* ⚠️ O PAINEL FICOU MAIS CLARO QUE A FAIXA — inversão obrigatória,
               não gosto. Com a faixa em 48% da rampa não SOBRA escuro
               suficiente abaixo dela: medida em vários degraus, a melhor
               separação descendo é 1,18, contra os 1,41 da versão anterior.
               Subindo, volta a ~1,34 — e o painel lê como peça POUSADA sobre
               o campo, em vez de recorte cavado nele.

               O design 1c fazia o painel mais escuro porque a seção dele era
               um marrom médio. Mudada a faixa, a relação que ele descreve
               deixa de ser construível; preserva-se a INTENÇÃO (o formulário
               é peça distinta, com moldura de ouro), não o sentido do degrau.

               É a MESMA superfície das células de `.numeros-grade` — véu de
               papel a 10% sobre o campo. Uma superfície só para as duas peças
               elevadas da página: se um dia o campo mudar de novo, as duas
               acompanham juntas, porque nenhuma das duas tem cor própria. */
            background-color: var(--superficie-elevada);
        }

        .form__cabeca {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 28px;
        }

        .form__nome,
        .form__sigilo {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: .5938rem;
            font-weight: 600;
            letter-spacing: .26em;
            text-transform: uppercase;
        }

        .form__nome { color: rgba(245, 241, 234, .7); }
        .form__sigilo { letter-spacing: .2em; color: var(--ouro-claro); }

        .form__campos { display: flex; flex-direction: column; gap: 14px; }

        /* ⚠️ `fieldset` traz borda e padding do AGENTE DE USUÁRIO, e o reset
           do topo desta folha zera `margin`/`padding`/`radius` mas NÃO
           `border` — então o grupo de rádios apareceria dentro de uma moldura
           cinza que ninguém escreveu. É `fieldset` e não `div` porque os três
           rádios são UMA pergunta, e o leitor de tela precisa da `legend`
           para anunciá-la antes das opções. */
        .form__setor { border: 0; margin-top: 6px; }

        /* ── Campo em CAIXA, com a etiqueta dentro ──
           O design abandonou a linha-só da versão anterior. A etiqueta mora
           no alto da caixa e o texto digitado embaixo dela — por isso o
           `padding-top` generoso: é ele que abre o lugar da etiqueta, e
           reduzi-lo faz o rótulo sentar em cima do que a pessoa escreve. */
        .campo {
            position: relative;
            display: block;
        }

        .campo__entrada {
            width: 100%;
            padding: 26px 16px 12px;
            border: 1px solid rgba(245, 241, 234, .12);
            background-color: rgba(245, 241, 234, .035);
            font-family: var(--sans);
            font-weight: 300;
            font-size: 1.0625rem;
            line-height: 1.6;
            color: var(--papel);
            transition: border-color .4s var(--curva), background-color .4s var(--curva);
        }

        .campo__entrada:focus {
            outline: none;
            border-color: var(--ouro);
            background-color: rgba(171, 149, 94, .07);
        }

        .campo__entrada:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
        .campo__entrada::placeholder { color: rgba(245, 241, 234, .7); }
        textarea.campo__entrada { resize: vertical; min-height: 7rem; }

        .campo__nome {
            position: absolute;
            top: 11px;
            left: 16px;
            font-size: .5625rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(245, 241, 234, .7);
            pointer-events: none;
            transition: color .35s var(--curva);
        }

        .campo__entrada:focus + .campo__nome { color: var(--ouro-claro); }

        .form__pergunta {
            margin-bottom: 11px;
            font-size: .5625rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(245, 241, 234, .7);
        }

        .chips { display: flex; flex-wrap: wrap; gap: 8px; }
        .chip__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }

        .chip {
            display: block;
            padding: 11px 17px;
            border: 1px solid rgba(245, 241, 234, .18);
            font-size: .8125rem;
            color: rgba(245, 241, 234, .68);
            cursor: pointer;
            transition: border-color .35s var(--curva), color .35s var(--curva),
                        background-color .35s var(--curva);
        }

        .chip:hover { border-color: rgba(171, 149, 94, .55); color: var(--papel); }

        .chip__radio:checked + .chip {
            background-color: var(--ouro);
            border-color: var(--ouro);
            font-weight: 500;
            color: var(--preto);
        }

        .chip__radio:focus-visible + .chip { outline: 2px solid var(--ouro); outline-offset: 3px; }

        /* ── Enviar ──
           Ouro cheio, e a lâmina branca sobe de baixo no hover. A seta anda
           7px: é a única peça da página que se move ao ser mirada, e isso é
           de propósito — ela marca o único ponto de conversão. */
        .enviar {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: 100%;
            margin-top: 14px;
            padding: 22px;
            border: 0;
            background-color: var(--ouro);
            font-family: var(--sans);
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--preto);
            cursor: pointer;
        }

        .enviar > * { position: relative; z-index: 1; }
        .enviar:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; }

        .enviar::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--branco);
            opacity: .16;
            transform: translateY(101%);
            transition: transform .5s var(--curva);
        }

        .enviar:hover::before,
        .enviar:focus-visible::before { transform: translateY(0); }

        .enviar__seta { display: inline-block; transition: transform .45s var(--curva); }
        .enviar:hover .enviar__seta { transform: translateX(7px); }

        .form__direto {
            text-align: center;
            font-size: .7813rem;
            font-weight: 300;
            color: rgba(245, 241, 234, .7);
        }

        .form__direto a {
            color: var(--ouro-claro);
            border-bottom: 1px solid rgba(171, 149, 94, .4);
        }

        .form__direto a:hover { border-bottom-color: var(--ouro-claro); }

        /* ==============================================================
           RODAPÉ — preto chapado

           O design trazia um degradê marrom→preto, que criava uma emenda
           lavada no meio do fecho. Aqui a troca é seca: o contato fecha em
           marrom e o rodapé assenta em preto.

           Agora contato e rodapé são cores DIFERENTES (marrom e preto), então
           a própria troca articula a dobra — não é preciso costura nenhuma
           entre os dois.
           ============================================================== */
        /* O fecho do arco: o marrom volta ao preto dentro do próprio rodapé,
           completando em 78% — sem corte na emenda com o contato. */
        /* ── v6.3 · O DEGRADÊ SOBE PARA A EMENDA ──
           Era `marrom 0% → preto 78%`: a virada acontecia lá embaixo, quase no
           fim da página, e o rodapé inteiro ficava sendo uma longa transição.
           Duas coisas ruins nisso — o preto (que é a base da página) só
           chegava no rodapé por acidente, e o degradê, sendo longo e lento,
           não marcava nada: ele atravessava o conteúdo do rodapé em vez de
           acontecer entre os blocos.

           Agora ele se resolve em 26%: o marrom encosta na emenda com o
           divisor, vira preto logo abaixo dela, e o resto do rodapé é preto
           chapado. O degradê passa a ser o que devia — a costura entre dois
           blocos —, e não um fundo que muda de cor debaixo do texto.

           ⚠️ O `0%` continua sendo marrom exato, e isso NÃO é detalhe: a
           lâmina de 1px de marrom que fecha a costura de subpixel
           (`.rodape { box-shadow: 0 -1px 0 var(--marrom) }`) só é invisível
           porque a borda de cima do rodapé é marrom. Começar o degradê já
           escurecido reabriria o fio que a v6 veio consertar. */
        /* v7 · Segunda passada, para ver na tela: o degradê volta a ser LONGO
           (26% → 72%) e o fim deixa de ser preto — passa a ser o mesmo
           `--marrom-escuro` do painel do formulário. Duas consequências que
           só a captura mostra: a página inteira deixa de terminar em preto,
           e o rodapé passa a rimar com o formulário em vez de com o herói.
           É teste visual, não decisão fechada. */
        .rodape {
            padding: clamp(3.25rem, 6vw, 4.5rem) var(--respiro-x) 2rem;
            background: linear-gradient(180deg,
                        var(--marrom-campo) 0%,
                        var(--marrom-profundo) 72%);
        }

        .rodape__topo {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2.25rem;
            flex-wrap: wrap;
        }

        /* ⚠️ v7 · ESTA MEDIDA SAIU DE UMA RÉGUA — e sair dela é a decisão.
           Os três títulos de display da página (quem somos, contato e esta
           marca) usavam o MESMO `clamp(1.75rem, 3.6vw, 2.75rem)`, e o
           comentário do `.contato__titulo` registra o porquê: "hierarquia vem
           do lugar, não do corpo".

           A marca do rodapé sai da régua a pedido, e o argumento a favor é
           que ela não é um TÍTULO de seção — é assinatura de fecho, e o lugar
           dela (o pé da página, depois do último divisor) já diz isso sem
           precisar do mesmo corpo de um `<h2>`. Os outros dois continuam
           iguais entre si; a régua não foi abandonada, ganhou uma exceção
           nomeada. Se um dia parecer arbitrário, é este comentário que
           explica que não foi descuido. */
        .rodape__marca {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(1.375rem, 2.5vw, 1.875rem);
            line-height: 1.1;
            color: var(--papel);
        }

        .rodape__marca em { font-style: italic; color: var(--ouro-claro); }

        /* ── v7 · O perfil do Instagram ──
           ⚠️ O `rx="5"` do quadrado é EXCEÇÃO deliberada à regra de raio zero
           da identidade, e é a única aceitável: aquele contorno arredondado é
           a marca do Instagram, não uma peça de layout nossa. Desenhá-lo com
           canto reto não seria coerência de marca — seria descaracterizar a
           marca de terceiro, e o ícone deixaria de ser reconhecível, que é a
           única coisa que ele precisa fazer.

           Desenhado à mão em SVG, como os ícones da seção de atuação: o
           projeto não carrega biblioteca de ícone, e a CSP não a carregaria. */
        .rodape__social {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-top: 16px;
            font-size: .8125rem;
            font-weight: 500;
            color: rgba(245, 241, 234, .72);
            transition: color .3s var(--curva);
        }

        .rodape__social:hover,
        .rodape__social:focus-visible { color: var(--ouro-claro); }
        .rodape__social:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

        .rodape__social-icone {
            flex: none;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
        }

        /* O ponto da câmera é cheio — no ícone original ele é um disco, e
           vazado ele lê como um terceiro círculo solto. */
        .rodape__social-icone .cheio { fill: currentColor; stroke: none; }

        .rodape__desc {
            margin-top: 12px;
            max-width: 22rem;
            font-size: .8125rem;
            line-height: 1.7;
            color: rgba(245, 241, 234, .62);
        }

        /* ⚠️ RAIO ZERO, não pílula. O design trazia `border-radius: 999px`,
           mas "linhas retas / radius 0" é regra CONGELADA da identidade
           (AGENTS.md §Identidade visual). Mockup manda na direção, não na
           identidade — o resto do botão veio igual. */
        .rodape__zap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 26px;
            border: 1px solid var(--fio-ouro);
            font-size: .8125rem;
            font-weight: 600;
            color: var(--papel);
            transition: background-color .3s var(--curva), color .3s var(--curva),
                        border-color .3s var(--curva), transform .3s var(--curva);
        }

        .rodape__zap:hover,
        .rodape__zap:focus-visible {
            background-color: var(--ouro);
            color: var(--preto);
            border-color: var(--ouro);
            transform: translateY(-2px);
        }

        /* O ponto pulsa porque SIGNIFICA "tem alguém do outro lado" — é o
           único loop da página que carrega informação. */
        .pulso {
            width: 6px;
            height: 6px;
            flex-shrink: 0;
            display: block;
            border-radius: 50%; /* exceção: é um ponto, não uma peça de layout */
            background-color: var(--ouro);
        }

        .rodape__pe {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            flex-wrap: wrap;
            margin-top: 34px;
            padding-top: 18px;
            border-top: 1px solid rgba(245, 241, 234, .12);
        }

        .rodape__links { display: flex; gap: 24px; flex-wrap: wrap; }

        .rodape__link {
            font-size: .7813rem;
            color: rgba(245, 241, 234, .6);
            transition: color .25s var(--curva);
        }

        .rodape__link:hover { color: var(--ouro-claro); }

        .rodape__creditos {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .rodape__copy { font-size: .7188rem; color: rgba(245, 241, 234, .62); }

        /* ── Assinatura da Timbre Digital ──
           "Desenvolvido por", não "criado por": no rodapé de uma consultoria
           que ASSINA artigos técnicos, "criado por" ao lado do nome de outra
           empresa deixa ambíguo quem escreve o conteúdo. O monograma é
           decorativo (`alt` vazio) — o nome já vem em texto ao lado, e
           repetir faria o leitor de tela dizer "Timbre Digital" duas vezes.
           Fica um degrau abaixo do copyright na hierarquia: mesma linha,
           separada por um fio, e só acende no hover. */
        .assinatura {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding-left: 1rem;
            border-left: 1px solid rgba(245, 241, 234, .16);
            font-size: .7188rem;
            color: rgba(245, 241, 234, .62);
            transition: color .25s var(--curva);
        }

        .assinatura__marca { width: 18px; height: 18px; opacity: .7; transition: opacity .25s var(--curva); }
        .assinatura__nome { font-weight: 600; }

        .assinatura:hover,
        .assinatura:focus-visible { color: var(--ouro-claro); }
        .assinatura:hover .assinatura__marca { opacity: 1; }

        /* ==============================================================
           MOTION — quatro linguagens, um gesto dominante por seção.
           O herói entra numa sequência orquestrada. Abaixo da dobra, o JS
           ativa um reveal vivo somente quando IntersectionObserver existe;
           sem JS, todo o conteúdo permanece visível.
           ============================================================== */
        @keyframes duRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
        @keyframes duFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes duMask { from { transform: translateY(105%); } to { transform: translateY(0); } }
        @keyframes duGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        /* Volta em uso: preenche as barras do rotativo e a barra do loop do
           vídeo no topo do herói. */
        @keyframes duGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

        @media (prefers-reduced-motion: no-preference) {
            /* — Entrada do herói (load) — */
            .a-fade { animation: duFade 1.2s both; }
            .a-mask { display: block; animation: duMask 1.6s var(--motion-ease) both; }
            .a-rise { animation: duRise 1.5s var(--motion-ease) both; }

            /* Dois loops, e cada um carrega informação: o ponto diz "tem
               alguém do outro lado" e a varredura puxa o olho de volta ao
               único ponto de conversão da página. Decorativo cansa; estes
               trabalham. */
            .pulso { animation: duPulso 2.6s ease-in-out infinite; }

            /* O cursor do título do contato. Entra aqui, junto dos outros
               loops, porque `prefers-reduced-motion` tem de desligá-lo: um
               retângulo piscando sem parar é exatamente o que incomoda quem
               pediu menos movimento. Parado ele continua legível — vira um
               traço de ouro depois do título. */
            .contato__cursor { animation: duCursor 1.1s steps(1) infinite; }

            .enviar__brilho { display: block; animation: duVarredura 4.2s ease-in-out infinite; }

            /* O fio de margem se DESENHA junto com o parágrafo — mesma batida
               (d4), para os dois lerem como um gesto só e não como dois. É a
               linguagem do "fio" que saiu com a régua e voltou fazendo
               trabalho de verdade: separar dois textos, não decorar uma
               linha vazia. O atraso vai explícito porque `animation-delay` do
               elemento não alcança o pseudo. */
            .hero__lead::before {
                animation: duGrowY .9s cubic-bezier(.2, .7, .3, 1) .40s both;
            }

            .d1 { animation-delay: .05s; }
            .d2 { animation-delay: .17s; }
            .d3 { animation-delay: .30s; }
            .d4 { animation-delay: .40s; }
            .d5 { animation-delay: .50s; }
            .d6 { animation-delay: .60s; }
            .d7 { animation-delay: .70s; }
            .d8 { animation-delay: .76s; }
            .d9 { animation-delay: .82s; }
            .d10 { animation-delay: .88s; }

            /* Entrada longa; saída curta e sem stagger. */
            html.motion-ready :is(.r-sobe, .r-esq, .r-dir, .r-zoom, .r-fade) {
                opacity: 0;
                transition: opacity var(--motion-exit) ease-in,
                            transform var(--motion-exit) ease-in;
            }
            html.motion-ready .r-sobe { transform: translateY(30px); }
            html.motion-ready .r-esq { transform: translateX(-42px); }
            html.motion-ready .r-dir { transform: translateX(42px); }
            html.motion-ready .r-zoom { transform: scale(.94); }

            html.motion-ready :is(.r-sobe, .r-esq, .r-dir, .r-zoom, .r-fade).is-visivel {
                opacity: 1;
                transform: none;
                transition: opacity var(--motion-enter) var(--motion-ease),
                            transform var(--motion-enter) var(--motion-ease);
            }

            /* A caixa continua mensurável pelo observer: a cortina só existe
               no keyframe de entrada, nunca no estado escondido. */
            html.motion-ready .r-cortina {
                opacity: 0;
                transition: opacity var(--motion-exit) ease-in;
            }
            html.motion-ready .r-cortina.is-visivel {
                opacity: 1;
                animation: duCortina var(--motion-piece) var(--motion-ease) both;
            }

            html.motion-ready .r-cascata > * {
                opacity: 0;
                transform: translateY(28px);
                transition: opacity var(--motion-exit) ease-in,
                            transform var(--motion-exit) ease-in;
            }
            html.motion-ready .r-cascata--assenta > * {
                transform: translateY(-34px) rotate(-.45deg);
            }
            html.motion-ready .r-cascata.is-visivel > * {
                opacity: 1;
                transform: none;
                transition: opacity var(--motion-enter) var(--motion-ease),
                            transform var(--motion-enter) var(--motion-ease);
            }
            html.motion-ready .r-cascata.is-visivel > :nth-child(2) { transition-delay: var(--motion-stagger); }
            html.motion-ready .r-cascata.is-visivel > :nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
            html.motion-ready .r-cascata.is-visivel > :nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
            html.motion-ready .r-cascata.is-visivel > :nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }

            html.motion-ready .r-fio {
                opacity: 0;
                transform: scaleX(0);
                transform-origin: left center;
                transition: opacity var(--motion-exit) ease-in,
                            transform var(--motion-exit) ease-in;
            }
            html.motion-ready .r-fio.is-visivel {
                opacity: 1;
                transform: scaleX(1);
                transition: opacity var(--motion-line) var(--motion-ease),
                            transform var(--motion-line) var(--motion-ease);
            }

            html.motion-ready .r-losango {
                opacity: 0;
                transform: rotate(-45deg) scale(.3);
                transition: opacity var(--motion-exit) ease-in,
                            transform var(--motion-exit) ease-in;
            }
            html.motion-ready .r-losango.is-visivel {
                opacity: 1;
                transform: rotate(45deg) scale(1);
                transition: opacity var(--motion-enter) var(--motion-ease),
                            transform var(--motion-enter) var(--motion-ease);
            }

            @media (max-width: 700px) {
                html.motion-ready :is(.r-esq, .r-dir) { transform: translateY(24px); }
                html.motion-ready :is(.r-esq, .r-dir).is-visivel { transform: none; }
            }
        }

        @keyframes duCortina { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

        /* O cursor do título. `steps(1)` — cursor pisca, não desvanece. */
        @keyframes duCursor { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
        @keyframes duPulso { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.18); } }
        @keyframes duVarredura { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

        /* Sem permissão para movimento, a varredura simplesmente não existe —
           e o ponto do WhatsApp fica aceso e parado, que continua legível. */
        .enviar__brilho { display: none; }

        /* ==============================================================
           VÍDEO — quando NÃO tocar, o pôster assume
           No celular quem está na rua paga a banda; em reduced-motion,
           quem pediu menos movimento fica com a foto.
           ============================================================== */
        @media (prefers-reduced-motion: reduce) {
            .hero__midia { display: none; }
            .hero__foto { display: block; }
        }

        /* ==============================================================
           RESPONSIVO
           ============================================================== */
        @media (max-width: 900px) {
            /* v4 · O logo encolhe, logo o recuo de âncora encolhe junto.
               Precisa de SELETOR: custom property solta dentro de `@media`
               não é CSS válido e o navegador descarta em silêncio.

               ⚠️ v6 · Quem manda na altura aqui deixou de ser o LOGO: o botão
               do menu tem 44px (piso de alvo de toque) contra 42/34px do
               logo, então a conta passou a ser 44 + 12 + 12 + 1 = 69, igual
               nos dois breakpoints de celular. Medido depois de aplicado, não
               deduzido — a primeira tentativa manteve os 67/59 antigos e o
               recuo de âncora ficou 10px curto. É exatamente o tipo de
               defasagem que este token existe para evitar, e que só aparece
               comparando a barra RENDERIZADA com o valor declarado. */
            :root { --topo-h: 69px; }      /* 44 (hambúrguer) + 12 + 12 + 1 */

            .topo__logo { height: 42px; }

            /* ══ v6 · MENU DO CELULAR ══════════════════════════════════
               O checkbox fica visualmente escondido mas ALCANÇÁVEL pelo
               teclado (1px + opacity, nunca `display:none`, que o tiraria da
               ordem de foco e deixaria o menu inoperável sem toque). */
            .topo__gatilho {
                display: block;
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
                margin: 0;
            }

            /* O CTA por extenso competia com a marca entre 561 e 900px. No
               celular, contato e Instagram viram alvos quadrados antes do
               menu; a logo conserva sua proporção em todas as larguras. */
            .topo__grade { justify-content: flex-start; gap: .5rem; }
            .topo__atalhos { margin-left: auto; gap: .25rem; }
            .topo__atalho {
                width: 40px;
                height: 40px;
                color: var(--ouro-claro);
            }
            .topo__atalho--whatsapp { display: inline-flex; }
            .topo__cta { display: none; }

            .topo__hamburguer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 5px;
                width: 44px;               /* alvo de toque: 44px é o piso */
                height: 44px;
                padding: 0 10px;
                border: 1px solid var(--fio-ouro);
                cursor: pointer;
            }

            .topo__hamburguer span {
                display: block;
                height: 1px;
                background-color: var(--ouro-claro);
                transition: transform .3s var(--curva), opacity .2s var(--curva);
            }

            /* O foco do teclado vive no input invisível, então o anel tem de
               aparecer no BOTÃO — senão quem navega por Tab não vê onde está. */
            .topo__gatilho:focus-visible + .topo__hamburguer {
                outline: 2px solid var(--ouro);
                outline-offset: 3px;
            }

            /* Aberto, as três barras viram X. O `:has()` no topo é o que
               permite o painel ser IRMÃO do checkbox sem JS. */
            .topo:has(.topo__gatilho:checked) .topo__hamburguer span:nth-child(1) {
                transform: translateY(6px) rotate(45deg);
            }
            .topo:has(.topo__gatilho:checked) .topo__hamburguer span:nth-child(2) { opacity: 0; }
            .topo:has(.topo__gatilho:checked) .topo__hamburguer span:nth-child(3) {
                transform: translateY(-6px) rotate(-45deg);
            }

            /* O painel desce por baixo da barra. `position: absolute` dentro
               do `.topo` (que é sticky) o mantém colado nela ao rolar, e o
               `left/right: 0` o faz sangrar de ponta a ponta — o respiro
               lateral vem do padding, não de uma largura calculada. */
            .topo__nav {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                gap: 0;
                padding: 0 var(--respiro-x);
                border-bottom: 1px solid var(--fio-escuro);
                background-color: var(--preto);
                /* Fechado: altura zero e invisível ao teclado. `max-height`
                   anima; `visibility` é o que impede o Tab de entrar num menu
                   fechado — só `max-height: 0` deixaria os links focáveis e o
                   foco sumiria dentro de uma caixa de altura zero. */
                max-height: 0;
                overflow: hidden;
                visibility: hidden;
                transition: max-height .38s var(--curva), visibility 0s linear .38s;
            }

            .topo:has(.topo__gatilho:checked) .topo__nav {
                max-height: 22rem;
                visibility: visible;
                transition: max-height .38s var(--curva), visibility 0s;
            }

            .topo__link {
                display: flex;
                align-items: center;
                min-height: 48px;
                font-size: .8125rem;
                border-bottom: 1px solid var(--fio-escuro);
            }

            .topo__nav .topo__link:last-child { border-bottom: 0; }

            /* Sem `:has()` o painel nunca abriria e a navegação sumiria de
               novo — o mesmo defeito que este bloco veio consertar. Aí o menu
               fica SEMPRE aberto, empilhado abaixo da barra: feio, e
               funcionando. */
            @supports not selector(:has(*)) {
                .topo__hamburguer { display: none; }
                .topo__nav {
                    position: static;
                    max-height: none;
                    visibility: visible;
                    overflow: visible;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .topo__nav,
                .topo__hamburguer span { transition: none; }
            }

            .hero__midia { display: none; }
            .hero__foto { display: block; }

            /* ══ v5 · A CENA APARECE ATÉ O FIM DO HERÓI ══════════════════
               Pedido da equipe: a foto é importante e sumia no meio do bloco.

               O problema não era a intensidade do véu — era a FORMA dele. Um
               `linear-gradient` vertical só sabe uma coisa: quanto mais para
               baixo, mais escuro. Mas o herói do celular não é escuro-embaixo:
               ele tem uma FAIXA DE TEXTO no meio (manchete, par, lead) que
               precisa de fundo escuro, e abaixo dela só peças que trazem a
               própria superfície — os dois botões são sólidos e os cartões da
               vitrine têm fundo próprio (.93). Ou seja: embaixo o escuro não
               protegia nada, só apagava a foto.

               Então o véu deixou de ser rampa e virou uma FAIXA: escurece na
               zona do texto e ALIVIA de novo depois dela. É por isso que os
               stops sobem até .95 e voltam para .34 — não é engano, é a foto
               reaparecendo atrás dos botões e da vitrine, que é exatamente o
               que foi pedido.

               ⚠️ MEDIDO, NÃO ESCOLHIDO A OLHO. Já errei aqui uma vez: uma
               rampa que ficou ótima na captura derrubou o lead para 3,23:1
               (reprovado em AA). A receita da medição está em
               `frontend-css-design/references/verificacao-visual.md`. Quem
               mexer nestes stops REMEDE — a faixa clara de baixo fica a
               poucos pixels do lead, e puxá-la um pouco para cima cega o
               texto sem que a captura denuncie. */
            /* ══ v6 · SEM VÉU SOBRE O TEXTO — decisão do usuário ══
               O pedido: a imagem já não é clara, então nada de véu; um preto
               uniforme e BEM SUAVE sobre a foto, e se isso atrapalhar o
               texto, aumenta-se depois.

               Foi feito exatamente assim — chapa única e leve, sem rampa e
               sem faixa. A v5 chegava a .95 na zona do texto; aqui o máximo é
               .30 na página inteira, e a cena fica nítida do topo ao pé.

               ⚠️ O CUSTO ESTÁ MEDIDO. Com a chapa em .40/.48, no pior pixel:
               manchete 5,80:1 · par 6,50:1 · eyebrow 7,78:1 — os três passam
               em AA (com .22/.30 a manchete reprovava, em 3,98). Sobra UM
               reprovado: o lead, em 2,00:1. Não é preciosismo de norma: é o
               texto sumindo sobre as partes claras da janela para quem lê no
               sol ou tem baixa visão.

               A escala completa, medida com véu UNIFORME, para a decisão ser
               um número e não um gosto:

                 véu   manchete   par    lead   eyebrow
                 0,22    3,97     4,44   1,38    6,93
                 0,35    5,12     5,66   1,73    7,53
                 0,45    6,35     6,94   2,14    8,06
                 0,55    7,85     8,51   2,65    8,60
                 0,75   12,04    12,46   4,46    9,55
                 0,85   14,50    14,72   5,71   10,03

               O gargalo é o LEAD, e não é o véu: ele é `--papel` a 62% de
               opacidade. Esse tratamento nasceu para fundo chapado escuro e
               não sobrevive a foto — mesmo opaco ele fica em 2,15 com véu
               0,32, porque a caixa dele pega o trecho mais claro da janela.
               Ou seja: para o lead passar em AA sobre esta foto, o véu teria
               de ir a 0,85 — que é o oposto do que foi pedido.

               O que existe hoje: chapa leve como pedido + `text-shadow` no
               bloco de texto (ver `.hero__conteudo`). ⚠️ A sombra NÃO
               conserta o NÚMERO — a WCAG mede cor contra cor e não dá crédito
               a `text-shadow`. Ela melhora a leitura real; não torna a página
               conforme. Decisão da Duae, com a tabela acima na mesa. */
            /* v6.1 · "dá pra escurecer um pouquinho ainda" — visto no telefone
               de verdade, pelo link publicado. Subiu de .22/.30 para .40/.48:
               continua chapa leve e uniforme (a v5 chegava a .95 na zona do
               texto), e a cena segue nítida do topo ao pé. */
            .hero__veu {
                background: linear-gradient(180deg,
                            rgba(13, 11, 10, .40) 0%,
                            rgba(13, 11, 10, .48) 100%);
            }

            /* A dissolução do pé existe para o herói TERMINAR na cor em que
               "nossa atuação" começa — sem ela volta o corte que a v3 já
               tinha resolvido. Mas os 42% da v4 comiam quase metade do bloco:
               encurta para o rodapé do herói e escurece só no fim. */
            .hero__dissolve {
                height: 18%;
                background: linear-gradient(180deg,
                            rgba(13, 11, 10, 0) 0%,
                            rgba(13, 11, 10, .58) 52%,
                            var(--preto) 100%);
            }

            /* A vitrine desce para baixo do texto e ocupa a largura toda. */
            .hero__grade { grid-template-columns: 1fr; }

            /* v6 · O paliativo do véu leve: sombra, não caixa. Foi pedido
               "sem véu no texto", então nada de scrim atrás do bloco — a
               sombra escurece só o que encosta na letra, ficando invisível a
               dois centímetros dela, e a foto continua nítida em volta.
               Três camadas: uma justa (a que separa a letra do fundo) e duas
               abertas (que apagam o brilho da janela por trás). */
            .hero__conteudo {
                max-width: none;
                text-shadow: 0 1px 2px rgba(13, 11, 10, .92),
                             0 2px 10px rgba(13, 11, 10, .78),
                             0 4px 26px rgba(13, 11, 10, .62);
            }

            /* ── v6.2 · A SOMBRA NÃO DESCE PARA OS BOTÕES ──
               `text-shadow` HERDA, e os botões são filhos do bloco de texto:
               a sombra que existe para descolar a letra da foto foi parar
               dentro do CTA dourado, onde não há foto atrás — só uma chapa de
               ouro. Resultado: letra preta borrada sobre ouro, que foi
               exatamente o que a equipe viu. O botão tem superfície própria e
               por isso nunca precisou de sombra.

               `text-shadow: none` e não uma reorganização do HTML: a sombra
               pertence ao bloco de texto, e tirar os botões de dentro dele
               quebraria a cascata de `a-rise`/`d5` que orquestra a entrada. */
            .hero__acoes { text-shadow: none; }

            /* ── v6.2 · O LEAD FICA OPACO NO CELULAR ──
               Era o ÚNICO reprovado em AA que restava no herói (2,00:1), e a
               causa nunca foi o véu: `rgba(--papel, .58)` é um tratamento que
               nasceu para fundo chapado escuro, onde 58% de opacidade lê como
               "texto de apoio". Sobre foto ele não é hierarquia, é apagamento
               — e a caixa dele justamente pega o trecho mais claro da janela.

               Opaco, o lead passa a medir como a manchete. A hierarquia não se
               perde: ela continua vindo do TAMANHO (0,9rem contra 2,4rem) e do
               fio de ouro à esquerda, que são sinais que não dependem de
               contraste para funcionar. Só no celular — no desktop o texto
               mora sobre a metade escura do véu e a opacidade continua
               fazendo o trabalho dela. */
            .hero__lead { color: var(--papel); }

            /* ── v6.2 · O VAZADO GANHA CHAPA ──
               Pedido da equipe. Com o véu leve, o botão vazado ficava sobre a
               cena crua: a borda de 30% de opacidade e o texto disputavam com
               a janela por trás, e ele lia como texto solto, não como botão.
               Ganha a MESMA superfície do cartão da vitrine — mesma família,
               não uma chapa nova —, então os dois elementos escuros do herói
               passam a falar a mesma língua.

               Um pouco mais opaco que o cartão (.72 contra .62) porque aqui a
               superfície é pequena e precisa ler como ALVO de toque; o cartão
               é grande e pode se dar ao luxo de deixar a cena passar. */
            .btn--vazado {
                background-color: rgba(14, 12, 10, .72);
                border-color: rgba(245, 241, 234, .38);
            }
            .vitrine { max-width: 30rem; }

            /* Sem vídeo não há loop para mostrar: a barra do topo sai junto.
               Barra parada no alto da página lê como carregamento travado. */
            .hero__progresso { display: none; }

            /* ── Alvos de toque: 44px é o piso ──
               O ponteiro acerta 34px; o dedo, não. Os controles do rotativo
               são os menores da página e os mais fáceis de errar. */
            .vitrine__acao,
            .vitrine__todos { min-height: 44px; }
            .seta { width: 44px; height: 44px; }

            /* ── v7 · A ATUAÇÃO NO CELULAR ──
               A chave de setores SAIU junto com o design antigo: o novo
               empilha os dois setores. Ficou mais longo e nada mais depende de
               um clique para existir na página — está registrado como troca no
               comentário da seção 3.

               O fio vertical entre as colunas some (não há duas colunas) e as
               peças soltas do fundo também: em 390px elas cairiam por cima do
               texto, e "enfeite por cima de conteúdo" não é composição. */
            .setores { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
            .setores__fio { display: none; }
            .atuacao__peca { display: none; }

            .atuacao__fio { width: 64px; margin-top: 18px; }

            .setor__titulo { font-size: 1.3125rem; }
            .setor--b .setor__titulo { margin-top: 8px; }

            /* Ícone menor e coluna mais estreita: com 36px o texto ficava com
               menos de 40 caracteres por linha em 390px, e aí a leitura
               começa a picotar. */
            .servico { grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; }
            .servico:hover { padding-left: 0; background: none; }
            .servico__icone { width: 28px; height: 28px; }
            .servico__icone svg { width: 22px; height: 22px; }
            .servico__nome { font-size: .6875rem; letter-spacing: .12em; }
            .servico__texto { font-size: .8125rem; line-height: 1.6; }

            .setor__fecho { margin-top: 26px; padding: 22px; }

            /* No toque não há hover, então o "descrever meu caso" precisa ler
               como ALVO: vira botão de largura cheia, com o piso de 44px. */
            .setor__fecho-link {
                display: flex;
                justify-content: center;
                width: 100%;
                min-height: 44px;
                margin-top: 16px;
                padding: 13px;
                border: 1px solid rgba(171, 149, 94, .45);
            }

            /* ══════════════════════════════════════════════════════════
               ⚠️ FORA O VIDRO NO CELULAR — o que travava a tela

               Eram CINCO camadas de `backdrop-filter` ativas a 375px, e a
               pior delas no `.topo`, que é `sticky`: a cada quadro de
               rolagem a GPU precisa re-borrar tudo o que passa atrás dele.
               Em telefone isso derruba a taxa de quadros a ponto de a
               página parecer que não responde ao toque — foi exatamente o
               sintoma relatado.

               O efeito não faz falta nesta largura: os cartões já são
               escuros sobre fundo escuro. Trocar o desfoque por opacidade
               entrega a mesma leitura por um custo de pintura trivial.
               ══════════════════════════════════════════════════════════ */
            .topo,
            .vitrine__cartao,
            .outro,
            .vitrine__todos {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .topo { background-color: color-mix(in srgb, var(--preto) 96%, transparent); }

            /* ── v6.1 · O CARTÃO DEIXA A CENA PASSAR ──
               Pedido depois de ver no telefone: no desktop está bom, no
               celular o cartão estava chapado demais e tapava justamente a
               parte da foto que sobrou visível com o véu leve. De .93 para
               .62 — a cena atravessa e o cartão continua sendo uma superfície,
               não um retângulo de vidro.

               ⚠️ E CONTINUA SEM `backdrop-filter`. A tentação aqui é óbvia
               ("se é para transparecer, desfoca o fundo") e é exatamente o
               que travava o celular: eram CINCO camadas de desfoque a 375px,
               e a cada quadro de rolagem a GPU tinha de reborrar tudo atrás
               delas — a página parecia não responder ao toque. Opacidade
               custa uma pintura trivial; desfoque custa a taxa de quadros.
               Quem for "melhorar" esta regra, leia o bloco FORA O VIDRO NO
               CELULAR logo acima antes.

               ⚠️ O piso é MUITO mais baixo do que a intuição diz — medi
               porque tinha chutado .70 e o chute estava errado. O corpo do
               cartão, sobre o pior pixel da foto:

                 .55 → 5,27:1   .62 → 5,63:1   .68 → 5,91:1   .74 → 6,17:1

               Todos passam em AA. v6.2 · a equipe pediu ainda mais cena, e
               .55 é o valor mais transparente que a medição sustenta (5,27:1,
               contra o piso de 4,5). Daqui para baixo não é mais questão de
               gosto: o corpo do cartão reprova. */
            .vitrine__cartao { background: rgba(14, 12, 10, .55); }
            .outro,
            .vitrine__todos { background-color: rgba(14, 12, 10, .60); }

            /* ══ v7 · PUBLICAÇÕES NO CELULAR ═══════════════════════════
               A grade de duas colunas desliga e os três primeiros artigos
               viram carrossel com snap. O carrossel é do NAVEGADOR
               (`scroll-snap`), não de JS: rolagem nativa tem inércia,
               acessibilidade e teclado de graça, e não trava a thread — que é
               o histórico desta página. O JS entra só para acender o ponto
               certo, e a página funciona sem ele. */
            .artigos__cabeca {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
                padding-bottom: 18px;
            }

            .artigos__grade { display: none; }

            .carrossel {
                display: flex;
                gap: 14px;
                padding: 18px 0 16px;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                /* Sem barra visível: ela some sobre fundo escuro e ainda
                   rouba altura do cartão em alguns navegadores. */
                scrollbar-width: none;
            }

            .carrossel::-webkit-scrollbar { display: none; }

            .carrossel .destaque {
                flex: none;
                width: min(280px, 78vw);
                scroll-snap-align: center;
            }

            .carrossel .destaque__capa { height: 200px; }
            .carrossel .destaque__titulo { font-size: 1.375rem; line-height: 1.2; max-width: none; }
            .carrossel .destaque__resumo { display: none; }
            .carrossel .destaque__corpo { padding: 14px; }

            /* ⚠️ Sem `backdrop-filter` aqui — é o desfoque que travava a
               tela. O selo troca vidro por opacidade e lê igual. */
            .carrossel .selo {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                background-color: rgba(13, 11, 10, .88);
            }

            .pontos { display: flex; gap: 6px; justify-content: center; padding: 4px 0 18px; }

            .pontos i {
                width: 8px;
                height: 2px;
                background-color: rgba(245, 241, 234, .2);
                transition: width .3s var(--curva), background-color .3s var(--curva);
            }

            .pontos i[data-ativo] { width: 22px; background-color: var(--ouro); }

            .artigos__extra { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }

            .artigos__acoes { margin-top: 18px; }

            .artigos__acoes .artigos__ver {
                justify-content: space-between;
                width: 100%;
                min-height: 52px;
                padding: 16px 2px;
            }

            /* "Quem somos" empilha: o texto primeiro, a arte depois. As duas
               peças se aproximam para o conjunto não ficar largo demais, e o
               anel some — em coluna única ele passaria por trás do texto. */
            .sobre__grade { grid-template-columns: 1fr; }

            /* ── v5 · O ANEL VOLTA, CENTRADO NA DUPLA ──
               A v3/v4 escondiam o anel no celular com um motivo real: em
               coluna única ele nascia no alto da SEÇÃO e cruzava por trás do
               texto, virando um risco atravessado nas linhas. Não era o anel
               que estava errado, era a âncora — corrigida no HTML (ele agora
               é filho de `.sobre__arte`).

               O `bottom` daqui é medido, não estimado: a dupla tem 305px e
               se apoia a 44px do pé da arte, então o centro dela está a
               196px do pé. Conferido depois de aplicado — o aro passa 16px
               acima da cabeça da dupla e 15px abaixo do pé dela, que é a
               mesma relação do desktop (−12px no topo). Moldura, não
               containment: ele emoldura a composição, não a encaixota. E fica
               113px dentro do pé da seção, então não invade o divisor
               seguinte (era exatamente o vazamento que a captura do divisor
               denunciou). */
            .sobre__anel {
                top: auto;
                left: 50%;
                bottom: 2.25rem;
                width: min(21rem, 84vw);
                transform: translateX(-50%);
            }

            /* ── v4 · O VAZIO ENTRE O CTA E O RECORTE ──
               As duas peças são `position: absolute; bottom: 0` dentro de
               `.sobre__arte`. Na v3 a caixa tinha 22rem e a peça mais alta
               media ~17rem: os 5rem restantes viravam um buraco ENTRE o botão
               e a arte, e o recorte lia como apêndice solto no fim da seção.

               Duas correções, na ordem certa: a caixa passa a caber na peça
               (o número saiu da medição, não do chute) e a peça cresce, porque
               em coluna única ela é a imagem principal da seção e estava
               pequena demais para isso. O `row-gap` zera junto — o respiro do
               empilhado já vem do `margin-top`, e somar os dois era metade do
               vão. (`frontend-css-design` §1b″: cuidado com o gap compartilhado.) */
            /* v5 · Espaçamento refeito em volta da arte, agora que ela tem
               moldura. O anel precisa de ar POR FORA (senão encosta na borda
               da tela e vira um corte) e as peças precisam de ar POR DENTRO
               (senão a dupla toca o aro). Os três números saíram da medição
               contra o anel de 21rem, não do chute: 23rem de caixa dão o
               respiro de cima, as peças sobem 2,75rem do pé para se apoiarem
               DENTRO do aro em vez de furarem a base dele, e a dupla desce
               para 68% para caber com folga nos dois lados.

               ⚠️ O levante vem de `bottom`, NÃO de `padding-bottom` na caixa:
               filho `position: absolute` se posiciona contra a caixa de
               PADDING do ancestral, então padding não o desloca — a regra
               teria ficado no arquivo sem efeito nenhum, e o desalinho seria
               debitado ao número em vez da propriedade. */
            .sobre__grade { row-gap: 0; }
            .sobre__arte { min-height: 23rem; margin-top: 2.5rem; }
            .sobre__dupla { width: min(68%, 17.5rem); right: 6%; bottom: 2.75rem; }
            .sobre__objetos { width: min(34%, 8.5rem); left: 6%; bottom: 2.75rem; }

            /* Empilhado, o `end` do desktop não faz mais sentido: a coluna de
               venda volta a começar no topo, com o formulário abaixo. */
            /* v7 · O dossiê empilha: a coluna que VENDE em cima, o painel que
               COLETA embaixo. O `gap` de 80px do desktop era distância entre
               colunas; empilhado ele vira um buraco, então cai para 40. */
            .contato__grade { grid-template-columns: 1fr; gap: 40px; }
            .contato__fio { margin: 16px 0 30px; }
            .contato__lead { margin-top: 22px; }
            .contato__numeros { margin-top: 26px; gap: 24px 40px; }
            .contato__valor { font-size: 1.625rem; }

            /* A tarja de topo: em telas estreitas as duas etiquetas não cabem
               na mesma linha, e o `flex-wrap` já as empilha. O que falta é o
               respiro entre elas quando isso acontece. */
            .contato__tarja { gap: .5rem 1.5rem; }

            /* Sem override de corpo aqui: o `clamp` da regra base já cobre o
               celular, e um tamanho próprio quebraria a igualdade com os
               outros dois títulos de display. */
            .contato__lead { max-width: none; }
        }

        @media (max-width: 560px) {
            /* v6 · Sem override de `--topo-h` aqui: o hambúrguer tem a mesma
               altura nos dois breakpoints, então a barra continua com 69px
               mesmo com o logo menor. Um valor próprio aqui só reintroduziria
               a defasagem. */
            .topo__logo { height: 34px; }
            .hero__acoes .btn { flex: 1 1 100%; justify-content: center; }
            .hero__acao-principal { width: 100%; }
            .hero__acao-nota { text-align: center; }

            /* O rodapé desmonta em coluna: o botão do WhatsApp ganha largura
               cheia (alvo de toque) e os créditos param de disputar a linha. */
            .rodape__zap { width: 100%; justify-content: center; }
            .rodape__pe { align-items: flex-start; }

            .assinatura {
                padding-left: 0;
                border-left: 0;
                width: 100%;
            }
        }


        /* V8 · CONSULTORIA PARA EMPRESAS LICITANTES */
        .v8-checks { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(171,149,94,.4); }
        .v8-checks li { position: relative; padding-left: 22px; color: rgba(255,255,255,.78); font-size: .78rem; line-height: 1.55; }
        .v8-checks li::before { content: ''; position: absolute; left: 1px; top: .55em; width: 8px; height: 4px; border-left: 1px solid var(--ouro-claro); border-bottom: 1px solid var(--ouro-claro); transform: rotate(-45deg); }
        .vitrine__rotativo, .vitrine__barras, .vitrine__nav, .vitrine__outros { display: none; }
        .vitrine__pe { margin-top: 20px; }
        .atuacao__intro { max-width: 62ch; margin-top: 18px; color: rgba(255,255,255,.64); font-size: .9rem; line-height: 1.75; }
        .setores { grid-template-columns: minmax(0,1.45fr) 1px minmax(280px,.72fr); }
        .setor--b .setor__lista li:nth-child(n+4) { display: none; }
        .v8-processo { background: var(--color-paper-home); color: var(--preto); padding: clamp(86px,9vw,142px) 0; }
        .v8-processo .eyebrow { color: var(--color-on-surface-muted); }
        .v8-processo__titulo { max-width: 900px; margin: 20px 0 60px; font: 300 clamp(2.7rem,5.6vw,5.7rem)/.98 var(--serif); letter-spacing: -.035em; }
        .v8-processo__titulo em { color: var(--marrom); font-weight: 300; }
        .v8-processo__grade { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(89,59,45,.28); border-bottom: 1px solid rgba(89,59,45,.28); }
        .v8-processo__grade article { min-height: 290px; padding: 34px clamp(24px,3vw,48px) 38px 0; }
        .v8-processo__grade article + article { border-left: 1px solid rgba(89,59,45,.22); padding-left: clamp(24px,3vw,48px); }
        .v8-processo__grade span { color: var(--color-on-surface-accent); font-size: .68rem; letter-spacing: .18em; }
        .v8-processo__grade h3 { margin: 64px 0 16px; font: 300 clamp(1.65rem,2.5vw,2.35rem)/1.05 var(--serif); color: var(--marrom); }
        .v8-processo__grade p { max-width: 34ch; font-size: .84rem; line-height: 1.72; color: rgba(13,11,10,.72); }
        .v8-processo__acao { display: inline-flex; align-items: center; gap: 26px; margin-top: 38px; padding-bottom: 8px; border-bottom: 1px solid var(--marrom); color: var(--marrom); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
        .boletim { display: none !important; }
        .num__valor { font-size: clamp(1.1rem,1.8vw,1.55rem); }
        @media (max-width: 820px) {
            .setores { grid-template-columns: 1fr; }
            .setores__fio { width: 100%; height: 1px; }
            .v8-processo__grade { grid-template-columns: 1fr; }
            .v8-processo__grade article { min-height: auto; padding: 28px 0 34px; }
            .v8-processo__grade article + article { border-left: 0; border-top: 1px solid rgba(89,59,45,.22); padding-left: 0; }
            .v8-processo__grade h3 { margin-top: 28px; }
        }



        /* V9 · equilíbrio visível entre empresas e setor público */
        [data-duae-panel][hidden] { display: none !important; }
        .v9-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; border: 1px solid rgba(210,188,139,.32); }
        .v9-tabs button { min-height: 42px; border: 0; background: transparent; color: rgba(255,255,255,.58); font: 500 .66rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }
        .v9-tabs button + button { border-left: 1px solid rgba(210,188,139,.32); }
        .v9-tabs button[aria-selected="true"] { background: var(--ouro); color: var(--preto); }
        .v9-tabs button:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
        .v9-escolha .vitrine__cartao { min-height: 495px; }
        .v9-escolha [data-duae-panel] { min-height: 326px; }
        .v9-escolha .vitrine__titulo { font-size: clamp(1.5rem,2.1vw,2.1rem); }
        /* A faixa continua full-bleed pelo background; quem precisa de respiro
           é o conteúdo. O shorthand anterior terminava em `0` e apagava o
           padding-inline de `.faixa` justamente quando a grade ocupava 100%. */
        .v9-processo { background: var(--marrom-campo); color: var(--papel); padding: clamp(72px,7vw,106px) var(--respiro-x); }
        .v9-processo .eyebrow { color: var(--ouro-claro); }
        .v9-processo__cabeca { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.58fr); align-items: end; gap: 54px; margin-bottom: 34px; }
        .v9-processo .v8-processo__titulo { max-width: 760px; margin: 16px 0 0; font-size: clamp(2.15rem,4vw,4.35rem); line-height: 1; color: var(--papel); }
        .v9-processo .v8-processo__titulo em { color: var(--ouro-claro); }
        .v9-tabs--bloco { margin: 0; }
        .v9-processo .v8-processo__grade { border-color: rgba(210,188,139,.28); }
        .v9-processo .v8-processo__grade article { min-height: 220px; padding-top: 25px; padding-bottom: 28px; }
        .v9-processo .v8-processo__grade article + article { border-color: rgba(210,188,139,.22); }
        .v9-processo .v8-processo__grade span { color: var(--ouro-claro); font-size: .62rem; }
        .v9-processo .v8-processo__grade h3 { margin-top: 36px; margin-bottom: 12px; color: var(--papel); font-size: clamp(1.35rem,2vw,1.85rem); }
        .v9-processo .v8-processo__grade p { color: rgba(245,241,234,.68); font-size: .76rem; line-height: 1.65; }
        .v9-processo .v8-processo__acao { margin-top: 28px; color: var(--ouro-claro); border-color: var(--ouro); font-size: .7rem; }
        /* V9 · Martelo frontal recortado. A peça fica inteira dentro da
           coluna: sem deslocamento negativo, sem caixa e sem rotação por CSS. */
        .sobre__arte--pregao-frontal {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            min-height: clamp(28rem, 43vw, 37rem);
            overflow: visible;
        }

        .sobre__arte--pregao-frontal .sobre__anel {
            z-index: 0;
            top: auto;
            right: auto;
            bottom: 1.25rem;
            left: 50%;
            width: min(95%, 35rem);
            transform: translateX(-50%);
        }

        .sobre__pregao-frontal {
            position: relative;
            z-index: 1;
            display: block;
            width: min(84%, 30rem);
            max-height: 36rem;
            height: auto;
            object-fit: contain;
            object-position: center bottom;
            filter: saturate(.94) contrast(1.04) drop-shadow(0 28px 34px rgba(0, 0, 0, .3));
        }

        .sobre__texto strong { color: var(--papel); font-weight: 500; }
        @media (max-width: 820px) {
            .v9-processo__cabeca { grid-template-columns: 1fr; gap: 28px; }
            .v9-tabs--bloco { width: 100%; }
            .v9-escolha .vitrine__cartao, .v9-escolha [data-duae-panel] { min-height: auto; }
            .sobre__arte--pregao-frontal { min-height: 26rem; margin-top: 1.25rem; }
            .sobre__arte--pregao-frontal .sobre__anel {
                bottom: 2.25rem;
                width: min(22rem, 90vw);
            }
            .sobre__pregao-frontal { width: min(86%, 22rem); max-height: 26rem; }
        }

/* Integração Django: os artigos reais são três cartões do mesmo queryset,
   sem a duplicação grade/carrossel do HTML de demonstração. */
.artigos__grade--dinamica {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, minmax(11.5rem, 1fr));
}

.artigos__grade--dinamica .destaque:first-child {
    grid-row: 1 / 3;
}

.artigos__grade--dinamica .destaque:first-child .destaque__capa {
    height: 100%;
}

/* O corpo dos cartões secundários participa da altura da linha. Quando era
   absolute, um título longo media mais que os 11.5rem do cartão e o topo era
   cortado pelo overflow do link. Capa e conteúdo agora ocupam a mesma célula
   do grid: continuam sobrepostos, mas a copy define a altura mínima real. */
.artigos__grade--dinamica .destaque--secundario {
    display: grid;
    min-height: 11.5rem;
}

.artigos__grade--dinamica .destaque--secundario .destaque__capa,
.artigos__grade--dinamica .destaque--secundario .destaque__corpo {
    grid-area: 1 / 1;
}

.artigos__grade--dinamica .destaque--secundario .destaque__capa {
    height: 100%;
    min-height: 11.5rem;
}

.artigos__grade--dinamica .destaque--secundario .destaque__corpo {
    position: relative;
    align-self: end;
    padding: 4rem 1.25rem 1.25rem;
}

.artigos__grade--dinamica .destaque--secundario .destaque__titulo {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.artigos__grade--dinamica .destaque__metricas {
    pointer-events: none;
}

/* Com somente duas publicações, o cartão secundário usa a altura disponível
   inteira em vez de deixar uma segunda linha vazia. */
.artigos__grade--dinamica .destaque--secundario:nth-child(2):last-child {
    grid-row: 1 / 3;
}

.artigos__vazio {
    margin-top: 1.5rem;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--fio-ouro-fraco);
    text-align: center;
}

.artigos__vazio p { margin-bottom: 1.25rem; color: var(--tinta-suave); }

/* Botão no rodapé herda a anatomia visual dos links, sem estilo nativo. */
button.rodape__link {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 760px) {
    .artigos__grade--dinamica {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 0.9rem;
    }

    .artigos__grade--dinamica .destaque:first-child,
    .artigos__grade--dinamica .destaque--secundario:nth-child(2):last-child {
        grid-row: auto;
    }

    /* No celular a altura deixa de vir das linhas da grade desktop. O card
       principal também precisa de overlay em grid: capa percentual + corpo
       absoluto formavam um ciclo sem altura intrínseca e o corpo escapava
       pelo topo em telas estreitas. */
    .artigos__grade--dinamica .destaque:first-child {
        display: grid;
        min-height: 18rem;
    }

    .artigos__grade--dinamica .destaque:first-child .destaque__capa,
    .artigos__grade--dinamica .destaque:first-child .destaque__corpo {
        grid-area: 1 / 1;
    }

    .artigos__grade--dinamica .destaque:first-child .destaque__corpo {
        position: relative;
        align-self: end;
        padding: 4rem 1.25rem 1.25rem;
    }

    .artigos__grade--dinamica .destaque--secundario { min-height: 18rem; }
    .artigos__grade--dinamica .destaque__capa { height: 100%; }
}

/* Contenção responsiva da versão integrada. Componentes com conteúdo longo
   (abas, CTA e formulário) não podem aumentar a faixa do grid no celular. */
@media (max-width: 900px) {
    .topo__grade,
    .hero__grade,
    .hero__conteudo,
    .vitrine,
    .vitrine__cartao,
    .form,
    .form__campos {
        min-width: 0;
        max-width: 100%;
    }

    .hero__grade { grid-template-columns: minmax(0, 1fr); }
    .hero__par,
    .hero__lead { overflow-wrap: anywhere; }
}