/* ==========================================================================
   Site do escritório — ribeirobrandao.com.br
   Estrutura e ritmo de seções inspirados em um site de referência; texto,
   conteúdo e código são nossos. Cor da casa (esmeralda) no lugar do laranja.
   Sem nome de advogado, sem OAB e sem nome de escritório — ver o bloco
   comentado no rodapé do index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes — todas hospedadas aqui, nada vem do Google.
   Satoshi: Indian Type Foundry, gratuita para uso comercial (Fontshare).
   Bodoni Moda e Parisienne: SIL Open Font License.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("fontes/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* Fraunces entrou no lugar da Bodoni Moda em 10/08/2026 (escolha do usuário):
   serifa mais macia, mesma elegância. O arquivo da Bodoni segue na pasta,
   de reserva, sem ser carregado. */
@font-face {
  font-family: "Fraunces";
  src: url("fontes/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Parisienne";
  src: url("fontes/Parisienne.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Cookie: o manuscrito do monograma "rb" — proposta 09 do painel de logo
   (19\08\2026). SIL Open Font License, hospedada aqui como as outras. */
@font-face {
  font-family: "Cookie";
  src: url("fontes/Cookie.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores da casa — as mesmas do Sistema RB */
  --verde: #059669;         /* esmeralda: traços, linhas, detalhes */
  /* Esmeralda profundo, escolhido em 09/08/2026: fundo de botão e texto sobre
     branco. Dá 7,68:1 com texto branco — folga confortável para AA. */
  --verde-escuro: #065F46;
  --verde-claro: #34d399;   /* texto e traços sobre fundo escuro */
  --verde-vivo: #10b981;    /* títulos display sobre preto */
  --verde-suave: #ecfdf5;

  --preto: #14171c;         /* faixas escuras */
  --preto-2: #1c2027;       /* segunda coluna das faixas escuras */
  --preto-3: #0f1114;       /* a faixa mais escura (Nossa atuação) */
  --branco: #ffffff;
  /* Fundos claros neutros desde 10/08/2026: o esverdeado saiu, o cinza da
     marca ("Jurídico") entrou como cor de apoio. */
  --claro: #f5f6f7;
  --claro-2: #eef0f2;
  --cinza-rodape: #f0f1f2;
  --borda: #e2e4e6;

  --texto: #24282c;
  --texto-suave: #6a7178;
  --sobre-escuro: #f0f0f0;
  --sobre-escuro-suave: #a3aeaa;

  --sans: "Satoshi", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --display: "Fraunces", "Times New Roman", Georgia, serif;
  --script: "Parisienne", "Segoe Script", cursive;

  --largura: 1240px;
  --topo-altura: 130px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px);
  scrollbar-color: #b9bec3 #f1f2f3; scrollbar-width: thin;
}
::selection { background: var(--verde); color: var(--branco); }
body {
  background: var(--branco);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* As fotos recebem o mesmo tratamento: saturação um ponto abaixo, para
   conversarem entre si e com a paleta da casa. */
img.foto { object-fit: cover; filter: saturate(.92); }
/* Anel de foco visível para quem navega pelo teclado */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.area { max-width: var(--largura); margin: 0 auto; padding: 0 40px; }

/* Os dois pesos que o site usa para os títulos de duas linhas.
   Regra da casa: nada passa de 700 — o site inteiro fica mais leve. */
.leve  { font-weight: 300; }
.forte { font-weight: 700; }
b, strong { font-weight: 650; }

/* --------------------------------------------------------------------------
   Topo fixo
   -------------------------------------------------------------------------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  /* Branco por baixo; o degradê fica no ::before e vai sumindo conforme a
     página desce (--clareia sai do site.js, 0 no topo → 1 rolado), então a
     faixa clareia até o branco puro, como no site de referência. */
  background: #ffffff;
  /* Sem filete na base: com a página rolada ele lia como uma linha clara
     riscando o degradê do herói (20/08/2026) — a sombra separa sozinha. */
  transition: box-shadow .3s ease;
}
.topo::before {
  content: ""; position: absolute; inset: 0;
  /* Degradê horizontal bem suave — branco na esquerda, cinza na direita —
     o mesmo da abertura, para topo e herói lerem como uma superfície só
     (artifício do site de referência). */
  background: linear-gradient(90deg, #ffffff 0%, #f5f6f8 45%, #e9ecef 100%);
  opacity: calc(1 - var(--clareia, 0));
  transition: opacity .15s linear;
  pointer-events: none;
}
.topo.rolado { box-shadow: 0 2px 14px rgba(20, 23, 28, .06); }
.topo__area {
  max-width: var(--largura); margin: 0 auto; padding: 0 40px;
  height: var(--topo-altura);
  display: flex; align-items: center; gap: 22px;
  position: relative;
  transition: height .3s ease;
}
/* Com a página rolada a faixa afina, para ocupar menos tela na leitura. */
.topo.rolado .topo__area { height: 86px; }
/* A marca é o monograma manuscrito "rb" (proposta 09 do painel de logo,
   19/08/2026) com a palavra "jurídico" logo depois, na mesma Cookie e em
   corpo menor (pedido de 20/08/2026). Os dois assentam pela linha de base,
   não pelo centro: é o que faz a palavra parecer escrita junto do monograma,
   em vez de encostada nele.
   Em 30/08/2026 a palavra virou "advocacia" (em 62% do corpo, para compensar
   que ela quase não tem haste nem rabo) e o usuário mandou VOLTAR no mesmo
   dia: preferiu "jurídico". Painel das 12 alternativas, se o assunto voltar,
   em Marketing/07 - Identidade RB/rodada8-rb-advocacia.html. */
.marca { display: inline-flex; align-items: baseline; flex-shrink: 0; }
/* O desenho do "rb" na Cookie fica alto dentro da própria caixa de texto;
   o empurrão de .06em desce a tinta até o centro visual da faixa. O scaleX
   alarga o desenho em 20% (pedido de 20/08/2026) sem mudar a caixa do texto —
   por isso a margem à direita, que devolve a folga comida pelo alargamento. */
.marca__rb { font-family: "Cookie", cursive; font-weight: 400; font-size: 5.7rem; letter-spacing: 0; line-height: .8; color: var(--preto); transform: translateY(.06em) scaleX(1.2); transform-origin: left center; margin-right: .24em; }
/* "jurídico" sai na mesma Cookie do monograma, em pouco mais da metade do
   corpo. Sem o scaleX — o alargamento é do desenho do "rb", não da palavra —
   e com um recuo de linha de base, porque o manuscrito assenta um tico acima
   do "rb" quando os dois dividem a mesma linha (subiu de -.05em para -.11em
   em 21/08/2026, a pedido: mais rente ao monograma). */
.marca__jur { font-family: "Cookie", cursive; font-weight: 400; font-size: 3.1rem; line-height: .8; color: var(--preto); position: relative; top: -.11em; transition: font-size .28s ease, opacity .2s ease; }
/* Ao rolar, a palavra se recolhe e sobra o monograma sozinho — o nome
   completo é coisa do alto da página. O encolhimento é por font-size,
   não por largura: com overflow:hidden o rabo do "j" e o acento do "í"
   seriam cortados, porque a caixa do texto é mais baixa que a tinta
   (line-height .8). Assim a palavra some junto e o menu escorrega para
   a esquerda sem solavanco. */
.topo.rolado .marca__jur { font-size: 0; opacity: 0; }
.marca__leve { font-family: var(--sans); font-weight: 300; font-size: 1.58rem; line-height: 1; color: var(--texto-suave); }

/* O menu vem alinhado à esquerda, logo depois da marca (como no site de
   referência); só o CONTATO fica na ponta direita. */
.topo__menu { display: flex; align-items: center; gap: 8px; margin-left: 34px; }
.topo__item {
  font-size: .89rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto); padding: 11px 16px; white-space: nowrap;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
/* Ao pousar o mouse o item escurece de leve, e no clique escurece mais um
   pouco — dois degraus de cinza acima do fundo do topo. */
.topo__item:hover { background: #e6e9ec; color: var(--preto); }
.topo__item:active { background: #dadee2; color: var(--preto); }

/* Grupo "Nossa atuação": ao pousar o mouse (ou focar pelo teclado) abre a
   lista com as duas áreas do escritório. */
.topo__grupo { position: relative; }
.topo__item--grupo { display: inline-flex; align-items: center; gap: 7px; }
.topo__seta { flex-shrink: 0; transition: transform .2s ease; }
.topo__grupo:hover .topo__seta,
.topo__grupo:focus-within .topo__seta { transform: rotate(180deg); }
.topo__submenu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 224px; padding: 8px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(20, 23, 28, .12);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Ponte invisível entre o item e a lista, para o mouse não "cair" no vão. */
.topo__submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.topo__grupo:hover .topo__submenu,
.topo__grupo:focus-within .topo__submenu {
  opacity: 1; visibility: visible; transform: translate(-50%, 10px);
}
.topo__submenu a {
  padding: 11px 14px; border-radius: 10px;
  font-size: .95rem; color: var(--texto); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.topo__submenu a:hover { background: var(--claro); color: var(--preto); }

.pilula {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .89rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid #c9cdd1; color: var(--texto);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pilula:hover { background: #e6e9ec; border-color: #b3b8bd; }
.pilula:active { background: #dadee2; border-color: #a8adb3; }
.topo__contato { flex-shrink: 0; margin-left: auto; }

.topo__hamburguer {
  display: none; width: 44px; height: 44px; margin-left: auto;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px;
}
.topo__hamburguer span {
  display: block; height: 2px; width: 24px; background: var(--preto); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.topo__hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-celular {
  position: fixed; inset: var(--topo-altura) 0 auto 0; z-index: 55;
  background: var(--branco); border-bottom: 1px solid var(--borda);
  box-shadow: 0 16px 40px rgba(20, 23, 28, .12);
  display: flex; flex-direction: column; padding: 8px 24px 20px;
}
.menu-celular[hidden] { display: none; }
.menu-celular a {
  display: flex; align-items: center; min-height: 50px;
  border-bottom: 1px solid var(--borda); font-size: 1.02rem;
}
.menu-celular a:last-child { border-bottom: 0; color: var(--preto); font-weight: 600; }

/* --------------------------------------------------------------------------
   Espaços de foto — ficam assim até as imagens reais entrarem no lugar.
   Não é "caixa vazia": é um campo com a marca ao fundo, para o site poder
   ficar no ar enquanto as fotos não chegam.
   -------------------------------------------------------------------------- */
.foto {
  position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(110% 90% at 76% 16%, rgba(52, 211, 153, .55), transparent 58%),
    linear-gradient(145deg, #0f7a58 0%, #0b5f45 46%, #123c31 100%);
  overflow: hidden;
}
.foto--folha { border-radius: 0 260px 0 260px; }
.foto--folha-inv { border-radius: 260px 0 260px 0; }

/* --------------------------------------------------------------------------
   Abertura
   -------------------------------------------------------------------------- */
.abertura {
  /* Respiro curto sob a faixa (o exagero de antes abria um vão branco) e o
     mesmo degradê horizontal do topo, emendando as duas partes. */
  padding: calc(var(--topo-altura) + 20px) 0 30px;
  background: linear-gradient(90deg, #ffffff 0%, #f5f6f8 45%, #e9ecef 100%);
}
/* A abertura usa a tela mais cheia que o resto do site; a figura ganhou mais
   coluna em 16/08/2026 (o usuário queria as fotos maiores) */
.abertura .area { max-width: 1460px; }
.abertura__grade {
  /* 4ª rodada de 20/08/2026: o letreiro ganhou mais lado (1fr → 1.16fr) e
     as fotos devolveram um pouco do palco, como o usuário pediu. */
  display: grid; grid-template-columns: 1.16fr 1.68fr; gap: 24px; align-items: center;
}
.script {
  font-family: var(--script); font-size: 2.15rem; line-height: 1.1;
  color: var(--texto-suave); margin-bottom: 10px;
}
/* As mensagens da abertura se revezam: empilhadas na mesma célula do grid,
   só a ativa fica visível — a altura é a da maior, nada pula. */
.abertura__quadros { display: grid; }
.abertura__quadro { grid-area: 1 / 1; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.abertura__quadro.ativo { opacity: 1; pointer-events: auto; }
/* Corpo levemente menor que o original: com 4.7vw a frase "Ainda há caminho."
   estourava a coluna e abria uma terceira linha, esticando o rotor inteiro
   (a pilha reserva a altura do quadro mais alto) e deixando um vão em branco
   nos outros quadros. Com 4.4vw todo título fecha em duas linhas. */
.abertura h1, .abertura__titulo {
  /* Acompanha a coluna do letreiro: com ela em 1.16fr (4ª rodada), 4.1vw
     volta a caber em duas linhas — conferido nos três títulos do rotor. */
  font-size: clamp(2.5rem, 4.1vw, 3.8rem);
  line-height: 1.05; letter-spacing: -.02em; color: var(--preto);
  margin-bottom: 14px;
}
.abertura h1 span, .abertura__titulo span { display: block; }
/* O destaque no cinza da marca: a voz leve do título usa o mesmo cinza do
   "Jurídico" do logo. */
.abertura h1 .leve, .abertura__titulo .leve { color: var(--texto-suave); }
.abertura__frases { margin-bottom: 20px; }
.abertura__frases p { font-size: 1.08rem; line-height: 1.6; color: var(--texto-suave); }
.abertura__frases .frase-forte { color: var(--texto); font-weight: 600; }
.abertura__acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* Botão discreto da abertura: sem massa preta, só o contorno — preenche no hover */
.botao.botao--discreto {
  background: transparent; color: var(--preto);
  border: 1.5px solid #b3b8bd; padding: 12px 26px; font-size: .8rem;
}
.botao.botao--discreto:hover {
  background: var(--preto); color: var(--branco); border-color: var(--preto);
  transform: none; box-shadow: 0 6px 18px rgba(20, 23, 28, .18);
}
.abertura__secundario { font-size: .9rem; font-weight: 600; color: var(--texto); transition: color .2s ease; }
.abertura__secundario:hover { color: var(--verde-escuro); }
.abertura__miudo { margin-top: 12px; font-size: .88rem; color: var(--texto-suave); }
/* A abertura entra de mansinho no carregamento — só para quem aceita movimento */
@media (prefers-reduced-motion: no-preference) {
  .abertura__texto > * { opacity: 0; transform: translateY(14px); animation: entrada .6s ease forwards; }
  .abertura__texto > *:nth-child(2) { animation-delay: .08s; }
  .abertura__texto > *:nth-child(3) { animation-delay: .16s; }
  .abertura__texto > *:nth-child(4) { animation-delay: .24s; }
  .abertura__texto > *:nth-child(5) { animation-delay: .3s; }
  .abertura__figura { opacity: 0; animation: entrada .8s ease .12s forwards; }
  @keyframes entrada { to { opacity: 1; transform: none; } }
}
/* A sangria até a borda direita (herdada da referência) SAIU em 16/08/2026:
   com os painéis de foto, ela cortava o terceiro retrato pela metade.
   A arte agora aparece inteira dentro da própria coluna. */
.abertura__figura { position: relative; }
/* Os três retratos, versão 20/08/2026 (3ª rodada, seguindo o exemplo do
   usuário): inclinação de nada para a DIREITA (2.5°), cantos redondos e o
   acabamento em duas camadas — o invólucro segura uma sombra discreta,
   jogada para baixo, e a foto dentro dele desmancha nas bordas (mais em
   cima/embaixo, um fio nas laterais) pelo par de máscaras retas. O tom
   vintage quente continua na foto. */
.abertura__paineis { position: relative; aspect-ratio: 1000 / 660; }
.abertura__painel {
  position: absolute; border-radius: 22px;
  transform: rotate(2.5deg);
  /* A sombra SAIU em 20/08 (4ª rodada): embaixo de uma borda que desmancha
     ela virava uma mancha cinza solta — sem ela, o pé da foto derrete
     limpo no degradê da página. */
  transition: transform .3s ease;
}
.abertura__painel img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  filter: sepia(.18) saturate(.88) contrast(1.08) hue-rotate(-6deg);
  /* Desmanche com curva (vários degraus, não uma reta): o esmaecer começa
     devagar, acelera no meio e morre suave — é o que deixa a transição
     homogênea com o fundo, sem a "linha" onde um fade linear começa. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, rgba(0,0,0,.25) 5%, rgba(0,0,0,.7) 11%, #000 18%, #000 82%, rgba(0,0,0,.7) 89%, rgba(0,0,0,.25) 95%, transparent 100%),
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 3%, #000 8%, #000 92%, rgba(0,0,0,.6) 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, rgba(0,0,0,.25) 5%, rgba(0,0,0,.7) 11%, #000 18%, #000 82%, rgba(0,0,0,.7) 89%, rgba(0,0,0,.25) 95%, transparent 100%),
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 3%, #000 8%, #000 92%, rgba(0,0,0,.6) 97%, transparent 100%);
  mask-composite: intersect;
}
/* Levita de leve sob o mouse — polimento, sem chamar atenção demais. */
.abertura__painel:hover { transform: rotate(2.5deg) translateY(-6px); }
/* Colados: cada vizinho invade 0,5% do anterior, com o central por cima.
   O direito termina a 103% do palco; a rotação de 2.5° alarga a caixa
   ~13px por lado, e a sangria total (~39px) ainda cabe no respiro de 40px
   da borda da tela, sem rolagem horizontal. */
.abertura__painel--esq  { left: 0; top: 12%; width: 34%; height: 86%; }
.abertura__painel--meio { left: 33.5%; top: 0; width: 44.5%; height: 100%; z-index: 2; }
.abertura__painel--dir  { left: 77.5%; top: 6%; width: 25.5%; height: 90%; }
.abertura__painel--meio img { object-position: 50% 30%; }
.abertura__painel--dir img  { object-position: 48% 50%; }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--preto); color: var(--branco);
  font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 16px 32px; border: 1px solid var(--preto); border-radius: 999px;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 23, 28, .28); }
.botao--escuro { background: var(--preto); border-color: var(--preto); }
.botao--escuro:hover { box-shadow: 0 10px 26px rgba(20, 23, 28, .3); }
/* Nas faixas escuras o botão inverte: branco com texto preto */
.golpes .botao, .chamada .botao {
  background: var(--branco); border-color: var(--branco); color: var(--preto);
}
.golpes .botao:hover, .chamada .botao:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }

/* --------------------------------------------------------------------------
   Como podemos ajudar — duas colunas escuras
   -------------------------------------------------------------------------- */
.ajuda { display: grid; grid-template-columns: 1fr 1fr; }
.ajuda__lado { background: var(--preto); padding: 92px 0; display: flex; }
.ajuda__lado--claro { background: var(--preto-2); }
.ajuda__caixa {
  width: 100%; max-width: calc(var(--largura) / 2); padding: 0 40px;
  margin-left: auto;
}
.ajuda__lado--claro .ajuda__caixa { margin: 0 auto 0 0; }
.ajuda h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em;
  color: var(--sobre-escuro); margin-bottom: 24px;
}
.ajuda h2 span { display: block; }
.ajuda h2 .leve { color: var(--sobre-escuro-suave); }
.ajuda__apoio { color: var(--sobre-escuro-suave); font-size: .95rem; margin-bottom: 26px; max-width: 420px; }

/* Seletor no molde da referência, vestido com a nossa identidade: caixa
   "SELECIONE" com borda esmeralda, painel escuro com busca e opções em caixa
   alta — a opção sob o mouse acende em esmeralda. Feito com details/summary:
   abre e fecha sem JavaScript; o filtro de busca é um extra do site.js. */
.seletor { position: relative; max-width: 460px; }
.seletor summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--verde-claro); border-radius: 4px;
  padding: 15px 16px 15px 18px;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sobre-escuro);
  transition: background .2s ease;
}
.seletor summary::-webkit-details-marker { display: none; }
.seletor summary:hover { background: rgba(52, 211, 153, .08); }
.seletor summary svg { width: 13px; height: 13px; color: var(--verde-claro); flex-shrink: 0; transition: transform .25s ease; }
.seletor[open] summary svg { transform: rotate(180deg); }
.seletor__painel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6;
  background: #191d23; border: 1px solid #2b3138; border-radius: 6px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  padding: 10px;
}
.seletor__busca {
  width: 100%; padding: 11px 12px; margin-bottom: 8px;
  background: var(--branco); color: var(--texto);
  border: 1px solid var(--verde-claro); border-radius: 3px;
  font-family: var(--sans); font-size: .9rem;
}
.seletor__lista { list-style: none; max-height: 300px; overflow: auto; scrollbar-width: thin; }
.seletor__vazia { padding: 11px 12px; background: #d9dcdf; color: #6a7178; font-size: .82rem; }
.seletor__opcao {
  display: block; padding: 12px;
  font-size: .8rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: #e8ebed; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.seletor__opcao:hover { background: var(--verde-escuro); color: var(--branco); }

/* --------------------------------------------------------------------------
   Títulos display (Bodoni em duas linhas)
   -------------------------------------------------------------------------- */
.display { font-family: var(--display); font-weight: 500; line-height: .98; letter-spacing: .01em; }
.display span { display: block; }
/* A fórmula da marca nos títulos: linha forte escura, linha leve cinza */
.display__l1 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); color: var(--sobre-escuro); }
.display__l2 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); color: var(--sobre-escuro-suave); }
.display--escuro .display__l1 { color: var(--preto); }
.display--escuro .display__l2 { color: var(--texto-suave); }
.display--alerta .display__l2 { color: var(--sobre-escuro); }

/* --------------------------------------------------------------------------
   Nossa atuação
   -------------------------------------------------------------------------- */
.atuacao { background: var(--preto-3); color: var(--sobre-escuro); padding: 110px 0; overflow: hidden; }
.atuacao__grade { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; }
.atuacao__intro { position: relative; }
/* A atuação fala mais alto que as outras seções */
.atuacao .display__l1, .atuacao .display__l2 { font-size: clamp(2.6rem, 5vw, 4.3rem); }
.atuacao__texto { color: var(--sobre-escuro-suave); font-size: 1.12rem; line-height: 1.7; margin-top: 30px; max-width: 470px; }

.areas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-content: start; }
.areas a {
  display: block; padding: 19px 4px 17px;
  border-bottom: 2px solid rgba(205, 210, 214, .42);
  transition: border-color .2s ease, transform .2s ease;
}
.areas a:hover { border-color: var(--verde-claro); transform: translateX(4px); }
.areas span { display: block; font-weight: 300; font-size: 1.3rem; color: #cdd2d6; line-height: 1.3; }
.areas b { display: block; font-weight: 700; font-size: 1.62rem; color: #ffffff; line-height: 1.32; }

/* --------------------------------------------------------------------------
   Faixa de imagem (carrossel)
   -------------------------------------------------------------------------- */
.faixa { background: var(--preto-3); }
.faixa__palco { position: relative; overflow: hidden; height: 520px; }
.faixa__quadro {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s ease;
}
.faixa__quadro.ativo { opacity: 1; }
/* Banho de luz e sombra sobre as fotos da faixa — acabamento de cinema */
.faixa__quadro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 17, 20, .18) 0%, transparent 26%, transparent 60%, rgba(15, 17, 20, .44) 100%);
}
/* Aqui o espaço de foto é escuro: a legenda é branca e precisa aparecer
   mesmo antes de a imagem real entrar no lugar. */
.faixa__quadro .foto {
  height: 100%; border-radius: 0;
  background:
    radial-gradient(120% 90% at 72% 22%, rgba(5, 150, 105, .38), transparent 62%),
    linear-gradient(140deg, #2b332f 0%, #1a201d 52%, #0f2a22 100%);
}
.faixa__legenda {
  position: absolute; left: 0; bottom: 42px; width: 100%; z-index: 1;
  max-width: var(--largura); margin: 0 auto; padding: 0 40px;
  left: 50%; transform: translateX(-50%);
  color: var(--branco); font-size: .86rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.faixa__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 23, 28, .4); color: var(--branco);
  cursor: pointer;
  transition: background .2s ease;
}
.faixa__seta svg { width: 22px; height: 22px; }
.faixa__seta:hover { background: rgba(20, 23, 28, .6); }
.faixa__seta--ant { left: 26px; }
.faixa__seta--prox { right: 26px; }

/* --------------------------------------------------------------------------
   Onde atendemos
   -------------------------------------------------------------------------- */
.onde { background: var(--branco); padding: 110px 0; }
.onde__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.onde__texto { color: var(--texto-suave); font-size: 1.06rem; margin-top: 28px; max-width: 520px; }
.onde__texto b { color: var(--texto); }
.onde__mapa img {
  width: 100%; max-width: 520px; height: auto; margin: 0 auto; display: block;
  filter: drop-shadow(0 22px 38px rgba(20, 23, 28, .10));
}

/* --------------------------------------------------------------------------
   Como atendemos (faixa clara com imagem)
   -------------------------------------------------------------------------- */
.online { background: var(--claro-2); }
.online__grade { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.online__figura { height: 100%; min-height: 460px; padding: 60px 0 60px 40px; }
.online__figura .foto { height: 100%; min-height: 340px; }
.online__texto { padding: 80px 40px 80px 60px; max-width: 620px; }
.online__texto p { color: var(--texto-suave); margin: 26px 0 30px; }

/* --------------------------------------------------------------------------
   Não caia em golpes
   -------------------------------------------------------------------------- */
.golpes { background: var(--preto); color: var(--sobre-escuro); padding: 96px 0; }
.golpes__grade { display: grid; grid-template-columns: 1fr 200px; gap: 50px; align-items: center; }
.golpes__texto { color: var(--sobre-escuro-suave); margin: 24px 0 28px; max-width: 640px; }
.golpes__forma { display: flex; gap: 14px; flex-wrap: wrap; max-width: 660px; }
.golpes__forma input {
  flex: 1; min-width: 240px;
  background: transparent; color: var(--sobre-escuro);
  font-family: var(--sans); font-size: .95rem;
  padding: 15px 18px; border: 1px solid #4a5158; border-radius: 4px;
}
.golpes__forma input::placeholder { color: #7c8a84; }
.golpes__forma input:focus { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.golpes__resposta { margin-top: 20px; font-size: .98rem; max-width: 660px; }
.golpes__resposta.ok { color: var(--verde-claro); }
.golpes__resposta.nao { color: #ff9a8f; }
.golpes__oficial { margin-top: 22px; font-size: .92rem; color: var(--sobre-escuro-suave); }
.golpes__oficial b { color: var(--branco); }
.golpes__icone { color: var(--sobre-escuro-suave); }
.golpes__icone svg { width: 100%; max-width: 170px; margin-left: auto; display: block; }

/* --------------------------------------------------------------------------
   Perguntas frequentes — sanfona nativa (details/summary), sem JavaScript
   -------------------------------------------------------------------------- */
.duvidas { background: var(--branco); padding: 104px 0; }
.duvidas__grade { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.duvidas__texto { color: var(--texto-suave); margin-top: 28px; max-width: 400px; }
.duvidas__zap {
  display: inline-block; margin-top: 22px;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto);
}
.duvidas__zap:hover { color: var(--verde-escuro); }

.faq { border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 22px 2px; font-size: 1.12rem; font-weight: 500; line-height: 1.4;
  color: var(--texto); transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--verde-escuro);
  transition: transform .25s ease;
}
.faq summary:hover { color: var(--preto); }
.faq details[open] summary { color: var(--preto); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__resposta { padding: 0 40px 24px 2px; color: var(--texto-suave); max-width: 680px; }
.faq__resposta a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; }
.faq__resposta a:hover { color: var(--preto); }

/* --------------------------------------------------------------------------
   Conteúdo
   -------------------------------------------------------------------------- */
.conteudo { background: var(--claro); padding: 104px 0; }
/* O rótulo com marca-texto (19/08/2026). Emprestado do Billboard, que grifa
   a categoria em vez de deixá-la cinza no canto — o rótulo passa a ser um
   sinal, e não um detalhe. Preto da casa com texto branco desde 22/08/2026
   (escolha do usuário entre 7 opções): 16,6 de contraste, e o verde-menta
   deixou de gritar mais que o título que ele anuncia. */
.chapeu {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--branco); background: var(--preto);
  padding: 5px 11px 4px; border-radius: 3px;
  margin-bottom: 14px;
}
/* A migalha do artigo ("BLOG · PENTE-FINO BPC") usa a mesma classe, mas é
   navegação, não rótulo: grifada ficaria parecendo um aviso. */
.chapeu.artigo__migalha {
  display: block; background: none; padding: 0;
  color: var(--texto-suave); font-weight: 600; letter-spacing: .16em;
}
.conteudo__cabeca {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; margin-bottom: 34px;
  border-bottom: 1px solid var(--borda);
  position: relative;
}
.conteudo__cabeca::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 260px; height: 3px;
  /* preta como o chapéu desde 22/08/2026 — os dois mudam de cor juntos */
  background: var(--preto);
}
.conteudo__mais {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto); white-space: nowrap; padding-bottom: 6px;
}
.conteudo__mais:hover { color: var(--verde-escuro); }

.conteudo__grade { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.materia { display: block; background: var(--branco); overflow: hidden; border: 1px solid var(--borda); transition: transform .25s ease, box-shadow .25s ease; }
.materia:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20, 23, 28, .1); }
.materia--grande { position: relative; }
.materia--grande .foto { aspect-ratio: 16 / 11; }
.materia--grande .materia__texto {
  position: absolute; left: 0; bottom: 0; width: 100%;
  padding: 90px 32px 28px;
  background: linear-gradient(to top, rgba(9, 12, 14, .94) 30%, rgba(9, 12, 14, .7) 62%, transparent);
}
/* As duas classes juntas: o ".materia h3" genérico vem depois neste arquivo
   e, com uma classe só, empatava e vencia — o título grande saía escuro. */
.materia.materia--grande h3 { color: var(--branco); font-size: 1.55rem; font-weight: 400; line-height: 1.2; }
.materia--grande .materia__data { color: rgba(255, 255, 255, .75); }
.conteudo__coluna { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; }
.conteudo__coluna .materia { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; }
.foto--pequena { height: 100%; min-height: 130px; }
.materia__texto { padding: 22px 24px; }
.materia h3 { font-size: 1.08rem; font-weight: 500; line-height: 1.3; color: var(--texto); }
.materia__data { font-size: .8rem; color: var(--texto-suave); margin-top: 10px; }

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */
.insta { background: var(--branco); padding: 104px 0; }
.insta__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.insta__item { position: relative; display: block; overflow: hidden; }
.insta__item .foto { aspect-ratio: 1 / 1; }
.insta__item p {
  position: absolute; left: 0; bottom: 0; width: 100%;
  padding: 40px 18px 18px;
  background: linear-gradient(to top, rgba(15, 17, 20, .85), transparent);
  color: var(--branco); font-size: .82rem; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.35;
}
.insta__item p b { font-weight: 700; }
.insta__item:hover .foto { transform: scale(1.04); transition: transform .4s ease; }

/* --------------------------------------------------------------------------
   Chamada final
   -------------------------------------------------------------------------- */
/* Foto preto e branco atrás e o painel escuro por cima, com a foto aparecendo
   nas bordas (16/08/2026). O fundo em degradê continua embaixo de tudo: é ele
   que segura a seção enquanto a foto ainda não carregou. */
.chamada {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 120%, rgba(5, 150, 105, .15), transparent 58%),
    linear-gradient(160deg, #1c2027 0%, #14171c 60%, #0f1114 100%);
  padding: 110px 0 130px;
}
.chamada__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
/* Véu sobre a foto: fecha as bordas, devolve o verde da casa no canto de baixo
   e garante o contraste do texto que vem por cima. */
.chamada::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 18% 118%, rgba(5, 150, 105, .2), transparent 56%),
    linear-gradient(160deg, rgba(20, 23, 28, .42) 0%, rgba(15, 17, 20, .55) 55%, rgba(10, 12, 14, .68) 100%);
}
.chamada .area { position: relative; z-index: 2; }
.chamada__caixa {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start;
  background: rgba(13, 15, 18, .9);
  backdrop-filter: blur(4px);
  border-left: 3px solid var(--verde);
  padding: 54px 48px;
}
.chamada h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; color: var(--sobre-escuro); }
.chamada h2 span { display: block; }
.chamada h2 .leve { color: var(--sobre-escuro-suave); }
.chamada h2 .forte { color: var(--branco); }
.chamada__apoio { color: var(--sobre-escuro-suave); margin-bottom: 28px; }
.chamada__miudo { margin-top: 20px; font-size: .84rem; color: var(--sobre-escuro-suave); }

/* "Quero ser chamado": o caminho de quem prefere não abrir o WhatsApp.
   O lead cai direto no CRM do Sistema RB (rota /api/lead-site). */
.chamada__forma { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 34px; padding-top: 30px; }
.chamada__forma-titulo { font-weight: 600; margin-bottom: 16px; color: var(--sobre-escuro); }
.chamada__forma-campos { display: flex; flex-wrap: wrap; gap: 12px; }
.chamada__forma-campos[hidden] { display: none; }
.chamada__forma-campos input {
  flex: 1 1 220px; background: transparent; color: var(--sobre-escuro);
  font-family: var(--sans); font-size: .95rem;
  padding: 15px 18px; border: 1px solid #4a5158; border-radius: 4px;
}
.chamada__forma-campos input:focus { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.chamada__forma-campos input::placeholder { color: #8b939b; }
.chamada__forma-resposta { margin-top: 14px; font-size: .95rem; }
.chamada__forma-resposta.ok { color: var(--verde-claro); }
.chamada__forma-resposta.nao { color: #f2b8b5; }
.chamada__forma-resposta a { text-decoration: underline; color: var(--verde-claro); }
/* honeypot: campo que gente nenhuma vê — robô preenche e se entrega */
.nao-preencha { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--cinza-rodape); padding: 70px 0 0; }
.rodape__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding-bottom: 34px; border-bottom: 1px solid #dcdedd;
}
.marca--rodape .marca__rb { font-size: 6.3rem; }
.marca--rodape .marca__leve { font-size: 1.68rem; }
.rodape__contato { display: flex; flex-direction: column; gap: 4px; font-size: 1.02rem; }
.rodape__contato a { color: var(--texto); }
.rodape__contato a:hover { color: var(--verde-escuro); }
.rodape__contato span { font-size: .9rem; color: var(--texto-suave); }
.rodape__redes { display: flex; gap: 14px; }
.rodape__redes a { width: 26px; height: 26px; color: var(--texto-suave); transition: color .2s ease; }
.rodape__redes a:hover { color: var(--verde-escuro); }
.rodape__redes svg { width: 100%; height: 100%; }

.rodape__colunas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  padding: 40px 0 60px;
}
.rodape__colunas div { display: flex; flex-direction: column; gap: 9px; }
.rodape__rotulo {
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--preto); margin-bottom: 6px;
}
.rodape__colunas a, .rodape__colunas span { font-size: .92rem; color: var(--texto-suave); }
.rodape__colunas a:hover { color: var(--verde-escuro); }

.rodape__legal { background: var(--preto); color: var(--sobre-escuro-suave); padding: 18px 0; font-size: .8rem; }
.rodape__legal .area { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */
.zap {
  position: fixed; right: 24px; bottom: 24px; z-index: 65;
  width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-escuro); color: var(--branco);
  box-shadow: 0 10px 28px rgba(4, 120, 87, .4);
  transition: transform .2s ease;
}
.zap:hover { transform: translateY(-3px); }
.zap svg { width: 28px; height: 28px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Revelação suave ao rolar — o site.js marca as seções com .revela e a
   classe .revela--visivel quando entram na tela. Sem JavaScript (ou com
   "reduzir movimento" ligado), nada disso acontece e tudo fica visível.
   -------------------------------------------------------------------------- */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.revela--visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Telas médias
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* No celular a faixa alta não faz sentido: volta à altura antiga. */
  :root { --topo-altura: 78px; }
  .topo__menu { display: none; }
  .topo__contato { display: none; }
  .topo__hamburguer { display: flex; }
  .atuacao__grade { grid-template-columns: 1fr; gap: 44px; }
  .onde__grade { grid-template-columns: 1fr; gap: 40px; }
  .onde__mapa img { max-width: 380px; }
  .duvidas__grade { grid-template-columns: 1fr; gap: 36px; }
  .duvidas__texto { max-width: 640px; }
  .conteudo__grade { grid-template-columns: 1fr; }
  .insta__grade { grid-template-columns: repeat(2, 1fr); }
  .chamada__caixa { grid-template-columns: 1fr; gap: 28px; }
  .rodape__colunas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .abertura__grade { grid-template-columns: 1fr; gap: 36px; }
  .abertura__figura { order: -1; }
  .abertura__figura { max-width: 660px; margin: 0 auto; }
  .ajuda { grid-template-columns: 1fr; }
  .ajuda__caixa { max-width: var(--largura); margin: 0 auto; }
  .ajuda__lado--claro .ajuda__caixa { margin: 0 auto; }
  .online__grade { grid-template-columns: 1fr; }
  .online__figura { padding: 40px 40px 0; min-height: 0; }
  .online__figura .foto { min-height: 260px; }
  .online__texto { padding: 44px 40px 64px; }
  .golpes__grade { grid-template-columns: 1fr; }
  .golpes__icone { display: none; }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .area, .topo__area { padding: 0 20px; }
  :root { --topo-altura: 68px; }

  .abertura { padding: calc(var(--topo-altura) + 30px) 0 60px; }
  .script { font-size: 1.7rem; }
  .abertura h1, .abertura__titulo { font-size: 2.35rem; }
  .abertura__frases p { font-size: 1.02rem; }
  .botao { width: 100%; }

  .ajuda__lado { padding: 56px 0; }
  .ajuda__caixa { padding: 0 20px; }
  .seletor { max-width: none; }

  .atuacao { padding: 66px 0; }
  .areas { grid-template-columns: 1fr; gap: 4px; }
  .areas span { font-size: 1.02rem; }
  .areas b { font-size: 1.24rem; }

  .faixa__palco { height: 340px; }
  .faixa__seta { width: 42px; height: 42px; }
  .faixa__seta--ant { left: 12px; }
  .faixa__seta--prox { right: 12px; }

  .onde { padding: 66px 0; }
  .online__figura { padding: 30px 20px 0; }
  .online__texto { padding: 34px 20px 56px; }

  .golpes { padding: 66px 0; }
  .golpes__forma input { min-width: 0; width: 100%; }
  .golpes__forma .botao { width: 100%; }

  .duvidas { padding: 66px 0; }
  .faq summary { font-size: 1.04rem; padding: 18px 2px; }
  .faq__resposta { padding-right: 20px; }

  .conteudo, .insta { padding: 66px 0; }
  .conteudo__cabeca { flex-direction: column; align-items: flex-start; gap: 12px; }
  .conteudo__cabeca::after { width: 160px; }
  .conteudo__coluna .materia { grid-template-columns: 110px 1fr; }
  .materia.materia--grande h3 { font-size: 1.2rem; }
  .insta__grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .insta__item p { font-size: .72rem; padding: 30px 12px 12px; }

  .chamada { padding: 66px 0 80px; }
  .chamada__caixa { padding: 34px 24px; }
  .abertura__acoes { gap: 14px; }
  .abertura__secundario { width: 100%; text-align: center; }

  .rodape { padding: 50px 0 0; }
  .rodape__topo { flex-direction: column; align-items: flex-start; gap: 22px; }
  .rodape__colunas { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 44px; }
  .rodape__legal .area { flex-direction: column; gap: 8px; }
  .zap { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* --------------------------------------------------------------------------
   Blog — índice (blog/) e páginas de artigo (blog/<endereço>/).
   As páginas são geradas pelo blog-fonte/gerar.py; aqui é só a roupa.
   Mesma identidade do site: Fraunces nos títulos, Satoshi no corpo,
   esmeralda como detalhe mínimo.
   -------------------------------------------------------------------------- */

/* ----- índice do blog ----- */
.blog { background: var(--claro); padding: calc(var(--topo-altura) + 40px) 0 104px; }
/* Cabeçalho compacto (21/08/2026): chapéu + título + intro ocupavam quase uma
   tela antes do primeiro artigo. Título menor que o display das outras
   páginas e respiros mais curtos — o conteúdo aparece mais cedo. */
.blog .conteudo__cabeca { padding-bottom: 14px; margin-bottom: 22px; }
.blog .display__l1, .blog .display__l2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.blog__intro { color: var(--texto-suave); font-size: 1.02rem; max-width: 560px; margin-bottom: 26px; }
.blog__destaque { margin-bottom: 26px; }
.blog__destaque .foto { height: auto; aspect-ratio: 16 / 7; }
/* No recorte largo do destaque o título cai sobre a parte clara da foto:
   o véu escuro sobe mais alto e mais denso que o da página inicial. */
.blog__destaque .materia__texto {
  padding-top: 130px;
  background: linear-gradient(to top, rgba(9, 12, 14, .95) 42%, rgba(9, 12, 14, .72) 70%, transparent);
}
.blog__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* A busca esconde a grade da página e a régua com o atributo hidden; como os
   dois têm display próprio (grid/flex), o hidden do navegador perde — o mesmo
   remendo que .materia[hidden] e .menu-celular[hidden] já receberam. */
.blog__grade[hidden] { display: none; }
.paginacao[hidden] { display: none; }
/* A regra base .foto estica a altura (height: 100%); no cartão a foto tem
   proporção fixa e o texto vem abaixo dela. */
.materia--cartao .foto { height: auto; aspect-ratio: 16 / 11; }

/* Cartão com o texto dentro da foto (21/08/2026): título e data/tempo de
   leitura entram no quadro, sobre um véu de gradiente igual ao do destaque;
   a legenda (a descrição) continua embaixo, no branco. Vale para as listas
   do blog e para o "leia também"; a página inicial segue no desenho antigo. */
.materia--nafoto .materia__quadro { position: relative; }
.materia--nafoto .materia__veu {
  position: absolute; left: 0; bottom: 0; width: 100%;
  padding: 74px 20px 16px;
  background: linear-gradient(to top, rgba(9, 12, 14, .94) 30%,
                              rgba(9, 12, 14, .66) 64%, transparent);
}
.materia--nafoto .materia__veu h3 { color: var(--branco); }
.materia--nafoto .materia__veu .materia__data { color: rgba(255, 255, 255, .78); margin-top: 7px; }

/* A legenda que desce dentro do quadro (22/08/2026): fica recolhida e desce
   abaixo da data. No mouse, com o ponteiro parado 1s sobre o cartão — o
   atraso é o transition-delay do estado :hover; ao tirar o mouse, recolhe na
   hora (a regra base não tem atraso). No toque, quem faz o papel do hover é
   a classe .materia--espiada, que o site.js põe depois de 1s de dedo
   segurando o cartão (toque rápido continua abrindo o artigo). */
.materia--nafoto .materia__legenda {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(255, 255, 255, .88); font-size: .85rem; line-height: 1.45;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
@media (hover: hover) {
  .materia--nafoto:hover .materia__legenda {
    max-height: 4.4em; opacity: 1; margin-top: 9px;
    transition-delay: 1s;
  }
}
.materia--nafoto.materia--espiada .materia__legenda {
  max-height: 4.4em; opacity: 1; margin-top: 9px;
}
/* segurar o dedo não pode abrir o balão de link do iOS nem selecionar texto */
.materia--nafoto { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Duas classes para vencer a margem de 28px do .artigo__chamada, declarado
   mais abaixo na folha. */
.artigo__chamada.blog__chamada { margin-top: 64px; }

/* Corpo de texto da página de assunto (/blog/pilar/…), abaixo dos cartões.
   Herda a tipografia do corpo do artigo — é o mesmo tipo de leitura — e ganha
   um traço verde no topo, que separa o texto da grade de cartões sem precisar
   de mais uma faixa de fundo. */
.pilar-texto {
  max-width: 760px;
  margin: 64px auto 0;
  padding-top: 40px;
  border-top: 3px solid var(--verde);
  font-size: 1.06rem;
  line-height: 1.75;
}
.pilar-texto p { margin-bottom: 1.25em; }
.pilar-texto h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em;
  color: var(--preto); margin: 1.8em 0 .7em;
}
.pilar-texto h2:first-child { margin-top: 0; }
.pilar-texto ul, .pilar-texto ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.pilar-texto li { margin-bottom: .5em; }
.pilar-texto li::marker { color: var(--verde); }
.pilar-texto a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; }
.pilar-texto a:hover { color: var(--preto); }

/* ----- página do artigo ----- */
.artigo { background: var(--branco); padding: calc(var(--topo-altura) + 56px) 0 90px; }
.artigo__cabeca, .artigo__corpo, .artigo__fecho { max-width: 820px; }
.artigo__migalha a { transition: color .2s ease; }
.artigo__migalha a:hover { color: var(--verde-escuro); }
/* Título do artigo, maior e mais apertado (19/08/2026 — item 3 da varredura
   do Billboard). O impacto lá vem de título grande com as linhas quase se
   tocando; aqui isso é feito mantendo a Fraunces, que é a fonte da casa.

   O piso do clamp sobe pouco (2rem -> 2.15rem): no celular quem manda é a
   palavra mais longa do título, e passar disso começa a quebrar "incapacidade"
   e "salário-maternidade" no meio. O teto é que cresce de verdade.

   font-optical-sizing deixa a Fraunces ajustar o desenho ao tamanho — em fonte
   variável com eixo óptico, é de graça e some com o ar "esticado" do título
   grande. */
.artigo__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.15rem, 4.7vw, 3.9rem); line-height: 1.02; letter-spacing: -.022em;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--preto); margin: 6px 0 18px;
}
.artigo__meta { font-size: .88rem; color: var(--texto-suave); }

/* Tamanho da letra (19/08/2026 — item 6). O corpo do artigo é o único que
   cresce: menu, rodapé e chamada ficam onde estão, porque o que atrapalha
   quem enxerga mal é o texto corrido, não a navegação.

   A escala entra por variável, então basta o JavaScript trocar um número. */
.letra { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.letra[hidden] { display: none; }
.letra__rotulo {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-suave);
}
.letra__botoes { display: flex; gap: 6px; }
.letra__botao {
  display: inline-flex; align-items: baseline; gap: 1px;
  min-width: 44px; min-height: 34px;          /* alvo grande: dedo idoso, tela pequena */
  justify-content: center; align-items: center;
  background: var(--branco); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 999px;
  font-family: var(--display); font-size: 1rem; line-height: 1;
  cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.letra__sinal { font-family: var(--sans); font-size: .78rem; font-weight: 700; }
.letra__botao:hover { border-color: var(--verde); color: var(--verde-escuro); }
.letra__botao:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 2px; }
.letra__botao[aria-disabled="true"] {
  opacity: .42; cursor: default; border-color: var(--borda); color: var(--texto-suave);
}
.letra__estado { font-size: .8rem; color: var(--texto-suave); }

@media (max-width: 640px) {
  .letra { flex-wrap: wrap; gap: 8px 10px; }
  .letra__estado { width: 100%; }
}
.artigo__figura { margin: 34px auto 44px; }
.artigo__figura .foto { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* O tamanho do corpo passa pela escala do controle A- / A+ (item 6). Tem de
   ser NESTA regra: uma regra à parte, acrescentada acima, perdia para esta,
   que vem depois na folha e tem a mesma especificidade. */
.artigo__corpo { margin: 0 auto; font-size: calc(1.06rem * var(--escala-leitura, 1)); line-height: 1.75; }
.artigo__corpo p { margin-bottom: 1.25em; }
.artigo__corpo h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.7rem; line-height: 1.2; letter-spacing: -.01em;
  color: var(--preto); margin: 1.9em 0 .7em;
}
.artigo__corpo h3 {
  font-size: 1.16rem; font-weight: 700; color: var(--preto);
  margin: 1.6em 0 .6em;
}
.artigo__corpo ul, .artigo__corpo ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.artigo__corpo li { margin-bottom: .5em; }
.artigo__corpo li::marker { color: var(--verde); }
.artigo__corpo a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; }
.artigo__corpo a:hover { color: var(--preto); }
.artigo__corpo blockquote {
  border-left: 3px solid var(--verde);
  background: var(--claro);
  padding: 20px 26px; margin: 0 0 1.25em;
}
.artigo__corpo blockquote p { margin: 0; font-size: 1.02rem; color: var(--texto); }

/* Sumário do artigo. Numerado, discreto, e no celular ele vem fechado num
   <details>? Não: manter aberto é melhor — o objetivo é a pessoa ver de cara
   se o caso dela está no texto, e um clique a mais desfaz isso. */
.artigo__sumario {
  background: var(--claro);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 0 0 2em;
}
.artigo__sumario-titulo {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  color: var(--verde-escuro); margin: 0 0 12px;
}
.artigo__sumario ol { margin: 0; padding-left: 1.2em; }
.artigo__sumario li { margin-bottom: .45em; line-height: 1.45; }
.artigo__sumario li::marker { color: var(--verde); font-weight: 600; }
.artigo__sumario li:last-child { margin-bottom: 0; }
.artigo__sumario a { color: var(--texto); text-decoration: none; }
.artigo__sumario a:hover { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; }

/* Pulo de âncora: sem isto o subtítulo para embaixo do topo fixo. */
.artigo__corpo h2[id] { scroll-margin-top: calc(var(--topo-altura) + 20px); }

/* Chamada curta no meio do artigo: uma linha entre dois assuntos, para quem
   não vai rolar até o fim. Discreta de propósito — se competir com o texto,
   atrapalha a leitura e derruba justamente o que se quer medir.
   Até 22/08/2026 ela tinha o MESMO desenho da citação (fundo cinza + filete
   verde): quem aprendesse a pular uma pulava a outra. Agora o convite recua
   — dois fios finos, sem fundo, texto menor — e a citação fica só dela. */
.artigo__atalho {
  background: none;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  padding: 18px 0;
  margin: 2.4em 0;
}
.artigo__atalho p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--texto-suave); }
.artigo__atalho a { color: var(--verde-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.artigo__atalho a:hover { color: var(--preto); }

/* O formulário de lead dentro da caixa escura do blog. Herda tudo de
   .chamada__forma; aqui só se desfaz o que era da grade da página inicial. */
.artigo__forma { grid-column: auto; margin-top: 28px; padding-top: 26px; text-align: left; }
.artigo__forma .chamada__forma-campos input { max-width: 100%; }

/* A chamada do fim do artigo: a caixa escura da "chamada final", em miniatura */
.artigo__fecho { margin: 0 auto; }
.artigo__chamada {
  background:
    radial-gradient(ellipse at 14% 130%, rgba(5, 150, 105, .16), transparent 58%),
    linear-gradient(160deg, #1c2027 0%, #14171c 65%, #0f1114 100%);
  border-left: 3px solid var(--verde);
  padding: 40px 42px; margin-top: 28px;
}
/* A chamada em duas colunas (21/08/2026): conversa à esquerda, formulário
   "prefere que a gente chame você?" à direita, separados por um fio. A faixa
   de foto com a caixa encaixada por margem negativa (19/08) saiu: conforme a
   altura da página, a caixa subia por cima do conteúdo anterior.

   O grid só entra quando o formulário está visível (o site.js o revela; sem
   JavaScript ele fica hidden) — senão a coluna direita ficaria vazia e a
   caixa, pela metade. Navegador antigo sem :has() apenas empilha, que é o
   mesmo desenho do celular. */
@media (min-width: 861px) {
  .artigo__chamada--dupla:has(.artigo__forma:not([hidden])) {
    display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  }
  .artigo__chamada--dupla:has(.artigo__forma:not([hidden])) .artigo__chamada-conversa {
    padding-right: 46px;
  }
  .artigo__chamada--dupla:has(.artigo__forma:not([hidden])) .artigo__forma {
    border-top: 0; margin-top: 0; padding-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 46px;
  }
}
/* Na coluna, os campos empilham e o botão acompanha a largura deles —
   no celular também, onde já era assim na prática. */
.artigo__chamada--dupla .chamada__forma-campos { flex-direction: column; }
.artigo__chamada--dupla .chamada__forma-campos input { flex-basis: auto; width: 100%; }
.artigo__chamada--dupla .chamada__forma-campos .botao { width: 100%; }

.artigo__chamada-titulo {
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 14px;
}
.artigo__chamada-titulo span { display: block; }
.artigo__chamada-titulo .leve { color: var(--sobre-escuro-suave); }
.artigo__chamada-titulo .forte { color: var(--branco); }
.artigo__chamada-apoio { color: var(--sobre-escuro-suave); font-size: .98rem; max-width: 560px; margin-bottom: 24px; }
.artigo__chamada .botao { background: var(--branco); border-color: var(--branco); color: var(--preto); }
.artigo__chamada .botao:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.artigo__aviso { margin-top: 18px; font-size: .84rem; color: var(--texto-suave); }

/* ----- leia também ----- */
.leia { background: var(--claro); padding: 90px 0 104px; }
.leia__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

@media (max-width: 1080px) {
  .blog__grade, .leia__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .blog { padding: calc(var(--topo-altura) + 34px) 0 66px; }
  .blog__destaque .foto { aspect-ratio: 16 / 10; }
  .blog__grade, .leia__grade { grid-template-columns: 1fr; gap: 18px; }
  .artigo { padding: calc(var(--topo-altura) + 34px) 0 60px; }
  .artigo__figura { margin: 26px auto 30px; }
  .artigo__corpo { font-size: calc(1.02rem * var(--escala-leitura, 1)); }
  .artigo__chamada { padding: 30px 22px; }
  .leia { padding: 60px 0 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   Blog: pastilhas de assunto, busca interna e página de erro
   (18/08/2026 — as páginas /blog/pilar/<assunto>/ e o 404.html)
   =================================================================== */

/* Rótulo que só o leitor de tela enxerga. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* As pastilhas viraram uma fileira por frente do escritório em 19/08/2026,
   quando o cível entrou no blog: treze assuntos numa linha só faziam quem
   chegou por "nome negativado" procurar o dele no meio de BPC e pente-fino. */
/* Lista de assuntos, abaixo dos cartões. É para onde foram os treze links
   que saíam da barra (19/08/2026). Discreta de propósito: quem navega usa as
   frentes lá em cima ou a busca — esta lista serve a quem procura um assunto
   pelo nome, e ao Google, que chega às páginas de assunto a partir daqui. */
/* Duas colunas desde 21/08/2026 — uma por frente, com o rótulo em cima e os
   links embaixo. Em linhas corridas a lista ficava comprida e cinza. */
.assuntos {
  margin: 54px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px;
}
.assuntos__titulo {
  grid-column: 1 / -1;
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: 2px;
}
.assuntos__grupo {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.assuntos__area {
  font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--preto);
}
@media (max-width: 700px) {
  .assuntos { grid-template-columns: 1fr; }
}
.assuntos__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.assuntos__item {
  font-size: .9rem; color: var(--texto-suave);
  text-decoration: underline; text-decoration-color: var(--borda);
  text-underline-offset: 3px;
}
.assuntos__item:hover { color: var(--verde-escuro); text-decoration-color: var(--verde); }
.assuntos__item--ativo { color: var(--preto); font-weight: 600; text-decoration-color: var(--verde); }

@media (max-width: 700px) {
  .assuntos__grupo { display: block; }
  .assuntos__area { display: block; margin-bottom: 6px; }
}

/* Filtros do blog numa linha só: pastilhas à esquerda, busca à direita,
   entre dois fios discretos. Substitui a faixa preta de ponta a ponta
   (21/08/2026) — com três pastilhas, a barra pesava mais que o conteúdo
   que anunciava. */
.blog__filtros {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
  padding: 16px 0; margin: 0 0 34px;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.blog__filtros .pilulas { margin: 0; }
.blog__filtros .blog__busca { margin: 0; flex: 1 1 240px; max-width: 320px; }
/* No celular as pastilhas ficam numa linha e a busca desce, na largura toda. */
@media (max-width: 700px) {
  .blog__filtros { padding: 14px 0; margin-bottom: 28px; }
  .blog__filtros .blog__busca { flex-basis: 100%; max-width: none; }
}

.pilulas { margin: 0 0 22px; }
.pilulas__grupo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.pilulas__grupo:last-child { margin-bottom: 0; }
.pilulas__area {
  min-width: 104px;
  font-size: .69rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-suave);
}
.pilulas__item {
  display: inline-block; padding: 7px 15px;
  border: 1px solid var(--borda); border-radius: 999px;
  font-size: .82rem; color: var(--texto-suave); background: var(--branco);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pilulas__item:hover { border-color: var(--verde); color: var(--verde-escuro); }
.pilulas__item--ativo {
  background: var(--verde-escuro); border-color: var(--verde-escuro);
  color: var(--branco);
}
.pilulas__item--ativo:hover { color: var(--branco); }

.blog__busca { margin: 0 0 34px; max-width: 460px; }
.blog__busca-campo {
  width: 100%; padding: 13px 18px;
  border: 1px solid var(--borda); border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; color: var(--texto);
  background: var(--branco); transition: border-color .2s ease;
}
.blog__busca-campo::placeholder { color: var(--texto-suave); }
.blog__busca-campo:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .13);
}

.blog__vazio {
  color: var(--texto-suave); font-size: 1rem;
  padding: 26px 0 34px; max-width: 560px;
}
.blog__vazio a { color: var(--verde-escuro); text-decoration: underline; }

/* A busca esconde cartões; a grade não pode deixar buraco no lugar deles. */
.materia[hidden] { display: none; }

@media (max-width: 700px) {
  .pilulas__grupo { gap: 7px; }
  .pilulas__item { padding: 6px 13px; font-size: .78rem; }
  /* no celular o rótulo da frente ganha a linha inteira, senão empurra a
     primeira pastilha do grupo para fora do alinhamento */
  .pilulas__area { min-width: 100%; margin-bottom: 2px; }
  .blog__busca { max-width: none; }
}

/* ===================================================================
   Blog, 2ª rodada (19/08/2026)
   Resumo no cartão, caixa da resposta rápida, tabela comparativa,
   compartilhar, faixa de retorno e o sumário na margem no monitor grande.
   =================================================================== */

/* ----- o cartão passa a dizer do que trata -----
   Até aqui o cartão tinha título, assunto e data — nada mais. A descrição já
   existia no cabeçalho de todo artigo (é a mesma que vai para o Google) e
   estava sendo jogada fora na listagem. Três linhas no máximo: o corte é do
   navegador, então cartão nenhum fica mais alto que o vizinho. */
.materia__resumo {
  margin-top: 10px;
  font-size: .92rem; line-height: 1.5; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* Na página inicial os dois cartões de baixo têm uma coluna de 150px de foto
   e não sobra altura para o resumo — lá ele sai de cena. */
.conteudo__coluna .materia__resumo { display: none; }

/* ----- a resposta curta, agora numa caixa -----
   Todo artigo abre respondendo a pergunta do título em três linhas. É o
   trecho mais lido da página e o que o Google e os robôs de IA citam; saía
   com a mesma cara de um parágrafo qualquer. Desenho diferente do
   .artigo__atalho de propósito: aquele é convite, este é conteúdo. */
.artigo__resposta {
  margin: 6px 0 1.9em; padding: 24px 28px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--verde);
}
.artigo__resposta p { margin: 0; font-size: 1.08rem; line-height: 1.66; }
.artigo__resposta p > b:first-child { color: var(--verde-escuro); }

/* ----- tabela comparativa -----
   Quem rola é a caixa, nunca a página: uma tabela de três colunas num celular
   de 360px poria barra de rolagem lateral no site inteiro. */
.artigo__tabela {
  margin: 0 0 1.7em;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borda);
}
.artigo__tabela table {
  border-collapse: collapse; width: 100%; min-width: 460px;
  font-size: .96rem;
}
.artigo__tabela th, .artigo__tabela td {
  padding: 13px 18px; text-align: left; vertical-align: top;
  line-height: 1.5; border-bottom: 1px solid var(--borda);
}
.artigo__tabela thead th {
  background: var(--claro);
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto);
  border-bottom: 2px solid var(--preto);
}
.artigo__tabela tbody th { font-weight: 600; color: var(--texto); }
.artigo__tabela tbody tr:last-child th,
.artigo__tabela tbody tr:last-child td { border-bottom: 0; }
.artigo__tabela a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; }

/* ----- compartilhar -----
   Discreto de propósito: uma linha acima da chamada, no mesmo eixo do texto.
   O WhatsApp vem primeiro porque é por ele que este conteúdo circula. */
.compartilhar {
  max-width: 820px; margin: 36px auto 0;
  padding-top: 26px; border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.compartilhar__rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-suave);
}
.compartilhar__itens { display: flex; flex-wrap: wrap; gap: 10px; }
.compartilhar__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--branco); color: var(--texto-suave);
  font-family: var(--sans); font-size: .84rem; line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.compartilhar__item:hover { border-color: var(--verde); color: var(--verde-escuro); }
.compartilhar__item svg { width: 16px; height: 16px; flex: none; }
/* Confirmação do "copiar link", devolvida pelo site.js. */
.compartilhar__item--feito { border-color: var(--verde); color: var(--verde-escuro); }

/* ----- faixa de retorno, no fim de toda página de lista -----
   Toda visita ao blog era uma visita só. Aqui ficam os três caminhos de
   volta: os perfis, o feed e o verificador de número contra golpes. */
.retorno {
  margin-top: 70px; padding-top: 46px;
  border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.retorno__titulo {
  font-family: var(--display); font-weight: 500; font-size: 1.14rem;
  color: var(--preto); margin-bottom: 8px; line-height: 1.25;
}
.retorno__item p { font-size: .93rem; line-height: 1.55; color: var(--texto-suave); }
.retorno__item a {
  display: inline-block; margin: 12px 16px 0 0;
  font-size: .89rem; color: var(--verde-escuro);
  text-decoration: underline; text-underline-offset: 3px;
}
.retorno__item a:hover { color: var(--preto); }

@media (max-width: 900px) {
  .retorno { grid-template-columns: 1fr; gap: 30px; margin-top: 52px; padding-top: 36px; }
}
@media (max-width: 640px) {
  .compartilhar { margin-top: 28px; padding-top: 22px; }
  .compartilhar__item { padding: 8px 14px; font-size: .8rem; }
  .artigo__resposta { padding: 20px 20px; }
  .artigo__tabela th, .artigo__tabela td { padding: 11px 14px; }
}

/* ----- o sumário vai para a margem no monitor grande -----
   A coluna de texto tem 820px e o resto da tela fica vazio. A partir de
   1460px o sumário sai do meio do texto e vira nota de margem que acompanha
   a rolagem — o leitor vê onde está sem perder linha de leitura.
   O corte é largo de propósito: com menos que isso a caixa encostaria na
   borda da janela. Abaixo disso nada muda, e no celular continua no fluxo. */
@media (min-width: 1460px) {
  .artigo__sumario {
    float: left; width: 240px;
    margin: 4px 0 24px -290px;
    position: sticky; top: calc(var(--topo-altura) + 28px);
    background: none; border-radius: 0;
    padding: 2px 0 2px 18px;
    border-left: 2px solid var(--verde);
  }
  .artigo__sumario ol { padding-left: 1.1em; }
  .artigo__sumario li { font-size: .92rem; margin-bottom: .55em; }
}

/* ===================================================================
   Paginação das listas do blog (22/08/2026)
   A régua embaixo da grade: números quadrados, atual em preto cheio,
   setas "mais recentes / mais antigos" nas pontas. Some quando a lista
   cabe numa página só — o gerador nem escreve o <nav>.
   =================================================================== */
.paginacao {
  margin: 46px 0 6px;
  display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.paginacao__num {
  min-width: 42px; height: 42px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda);
  color: var(--texto); font-size: .92rem; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
a.paginacao__num:hover { border-color: var(--verde); color: var(--verde-escuro); }
.paginacao__num--atual { background: var(--preto); border-color: var(--preto); color: var(--branco); }
.paginacao__reticencias { color: var(--texto-suave); padding: 0 2px; }
.paginacao__seta {
  padding: 0 8px; font-size: .89rem; color: var(--verde-escuro);
  text-decoration: underline; text-underline-offset: 3px;
}
.paginacao__seta:hover { color: var(--preto); }
@media (max-width: 640px) {
  .paginacao { margin-top: 34px; gap: 6px; }
  .paginacao__num { min-width: 38px; height: 38px; }
}