/* ============================================================
   Alves & Freire — componentes v1
   Depende de af.css. Estrutura aprovada em 26/07 (C09-composta).
   ============================================================ */

/* ---------- cabeçalho fixo ----------
   27/07, direção L3 aprovada: o cabeçalho nasce TRANSPARENTE e só ganha
   superfície própria quando a página rola. Antes ele era um bloco de --paper
   fixo, e a tinta levemente esverdeada do token somada ao fundo da primeira
   seção lia como uma faixa verde-clara no topo — foi a queixa do Moabe. */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding-block .22s ease, background-color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.topo__env { display: flex; align-items: center; gap: var(--e6); padding-block: var(--e5); }
.topo.encolhido {
  background: #FFFFFF;
  border-bottom-color: #E5E5E3;
  box-shadow: 0 8px 22px rgb(16 26 30 / .07);
}
.topo.encolhido .topo__env { padding-block: var(--e3); }

/* Transparente de verdade: o cabeçalho tem que ficar SOBRE a primeira seção,
   não acima dela. Sendo irmão anterior do <main>, ele mostrava o fundo do
   body — cor diferente do gradiente do hero, e o resultado era a faixa clara
   que o Moabe apontou. O recuo negativo puxa a seção para debaixo dele.
   Medido, não estimado: 109px no desktop, 100px daqui para baixo. E o fundo da
   home passa a ser a cor do topo do gradiente — assim, se a altura variar um ou
   dois pixels (fonte carregando, zoom), a sobra sai da mesma cor e não aparece. */
:root { --alt-topo: 110px; }
/* 28/07: eu tinha escurecido o FUNDO DA PÁGINA inteira para cobrir a sobra do
   recuo negativo — e o rodapé, que não declara fundo próprio, herdou o escuro
   com tinta escura por cima: 37 links a 1,65:1. A sobra tem 1 ou 2px; a
   correção certa é uma faixa da altura do cabeçalho, não a página toda. */
.pg-home { background: var(--paper); }
.pg-home::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: var(--alt-topo); background: #23282A; z-index: -2; pointer-events: none;
}
.pg-home main { margin-top: calc(var(--alt-topo) * -1); }
.pg-home .hero { padding-top: calc(var(--alt-topo) + var(--e7)); }
/* o pé da primeira seção precisa caber a METADE DE CIMA do cartão que cavalga
   a emenda — 52px no desktop, 44 no celular. Com os 48px de antes, o cartão
   subia em cima do botão "Áreas de atuação". */
/* 28/07: 96px de pé deixavam 44px entre os botões e o cartão, e ele disse que
   ficou "muito próximo". Com 128 sobram 76 — folga suficiente para o cartão
   ler como peça sobreposta e não como coisa encostada no botão. */
.pg-home .hero { padding-bottom: var(--e10); }

/* A EMENDA. 28/07, a pedido dele: "tem que ter aquela sombra ou alguma coisa
   que reforce a transição entre as seções". Com a placa escura o salto é
   escuro→claro, e nesse sentido quem projeta é a seção de cima — a sombra
   tem que cair PARA BAIXO, sobre o papel. Precisa de z-index: irmão anterior
   não pinta sobre irmão posterior sem ele. */
.pg-home .hero { z-index: 1; box-shadow: 0 24px 46px -16px rgb(6 10 12 / .55); }
/* e o fio de luz na quina, que é o que faz a emenda ler como matéria e não
   como corte de tesoura */
.pg-home .areas-secao { position: relative; }
.pg-home .areas-secao::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgb(255 255 255 / .55); pointer-events: none;
}

/* 27/07: o logotipo real entrou no lugar do wordmark redesenhado em Newsreader.
   O arquivo vetorial já traz "ADVOGADOS ASSOCIADOS" no próprio lockup, então a
   linha de apoio saiu do cabeçalho — repetir a mesma informação em duas
   tipografias diferentes era ruído. O registro de OAB ficou no rodapé, que é
   onde a informação institucional pertence. */
.marca { margin-right: auto; line-height: 0; }
.marca__im { display: block; width: 216px; aspect-ratio: 1008.9 / 198.09;   /* o quadro do SVG cresceu para caber a folga */
  background: url("midia/alvesefreire-logo-horizontal-advogados.svg?v=cbec598c") center/contain no-repeat;
  transition: width .22s ease; }
.topo.encolhido .marca__im { width: 174px; }
/* o rodapé continua com <img>: ali o logotipo é conteúdo, não peça de
   interface que troca de versão ao rolar */
.marca img { width: 216px; height: auto; }
/* 28/07: com a primeira seção escura, o cabeçalho transparente da home fica
   SOBRE ela — e o logotipo colorido some. Enquanto não rolou, ele é o
   negativo; assim que o cabeçalho ganha superfície branca, volta ao colorido.
   O arquivo negativo é o oficial da marca, não um filtro por cima. */
/* 03/08: 'o logo do escritorio ficou um pouco apagado no fundo preto'. O
   arquivo negativo e' branco puro, mas sobre a placa quase preta ele lia
   como cinza — falta de separacao, nao falta de cor. O lift de brilho
   satura o branco e a sombra curta o descola do fundo. */
.pg-home .topo:not(.encolhido) .marca__im {
  background-image: url("midia/alvesefreire-logo-horizontal-negativo-advogados.svg?v=1c671d44");
  filter: brightness(1.18) drop-shadow(0 1px 3px rgb(0 0 0 / .55)); }
/* 28/07: esta regra nasceu sem media query e valia em qualquer largura. No
   celular o menu não é linha no cabeçalho: é um PAINEL que abre com fundo
   --paper, claro. Tinta clara ali some quando o painel abre — e o verificador
   nunca ia achar, porque ele não clica no botão para abrir. Desktop só. */
@media (min-width: 861px) {
  .pg-home .topo:not(.encolhido) .menu a { color: #C9D0D2; }
  .pg-home .topo:not(.encolhido) .menu a:hover { color: #FFFFFF; }
}
.pg-home .topo:not(.encolhido) :where(a, button):focus-visible { outline-color: #EEEAE3; }
.marca__oab {
  font-family: 'Figtree', system-ui, sans-serif; font-weight: 500;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3); margin-top: var(--e2);
}

.menu { display: flex; gap: var(--e5); font-size: var(--peq); }
.menu a { text-decoration: none; color: var(--ink-2); }
.menu a:hover { color: var(--ink); }
.topo__cta { display: none; }
.topo.encolhido .topo__cta { display: inline-flex; min-height: 40px; padding: var(--e2) var(--e4);
  font-size: var(--peq); }

/* ---------- botão flutuante do WhatsApp ----------
   05/08: existia um botão flutuante aqui, na cor do site e dizendo "Conte o
   seu caso". O Moabe pediu o do WhatsApp e disse sentir falta dele — ou seja,
   o que existia não era lido como WhatsApp por quem olha. Botão que ninguém
   reconhece é botão que ninguém clica.

   O VERDE NÃO É O DA MARCA. `#25D366` com texto branco dá 1,98:1 — reprova em
   qualquer critério, e o público declarado deste projeto tem 50 a 65 anos.
   `#0E7C43` dá 5,27:1, passa em AA, e continua sendo lido como WhatsApp
   porque quem faz o reconhecimento é o GLIFO, não o tom exato do verde. */
.flutua {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 22px 0 18px;
  background: #0E7C43; color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 600; letter-spacing: .005em;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgb(14 60 36 / .34), 0 2px 6px rgb(0 0 0 / .16);
  transform: translateY(150%); opacity: 0;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .3s ease,
              box-shadow .25s ease, background-color .2s ease;
}
.flutua.visivel { transform: translateY(0); opacity: 1; }
.flutua:hover, .flutua:focus-visible { background: #0B6837;
  box-shadow: 0 12px 32px rgb(14 60 36 / .42), 0 2px 6px rgb(0 0 0 / .18); }
.flutua svg { width: 26px; height: 26px; flex: none; fill: currentColor; }

/* O anel pulsa DEVAGAR e só três vezes, ao aparecer. Movimento perpétuo em
   canto de tela é o que faz o olho aprender a ignorar aquele canto — e o
   critério 2.2.2 do WCAG trata disso. Some sozinho e nunca mais volta. */
.flutua::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid #0E7C43; opacity: 0; pointer-events: none;
}
.flutua.visivel::before { animation: flutua-anel 2.4s ease-out .6s 3; }
@keyframes flutua-anel {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* No telefone o rótulo sai e fica só o glifo: uma pílula com texto ocupa um
   terço da largura da tela e cobre o conteúdo que a pessoa está lendo. */
@media (max-width: 560px) {
  .flutua { padding: 0; width: 58px; height: 58px; justify-content: center;
            right: 14px; bottom: 14px; }
  .flutua .flutua__t { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .flutua { transition: opacity .2s ease; transform: none; }
  .flutua.visivel::before { animation: none; }
}

/* ---------- hero ---------- */
.hero { padding-block: var(--e8) var(--e7); }
.hero .lead { margin-top: var(--e4); }
.hero__acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e6); }

/* ---------- primeira seção: PLACA ESCURA com as linhas de mármore ----------
   Escolhida pelo Moabe em 28/07, depois de seis rodadas (a "C3"). O desenho é
   a mesma gravura de curvas de nível da L3 — o veio que lê como pedra ou
   madeira —, agora invertida: fios de luz cortados num plano fundo.

   Três camadas, e cada uma faz uma coisa só:
     i:nth-child(1)  a gravura, invertida e mascarada para abrir no centro,
                     onde mora a manchete
     i:nth-child(2)  o brilho que atravessa UMA vez e se dissolve, a 7,5 % de
                     branco. Foi ele quem cobrou a discrição: "gostei da luz,
                     mas podia ser mais sutil"
     i:nth-child(3)  a respiração no alto à esquerda, em 53 s

   A seção inteira é a coisa mais escura do site, e a seguinte é a mais clara.
   O salto é o assunto, não um efeito colateral. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 92% at 70% 6%, #23282A 0%, #171B1D 46%, #0E1113 100%);
  color: #EEEAE3;
}
.hero__fundo { position: absolute; inset: 0; z-index: -1; }
.hero__fundo i { position: absolute; inset: 0; display: block; }
.hero__fundo i:nth-child(1) {
  background-image: url("midia/textura-contornos.svg?v=7741fad7");
  background-size: cover; background-position: center;
  filter: invert(1) brightness(1.5) contrast(.75) drop-shadow(3px 4px 3px rgb(0 0 0 / .5));
  opacity: .5;
  /* 03/08: "coloque um pouco de risco do lado esquerdo tambem, ficou mais do
     lado direito". A razao estava aqui: o buraco transparente da mascara
     ficava em 30% da largura — bem em cima do lado esquerdo —, entao a gravura
     so sobrava a direita. O buraco encolhe e recua para 42%, o que abre a
     borda esquerda sem devolver desenho para debaixo da manchete. */
  -webkit-mask-image: radial-gradient(66% 82% at 42% 40%, transparent 12%, rgb(0 0 0 / .62) 48%, #000 92%);
          mask-image: radial-gradient(66% 82% at 42% 40%, transparent 12%, rgb(0 0 0 / .62) 48%, #000 92%);
}
.hero__fundo i:nth-child(2) {
  inset: -18%;
  background: linear-gradient(104deg, transparent 34%, rgb(214 235 240 / .075) 46%, transparent 60%);
  filter: blur(24px);
  animation: hero-passa 44s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hero-passa {
  0%   { translate: -62% 0; opacity: 0; }
  14%  { opacity: 1; }
  58%  { opacity: 1; }
  74%  { translate: 62% 0; opacity: 0; }
  100% { translate: 62% 0; opacity: 0; }
}
.hero__fundo i:nth-child(3) {
  background: radial-gradient(64% 54% at 26% -6%, rgb(190 214 220 / .11), transparent 62%);
  animation: hero-respira 53s ease-in-out infinite;
}
@keyframes hero-respira { 0%,100% { opacity: .4; scale: .95; } 50% { opacity: 1; scale: 1.07; } }
.hero .env { position: relative; }

/* ---- tinta clara sobre a placa ---- */
.hero h1 { color: #F4F1EA; }
.hero .lead { color: #D8D2C7; }
/* .pn .kicker { color: var(--ink) } mora mais abaixo nesta folha e tem a mesma
   especificidade — ganhava por ordem, e o rótulo do painel saía tinta escura
   sobre a placa escura. Um nível a mais resolve. */
.hero .kicker, .hero .pn .kicker { color: #C0B8AB; }
.hero .pn-lista { border-top-color: rgb(255 255 255 / .26); }
.hero .pn-it { border-bottom-color: rgb(255 255 255 / .14); color: #E4DFD6; }
.hero .pn-it:hover, .hero .pn-it:focus-visible { color: #FFFFFF; }
.hero .pn-s { color: #C6B994; }
.hero .btn { color: #EEEAE3; border-color: rgb(238 234 227 / .5); }
.hero .btn:hover { background: #EEEAE3; color: #16191B; border-color: #EEEAE3; }
.hero .btn--cheio { background: #C6B994; border-color: #C6B994; color: #14181A; }
.hero .btn--cheio:hover { background: #D6CBAA; border-color: #D6CBAA; color: #14181A; }
.hero :where(a, button, [tabindex]):focus-visible { outline-color: #EEEAE3; }

/* 03/08 — composição "1", escolhida por ele.
   Primeiro eu estreitei o painel para 0,62fr, a pedido ("está ocupando muito
   espaço"). Funcionou para o painel e criou outro problema: sobrou um vazio
   grande no meio-direita, e a seção ficou correta e desabitada — errei para o
   lado oposto do "poluído".
   A saída não foi devolver texto, que ele mandou tirar e tirar foi certo. Foi
   trocar a divisão vertical por uma horizontal: a manchete ocupa a largura
   inteira e cresce, e o painel vira uma FAIXA de três colunas no pé. Some o
   vazio, e a hierarquia fica mais clara — primeiro a frase, depois os
   caminhos. */
.hero__grade { display: grid; grid-template-columns: 1fr; gap: var(--e7); }
.hero__principal { display: flex; flex-direction: column; justify-content: center; gap: var(--e6); }
/* 03/08: 20% menor a pedido dele. 05/08: mais 10%, também a pedido.
   44/6.4/86 -> 35/5.1/69 -> 31,5/4,6/62. */
.hero__principal h1 { font-size: clamp(31.5px, 4.6vw, 62px); max-width: 16ch; }
.hero__acoes { margin-top: var(--e7); }

.pn { max-width: none; }
.pn .kicker { margin-bottom: var(--e3); }

/* ---------- a manchete sendo escrita ----------
   Quatro tempos, um por linha, a pedido dele. Três coisas que não são enfeite:

   · o TEXTO INTEIRO está no HTML. A animação esconde e reescreve o que já
     existe — quem chega pelo Google, pelo leitor de tela ou com o JavaScript
     bloqueado lê a frase completa. Manchete que só existe depois do script é
     manchete que o buscador não vê;
   · a caixa reserva a altura final ANTES de começar. Sem isso a página inteira
     pula quatro vezes enquanto escreve, e o que estiver abaixo dança junto;
   · com movimento reduzido não há animação nenhuma: a frase já nasce escrita. */
.escreve { display: block; }
.escreve > span { display: block; }
.escreve .cursor {
  display: inline-block; width: 3px; height: .78em; margin-left: 2px;
  background: var(--acento-claro, #C9AE6B); vertical-align: -.06em;
  animation: pisca 1.1s steps(1) infinite;
}
@keyframes pisca { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .escreve .cursor { display: none; }
}

/* movimento de entrada: só na primeira tela, uma vez — não é o .rev do scroll */
.hero__principal > * { animation: hero-entra .64s cubic-bezier(.2,.7,.2,1) both; }
.hero__principal > *:nth-child(2) { animation-delay: .08s; }
.hero__principal > *:nth-child(3) { animation-delay: .16s; }
@keyframes hero-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- "Por onde começar": lista nua ----------
   Aprovada em separado. O quadro escuro que existia aqui enrijecia a primeira
   tela; sem caixa e sem fundo, o peso vem só do filete. No hover a LINHA
   INTEIRA se desloca — não só a seta. Foi esse detalhe que o Moabe apontou. */
.pn { animation: hero-entra .64s cubic-bezier(.2,.7,.2,1) .12s both; }
.pn .kicker { color: var(--ink); }
/* 03/08 — composição "1": o painel deixa de ser coluna e vira FAIXA de três.
   A primeira tentativa foi declarar a grade numa regra nova, mais acima no
   arquivo. Não pegou: esta regra vem depois e `display: flex` ganhava por
   ordem — o painel saiu empilhado em seis linhas e comeu meia tela. Colisão de
   cascata não se resolve com outra regra; resolve-se onde a propriedade mora. */
/* 05/08 — QUATRO colunas, e a abertura inteira cabendo numa tela.
   "Eu queria que esses cards coubessem todos na primeira página, está cortando
   um pouco." Com três colunas e oito assuntos seriam três linhas; com quatro
   são duas, e a altura cai o suficiente para a dobra fechar. */
.pn-lista { display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: var(--e5); border-top: 1px solid var(--linha-2);
  margin-top: var(--e3); }
@media (max-width: 1180px) { .pn-lista { grid-template-columns: repeat(2, 1fr); } }
/* 05/08 — o painel deixa de listar SEÇÕES e passa a listar PROBLEMAS, com as
   três situações concretas embaixo de cada título. Duas decisões:

   · as situações ficam VISÍVEIS, não escondidas atrás do cursor. O piso de
     legibilidade deste projeto proíbe affordance que só existe no hover, e no
     telefone hover não existe — metade do público não veria nada;
   · a ênfase é que muda no hover: a linha do título acende e o filete à
     esquerda cresce. Movimento que reforça o que já está lá, em vez de revelar
     o que estava escondido. */
.pn-lista { row-gap: var(--e2); }
.pn-it {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: var(--e3); padding: var(--e3) var(--e2) var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  border-left: 2px solid transparent;
  text-decoration: none; color: inherit;
  transition: border-left-color .2s ease, background-color .2s ease;
}
.pn-it:hover, .pn-it:focus-visible {
  border-left-color: #C9AE6B; background: rgb(255 255 255 / .045); }
.pn-t { grid-area: 1 / 1; font-size: 16px; font-weight: 600; line-height: 1.3; }
.pn-d { grid-area: 2 / 1 / 3 / -1; margin-top: 3px; font-size: 13.5px; line-height: 1.45;
  color: var(--sobre-escuro-2); }
.pn-it:hover .pn-d, .pn-it:focus-visible .pn-d { color: var(--sobre-escuro); }
.pn-s { grid-area: 1 / 2; color: #C9AE6B; transition: transform .18s ease; }
.pn-it:hover .pn-s { transform: translateX(4px); }
@media (max-width: 900px) { .pn-lista { grid-template-columns: 1fr; }
  .pn-it { padding-left: var(--e3); } }

/* ---------- cartão de credenciais, sobreposto na emenda ----------
   Mesmo gesto da landing do ITBI: um cartão claro que cavalga a divisa entre a
   primeira seção e a seguinte. Cada coluna centrada; a do registro da sociedade
   é mais larga porque o numeral é o dado mais longo e o mais institucional. */
/* 27/07, à noite: o cartão encostava na emenda e parava. Ele vivia DENTRO do
   .hero, que tem overflow:hidden por causa da textura — nada podia atravessar
   a borda. Agora ele é irmão das duas seções, mora numa faixa de altura zero
   sobre a divisa, e sobe metade da própria altura. Cavalga por construção:
   cresça o cartão o quanto crescer, metade fica de cada lado. */
.emenda-cartao { position: relative; z-index: 5; height: 0; }
.emenda-cartao .env { position: relative; }
.credenciais {
  position: absolute; left: var(--margem); top: 0; translate: 0 -50%;
  /* 03/08: quatro celulas — 'em todo o Brasil' saiu da manchete e virou dado */
  display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr;
  background: #FFFFFF; border-radius: var(--raio);
  /* 28/07: ele pediu sombra mais forte "na parte que ele sobressai para a
     segunda seção". Sombra centrada não serve — as três abaixo têm
     deslocamento só para BAIXO, então a mancha se concentra exatamente na
     metade que avança sobre o papel claro. A de cima fica encostada no
     escuro, onde sombra não apareceria de todo jeito. */
  box-shadow: 0 1px 2px rgb(16 26 30 / .08),
              0 12px 20px -6px rgb(16 26 30 / .20),
              0 34px 56px -14px rgb(16 26 30 / .34);
  overflow: hidden;
}
.cred { padding: var(--e4) var(--e5); text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cred + .cred { border-left: 1px solid var(--linha); }
.cred__v { font-family: 'Newsreader', Georgia, serif; font-weight: 600;
  font-size: 27px; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 0 auto; }
/* a quarta célula é FRASE, não número: sem numeral serifado, com a tinta
   cheia para não ler como legenda de um dado que não existe */
.cred--frase { text-align: center; }
.cred__r--forte { font-size: 15px; line-height: 1.35; color: var(--ink);
  font-weight: 500; }
.cred__e { color: var(--acento); font-size: 12px; letter-spacing: .14em; margin: 0 auto; }
.cred__r { font-size: 13px; color: var(--ink-2); margin: 0 auto; }

@media (max-width: 860px) {
  /* continua cavalgando no celular — o que muda é que ele ocupa a largura
     inteira. Voltar para position:static aqui colapsaria a faixa de altura
     zero e o cartão cairia por cima da primeira área. */
  .credenciais { right: var(--margem); grid-template-columns: 1fr 1fr;
    box-shadow: 0 1px 2px rgb(16 26 30 / .08),
                0 10px 16px -6px rgb(16 26 30 / .18),
                0 26px 40px -12px rgb(16 26 30 / .30); }
  .cred { padding: var(--e3) var(--e2); }
  .cred__v { font-size: 21px; }
  .cred__r { font-size: 11.5px; }
}

/* ---------- abertura da seção de áreas ----------
   28/07: "essa sessão está meio morta, já vai direto para as áreas sem uma
   introdução ou uma arte". A lista em si foi aprovada e não muda — o que entra
   é o que faltava antes dela: nome da seção, uma frase que diz o método do
   escritório, a explicação de por que a lista é de SITUAÇÕES e não de ramos, e
   um bloco de números que vem do próprio conteúdo (não literal escrito à mão:
   se nascer uma situação nova em conteudo_areas.py, o 22 vira 23 sozinho).

   A arte é a mesma gravura de mármore da primeira seção, num rastro largo e
   fraco atrás da abertura — amarra a seção 2 na seção 1 sem virar textura de
   fundo, que o sistema reserva para duas seções só. */
/* 30/07: a grade da seção inteira, com áreas nomeadas. No desktop é exatamente
   o que era antes — abertura à esquerda, destaques à direita, lista embaixo.
   No celular a lista SOBE para logo depois do título, e os destaques descem:
   quem chega pelo telefone vê as quatro áreas sem precisar rolar por três
   parágrafos institucionais primeiro. */
.areas-grade { position: relative; display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas: "abre  forte"
                       "lista lista"
                       "pe    pe";
  column-gap: var(--e8); align-items: start; }
.areas-abre  { grid-area: abre; }
.areas-forte { grid-area: forte; }
.areas       { grid-area: lista; margin-top: var(--e7); }
.areas-pe    { grid-area: pe; }

/* A gravura é um PSEUDO-ELEMENTO DA GRADE, e pseudo-elemento de container de
   grade é item de grade. Então ela mora na célula dos destaques e acompanha a
   linha de abertura sozinha — antes eram percentuais de uma caixa que agora
   mudou de tamanho, e qualquer ajuste de altura a desalinhava. */
/* 03/08 — "eu já tinha pedido algo atrás, algum risco ou mármore, mas parece
   que retirou". Não retirei: a gravura estava no CSS, com opacidade .5, e
   simplesmente NÃO PINTAVA. Medido, escondendo o texto: a área inteira saía
   chapada em #F8F8F6.

   A causa é de empilhamento, não de opacidade. Pseudo-elemento com
   `z-index: -1` desce para trás do contexto de empilhamento mais próximo — e
   `.areas-secao` tem fundo OPACO. A gravura ia parar atrás do papel da seção,
   que a cobria inteira. Enquanto ela vivia dentro de `.areas-abre`, um bloco
   sem fundo, dava certo; ao virar pseudo da grade da seção, deixou de dar.

   Agora ela é camada positiva com o conteúdo por cima, e não depende de
   ninguém ser transparente. É a mesma gravura da placa escura, aqui em
   negativo — a mesma pedra vista do outro lado. */
.areas-secao > .env { position: relative; z-index: 1; }
.areas-secao::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* 03/08, terceira tentativa nesta seção — e as duas anteriores erraram o
     MODELO, não o número.

     A primeira não pintava nada (pseudo com z-index negativo atrás de um fundo
     opaco). A segunda pintava três MANCHAS ISOLADAS: três carimbos pequenos com
     três máscaras apertadas. Ele apontou os vazios entre elas — "ficou uma
     parte sem ter, e eu quero que tenha o mármore atrás também" —, e o defeito
     era de concepção: mancha é o oposto de veio. Mármore não tem começo e fim,
     ele atravessa.

     Agora são duas camadas GRANDES que cobrem a seção inteira, em escalas e
     posições diferentes para não lerem como padrão repetido. A máscara deixou
     de recortar ilhas: ela só ATENUA no miolo, onde corre o texto, e deixa a
     pedra cheia nas bordas. Onde antes havia vazio, agora há veio fraco; onde
     havia texto, o desenho cede o suficiente para não competir. */
  background-image: url("midia/textura-contornos.svg?v=7741fad7"),
                    url("midia/textura-contornos.svg?v=7741fad7");
  background-repeat: no-repeat, no-repeat;
  background-size: 2400px auto, 1900px auto;
  background-position: right -420px top -300px,
                       left -560px bottom -260px;
  /* 05/08: "os riscos atrás do texto ficou um pouco forte, coloque alguma luz
     ou sombra ou transparência para não causar ruído no texto". A opacidade
     geral cai de .95 para .62, e a máscara cede muito mais no miolo — de .34
     para .12 — que é a faixa por onde corre a manchete e o parágrafo. Nas
     bordas a pedra continua cheia, então o desenho que ele aprovou não sai:
     ele só sai de cima da leitura. */
  opacity: .62;
  -webkit-mask-image: linear-gradient(96deg,
      #000 0%, rgb(0 0 0 / .30) 17%, rgb(0 0 0 / .12) 48%,
      rgb(0 0 0 / .30) 82%, #000 100%);
          mask-image: linear-gradient(96deg,
      #000 0%, rgb(0 0 0 / .30) 17%, rgb(0 0 0 / .12) 48%,
      rgb(0 0 0 / .30) 82%, #000 100%);
}
/* E uma luz por baixo do texto: um véu do próprio papel, suave, que separa a
   coluna de leitura da pedra sem criar caixa nem borda visível. */
.areas-abre { position: relative; z-index: 1; }
.areas-abre::before {
  /* O RECUO NEGATIVO NÃO PODE VAZAR PARA FORA DA TELA. Com -34px de cada
     lado, a luz passava 14px além da janela no telefone e a página inteira
     rolava de lado — e o rastro apontava para o carrossel, que eu tinha
     acabado de mexer e que não tinha nada com isso. Vertical continua
     negativo, porque ali não há borda de viewport para estourar. */
  content: ""; position: absolute; inset: -28px 0 -20px; z-index: -1;
  background: radial-gradient(72% 62% at 34% 46%,
      rgb(248 248 246 / .92) 0%, rgb(248 248 246 / .68) 46%, transparent 78%);
  pointer-events: none;
}
@media (min-width: 1000px) { .areas-abre::before { inset: -28px -34px -20px -34px; } }
/* 28/07: "coloque também algo a mais, um traço de outra cor, uma sombra".
   O traço é o mesmo dourado do botão da primeira seção — a única cor do site
   que não é nem o petróleo nem a tinta, e que até aqui só existia sobre o
   escuro. Trazê-la para o claro amarra as duas seções por cor, não só por
   desenho. */
/* O traço dourado continua ABSOLUTO, fora do fluxo da grade: ele marca o canto
   superior esquerdo da seção, e como item de grade ocuparia uma célula. */
.areas-grade::after {
  content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px;
  background: linear-gradient(to right, #B79A55, #D8C79A);
  box-shadow: 0 1px 2px rgb(120 96 40 / .3);
}
.areas-abre .pilha { padding-top: var(--e5); }
.areas-abre h2 { max-width: 18ch; }

/* ---------- a manchete que se reveza ----------
   Três frases no mesmo lugar. A grade com todas em `1 / 1` é o que permite
   isso sem posicionamento absoluto e sem altura fixa: a caixa fica do tamanho
   da MAIOR das três, então nada salta quando a frase troca.

   Ciclo de 13,5s com as três defasadas em um terço (atraso negativo, para
   nascerem já espalhadas). Cada uma fica ~4s inteira na tela.

   Acessibilidade: as três estão no HTML, na ordem, então leitor de tela lê as
   três independentemente da animação. E quem pede movimento reduzido não vê
   uma frase só — vê as três empilhadas, porque esconder texto de quem desligou
   animação seria trocar um problema por outro. */
.reveza { display: grid; }
.reveza > span { grid-area: 1 / 1;
  animation: reveza 13.5s cubic-bezier(.2,.7,.2,1) infinite; }
.reveza > span:nth-child(2) { animation-delay: -9s; }
.reveza > span:nth-child(3) { animation-delay: -4.5s; }
@keyframes reveza {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: none; }
  29%  { opacity: 1; transform: none; }
  34%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveza { display: block; }
  .reveza > span { display: block; opacity: 1 !important; transform: none !important; }
  .reveza > span + span { margin-top: var(--e2); }
}
.areas-abre .peq { max-width: 56ch; }

/* 28/07: o bloco de números saiu. "Coloque algo mas sem números, algo mais
   comercial falando da especialidade, de auditorias e de como isso beneficia o
   cliente." Três afirmações curtas, cada uma com um título e uma frase — e
   cada uma termina no que muda para quem contrata, não no que o escritório faz.
   O filete dourado à esquerda é o mesmo traço da abertura, em escala menor. */
.areas-forte { display: flex; flex-direction: column; gap: var(--e5);
  padding-top: var(--e5); }
.areas-forte > div { padding-left: var(--e4); border-left: 2px solid #C9AE6B; }
/* 14,5px estava fora da escala do projeto — nem `--peq` (15) nem `--corpo`
   (18), um número solto — e servia parágrafos de 230 caracteres. Para o
   público declarado no invariante 11 (servidores e contribuintes de 50 a 65
   anos) isso é pequeno demais para ler três blocos seguidos. Sobe para 16px
   com entrelinha maior; o bloco cresce alguns pixels e nada mais se move,
   porque a coluna é flex. */
.areas-forte h3 { font-size: 18px; line-height: 1.3; color: var(--ink); }
.areas-forte p { font-size: 18px; line-height: 1.6; color: var(--ink-2);
  margin-top: var(--e2); max-width: 46ch; }

.areas-nota { margin-top: var(--e6); padding-left: var(--e4);
  border-left: 2px solid #C9AE6B; max-width: 46ch; }
.areas-nota h3 { font-size: 18px; line-height: 1.3; color: var(--ink); }
.areas-nota p { margin-top: var(--e2); font-size: 16px; line-height: 1.6;
  color: var(--ink-2); }

.areas-pe { margin-top: var(--e5); }

/* ---------- áreas de atuação, com ênfase por rolagem ----------
   27/07: as áreas saíram de dentro do .hero. A textura da primeira seção
   corria por trás delas e o gradiente as deixava sobre chão progressivamente
   mais escuro — na direção aprovada a textura termina e vem uma faixa limpa. */
/* 28/07: "a sombra anterior está ofuscando um pouco a frase áreas de atuação".
   A placa escura projeta 46px de sombra para baixo, e o rótulo começava a 96px
   — dentro da cauda. 128px tira o rótulo da penumbra sem afastar a lista. */
.areas-secao { background: var(--paper); padding-block: var(--e10) var(--e8); }
.areas { border-top: 1px solid var(--linha); }
.area {
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--e5);
  padding-block: var(--e5); border-bottom: 1px solid var(--linha);
  position: relative;
  transition: padding-left .42s cubic-bezier(.2,.7,.2,1);
}
.area::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acento); transform: scaleY(0); transform-origin: top;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
/* 27/07 — a pedido do Moabe: todas FECHADAS por padrão; abre só com mouse, toque ou teclado.
   "Fechada" agora significa detalhe recolhido — o título e a descrição permanecem em tinta
   cheia, para a seção não nascer apagada. Antes, fechada apagava tudo e a seção parecia morta. */
/* 03/08: o numeral usava --ink-3, que o af.css documenta como "5,00:1 sobre
   --paper". Cinco já era o piso justo, e ao reforçar a gravura das áreas eu
   comi a margem: a varredura mediu 4,39:1 no celular, abaixo do mínimo de 4,5.
   Não é caso de afrouxar o teste — é caso de escurecer o numeral. Fica entre
   o terciário e o secundário: mais escuro que era, ainda mais claro que o nome
   da área, para não competir com ele. */
.area__idx  { color: #4E5C63; font-size: var(--peq); padding-top: .55em; }
.area h3    { color: var(--ink); font-size: 27px; }
.area__desc { color: var(--ink-2); margin-top: var(--e2); }
.area__frentes {
  font-size: var(--peq); color: var(--ink-2); margin-top: 0; max-width: 74ch;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .3s ease, max-height .4s cubic-bezier(.2,.7,.2,1), margin-top .4s ease;
}
.area__ir { font-size: var(--peq); color: var(--ink-3); white-space: nowrap; padding-top: .7em;
  transition: color .28s ease; }

.area.acesa { padding-left: var(--e5); }
.area.acesa::before { transform: scaleY(1); }
.area.acesa .area__ir { color: var(--ink); }
.area.acesa .area__frentes { opacity: 1; max-height: 8em; margin-top: var(--e3); }
.area { cursor: pointer; }

/* ---------- teses e precedentes ---------- */
.teses { display: grid; grid-template-columns: 3fr 7fr; gap: var(--e7); align-items: start; }
/* O filete do julgado é inteiro, e o que responde ao mouse é a ESPESSURA.
   A luz que descia por ele passava do fim do traço e continuava para baixo —
   um segmento animado por `translate` não sabe onde a régua termina, e
   `overflow: hidden` no cartão cortaria o texto junto. Engordar não tem esse
   problema: a animação acontece dentro do próprio traço.

   A curva tem um empurrão além do valor final (o 1,55 do terceiro parâmetro),
   então ele engrossa, passa um pouco e assenta — é o que faz parecer gesto e
   não troca de estado. E volta sozinho ao sair, porque é transição e não
   animação com `forwards`. */
.tese { position: relative; padding-left: var(--e5); }
.tese::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acento);
  transition: width .42s cubic-bezier(.34, 1.55, .64, 1), background-color .3s ease;
}
.tese:hover::before, .tese:focus-within::before { width: 6px; }
.tese + .tese { margin-top: var(--e6); }
.tese h3 { margin-top: var(--e1); }
.tese__k { margin-bottom: var(--e2); }
.tese__acoes { display: flex; gap: var(--e4); margin-top: var(--e3); font-size: var(--peq); }

/* ---------- escritório ---------- */
.escritorio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: start; }
.escritorio__lado { padding-top: calc(var(--kicker) * 1.4 + var(--e4)); }

/* ---------- faixa escura COM FOTOGRAFIA (a "T1c") ----------
   28/07, escolha do Moabe para "Teses e precedentes". A sala de audiência entra
   no fundo inteiro e a seção inverte: fundo escuro, texto claro. É a opção que
   dá mais presença à imagem — e a que exigiu reordenar a página, porque duas
   faixas escuras seguidas apagariam as duas. */
/* ---------- TESES E PRECEDENTES ----------
   Reformulada em 03/08. Ele escolheu a pele "E" e a organização nova.

   O que saiu: a FOTOGRAFIA. "Ficou escura demais e não gostei da foto de fundo
   nem da organização do texto." A foto obrigava um véu pesado para o texto ler,
   e o véu comia a foto — os dois brigavam pelo mesmo espaço e nenhum ganhava.

   O que entrou: um gradiente de grafite com TRAMA FINA por cima, o mesmo
   carbono de 16px que já veste a faixa escura do escritório. É matéria sem ser
   assunto: dá superfície ao fundo sem disputar com a leitura, e amarra as duas
   faixas escuras da home pelo mesmo tecido.

   E a organização: o cabeçalho ocupa a largura inteira, e os SEIS julgados
   descem para uma grade de três. Antes eram três numa coluna estreita, com os
   outros três escondidos atrás de um revezamento — informação que existe e não
   se vê. */
.faixa--teses { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, #1E2528, #2C3438 60%, #232A2D);
  color: var(--sobre-escuro); }
/* 03/08: "quero uma imagem atras, nao apenas o fundo grafite". Ela volta —
   mas no papel que a pele E deu ao fundo: MATERIA, nao assunto. Fica embaixo
   da trama, dessaturada e a 26%, sob um veu vertical que fecha onde correm os
   cartoes. E' o oposto da versao antiga, em que a foto mandava e o veu tinha
   de brigar com ela. */
.faixa--teses::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("midia/_hero/trib-05.webp?v=f0a2cc41") center 38% / cover no-repeat;
  opacity: .26; filter: grayscale(.45) contrast(.9);
}
.faixa--teses::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --fio: rgb(255 255 255 / .055);
  background-image:
    repeating-linear-gradient(45deg,  var(--fio) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, var(--fio) 0 1px, transparent 1px 6px);
  background-size: 16px 16px, 16px 16px, 100% 100%;
  background-image:
    repeating-linear-gradient(45deg,  var(--fio) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, var(--fio) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgb(28 34 37 / .58), rgb(28 34 37 / .74));
}
.faixa--teses > .env { position: relative; z-index: 1; }

.env.teses { display: block; }
.teses > .pilha { max-width: 58ch; margin-bottom: var(--e8); }
.teses > .pilha h2 { max-width: 22ch; }

.faixa--teses h2, .faixa--teses .tese h3 { color: #F7F4ED; }
.faixa--teses .peq, .faixa--teses .tese p { color: #DED8CC; }
.faixa--teses .kicker { color: #CFC7B8; }
.faixa--teses .tese__k { color: #D3BC84; }
.faixa--teses .link { color: #EFEBE2; border-bottom-color: rgb(239 235 226 / .55); }
.faixa--teses .link:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.faixa--teses .btn { color: #EFEBE2; border-color: rgb(239 235 226 / .5); }
.faixa--teses .btn:hover { border-color: #EFEBE2; }

/* 03/08: "coloque uma leve sombra translúcida e degradê atrás da parte que
   tenha texto e quadros para melhorar o contraste". Não é véu de seção inteira
   — isso já foi tentado e é o que apagava a fotografia. É uma sombra ancorada
   ONDE HÁ TEXTO: começa no alto à esquerda, onde mora o cabeçalho, e desce
   cobrindo a faixa dos cartões, soltando no canto direito, que é justamente
   onde a foto pode aparecer. */
.faixa--teses .env::before {
  content: ""; position: absolute; inset: -6% -8% -10% -12%; z-index: -1;
  pointer-events: none; border-radius: 40%;
  /* 03/08: "pode ter uma sombra mais forte na parte atras dos cards". Sobe de
     .58/.48 para .74/.68, e a mancha de baixo alarga para cobrir as duas
     linhas de cartoes inteiras. A borda direita continua solta: e' o unico
     pedaco em que a fotografia pode aparecer, e apaga-la seria voltar ao
     problema que motivou toda a reformulacao. */
  background:
    radial-gradient(60% 44% at 20% 14%, rgb(14 19 22 / .74), transparent 76%),
    radial-gradient(88% 72% at 42% 68%, rgb(14 19 22 / .68), transparent 80%);
  filter: blur(30px);
}
.faixa--teses .env { position: relative; }

/* O CARTÃO. A superfície translúcida a 4 % de branco levanta o julgado do
   fundo sem virar caixa branca, e o filete dourado no topo é o mesmo traço da
   abertura das áreas — a casa se repetindo, não um enfeite novo.
   03/08: ganhou também um degradê próprio, mais denso no topo, onde ficam o
   rótulo da corte e o título — as duas linhas mais claras do cartão. */
.faixa--teses .tese {
  background: linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .028));
  backdrop-filter: blur(2px);
  padding: var(--e5);
  border-top: 2px solid #C9AE6B; max-width: none;
  display: flex; flex-direction: column; height: 100%;
}
.faixa--teses .tese::before { display: none; }
/* as ações no PÉ. É isto que faz a grade ler como grade: os títulos começam
   juntos e os links terminam juntos, mesmo com resumos de tamanhos diferentes.
   Ele apontou o contrário — "alguns ficaram mais altos, fugindo da grade" —, e
   a causa medida era outra: 32px de margin-top herdados do tempo em que os
   julgados eram empilhados numa coluna. Numa grade, o espaço vem do gap. */
.faixa--teses .tese__acoes { margin-top: auto; padding-top: var(--e4); }
.faixa--teses .tese + .tese { margin-top: 0; }

.faixa--continua { padding-top: 0; }
.faixa--continua::after { display: none; }
.faixa--escura:has(+ .faixa--continua) { box-shadow: none; }
/* mas a última do par continua projetando sombra na seção clara seguinte */
.faixa--continua { z-index: 1; box-shadow: 0 22px 40px -20px rgb(6 14 16 / .48); }
.ferramentas { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e4); }
.ferramentas a { text-decoration: none; display: flex; justify-content: space-between;
  gap: var(--e4); padding-block: var(--e3); border-bottom: 1px solid rgb(255 255 255 / .14); }
.ferramentas a:hover { color: #fff; }

/* 27/07: aqui viviam .equipe e .pessoa, de uma versão anterior dos cartões.
   Nenhuma das duas classes existe mais no markup — mas `.pessoa__foto` ainda
   pintava `background: var(--linha)`, e era ESSE o painel que sobrava atrás do
   retrato na página da pessoa, depois de eu já ter tirado o dos cartões. */

/* ---------- conteúdo: cartão de artigo com imagem reservada ----------
   27/07, pedido do Moabe: o artigo precisava de uma imagem inicial. Reserva o
   mesmo tipo de bloco que a equipe já usa para retrato — cor sólida da escala
   neutra até a imagem (gerada ou real) entrar, nunca placeholder "quebrado". */
.artigos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--calha);
  margin-top: var(--e6); }
.artigo-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.artigo-card__img { aspect-ratio: 16/10; background: var(--linha); position: relative; overflow: hidden; }
.artigo-card__img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.artigo-card:hover .artigo-card__img img { transform: scale(1.04); }
.artigo-card__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.artigo-card:hover .artigo-card__img::after, .artigo-card:focus-visible .artigo-card__img::after { transform: scaleX(1); }
.artigo-card__corpo { padding-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.artigo-card h3 { font-size: 20px; transition: color .25s ease; }
.artigo-card:hover h3 { color: var(--acento); }
.artigo-card__ir { margin-top: auto; padding-top: var(--e3); font-size: var(--peq); color: var(--ink-3);
  transition: color .25s ease, transform .25s ease; display: inline-block; }
.artigo-card:hover .artigo-card__ir { color: var(--acento); transform: translateX(3px); }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding-block: var(--e7); }

/* ---------- botão de menu no celular ---------- */
.menu__btn { display: none; }

/* ---------- carrossel: usado no celular para teses e artigos ---------- */
/* 30/07 — de trilho de arrastar para SLIDE.
   "não coloque essa barra para arrastar", "coloque para ir passando como um
   slide", "no mobile ficou grudado na tela do lado esquerdo, não pode".

   Três decisões e o porquê de cada uma:

   · a SANGRIA saiu. Era ela que colava o cartão na borda: o trilho puxava
     `margin-inline: -margem` para vazar de ponta a ponta e devolvia o espaço
     como `padding-inline`. Só que `scroll-snap-align: start` encosta no início
     do PORTO DE ROLAGEM, que fica antes do padding — então o cartão parava
     grudado no vidro. Sem sangria, o slide ocupa a coluna do texto e respeita
     a margem da página como todo o resto;

   · a coluna passou de 86 % para 100 %. Com 86 % aparecia um naco do cartão
     seguinte, que era a pista de que havia mais. Num slide que anda sozinho
     essa pista vira ruído — e o público-padrão (50 a 65) ganha mais com um
     cartão inteiro e legível do que com dois pedaços;

   · a barra some, mas o ARRASTO fica. `scroll-snap` continua ali: quem quiser
     passar com o dedo, passa. O que sai é o retângulo cinza do sistema. E a
     pista que ele dava é reposta pelos PONTOS — sem eles, saber que há mais
     conteúdo dependeria de esperar o slide virar, e o piso de legibilidade
     proíbe affordance que só existe em movimento. */
@media (max-width: 860px) {
  .trilho, .equipe-cartoes--advs {
    display: grid;
    /* precisa zerar: .artigos e .equipe declaram grid-template-columns e venciam,
       espremendo os itens em colunas de ~110px em vez de virar carrossel. */
    grid-template-columns: none !important;
    grid-auto-flow: column; grid-auto-columns: 100%;
    gap: var(--e4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .trilho::-webkit-scrollbar,
  .equipe-cartoes--advs::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .trilho > *, .equipe-cartoes--advs > * { scroll-snap-align: start; }
  /* a dica de arrastar dá lugar aos pontos */
  .trilho__dica { display: none; }
  /* Dentro do carrossel o cartão seguinte está clipado pela rolagem horizontal,
     e o IntersectionObserver não dispara para ele. Se ele também nascesse
     invisível, sumiria a pista de que há mais para ver. */
  .trilho > .rev, .equipe-cartoes > .rev { opacity: 1; transform: none; }
}

/* ---------- pontos do slide ----------
   Repõem a informação que a barra de rolagem dava: quantos são e onde estou.
   O alvo de toque tem 44px (piso do invariante 11) mesmo com o ponto tendo 8 —
   quem tem 60 anos não acerta um alvo de 8px, e errar aqui troca de slide. */
.pontos { display: flex; justify-content: center; gap: 0; margin-top: var(--e2); }
.pontos button {
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.pontos button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: .3;
  transition: opacity .3s ease, scale .3s cubic-bezier(.34, 1.55, .64, 1);
}
.pontos button[aria-current="true"]::before { opacity: 1; scale: 1.35; }
.pontos button:focus-visible { outline: 2px solid var(--acento); outline-offset: -6px; }
.faixa--escura .pontos { color: var(--sobre-escuro); }
.faixa--escura .pontos button:focus-visible { outline-color: var(--sobre-escuro); }
@media (min-width: 861px) { .pontos { display: none; } }
/* ---------- os julgados giram ----------
   28/07: a caixa rolável saiu — "a barra de rolagem ficou muito feia", e ela
   ficava mesmo: barra nativa dentro de uma seção escura é um retângulo cinza
   de sistema no meio da fotografia. As setas saíram junto.

   No lugar, páginas de três que se revezam a cada 10 s. É o mesmo mecanismo da
   manchete que se reveza, e pela mesma razão: as duas páginas ocupam a MESMA
   célula de grade, então a caixa fica do tamanho da maior e nada salta.

   Duas coisas que não são enfeite:
     · o giro PARA quando o mouse entra ou o teclado chega. Conteúdo que se
       move sozinho e não pode ser detido reprova em WCAG 2.2.2, e aqui seria
       pior que reprovar — alguém lendo o terceiro julgado perderia a linha
     · quem pede movimento reduzido vê TODAS as páginas empilhadas, e o
       revezamento simplesmente não existe
   ============================================================ */
@media (min-width: 861px) {
  /* cada página de três vira uma LINHA da grade */
  .tese-pag { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--e7); align-items: stretch; }
  .tese-pag + .tese-pag { margin-top: var(--e7); }
  .trilho__dica { display: none; }
}
@media (max-width: 860px) {
  /* no celular o trilho já era carrossel de arrastar: as páginas somem como
     caixa (display: contents) e os cartões voltam a ser filhos diretos */
  .tese-pag { display: contents; }
}
@media (prefers-reduced-motion: reduce) {
  .tese-pag { opacity: 1 !important; visibility: visible !important;
    grid-area: auto !important; }
    .tese-pag + .tese-pag { margin-top: var(--e6); }
}

/* ---------- celular ---------- */
@media (max-width: 860px) {
  /* NAVEGAÇÃO — antes o menu simplesmente desaparecia e nada o substituía.
     Agora existe um botão que abre a lista. */
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--linha); box-shadow: 0 10px 24px rgb(0 0 0 / .09);
  }
  .menu.aberto { display: flex; }
  .menu a { padding: var(--e4) var(--margem); font-size: 17px; color: var(--ink);
    border-top: 1px solid var(--linha); }
  .menu__btn {
    display: inline-flex; align-items: center; gap: var(--e2);
    min-height: 44px; padding: var(--e2) var(--e3); margin-left: auto;
    background: transparent; border: 1px solid var(--linha-2); border-radius: var(--raio);
    font: inherit; font-size: var(--peq); color: var(--ink); cursor: pointer;
  }
  .menu__btn .barras { display: block; width: 16px; height: 9px;
    border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  /* 28/07: eu tinha clareado os LINKS do menu sobre a placa escura e esqueci o
     botão "Menu", que só existe no celular — tinta escura sobre chão escuro,
     1,1:1. Achado pelo verificador depois de ele passar a enxergar camada de
     fundo com z-index negativo; antes desse conserto, passava batido. */
  .pg-home .topo:not(.encolhido) .menu__btn {
    color: var(--sobre-escuro); border-color: rgb(235 242 243 / .45); }
  .topo { position: sticky; }
  .topo__env { position: relative; gap: var(--e4); }
  .marca { margin-right: 0; }
  :root { --alt-topo: 101px; }

  .topo.encolhido .topo__cta { display: none; }
  .flutua { left: 20px; right: 20px; justify-content: center; }
  .escritorio { grid-template-columns: 1fr; gap: var(--e6); }
  /* 30/07: no celular a LISTA sobe e os destaques descem. Uma coluna só, e a
     ordem passa a ser título → as quatro áreas → os três destaques → o link.
     Antes o visitante de telefone rolava três parágrafos institucionais antes
     de descobrir que existiam Tributário, Bancário, Servidor e Previdenciário —
     que é justamente o que ele veio procurar. */
  .areas-grade { grid-template-columns: 1fr; row-gap: var(--e6);
    grid-template-areas: "abre" "lista" "forte" "pe"; }
  .areas { margin-top: 0; }
  /* a gravura volta para trás da abertura: na coluna única a célula dos
     destaques desceu, e ela iria junto, aparecendo no meio da seção */
  .areas-grade::before { grid-area: abre; margin: -10% -12% -4% -12%; }
  .areas-forte { gap: var(--e4); padding-top: 0; }
  .areas-pe { margin-top: 0; }
  .teses { grid-template-columns: 1fr; gap: var(--e5); }
  .tese + .tese { margin-top: 0; }          /* no trilho, o espaço vem do gap */

  /* densidade: o celular pede menos respiro entre blocos, não menos hierarquia */
  /* 27/07, à noite: dizia "no celular o cartão é estático" e por isso 32px
     bastavam. Não é mais — ele cavalga nas duas larguras, e a metade de baixo
     mede 44px. Com 32 a primeira área ficava 11px POR BAIXO do cartão; com 64
     sobravam 21, ainda apertado ao lado dos 76 que o desktop ganhou. */
  /* 30/07: o pé era ZERO e o link "Ver as quatro áreas em detalhe" encostava na
     faixa escura seguinte — medido: 0px de folga no celular contra 64 no
     desktop. O zero fazia sentido quando a lista terminava a seção; deixou de
     fazer quando o link virou a última linha da grade. */
  .areas-secao { padding-block: var(--e9) var(--e7); }
  .area { grid-template-columns: 2.2rem 1fr; padding-block: var(--e4); gap: var(--e3); }
  .area__ir { grid-column: 2; padding-top: var(--e2); }
  .area h3 { font-size: 22px; }
  .area.acesa { padding-left: var(--e4); }
  .hero { padding-block: var(--e6) var(--e5); }
  .hero__grade { grid-template-columns: 1fr; gap: var(--e6); }
  /* a faixa de três volta a ser coluna: em 390px, três colunas dão 90px cada,
     e "Contestar uma cobrança" não cabe em 90px. Este bloco vem DEPOIS da
     regra base — foi tentado antes dela e perdeu por ordem, exatamente como
     a grade do desktop. */
  .pn-lista { grid-template-columns: 1fr; }
  .hero__principal h1 { font-size: clamp(34px, 9vw, 48px); max-width: none; }
  .hero__acoes { margin-top: var(--e5); }
  .hero__acoes { margin-top: var(--e5); }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn { justify-content: center; }
  .rodape { padding-block: var(--e6); padding-bottom: 88px; }
  .faixa { padding-block: var(--e6); }
  .ferramentas { gap: var(--e2); }  /* espaço do flutuante */
}


/* ---------- ferramentas: seção própria, não mais dentro do escritório ---------- */
.ferr-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5);
  margin-top: var(--e6); }
.ferr-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--e4);
  padding: var(--e5) 0; border-top: 1px solid var(--linha); text-decoration: none; color: inherit;
  transition: padding-left .28s cubic-bezier(.2,.7,.2,1); }
.ferr-item:hover { padding-left: var(--e3); }
.ferr-item__n { font-family: 'Newsreader', serif; font-size: 21px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.ferr-item h3 { color: var(--ink); }
.ferr-item p { color: var(--ink-2); font-size: var(--peq); margin-top: var(--e2); max-width: 46ch; }
.ferr-item .meta { display: inline-block; margin-top: var(--e3); font-size: var(--peq);
  color: var(--acento); }
.ferr-item:hover .meta { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- equipe: tratamento próprio, diferente das áreas ---------- */
.equipe-cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--calha);
  margin-top: var(--e6); }
.pcartao { text-decoration: none; color: inherit; display: block; }
/* 27/07: o painel de cor atrás do retrato saiu — lido como "foto com fundo
   branco". Os recortes agora ficam direto sobre a página, e o que os assenta é
   uma sombra elíptica no chão, não uma caixa. A unidade entre sete fotos de
   sessões diferentes passou a vir da equalização de cor
   (ver midia/tratar_retratos.py), não do painel. */
.pcartao__foto { aspect-ratio: 3/4; position: relative; }
.pcartao__foto::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 3px; height: 14px;
  background: radial-gradient(ellipse at center, rgb(16 26 30 / .17), transparent 72%);
  transition: opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1);
}
/* O recorte original termina em corte reto na cintura. Com o painel atrás isso
   passava por borda do painel; sem ele, virava foto cortada. O esmaecimento nos
   últimos 12% dissolve a aresta, e a sombra elíptica logo abaixo é o que assenta
   a figura no chão. */
.pcartao__foto img { width: 100%; height: 100%; object-fit: contain;
  object-position: center bottom; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.pcartao:hover .pcartao__foto img { transform: translateY(-5px) scale(1.02); }
.pcartao:hover .pcartao__foto::before { opacity: .55; transform: scaleX(.9); }
/* a marca do canto cresce ao passar o mouse — nada de filete lateral, que é a
   gramática das áreas de atuação */
.pcartao__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.pcartao:hover .pcartao__foto::after, .pcartao:focus-visible .pcartao__foto::after {
  transform: scaleX(1); }
.pcartao h3 { margin-top: var(--e3); font-size: 19px; transition: color .25s ease; }
.pcartao:hover h3 { color: var(--acento); }
.pcartao__esp { font-size: var(--peq); color: var(--ink-2); margin-top: var(--e1); }
.pcartao__oab { font-size: 13px; color: var(--ink-3); margin-top: var(--e1);
  font-variant-numeric: tabular-nums; }
.pcartao__areas { font-size: 13px; color: var(--ink-3); margin-top: var(--e2);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin-top .35s ease; }
.pcartao:hover .pcartao__areas, .pcartao:focus-visible .pcartao__areas {
  max-height: 4em; opacity: 1; }

/* ---------- os retratos, agora sobre a faixa escura ----------
   O recorte não muda; o que muda é tudo que estava calibrado para papel:

   · a sombra elíptica do chão é tinta escura — sobre escuro ela some, e a
     figura fica boiando. Virou um halo CLARO, que é como uma pessoa se assenta
     num fundo escuro: pela luz que reflete no chão, não pela sombra
   · o esmaecimento da aresta agora dissolve no escuro, e não no branco: sem
     mexer nele, a cintura recortada voltaria a aparecer
   · o acento #14515C é escuro demais para marcar hover aqui; passa ao dourado
     claro, o mesmo do botão principal da primeira seção */
.faixa--escura .pcartao__foto::before {
  background: radial-gradient(ellipse at center, rgb(214 235 240 / .16), transparent 72%);
  height: 18px; left: 10%; right: 10%;
}
.faixa--escura .pcartao__foto img {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.faixa--escura .pcartao__foto::after { background: #C6B994; }
.faixa--escura .pcartao h3 { color: var(--sobre-escuro); }
.faixa--escura .pcartao:hover h3 { color: #D6CBAA; }
.faixa--escura .pcartao__esp { color: var(--sobre-escuro-2); }
.faixa--escura .pcartao__oab,
.faixa--escura .pcartao__areas { color: #93A8AC; }
.faixa--escura .trilho__dica { color: var(--sobre-escuro-2); }

@media (max-width: 860px) {
  .ferr-lista { grid-template-columns: 1fr; gap: 0; }
  /* A regra de slide dos advogados está no bloco do carrossel, acima. Aqui
     ficam só as duas coisas que valem para os cartões em si no celular.
     30/07: a regra antiga vivia aqui e valia para TODO .equipe-cartoes — o
     `!important` dela alcançava também o par de analistas, que deveria ser
     uma grade de duas colunas e virava carrossel de dois itens. */
  .pcartao__areas { max-height: 4em; opacity: 1; }   /* no toque não há hover */
  .marca img { width: 168px; }
  .topo.encolhido .marca img { width: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcartao__areas { max-height: 4em; opacity: 1; }
}

/* Cinco advogados numa grade de quatro deixavam o quinto sozinho numa segunda
   fila, com três vãos vazios ao lado. auto-fit acomoda os cinco em uma fila só
   e continua correto se a equipe mudar de tamanho. */
.equipe-cartoes--advs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* o bloco de operação é menor — dois cartões não ocupam a largura dos quatro */
.equipe-cartoes--apoio { grid-template-columns: repeat(4, 1fr); }
.equipe-cartoes--apoio .pcartao { grid-column: span 1; }
@media (max-width: 860px) { .equipe-cartoes--apoio { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PÁGINA DE CAMPANHA — o dialeto das 23 situações
   05/08, refeita. A primeira versão foi rejeitada: "página totalmente estática,
   múltiplas cores, design ruim, poluído". A causa era uma só — eu desenhei uma
   landing nova em vez de herdar a home, que o PROJECT_DESIGN define como
   sistema-mãe desde julho.

   Agora a seção É a `.hero` da home: mesma placa, mesma gravura de contorno,
   mesma luz que atravessa devagar, mesma tipografia. A fotografia saiu — era
   ela que trazia a segunda e a terceira cor e brigava com a paleta.

   O que sobra aqui é só o DIALETO: a pílula do julgado, os selos e o quadro da
   direita. Nada disso inventa cor nova; tudo usa o dourado que já é da casa.
   ============================================================ */
.cmp { padding-block: var(--e9) var(--e7); }
.cmp__env { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--e8); align-items: center; }
.cmp__texto { max-width: 40rem; }

.cmp-marca { display: inline-flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e4); padding: 9px 16px; border-radius: 999px;
  background: rgb(201 174 107 / .12); border: 1px solid rgb(201 174 107 / .4);
  color: #E4CE96; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease; }
.cmp-marca:hover { background: rgb(201 174 107 / .2); border-color: rgb(201 174 107 / .68); }
.cmp-marca__p { width: 7px; height: 7px; border-radius: 50%; background: #C9AE6B; flex: none; }

.cmp__h1 { font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -.014em;
  color: #FBF9F5; text-wrap: balance; }
.cmp__lead { margin-top: var(--e4); font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.6; color: var(--sobre-escuro-2); max-width: 36rem; }
.cmp__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.cmp__selos { display: flex; flex-wrap: wrap; gap: var(--e4); margin-top: var(--e5); }
.selo { display: inline-flex; align-items: center; gap: 7px; font-size: 15px;
  color: var(--sobre-escuro-2); }
.selo::before { content: "✓"; color: #C9AE6B; font-weight: 700; }

/* ---------- o quadro da direita ---------- */
.cmp-q { background: rgb(255 255 255 / .055); border: 1px solid rgb(235 242 243 / .16);
  border-top: 2px solid #C9AE6B; padding: var(--e6); color: var(--sobre-escuro); }
.cmp-q__k { font-size: 12px; letter-spacing: .17em; text-transform: uppercase;
  color: #C9AE6B; }
.cmp-q__t { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 25px;
  line-height: 1.22; margin-top: var(--e3); color: #FBF9F5; }
.cmp-q__r { margin-top: var(--e3); font-size: 17px; line-height: 1.6;
  color: var(--sobre-escuro-2); }
.cmp-q__pe { margin-top: var(--e4); font-size: 14px; line-height: 1.55;
  color: var(--sobre-escuro-2); }
.cmp-q--ferr .btn { margin-top: var(--e5); }
.cmp-q__corpo { margin-top: var(--e4); }
.cmp-q__l { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e4); padding: 11px 0; border-bottom: 1px solid rgb(235 242 243 / .12); }
.cmp-q__l span { font-size: 16px; color: var(--sobre-escuro-2); }
.cmp-q__l b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #FBF9F5; }
.cmp-q__dif { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e4); margin-top: var(--e4); padding-top: var(--e4);
  border-top: 2px solid #C9AE6B; }
.cmp-q__dif span { font-size: 16px; font-weight: 600; color: var(--sobre-escuro); }
.cmp-q__dif b { font-family: 'Newsreader', Georgia, serif; font-size: 30px; color: #E4CE96;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- as três provas ---------- */
.cmp-provas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e5); max-width: var(--largura); margin: var(--e8) auto 0;
  padding-inline: var(--margem); }
.cmp-prova { padding-left: var(--e4); border-left: 2px solid rgb(201 174 107 / .5); }
.cmp-prova b { display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(25px, 2.4vw, 32px); line-height: 1.05; color: #FBF9F5; }
.cmp-prova span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5;
  color: var(--sobre-escuro-2); max-width: 26ch; }

@media (max-width: 980px) {
  .cmp { padding-block: var(--e7) var(--e6); }
  .cmp__env { grid-template-columns: 1fr; gap: var(--e6); }
  .cmp-q { padding: var(--e5); }
  .cmp-provas { grid-template-columns: 1fr; gap: var(--e4); margin-top: var(--e6); }
  .cmp__acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- a abertura cabe na dobra, sem sacrificar as telas altas ----------
   05/08. Com oito assuntos, a dobra fechava em 1889x939 com 19px de sobra e
   cortava em 1440x900 e 1280x800 — que são as telas mais comuns de trabalho.
   Comprimir para todo mundo tiraria o ar de quem tem tela alta; então a
   compressão é condicional à ALTURA da janela, não à largura. Quem tem espaço
   continua com o respiro que o Moabe aprovou em 03/08. */
@media (min-width: 1000px) and (max-height: 940px) {
  .hero { padding-block: var(--e6) var(--e5); }
  .hero__grade { gap: var(--e5); }
  .hero__principal { gap: var(--e4); }
  .hero__principal h1 { font-size: clamp(30px, 3.9vw, 52px); }
  .hero__acoes { margin-top: var(--e5); }
  .pn .kicker { margin-bottom: var(--e2); }
  .pn-it { padding-block: var(--e2); }
  .pn-d { margin-top: 3px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .hero { padding-block: var(--e5) var(--e4); }
  .hero__principal h1 { font-size: clamp(28px, 3.3vw, 44px); }
  .hero__acoes { margin-top: var(--e4); }
  .hero__acoes .btn { min-height: 50px; }
  .pn-t { font-size: 15px; }
  .pn-d { font-size: 13px; }
}

/* ---------- os nove assuntos, numa grade 3x3 ----------
   05/08, terceira rodada. O carrossel saiu: com os nove visíveis de uma vez
   não sobrava o que passar, e movimento automático sem botão de pausa reprova
   no critério 2.2.2. "Ao menos duas fileiras" — são três, e a grade fecha
   exata em 3x3, sem card órfão numa linha sozinha.

   O texto encolheu de três frases para uma linha, e é isso que faz caber. */
.pn { min-width: 0; }
.pn-lista { display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--e6); row-gap: 0;
  border-top: 1px solid var(--linha-2); margin-top: var(--e3); }
@media (max-width: 1000px) { .pn-lista { grid-template-columns: repeat(2, 1fr);
  column-gap: var(--e5); } }
/* no telefone é uma coluna e rola — três fileiras de 390px não caberiam na
   dobra de jeito nenhum, e espremer o card para caber quebraria a leitura */
@media (max-width: 620px) { .pn-lista { grid-template-columns: 1fr; } }

/* ---------- "por onde começar" à DIREITA, em duas colunas ----------
   05/08. Pedido do Moabe, com a área desenhada em vermelho: o lado direito da
   abertura estava vazio, e o painel morava embaixo da manchete.

   Nove itens em duas colunas dariam 4 linhas de 2 mais uma sobrando. Com
   `grid-auto-flow: column` e cinco linhas declaradas, a primeira coluna leva
   cinco e a segunda quatro — desce reto, sem card órfão atravessado no meio.

   Só a partir de 1200px: abaixo disso a manchete e duas colunas de cards não
   convivem, e o painel volta para baixo, onde já funcionava. */
@media (min-width: 1200px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: var(--e8); align-items: center; }
  .hero__principal { justify-content: center; }
  .hero__principal h1 { font-size: clamp(30px, 3.3vw, 50px); max-width: 12ch; }
  .pn { border-left: 1px solid var(--linha-2); padding-left: var(--e7); }
  .pn-lista { grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column; grid-template-rows: repeat(5, auto);   /* 5 + 5 */
    column-gap: var(--e6); }
}

/* a trilha da campanha corre sobre a placa escura, não sobre papel */
.cmp .trilha, .cmp .trilha span, .cmp .trilha a { color: #C6D6D8; }
.cmp .trilha a:hover, .cmp .trilha a:focus-visible { color: #FBF9F5; }

/* o link do quadro corre sobre a placa escura: o `.link` do site é da cor da
   tinta, que ali fica em 1,6:1 */
.cmp-q .link { color: #E4CE96; }
.cmp-q .link:hover, .cmp-q .link:focus-visible { color: #FBF9F5; }

/* Situação sem quadro à direita — reforma tributária e proteção patrimonial não
   têm tese, exemplo nem ferramenta. Sem isto a grade de duas colunas deixava
   metade da tela vazia, que é o defeito que o Moabe riscou de vermelho na
   seção de áreas em 05/08. */
.cmp--so-texto .cmp__env { grid-template-columns: 1fr; }
.cmp--so-texto .cmp__texto { max-width: 46rem; }
.cmp--so-texto .cmp__h1 { font-size: clamp(32px, 4.4vw, 56px); }

/* a linha de abertura da faixa de ferramentas é texto de leitura de 206
   caracteres, não legenda — sai de `--peq` para 17px */
.faixa--textura > .env > .peq { font-size: 18px; line-height: 1.6; }

/* 05/08 — PISO DE 18px NO CORPO (invariante 11 do DESIGN.md, público de 50 a 65).
   A chamada do cartão de artigo vinha em `.peq`, que é 15px porque é a medida de
   LEGENDA. Só que ela tem 200 caracteres: quem escreve duzentos caracteres está
   escrevendo corpo, e o nome da classe não muda o que a coisa é. O medidor acha
   esses casos por contagem de caractere, não por classe — é a única forma de
   pegar legenda usada como parágrafo. */
.artigo-card__corpo .peq { font-size: 18px; line-height: 1.55; }