:root{
  --agcl-surface:#FFFFFF;
  --agcl-surface-2:#F6F3EE;
  --agcl-line:#E1D9CC;
  --agcl-line-soft:rgba(16,28,53,.10);
  --agcl-ink:#101C35;
  --agcl-ink-soft:color-mix(in srgb,#101C35 66%,#F6F3EE);
  --agcl-accent:#7B5E32;
  --agcl-gold:#B4915E;
}

.agc-topbar,.agc-header,.agc-mega,.agc-srch,.agc-srch__panel{
  --agc-gold:#96794A;
  --agc-gold-l:#7B5E32;
  --agc-gold-d:#7B5E32;
}

.agc-topbar{
  background:var(--agcl-surface-2);
  border-bottom:1px solid var(--agcl-line);
}
.agc-tb-item{color:var(--agcl-ink-soft)}
.agc-tb-item i{color:var(--agcl-accent)}
a.agc-tb-item:hover{color:var(--agcl-ink)}
a.agc-tb-item:hover i{color:var(--agcl-gold)}
.agc-tb-div{background:var(--agcl-line)}
.agc-tb-cj{
  border:1px solid rgba(123,94,50,.34);
  background:rgba(180,145,94,.10);
  color:var(--agcl-ink);
}
.agc-tb-cj:hover{background:rgba(180,145,94,.20);border-color:var(--agcl-accent);color:var(--agcl-ink)}
.agc-tb-cj__uf{color:#FFFFFF;background:var(--agcl-accent)}

/* Central de Dossiês: mesmo tratamento da pílula "Central Jurídica" ao lado.
   ⚠ A base em `gt-chrome.css` foi escrita para o topbar ESCURO (texto
     pergaminho sobre areia translúcida). Com o topbar claro daqui, aquilo
     ficava quase invisível: pergaminho sobre pergaminho. */
.agc-tb-dos__b{
  /* ⚠ Caixa discreta em repouso e firme só na interação. Com borda a .34 e
     fundo a .10 o item pesava mais que o rótulo dos vizinhos e brigava com
     eles; numa faixa utilitária o destaque deve aparecer no hover, não o tempo
     todo. */
  color:var(--agcl-ink);
  background:rgba(180,145,94,.055);
  border:1px solid rgba(123,94,50,.19);
}
.agc-tb-dos__b:hover,.agc-tb-dos.is-open .agc-tb-dos__b{
  color:var(--agcl-ink);
  background:rgba(180,145,94,.16);
  border-color:rgba(123,94,50,.46);
}
/* ⚠ AQUI estava o quadrado vazio, e a causa é uma armadilha de duas regras que
   se ignoram. Esta linha pintava o fundo do selo de bronze e mandava o glifo
   ser branco, mas a cor branca ia para o <span>: o <i> lá dentro recebe
   `color:var(--agcl-accent)` da regra genérica `.agc-tb-item i` (linha 23),
   que é declaração direta e vence a herança. Resultado: bronze sobre bronze,
   um quadrado sólido com um ícone invisível dentro. Nenhum erro, e com toda a
   cara de decisão de design.
   Sem caixa, o glifo é o ícone, no mesmo bronze dos demais itens desta faixa:
   5,44:1 sobre o pergaminho da topbar, passa AA. */
.agc-tb-dos__ic{color:var(--agcl-accent);background:none}
/* ⚠ O contador era uma pastilha sólida (branco sobre bronze) e ficava pesado
   demais para a faixa. Sem pastilha, o número é bronze direto sobre o
   pergaminho da topbar: 5,44:1, passa AA com folga a 11px. A regra base em
   `gt-chrome.css` já desenha o filete separador. */
.agc-tb-dos__n{color:var(--agcl-accent);background:none;border-color:transparent}
.agc-topbar__soc a,.agc-tb-link{color:var(--agcl-ink-soft)}
.agc-topbar__soc a:not([data-soc]):hover,.agc-tb-link:hover{color:var(--agcl-accent)}

.agc-header{
  background:var(--agcl-surface);
  border-bottom:1px solid var(--agcl-line);
  box-shadow:0 8px 28px -20px rgba(16,28,53,.35);
}
body.agc-scrolled .agc-header{box-shadow:0 14px 38px -22px rgba(16,28,53,.42)}

body.is-home .agc-header,
body.is-home.agc-scrolled .agc-header{
  background:var(--agcl-surface);
  border-bottom-color:var(--agcl-line);
  box-shadow:0 8px 28px -20px rgba(16,28,53,.35);
}
body.is-home:not(.agc-scrolled) .agc-topbar{
  background:var(--agcl-surface-2);
  border-bottom-color:var(--agcl-line);
}
@media(max-width:960px){
  .agc-header,body.is-home .agc-header{
    background:var(--agcl-surface)!important;
    border-bottom:1px solid var(--agcl-line)!important;
    box-shadow:0 8px 22px -16px rgba(16,28,53,.32)!important;
  }
}

.agc-logo img{filter:none}
.agc-logo__txt{color:var(--agcl-ink)}

.agc-nav__list>li>a,.agc-nav__drop{color:var(--agcl-ink-soft)}
.agc-nav__list>li>a:hover,.agc-nav__drop:hover,
.agc-has-mega:hover .agc-nav__drop,.agc-nav__list>li>a.active{color:var(--agcl-ink)}
.agc-nav__list>li>a.active{color:var(--agcl-accent)}
.agc-nav__list>li>a::after,.agc-nav__drop::after{
  background:linear-gradient(90deg,var(--agcl-gold),var(--agcl-accent));
}
.agc-caret{color:var(--agcl-ink-soft)}

.agc-search-btn{
  color:var(--agcl-ink-soft);
  background:var(--agcl-surface-2);
  border:1px solid var(--agcl-line);
  box-shadow:none;
}
.agc-search-btn>i{color:var(--agcl-accent)}
.agc-search-btn:hover{
  color:var(--agcl-ink);
  background:#FFFFFF;
  border-color:var(--agcl-accent);
  box-shadow:0 10px 22px -14px rgba(123,94,50,.7);
}
.agc-search-btn:hover>i{color:var(--agcl-gold)}

.agc-soc a{
  color:var(--agcl-ink-soft);
  background:var(--agcl-surface-2);
  border:1px solid var(--agcl-line);
}
.agc-soc a:hover{background:var(--agcl-accent);color:#FFFFFF;border-color:var(--agcl-accent)}

.agc-mtel{
  background:var(--agcl-surface-2);
  border:1px solid var(--agcl-line);
  color:var(--agcl-ink);
  box-shadow:none;
}
.agc-mtel::before{display:none}
.agc-mtel__live{background:var(--agcl-accent);box-shadow:0 0 0 0 rgba(123,94,50,.6)}
.agc-mtel__tk b,.agc-mtel__ph{color:var(--agcl-accent)}
.agc-mtel__ic{color:var(--agcl-accent)}

.agc-burger{
  background:var(--agcl-surface-2);
  border:1px solid var(--agcl-line);
  box-shadow:none;
}
.agc-burger:hover{border-color:var(--agcl-accent);box-shadow:0 8px 20px -12px rgba(123,94,50,.6)}
.agc-burger span{background:var(--agcl-ink)}
.agc-burger span:nth-child(2){background:var(--agcl-gold)}

.agc-progress{
  /* ⚠ Espessura: 8→6 no desktop e 14→12→8→6 no celular (logo abaixo). Continua
     sendo o único indicador de progresso da página, por isso não afina mais.
     ⚠ O raio precisa de dois `:not(#_)` para ser zerado: o bloco `cv-square`
     do base.php arredonda TUDO em 4px com !important e especificidade de ID.
     Sem isso as pontas voltam roliças, e num elemento de 6px isso é metade
     da altura. */
  height:6px;
  background:linear-gradient(90deg,var(--agcl-accent) 0%,var(--agcl-gold) 55%,#D9C29A 100%);
  box-shadow:0 0 12px rgba(180,145,94,.75);
}
.agc-progress:not(#_):not(#_):not(#_){border-radius:0!important}

/* ══════════════════════════════════════════════════════════════════════════
   28/08/2026 — o botão do telefone e o logo que encolhia no scroll
   --------------------------------------------------------------------------
   1. O BOTÃO CONTINUA DOURADO. O problema nunca foi o ouro, era a TINTA
      MARINHO por cima dele: azul sobre metal quente é o par que briga, e num
      cabeçalho branco lia como adesivo. A tinta virou um preto-café
      (#241B0D), que é ink quente e pertence à mesma família do dourado.

      ⚠ OURO CLARO E TEXTO BRANCO SÃO INCOMPATÍVEIS, e a escolha aqui foi o
      ouro. Branco sobre este degradê daria de 1,4:1 a 2,4:1, ou seja,
      reprova AA, AA-large e até o piso de 3:1 de componente. É o contrato do
      ouro que o CLAUDE.md já registra. Foram tentadas as duas versões: com
      texto branco o ouro precisa ir para #8C6E3A ou mais escuro (placa de
      latão); com o ouro claro e suave a tinta precisa ser escura.
      Ficou o ouro claro com tinta preto-café #241B0D, que é ink QUENTE e
      pertence à mesma família do metal, ao contrário do marinho que estava
      antes e brigava com ele. Pior ponto medido: 7,09:1.
      ⚠ Se alguém trocar esta tinta por branco, o número some. Não é questão
      de gosto, é medida.

   2. O WHATSAPP FICOU VERDE, num disco próprio. Verdete sobre latão é par
      clássico justamente porque o verde-azulado profundo é o complementar
      natural do ouro: os dois se destacam sem competir, o que não aconteceria
      com um verde-folha. É o #0F7D70 que o site já usa nos botões de WhatsApp
      com texto (5,01:1 com branco), e um fio de ouro em volta costura o disco
      ao corpo do botão em vez de deixá-lo como um adesivo colado.

   3. O LOGO ENCOLHIA de 52px para 46px ao rolar (e de 46 para 44 no celular).
      Como a barra tem altura FIXA de 84px nos dois estados, o encolhimento
      não ganhava espaço nenhum: só produzia o salto que se vê ao rolar.
      Igualado. A transição de `height` continua declarada e agora não anima
      nada, o que é inofensivo e deixa o caminho aberto se um dia se quiser
      um header que realmente encolha, aí mudando a barra junto.
   ══════════════════════════════════════════════════════════════════════════ */

.agc-cta{
  gap:11px;padding:10px 22px 10px 10px;
  /* OURO CLARO E SUAVE: creme puxando para o dourado, sem a parada escura que
     endurecia a peça. Menos saturado e com sombra macia. */
  background:linear-gradient(135deg,#E9D9B4 0%,#D6BC8C 52%,#C0A46F 100%);
  color:#241B0D;
  border:0;                       /* borda removida a pedido */
  box-shadow:0 10px 24px -12px rgba(160,132,84,.5),
             inset 0 1px 0 rgba(255,255,255,.68);
  text-shadow:none;
}
/* o disco verde: é ele que diz WhatsApp antes de a pessoa ler o número.
   Sem a borda do botão, o aro claro do disco é o único elemento que o separa
   do corpo, então ele fica. */
.agc-cta i{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-size:16px;color:#FFFFFF;
  background:linear-gradient(145deg,#16AD9A 0%,#0F7D70 58%,#0B6459 100%);
  box-shadow:0 4px 12px -3px rgba(11,100,89,.6),
             0 0 0 2px rgba(255,255,255,.72),
             inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .22s var(--agc-ease),box-shadow .22s}
.agc-cta:hover{
  color:#241B0D;border:0;
  background:linear-gradient(135deg,#F2E5C8 0%,#E2CB9F 52%,#CDB27C 100%);
  box-shadow:0 16px 32px -14px rgba(160,132,84,.62),inset 0 1px 0 rgba(255,255,255,.78);
}
.agc-cta:hover i{transform:scale(1.07);
  box-shadow:0 6px 16px -3px rgba(11,100,89,.7),0 0 0 2px rgba(255,255,255,.95),inset 0 1px 0 rgba(255,255,255,.3)}

/* A variante --wa herda o MESMO corpo dourado: o verde vive no disco, não no
   botão inteiro. Sem isto, o verde-cheio do gt-chrome.css voltaria a pintar a
   peça toda e o dourado sumiria. */
.agc-cta.agc-cta--wa{
  background:linear-gradient(135deg,#E9D9B4 0%,#D6BC8C 52%,#C0A46F 100%);
  color:#241B0D;border:0;
  box-shadow:0 10px 24px -12px rgba(160,132,84,.5),inset 0 1px 0 rgba(255,255,255,.68)}
.agc-cta.agc-cta--wa:hover{
  background:linear-gradient(135deg,#F2E5C8 0%,#E2CB9F 52%,#CDB27C 100%);
  color:#241B0D;border:0;
  box-shadow:0 16px 32px -14px rgba(160,132,84,.62),inset 0 1px 0 rgba(255,255,255,.78)}

/* ── LOGO: o MESMO tamanho rolado e no topo ── */
body.agc-scrolled .agc-logo img{height:52px}
@media(max-width:960px){
  .agc-logo img{height:46px}
  body.agc-scrolled .agc-logo img{height:46px}
}

body.is-home .site-main{padding-top:calc(var(--agc-top) + var(--agc-bar))}
@media(max-width:960px){
  body.is-home .site-main{padding-top:0}
}


/* ══ TOPBAR NO CELULAR ═══════════════════════════════════════════════════════
   ≤960px o gt-chrome.css some com a topbar inteira (`.agc-topbar{display:none}`),
   e junto iam as redes sociais: os chips coloridos de social-chips.css existem
   desde sempre e simplesmente nunca apareciam no celular.

   Aqui ela volta, mas ENXUTA: telefone à esquerda, redes à direita, e nada
   mais. A faixa cheia do desktop (e-mail, endereço, Dossiês, Ferramentas,
   Central Jurídica, Trabalhe Conosco) não cabe em 375px, e empilhar tudo viraria
   um bloco de três linhas antes do logo.

   ⚠ Este arquivo carrega DEPOIS do gt-chrome.css, então vence por ordem com a
     mesma especificidade. Não precisa de !important.
   ⚠ A faixa fica no FLUXO, acima do header sticky: ela rola para fora e o
     header gruda sozinho no topo, que é o comportamento que já existia.
   ⚠ Fundo OPACO, inclusive na home. `body.is-home .agc-topbar` é transparente
     de propósito no desktop (fica sobre o vídeo do hero, com o scrim cuidando
     da leitura). No celular não há hero atrás dela, e transparente deixaria o
     bronze do telefone sobre o que viesse por baixo.
   ⚠ Contraste medido sobre o pergaminho #F6F3EE: telefone 5,44:1 · chips das
     redes com glifo branco sobre a cor da marca (piso de 3:1 de componente). */
@media(max-width:960px){
  .agc-topbar,
  body.is-home .agc-topbar,
  body.is-home:not(.agc-scrolled) .agc-topbar{
    display:block;position:relative;z-index:1002;
    background:var(--agcl-bg,#F6F3EE);
    border-bottom:1px solid var(--agcl-line,rgba(16,28,53,.10));
  }
  /* ⚠ `height` fixo trocado por `min-height`: com altura travada o padding
     vertical nao tem para onde crescer e o respiro pedido nao aparece. */
  .agc-topbar__in{
    min-height:50px;max-width:none;padding:10px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .agc-topbar__l,.agc-topbar__r{display:flex;align-items:center;gap:8px;min-width:0}

  /* Só sobrevivem o telefone e as redes. Lista explícita em vez de
     `:not(:first-child)`: a ordem dentro da coluna depende de `if` no PHP. */
  .agc-topbar .agc-tb-div,
  .agc-topbar .agc-tb-local,
  .agc-topbar .agc-tb-cj,
  .agc-topbar .agc-tb-link,
  .agc-topbar .agc-tb-feature,
  .agc-topbar .agc-tk{display:none}

  /* Telefone: alvo de toque cheio e o bronze do tema claro como acento. */
  .agc-topbar__l .agc-tb-item{
    height:32px;padding:0 12px 0 10px;gap:8px;
    font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
    color:var(--agcl-accent,#7B5E32);
    background:color-mix(in srgb,var(--agcl-accent,#7B5E32) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--agcl-accent,#7B5E32) 26%,transparent);
  }
  .agc-topbar__l .agc-tb-item i{font-size:12px;color:var(--agcl-accent,#7B5E32)}

  .agc-topbar__soc{gap:8px}
  .agc-topbar__soc a{width:30px;height:30px;font-size:13px}
}

/* Abaixo de 340px o número inteiro deixa de caber ao lado dos três chips. */
@media(max-width:339px){
  .agc-topbar__in{padding:0 10px}
  .agc-topbar__l .agc-tb-item{padding:0 10px;font-size:12px}
  .agc-topbar__soc{gap:6px}
}


/* ══ BUSCA DO CELULAR + AJUSTES DO DOCK ══════════════════════════════════════
   Ver correcoes/mobile-busca-dock.php. Este arquivo carrega depois do
   gt-chrome.css, então vence por ordem sem precisar de !important. */

/* A busca é o ÚLTIMO item de flex da .agc-bar e ocupa a linha inteira, então
   cai para a segunda linha da própria barra. Fica dentro do header sticky de
   graça, e acima da .agc-progress, que é absoluta no rodapé da barra.
   Some no desktop, onde a lupa da barra principal já faz o papel. */
.agc-msrch{display:none}
@media(max-width:960px){
  /* height fixo + wrap = segunda linha vazando para fora da caixa */
  /* ⚠ O padding lateral (20px) e o mesmo do gt-chrome.css e NAO pode mudar:
     e ele que alinha logo, busca e conteudo na mesma vertical. So o vertical
     cresce, que era o que estava faltando. */
  .agc-bar{flex-wrap:wrap;height:auto;min-height:86px;row-gap:0;padding-block:12px}
  /* ⚠ A faixa da busca encostava no botão de menu: 1px entre os dois, medido.
     O `row-gap` fica em 0 quando ela está FECHADA de propósito — item de flex
     com altura 0 ainda conta para o gap, e um valor fixo acrescentaria essa
     folga ao header no topo da página, onde não há busca nenhuma para separar.
     Por isso o respiro só existe no estado rolado. */
  body.agc-scrolled .agc-bar{row-gap:9px}
  /* ── A FAIXA DA BUSCA É UM PLANO PRÓPRIO, não a continuação do header ──
     ⚠ Ela usava `background:inherit`, então era o mesmo pergaminho da barra e
       não havia divisão nenhuma: a busca parecia solta dentro do cabeçalho. A
       faixa agora é #F3F3F3 com filete de areia em cima e sombra INSET no topo,
       que é a linguagem de "poço" que este projeto já usa: a faixa AFUNDA e o
       campo branco FLUTUA sobre ela. Duas coisas fazem a divisão, não uma só.
     ⚠ Ela sangra até as bordas com margin negativa igual ao padding lateral da
       `.agc-bar` (20px no mobile), senão o plano novo ficaria com o pergaminho
       aparecendo dos dois lados e a divisão perderia a força. */
  /* ── A BUSCA SO EXISTE DEPOIS QUE A PESSOA ROLA ────────────────────────
     No topo da pagina ela nao aparece; ao rolar, desce; ao voltar ao topo,
     recolhe. ⚠ Nenhum JS novo: o site ja marca `body.agc-scrolled` (y > 24)
     no _default_header.php, e a mesma classe que muda a sombra do header
     serve de gatilho aqui.
     ⚠ `visibility` junto do `max-height` NAO e redundancia: sem ela a faixa
     recolhida continua clicavel e capturaria o toque destinado ao conteudo.
     Na volta a `visibility` espera a transicao terminar (delay), na ida
     entra na hora, senao a animacao de abrir nao aparece.
     ⚠ Este e um dos poucos casos em que `opacity:0` e legitimo neste projeto:
     a regra da casa proibe elemento que DEVE estar visivel nascer invisivel,
     e aqui o estado fechado e a intencao. */
  .agc-msrch{
    display:block;flex:1 0 100%;order:9;overflow:hidden;
    /* ⚠ A FAIXA SANGRA ATÉ A BORDA DE BAIXO DO HEADER, não só até as laterais.
       Antes ela parava 13px acima do fim do header, porque a `.agc-bar` tem
       `padding-block:12px` (o respiro do logo) e a faixa é filha dela. Ficava
       uma tira de pergaminho ENTRE o cinza da faixa e o fim do header, com a
       barra de progresso flutuando dentro dela: parecia margem sobrando no
       progresso e um degrau a mais no cabeçalho. O `margin-bottom` negativo
       cancela exatamente esse padding, sem tirar o respiro da linha do logo,
       que é o que o `padding-top` da barra continua fazendo.
       ⚠ O recuo interno também caiu (12/17 → 10/12): com a faixa terminando
       na borda certa, o que sobrava virou excesso ao redor do campo. */
    margin:0 -20px -12px;padding:10px 20px 12px;
    background:#F3F3F3;
    border-top:1px solid var(--agcl-line-2,#E1D9CC);
    box-shadow:inset 0 3px 6px -4px rgba(16,28,53,.16);
    max-height:70px;opacity:1;visibility:visible;
    transition:max-height .3s cubic-bezier(.16,1,.3,1),
               padding .3s cubic-bezier(.16,1,.3,1),
               opacity .22s ease, visibility 0s;
  }
  body:not(.agc-scrolled) .agc-msrch{
    max-height:0;padding-top:0;padding-bottom:0;
    /* ⚠ sem isto a margem negativa continuaria puxando e comeria o respiro
       de baixo da barra do logo justamente quando a busca está escondida */
    margin-bottom:0;
    opacity:0;visibility:hidden;
    border-top-color:transparent;box-shadow:none;
    transition:max-height .3s cubic-bezier(.16,1,.3,1),
               padding .3s cubic-bezier(.16,1,.3,1),
               opacity .18s ease, visibility 0s .3s;
  }
  /* Sem a busca, a barra volta a ser de uma linha so. */
  body:not(.agc-scrolled) .agc-bar{min-height:78px}

  @media(prefers-reduced-motion:reduce){
    .agc-msrch,body:not(.agc-scrolled) .agc-msrch{transition:none}
  }
  /* ⚠ GRID DE TRÊS COLUNAS, e é daqui que vem a simetria pedida. Com `flex` e
     `padding:0 8px 0 13px` os dois lados tinham recuos diferentes (13 contra 8)
     e caixas de tamanhos diferentes: a lupa era um glifo solto e a seta um
     quadrado de 30px. Agora AS DUAS PONTAS SÃO CAIXAS DE 30px com o mesmo
     recuo de 7px, então o campo é espelhado no eixo vertical. */
  .agc-msrch__b{
    width:100%;height:44px;display:grid;
    grid-template-columns:30px minmax(0,1fr) 30px;
    align-items:center;gap:8px;
    padding:7px;cursor:pointer;font-family:inherit;text-align:left;
    background:#FFFFFF;
    border:1px solid color-mix(in srgb,#101C35 14%,transparent);
    /* o campo FLUTUA sobre a faixa: fio claro no topo, sombra curta embaixo */
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               0 1px 2px rgba(16,28,53,.06),
               0 2px 8px -4px rgba(16,28,53,.14);
    transition:border-color .2s,box-shadow .2s;
  }
  .agc-msrch__b:active{
    border-color:color-mix(in srgb,var(--agcl-accent,#7B5E32) 55%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--agcl-accent,#7B5E32) 14%,transparent);
  }
  /* a lupa ganha caixa de 30px para espelhar a seta do outro lado */
  .agc-msrch__ic{
    width:30px;height:30px;display:grid;place-items:center;
    font-size:14px;color:var(--agcl-accent,#7B5E32)}
  .agc-msrch__ph{min-width:0;font-size:13.6px;font-weight:500;
    color:color-mix(in srgb,#101C35 62%,#F6F3EE);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ⚠⚠ O BOTÃO É DOURADO COM SETA BRANCA, e o tom NÃO é o ouro da marca.
     `#B4915E` com branco dá 2,94:1 e reprova até o piso de 3:1 de componente;
     o contrato registrado no CLAUDE.md é explícito: "nunca texto branco sobre
     ouro". `#A5834F` é o ouro clareado até o limite do que a seta branca
     suporta: 3,52:1, com folga sobre o piso de 3:1 de objeto gráfico.
     O PIOR PONTO do degradê é o topo, que é o que se mede.
     ⚠ Não subir mais: o passo seguinte (`#B08A55`) cai para 3,18:1 e o
     seguinte já é o ouro da marca, que reprova. */
  .agc-msrch__go{
    width:30px;height:30px;display:grid;place-items:center;
    font-size:11.5px;color:#FFFFFF;
    background:linear-gradient(180deg,#A5834F,#8C6D3F);
    box-shadow:0 1px 3px rgba(123,94,50,.42);
  }

  /* ⚠ 6px. Mesma espessura do desktop: com a faixa da busca agora chegando
     até a borda, a barra assenta na base dela e 8px voltava a parecer um
     elemento em vez de um indicador. */
  .agc-progress{height:6px}
}

/* ── O dock ───────────────────────────────────────────────────────────────
   Os chevrons saíram a pedido: com cinco itens de mesmo peso o dock fica
   simétrico, e a alça no topo do painel passa a ser o sinal de "isto sobe". */
.agc-dk__i--sub::after,
.agc-dk__i--sub[aria-expanded="true"]::after{content:none}

/* ── Os painéis que sobem ─────────────────────────────────────────────────
   Tudo aqui anima só `transform`. Nada nasce em `opacity:0`: onde a animação
   não roda, o elemento tem de continuar visível. */
.agc-dkp__grab{display:block;width:38px;height:4px;margin:9px auto 0;
  background:rgba(16,28,53,.18)}
.agc-dkp__hd{padding-top:12px}

/* entrada com mola curta, e as linhas chegam escalonadas por deslocamento */
.agc-dkp{animation:agcDkSobe .34s cubic-bezier(.22,1.2,.36,1)}
@keyframes agcDkSobe{from{transform:translateY(22px)}to{transform:none}}
.agc-dkp__b > *{animation:agcDkItem .30s cubic-bezier(.22,1.1,.36,1) backwards}
@keyframes agcDkItem{from{transform:translateY(10px)}to{transform:none}}
.agc-dkp__b > *:nth-child(1){animation-delay:.03s}
.agc-dkp__b > *:nth-child(2){animation-delay:.055s}
.agc-dkp__b > *:nth-child(3){animation-delay:.08s}
.agc-dkp__b > *:nth-child(4){animation-delay:.105s}
.agc-dkp__b > *:nth-child(5){animation-delay:.13s}
.agc-dkp__b > *:nth-child(n+6){animation-delay:.155s}
@media(prefers-reduced-motion:reduce){
  .agc-dkp,.agc-dkp__b > *{animation:none}
}

/* o véu ganha profundidade: o painel passa a flutuar sobre a página */
.agc-dk__veu{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* a linha ganha ar e o quadrado do ícone, um leve relevo */
.agc-dkp__i{padding:12px 16px}
.agc-dkp__ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px -2px rgba(16,28,53,.35)}
.agc-dkp__g{transition:transform .18s}
.agc-dkp__i:active .agc-dkp__g{transform:translateX(2px)}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CLARO — o menu mobile (v3)
   ---------------------------------------------------------------------------
   Estrutura do menu do ../mart3 (rótulo minúsculo, ladrilho de ícone, filete de
   acento à esquerda, acordeão) mais quatro acréscimos: ações rápidas com
   telefone e mapa, trilho de artigos, calculadoras coloridas e dossiês com capa.

   ⚠ O RODAPÉ SAIU. `.agc-dr__foot` media 207px e, num viewport de 667px, comia
   o fim do corpo rolável: no print do cliente ele aparecia POR CIMA do item
   "Contato". Rodapé fixo dentro de painel que já rola disputa altura com o
   conteúdo.

   ⚠ ESTE ARQUIVO NÃO TINHA NENHUMA REGRA `agc-dr` até 03/09/2026: o menu era
   pintado pelo `gt-chrome.css`, que descreve o chrome ESCURO. Um site de
   cabeçalho creme abria um painel preto.

   ⚠ NO CLARO O ACENTO É BRONZE #7B5E32 (6,02:1 sobre branco). O ouro #B4915E
   (2,94:1) só aparece dentro das superfícies marinho: as ações rápidas e o
   botão do Trabalhe Conosco, onde dá 5,77:1.

   ⚠ NÃO SE COPIA O RAIO DO MART3 (9 a 12px): o `cv-square` impõe 4px com
   `!important` e é a identidade de escudo da marca.
   ═══════════════════════════════════════════════════════════════════════════ */
.agc-drawer{
  width:min(374px,93vw);
  background:#F6F3EE;color:#101C35;
  border-left:1px solid #E1D9CC;
  box-shadow:-24px 0 60px -30px rgba(16,28,53,.34);
  display:flex;flex-direction:column;
}
.agc-drawer::before{content:none}

/* ── topo ── */
.agc-dr__top{
  flex:none;background:#FFFFFF;border-bottom:1px solid #E1D9CC;
  padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
/* ⚠ O link do logo é item de flex com `space-between` e encolhe até 0 quando o
     contêiner aperta: `flex:0 0 auto` trava isso. E o arquivo é o ESCURO
     (`$agcLogo`); o claro (`logo.png`) é para fundo escuro e ficava branco
     sobre branco, que era o "logo invisível". */
.agc-dr__logo{flex:0 0 auto;min-width:120px;display:flex;align-items:center;text-decoration:none}
.agc-dr__logo img{height:34px;width:auto;max-width:208px;object-fit:contain;display:block}
.agc-dr__logo .agc-logo__txt{font-weight:700;font-size:15px;color:#101C35}
.agc-dr__close{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  color:#5A6478;background:#F6F3EE;border:1px solid #E1D9CC;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
}
.agc-dr__close:hover{background:#101C35;border-color:#101C35;color:#F6F3EE}
/* o filete sob o topo vinha em ouro puro do CSS escuro (2,94:1 sobre creme) */
.agc-dr__top::after{height:1px;box-shadow:none;
  background:linear-gradient(90deg,transparent,#E1D9CC,#7B5E32,#E1D9CC,transparent)}

/* ── corpo rolável, barra fina como no mart3 ── */
.agc-dr__body{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  background:#F6F3EE;padding:14px 16px 22px;
  scrollbar-width:thin;scrollbar-color:rgba(123,94,50,.35) transparent;
  overscroll-behavior:contain;
}
.agc-dr__body::-webkit-scrollbar{width:4px}
.agc-dr__body::-webkit-scrollbar-thumb{background:rgba(123,94,50,.35)}

/* ══ O BOTÃO DE MENU NO CELULAR ══════════════════════════════════════════════
   ⚠ Ele não estava "grudado" por falta de margem: a caixa tinha 13px de folga
   no topo, 17px na base e 20px à direita. Quem encostava na borda era o que a
   medição da caixa NÃO vê.

   1) O HALO PULSANTE ULTRAPASSA O HEADER. O `::after` do gt-chrome.css tem
      `inset:-3px` e a animação `agcBurgPulse` expande `box-shadow` até 12px,
      ou seja **15px de alcance** contra 13px de folga: a cada 2,8s o anel
      dourado cruzava a borda de cima. Ele foi desenhado para o header
      TRANSPARENTE sobre o vídeo do hero, onde havia a página inteira por
      baixo para o halo se dissolver. Sobre a barra clara de 78px ele não cabe.

   2) A SOMBRA DO TEMA ESCURO SOBREVIVEU, e é bug de cascata. Este arquivo já
      pedia `box-shadow:none` no `.agc-burger` (0,1,0), mas o gt-chrome.css
      declara `body:not(.agc-scrolled) .agc-burger` (0,2,1) com uma sombra de
      30px de desfoque em marinho a 50% mais um anel dourado de 3px. A regra
      mais específica vencia, então o botão continuava com o peso do chrome
      escuro sobre o chrome claro. As duas regras abaixo repetem a
      especificidade do original para ganhar honestamente, sem `!important`.
   ⚠ Ao mexer na sombra do burger, mexa nos DOIS estados (rolado e no topo). */
@media(max-width:960px){
  /* mata o halo: sem anel, sem animação, sem alcance para fora da barra */
  .agc-burger::after{content:none}

  .agc-burger,
  body:not(.agc-scrolled) .agc-burger{
    background:var(--agcl-surface-2);
    border:1px solid var(--agcl-line);
    /* sombra curta e contida: separa do pergaminho sem invadir a borda */
    box-shadow:0 1px 2px rgba(16,28,53,.06);
  }
  .agc-burger:hover,
  .agc-burger:focus-visible{
    background:#FFFFFF;
    border-color:var(--agcl-accent);
    box-shadow:0 2px 6px rgba(16,28,53,.10);
  }
  /* o alvo de toque continua 48px; o botão em si encolhe 2px de cada lado,
     o que devolve folga real sem descumprir o piso de 44px de toque */
  .agc-burger{width:44px;height:44px;border-radius:12px}
}

/* ⚠ O MENU MOBILE mora em public/css/drawer.css desde 07/09/2026 (v5). As regras
   `agc-dr__*` dos componentes antigos saíram daqui; só a casca do drawer
   permanece acima. Ver MENU-MOBILE.md. */