/*
 * Landing do JurisPag — v2 (2026-08-25).
 *
 * Reescrita sobre a fundação da v1 (feat/landing-page): o que mudou foi o POSICIONAMENTO e
 * os CLAIMS (processo completo em research/landing/), não o ofício. A base abaixo foi
 * revalidada por três fontes independentes (produto/DESIGN.md, Mobbin, ui-ux-pro-max):
 *
 *   - Geist e Geist Mono variáveis, self-hosted, sem request ao Google;
 *   - tokens copiados do design system do app (main.css/@theme) — mudança lá exige mudança aqui;
 *   - azul-caneta como acento único; dourado JAMAIS em UI (só dentro dos SVGs de marca);
 *   - a linha de extrato como componente-assinatura; status por cor + rótulo + FORMA (D1);
 *   - elevação neutra e curta, liberada NESTA superfície de venda (no app é proibida);
 *   - nenhum dado real: toda recriação é fictícia e rotulada "dados ilustrativos";
 *   - contraste medido por script (scripts/contraste.mjs), nunca a olho;
 *   - a página inteira funciona sem JS: revelação e demo são progressivas.
 */

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fundo: #fafaf9;
  --superficie: #ffffff;
  --superficie-2: #f5f5f4;
  --tinta: #1c1917;
  --tinta-suave: #44403c;
  --tinta-apagada: #57534e;
  --regua: #e7e5e4;
  /* 3,27:1 sobre o fundo. WCAG 1.4.11 pede 3:1 para a borda que IDENTIFICA um controle. */
  --regua-controle: #8f8a85;
  --caneta: #1b3fab;
  --caneta-escura: #163591;
  --recibo: #0f6b3c;
  --vencido: #c5301c;
  --ambar: #7d6218;
  --ardosia: #4c5a6e;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --raio: 10px;
  --raio-controle: 6px;
  --medida: 620px;

  /* Elevação: liberada aqui, proibida no app. Neutra e curta — não é glow nem material. */
  --elev-1: 0 1px 2px rgba(28, 25, 23, .05), 0 1px 3px rgba(28, 25, 23, .04);
  --elev-2: 0 4px 12px rgba(28, 25, 23, .06), 0 2px 4px rgba(28, 25, 23, .04);
  --elev-3: 0 18px 40px rgba(28, 25, 23, .09), 0 4px 10px rgba(28, 25, 23, .05);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* O topo é sticky (68px): sem esta margem, o salto de âncora esconde o título
   da seção atrás dele — e o foco de teclado junto (WCAG focus-not-obscured). */
[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* o visual do herói sangra a borda direita de propósito */
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--caneta); }

:focus-visible {
  outline: 2px solid var(--caneta);
  outline-offset: 2px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--superficie); padding: 12px 16px;
  border: 1px solid var(--regua-controle); z-index: 100;
}
.pular:focus { left: 8px; top: 8px; }

.envelope { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 640px) { .envelope { padding-inline: 16px; } }

/* Alguns blocos são só do desktop (o mobile recompõe em vez de encolher). */
@media (max-width: 639px) { .so-desktop { display: none !important; } }

/* ---------- revelação no scroll ----------
 * Movimento que CARREGA SENTIDO: o conteúdo entra na direção da leitura, uma vez só. Sem JS
 * (ou com reduced-motion) tudo já nasce visível — a página nunca depende da animação. */
.revela { opacity: 1; transform: none; }
.js .revela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(.2,.7,.3,1), transform 520ms cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--atraso, 0ms);
}
.js .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.topo.rolado { border-bottom-color: var(--regua); box-shadow: var(--elev-1); }
.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 68px;
}
.marca { display: inline-flex; }
.marca img { display: block; height: 24px; width: auto; }
.topo-nav { display: none; gap: 4px; }
.topo-nav a {
  color: var(--tinta-suave); text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  padding: 12px; border-radius: var(--raio-controle); /* ≥44px de alvo */
  transition: color 160ms ease, background-color 160ms ease;
}
.topo-nav a:hover { color: var(--tinta); background: var(--superficie-2); }
@media (min-width: 900px) { .topo-nav { display: flex; } }
.topo-acoes { display: flex; align-items: center; gap: 8px; }

/* ---------- botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border-radius: var(--raio-controle); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.botao svg { width: 16px; height: 16px; }
.botao-primario { background: var(--caneta); color: #fff; box-shadow: var(--elev-1); }
.botao-primario:hover { background: var(--caneta-escura); transform: translateY(-1px); box-shadow: var(--elev-2); }
.botao-primario:active { transform: none; }
.botao-neutro { background: var(--superficie); color: var(--tinta); border-color: var(--regua-controle); }
.botao-neutro:hover { background: var(--superficie-2); transform: translateY(-1px); }
.botao-texto { color: var(--tinta-suave); padding-inline: 10px; }
.botao-texto:hover { color: var(--tinta); }
.botao-grande { min-height: 52px; padding: 0 26px; font-size: 1rem; }

/* ---------- tipografia ---------- */

.sobrancelha {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-apagada); margin: 0 0 18px;
}
.sobrancelha::before { content: ''; width: 18px; height: 1px; background: var(--regua-controle); }

h1 {
  font-size: clamp(2.25rem, 5.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
  margin: 0 0 22px;
  max-width: 17ch;
}
h1 em { font-style: normal; color: var(--caneta); }

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.028em; font-weight: 600; margin: 0 0 14px;
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.012em; }

.chamada { font-size: 1.125rem; color: var(--tinta-suave); max-width: var(--medida); margin: 0 0 32px; }
.nota { font-size: 0.75rem; color: var(--tinta-apagada); margin: 14px 0 0; }

section { padding-block: clamp(64px, 9vw, 116px); }
.secao-cabeca { max-width: var(--medida); margin-bottom: 40px; }

/* ---------- herói ---------- */

.heroi { padding-block: clamp(48px, 7vw, 88px) clamp(48px, 7vw, 88px); }
.heroi-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .heroi-grade { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 48px; }
  /* O produto sangra a borda direita: comunica "há mais tela além da dobra".
     A margem negativa desfaz o gutter do envelope: max(20px, metade do excedente do teto).
     O leve excesso do 100vw (scrollbar) é contido pelo overflow-x: clip do body. */
  .heroi-visual { margin-right: calc(-1 * max(20px, (100vw - 1120px) / 2)); }
  .heroi-visual .quadro { box-shadow: var(--elev-3); border-radius: var(--raio) 0 0 var(--raio); border-right: 0; }
}
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- o quadro (recriações do produto) ---------- */

.quadro {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--elev-2);
}
.quadro-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--superficie-2); border-bottom: 1px solid var(--regua);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-apagada);
}

/* métricas do mês, no topo da caixa */
.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrica { padding: 12px 16px; border-bottom: 1px solid var(--regua); }
.metrica + .metrica { border-left: 1px solid var(--regua); }
.metrica dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-apagada); }
.metrica dd { margin: 2px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.0625rem; }
.metrica .neg { color: var(--vencido); }
@media (max-width: 639px) {
  .metricas { grid-template-columns: 1fr; }
  .metrica + .metrica { border-left: 0; }
}

/* grupos por ação */
.grupo-titulo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 10px;
  padding: 8px 16px; background: var(--superficie-2); border-bottom: 1px solid var(--regua);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-apagada);
}
.grupo-titulo > span:first-child { white-space: nowrap; }
.grupo-titulo .mono { font-size: 0.6875rem; }
.grupo-titulo.alerta { color: var(--vencido); }

.linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px; padding: 11px 16px; font-size: 0.875rem;
}
.linha + .linha { border-top: 1px solid var(--regua); }
/* No mobile a linha vira DOIS ANDARES (nome+meta em cima; selo/ação e valor embaixo) —
   é a mesma recomposição que o app fez em /despesas quando o nome ficou com 10px. */
@media (max-width: 639px) {
  .linha { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .linha-quem { grid-column: 1 / -1; }
  .linha .selo, .linha .linha-acao { justify-self: start; }
}
.linha-quem { min-width: 0; }
.linha-nome { display: block; font-weight: 500; }
.linha-meta { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--tinta-apagada); }
.valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* a baixa na própria linha (decorativa na recriação, mas com a anatomia real) */
.linha-acao {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--caneta);
  border: 1px solid var(--regua-controle); border-radius: var(--raio-controle);
  padding: 4px 9px; white-space: nowrap;
}
.linha-acao svg { width: 12px; height: 12px; }

/* Regra D1: cor + rótulo + FORMA. O portador vive no ::before; o leitor de tela lê o rótulo. */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--raio-controle);
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.selo::before { content: ''; width: 8px; height: 8px; flex: none; }
.selo-paga { background: #e8f3ec; color: var(--recibo); }
.selo-paga::before { background: currentColor; border-radius: 50%; }
.selo-pendente { background: #f7f1e0; color: var(--ambar); }
.selo-pendente::before { border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.selo-vencida { background: #fbeae7; color: var(--vencido); }
.selo-vencida::before {
  width: 0; height: 0;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-bottom: 8px solid currentColor;
}

/* faixa de aging: o atraso aberto por idade */
.aging { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--regua); }
.aging > div { padding: 9px 16px; }
.aging > div + div { border-left: 1px solid var(--regua); }
.aging dt { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-apagada); }
.aging dd { margin: 1px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8125rem; font-weight: 600; color: var(--vencido); }

.quadro-rodape {
  padding: 9px 16px; border-top: 1px solid var(--regua);
  font-size: 0.75rem; color: var(--tinta-apagada);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

/* ---------- problema ---------- */

.problemas { display: grid; gap: 16px; }
@media (min-width: 800px) { .problemas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.problema { border-left: 2px solid var(--vencido); padding: 2px 0 2px 16px; }
.problema h3 { color: var(--tinta); margin-bottom: 4px; }
.problema p { margin: 0; color: var(--tinta-apagada); font-size: 0.9375rem; }

/* ---------- o ciclo (5 passos) ---------- */

.ciclo { display: grid; gap: 0; counter-reset: passo; max-width: 720px; }
.passo {
  position: relative; padding: 0 0 28px 56px; counter-increment: passo;
}
.passo:last-child { padding-bottom: 0; }
.passo::before {
  content: counter(passo);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--caneta); color: #fff;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600;
}
/* a linha que liga os passos: continuidade, não enfeite */
.passo:not(:last-child)::after {
  content: ''; position: absolute; left: 17px; top: 40px; bottom: 6px;
  width: 1px; background: var(--regua);
}
.passo h3 { margin-bottom: 3px; }
.passo p { margin: 0; color: var(--tinta-suave); font-size: 0.9375rem; max-width: 56ch; }

/* ---------- grades e cartões ---------- */

.grade-2 { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
}

.cartao {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio); padding: 22px; box-shadow: var(--elev-1);
}

/* ==========================================================================
   A DEMONSTRAÇÃO: do PDF ao cronograma (3 atos + o ato da revisão)
   ==========================================================================
   Roda UMA vez quando entra na tela e tem botão para repetir. Com reduced-motion (ou sem
   JS) o estado final aparece direto, sem nada piscando. */

.demo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr); gap: 18px; align-items: start; }
  .demo-seta { align-self: center; padding-top: 40px; }
}

.demo-painel {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio); box-shadow: var(--elev-3); overflow: hidden;
}
.demo-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--regua);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-apagada);
}

.doc { padding: 18px 16px 20px; }
.doc-titulo {
  font-size: 0.75rem; font-weight: 600; text-align: center;
  letter-spacing: 0.04em; margin: 0 0 16px; color: var(--tinta-suave);
}
.doc-linha { height: 6px; border-radius: 3px; background: var(--superficie-2); margin-bottom: 9px; }
.doc-linha.curta { width: 58%; }
.doc-linha.media { width: 82%; }
.doc-par { margin: 12px 0; font-size: 0.75rem; line-height: 1.7; color: var(--tinta-apagada); }
.doc-campo {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--tinta);
  padding: 1px 3px; border-radius: 3px; background: transparent;
}
.tocando .doc-campo { animation: realce 500ms ease forwards; animation-delay: var(--quando); }
@keyframes realce {
  from { background-color: transparent; }
  to { background-color: color-mix(in srgb, var(--caneta) 15%, white); }
}

.demo-seta { display: flex; align-items: center; justify-content: center; color: var(--regua-controle); }
.demo-seta svg { width: 22px; height: 22px; transform: rotate(90deg); }
@media (min-width: 900px) { .demo-seta svg { transform: none; } }
.tocando .demo-seta { animation: pulso 1.3s ease 800ms 2; }
@keyframes pulso {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; color: var(--caneta); }
}

.campos { padding: 12px 14px; border-bottom: 1px solid var(--regua); margin: 0; }
.campo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.8125rem; }
.campo dt { color: var(--tinta-apagada); }
.campo dd { margin: 0; font-family: var(--font-mono); font-weight: 500; }
.js .tocando .campo { animation: entra 420ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--quando); }
@keyframes entra {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* o ato da revisão: a frase REAL da tela do produto, como selo */
.revisao {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--regua);
  font-size: 0.75rem; font-weight: 500; color: var(--ambar); background: #f7f1e0;
}
.revisao::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box;
}
.js .tocando .revisao { animation: entra 420ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--quando); }

.crono-cabeca {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  padding: 8px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--regua);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-apagada);
}
.crono-linha {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 8px 14px; font-size: 0.8125rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.crono-linha + .crono-linha { border-top: 1px solid var(--regua); }
.crono-linha:nth-child(even) { background: #fcfcfb; }
.crono-linha .valor { text-align: right; }
.js .tocando .crono-linha { animation: entra 360ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--quando); }

.demo-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--regua);
  font-size: 0.75rem; color: var(--tinta-apagada);
}
.repetir {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; margin-right: -6px;
  background: none; border: 0; color: var(--caneta);
  font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  border-radius: var(--raio-controle); transition: background-color 160ms ease;
}
.repetir:hover { background: var(--superficie-2); }
.repetir svg { width: 13px; height: 13px; }

/* ---------- avisos (os dois fluxos de WhatsApp) ---------- */

.avisos { display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .avisos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.aviso-cartao {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio); box-shadow: var(--elev-2); overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
}
.aviso-rotulo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--regua);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-apagada);
}

.zap { background: var(--superficie-2); padding: 14px; display: grid; gap: 10px; flex: 1; }
.zap-balao {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: 10px 10px 10px 2px;
  padding: 10px 12px; max-width: 94%;
  box-shadow: var(--elev-1);
  font-size: 0.8125rem; line-height: 1.5;
}
.zap-de { font-size: 0.6875rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 4px; }
.zap-corpo { margin: 0; }
.zap-corpo .mono { font-size: 0.8125rem; }
.zap-botao {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--regua);
  text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--caneta);
}
.zap-hora {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--tinta-apagada); text-align: right; margin-top: 6px;
}
.aviso-legenda { padding: 12px 14px; font-size: 0.8125rem; color: var(--tinta-apagada); border-top: 1px solid var(--regua); margin: 0; }

/* a ligação mensagem → registro */
.aviso-registro { border-top: 1px solid var(--regua); }
.aviso-registro .linha { font-size: 0.8125rem; padding: 9px 14px; }

/* ---------- consolidado financeiro ---------- */

.consolidado-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.consolidado-metricas .metrica { border-bottom: 1px solid var(--regua); }
@media (max-width: 639px) {
  .consolidado-metricas { grid-template-columns: 1fr; }
  .consolidado-metricas .metrica + .metrica { border-left: 0; }
}

.grafico { padding: 18px 16px 8px; }
.grafico-barras { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 120px; }
/* 60% de caneta: primeiro degrau que passa 3:1 sobre branco (medido: 3,23:1). */
.grafico-barras > div { background: color-mix(in srgb, var(--caneta) 60%, white); border-radius: 3px 3px 0 0; min-height: 6px; }
.grafico-barras > div.atual { background: var(--caneta); }
/* a linha do custo: tracejada, ancorada DENTRO da área das barras (34% ≈ custo/recebido),
   e só existe porque há custo baixado no período */
.grafico-custo {
  position: absolute; left: 0; right: 0; bottom: 34%;
  border-top: 2px dashed var(--ardosia); opacity: .75;
}
.grafico-legenda {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 0 6px; font-size: 0.6875rem; color: var(--tinta-apagada);
}
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: 2px; background: var(--caneta); }
.grafico-legenda i.custo { height: 0; border-top: 2px dashed var(--ardosia); border-radius: 0; }
.grafico-meses {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--tinta-apagada);
  text-align: center; padding-bottom: 4px;
}

.vazamento { border-top: 1px solid var(--regua); }
.vazamento .linha { font-size: 0.8125rem; }

/* ---------- equipe ---------- */

.papeis { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--regua); font-size: 0.8125rem; }
.papel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.papel-nome { color: var(--tinta-suave); font-weight: 500; }
.papel-tag {
  font-family: var(--font-mono); font-size: 0.6875rem;
  padding: 1px 7px; border-radius: 4px; background: var(--superficie-2); color: var(--tinta-apagada);
}
.papel-tag.tudo { background: color-mix(in srgb, var(--caneta) 10%, white); color: var(--caneta); }

.auditoria { margin: 0; }
.auditoria > div { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 14px; font-size: 0.8125rem; }
.auditoria > div + div { border-top: 1px solid var(--regua); }
.auditoria time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--tinta-apagada); padding-top: 1px; }
.auditoria p { margin: 0; }
.auditoria .antes-depois { display: block; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--tinta-apagada); }

/* ---------- peças complementares ---------- */

.pecas { display: grid; gap: 0 48px; border-bottom: 1px solid var(--regua); }
@media (min-width: 800px) { .pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.peca { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--regua); }
.peca-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--superficie-2); color: var(--ardosia); flex: none;
}
.peca-icone svg { width: 17px; height: 17px; }
.peca h3 { margin-bottom: 2px; font-size: 0.9375rem; }
.peca p { margin: 0; color: var(--tinta-apagada); font-size: 0.875rem; }

/* ---------- preços ---------- */

.precos { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 760px) { .precos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.plano { display: flex; flex-direction: column; height: 100%; }
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plano-topo h3 { margin: 0; font-size: 1.125rem; }
.plano-para { margin: 2px 0 0; font-size: 0.8125rem; color: var(--tinta-apagada); }
.plano-preco {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 2.125rem; font-weight: 600; letter-spacing: -0.025em; margin: 16px 0 0;
}
.plano-preco small { font-size: 0.8125rem; font-weight: 400; color: var(--tinta-apagada); font-family: var(--font-sans); }
.plano-regra { margin: 4px 0 0; font-size: 0.875rem; color: var(--tinta-suave); }
.plano-regra strong { font-family: var(--font-mono); font-weight: 600; }
.plano-exemplos { margin: 6px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--tinta-apagada); }
.plano ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; }
.plano li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.875rem; color: var(--tinta-suave); }
.plano li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--recibo); }
.plano .botao { margin-top: auto; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--raio-controle);
  background: var(--superficie-2); color: var(--tinta-apagada);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; /* etiqueta compacta não quebra em duas linhas (regra de label compacto) */
}
/* No estreito, a etiqueta desce para baixo do nome do plano em vez de espremê-lo. */
@media (max-width: 479px) {
  .plano-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.etiqueta-destaque { background: color-mix(in srgb, var(--caneta) 10%, white); color: var(--caneta); }

.pos-teste {
  margin-top: 18px;
  background: var(--superficie); border: 1px solid var(--regua); border-radius: var(--raio);
  padding: 18px 22px; display: grid; gap: 4px;
}
.pos-teste h3 { margin: 0; font-size: 0.9375rem; }
.pos-teste p { margin: 0; font-size: 0.875rem; color: var(--tinta-suave); max-width: 75ch; }

/* ---------- confiança ---------- */

.fatos { display: grid; gap: 22px; margin: 0; }
@media (min-width: 760px) { .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 48px; } }
.fato dt { font-size: 0.9375rem; font-weight: 600; }
.fato dd { margin: 2px 0 0; font-size: 0.875rem; color: var(--tinta-apagada); max-width: 52ch; }

/* ---------- perguntas ---------- */

/* A lista acompanha o grid da página: as réguas correm de ponta a ponta, como a grade de
 * fatos logo acima, em vez de pararem no meio da largura. Quem guarda a medida de leitura é
 * a RESPOSTA (`.pergunta p`, 620px), não o container — limitar o container cortava a régua. */
.perguntas { max-width: none; }
.pergunta { border-top: 1px solid var(--regua); }
.pergunta:last-of-type { border-bottom: 1px solid var(--regua); }
.pergunta summary {
  cursor: pointer; font-weight: 600; font-size: 0.9375rem;
  min-height: 56px; display: flex; align-items: center; gap: 12px;
  list-style: none; padding-block: 8px; transition: color 160ms ease;
}
.pergunta summary:hover { color: var(--caneta); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ''; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--tinta-apagada); border-bottom: 1.5px solid var(--tinta-apagada);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 200ms ease;
}
.pergunta[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.pergunta p { margin: 0 0 16px; color: var(--tinta-suave); font-size: 0.9375rem; max-width: var(--medida); }

/* ---------- fechamento e rodapé ---------- */

.fechamento { background: var(--superficie); border-block: 1px solid var(--regua); text-align: center; }
.fechamento h2 { margin-inline: auto; max-width: 18ch; }
.fechamento .chamada { margin-inline: auto; }
.fechamento .heroi-acoes { justify-content: center; }

.rodape { padding-block: 36px; font-size: 0.8125rem; color: var(--tinta-apagada); }
.rodape-linha { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.rodape a { display: inline-block; padding: 12px 0; color: var(--tinta-suave); text-decoration: none; transition: color 160ms ease; } /* ≥44px de alvo no toque */
.rodape a:hover { color: var(--tinta); text-decoration: underline; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 18px; }