:root{
  --tvc-terra:#BB5A1C;
  --tvc-terra-dk:#9C4B17;
  --tvc-wine:#772A25;
  --tvc-ink:#2A1512;
  --tvc-r:6px;
}

@media(min-width:961px){
  .agc-nav{justify-self:start}
  .agc-bar{column-gap:clamp(22px,3vw,48px)}
  .agc-nav__list{gap:2px}
  
  .agc-nav::before{
    content:"";display:block;position:absolute;left:-1px;top:50%;
    width:1px;height:26px;transform:translateY(-50%);
    background:currentColor;opacity:.16
  }
  .agc-nav{position:relative;padding-left:clamp(20px,2.4vw,34px)}
}

.agc-nav__list>li>a,
.agc-nav__drop{font-size:16px;letter-spacing:-.002em}
.agc-topbar .agc-tb-item{font-size:14px}

.agc-cta,
.agc-cta--wa{
  border-radius:var(--tvc-r);
  padding:15px 24px;
  font-size:15.5px;font-weight:700;letter-spacing:0;
  background:var(--tvc-terra);
  color:#fff;
  box-shadow:0 1px 2px rgba(42,21,18,.10),0 10px 24px -14px rgba(42,21,18,.45);
  border:0;
}
.agc-cta:hover,.agc-cta--wa:hover{
  background:var(--tvc-terra-dk);
  color:#fff;
  filter:none;
  box-shadow:0 2px 4px rgba(42,21,18,.12),0 14px 30px -16px rgba(42,21,18,.5);
}

.agc-topbar__soc a{border-radius:4px}
.agc-tb-srch,.agc-tb-tools{border-radius:var(--tvc-r)}

.agc-header{box-shadow:none;border-bottom:1px solid #E3D0BC}
body.agc-scrolled .agc-header{box-shadow:0 1px 0 #E3D0BC,0 10px 30px -22px rgba(42,21,18,.5)}

@media(max-width:960px){
  .agc-burger{border-radius:var(--tvc-r);min-width:48px;min-height:48px}
  /* Estava em 13.5px, abaixo do piso de 15px do projeto, e era o unico texto
     do topo no celular: o telefone do escritorio. Encolher justamente o
     numero que a pessoa de 60 anos quer ler e o avesso do padrao. Cabe em
     15px porque no celular a barra carrega so o telefone e os icones de rede;
     o endereco ja fica escondido abaixo de 960px. */
  .agc-topbar .agc-tb-item{font-size:14px}
}

.agc-topbar .agc-tb-item,
.agc-topbar .agc-tb-tools,
.agc-topbar .agc-tb-srch{min-height:44px;display:inline-flex;align-items:center;gap:7px}
.agc-topbar__soc a{width:34px;height:34px;font-size:15px}

.agc-dr__more,.agc-dr__logo,.agc-dr__close{min-height:44px;display:inline-flex;align-items:center}
.agc-dr__more{font-size:16px;padding-block:8px}
.agc-dr__prime strong{font-size:16.5px}
.agc-dr__prime span{font-size:15px}
.agc-dr__search{min-height:52px;font-size:16px}

.agc-dr__cap{font-size:15px;letter-spacing:.1em}
.agc-dr__nav a,.agc-dr__nav button{font-size:17px;min-height:52px}
.agc-dr__acard{min-height:64px}
.agc-dr__acard-t{font-size:16px;line-height:1.3}
.agc-dr__acard-d{font-size:15px;line-height:1.45}
.agc-dr__ci-l{font-size:15px;letter-spacing:.06em}
.agc-dr__ci-v{font-size:16px}
.agc-dr__bpost-t{font-size:15.5px;line-height:1.35}
.agc-dr__bpost-m{font-size:15px}
.agc-dr__n{font-size:15px}
.agc-dr__more{font-size:16px;min-height:44px;display:inline-flex;align-items:center;padding-block:8px}
.agc-dr__prime strong{font-size:16.5px}
.agc-dr__prime span{font-size:15px}
.agc-dr__search{min-height:52px;font-size:16px}
.agc-dr__wx-tp b,.agc-dr__wx-cl b{font-size:15px}
.agc-dr__wx-tp small,.agc-dr__wx-cl small{font-size:15px}
.agc-dr__logo,.agc-dr__close{min-height:44px;display:inline-flex;align-items:center}

.agc-dr__ci-l,.agc-dr__bpost-m,.agc-dr__acard-d,
.agc-dr__wx-tp small,.agc-dr__wx-cl small{color:#5E4038}

.agc-tb-tools,.agc-tools__pill{font-size:15px}
.agc-dr__wx-tp b,.agc-dr__wx-cl b,
.agc-dr__wx-tp small,.agc-dr__wx-cl small{font-size:15px}
.agc-dr__cap,.agc-dr__n{font-size:15px}
.agc-dr__acard-d{font-size:15px}
.agc-dr__prime span{font-size:15px}
.agc-tb-srch kbd,.agc-dr__search kbd{font-size:15px;color:#5E4038}

.agc-topbar__soc a{min-width:40px;min-height:40px}

.agc-dos__it b,.agc-seg__it b,.agc-tl__nm,.agc-mega b{font-size:16px;line-height:1.3}
.agc-dos__it small,.agc-seg__it small,.agc-tl__ds,.agc-mega small,
.agc-dr__tt{font-size:15px;line-height:1.45;color:#5E4038}
.agc-dos__it,.agc-seg__it,.agc-tl{min-height:52px}
.agc-seg__all,.agc-seg__wa,.agc-dos__all,.agc-seg__btn,.agc-tools__all,.agc-tools__ask{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center
}
.agc-seg__btn{min-width:44px}
.jc-cred,.agc-footer__dev{min-height:44px;display:inline-flex;align-items:center;font-size:15px}

.agc-dos__tx b,.agc-dr__db b{font-size:16px;line-height:1.3}
.agc-dos__tx small,.agc-dr__db small{font-size:15px;line-height:1.45}
.agc-dos__c,.agc-dr__dcard{min-height:56px}
.agc-dr__cap .agc-dr__n{font-size:15px}
.agc-dr__ci-l{font-size:15px}

.agc-footer__bottom,.agc-footer__bottom *{font-size:15px}
.jc-cred__k{font-size:12px;letter-spacing:.08em}
.jc-cred__n{font-size:15px}
.agc-dr__cap .agc-dr__n,.agc-dr__bpost-m{font-size:15px}

.agc-drawer .agc-dr__body .agc-dr__cap .agc-dr__n{font-size:15px}
.agc-drawer .agc-dr__body .agc-dr__bpost .agc-dr__bpost-m{font-size:15px;color:#5E4038}
.agc-drawer .agc-dr__body .agc-dr__sig,
.agc-drawer .agc-dr__body .agc-dr__sig b{font-size:15px;line-height:1.5}
.agc-footer .agc-footer__bottom span{font-size:15px}
.agc-footer .jc-cred .jc-cred__n{font-size:15px}
.agc-footer .jc-cred .jc-cred__k{font-size:12.5px;letter-spacing:.09em}

.agc-tools__pill{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:99px;background:rgba(187,90,28,.14);color:#9C4B17;
  font-size:15px;font-weight:700;line-height:1
}

/* ==========================================================================
   MENU MOBILE: TRIAGEM POR SITUACAO
   --------------------------------------------------------------------------
   Quem abre este menu tem um problema com o INSS e nao sabe o nome juridico
   dele. Antes o topo do drawer trazia uma PREVISAO DO TEMPO e uma lista de
   navegacao onde 'Blog' e 'Contato' tinham o mesmo peso visual de tudo.
   Agora abre com as oito situacoes, na primeira pessoa, com a foto da area.
   As miniaturas sao WebP de 400x250 (12 KB cada): as fotos originais das
   areas somam 2,44 MB, e esse menu abre no 4G de quem esta em Anapolis.
   ========================================================================== */
.agc-tri{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.agc-tri__c{
  display:flex;flex-direction:column;overflow:hidden;
  background:#FFFAF3;border:1.5px solid #E3D0BC;border-radius:10px;
  text-decoration:none;min-height:150px;
  transition:border-color .18s,transform .18s cubic-bezier(.22,.61,.36,1)
}
.agc-tri__c:active{transform:scale(.985)}
.agc-tri__c:hover{border-color:#BB5A1C}
.agc-tri__ph{display:block;background:#F4E4D3;border-bottom:1px solid #E3D0BC}
.agc-tri__ph img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.agc-tri__b{display:block;padding:10px 11px 12px}
/* 15px e o piso de leitura do site, e este menu e usado por quem tem 60+ */
.agc-tri__b b{
  display:block;font-size:15.5px;font-weight:650;line-height:1.28;color:#2A1512;
  letter-spacing:-.01em
}
.agc-tri__b small{display:block;margin-top:4px;font-size:15px;line-height:1.34;color:#5E4038}
/* abaixo de 360px duas colunas espremem a frase: vira uma so */
@media(max-width:359px){.agc-tri{grid-template-columns:1fr}}

/* Descricao em duas linhas: "Ruido, calor, quimicos, biologicos, eletricidade
   ou risco" ocupava cinco linhas numa coluna estreita e desigualava os cards.
   O texto inteiro continua no DOM para leitor de tela. */
.agc-tri__b small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* NAVEGACAO: lista, nao seis cards com pastilha de cor diferente cada.
   Depois da triagem isso e navegacao secundaria, e seis acentos distintos
   competindo com as fotos acima e a definicao de salada de frutas. */
.agc-drawer .agc-dr__nav{display:grid;gap:0}
.agc-drawer .agc-dr__link{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 2px;
  background:transparent;border:0;border-top:1px solid #E3D0BC;border-radius:0;box-shadow:none
}
.agc-drawer .agc-dr__nav .agc-dr__link:last-child{border-bottom:1px solid #E3D0BC}
.agc-drawer .agc-dr__lic{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:rgba(119,42,37,.08);color:#772A25;font-size:14px;border:0
}
.agc-drawer .agc-dr__ltx{font-size:16.5px;font-weight:650;color:#2A1512}
.agc-drawer .agc-dr__link.active .agc-dr__lic{background:#772A25;color:#FFF6EA}


/* ══════════════════════════════════════════════════════════════════════
   BARRA DO TOPO E BUSCA NO CELULAR
   Duas coisas que estavam erradas na mesma linha:

   1. As redes sociais saiam com 40x40 dentro de uma barra de 38px de altura.
      O culpado e a regra de alvo de toque da §? logo acima, que usa
      `min-width/min-height:40px` e por isso ganha do `width:25px` do
      gt-chrome. Elas estouravam a altura da barra E passavam 6px alem da
      margem direita da tela. Aqui elas voltam a caber; o alvo de 44px
      continua garantido pelo `::after`, que e invisivel e nao ocupa espaco
      no fluxo.

   2. A busca vivia DENTRO da barra do cabecalho, espremida entre a logo e os
      botoes: 63px de largura a 375px de tela. Agora ela sai de la e vira uma
      faixa propria de largura inteira, logo abaixo do cabecalho, que so entra
      depois de 100px de rolagem.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:960px){

  /* ── redes da barra do topo ── */
  .agc-topbar__in{gap:10px}
  .agc-topbar__l{flex:1 1 auto;min-width:0;overflow:hidden}
  .agc-topbar__r{flex:0 0 auto}
  .agc-topbar__soc{gap:8px;flex:none;align-items:center}
  .agc-topbar__soc a{
    width:30px;height:30px;min-width:30px;min-height:30px;
    border-radius:8px;font-size:14px;flex:none
  }
  /* o alvo de 44px vive no pseudo-elemento, sem empurrar o layout */
  .agc-topbar__soc a::after{width:44px;height:44px}
  .agc-topbar__soc a svg{width:15px;height:15px;display:block}

  /* A §? acima da um `min-height:44px` a todo item da barra do topo. A barra
     tem 38px: o item nao cabe, e como essa regra vem depois, ela tambem
     ressuscitava a cidade que o gt-chrome esconde abaixo de 390px. Resultado:
     telefone E cidade espremidos, os dois cortados no meio. Aqui o item volta a
     caber e o alvo de 44px passa para o pseudo-elemento, que nao ocupa espaco.
     Abaixo de 420px a cidade sai: o telefone e o que precisa aparecer inteiro,
     e Anapolis ja esta no rodape e na pagina local. */
  .agc-topbar .agc-tb-item{min-height:0;position:relative}
  .agc-topbar .agc-tb-item::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%)
  }
  .agc-topbar__soc a::after{left:50%;right:auto}

  /* ── busca: sai do cabecalho ── */
  .agc-hsearch{display:none !important}

  .agc-msearch{
    display:block !important;
    position:fixed;top:var(--agc-msearch-top,114px);left:0;right:0;z-index:1000;
    padding:10px 14px 12px;
    /* fechada por padrao. Nao uso opacity para esconder: se o JS falhar, o que
       fica escondido e um atalho, nunca conteudo. A busca do menu lateral e a
       da barra do topo continuam funcionando de qualquer jeito. */
    transform:translateY(-105%);visibility:hidden;
    transition:transform .3s cubic-bezier(.16,1,.3,1),visibility .3s
  }
  body.agc-msearch-on .agc-msearch{transform:none;visibility:visible}

  /* de menu aberto ela some: dois planos fixos brigando por espaco */
  body.agc-open .agc-msearch{transform:translateY(-105%);visibility:hidden}

  /* Tema claro. A faixa nascia bordo, herdada do gt-chrome: no celular ela
     entra POR CIMA do conteudo, e um bloco escuro atravessando a leitura le
     como erro de carregamento. Em branco ela some no papel da pagina e quem
     aparece e o campo. O laranja fica so na borda e no botao, que sao as duas
     coisas que precisam ser encontradas. */
  .agc-msearch{
    background:#FFFDF9;
    border-bottom:1px solid rgba(187,90,28,.26);
    box-shadow:0 14px 28px -20px rgba(60,23,20,.45)
  }
  .agc-msearch__field{
    height:50px;background:#fff;
    border:2px solid rgba(187,90,28,.42);
    box-shadow:0 2px 8px -4px rgba(60,23,20,.18)
  }
  .agc-msearch__field:active,
  .agc-msearch__field:focus-visible{border-color:#BB5A1C;box-shadow:0 0 0 4px rgba(187,90,28,.14)}
  .agc-msearch__field>i{color:#BB5A1C;font-size:17px}
  .agc-msearch__ph{font-size:15px;color:#6E5A52}
  .agc-msearch__go{
    height:36px;padding:0 17px;font-size:14px;
    background:linear-gradient(135deg,#D06A22,#BB5A1C);
    box-shadow:0 6px 14px -8px rgba(187,90,28,.85)
  }
}

@media(max-width:960px) and (prefers-reduced-motion:reduce){
  .agc-msearch{transition:none}
}

/* ── Google nas redes ────────────────────────────────────────────────
   O G colorido precisa de fundo claro para ser reconhecido. As demais redes
   ficam na pintura terracota da casa; esta e a excecao de marca externa, a
   mesma do selo do rodape. */
.agc-topbar__soc a:has(svg),
.tvf-soc a:has(svg){background:#fff;border-color:rgba(255,255,255,.55)}
.agc-topbar__soc a:has(svg):hover,
.tvf-soc a:has(svg):hover{background:#fff}

/* No rodape o selo do Google fica logo abaixo, com nota e numero de
   avaliacoes: o icone pequeno repetido ali em cima seria o mesmo link duas
   vezes na mesma coluna. */
.tvf-soc a[href*="share.google"],
.tvf-soc a[href*="google.com/maps"],
.tvf-soc a[href*="g.page"]{display:none}

@media(max-width:420px){
  /* o telefone e o item mais importante da barra: nunca cortado */
  .agc-topbar .agc-tb-hide{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDITORIA DE CELULAR  ·  28/08/2026
   `php correcoes/audit-paginas-taveira.php --largura=390` acusava os mesmos
   oito problemas em TODAS as paginas do site. Eram todos do chrome, entao
   estao consertados aqui, de uma vez, e nao pagina a pagina.

   A auditoria rodava a 1440px desde sempre, apesar de o cabecalho dela
   prometer 375px: por isso nada disso tinha aparecido antes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── alvo de toque do cabecalho ─────────────────────────────────────────
   Logo em 124x43 e microfone em 42x42: um pixel e dois pixels abaixo dos 44
   da WCAG 2.5.8. Parece implicancia de medicao, mas sao os dois controles
   mais tocados do topo, com o dedo em movimento e a pagina rolando. */
@media(max-width:960px){
  .agc-logo{min-height:44px}
  .agc-mic{width:44px;height:44px}
}

/* ── rotulos do dock ────────────────────────────────────────────────────
   Estavam em 10px. Dez pixels e a convencao de barra de aba de aplicativo,
   e nao serve a um publico de 50+ e 60+: e o menu que fica na tela o tempo
   todo no celular, e o unico caminho sempre visivel para WhatsApp e audio.

   Em 390px o dock tem 366px de largura, 354px uteis, cinco colunas de 70px.
   Em 15px cabe rotulo de ate sete caracteres, e por isso "Ferramentas" virou
   "Calculo" no HTML do cabecalho. `nowrap` fica: rotulo quebrado em duas
   linhas dentro de 64px de altura empurraria o icone para fora. */
.agc-dock__i span,
.agc-dock__cta-l{font-size:15px}
.agc-dock__i i{font-size:19px}
.agc-dock__i{gap:3px}

/* ══════════════════════════════════════════════════════════════════════════
   DOCK DO CELULAR, REFEITO  ·  28/08/2026
   --------------------------------------------------------------------------
   O QUE ESTAVA ERRADO (medido, nao achismo)

   1. DESCENTRALIZADO. Os rotulos ficavam em CINCO alturas diferentes: 730,
      730, 728, 727, 727. Duas causas somadas. A primeira, o botao de
      WhatsApp com `translateY(-18px)`, que saltava para fora da barra e
      levava o proprio rotulo junto. A segunda, mais sutil: tres itens sao
      `<a>` e dois sao `<button>`, e o `<button>` traz padding e
      `line-height` de agente de usuario que ninguem tinha zerado.

   2. O VERDE ESTAVA SUJO. O circulo usava
      `radial-gradient(... #AFA96A, verde 55%, verde escuro)`: um caqui
      alaranjado no canto superior esquerdo, que e o "laranja no meio dele".
      Aqui o verde e verde.

   3. O ROTULO "Falar" ERA VERDE e os outros marrons. Agora todos usam a
      mesma tinta: o verde vive no icone, que e onde a marca precisa dele.

   4. Fio laranja atravessando o topo da barra, sombra dura e icones finos
      demais para rotulos de 15px.

   PRINCIPIO: cinco itens iguais, uma linha de base so. O WhatsApp continua
   sendo o unico com cor, mas pelo icone, sem sair da forma dos outros.
   ══════════════════════════════════════════════════════════════════════════ */

/* O bloco que ficava aqui repetia altura, raio, respiro e sombra da barra.
   Todas essas medidas agora vivem nas variaveis do bloco da barra, mais
   abaixo neste mesmo arquivo. Duas fontes para a mesma medida foi o que
   desalinhou a fileira: mexer em uma nao mexia na outra. */
/* o fio laranja no topo da barra sai: era o unico traco de cor da moldura e
   brigava com o verde do WhatsApp dois dedos abaixo */
.agc-dock::before{display:none}

/* ── um item, uma forma. Vale para <a> e <button> igualmente ──────────── */
.agc-dock__i,
.agc-dock__cta{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; height:100%; width:100%;
  margin:0; padding:0; border:0; background:none;   /* zera o <button> */
  font-family:inherit; line-height:1; text-decoration:none;
  color:#6B4A42;
  transform:none;                                    /* fim do salto do CTA */
  transition:color .24s var(--agc-ease);
  -webkit-tap-highlight-color:transparent;
}
.agc-dock__i span,
.agc-dock__cta-l{
  font-size:15px; font-weight:650; letter-spacing:0; line-height:1;
  white-space:nowrap; color:inherit;
}

/* pastilha macia atras do icone: e o unico "fundo" do item, e so aparece no
   estado ativo ou aberto. Sem halo radial, sem pontinho embaixo. */
.agc-dock__i::before,
.agc-dock__cta::before{
  content:""; position:absolute; top:7px; left:50%; width:46px; height:32px;
  transform:translateX(-50%) scale(.82);
  border-radius:12px; background:rgba(187,90,28,.13);
  opacity:0; transition:opacity .24s var(--agc-ease),transform .24s var(--agc-ease);
  pointer-events:none;
}
.agc-dock__i.is-active,
.agc-dock__i.is-open{color:#9C4B17}
.agc-dock__i.is-active::before,
.agc-dock__i.is-open::before{opacity:1;transform:translateX(-50%) scale(1)}
/* o antigo halo radial e o ponto luminoso do estado ativo saem de cena */
.agc-dock__i.is-active::after{display:none}
.agc-dock__i.is-active i{transform:none}
.agc-dock__i:active,
.agc-dock__cta:active{transform:scale(.96)}

/* ── WhatsApp: verde limpo, mesma forma dos outros ─────────────────────
   O icone ganha um disco verde macio, do tamanho da pastilha dos vizinhos.
   O rotulo usa a MESMA tinta dos outros rotulos: o pedido foi esse, e faz
   sentido, porque cor de marca em texto de 15px vira ruido, nao sinal. */
.agc-dock__cta{color:#6B4A42}
.agc-dock__cta-in{
  position:relative; width:36px; height:36px; border-radius:13px;
  display:grid; place-items:center; font-size:19px; color:#fff;
  background:linear-gradient(160deg,#2ED573,var(--agc-wa,#25D366) 42%,#12A150);
  border:0;
  box-shadow:0 6px 14px -6px rgba(18,161,80,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s var(--agc-ease),box-shadow .2s;
}
/* o anel pulsante sai: era o terceiro elemento em movimento numa barra de
   70px de altura, e a barra e para orientar, nao para chamar */
.agc-dock__cta-in::after{display:none}
.agc-dock__cta-l{color:inherit;font-weight:700}
.agc-dock__cta:active .agc-dock__cta-in{transform:scale(.94)}

@media(prefers-reduced-motion:reduce){
  .agc-dock__i,.agc-dock__cta,.agc-dock__i::before,.agc-dock__cta-in{transition:none}
}

/* a barra ficou 6px mais alta: o respiro do corpo acompanha */
@media(max-width:960px){
  body.is-home,body.is-internal{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ── GAVETA: "Gravar um audio" ─────────────────────────────────────────
   Estava assim: `.agc-dr__prime` (o botao de WhatsApp) da a base, com fundo
   verde, TEXTO BRANCO e sombra verde. A variante de audio trocava so o
   fundo, por um veu de vinho a 10%, e mexia numa `border-color` que nao
   existe, porque o botao nao tem borda. Sobrava texto branco sobre creme,
   quase ilegivel, com a sombra verde do WhatsApp por baixo de um botao que
   nao e de WhatsApp.

   Agora ele e o que sempre deveria ter sido: o par vinho do botao verde.
   Mesma forma, mesmo peso, cor da casa. */
.agc-dr__prime--aud{
  background:linear-gradient(135deg,#8E332C,var(--tvc-wine,#772A25) 55%,#5F211D);
  border:0;
  box-shadow:0 10px 26px -10px rgba(119,42,37,.55);
  color:#fff;
}
.agc-dr__prime--aud:hover{
  box-shadow:0 14px 32px -10px rgba(119,42,37,.62);
}
/* o icone acompanha o texto: era terracota sobre o veu claro, e agora o
   fundo e escuro */
.agc-dr__prime--aud > i:first-child{color:#F3D9C4}
.agc-dr__prime--aud .agc-dr__prime-tx span{color:rgba(255,255,255,.84)}

/* ── A FOLHA SOBE ACIMA DA BARRA, e nao por cima dela ──────────────────
   Antes a folha ocupava a tela toda de baixo para cima e engolia o dock.
   Funcionava, mas nada dizia de onde ela veio: o botao que a abriu ficava
   escondido embaixo dela, e com ele o estado aberto e a seta virada.

   Agora ela para logo acima da barra, com a MESMA margem lateral (14px) e o
   MESMO raio (26px) do dock. As duas pecas passam a ser lidas como uma coisa
   so que cresceu para cima, que era o pedido. Só abaixo de 960px, que e onde
   o dock existe. */
@media(max-width:960px){
  .agc-sheet-wrap{
    align-items:flex-end;
    padding:0 14px calc(70px + 20px + env(safe-area-inset-bottom,0px));
  }
  .agc-sheet{
    width:100%; border-radius:26px;
    max-height:calc(100vh - 70px - 40px - env(safe-area-inset-bottom,0px) - var(--agc-top,44px));
    padding:8px 14px 16px;
    box-shadow:0 -18px 50px -18px rgba(27,9,8,.42), 0 8px 24px -12px rgba(27,9,8,.3);
  }
  /* a alca deixa de ser so enfeite: com a folha solta do rodape, ela e o
     sinal de "arraste para baixo para fechar" */
  .agc-sheet__grip{width:48px;height:5px;background:rgba(119,42,37,.22);margin:6px auto 12px}
}

/* Com a folha aberta, a barra sobe ACIMA do veu. Sem isto ela fica atras do
   escurecimento, e todo o trabalho de marcar o item aberto e virar a seta
   nao chega aos olhos de ninguem: era justamente a ligacao entre o botao e
   o painel que se queria mostrar. O `:has` ja e tecnica usada neste projeto
   (ver `body:has(.cr-dock)` no gt-chrome.css). */
@media(max-width:960px){
  body:has(.agc-sheet-wrap:not([hidden])) .agc-dock{z-index:1130}
}

/* A grade da folha usava `1fr 1fr`, e trilha `1fr` nasce com minimo
   automatico: ela nao encolhe abaixo do conteudo do cartao. Enquanto a folha
   ocupava a largura inteira da tela isso passava; agora que ela recuou 14px
   de cada lado, cinco cartoes vazavam pela direita e apareceu barra de
   rolagem horizontal dentro do painel. `minmax(0,1fr)` no lugar, e o texto do
   cartao tambem precisa poder encolher. E o mesmo defeito ja corrigido no
   bloco de endereco da /contato: `1fr` nunca e a trilha certa para texto. */
.agc-sheet__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow-x:hidden}
.agc-sheet__card{min-width:0}
.agc-sheet__card > *:last-child{min-width:0}

/* ── CONTEUDO DA FOLHA: uma coluna, no piso de leitura do site ─────────
   Os cartoes vinham com titulo em 12.5px e descricao em 10.5px, bem abaixo
   dos 15px que o projeto exige. A auditoria nunca acusou porque a folha
   nasce `hidden` e o medidor pula o que esta escondido.

   Em 15px duas colunas nao cabem em 360px: "Salario-Maternidade" sozinho
   pede mais que a metade da largura, e era por isso que os titulos apareciam
   cortados no meio da palavra. Uma coluna resolve o tamanho e o corte de uma
   vez, e ainda deixa a lista mais rapida de varrer com o polegar. */
@media(max-width:640px){
  .agc-sheet__grid{grid-template-columns:minmax(0,1fr)}
  .agc-sheet__card.is-feat{grid-column:auto}
}
.agc-sheet__cb b{font-size:15px;line-height:1.3;overflow-wrap:break-word}
.agc-sheet__cb small{font-size:15px;line-height:1.4;color:#6B4A42}
.agc-sheet__card.is-feat .agc-sheet__cb b{font-size:16px}
.agc-sheet__card{min-height:64px;padding:13px 14px}
.agc-sheet__go{font-size:14px}
/* titulo da propria folha e a linha de local */
.agc-sheet__ttl b{font-size:19px}
.agc-sheet__ttl small{font-size:15px}

/* Em duas colunas os cartoes se separavam pela propria diagonal; empilhados
   numa coluna so, com borda quase invisivel, viravam um bloco unico. Um
   pouco mais de respiro e de borda devolve a leitura de "sao varios". */
@media(max-width:640px){
  .agc-sheet__grid{gap:11px}
  .agc-sheet__card{border-color:rgba(119,42,37,.16)}
}





/* ══════════════════════════════════════════════════════════════════════════
   ONDE FICAMOS  ·  cartao de endereco do menu
   ──────────────────────────────────────────────────────────────────────────
   Era uma linha igual as de WhatsApp e e-mail, e o toque nela levava para a
   pagina de contato: quem so queria chegar ao escritorio tinha de procurar o
   mapa em outra tela.

   A ROTA VEM PRIMEIRO e ocupa a linha inteira. Quem abre o endereco no
   celular quase sempre esta a caminho, entao o botao de destino e o principal
   e "Ver no mapa" fica como segunda opcao, para quem so quer se situar.
   ══════════════════════════════════════════════════════════════════════════ */
/* MEDIDO no drawer: os cartoes vizinhos usam fundo #fff com rotulo #5E4038 e
   valor #311412. Este menu e CLARO. A primeira versao deste cartao nasceu com
   texto #FFF6EA, que e a cor de texto sobre escuro do resto do site, e ficou
   ilegivel: creme claro sobre papel claro. Aqui ele segue a mesma tinta dos
   irmaos ao lado. */
.agc-dr__mapa{
  margin:0 0 11px;padding:14px 15px 15px;border-radius:14px;
  background:#fff;border:1px solid rgba(119,42,37,.12);
  box-shadow:0 8px 20px -14px rgba(63,23,20,.35)
}
.agc-dr__mapa-h{display:flex;align-items:center;gap:11px;margin:0 0 9px}
.agc-dr__mapa-ic{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,#C9762F,#A44F19);color:#fff;font-size:15px
}
.agc-dr__mapa-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.agc-dr__mapa-t b{font-size:16.5px;font-weight:700;color:#311412;line-height:1.25}
/* A cidade e a unica coisa colorida do cartao depois do botao: quem esta na
   regiao decide por ela, e diluida no meio do endereco ela passava batida. */
.agc-dr__mapa-cid{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin-top:3px;padding:3px 9px;border-radius:99px;
  background:#FBF0E4;border:1px solid rgba(187,90,28,.28);
  font-size:15px;font-weight:700;color:#8A4415;letter-spacing:.01em
}
.agc-dr__mapa-cid i{font-size:11px}
.agc-dr__mapa-e b{color:#311412;font-weight:650}
.agc-dr__mapa-e{margin:0 0 12px;font-size:15px;line-height:1.5;color:#5E4038}
.agc-dr__mapa-b{display:grid;gap:8px}
.agc-dr__mapa-go,
.agc-dr__mapa-ver{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;border-radius:11px;text-decoration:none;
  font-size:15.5px;font-weight:700;letter-spacing:-.005em
}
/* a rota e o destino, entao ela e a unica peca cheia de cor aqui */
.agc-dr__mapa-go{
  background:linear-gradient(150deg,#D0722C,#BB5A1C 58%,#A44F19);color:#fff;
  box-shadow:0 8px 20px -10px rgba(187,90,28,.75)
}
.agc-dr__mapa-ver{
  background:#FBF0E4;color:#8A4415;border:1px solid rgba(119,42,37,.18);font-weight:650
}
.agc-dr__mapa-ver:hover{background:#F4E4D3;border-color:rgba(187,90,28,.45);color:#7A3B12}
.agc-dr__mapa-go i,.agc-dr__mapa-ver i{font-size:15px}
@media(min-width:430px){
  /* na largura de um celular grande os dois cabem lado a lado, com a rota
     maior: hierarquia mantida sem gastar duas linhas */
  .agc-dr__mapa-b{grid-template-columns:1.25fr 1fr}
}

/* ── a busca do topbar ────────────────────────────────────────────────────
   ELA NAO TINHA MOLDURA VISIVEL. O estilo de base vinha do tema escuro, com
   `border:rgba(255,255,255,.16)`: branco translucido sobre creme e invisivel,
   entao o botao lia como texto solto no meio da barra.

   O ROTULO ENCOLHEU MAS CONTINUA ESCRITO: "Pesquisar" custa 9 caracteres em
   vez dos 17 de "Pesquisar no site", e libera 56px. Lupa sozinha e enigma
   para quem tem 60 ou 70 anos: a palavra e o que diz o que aquilo faz.
   O `aria-label` continua completo para o leitor de tela.
   ────────────────────────────────────────────────────────────────────────── */
/* O BOTAO OCUPAVA A ALTURA INTEIRA DA BARRA: 44px de botao numa barra de
   44px, com zero de respiro em cima e embaixo. Ele encostava nas duas
   bordas e por isso parecia entalado. Agora tem 32px e fica centrado, o
   que deixa 6px de cada lado. A BARRA NAO MUDA DE ALTURA: os 6px saem do
   proprio botao, nao de padding novo na barra.

   O `min-height:44px` de alvo de toque so cede no computador, onde quem
   aponta e o mouse. No celular ele fica como estava. */
.agc-topbar .agc-tb-srch{
  padding:0 14px 0 12px;gap:8px;
  /* PINTURA DE SUPERFICIE CLARA NUMA BARRA ESCURA. Este bloco vestia o
     botao com creme a 55% e borda de vinho, que sao as cores de um card
     sobre papel. A barra do topo e o oposto: `linear-gradient(#381614,
     #2c100e)`, quase preto. Creme a 55% sobre quase preto nao da creme,
     da CINZA SUJO, e era isso que aparecia na tela.
     Em superficie escura o certo e o contrario: veu de branco em alfa
     baixo, que e o que o `gt-chrome.css` ja fazia antes deste bloco
     chegar. A geometria que este bloco trouxe (altura, respiro, raio)
     fica; so a tinta volta a ser de fundo escuro.
     Veu de branco tambem nao resolveu: qualquer PREENCHIMENTO cinza no
     meio de uma fileira de itens de texto vira um bloco morto. O botao
     agora e um contorno na cor da marca, com o fundo da propria barra
     aparecendo por dentro: nao tem cinza nenhum, le como controle, e nao
     disputa com o botao cheio de "Analisar meu caso" logo abaixo. */
  border:1px solid rgba(233,174,123,.42);
  background:transparent;
  color:#F3DCC6;
  border-radius:var(--tvc-r,6px);
  transition:border-color .18s var(--agc-ease),background-color .18s var(--agc-ease)
}
.agc-topbar .agc-tb-srch i{font-size:13.5px;opacity:1;color:#E9AE7B}
.agc-topbar .agc-tb-srch:hover{border-color:#E9AE7B;background:rgba(233,174,123,.14);color:#fff}
.agc-topbar .agc-tb-srch:focus-visible{outline:2px solid #9C4B17;outline-offset:2px}
@media(min-width:961px){
  .agc-topbar .agc-tb-srch{
    height:32px;min-height:32px;align-self:center;
    font-size:14px
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR ENTRE 961 E 1180px  ·  ela transbordava
   ──────────────────────────────────────────────────────────────────────────
   MEDIDO: a partir de 1060px o ultimo icone social ia 36px alem da borda do
   container, e em 965px ia 106px. O conteudo tem largura fixa de 714px, o
   trilho encolhe e nada dentro cede: como e flex sem quebra, ele simplesmente
   sai pela direita. Ao mesmo tempo o vao entre o grupo da esquerda e o da
   direita travava nos 20px do `gap`, e por isso "Anapolis-GO" encostava na
   lupa de "Pesquisar no site".

   A saida NAO e deixar quebrar em duas linhas: barra de topo com duas linhas
   empurra a pagina inteira para baixo e fica pior. A saida e uma ESCADA DE
   PRIORIDADE, em que o item menos util cede o lugar primeiro:

     1180  o respiro lateral encolhe de 44 para 28px
     1120  "Trabalhe Conosco" sai (existe no menu e no rodape)
     1040  "Pesquisar no site" fica so na lupa, que e universal
      990  a cidade sai (ela ja some de vez em 960, onde a barra vira outra)

   `min-width:0` nos dois grupos e a rede: sem ele um filho de largura fixa
   impede o pai de encolher, e o transbordo volta por outro caminho.
   ══════════════════════════════════════════════════════════════════════════ */
/* O RESPIRO VEM DO ESPACAMENTO, NAO DO CORPO DO TEXTO. Baixar o topbar para
   14px libera 7% de largura e custa legibilidade para um publico de 60 e 70
   anos, que e quem liga para o numero que esta escrito ali. 15px e o piso do
   projeto e ele fica. A folga veio do rotulo curto da busca, que economizou
   56px, e do vao entre os itens, que e onde o respiro deve ceder. */
@media(min-width:961px) and (max-width:1180px){
  .agc-topbar__in{padding:0 28px;gap:20px}
  .agc-topbar__l,.agc-topbar__r{min-width:0}
  .agc-topbar__r{flex-wrap:nowrap}


}

/* ══════════════════════════════════════════════════════════════════════════
   MENU ENTRE 961 E 1120px  ·  a faixa em que ele quebrava
   ──────────────────────────────────────────────────────────────────────────
   MEDIDO em 1000px: o menu precisava de 505px e tinha exatamente 505
   disponiveis. Ficava no fio, e qualquer arredondamento jogava "O Escritorio"
   para uma segunda linha, com 70px de altura no meio de itens de 45.

   A conta da barra nessa largura: 990 de container, menos 64 de respiro,
   menos 91 do logo, menos 270 dos botoes, menos 60 dos dois vaos. Sobram os
   505. Nao ha folga a criar por acaso: ela vem de encolher o que da.

   1. ROTULO DE MENU NUNCA QUEBRA. Item de navegacao partido em duas linhas e
      erro, nao adaptacao. `nowrap` e a primeira regra, e vale em toda largura.
   2. Dos 961 aos 1120 o vao, o respiro e o corpo do texto cedem juntos, e o
      menu passa a precisar de ~445px: 60px de folga real.
   3. Abaixo de 961 o menu vira hamburguer, como ja era.
   ══════════════════════════════════════════════════════════════════════════ */

/* vale sempre: rotulo de menu nao quebra em lugar nenhum */
.agc-nav__list>li>a,
.agc-nav__drop,
.agc-tb-item,
.agc-tb-link{white-space:nowrap}

@media(min-width:961px) and (max-width:1120px){
  .agc-bar{padding:0 24px;column-gap:18px}
  .agc-nav{padding-left:14px}
  .agc-nav__list{gap:0}
  .agc-nav__list>li>a,
  .agc-nav__drop{font-size:15px;padding-inline:9px}
  /* o botao grande e o segundo maior bloco da barra: 8px de cada lado dele
     valem mais que 8px de qualquer outro lugar */
  .agc-act{column-gap:8px}
  .agc-act .agc-cta{padding-inline:13px;font-size:15px}
}

/* ── ferramentas dentro do menu ─────────────────────────────────────────
   Os cartoes tinham alturas diferentes na mesma linha, porque o grid
   alinhava pelo centro e cada titulo quebrava num numero de linhas. Com
   `stretch` os dois da linha medem igual, e o texto alinha pelo topo: a
   fileira passa a ler como fileira.
   ────────────────────────────────────────────────────────────────────── */
/* `1fr` e `minmax(auto,1fr)`: conteudo largo estica a coluna, e as duas
   mediam 178 e 165. `minmax(0,1fr)` trava as duas no mesmo tamanho, que e
   o que o proprio comentario da folha, mais acima neste arquivo, ja dizia. */
.agc-dr__tools{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;align-items:stretch;grid-auto-rows:1fr
}
.agc-dr__tool{
  align-items:flex-start;gap:11px;padding:13px 13px 14px;
  min-height:74px
}
.agc-dr__tic{flex:none;margin-top:1px}
.agc-dr__tt{
  font-size:15px;line-height:1.32;font-weight:650;
  overflow-wrap:break-word;hyphens:auto
}
@media(max-width:379.98px){
  .agc-dr__tools{grid-template-columns:minmax(0,1fr)}
  .agc-dr__tool{min-height:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA FIXA DO CELULAR  ·  .agc-dock
   ──────────────────────────────────────────────────────────────────────────
   ELA APARECIA NO COMPUTADOR. A regra logo abaixo deste comentario era
   `.agc-dock{display:flex}` SEM media query, e este arquivo carrega depois do
   gt-chrome.css, onde estava o `display:none`. O `@media(max-width:960px)` que
   vinha em seguida repetia `display:flex` e nao consertava nada, porque o
   problema estava na regra de fora. Agora e o contrario: escondida por padrao,
   e so o media query a liga.

   TODA MEDIDA VIVE EM UMA VARIAVEL AQUI EM CIMA. Antes elas estavam espalhadas
   por dois arquivos e tres blocos, e cada ajuste desalinhava outra coisa: foi
   assim que o disco do WhatsApp acabou do mesmo tamanho dos glifos e os
   rotulos ficaram em linhas de base diferentes.

   A GRADE E DE CINCO COLUNAS IGUAIS. A versao anterior usava
   `flex:0 1 auto`, entao cada coluna tinha a largura do proprio texto:
   "Calculadoras" ficava com o dobro de "Blog" e a fileira nascia torta. Com
   1fr cada, os cinco centros ficam a distancia exata um do outro.

   AS CINCO LINHAS DE BASE SAO A MESMA. Os quatro itens centralizam o conteudo
   na altura; o WhatsApp alinha pelo fim com o mesmo respiro inferior. E por
   isso que o rotulo dele termina na mesma linha dos outros quatro, mesmo com o
   quadrado saindo por cima da barra.
   ══════════════════════════════════════════════════════════════════════════ */

.agc-dock{
  /* ── as medidas ──────────────────────────────────────────────────────── */
  --dk-h:      72px;   /* altura da barra                                   */
  --dk-r:      20px;   /* raio da barra: quadrado, nao pilula               */
  --dk-side:   14px;   /* afastamento da borda da tela                      */
  --dk-padx:    8px;   /* respiro lateral interno                           */
  --dk-pady:   12px;   /* respiro vertical: (72 - 48) / 2                   */
  --dk-slot:   28px;   /* altura do slot do icone, IGUAL nos cinco          */
  --dk-ic:     22px;   /* corpo do glifo                                    */
  --dk-gap:     5px;   /* do icone ao rotulo                                */
  --dk-lb:     12.5px; /* rotulo                                            */
  --dk-wa:     54px;   /* lado do quadrado do WhatsApp                      */
  --dk-wa-r:   17px;   /* raio dele: mesma familia do raio da barra         */
  --dk-wa-up:  20px;   /* quanto ele sobe acima do slot                     */
  --dk-ring:    5px;   /* anel de papel que o separa da barra               */
  --dk-tinta:  #9C4B17;
  --dk-ink:    rgba(44,16,14,.62);

  display:none;        /* ← so o media query la embaixo liga */
  position:fixed;left:var(--dk-side);right:var(--dk-side);
  bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:1075;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
  height:var(--dk-h);padding:0 var(--dk-padx);
  border-radius:var(--dk-r);overflow:visible;
  background:rgba(253,250,246,.97);
  -webkit-backdrop-filter:saturate(1.2) blur(16px);backdrop-filter:saturate(1.2) blur(16px);
  border:1px solid rgba(119,42,37,.11);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 34px -18px rgba(60,23,20,.32),
    0 3px 8px -4px rgba(60,23,20,.12);
}
@media(max-width:960px){ .agc-dock{display:grid} }

.agc-dock::before{display:none}

/* ── os quatro itens ──────────────────────────────────────────────────── */
.agc-dock__i{
  position:relative;
  /* os cinco alinham pelo FIM com o mesmo respiro inferior, nunca pelo
     centro: centrar o conteudo de quatro deles e alinhar o quinto pelo fim
     deixava 1px de diferenca entre as linhas de base. Mesma regra para
     todos, mesma linha. */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--dk-gap);height:100%;width:100%;min-width:0;padding:0 2px var(--dk-pady);
  border:0;background:none;cursor:pointer;font-family:inherit;text-decoration:none;
  color:var(--dk-ink);
  transition:color .22s var(--agc-ease)
}
/* o slot tem altura fixa nos cinco: sem isso o disco do WhatsApp, mais alto
   que um glifo solto, empurrava o rotulo dele para outra linha de base */
.agc-dock__i i{
  height:var(--dk-slot);width:auto;
  display:grid;place-items:center;
  font-size:var(--dk-ic);line-height:1;opacity:.9
}
.agc-dock__i span,
.agc-dock__cta-l{
  font-size:var(--dk-lb);font-weight:650;letter-spacing:-.005em;
  line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%
}

/* estado ativo: tinta e um traco curto, sem pastilha */
.agc-dock__i.is-active,
.agc-dock__i.is-open{color:var(--dk-tinta)}
.agc-dock__i.is-active i,
.agc-dock__i.is-open i{opacity:1}
.agc-dock__i::after{
  content:"";position:absolute;left:50%;bottom:6px;
  width:16px;height:2px;border-radius:2px;background:var(--dk-tinta);
  transform:translateX(-50%) scaleX(.3);opacity:0;
  transition:opacity .2s var(--agc-ease),transform .2s var(--agc-ease)
}
.agc-dock__i.is-active::after,
.agc-dock__i.is-open::after{opacity:1;transform:translateX(-50%) scaleX(1)}
.agc-dock__i::before{content:none}
.agc-dock__i:active{transform:scale(.94)}

/* ── o WhatsApp ───────────────────────────────────────────────────────────
   Ele volta a ser a peca de destaque. Estava em 30px, do mesmo tamanho dos
   glifos ao lado: era so mais um item verde numa fileira de cinco. Agora e um
   quadrado de 54px que sobe acima da barra, cercado por um anel da cor do
   papel que o separa dela sem precisar de sombra escura.

   O rotulo dele NAO sobe junto: fica na mesma linha dos outros quatro. E isso
   que mantem a fileira lida como uma fileira.
   ────────────────────────────────────────────────────────────────────────── */
.agc-dock__cta{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;width:100%;padding:0 2px var(--dk-pady);
  text-decoration:none;transform:none
}
.agc-dock__cta-in{
  position:absolute;left:50%;
  /* o centro do quadrado sobe --dk-wa-up a partir do centro do slot do icone */
  top:calc(var(--dk-pady) + var(--dk-slot) / 2 - var(--dk-wa) / 2 - var(--dk-wa-up));
  transform:translateX(-50%);
  width:var(--dk-wa);height:var(--dk-wa);border-radius:var(--dk-wa-r);
  display:grid;place-items:center;
  font-size:26px;color:#fff;
  background:linear-gradient(158deg,#2FD275 0%,#1BB55F 52%,#12A150 100%);
  box-shadow:
    0 0 0 var(--dk-ring) rgba(253,250,246,.97),
    0 10px 22px -8px rgba(18,161,80,.55),
    inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .16s var(--agc-ease),box-shadow .16s var(--agc-ease)
}
.agc-dock__cta-in::after{display:none}
.agc-dock__cta:active .agc-dock__cta-in{transform:translateX(-50%) scale(.94)}
.agc-dock__cta-l{
  color:#0A6E39;font-weight:700
}
.agc-dock__cta::before,
.agc-dock__cta::after{content:none}

/* ── telas estreitas: o respiro cede antes da palavra ─────────────────── */
@media(max-width:379.98px){
  .agc-dock{
    --dk-side:10px;--dk-padx:4px;--dk-lb:11.5px;--dk-wa:50px;--dk-wa-r:16px;--dk-ic:21px
  }
}

/* Cabecalho da folha: o bloco de titulo nao tinha limite de largura, entao a
   linha de apoio ("Resultado na hora, com a conta aberta") passava por
   baixo do botao de fechar em telas estreitas. `min-width:0` deixa ela
   quebrar dentro do proprio espaco, e o alinhamento pelo topo evita o botao
   flutuando no meio de um titulo de duas linhas. */
.agc-sheet__head{align-items:flex-start}
.agc-sheet__ttl{flex:1 1 auto;min-width:0}
.agc-sheet__x{flex:none;width:40px;height:40px;display:grid;place-items:center}