/* =========================================================
   FALHEIRO ADVOGADOS — Design System
   Implementação de docs/05-design/design-system.md
   Mobile First. Sem framework. Sem build. Sem CDN.
   ========================================================= */

/* ---------- FONTES ----------------------------------------
   Autohospedadas por decisão de privacidade (nunca CDN).
   Newsreader e Source Sans 3, variáveis, subset latin.
   Licença SIL Open Font License 1.1 — uso e redistribuição
   livres. Arquivos em assets/fonts/, baixados de
   fonts.google.com em 11/08/2026 (fonte oficial do projeto,
   não CDN em tempo de execução).
-----------------------------------------------------------*/

@font-face {
  font-family: 'Newsreader'; font-style: normal;
  font-weight: 200 800; font-display: swap;
  src: url('../fonts/newsreader-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal;
  font-weight: 200 900; font-display: swap;
  src: url('../fonts/source-sans-3-var.woff2') format('woff2');
}

/* ---------- TOKENS ---------- */
:root {
  /* Superfícies — quentes */
  --superficie-base: #FAF8F5;
  --superficie-alt: #F2EDE6;
  --superficie-quente: #E8DFD4;
  --superficie-escura: #2A211C;
  --superficie-escura-alt: #1C1613;

  /* Tinta — neutra */
  --tinta: #1F1A17;
  --tinta-secundaria: #5B514A;
  --tinta-clara: #FAF8F5;
  --linha: #9A958E;
  --linha-sutil: #E3DCD3;

  /* Acento */
  --acento: #8A4B2F;
  --acento-escuro: #6B3823;
  --acento-suave: #F3E7DE;
  /* Acento para uso sobre superfície escura — 7.0:1 sobre --superficie-escura */
  --acento-claro: #D89B76;

  /* Funcionais */
  --erro: #A6281C;
  --sucesso: #2F6B4F;
  --aviso: #7A5B18;

  /* Tipografia */
  --fonte-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Espaço */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --e9: 96px; --e10: 128px;

  /* Medidas */
  --medida-leitura: 34rem;
  --largura-media: 60rem;
  --container: 1200px;
  --padding-lateral: 20px;

  /* Movimento */
  --rapido: 150ms;
  --medio: 250ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- BASE ---------- */
body {
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--superficie-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: 32px; line-height: 1.15; }
h2 { font-size: 26px; line-height: 1.25; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 500; }
h4 { font-family: var(--fonte-texto); font-size: 19px; font-weight: 600; line-height: 1.4; }

p { max-width: var(--medida-leitura); }
p + p { margin-top: var(--e5); }
h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: var(--e4); }
p + h2, ul + h2, div + h2 { margin-top: var(--e7); }
p + h3, ul + h3 { margin-top: var(--e6); }

strong { font-weight: 600; }

a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--acento-escuro); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}
.secao--escura :focus-visible { outline-color: var(--tinta-clara); }

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--tinta-clara);
  padding: var(--e3) var(--e4); z-index: 100;
}
.pular-para-conteudo:focus { left: var(--e4); top: var(--e4); }

/* Oculto visualmente, presente para leitor de tela — usado em headings
   estruturais (h2) que não têm equivalente visível no design da seção. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}
.leitura { max-width: var(--medida-leitura); }
.media { max-width: var(--largura-media); }

.secao { padding-block: var(--e8); }
.secao--alt { background: var(--superficie-alt); }
.secao--quente { background: var(--superficie-quente); }
.secao--escura { background: var(--superficie-escura); color: var(--tinta-clara); }
.secao--escura-alt { background: var(--superficie-escura-alt); color: var(--tinta-clara); }
.secao--escura h1, .secao--escura h2, .secao--escura h3,
.secao--escura-alt h2, .secao--escura-alt h3 { color: var(--tinta-clara); }

.rotulo {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-secundaria);
  margin-bottom: var(--e3);
}
.secao--escura .rotulo, .secao--escura-alt .rotulo { color: var(--linha); }

.apoio { font-size: 15px; color: var(--tinta-secundaria); }
.secao--escura .apoio, .secao--escura-alt .apoio { color: var(--linha); }

.destaque { font-size: 19px; line-height: 1.6; }

/* ---------- CABEÇALHO ---------- */
.cabecalho {
  background: var(--superficie-base);
  border-bottom: 1px solid var(--linha-sutil);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.marca {
  display: inline-block;
  font-family: var(--fonte-titulo); font-size: 19px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; line-height: 1.1;
  text-align: center;          /* centra ADVOGADOS sob FALHEIRO */
  text-indent: .14em;          /* compensa o entreletra à direita */
  padding-block: 6px;          /* alvo de toque ≥44px, sem alterar a leitura visual */
}
.marca span {
  display: block; font-family: var(--fonte-texto);
  font-size: 9px; letter-spacing: .28em; color: var(--tinta-secundaria);
  margin-top: 4px; text-indent: .28em;
}
@media (min-width: 900px) {
  .marca { font-size: 21px; }
  .marca span { font-size: 10px; margin-top: 5px; }
}
/* Lockup horizontal — ADVOGADOS ao lado de FALHEIRO (alternativa) */
.marca--inline {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-align: left; text-indent: 0;
}
.marca--inline span {
  display: inline; margin-top: 0; text-indent: 0;
  font-size: 10px; letter-spacing: .34em;
}
@media (min-width: 900px) {
  .marca--inline { gap: 14px; }
  .marca--inline span { font-size: 11px; }
}

/* Filetes laterais no descritor — fidelidade ao letreiro (alternativa) */
.marca--filetes span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-indent: 0;
}
.marca--filetes span::before,
.marca--filetes span::after {
  content: ''; height: 1px; width: 14px; background: currentColor; opacity: .55;
}

/* Cabeçalho escuro — marca em claro */
.cabecalho--escuro { background: var(--superficie-escura-alt); border-bottom-color: rgba(250,248,245,.14); }
.cabecalho--escuro .marca { color: var(--tinta-clara); }
.cabecalho--escuro .marca span { color: rgba(250,248,245,.78); }
.cabecalho--escuro .nav a { color: var(--tinta-clara); }
.cabecalho--escuro .menu-botao { color: var(--tinta-clara); border-color: rgba(250,248,245,.4); }
.cabecalho--escuro .menu-painel { border-top-color: rgba(250,248,245,.14); }
.cabecalho--escuro .menu-painel a { color: var(--tinta-clara); border-bottom-color: rgba(250,248,245,.14); }
.nav { display: none; }
.nav a {
  color: var(--tinta); text-decoration: none;
  font-size: 16px; padding: var(--e3);
}
.nav a:hover { text-decoration: underline; }

.menu-botao {
  background: none; border: 1px solid var(--linha);
  padding: 12px 14px; cursor: pointer; color: var(--tinta);
  font-size: 15px; min-height: 44px;
}
.menu-painel { display: none; border-top: 1px solid var(--linha-sutil); }
.menu-painel.aberto { display: block; }
.menu-painel a {
  display: block; padding: var(--e4) 0; font-size: 19px;
  color: var(--tinta); text-decoration: none;
  border-bottom: 1px solid var(--linha-sutil); min-height: 56px;
}

/* ---------- BOTÕES ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: 52px; padding: 14px 28px;
  font-size: 17px; font-weight: 600; font-family: var(--fonte-texto);
  text-decoration: none; border-radius: 0; border: 1px solid transparent;
  cursor: pointer; transition: background var(--rapido) ease-out;
  width: 100%;
}
.botao--primario { background: var(--acento); color: #fff; }
.botao--primario:hover { background: var(--acento-escuro); color: #fff; }
.botao--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.secao--escura .botao--secundario { color: var(--tinta-clara); border-color: var(--tinta-clara); }
.botao svg { width: 20px; height: 20px; flex: none; }

.cta { margin-top: var(--e6); max-width: var(--medida-leitura); }
.cta__nota { margin-top: var(--e3); font-size: 15px; color: var(--tinta-secundaria); }
.secao--escura .cta__nota { color: var(--linha); }

/* ---------- HERO ---------- */
.hero { padding-block: var(--e8) var(--e7); }
.hero h1 { max-width: 18ch; }
.hero__sub { margin-top: var(--e5); font-size: 19px; line-height: 1.55; color: var(--tinta-secundaria); }
.hero__ressalva { margin-top: var(--e5); font-weight: 600; }
.hero__id {
  margin-top: var(--e7); padding-top: var(--e4);
  border-top: 1px solid var(--linha-sutil);
  font-size: 15px; color: var(--tinta-secundaria);
}

/* ---------- QUICK FINDER ---------- */
.finder { background: var(--superficie-alt); padding-block: var(--e7); }
.finder h2 { font-size: 24px; }
.finder__lista { margin-top: var(--e5); max-width: var(--largura-media); }
.finder__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4);
  min-height: 64px; padding: var(--e4) 0;
  border-bottom: 1px solid var(--linha-sutil);
  color: var(--tinta); text-decoration: none; font-size: 17px;
  transition: color var(--rapido) ease-out;
}
.finder__item:first-child { border-top: 1px solid var(--linha-sutil); }
.finder__item:hover { color: var(--acento); }
.finder__item::after { content: '→'; color: var(--acento); flex: none; }

/* ---------- LISTAS ---------- */
.lista { max-width: var(--medida-leitura); }
.lista li {
  position: relative; padding-left: var(--e5); margin-bottom: var(--e3);
}
.lista li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 8px; height: 1px; background: var(--acento);
}
.secao--escura .lista li::before { background: var(--linha); }

.passos { max-width: var(--largura-media); margin-top: var(--e5); }
.passos li {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--e4);
  padding-block: var(--e5); border-top: 1px solid var(--linha-sutil);
}
.passos b { display: block; margin-bottom: var(--e1); }
.passos .num {
  font-family: var(--fonte-titulo); font-size: 19px; color: var(--acento);
}

/* ---------- VITRINE DE SERVIÇOS ---------- */
.vitrine { margin-top: var(--e6); display: grid; gap: 0; }
.vitrine__item {
  display: block; padding: var(--e5) 0;
  border-top: 1px solid var(--linha-sutil);
  color: var(--tinta); text-decoration: none;
}
.vitrine__item:last-child { border-bottom: 1px solid var(--linha-sutil); }
.vitrine__item h3 { transition: color var(--rapido) ease-out; }
.vitrine__item:hover h3 { color: var(--acento); }
.vitrine__item p { margin-top: var(--e2); color: var(--tinta-secundaria); font-size: 16px; }
.vitrine__item .seta { color: var(--acento); font-size: 15px; margin-top: var(--e3); display: inline-block; }

/* ---------- FAIXA DE ÁREAS ---------- */
.areas-faixa { margin-top: var(--e5); max-width: var(--largura-media); }
.areas-faixa li { border-top: 1px solid var(--linha-sutil); }
.areas-faixa li:last-child { border-bottom: 1px solid var(--linha-sutil); }
.areas-faixa a {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e4); min-height: 60px; padding-block: var(--e4);
  color: var(--tinta); text-decoration: none; font-size: 19px;
  font-family: var(--fonte-titulo);
}
.areas-faixa a:hover { color: var(--acento); }
.areas-faixa a::after { content: '→'; color: var(--acento); font-family: var(--fonte-texto); }

/* ---------- AVISO PREVENTIVO (B-24) ---------- */
.aviso {
  background: var(--superficie-quente);
  border-left: 3px solid var(--aviso);
  padding: var(--e5);
  max-width: var(--largura-media);
}
.aviso .rotulo { color: var(--aviso); }
.aviso p { max-width: none; }

/* ---------- TABELA ---------- */
.tabela-wrap { overflow-x: auto; margin-top: var(--e5); max-width: var(--largura-media); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; }
th, td { text-align: left; padding: var(--e4); border-bottom: 1px solid var(--linha-sutil); vertical-align: top; }
th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-secundaria); font-weight: 600; }
tbody tr:nth-child(odd) { background: var(--superficie-alt); }

/* ---------- ACORDEÃO ---------- */
.faq { max-width: var(--largura-media); margin-top: var(--e5); }
.faq details { border-top: 1px solid var(--linha-sutil); }
.faq details:last-of-type { border-bottom: 1px solid var(--linha-sutil); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
  min-height: 56px; padding-block: var(--e4);
  font-size: 19px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--acento); font-size: 24px; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details > *:not(summary) { padding-bottom: var(--e5); }
.faq p { color: var(--tinta-secundaria); }

/* ---------- PLACEHOLDER DE IMAGEM ---------- */
.foto-placeholder {
  border: 1px solid var(--linha);
  background: var(--superficie-quente);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--e5);
  max-width: 360px;
}
.foto-placeholder span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-secundaria); }

/* ---------- MAPA ---------- */
.mapa { margin-top: var(--e6); max-width: 420px; }
.mapa svg { width: 100%; height: auto; }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--superficie-escura-alt); color: var(--tinta-clara); padding-block: var(--e8) var(--e6); }
.rodape .marca { color: var(--tinta-clara); }
.rodape .marca span { color: var(--linha); }
.rodape__grid { display: grid; gap: var(--e7); margin-top: var(--e6); }
.rodape h2 { font-family: var(--fonte-texto); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--linha); margin-bottom: var(--e3); }
.rodape a { color: var(--tinta-clara); }
.rodape li { margin-bottom: var(--e2); }
.rodape__legal {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid rgba(250,248,245,.15);
  font-size: 15px; color: var(--linha);
}
.rodape__legal p { max-width: none; }

/* ---------- CONFIANÇA (B-07) ---------- */
.confianca {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--linha-sutil);
  font-size: 15px; color: var(--tinta-secundaria);
  max-width: var(--largura-media);
}
.confianca p { max-width: none; }

/* ---------- SAÍDAS DA LANDING ---------- */
.saidas { padding-block: var(--e7); }
.saidas a { display: block; padding-block: var(--e3); font-size: 17px; }

/* =========================================================
   TABLET — 600px
   ========================================================= */
@media (min-width: 600px) {
  .botao { width: auto; }
  .vitrine { grid-template-columns: 1fr 1fr; column-gap: var(--e7); }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   NOTEBOOK — 900px
   ========================================================= */
@media (min-width: 900px) {
  :root { --padding-lateral: 40px; }
  body { font-size: 18px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }

  .secao { padding-block: var(--e9); }
  .hero { padding-block: var(--e9) var(--e8); }

  .cabecalho { position: sticky; top: 0; z-index: 50; }
  .cabecalho__interno { min-height: 80px; }
  .nav { display: flex; align-items: center; gap: var(--e5); }
  .menu-botao, .menu-painel { display: none !important; }

  .passos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e7); }
  .rodape__grid { grid-template-columns: 2fr 1fr 1fr; }
  .finder__lista { column-count: 2; column-gap: var(--e8); }
  .finder__item { break-inside: avoid; }
  .finder__item:nth-child(4) { border-top: 1px solid var(--linha-sutil); }
}

/* =========================================================
   DESKTOP — 1200px
   ========================================================= */
@media (min-width: 1200px) {
  .secao { padding-block: var(--e10); }
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passos li { border-top: 1px solid var(--linha-sutil); }
}

/* =========================================================
   CAMADA VISUAL — banners, ritmo editorial, imagens
   ========================================================= */

/* ---------- HERO COM BANNER ---------- */
.hero-banner {
  position: relative;
  background: var(--superficie-escura);
  color: var(--tinta-clara);
  overflow: hidden;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
}
.hero-banner__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero-banner__media picture { display: block; width: 100%; height: 100%; }
.hero-banner__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--foco, 50% 40%);
}
/* Véu de contraste — função, não decoração: garante leitura sobre a fotografia */
.hero-banner__veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(28,22,19,var(--veu-topo, .38)) 0%,
    rgba(28,22,19,var(--veu-meio, .62)) 50%,
    rgba(28,22,19,var(--veu-base, .90)) 100%);
}
.veu--leve  { --veu-topo:.22; --veu-meio:.46; --veu-base:.80; }
.veu--forte { --veu-topo:.52; --veu-meio:.74; --veu-base:.95; }
.hero-banner__conteudo {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: var(--e9) var(--e7);
}
.hero-banner h1 { color: var(--tinta-clara); max-width: 16ch; }
.hero-banner .hero__sub { color: rgba(250,248,245,.88); }
.hero-banner .hero__id {
  border-top-color: rgba(250,248,245,.22);
  color: rgba(250,248,245,.78);
}
.hero-banner .rotulo { color: rgba(250,248,245,.72); }
/* Linha de horário sob o botão — contraste elevado para tela com brilho baixo */
.hero-banner .cta__nota {
  color: rgba(250,248,245,.94);
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(28,22,19,.55);
}

/* Marca institucional — Direção A, funciona sem fotografia */
.hero-banner--marca .hero-banner__media {
  background: var(--superficie-escura);
}
.hero-banner--marca .hero-banner__marca {
  position: absolute; z-index: 1;
  right: -6%; bottom: -4%;
  font-family: var(--fonte-titulo);
  font-size: clamp(120px, 34vw, 340px);
  line-height: .8; letter-spacing: .06em;
  color: rgba(250,248,245,.05);
  pointer-events: none; user-select: none;
  white-space: nowrap;
}

/* Faixa de credenciais sob o hero */
.credenciais {
  background: var(--superficie-escura-alt); color: rgba(250,248,245,.88);
  font-size: 15px; line-height: 1.5; padding-block: var(--e5);
}
.credenciais ul { display: grid; gap: var(--e3); }
.credenciais li {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--e2);
  align-items: start;
}
.credenciais li::before { content: '—'; color: var(--linha); line-height: inherit; }

/* ---------- IMAGEM CONTEXTUAL EM FAIXA ---------- */
.faixa-imagem {
  position: relative; background: var(--superficie-escura);
  min-height: 220px; display: flex; align-items: center;
}
.faixa-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faixa-imagem__veu { position: absolute; inset: 0; background: rgba(28,22,19,.6); }
.faixa-imagem__texto {
  position: relative; z-index: 2; color: var(--tinta-clara);
  font-family: var(--fonte-titulo); font-size: 24px; line-height: 1.3;
  max-width: 26ch;
}

/* ---------- FIGURA / PLACEHOLDER EDITORIAL ---------- */
.figura { margin: 0; }
.figura img { width: 100%; height: auto; object-fit: cover; }
.figura figcaption { margin-top: var(--e3); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-secundaria); }

.espaco-imagem {
  position: relative;
  background: var(--superficie-quente);
  border: 1px solid var(--linha);
  aspect-ratio: var(--proporcao, 4 / 5);
  display: grid; place-items: center; text-align: center; padding: var(--e5);
}
.espaco-imagem span {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-secundaria); line-height: 1.8;
}

/* ---------- SOBRE — duas colunas ---------- */
.sobre__grid { display: grid; gap: var(--e6); margin-top: var(--e5); }
.sobre__texto p { max-width: 40rem; }

/* ---------- ÁREAS — lista editorial numerada ---------- */
.areas-editorial { margin-top: var(--e6); counter-reset: area; }
.areas-editorial__item {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--e4);
  padding-block: var(--e5);
  border-top: 1px solid var(--linha-sutil);
  color: var(--tinta); text-decoration: none;
  transition: background var(--rapido) ease-out;
}
.areas-editorial__item:last-child { border-bottom: 1px solid var(--linha-sutil); }
.areas-editorial__item:hover { background: var(--superficie-alt); }
.areas-editorial__item:hover h3 { color: var(--acento); }
.areas-editorial__num {
  counter-increment: area;
  font-family: var(--fonte-titulo); font-size: 15px;
  color: var(--linha); padding-top: 6px;
}
.areas-editorial__num::before { content: counter(area, decimal-leading-zero); }
.areas-editorial__item h3 { font-size: 21px; transition: color var(--rapido) ease-out; }
.areas-editorial__item p { margin-top: var(--e2); font-size: 16px; color: var(--tinta-secundaria); max-width: 46ch; }
.areas-editorial__item--destaque .areas-editorial__num { color: var(--acento); }
.areas-editorial__item--destaque h3 { font-size: 24px; }

/* ---------- FRASE DESTACADA ---------- */
.frase {
  margin-block: var(--e7);
  padding-left: var(--e5);
  border-left: 2px solid var(--acento);
  font-family: var(--fonte-titulo); font-size: 24px; line-height: 1.35;
  max-width: 26ch;
}
.secao--escura .frase { border-left-color: var(--linha); }

/* ---------- DUAS COLUNAS ---------- */
.duas-colunas { display: grid; gap: var(--e6); }

/* ---------- QUICK FINDER dentro de Áreas ---------- */
.finder--embutido { background: transparent; padding-block: 0; margin-top: var(--e7); }
.finder--embutido .finder__item { min-height: 56px; font-size: 16px; }

/* Duas colunas só quando há largura real — evita texto apertado */
@media (min-width: 720px) {
  .credenciais ul { grid-template-columns: repeat(2, 1fr); gap: var(--e3) var(--e7); }
}

@media (min-width: 900px) {
  .hero-banner { min-height: 82svh; }
  .hero-banner__conteudo { padding-block: var(--e10) var(--e9); }
  .hero-banner h1 { max-width: 15ch; }
  .credenciais ul { grid-template-columns: repeat(4, 1fr); }
  .sobre__grid { grid-template-columns: 1.45fr 1fr; gap: var(--e8); align-items: start; }
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--e8); }
  .faixa-imagem { min-height: 300px; }
  .faixa-imagem__texto { font-size: 32px; }
  .areas-editorial { columns: 2; column-gap: var(--e8); }
  .areas-editorial__item { break-inside: avoid; }
  .frase { font-size: 30px; }
}

/* =========================================================
   COMPONENTES DE LANDING — resposta curta, checklist, etapas
   ========================================================= */

/* Resposta curta — o bloco que responde a pergunta da seção */
.resposta {
  border-left: 3px solid var(--acento);
  padding: var(--e4) 0 var(--e4) var(--e5);
  margin-top: var(--e5);
  max-width: 44rem;
}
.resposta p { font-size: 20px; line-height: 1.45; max-width: none; }
.secao--escura .resposta { border-left-color: var(--linha); }

/* Checklist de situações */
.checklist { display: grid; gap: 0; margin-top: var(--e6); max-width: var(--largura-media); }
.checklist li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--e4);
  padding-block: var(--e5);
  border-top: 1px solid var(--linha-sutil);
}
.checklist li:last-child { border-bottom: 1px solid var(--linha-sutil); }
.checklist li::before {
  content: ''; width: 14px; height: 14px; margin-top: 7px;
  border: 1.5px solid var(--acento);
}
.checklist b { display: block; font-size: 18px; }
.checklist span { display: block; margin-top: 4px; font-size: 16px; color: var(--tinta-secundaria); }

/* Etapas do atendimento — trilha numerada */
.etapas { margin-top: var(--e6); max-width: var(--largura-media); counter-reset: etapa; }
.etapas li {
  position: relative; counter-increment: etapa;
  padding: 0 0 var(--e6) var(--e7);
}
.etapas li::before {
  content: counter(etapa);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--acento); color: var(--acento);
  font-family: var(--fonte-titulo); font-size: 16px;
}
.etapas li::after {
  content: ''; position: absolute; left: 17px; top: 40px; bottom: 6px;
  width: 1px; background: var(--linha-sutil);
}
.etapas li:last-child { padding-bottom: 0; }
.etapas li:last-child::after { display: none; }
.etapas b { display: block; font-size: 18px; }
.etapas span { display: block; margin-top: 4px; font-size: 16px; color: var(--tinta-secundaria); }
.secao--escura .etapas li::before { border-color: var(--linha); color: var(--tinta-clara); }
.secao--escura .etapas li::after { background: rgba(250,248,245,.2); }
.secao--escura .etapas span { color: rgba(250,248,245,.75); }

/* Mini-banner de reforço */
.reforco {
  margin-top: var(--e6); padding: var(--e5);
  background: var(--superficie-quente);
  border-left: 3px solid var(--acento);
  max-width: var(--largura-media);
}
.reforco p { max-width: none; font-size: 17px; }

@media (min-width: 700px) {
  .checklist { grid-template-columns: 1fr 1fr; column-gap: var(--e7); }
  .checklist li:nth-child(2) { border-top: 1px solid var(--linha-sutil); }
}
@media (min-width: 900px) {
  .resposta p { font-size: 24px; }
  .etapas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e5); }
  .etapas li { padding: var(--e7) 0 0 0; }
  .etapas li::before { top: 0; }
  .etapas li::after { left: 44px; right: 0; top: 17px; bottom: auto; width: auto; height: 1px; }
  .etapas li:last-child::after { display: none; }
}

/* =========================================================
   AJUSTES DE CONVERSÃO — dobra, identificação, jornada
   ========================================================= */

/* Primeira dobra mais curta: a ressalva vira a nota do botão */
.hero-banner .cta { margin-top: var(--e5); }
.hero-banner h1 { margin-top: var(--e3); }
.hero-banner .hero__sub { margin-top: var(--e4); font-size: 18px; }
@media (max-width: 400px) {
  .hero-banner h1 { font-size: 29px; }
  .hero-banner .hero__sub { font-size: 17px; }
  .hero-banner__conteudo { padding-block: var(--e8) var(--e6); }
}

/* Barra de identificação — substitui a faixa de credenciais.
   Uma linha: quem somos, OAB, onde atendemos. */
.barra-id {
  background: var(--superficie-escura-alt);
  color: rgba(250,248,245,.9);
  font-size: 14px; line-height: 1.5;
  padding-block: var(--e3);
}
.barra-id p { max-width: none; margin: 0; }
.barra-id strong { color: var(--tinta-clara); }
.barra-id span { color: var(--linha); padding-inline: 6px; }

/* O que acontece quando você chama */
.jornada {
  margin-top: var(--e6);
  border-top: 1px solid var(--linha-sutil);
  border-bottom: 1px solid var(--linha-sutil);
  padding-block: var(--e5);
  max-width: var(--largura-media);
  counter-reset: j;
}
.jornada li {
  counter-increment: j;
  display: grid; grid-template-columns: 26px 1fr; gap: var(--e3);
  padding-block: var(--e3);
  font-size: 17px;
}
.jornada li::before {
  content: counter(j); color: var(--acento);
  font-family: var(--fonte-titulo); font-size: 15px; padding-top: 2px;
}
.jornada__nota { margin-top: var(--e4); font-size: 15px; color: var(--tinta-secundaria); }

/* ---------------------------------------------------------
   VARIAÇÃO B — hero dividido (texto claro, foto ao lado)
   --------------------------------------------------------- */
.hero-split { background: var(--superficie-base); border-bottom: 1px solid var(--linha-sutil); }
.hero-split__grid { display: grid; }
.hero-split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: var(--foco, 50% 40%); }
.hero-split__texto { padding-block: var(--e6) var(--e7); }
.hero-split h1 { margin-top: var(--e3); }
.hero-split .hero__sub { margin-top: var(--e4); font-size: 18px; color: var(--tinta-secundaria); }
@media (min-width: 900px) {
  .hero-split__grid { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 72svh; }
  .hero-split__media { order: 2; }
  .hero-split__media img { height: 100%; aspect-ratio: auto; }
  .hero-split__texto { padding-block: var(--e9); padding-right: var(--e7); display: flex; flex-direction: column; justify-content: center; }
}

/* ---------------------------------------------------------
   VARIAÇÃO C — hero editorial (título no escuro, foto abaixo)
   --------------------------------------------------------- */
.hero-ed { background: var(--superficie-escura); color: var(--tinta-clara); }
.hero-ed h1 { color: var(--tinta-clara); margin-top: var(--e3); max-width: 18ch; }
.hero-ed .rotulo { color: rgba(250,248,245,.7); }
.hero-ed .hero__sub { margin-top: var(--e4); font-size: 18px; color: rgba(250,248,245,.86); }
.hero-ed__topo { padding-block: var(--e8) var(--e7); }
.hero-ed__faixa { position: relative; }
.hero-ed__faixa img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: var(--foco, 50% 40%); display: block; }
@media (min-width: 900px) {
  .hero-ed__topo { padding-block: var(--e9) var(--e8); }
  .hero-ed__faixa img { aspect-ratio: 21/8; }
}

/* =========================================================
   RECURSOS VISUAIS POR PÁGINA — cada landing usa o seu
   ========================================================= */

/* COMPARATIVO — duas colunas contrastadas, sem card e sem sombra */
.comparativo { display: grid; gap: 0; margin-top: var(--e6); max-width: var(--largura-media); }
.comparativo__lado { padding: var(--e5) 0; border-top: 1px solid var(--linha-sutil); }
.comparativo__lado h3 { font-size: 19px; font-family: var(--fonte-texto); font-weight: 600; }
.comparativo__lado ul { margin-top: var(--e4); }
.comparativo__lado li { padding-left: var(--e5); position: relative; margin-bottom: var(--e3); font-size: 16px; }
.comparativo__lado li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; }
.comparativo__lado--depois li::before { background: var(--acento); }
.comparativo__lado--antes { color: var(--tinta-secundaria); }
.comparativo__lado--antes li::before { background: var(--linha); }
.comparativo__lado--antes h3 { color: var(--tinta-secundaria); }
@media (min-width: 800px) {
  .comparativo { grid-template-columns: 1fr 1fr; column-gap: var(--e8); }
  .comparativo__lado--depois { border-top-color: var(--acento); border-top-width: 2px; }
}

/* MARCOS — régua de datas / etapas com anos */
.marcos { margin-top: var(--e6); max-width: var(--largura-media); }
.marcos li {
  display: grid; grid-template-columns: 78px 1fr; gap: var(--e4);
  padding-block: var(--e5); border-top: 1px solid var(--linha-sutil);
}
.marcos li:last-child { border-bottom: 1px solid var(--linha-sutil); }
.marcos__quando {
  font-family: var(--fonte-titulo); font-size: 19px; color: var(--acento); line-height: 1.2;
}
.marcos b { display: block; font-size: 18px; }
.marcos span { display: block; margin-top: 4px; font-size: 16px; color: var(--tinta-secundaria); }

/* FLUXO — decisão em dois caminhos */
.fluxo { margin-top: var(--e6); max-width: var(--largura-media); }
.fluxo__origem {
  border: 1px solid var(--linha); padding: var(--e4) var(--e5);
  font-size: 17px; font-weight: 600;
}
.fluxo__setas { display: grid; gap: 0; }
.fluxo__ramo { padding: var(--e5) 0; border-top: 1px solid var(--linha-sutil); }
.fluxo__ramo b { display: block; color: var(--acento); font-size: 16px; }
.fluxo__ramo p { margin-top: 6px; font-size: 16px; max-width: none; }
@media (min-width: 800px) {
  .fluxo__setas { grid-template-columns: 1fr 1fr; column-gap: var(--e7); }
}

/* EXPECTATIVA — bloco de honestidade, usado onde o caso é difícil */
.expectativa {
  margin-top: var(--e6); padding: var(--e5);
  border: 1px solid var(--linha); background: var(--superficie-base);
  max-width: var(--largura-media);
}
.expectativa p { max-width: none; }
.expectativa p + p { margin-top: var(--e3); }
.secao--alt .expectativa { background: var(--superficie-base); }

/* HERO CLARO — tipográfico, sem fotografia */
.hero-claro { background: var(--superficie-base); border-bottom: 1px solid var(--linha-sutil); }
.hero-claro__interno { padding-block: var(--e8) var(--e7); max-width: 46rem; }
.hero-claro h1 { margin-top: var(--e3); }
.hero-claro .hero__sub { margin-top: var(--e4); font-size: 19px; color: var(--tinta-secundaria); }
.hero-claro__regua { height: 3px; width: 64px; background: var(--acento); margin-bottom: var(--e5); }
@media (min-width: 900px) {
  .hero-claro__interno { padding-block: var(--e9) var(--e8); }
  .hero-claro h1 { font-size: 50px; }
}

/* CARTA — representação visual de um documento oficial */
.carta {
  border: 1px solid var(--linha);
  background: var(--superficie-base);
  padding: var(--e5);
  font-size: 15px;
  max-width: 30rem;
}
.carta__cabeca {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-secundaria); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha-sutil); margin-bottom: var(--e4);
}
.carta__linha { display: grid; grid-template-columns: 96px 1fr; gap: var(--e3); padding-block: var(--e2); }
.carta__rot { color: var(--tinta-secundaria); font-size: 13px; }
.carta__val { font-weight: 600; }
.carta__destaque {
  margin-top: var(--e4); padding: var(--e3) var(--e4);
  background: var(--superficie-quente); border-left: 3px solid var(--acento);
  font-size: 15px;
}
.carta p { max-width: none; }

/* TABELA COMPARATIVA — alegação × realidade */
.alegacoes { margin-top: var(--e6); max-width: var(--largura-media); }
.alegacoes li {
  padding-block: var(--e5); border-top: 1px solid var(--linha-sutil);
}
.alegacoes li:last-child { border-bottom: 1px solid var(--linha-sutil); }
.alegacoes b {
  display: block; font-size: 17px; color: var(--tinta-secundaria);
  font-weight: 400; font-style: italic;
}
.alegacoes span { display: block; margin-top: var(--e3); font-size: 17px; }
.alegacoes span::before {
  content: ''; display: inline-block; width: 14px; height: 1px;
  background: var(--acento); vertical-align: middle; margin-right: 10px;
}
@media (min-width: 800px) {
  .alegacoes li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: start; }
  .alegacoes span { margin-top: 0; }
}

/* CADEIA — sequência de análise, um elo leva ao outro */
.cadeia { margin-top: var(--e6); max-width: var(--largura-media); }
.cadeia li {
  position: relative;
  border: 1px solid var(--linha);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e6);
}
.cadeia li:last-child { margin-bottom: 0; border-color: var(--acento); }
.cadeia li::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--e6) * -1);
  width: 1px; height: var(--e6); background: var(--linha);
}
.cadeia li:last-child::after { display: none; }
.cadeia b {
  display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento);
}
.cadeia span { display: block; margin-top: 6px; font-size: 16px; color: var(--tinta-secundaria); }
@media (min-width: 900px) {
  .cadeia { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e6); }
  .cadeia li { margin-bottom: 0; display: flex; flex-direction: column; }
  .cadeia li::after {
    left: auto; right: calc(var(--e6) * -1); bottom: auto; top: 50%;
    width: var(--e6); height: 1px;
  }
}

/* HERO QUENTE — abertura em superfície morna, sem fotografia.
   Usada quando o público pede acolhimento antes de qualquer outra coisa. */
.hero-quente { background: var(--superficie-quente); border-bottom: 1px solid var(--linha-sutil); }
.hero-quente__interno { padding-block: var(--e8) var(--e7); max-width: 46rem; }
.hero-quente h1 { margin-top: var(--e3); max-width: 16ch; }
.hero-quente .hero__sub { margin-top: var(--e4); font-size: 19px; color: var(--tinta-secundaria); }
.hero-quente .rotulo { color: var(--acento-escuro); }
.hero-quente .botao--secundario { border-color: var(--tinta); }

/* DECISÃO — representação editorial de um indeferimento e seus motivos possíveis.
   Não reproduz documento oficial: é uma abstração do que a pessoa tem em mãos. */
.decisao { border: 1px solid var(--linha); background: var(--superficie-base); max-width: 34rem; }
.decisao__topo {
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha-sutil);
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: baseline; justify-content: space-between;
}
.decisao__nome { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-secundaria); }
.decisao__selo {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--acento); border: 1px solid var(--acento); padding: 5px 12px;
}
.decisao__corpo { padding: var(--e5); }
.decisao__intro { font-size: 15px; color: var(--tinta-secundaria); margin: 0 0 var(--e4); max-width: none; }
.decisao__motivos li {
  position: relative; padding: var(--e3) 0 var(--e3) 30px; font-size: 16px;
  border-top: 1px solid var(--linha-sutil);
}
.decisao__motivos li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--e3) + 5px);
  width: 12px; height: 12px; border: 1px solid var(--tinta-secundaria);
}
.decisao__nota {
  margin: var(--e4) 0 0; padding: var(--e3) var(--e4); font-size: 15px;
  background: var(--superficie-quente); border-left: 3px solid var(--acento); max-width: none;
}

/* ROTA — três passos curtos, em linha. Usada quando o caminho é simples
   e alongá-lo em blocos numerados daria peso indevido. */
.rota { margin-top: var(--e6); display: grid; gap: var(--e4); max-width: var(--largura-media); }
.rota li {
  position: relative; padding-left: var(--e6);
  font-size: 17px; font-weight: 600;
}
.rota li::before {
  content: '→'; position: absolute; left: 0; top: 0; color: var(--acento); font-weight: 400;
}
.rota span { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; color: var(--tinta-secundaria); }
@media (min-width: 800px) {
  .rota { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e6); }
}


/* Variante do hero claro em superfície intermediária.
   Topo mais curto: o H1 desta família é longo e o botão precisa caber na dobra. */
.hero-claro--alt { background: var(--superficie-alt); }
.hero-claro--alt .hero-claro__interno { padding-block: var(--e7) var(--e7); }

/* HERO MÍNIMO — quando a simplicidade é o próprio recurso.
   Filete de acento no topo, muito ar, nada além do essencial. */
.hero-min { background: var(--superficie-base); border-top: 4px solid var(--acento); }
.hero-min__interno { padding-block: var(--e8) var(--e8); max-width: 40rem; }
@media (min-width: 900px) { .hero-min__interno { padding-block: var(--e9) var(--e9); } }
.hero-min h1 { margin-top: var(--e3); }
.hero-min .hero__sub { margin-top: var(--e4); font-size: 19px; color: var(--tinta-secundaria); }

/* GRADE DE SESSÕES — como a limitação de terapias aparece na semana.
   Os quadrados são decorativos; a contagem em texto carrega o significado. */
.grade-sessoes { margin-top: var(--e6); max-width: var(--largura-media); }
.grade-sessoes li { padding-block: var(--e4); border-top: 1px solid var(--linha-sutil); }
.grade-sessoes li:last-child { border-bottom: 1px solid var(--linha-sutil); }
.grade-sessoes__nome { display: block; font-size: 17px; font-weight: 600; }
.grade-sessoes__baixo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); margin-top: 10px; }
.grade-sessoes__marcas { display: flex; gap: 6px; }
.grade-sessoes__marcas i { width: 15px; height: 15px; background: var(--acento); display: block; }
.grade-sessoes__marcas i.vazio { background: transparent; border: 1px solid var(--linha); }
.grade-sessoes__conta { font-size: 15px; color: var(--tinta-secundaria); }
.grade-sessoes__legenda { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); margin-top: var(--e4); font-size: 14px; color: var(--tinta-secundaria); }
.grade-sessoes__legenda span { display: flex; align-items: center; gap: 8px; }
.grade-sessoes__legenda i { width: 12px; height: 12px; background: var(--acento); display: block; }
.grade-sessoes__legenda i.vazio { background: transparent; border: 1px solid var(--linha); }
@media (min-width: 700px) {
  .grade-sessoes li { display: grid; grid-template-columns: 1fr auto; gap: var(--e5); align-items: center; }
  .grade-sessoes__baixo { margin-top: 0; justify-content: flex-end; }
}

/* CONVERGÊNCIA — três elementos que só decidem alguma coisa quando lidos juntos. */
.convergencia { margin-top: var(--e6); max-width: var(--largura-media); }
.convergencia__fontes { display: grid; gap: var(--e4); }
.convergencia__fonte { border: 1px solid var(--linha); padding: var(--e4) var(--e5); }
.convergencia__fonte b {
  display: block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--acento);
}
.convergencia__fonte span { display: block; margin-top: 6px; font-size: 16px; color: var(--tinta-secundaria); }
.convergencia__no {
  position: relative; margin-top: var(--e7); border: 1px solid var(--acento);
  padding: var(--e5); background: var(--superficie-quente);
}
.convergencia__no::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--e7) * -1);
  width: 1px; height: var(--e7); background: var(--linha);
}
.convergencia__no b { display: block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--acento-escuro); }
.convergencia__no p { margin: 8px 0 0; font-size: 17px; max-width: none; }
@media (min-width: 800px) {
  .convergencia__fontes { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
  .convergencia__no { max-width: 34rem; margin-inline: auto; }
}

/* MESA — o que está pendente na operação de uma empresa hoje.
   Lê-se como agenda, não como documento: régua grossa no topo, prazo à direita. */
.mesa { margin-top: var(--e6); border-top: 3px solid var(--tinta); max-width: var(--largura-media); }
.mesa li {
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px;
  padding-block: var(--e4); border-bottom: 1px solid var(--linha-sutil);
}
@media (min-width: 600px) {
  .mesa li { display: grid; grid-template-columns: 1fr auto; gap: var(--e4); align-items: start; }
}
.mesa b { display: block; font-size: 17px; }
.mesa__desc { display: block; margin-top: 4px; font-size: 15px; color: var(--tinta-secundaria); }
.mesa__prazo {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); border: 1px solid var(--acento); padding: 4px 9px; white-space: nowrap;
}

/* FAIXA DE DADOS — banda escura de largura total feita de informação, não de fotografia. */
.faixa-dados { background: var(--superficie-escura); color: var(--tinta-clara); }
.faixa-dados__interno {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4);
  padding-block: var(--e5); align-items: baseline;
}
.faixa-dados__campo { display: flex; flex-direction: column; gap: 6px; }
.faixa-dados__rot {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,248,245,.62);
}
.faixa-dados__val { font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.faixa-dados__campo--dif .faixa-dados__val { color: var(--acento-claro); }
@media (min-width: 700px) {
  .faixa-dados__interno { display: flex; flex-wrap: wrap; gap: var(--e7); align-items: baseline; }
  .faixa-dados__campo { flex-direction: row; align-items: baseline; gap: var(--e3); }
  .faixa-dados__campo--dif { margin-left: auto; }
}

/* ESPERA — régua de horas: o que é devido a cada faixa de atraso. */
.espera { margin-top: var(--e6); max-width: var(--largura-media); }
.espera li {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--e4);
  padding-bottom: var(--e6);
}
.espera li:last-child { padding-bottom: 0; }
.espera li::after {
  content: ''; position: absolute; left: 27px; top: 34px; bottom: 6px; width: 1px; background: var(--linha);
}
.espera li:last-child::after { display: none; }
.espera__h {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 34px; border: 1px solid var(--linha);
  font-size: 15px; font-weight: 600; background: var(--superficie-base);
}
.espera li:last-child .espera__h { border-color: var(--acento); color: var(--acento-escuro); }
.espera b { display: block; font-size: 18px; }
.espera span { display: block; margin-top: 4px; font-size: 16px; color: var(--tinta-secundaria); }

/* CHAMADOS — o registro de reclamações que se acumulam sem solução.
   Datas genéricas: representa o padrão, não o caso de ninguém. */
.chamados { border: 1px solid var(--linha); background: var(--superficie-base); max-width: 32rem; }
.chamados__cabeca {
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha-sutil);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-secundaria);
}
.chamados__lista { padding: var(--e3) var(--e5); }
.chamados__lista li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: var(--e3);
  align-items: baseline; padding-block: var(--e3); font-size: 15px;
  border-bottom: 1px solid var(--linha-sutil);
}
.chamados__lista li:last-child { border-bottom: 0; }
.chamados__data { color: var(--tinta-secundaria); font-size: 13px; }
.chamados__estado { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.chamados__pe {
  padding: var(--e4) var(--e5); border-top: 1px solid var(--linha);
  background: var(--superficie-quente); font-size: 16px;
}
.chamados__pe strong { display: block; }

/* PORTAS — três problemas diferentes sob o mesmo assunto, com caminhos distintos.
   A barra de cor é seletor, não enfeite: é o que deixa a pessoa achar a sua. */
.portas { margin-top: var(--e6); display: grid; gap: var(--e5); max-width: var(--largura-media); }
.porta { border: 1px solid var(--linha); background: var(--superficie-base); }
.porta__marca {
  background: var(--acento); color: var(--tinta-clara);
  padding: 10px var(--e4); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.porta__corpo { padding: var(--e4) var(--e4) var(--e5); }
.porta__corpo p { margin: 0; font-size: 16px; color: var(--tinta-secundaria); max-width: none; }
.porta__passo {
  display: block; margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid var(--linha-sutil); font-size: 16px; color: var(--tinta);
}
.porta__passo b { color: var(--acento-escuro); }
@media (min-width: 860px) {
  .portas { grid-template-columns: repeat(3, 1fr); }
}

/* TERMO — folha de conferência: cada linha da rescisão e o que olhar nela. */
.termo { border: 1px solid var(--linha); background: var(--superficie-base); max-width: 34rem; }
.termo__cabeca {
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha-sutil);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-secundaria);
}
.termo__lista { padding: var(--e3) var(--e5); }
.termo__lista li { padding-block: var(--e3); border-bottom: 1px solid var(--linha-sutil); }
.termo__lista li:last-child { border-bottom: 0; }
.termo__item { display: block; font-size: 17px; font-weight: 600; }
.termo__olhar { display: block; margin-top: 3px; font-size: 15px; color: var(--tinta-secundaria); }
.termo__pe {
  padding: var(--e4) var(--e5); border-top: 1px solid var(--linha);
  background: var(--superficie-quente); font-size: 16px;
}
@media (min-width: 600px) {
  .termo__lista li { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--e4); align-items: baseline; }
  .termo__olhar { margin-top: 0; }
}

/* PERGUNTAS — quando o assunto não comporta caixa, tabela nem fórmula.
   Só tipografia: a pergunta grande, a resposta curta embaixo. */
.perguntas { margin-top: var(--e6); max-width: var(--largura-media); }
.perguntas li { padding-block: var(--e6); border-top: 1px solid var(--linha-sutil); }
.perguntas li:first-child { border-top: 0; padding-top: var(--e4); }
.perguntas b {
  display: block; font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 25px; line-height: 1.25; color: var(--acento-escuro); max-width: 22ch;
}
.perguntas span { display: block; margin-top: var(--e3); font-size: 17px; color: var(--tinta-secundaria); }
@media (min-width: 800px) {
  .perguntas li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: baseline; }
  .perguntas span { margin-top: 0; }
}

/* BIFURCAÇÃO — uma pergunta que se divide em dois caminhos distintos. */
.bifurcacao { margin-top: var(--e6); max-width: var(--largura-media); }
.bifurcacao__origem {
  border: 1px solid var(--tinta); padding: var(--e4) var(--e5);
  font-size: 18px; font-weight: 600; text-align: center;
}
.bifurcacao__ramos { position: relative; display: grid; gap: var(--e5); margin-top: var(--e7); }
.bifurcacao__ramos::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--e7) * -1);
  width: 1px; height: var(--e7); background: var(--linha);
}
.bifurcacao__ramo { border: 1px solid var(--linha); border-top: 3px solid var(--acento); padding: var(--e5); }
.bifurcacao__ramo b { display: block; font-size: 18px; }
.bifurcacao__ramo p { margin: var(--e3) 0 0; font-size: 16px; color: var(--tinta-secundaria); max-width: none; }
.bifurcacao__ramo ul { margin-top: var(--e4); }
.bifurcacao__ramo li {
  position: relative; padding-left: 18px; margin-top: 8px; font-size: 16px;
}
.bifurcacao__ramo li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--acento);
}
@media (min-width: 760px) {
  .bifurcacao__ramos { grid-template-columns: 1fr 1fr; gap: var(--e6); }
}

/* ROTEIRO — tabela de roteamento: cada situação e para onde ela leva.
   É o único lugar do site em que a informação é genuinamente tabular. */
.roteiro-scroll { margin-top: var(--e6); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.roteiro { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; }
.roteiro caption {
  text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-secundaria); padding-bottom: var(--e3);
}
.roteiro th, .roteiro td { padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linha-sutil); vertical-align: top; }
.roteiro thead th {
  border-bottom: 1px solid var(--linha); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-secundaria); font-weight: 600;
}
.roteiro thead th:not(:first-child), .roteiro td:not(:first-child) { text-align: center; width: 5.5rem; }
.roteiro tbody th { text-align: left; font-weight: 400; }
.roteiro .sim { color: var(--acento); font-weight: 600; }
.roteiro .nao { color: var(--linha); }

/* MIGALHA — trilha de navegação, área → página. Só aparece quando ajuda a situar,
   nunca nas landings de campanha (o foco delas é o problema, não o mapa do site). */
.migalha {
  border-bottom: 1px solid var(--linha-sutil); background: var(--superficie-alt);
}
.migalha__interno {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-block: 12px; font-size: 13.5px; color: var(--tinta-secundaria);
}
.migalha__interno a { color: var(--tinta-secundaria); text-decoration: none; }
.migalha__interno a:hover { color: var(--acento); text-decoration: underline; }
.migalha__interno span[aria-hidden] { color: var(--linha); }
.migalha__atual { color: var(--tinta); font-weight: 600; }

/* HUB — cabeçalho institucional e calmo. Sem fotografia, sem véu, sem urgência:
   quem chega aqui já sabe a área, e precisa de mapa, não de campanha. */
.hub-hero { background: var(--superficie-quente); border-bottom: 1px solid var(--linha-sutil); }
.hub-hero__interno { padding-block: var(--e7) var(--e7); max-width: 50rem; }
.hub-hero h1 { margin-top: var(--e3); max-width: 20ch; }
.hub-hero .hero__sub { margin-top: var(--e4); font-size: 19px; color: var(--tinta-secundaria); max-width: 60ch; }

/* HUB — grade de satélites: a navegação principal do hub, não uma sugestão de rodapé. */
.hub-grade { margin-top: var(--e6); display: grid; gap: var(--e5); }
@media (min-width: 720px) { .hub-grade { grid-template-columns: repeat(2, 1fr); } }
.hub-card {
  display: block; border: 1px solid var(--linha); background: var(--superficie-base);
  padding: var(--e5); text-decoration: none; color: inherit;
  transition: border-color var(--rapido) ease-out;
}
.hub-card:hover { border-color: var(--acento); }
.hub-card h3 {
  font-size: 19px; color: var(--tinta); transition: color var(--rapido) ease-out;
}
.hub-card:hover h3 { color: var(--acento); }
.hub-card p { margin-top: 8px; font-size: 15.5px; color: var(--tinta-secundaria); max-width: none; }
.hub-card .seta { display: inline-block; margin-top: var(--e3); color: var(--acento); font-size: 14px; }

/* HUB — quando a área ainda não tem satélite publicado: nomeada, nunca linkada para o vazio. */
.hub-em-preparo {
  border: 1px dashed var(--linha); padding: var(--e5); color: var(--tinta-secundaria); font-size: 15.5px;
}

/* INSTITUCIONAL — cartão simples, para listas de valores/diferenciais sem virar autoelogio. */
.inst-grade { margin-top: var(--e6); display: grid; gap: var(--e5); }
@media (min-width: 720px) { .inst-grade { grid-template-columns: repeat(2, 1fr); } }
.inst-card { border-top: 3px solid var(--acento); padding-top: var(--e4); }
.inst-card h3 { font-size: 18px; }
.inst-card p { margin-top: 8px; color: var(--tinta-secundaria); font-size: 15.5px; }

/* LEGAL — leitura densa, sem blocos de conversão. Numeração porque é lei/norma, não "marketing". */
.legal-corpo { max-width: 68ch; }
.legal-corpo h2 { font-size: 22px; margin-top: var(--e7); }
.legal-corpo h2:first-child { margin-top: 0; }
.legal-corpo h3 { font-size: 17px; margin-top: var(--e5); }
.legal-corpo p, .legal-corpo li { color: var(--tinta-secundaria); font-size: 16px; }
.legal-corpo li { margin-top: 6px; }
.legal-corpo strong { color: var(--tinta); }
.legal-atualizacao {
  font-size: 14px; color: var(--tinta-secundaria); padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linha-sutil); margin-bottom: var(--e6);
}

/* ---------- CONSENTIMENTO DE COOKIES ----------
   Só aparece quando assets/js/consentimento.js tiver ATIVO = true —
   ou seja, quando houver de fato uma ferramenta de mensuração instalada. */
.consentimento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--superficie-escura-alt); color: var(--tinta-clara);
  padding: var(--e5) 0; border-top: 1px solid rgba(250,248,245,.14);
}
.consentimento__caixa {
  max-width: var(--container); margin: 0 auto; padding-inline: var(--e5);
  display: flex; flex-direction: column; gap: var(--e4);
}
.consentimento__texto { font-size: 15px; color: rgba(250,248,245,.88); max-width: 60ch; }
.consentimento__texto a { color: var(--tinta-clara); }
.consentimento__botoes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.consentimento .botao--secundario { color: var(--tinta-clara); border-color: var(--tinta-clara); }
@media (min-width: 700px) {
  .consentimento__caixa { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- IMPRESSÃO ---------- */
@media print {
  .cabecalho, .menu-painel, .cta, .finder, .saidas { display: none; }
  body { font-size: 12pt; background: #fff; }
  .secao--escura, .secao--escura-alt { background: #fff; color: #000; }
}