:root {
  --n-0:   oklch(99%  0.002 250);
  --n-50:  oklch(97%  0.004 250);
  --n-100: oklch(94%  0.006 250);
  --n-200: oklch(89%  0.008 250);
  --n-300: oklch(80%  0.010 250);
  --n-400: oklch(67%  0.012 250);
  --n-500: oklch(56%  0.014 250);
  --n-600: oklch(46%  0.016 250);
  --n-700: oklch(37%  0.018 250);
  --n-800: oklch(27%  0.020 250);
  --n-900: oklch(19%  0.022 250);

  --p-400: oklch(66%  0.150 255);
  --p-500: oklch(58%  0.170 255);
  --p-600: oklch(50%  0.180 255);

  --a-500: oklch(72%  0.170 165);

  --ok:      oklch(68% 0.160 150);
  --atencao: oklch(78% 0.150  80);
  --risco:   oklch(60% 0.190  25);
  --info:    oklch(70% 0.120 230);

  /* Escala de margem: do comprometido ao livre. Nunca usada sozinha —
     sempre acompanhada de valor numérico e rótulo. */
  --m-critico:  oklch(62% 0.180  25);
  --m-atencao:  oklch(72% 0.160  55);
  --m-neutro:   oklch(80% 0.140  95);
  --m-bom:      oklch(60.5% 0.124 167);
  --m-otimo:    oklch(66% 0.160 195);

  /* Papéis derivados da paleta.
     A mesma cor não serve para preencher e para escrever. Um verde escolhido
     para ficar bonito num gráfico tem clareza alta demais para sustentar texto
     branco por cima, e um texto colorido sobre a própria tinta clara some.
     Separar "sólido" (fundo com texto branco), "texto" (escrita sobre fundo
     claro) e "tinta" (fundo suave) é o que faz a paleta passar em WCAG AA sem
     abrir mão da identidade — os valores abaixo foram medidos, não estimados,
     por db/scripts/test-contraste.ts. */
  --p-solido:     oklch(54% 0.170 255);
  --risco-solido: oklch(56% 0.190  25);
  --a-solido:     oklch(50% 0.170 165);
  --a-texto:      oklch(50% 0.170 165);

  --ok-texto:      oklch(48% 0.160 150);
  --atencao-texto: oklch(48% 0.150  80);
  --risco-texto:   oklch(50% 0.190  25);
  --info-texto:    oklch(48% 0.120 230);

  /* Faixas da barra de margem: preenchimento e rótulo resolvidos em par.
     Cada faixa tem a própria cor de texto porque um rótulo único para a barra
     inteira funciona sobre o verde e desaparece sobre o cinza. Estes valores
     são o que packages/design gera para a marca padrão — a folha precisa ser
     válida sozinha, mesmo que toda página receba a paleta da marca embutida. */
  --m-comprometido:       oklch(67% 0.012 250);
  --m-comprometido-texto: oklch(20% 0.008 250);
  --m-reservado:          oklch(72% 0.160  55);
  --m-reservado-texto:    oklch(20% 0.008  55);
  --m-bloqueado:          oklch(62% 0.180  25);
  --m-bloqueado-texto:    oklch(20% 0.008  25);
  --m-bom-texto:          oklch(20% 0.008 259);

  --superficie-1: var(--n-0);
  --superficie-2: var(--n-50);
  --superficie-3: var(--n-100);
  --borda:        var(--n-200);
  --borda-forte:  var(--n-300);
  --texto-1:      var(--n-900);
  --texto-2:      var(--n-600);
  --texto-3:      var(--n-500);
  --fundo:        var(--n-50);

  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-full: 999px;
  --e-1: 0 1px 2px oklch(20% 0.02 250 / .06);
  --e-2: 0 1px 3px oklch(20% 0.02 250 / .08), 0 8px 24px -12px oklch(20% 0.02 250 / .12);

  --t-rapido: 160ms cubic-bezier(.2,0,0,1);
  --t-base:   240ms cubic-bezier(.2,0,0,1);

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Tema escuro: o operador de folha passa 8 horas na tela. Não é moda, é
   ergonomia. Três estados — escolha explícita, sistema, e o padrão sem marca. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --superficie-1: oklch(21% 0.014 250);
    --superficie-2: oklch(25% 0.014 250);
    --superficie-3: oklch(29% 0.014 250);
    --borda:        oklch(32% 0.014 250);
    --borda-forte:  oklch(40% 0.014 250);
    --texto-1:      oklch(95% 0.006 250);
    --texto-2:      oklch(78% 0.010 250);
    --texto-3:      oklch(64% 0.012 250);
    --fundo:        oklch(16% 0.014 250);
    --p-500:        oklch(70% 0.150 255);
    --p-600:        oklch(76% 0.140 255);
    --a-500:        oklch(76% 0.150 165);
    --a-texto:      oklch(80% 0.150 165);
    --a-solido:     oklch(50% 0.170 165);
    --p-solido:     oklch(56% 0.170 255);
    --risco-solido: oklch(56% 0.190  25);
    --ok-texto:      oklch(72% 0.160 150);
    --atencao-texto: oklch(74% 0.150  80);
    --risco-texto:   oklch(76% 0.190  25);
    --info-texto:    oklch(74% 0.120 230);
    --m-bom:         oklch(52.75% 0.108 167);
    --m-bom-texto:   oklch(99% 0.005 259);
    --e-1: 0 1px 2px oklch(0% 0 0 / .4);
    --e-2: 0 1px 3px oklch(0% 0 0 / .5), 0 10px 28px -14px oklch(0% 0 0 / .7);
  }
}
:root[data-tema="escuro"] {
  --superficie-1: oklch(21% 0.014 250);
  --superficie-2: oklch(25% 0.014 250);
  --superficie-3: oklch(29% 0.014 250);
  --borda:        oklch(32% 0.014 250);
  --borda-forte:  oklch(40% 0.014 250);
  --texto-1:      oklch(95% 0.006 250);
  --texto-2:      oklch(78% 0.010 250);
  --texto-3:      oklch(64% 0.012 250);
  --fundo:        oklch(16% 0.014 250);
  --p-500:        oklch(70% 0.150 255);
  --p-600:        oklch(76% 0.140 255);
  --a-500:        oklch(76% 0.150 165);
  --a-texto:      oklch(80% 0.150 165);
  --a-solido:     oklch(50% 0.170 165);
  --p-solido:     oklch(56% 0.170 255);
  --risco-solido: oklch(56% 0.190  25);
  --ok-texto:      oklch(72% 0.160 150);
  --atencao-texto: oklch(74% 0.150  80);
  --risco-texto:   oklch(76% 0.190  25);
  --info-texto:    oklch(74% 0.120 230);
  --m-bom:         oklch(52.75% 0.108 167);
  --m-bom-texto:   oklch(99% 0.005 259);
  --e-1: 0 1px 2px oklch(0% 0 0 / .4);
  --e-2: 0 1px 3px oklch(0% 0 0 / .5), 0 10px 28px -14px oklch(0% 0 0 / .7);
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto-1);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Foco sempre visível. Remover o anel de foco quebra a navegação por teclado,
   que é requisito legal em software público (WCAG 2.2 / eMAG). */
:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
  border-radius: 3px;
}

a { color: var(--p-600); }
a:hover { color: var(--p-500); }

h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; letter-spacing: -0.011em; }
h1 { font-size: 1.6rem; font-weight: 650; }
h2 { font-size: 1.2rem; font-weight: 640; }
h3 { font-size: 1rem; font-weight: 640; }
p  { margin: 0 0 .9rem; }

.num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }

/* ── Estrutura ─────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }

.lateral {
  background: var(--superficie-1);
  border-right: 1px solid var(--borda);
  padding: 1.1rem .8rem;
  display: flex; flex-direction: column; gap: .3rem;
}
/* Em tela estreita a navegação vira faixa horizontal. Ela quebra em linhas
   em vez de rolar: numa barra rolável os últimos itens — inclusive "Sair" —
   ficam fora da tela sem nenhuma pista de que existem, e ninguém arrasta uma
   barra que não parece arrastável. Com poucos itens por portal, envolver
   custa uma linha de altura e devolve a navegação inteira à vista. */
@media (max-width: 860px) {
  .lateral { border-right: 0; border-bottom: 1px solid var(--borda);
             flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem; }
}

/* Brasão do município. Contain e não cover: um brasão cortado para caber num
   quadrado é um brasão desfigurado, e prefeitura tem lei sobre isso. */
.marca-logo { object-fit: contain; width: 24px; height: 24px; flex: none; }
.marca-topo { display: flex; justify-content: center; padding-bottom: 1.4rem; }
.marca-topo .marca { padding: 0; }
.marca-topo .marca-logo { width: 30px; height: 30px; }

.nav-rodape { margin-top: auto; padding-top: 1rem; }
.nav-usuario { font-size: .82rem; color: var(--texto-3); padding: 0 .65rem .5rem;
               line-height: 1.35; }
.nav-usuario span { font-size: .75rem; }
@media (max-width: 860px) {
  /* Identificação do usuário sai da faixa: quem está no celular é a própria
     pessoa e já sabe quem é. "Sair" continua visível, encostado à direita. */
  .nav-rodape { margin: 0 0 0 auto; padding-top: 0; }
  .nav-usuario { display: none; }
}

.marca {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 680; font-size: .96rem; letter-spacing: -.01em;
  padding: .35rem .6rem 1rem; color: var(--texto-1); text-decoration: none;
}
@media (max-width: 860px) { .marca { padding: .35rem .6rem; } }

.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--r-1);
  color: var(--texto-2); text-decoration: none; font-size: .92rem;
  white-space: nowrap; transition: background var(--t-rapido), color var(--t-rapido);
}
.nav-item:hover { background: var(--superficie-2); color: var(--texto-1); }
.nav-item[aria-current="page"] { background: var(--superficie-3); color: var(--texto-1); font-weight: 600; }
.nav-grupo {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); padding: 1rem .65rem .35rem; font-weight: 600;
}
@media (max-width: 860px) { .nav-grupo { display: none; } }

.conteudo { padding: clamp(1rem, 3vw, 2rem); max-width: 1400px; }
.topo { display: flex; align-items: baseline; justify-content: space-between;
        gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.sub { color: var(--texto-2); font-size: .92rem; margin-top: .2rem; }

/* ── Cartões e grades ──────────────────────────────────────── */
.cartao {
  background: var(--superficie-1); border: 1px solid var(--borda);
  border-radius: var(--r-2); padding: 1.1rem 1.15rem; box-shadow: var(--e-1);
}
.grade { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Cartões de alturas diferentes lado a lado: sem isto o mais curto estica até
   a altura do mais alto e fica com um vão vazio embaixo do botão. */
.grade.topo { align-items: start; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

.kpi-rotulo {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 600;
}
/* O valor encolhe antes de quebrar. "R$ 20.848,79" partido em duas linhas
   separa o símbolo do número, e o olho lê "R$" e "20.848,79" como duas coisas
   — num painel financeiro, é meio segundo de dúvida em cada cartão. */
.kpi-valor { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 650;
             line-height: 1.15; margin-top: .3rem; white-space: nowrap;
             font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-nota { font-size: .82rem; color: var(--texto-2); margin-top: .25rem; }

/* ── Tabela ────────────────────────────────────────────────── */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda);
               border-radius: var(--r-2); background: var(--superficie-1); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .62rem .85rem; border-bottom: 1px solid var(--borda); }
thead th {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-2); font-weight: 600; background: var(--superficie-2);
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-family: var(--fonte-num);
                 font-variant-numeric: tabular-nums; font-size: .85rem; }

/* ── Selos ─────────────────────────────────────────────────── */
.selo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; padding: .16rem .5rem;
  border-radius: var(--r-full); border: 1px solid;
}
.selo-ok      { color: var(--ok-texto);      border-color: color-mix(in oklab, var(--ok) 45%, transparent);      background: color-mix(in oklab, var(--ok) 13%, transparent); }
.selo-atencao { color: var(--atencao-texto); border-color: color-mix(in oklab, var(--atencao) 50%, transparent); background: color-mix(in oklab, var(--atencao) 15%, transparent); }
.selo-risco   { color: var(--risco-texto);   border-color: color-mix(in oklab, var(--risco) 45%, transparent);   background: color-mix(in oklab, var(--risco) 13%, transparent); }
.selo-neutro  { color: var(--texto-2); border-color: var(--borda);                                          background: var(--superficie-2); }

/* ── Botões e formulários ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1rem; border-radius: var(--r-1);
  font-size: .92rem; font-weight: 600; font-family: inherit;
  border: 1px solid var(--borda-forte); background: var(--superficie-1);
  color: var(--texto-1); cursor: pointer; text-decoration: none;
  transition: background var(--t-rapido), border-color var(--t-rapido);
}
.btn:hover { background: var(--superficie-2); }
.btn-primario { background: var(--p-solido); border-color: var(--p-solido); color: #fff; }
.btn-primario:hover { background: var(--p-600); border-color: var(--p-600); }
.btn-risco { background: var(--risco-solido); border-color: var(--risco-solido); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.dica { font-size: .8rem; color: var(--texto-2); font-weight: 400; margin-top: .25rem; }
/* A regra larga é para campo de texto. Caixa de seleção e botão de opção
   ficam de fora: com largura 100% e altura mínima de 44 px, viraram quadrados
   enormes ao lado do próprio rótulo. O alvo de toque continua adequado porque
   o rótulo inteiro é clicável. */
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%; min-height: 44px; padding: .5rem .7rem;
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  background: var(--superficie-1); color: var(--texto-1);
  font-family: inherit; font-size: 1rem;
}
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; flex: none; margin: 0;
  accent-color: var(--p-solido);
}
/* Rótulo ao lado da caixa não é título de campo: não pode virar bloco. */
label.linha { display: flex; font-weight: 400; margin-bottom: 0; cursor: pointer; }
input:focus, select:focus { border-color: var(--p-500); }
input[type="file"] { padding: .45rem; }
.campo { margin-bottom: 1rem; }

/* Área de texto. Herda a caixa do campo comum, mas com altura própria: o
   código PIX tem 150 caracteres e precisa ser lido inteiro para quem confere
   antes de pagar. Redimensiona só na vertical: na horizontal quebraria a grade. */
textarea {
  width: 100%; padding: .5rem .7rem; resize: vertical;
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  background: var(--superficie-1); color: var(--texto-1);
  font-family: inherit; font-size: 1rem; line-height: 1.4;
}
textarea:focus { border-color: var(--p-500); }
textarea.mono { font-family: var(--fonte-num); font-size: .82rem; word-break: break-all; }

/* Valor único que domina o cartão — o que se paga. */
.numero-destaque {
  font-family: var(--fonte-num); font-size: 2rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .25rem;
}

/* Bloco recolhível: usado onde a ação existe mas não é a principal da tela. */
details.cartao > summary {
  cursor: pointer; list-style-position: inside;
}
details.cartao > summary::marker { color: var(--texto-2); }
details.cartao[open] > summary { margin-bottom: .8rem; }

/* ── Avisos ────────────────────────────────────────────────── */
.aviso { padding: .85rem 1rem; border-radius: var(--r-1); border-left: 3px solid;
         font-size: .9rem; margin-bottom: 1rem; background: var(--superficie-2); }
.aviso-erro    { border-color: var(--risco);   background: color-mix(in oklab, var(--risco) 8%, var(--superficie-1)); }
.aviso-ok      { border-color: var(--ok);      background: color-mix(in oklab, var(--ok) 8%, var(--superficie-1)); }
.aviso-atencao { border-color: var(--atencao); background: color-mix(in oklab, var(--atencao) 10%, var(--superficie-1)); }
.aviso-info    { border-color: var(--info);    background: color-mix(in oklab, var(--info) 8%, var(--superficie-1)); }

/* ── Barra de margem ───────────────────────────────────────── */
.barra { display: flex; height: 30px; border-radius: var(--r-1); overflow: hidden;
         gap: 2px; background: var(--superficie-3); }
.barra > div { display: flex; align-items: center; justify-content: center;
               font-size: .72rem; font-weight: 600; overflow: hidden;
               white-space: nowrap; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .6rem;
           font-size: .82rem; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.amostra { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ── Barras horizontais ────────────────────────────────────── */
.barras { display: grid; gap: .5rem; }
.barra-linha { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto;
               gap: .7rem; align-items: center; font-size: .87rem; }
.barra-trilho { display: block; height: 16px; background: var(--superficie-3);
                border-radius: 3px; overflow: hidden; }
.barra-preenchida { display: block; height: 100%; border-radius: 3px; background: var(--a-500); }
.barra-valor { font-family: var(--fonte-num); font-size: .8rem; color: var(--texto-2);
               min-width: 74px; text-align: right; }
@media (max-width: 640px) {
  .barra-linha { grid-template-columns: 1fr; gap: .18rem; }
  .barra-valor { text-align: left; }
}

/* ── Progresso do ciclo ────────────────────────────────────── */
/* Três estados visualmente distintos. Antes eram dois — concluída e futura —
   e a etapa atual ficava idêntica às já vencidas, o que fazia a fila parecer
   um conjunto de botões em vez de um progresso. Saber em que ponto o ciclo
   está é a pergunta que a tela existe para responder. */
.etapas { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0;
          counter-reset: etapa; }
.etapa { flex: 1; text-align: center; padding: .45rem .3rem; font-size: .78rem;
         border-radius: var(--r-1); border: 1px solid transparent; }
.etapa-feita  { background: color-mix(in oklch, var(--a-500) 16%, var(--superficie-2));
                color: var(--texto-2); }
.etapa-atual  { background: var(--a-solido); color: #fff; font-weight: 650;
                box-shadow: 0 0 0 3px color-mix(in oklch, var(--a-500) 22%, transparent); }
.etapa-futura { background: var(--superficie-3); color: var(--texto-2); }
@media (max-width: 720px) {
  .etapas { flex-wrap: wrap; }
  .etapa { flex: 1 1 30%; }
}

/* ── Estado vazio ──────────────────────────────────────────── */
.vazio { text-align: center; padding: 2.6rem 1rem; color: var(--texto-2); }
.vazio h3 { color: var(--texto-1); margin-bottom: .35rem; }

/* ── Login ─────────────────────────────────────────────────── */
.login-tela { display: grid; place-items: center; min-height: 100vh; padding: 1.2rem; }
.login-caixa { width: 100%; max-width: 400px; }

/* ── Utilidades ────────────────────────────────────────────── */
.linha { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mt { margin-top: 1.3rem; } .mb { margin-bottom: 1rem; }
.silenciado { color: var(--texto-2); font-size: .87rem; }
.pequeno { font-size: .82rem; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .lateral, .btn { display: none; }
  .app { grid-template-columns: 1fr; }
}

.codigo-cor { font-size: .85rem; color: var(--texto-2); text-transform: uppercase; }
.entrada-cor { width: 62px; height: 40px; padding: 2px; border: 1px solid var(--borda-forte);
               border-radius: var(--r-1); background: var(--superficie-1); cursor: pointer; }
.logo-previa { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--borda);
               border-radius: var(--r-1); padding: 4px; background: var(--superficie-2); }

.previa { display: flex; border: 1px solid; border-radius: var(--r-2); overflow: hidden;
          min-height: 190px; }
.previa-lateral { width: 132px; flex: none; border-right: 1px solid; padding: .7rem .5rem;
                  display: flex; flex-direction: column; gap: .25rem; }
.previa-item { font-size: .74rem; padding: .3rem .45rem; border-radius: 4px; }
.previa-corpo { flex: 1; padding: .9rem; }
.previa-cartao { border: 1px solid; border-radius: var(--r-2); padding: .8rem .9rem; }
.previa-rotulo { font-size: .62rem; letter-spacing: .07em; font-weight: 600; }
.previa-valor { font-size: 1.5rem; font-weight: 650; margin: .15rem 0 .5rem;
                font-variant-numeric: tabular-nums; }
.previa-barra { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 2px; }
.previa-barra span { display: flex; align-items: center; justify-content: center;
                     font-size: .62rem; font-weight: 600; }
.previa-acoes { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }
.previa-botao { font-size: .72rem; font-weight: 600; padding: .35rem .7rem; border-radius: 5px; }
.previa-link { font-size: .72rem; text-decoration: underline; }

.amostras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.amostra-item { display: flex; align-items: center; gap: .6rem; }
.amostra-cor { width: 34px; height: 34px; border-radius: var(--r-1); flex: none;
               border: 1px solid var(--borda); }
@media (max-width: 640px) { .previa-lateral { display: none; } }

.doc { max-width: 880px; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.codigo { background: var(--superficie-3); border: 1px solid var(--borda);
          border-radius: var(--r-1); padding: .8rem .9rem; overflow-x: auto;
          font-family: var(--fonte-num); font-size: .8rem; line-height: 1.5;
          margin: .5rem 0 1rem; }
.codigo code { background: none; padding: 0; }
code { font-family: var(--fonte-num); font-size: .85em;
       background: var(--superficie-3); padding: .1rem .3rem; border-radius: 3px; }
.metodo { background: var(--p-solido); color: #fff; font-weight: 700; }
.passos { padding-left: 1.3rem; color: var(--texto-2); }
.passos li { margin-bottom: .4rem; }
.lista-densa { padding-left: 1.2rem; margin: 0; color: var(--texto-2); font-size: .9rem; }
.lista-densa li { margin-bottom: .6rem; }

.verificacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
               gap: 1rem; margin: 0 0 1.2rem; }
.verificacao dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--texto-2); margin-bottom: .2rem; }
.verificacao dd { margin: 0; font-size: 1rem; }

.vt { background: var(--fundo); overflow-x: clip; }
.vt-larg { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.vt h1, .vt h2, .vt h3 { text-wrap: balance; }
.vt-mt { margin-top: 1.6rem; }

/* ── Topo ── */
.vt-topo { position: sticky; top: 0; z-index: 20;
           background: color-mix(in oklab, var(--superficie-1) 86%, transparent);
           backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
           border-bottom: 1px solid var(--borda); }
.vt-topo-linha { display: flex; align-items: center; justify-content: space-between;
                 gap: 1rem; min-height: 64px; flex-wrap: wrap;
                 padding-top: .45rem; padding-bottom: .45rem; }
.vt-logo { display: inline-flex; align-items: center; gap: .55rem;
           font-weight: 750; font-size: 1.06rem; letter-spacing: -.015em;
           color: var(--texto-1); text-decoration: none; }
.vt-menu { display: flex; align-items: center; gap: clamp(.5rem, 1.8vw, 1.4rem);
           flex-wrap: wrap; }
.vt-menu a:not(.vt-btn) { color: var(--texto-2); text-decoration: none;
                          font-size: .9rem; font-weight: 600; padding: .3rem .15rem; }
.vt-menu a:not(.vt-btn):hover { color: var(--texto-1); }

/* ── Botões ── */
.vt-btn { display: inline-flex; align-items: center; gap: .5rem;
          min-height: 46px; padding: .6rem 1.25rem; border-radius: 12px;
          font-size: .95rem; font-weight: 650; text-decoration: none;
          border: 1px solid var(--borda-forte); color: var(--texto-1);
          background: var(--superficie-1);
          transition: transform var(--t-rapido), box-shadow var(--t-rapido),
                      background var(--t-rapido); }
.vt-btn:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.vt-btn svg { width: 18px; height: 18px; }
.vt-btn-cheio { background: var(--p-solido); border-color: var(--p-solido); color: #fff; }
.vt-btn-cheio:hover { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.vt-btn-borda { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.vt-btn-borda:hover { background: rgba(255,255,255,.1); }
.vt-entrar { min-height: 40px; padding: .4rem 1.1rem; }

/* ── Abertura com fotografia ──
   Fundo SÓLIDO escuro; a foto entra por cima com opacidade baixa. O texto
   claro é medido contra o fundo sólido — e o olho vê a cidade ao anoitecer. */
.vt-hero-foto-sec { position: relative; isolation: isolate;
                    background-color: #0A1730;
                    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.vt-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; opacity: .34; z-index: -1;
                filter: saturate(.9); }
.vt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
                gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 940px) { .vt-hero-grid { grid-template-columns: 1fr; } }

.vt-pill { display: inline-flex; align-items: center; gap: .5rem;
           font-size: .8rem; font-weight: 650; color: var(--p-600);
           background: var(--superficie-1); border: 1px solid var(--borda);
           border-radius: 999px; padding: .4rem .9rem; margin-bottom: 1.1rem;
           box-shadow: var(--e-1); }
.vt-pill svg { width: 16px; height: 16px; }
.vt-pill-escura { background: rgba(10,23,48,.75); border-color: rgba(255,255,255,.22);
                  color: #A9EBD2; box-shadow: none; }
.vt-titulo { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800;
             letter-spacing: -.025em; line-height: 1.06; max-width: 18ch; }
.vt-titulo-clara { color: #F4F7FF; }
.vt-titulo em { font-style: normal; color: #8FD9BE;
                text-decoration: underline;
                text-decoration-color: rgba(25,217,154,.55);
                text-decoration-thickness: .14em; text-underline-offset: .12em; }
.vt-sub { font-size: clamp(1rem, 1.9vw, 1.14rem); max-width: 56ch;
          margin: 1.1rem 0 1.6rem; line-height: 1.65; }
.vt-sub-clara { color: #C7D3EE; }
.vt-ctas { display: flex; gap: .7rem; flex-wrap: wrap; }
.vt-confianca { list-style: none; display: flex; flex-wrap: wrap;
                gap: .45rem 1.4rem; margin: 1.7rem 0 0; padding: 0; }
.vt-confianca li { display: inline-flex; align-items: center; gap: .45rem;
                   font-size: .84rem; font-weight: 600; }
.vt-confianca-clara li { color: #C7D3EE; }
.vt-confianca-clara svg { width: 17px; height: 17px; color: #8FD9BE; }

/* ── Mockup ── */
.vt-mock { position: relative; min-height: 340px; }
.vt-mock-janela { background: var(--superficie-1); border: 1px solid var(--borda);
                  border-radius: 18px; box-shadow: var(--e-2), 0 30px 60px -30px
                  rgba(0,0,0,.6);
                  padding: 1rem 1.1rem 1.2rem; }
.vt-mock-topo { display: flex; align-items: center; gap: .4rem;
                padding-bottom: .8rem; border-bottom: 1px solid var(--borda);
                margin-bottom: .9rem; }
.vt-mock-topo span { width: 10px; height: 10px; border-radius: 50%;
                     background: var(--borda-forte); }
.vt-mock-topo em { font-style: normal; font-size: .78rem; color: var(--texto-3);
                   margin-left: .5rem; font-weight: 600; }
.vt-mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
                margin-bottom: 1rem; }
.vt-mock-kpis > div { background: var(--superficie-2); border: 1px solid var(--borda);
                      border-radius: 10px; padding: .5rem .6rem; min-width: 0; }
/* --texto-2, não --texto-3: o rótulo senta em superficie-2, e o cinza mais
   claro reprovou por 0,24 na auditoria com a paleta de marca do seed. */
.vt-mock-kpis small { display: block; font-size: .6rem; font-weight: 700;
                      letter-spacing: .06em; text-transform: uppercase;
                      color: var(--texto-2); white-space: nowrap; overflow: hidden;
                      text-overflow: ellipsis; }
.vt-mock-kpis b { font-size: .98rem; font-weight: 750; color: var(--texto-1);
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-mock-kpis b.vt-verde { color: var(--a-texto); }
.vt-mock-rotulo { font-size: .68rem; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--texto-2);
                  margin-bottom: .35rem; }
.vt-mock-barra { display: flex; gap: 2px; height: 30px; border-radius: 8px;
                 overflow: hidden; background: var(--superficie-3);
                 margin-bottom: 1rem; }
.vt-mock-barra span { display: flex; align-items: center; justify-content: center;
                      font-size: .66rem; font-weight: 700; overflow: hidden;
                      white-space: nowrap; }
.vt-b1 { background: var(--m-comprometido); color: var(--m-comprometido-texto); }
.vt-b2 { background: var(--m-reservado); }
.vt-b3 { background: var(--m-bom); color: var(--m-bom-texto); }
.vt-mock-etapas { display: flex; gap: .3rem; }
.vt-mock-etapas span { flex: 1; text-align: center; font-size: .68rem;
                       font-weight: 650; padding: .35rem .2rem; border-radius: 7px;
                       background: var(--superficie-3); color: var(--texto-2); }
.vt-mock-etapas .feita { background: color-mix(in oklch, var(--a-500) 16%, var(--superficie-2)); }
.vt-mock-etapas .atual { background: var(--a-solido); color: #fff; }

.vt-chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem;
           background: var(--superficie-1); border: 1px solid var(--borda);
           border-radius: 999px; padding: .5rem .9rem; font-size: .8rem;
           font-weight: 650; color: var(--texto-1); box-shadow: var(--e-2);
           animation: vt-flutua 7s ease-in-out infinite; }
.vt-chip-ico { display: inline-flex; align-items: center; justify-content: center;
               width: 22px; height: 22px; border-radius: 50%; flex: none;
               background: var(--a-solido); color: #fff; font-size: .74rem; }
.vt-chip-a { right: -6px; top: -22px; }
.vt-chip-b { left: -10px; bottom: -18px; animation-delay: -3.5s; }
@keyframes vt-flutua { 0%,100% { transform: translateY(0); }
                       50% { transform: translateY(-8px); } }
@media (max-width: 940px) {
  .vt-mock { min-height: 0; margin-top: 1.4rem; }
  .vt-chip-a { top: -14px; right: 0; }
  .vt-chip-b { bottom: -14px; left: 0; }
}

/* ── O fio da história ── */
.vt-fio-intro { text-align: center; padding-top: clamp(2.6rem, 6vw, 4rem); }
.vt-fio-titulo { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 790;
                 letter-spacing: -.02em; }
.vt-fio-sub { color: var(--texto-2); max-width: 52ch; margin: .6rem auto 0; }

.vt-fio { position: relative; padding-top: clamp(2rem, 5vw, 3.4rem);
          padding-bottom: 1rem; }
.vt-fio::before { content: ""; position: absolute; top: 0; bottom: 0;
                  left: calc(clamp(1rem, 4vw, 2rem) + 20px); width: 3px;
                  border-radius: 2px;
                  background: linear-gradient(180deg,
                    color-mix(in oklab, var(--p-500) 55%, transparent),
                    color-mix(in oklab, var(--a-500) 55%, transparent));
                  opacity: .5; }
.vt-fio-final { padding-bottom: clamp(2rem, 5vw, 3rem); }
.vt-fio-final::before { bottom: 8.5rem; }

.vt-cap { position: relative; padding-left: 64px;
          margin-bottom: clamp(2.8rem, 6vw, 4.6rem); }
.vt-cap-n { position: absolute; left: 4px; top: -2px; width: 37px; height: 37px;
            border-radius: 50%; display: inline-flex; align-items: center;
            justify-content: center; background: var(--p-solido); color: #fff;
            font-weight: 760; font-size: 1rem;
            box-shadow: 0 0 0 6px color-mix(in oklab, var(--p-500) 14%, var(--fundo)); }
.vt-cap-grade { display: grid; gap: clamp(1.2rem, 3.5vw, 2.6rem);
                grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
                align-items: center; }
.vt-cap:nth-of-type(even) .vt-cap-grade { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.vt-cap:nth-of-type(even) .vt-cap-texto { order: 2; }
.vt-cap:nth-of-type(even) .vt-cap-lado { order: 1; }
@media (max-width: 900px) {
  .vt-cap-grade, .vt-cap:nth-of-type(even) .vt-cap-grade { grid-template-columns: 1fr; }
  .vt-cap:nth-of-type(even) .vt-cap-texto { order: 1; }
  .vt-cap:nth-of-type(even) .vt-cap-lado { order: 2; }
}
.vt-cap-so-texto { grid-template-columns: minmax(0, 1fr) !important; max-width: 62ch; }
.vt-prosa { color: var(--texto-2); font-size: 1.02rem; line-height: 1.7;
            margin: .8rem 0 0; max-width: 58ch; }
.vt-prosa strong { color: var(--texto-1); }

.vt-chapeu { font-size: .78rem; font-weight: 750; letter-spacing: .1em;
             text-transform: uppercase; color: var(--p-600); margin-bottom: .5rem; }
.vt-h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 760;
         letter-spacing: -.02em; max-width: 26ch; }
.vt-lede { color: var(--texto-2); max-width: 64ch; margin: .7rem 0 1.8rem;
           font-size: 1.02rem; line-height: 1.65; }

/* ── Fotografia ── */
.vt-foto { margin: 0; position: relative; border-radius: 22px; overflow: hidden;
           box-shadow: var(--e-2), 0 26px 50px -28px
             color-mix(in oklab, var(--p-500) 40%, transparent); }
.vt-foto img { display: block; width: 100%; height: auto; aspect-ratio: 14/9;
               object-fit: cover; filter: saturate(.92); }
.vt-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                  background: linear-gradient(160deg, rgba(30,79,216,.16),
                              rgba(15,181,127,.08) 70%, transparent); }

/* ── Demonstração de margem (capítulo 3) ── */
.vt-margem-demo { background: var(--superficie-1); border: 1px solid var(--borda);
                  border-radius: 18px; padding: 1.2rem 1.25rem; box-shadow: var(--e-1); }
.vt-margem-demo-barra { height: 40px; }
.vt-margem-demo-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
                          font-size: .82rem; color: var(--texto-2);
                          margin-top: -.3rem; }
.vt-margem-demo-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.vt-am { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.vt-am1 { background: var(--m-comprometido); }
.vt-am2 { background: var(--m-reservado); }
.vt-am3 { background: var(--m-bom); }
.vt-margem-demo-nota { color: var(--texto-2); font-size: .85rem; margin: .9rem 0 0;
                       line-height: 1.55; }

.vt-beneficios { list-style: none; margin: 1.1rem 0 0; padding: 0;
                 display: grid; gap: 1.05rem; }
.vt-beneficio { display: flex; gap: .9rem; align-items: flex-start; }
.vt-beneficio .vt-icone { width: 38px; height: 38px; }
.vt-beneficio strong { display: block; margin-bottom: .15rem; }
.vt-beneficio p { margin: 0; color: var(--texto-2); font-size: .9rem; line-height: 1.6; }

/* ── Fecho do fio ── */
.vt-fio-fecho { position: relative; padding-left: 64px; display: flex;
                align-items: center; gap: 1rem; }
.vt-fio-check { position: absolute; left: 0; width: 45px; height: 45px;
                border-radius: 50%; display: inline-flex; align-items: center;
                justify-content: center; background: var(--a-solido); color: #fff;
                font-size: 1.3rem; font-weight: 800;
                box-shadow: 0 0 0 7px color-mix(in oklab, var(--a-500) 16%, var(--fundo)); }
.vt-fio-fecho p { margin: 0; font-weight: 650; color: var(--texto-1);
                  max-width: 44ch; }

/* ── Seções gerais ── */
.vt-secao { padding: clamp(3rem, 7vw, 5rem) 0; }
.vt-secao-alt { background: var(--superficie-2);
                border-top: 1px solid var(--borda);
                border-bottom: 1px solid var(--borda); }
.vt-grade3 { display: grid; gap: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vt-grade4 { display: grid; gap: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.vt-cartao { position: relative; background: var(--superficie-1);
             border: 1px solid var(--borda); border-radius: 16px;
             padding: 1.35rem 1.3rem 1.25rem; box-shadow: var(--e-1);
             transition: transform var(--t-base), box-shadow var(--t-base),
                         border-color var(--t-base); }
.vt-cartao:hover { transform: translateY(-3px); box-shadow: var(--e-2);
                   border-color: color-mix(in oklab, var(--p-500) 45%, var(--borda)); }
.vt-cartao h3 { margin: .8rem 0 .4rem; font-size: 1.02rem; }
.vt-cartao p { margin: 0; color: var(--texto-2); font-size: .9rem; line-height: 1.6; }
.vt-icone { display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 11px; flex: none;
            background: var(--superficie-2); border: 1px solid var(--borda);
            color: var(--p-600); }
.vt-icone-verde { color: var(--a-texto); }
.vt-cartao-link { display: block; text-decoration: none; color: inherit;
                  padding-right: 3rem; }
.vt-cartao-seta { position: absolute; right: 1.1rem; top: 1.35rem;
                  color: var(--texto-2);
                  transition: transform var(--t-base), color var(--t-base); }
.vt-cartao-link:hover .vt-cartao-seta { transform: translateX(4px);
                                        color: var(--p-600); }

/* ── Capítulo escuro (5) ── */
.vt-escuro { background-color: #0E1B36; padding: clamp(3rem, 7vw, 5rem) 0;
             background-image:
               radial-gradient(60% 90% at 85% 0%, rgba(30,79,216,.35), transparent 60%),
               radial-gradient(40% 70% at 10% 100%, rgba(15,181,127,.14), transparent 60%); }
.vt-escuro .vt-h2 { color: #F2F6FF; }
.vt-chapeu-claro { color: #8FD9BE; }
.vt-lede-clara { color: #BCC9EA; }
.vt-cap-n-solta { position: static; display: inline-flex; margin-bottom: 1rem;
                  box-shadow: 0 0 0 6px rgba(122,160,255,.18); }
.vt-cartao-escuro { background: rgba(255,255,255,.055);
                    border: 1px solid rgba(255,255,255,.13);
                    border-radius: 16px; padding: 1.35rem 1.3rem 1.25rem; }
.vt-cartao-escuro h3 { color: #F2F6FF; margin: .8rem 0 .4rem; font-size: 1rem; }
.vt-cartao-escuro p { color: #BCC9EA; margin: 0; font-size: .89rem; line-height: 1.62; }
.vt-icone-escuro { display: inline-flex; align-items: center; justify-content: center;
                   width: 40px; height: 40px; border-radius: 11px;
                   background: rgba(255,255,255,.08);
                   border: 1px solid rgba(255,255,255,.14); color: #8FD9BE; }

/* ── Faixa de chamada ── */
.vt-cta { background-color: #143089; padding: clamp(2.4rem, 5vw, 3.6rem) 0;
          background-image:
            radial-gradient(50% 120% at 90% 10%, rgba(15,181,127,.25), transparent 55%),
            radial-gradient(40% 100% at 5% 90%, rgba(122,160,255,.3), transparent 60%); }
.vt-cta-linha { display: flex; align-items: center; justify-content: space-between;
                gap: 1.4rem; flex-wrap: wrap; }
.vt-cta h2 { color: #fff; font-size: clamp(1.35rem, 2.8vw, 1.9rem);
             font-weight: 760; letter-spacing: -.02em; }
.vt-cta p { color: #C9D6F8; margin: .4rem 0 0; }
.vt-btn-claro { background: #fff; border-color: #fff; color: #143089; }
.vt-btn-claro:hover { background: #E9EFFF; border-color: #E9EFFF; }

/* ── Rodapé ── */
.vt-rodape { border-top: 1px solid var(--borda); background: var(--superficie-1);
             padding: 2.6rem 0 2.2rem; }
.vt-rodape-grade { display: grid; gap: 2rem;
                   grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)); }
@media (max-width: 860px) { .vt-rodape-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vt-rodape-grade { grid-template-columns: 1fr; } }
.vt-rodape-nota { color: var(--texto-2); font-size: .87rem; margin: .8rem 0 0;
                  max-width: 34ch; line-height: 1.6; }
.vt-rodape h4 { font-size: .74rem; font-weight: 750; letter-spacing: .09em;
                text-transform: uppercase; color: var(--texto-3);
                margin: 0 0 .7rem; }
.vt-rodape nav { display: flex; flex-direction: column; gap: .45rem; }
.vt-rodape nav a { color: var(--texto-2); text-decoration: none; font-size: .88rem; }
.vt-rodape nav a:hover { color: var(--texto-1); text-decoration: underline; }
.vt-creditos { color: var(--texto-2); font-size: .78rem; margin: 2rem 0 0;
               border-top: 1px solid var(--borda); padding-top: 1rem;
               line-height: 1.7; }
.vt-creditos a { color: var(--texto-2); }

/* ── Revelação no scroll (progressiva) ── */
@media (prefers-reduced-motion: no-preference) {
  .vt-js .vt-rev { opacity: 0; transform: translateY(22px);
                   transition: opacity .65s ease, transform .65s ease; }
  .vt-js .vt-vis { opacity: 1; transform: none; }
}

/* ── Decoração ── */
.vt-blob { position: absolute; border-radius: 50%; filter: blur(70px);
           z-index: -1; pointer-events: none; }
.vt-blob-a { width: 480px; height: 480px; right: -120px; top: -140px;
             background: color-mix(in oklab, var(--p-500) 26%, transparent); }

/* ── Páginas públicas (transparência, verificação) ── */
.vt-menu a.ativo { color: var(--texto-1); border-bottom: 2px solid var(--a-500);
                   padding-bottom: .18rem; }
.vt-pub { padding: 2.2rem 0 3.5rem; min-height: 62vh; }
.vt-pub .topo { margin-bottom: 1.6rem; }
.vt-pub h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 780;
             letter-spacing: -.02em; }
.vt-pub .sub { font-size: 1rem; }
.vt-pub-rodape { display: flex; align-items: center; justify-content: space-between;
                 gap: 1rem; flex-wrap: wrap; }
.vt-pub-rodape p { margin: 0; color: var(--texto-2); font-size: .85rem; }

/* ── Escolha de portal ──
   Compacta de propósito: a tela inteira cabe na janela, sem rolagem — quem
   chega aqui quer entrar, não ler. Cartões horizontais, ritmo apertado. */
.vt-escolha { position: relative; isolation: isolate; min-height: 100dvh;
              display: grid; place-items: center;
              background: color-mix(in oklab, var(--p-500) 6%, var(--fundo));
              padding: clamp(.9rem, 2.5vw, 1.8rem); overflow: clip; }
.vt-escolha-caixa { width: 100%; max-width: 720px; }
.vt-logo-grande { font-size: 1.25rem; justify-content: center; display: flex;
                  margin-bottom: .9rem; }
.vt-logo-grande svg { width: 34px; height: 34px; }
.vt-escolha-titulo { text-align: center; font-size: clamp(1.35rem, 3vw, 1.8rem);
                     font-weight: 780; letter-spacing: -.02em; }
.vt-escolha-sub { text-align: center; color: var(--texto-2);
                  margin: .35rem 0 1.1rem; font-size: .92rem; }
.vt-escolha-grade { display: grid; gap: .65rem;
                    grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .vt-escolha-grade { grid-template-columns: 1fr; } }
.vt-escolha .vt-cartao-link { display: flex; align-items: center; gap: .85rem;
                              padding: .8rem 2.4rem .8rem .9rem; }
.vt-escolha .vt-cartao-link .vt-icone { width: 38px; height: 38px; }
.vt-escolha .vt-cartao-link h3 { margin: 0 0 .1rem; font-size: .96rem; }
.vt-escolha .vt-cartao-link p { font-size: .8rem; line-height: 1.45; }
.vt-escolha .vt-cartao-seta { top: 50%; transform: translateY(-50%); }
.vt-escolha .vt-cartao-link:hover .vt-cartao-seta { transform: translateY(-50%) translateX(4px); }
.vt-escolha-txt { flex: 1; min-width: 0; display: block; }
.vt-escolha-novo { display: flex; align-items: center; gap: .85rem;
                   background: var(--superficie-1); border: 1px solid var(--borda);
                   border-radius: 14px; padding: .75rem 1rem; margin-top: .9rem;
                   box-shadow: var(--e-1); flex-wrap: wrap; }
.vt-escolha-novo .vt-icone { width: 38px; height: 38px; }
.vt-escolha-novo > div { flex: 1; min-width: 200px; }
.vt-escolha-novo strong { display: block; margin-bottom: .05rem; font-size: .93rem; }
.vt-escolha-novo p { margin: 0; color: var(--texto-2); font-size: .8rem; }
.vt-escolha-novo .vt-btn { min-height: 40px; padding: .45rem 1rem; }
.vt-escolha-voltar { text-align: center; margin: 1rem 0 0; font-size: .87rem; }
.vt-escolha-voltar a { color: var(--texto-2); text-decoration: none; font-weight: 600; }
.vt-escolha-voltar a:hover { color: var(--texto-1); text-decoration: underline; }

.aj .topo { margin-bottom: 1rem; }
.aj-h2 { margin: 2rem 0 1rem; font-size: 1.25rem; }

.aj-fluxo { list-style: none; margin: 0; padding: 0; position: relative; }
.aj-fluxo::before { content: ""; position: absolute; left: 17px; top: 10px;
                    bottom: 10px; width: 3px; border-radius: 2px;
                    background: linear-gradient(180deg,
                      color-mix(in oklab, var(--p-500) 55%, transparent),
                      color-mix(in oklab, var(--a-500) 55%, transparent)); }
.aj-no { position: relative; display: flex; gap: .95rem; padding: 0 0 1.2rem 0; }
.aj-no-n { position: relative; z-index: 1; flex: none; width: 37px; height: 37px;
           border-radius: 50%; display: inline-flex; align-items: center;
           justify-content: center; background: var(--p-solido); color: #fff;
           font-weight: 750;
           box-shadow: 0 0 0 5px color-mix(in oklab, var(--p-500) 14%, var(--fundo)); }
.aj-no > div { background: var(--superficie-1); border: 1px solid var(--borda);
               border-radius: 12px; padding: .8rem 1rem; flex: 1;
               box-shadow: var(--e-1); }
.aj-no strong { display: block; margin-bottom: .2rem; }
.aj-no p { margin: 0; color: var(--texto-2); font-size: .9rem; line-height: 1.55; }
.aj-nota { margin-top: .45rem !important; padding-top: .45rem;
           border-top: 1px dashed var(--borda); font-size: .84rem !important;
           color: var(--atencao-texto) !important; }

.aj-guias { display: grid; gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.aj-guia h3 { margin-bottom: .6rem; }
.aj-guia ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.aj-guia li { font-size: .9rem; color: var(--texto-2); line-height: 1.5; }
.aj-guia li strong { color: var(--texto-1); }

.aj-faq { display: grid; gap: .6rem; }
.aj-faq details { padding: .9rem 1.1rem; }
.aj-faq summary { cursor: pointer; font-weight: 650; }
.aj-faq details[open] summary { margin-bottom: .5rem; }
.aj-faq p { margin: 0; color: var(--texto-2); font-size: .92rem; line-height: 1.6; }