/* ==========================================================================
   Empresa em Ordem — Sistema visual V4
   Aprovado por Danilo em 16/08/2026, a partir de prototipo-visual-v4-site/.

   COMO ESTE ARQUIVO FUNCIONA
   Ele NAO substitui estilo.css. Ele reveste o MESMO vocabulario de classes
   que o site ja usa, para que nenhuma dependencia de JavaScript quebre:
   ui.js e os motores de calculo se ligam a ids e classes existentes
   (.calculadora, .calculadora-resultado, .btn-imprimir, #precoCusto...).
   Por isso a maior parte da migracao troca apenas o <link> de uma pagina.
   Classes especificas que antes viviam em <style> inline ficam reunidas
   nas secoes finais deste arquivo, para nao haver regra escondida no HTML.

   Enquanto a migracao nao terminar, os dois arquivos convivem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Escuros: nunca preto puro, sempre o navy da marca levado ao limite. */
  --tinta: #0E1D2E;
  --tinta-superficie: #16293D;
  --tinta-linha: #2A4258;
  --tinta-texto: #EAF1F7;
  --tinta-texto-2: #9DB3C7;

  /* Marca */
  --azul: #1A3A5C;
  --azul-forte: #12283F;
  --azul-medio: #2C5580;
  --ciano: #00B4D8;
  --ciano-texto: #006E85;   /* versao AA sobre branco */
  --ciano-fraco: #E0F7FC;

  /* Papel: o fundo alternativo NAO e creme, e o azul frio de segunda via
     de nota fiscal, derivado do navy. */
  --papel: #FFFFFF;
  --papel-2: #E9EFF5;
  --papel-3: #D7E3EE;

  /* TELHA: a segunda familia de cor do site, decidida com Danilo em
     16/08/2026. E a cor do CONTEUDO EDITORIAL (artigos, guias, leitura
     relacionada), enquanto o ciano continua sendo a cor de FERRAMENTA
     (calculadoras, acao). Assim o tipo de pagina se anuncia pela cor
     antes de a pessoa ler qualquer coisa.

     Por que telha e nao dourado: dourado aproximaria demais do
     Investidor10. Por que nao roxo, laranja ou verde: no Brasil o roxo e
     do Nubank, o laranja e de Inter e Itau, e o verde ja e do Caixa em
     Ordem. Telha harmoniza com toda a fotografia do site (rua ao
     entardecer, madeira, papel kraft) e tem raiz local: tijolo e barro. */
  --telha: #B4441F;        /* 5,4:1 sobre branco */
  --telha-claro: #F08A62;  /* 6,1:1 sobre --tinta, para fundo escuro */
  --telha-fraco: #FAEAE3;
  --telha-papel: #F5E3DA;

  --ocre: #9C6300;
  --ocre-texto: #8A5800;
  --ocre-fraco: #F7EEDC;

  /* Semanticas: reservadas a DIRECAO DE NUMERO. Nunca decoram.
     O "caiu" saiu do terracota e virou vermelho de verdade: para um
     leigo, vermelho e mais imediato que telha, e a troca ainda libera a
     telha para ser cor de secao sem ambiguidade. */
  --verde: #1E7A3B;
  --verde-vivo: #2DC653;
  --verde-fraco: #E3F3E7;
  --vermelho: #D92D20;        /* 4,8:1 sobre branco */
  --vermelho-claro: #F87171;  /* 6,0:1 sobre --tinta */
  --vermelho-fraco: #FDEAE8;

  /* Compatibilidade: o nome antigo continua valido apontando para telha,
     para nenhuma regra existente ficar orfa durante a migracao. */
  --roxo: #543182;          /* 7,4:1 sobre branco, quinto assunto */
  --roxo-fraco: #EEE8F6;
  --terracota: var(--telha);
  --terracota-fraco: var(--telha-fraco);

  /* Estrutura */
  --texto: #10202F;
  --texto-2: #51667A;
  /* Placeholder: precisa ser claramente mais fraco que valor digitado, para
     nao confundir o que a calculadora sugeriu com o que a pessoa escreveu.
     Diferenca dupla: cor mais clara E peso normal contra o 600 do digitado. */
  --texto-fantasma: #9AA9B8;

  /* Altura unica de qualquer controle de formulario. Sem isso o input de
     texto cru fica com ~21px de aparencia nativa ao lado da caixa de
     dinheiro de 47px, e o formulario parece meio montado. */
  --alt-controle: 47px;
  --linha: #C6D4E1;
  --linha-forte: #93A9BE;

  /* Tipografia. Zilla Slab (serifada de bloco) nos titulos, IBM Plex Sans
     na leitura, IBM Plex Mono em TODO dinheiro, porcentagem e data. */
  --f-titulo: "Zilla Slab", Georgia, serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --t-xxl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --t-xl: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --t-lg: 1.25rem;
  --t-md: 1.0625rem;
  --t-base: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.7813rem;

  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;   --e7: 3rem;    --e8: 4.5rem;

  --r1: 3px; --r2: 6px; --r3: 12px;
  --larg: 1180px;
  --larg-leitura: 660px;   /* ~74 caracteres por linha a 17px */
  /* MATERIAL.
     Diagnostico de Danilo em 16/08/2026: "tons mortos, nada metalico".
     Estava certo. Superficie chapada com cor dessaturada e justamente a
     assinatura de interface gerada por IA, porque IA sempre escolhe o
     seguro. Acessivel e sem graca nao sao a mesma coisa.

     As superficies escuras deixam de ser um retangulo de cor solida e
     passam a ter degrade, fio de luz na aresta superior (como luz batendo
     em metal) e sombra COLORIDA em vez de cinza. A cor solida continua
     declarada junto com o degrade: o navegador usa como base e o teste
     de contraste tem uma referencia solida para medir. O valor solido e
     sempre o ponto MAIS CLARO do degrade, para a medicao ser conservadora. */
  --sup-escura-base: #1C3752;
  --sup-escura: linear-gradient(158deg, #1C3752 0%, #10233A 55%, #0A1522 100%);
  --sup-topo-base: #16293D;
  --sup-topo: linear-gradient(180deg, #16293D 0%, #0E1D2E 100%);
  --fio-luz: inset 0 1px 0 rgba(255,255,255,.10);
  /* O v4 tinha relevo so para superficie escura (--fio-luz, --brilho-*).
     Sem o equivalente claro, todo bloco em papel saia chapado, com cara
     de folha colorida. Estes tres tokens sao o que da materialidade:
     luz na aresta de cima, sombra de contato e sombra de ambiente. */
  --fio-luz-claro: inset 0 1px 0 rgba(255,255,255,.85);
  --relevo-1: 0 1px 1.5px rgba(16,32,47,.06), 0 3px 8px -3px rgba(16,32,47,.12);
  --relevo-2: 0 1px 2px rgba(16,32,47,.08), 0 8px 20px -8px rgba(16,32,47,.20);
  --fio-ciano: inset 0 1px 0 rgba(34,211,238,.45);
  --brilho-ciano: 0 18px 40px -14px rgba(0,180,216,.45);
  --brilho-telha: 0 18px 40px -14px rgba(180,68,31,.35);
  --ciano-vivo: #22D3EE;
  --telha-vivo: #DB5A2B;

  --sombra: 0 1px 2px rgba(14,29,46,.08), 0 2px 8px rgba(14,29,46,.05);
  --sombra-alta: 0 12px 32px rgba(14,29,46,.14);
  --tr: 160ms cubic-bezier(.2,0,.2,1);

  /* Compatibilidade: nomes antigos que sobrevivem em <style> inline de
     algumas paginas. Apontam para os tokens novos para nada ficar orfao
     durante a migracao. */
  --space-1: var(--e1); --space-2: var(--e2); --space-3: var(--e3);
  --space-4: var(--e4); --space-5: var(--e5); --space-6: var(--e6);
  --space-7: var(--e7); --space-8: var(--e8);
  --color-text: var(--texto);
  --color-text-secondary: var(--texto-2);
  --color-primary: var(--azul);
  --color-border: var(--linha);
  --font-size-sm: var(--t-sm);
  --font-size-md: var(--t-md);
  --raio-borda: var(--r2);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 var(--e4); }
a { color: var(--ciano-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--azul); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.texto-secundario { color: var(--texto-2); }
.texto-centro { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%; max-width: var(--larg);
  margin-inline: auto; padding-inline: var(--e5);
}
.container-leitura {
  width: 100%; max-width: var(--larg-leitura);
  margin-inline: auto; padding-inline: var(--e5);
}
.secao { padding-block: var(--e7); }
@media (min-width: 900px) { .secao { padding-block: var(--e8); } }
.secao--compacta { padding-block: var(--e6); }
.secao-clara { background: var(--papel-2); }

/* --------------------------------------------------------------------------
   4. Cabecalho
   Claro, para preservar o logo real da marca: o arquivo atual e navy +
   ciano, e num cabecalho escuro o "Empresa" em navy some. Os simbolos
   + x = do escudo sao vazados em branco sobre o campo navy, entao nao ha
   recoloracao automatica possivel sem o vetor original.
   A energia de painel vem da faixa escura logo abaixo.
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--sup-topo-base);
  background-image: var(--sup-topo);
  border-bottom: 1px solid var(--tinta-linha);
  box-shadow: var(--fio-ciano);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 68px; flex-wrap: wrap;
}
/* LOGOTIPO
   Direcao aprovada por Danilo em 17/08/2026: a marca e o nome escrito,
   sem simbolo. Foram testadas 11 direcoes de simbolo abstrato e todas
   falharam; o nome ja e descritivo e forte, e um logotipo aproveita isso
   em vez de competir com isso. Historico em prototipo-visual-v4-site/logo/.

   E TEXTO, nao imagem. O site ja carrega Zilla Slab para os titulos, entao
   o logotipo sai de graca e ganha o que imagem nao da: nitidez em qualquer
   zoom, cor que acompanha o fundo, leitura por leitor de tela e por
   buscador, e menos 118KB de PNG.

   A entreletra apertada (-.03em) e o que separa logotipo de texto
   simplesmente digitado. */
.site-logo {
  margin-right: auto;
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-decoration: none;
}
.site-logo span { display: block; }
.site-logo .marca-1 { color: #fff; }
.site-logo .marca-2 { color: var(--ciano); }
/* Em fundo claro (se alguma pagina usar cabecalho claro) */
.site-header--claro .site-logo .marca-1 { color: var(--azul); }
@media (min-width: 860px) { .site-logo { font-size: 1.45rem; } }

.site-header-acoes { display: flex; align-items: center; gap: var(--e2); order: 2; }

.btn-busca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--tinta-linha); background: transparent; color: var(--tinta-texto);
  border-radius: var(--r2); cursor: pointer; transition: all var(--tr);
}
.btn-busca:hover { border-color: var(--ciano); background: rgba(255,255,255,.06); color: #fff; }

.menu-toggle {
  font: 500 var(--t-sm)/1 var(--f-texto);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--tinta-linha); background: transparent; color: var(--tinta-texto);
  border-radius: var(--r2); cursor: pointer;
}
@media (min-width: 860px) { .menu-toggle { display: none; } }

.site-nav { display: none; gap: var(--e1); order: 3; width: 100%; flex-direction: column; }
.site-nav.aberta { display: flex; padding-bottom: var(--e4); }
/* 860px porque e o breakpoint que ui.js usa para decidir desktop. */
@media (min-width: 860px) {
  .site-nav { display: flex !important; flex-direction: row; width: auto; order: 1; padding-bottom: 0; }
}
.site-nav a {
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta-texto-2);
  text-decoration: none; padding: var(--e3); border-radius: var(--r2);
  transition: color var(--tr), background var(--tr);
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }

/* --------------------------------------------------------------------------
   5. Faixa contextual (paginas irmas)
   -------------------------------------------------------------------------- */
.faixa-contextual { background: var(--azul); color: #fff; font-size: var(--t-sm); }
.faixa-contextual-lista {
  display: flex; align-items: center; gap: var(--e4);
  padding-block: var(--e3);
  overflow-x: auto; scrollbar-width: none;
}
.faixa-contextual-lista::-webkit-scrollbar { display: none; }
.faixa-contextual-rotulo {
  white-space: nowrap; flex: none; opacity: .85;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.faixa-contextual a {
  color: #fff; text-decoration: none; white-space: nowrap; flex: none;
  padding-block: var(--e1); border-bottom: 1px solid rgba(255,255,255,.35);
}
.faixa-contextual a:hover { border-bottom-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   6. Numeros
   Todo valor monetario e percentual em mono tabular. E o que separa uma
   pagina que fala de dinheiro de uma pagina que mostra dinheiro.
   -------------------------------------------------------------------------- */
.num, .calculadora-resultado-valor, .resultado-detalhes dd, .tabela-resultado td {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num-sobe { color: var(--verde); }
.num-cai { color: var(--vermelho); }
.calculadora-resultado .num-cai { color: var(--vermelho-claro); }

/* --------------------------------------------------------------------------
   7. Etiquetas e rotulos
   -------------------------------------------------------------------------- */
.card-etiqueta {
  display: inline-block;
  font-family: var(--f-num);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ciano-texto);
  margin-bottom: var(--e2);
}
.etiqueta-vender { color: var(--ciano-texto); }
.etiqueta-caixa, .etiqueta-operacao { color: var(--azul); }
.etiqueta-pessoas { color: #5B3A8E; }
/* Faltavam os grupos crescer e diagnostico: sem eles as etiquetas dessas
   calculadoras caiam na cor default e o codigo de cor por grupo quebrava.
   Crescer NAO usa verde de proposito: verde/vermelho estao reservados para
   direcao de numero (subiu/caiu). Ocre da a ideia de acumulo sem invadir. */
.etiqueta-crescer { color: var(--ocre-texto); }
.etiqueta-diagnostico { color: var(--telha); }
.etiqueta-credito { color: var(--telha); }
.etiqueta-imposto, .etiqueta-guia { color: var(--ocre-texto); }

/* --------------------------------------------------------------------------
   8. Botoes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font: 600 var(--t-base)/1 var(--f-texto);
  padding: var(--e4) var(--e5);
  border-radius: var(--r2); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background-color: var(--ciano); color: var(--tinta); border-color: var(--ciano-vivo);
  background-image: linear-gradient(180deg, var(--ciano-vivo) 0%, var(--ciano) 100%);
  box-shadow: var(--fio-luz), 0 8px 20px -8px rgba(0,180,216,.65);
}
.btn-primary:hover {
  background-image: linear-gradient(180deg, #3DDCF2 0%, #05BEE2 100%);
  color: var(--tinta);
  box-shadow: var(--fio-luz), 0 10px 26px -8px rgba(0,180,216,.8);
}
.btn-secundario { background: transparent; color: var(--azul); border-color: var(--linha-forte); }
.btn-secundario:hover { border-color: var(--azul); background: var(--papel-2); color: var(--azul); }
.btn-bloco { width: 100%; }

.btn-texto {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; color: var(--ciano-texto);
}
.btn-texto:hover { color: var(--azul); }

/* --------------------------------------------------------------------------
   9. Formularios de calculadora
   -------------------------------------------------------------------------- */
/* A pagina da calculadora ganha fundo: com tudo branco, o cartao branco
   nao se destacava e a tela inteira lia como vazia.
   :has() evita marcar classe no <body> das 18 paginas. */
body:has(.calculadora) { background: var(--papel-2); }

.pagina-calculadora { padding-block: var(--e6) var(--e8); }
/* Cabecalho e textos longos ficam na medida de leitura, mesmo dentro do
   container largo que as duas colunas exigem. */
.calc-cabecalho, .calc-complemento { max-width: var(--larg-leitura); }

/* .calculadora deixa de ser cartao e vira a GRADE. Quem vira cartao e o
   formulario (claro) e o resultado (escuro), lado a lado. */
.calculadora { margin-block: var(--e6); }
/* O painel de RESULTADO (escuro, abaixo) ja tinha relevo desde a Fase 3.
   Este FORMULARIO, a superficie que a pessoa realmente toca em toda
   calculadora do site, ficou chapado desde entao - a mesma lacuna que o
   resumo-artigo e o indice-artigo tinham. Fechada agora com o mesmo
   tratamento neutro do .card: gradiente sutil, fio de luz, sombra leve.
   relevo-1 (nao relevo-2): e a superficie de repouso mais vista do site,
   nao pode competir com o conteudo digitado dentro dela. */
.calculadora > form,
.calculadora > .calculadora-coluna > form {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
@media (min-width: 720px) {
  .calculadora > form,
  .calculadora > .calculadora-coluna > form { padding: var(--e6); }
}

@media (min-width: 1000px) {
  .calculadora {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-rows: minmax(0, auto) minmax(0, auto);
    gap: var(--e6);
    align-items: start;
  }
  /* O Quiz e um fluxo linear, nao uma calculadora com formulario e resultado
     lado a lado. A especificidade das duas classes vence a grade generica. */
  .calculadora.quiz-app {
    display: block;
    grid-template-columns: 1fr;
  }
  .calculadora > form { grid-column: 1; grid-row: 1; }
  .calculadora > .calculadora-coluna {
    grid-column: 1; grid-row: 1 / span 2;
    min-width: 0;
    display: flex; flex-direction: column; gap: var(--e6);
  }
  .calculadora > .aviso-alerta { grid-column: 1; grid-row: 2; }
  /* Resultado e estado vazio dividem a mesma celula: so um deles existe
     por vez, entao nunca se sobrepoem. */
  .calculadora > .calculadora-resultado,
  .calculadora > .calc-vazio {
    grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: 92px;
    margin-top: 0;
  }
}

/* Painel de calculadora com gráfico: o apoio ocupa a coluna estreita e o
   resultado ganha a largura inteira para que tabela e gráfico não sejam
   comprimidos dentro de um cartão lateral. O DOM mantém o apoio na posição
   natural de cada página quando a tela volta a empilhar. */
.calculadora--painel .calc-apoio { min-width: 0; }
.calculadora--painel .calc-apoio .calc-complemento { max-width: none; }
.calculadora--painel .calc-complemento .links-ferramentas + p {
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: var(--t-sm);
}
.calculadora--painel .calc-complemento .links-ferramentas + p a { color: var(--ciano-texto); font-weight: 600; }
.calculadora--painel .resultado-topo {
  display: grid;
  gap: var(--e6);
}
.calculadora--painel .resultado-destaque { min-width: 0; }
.calculadora--painel .tabela-resultado { table-layout: fixed; }
.calculadora--painel .tabela-resultado th,
.calculadora--painel .tabela-resultado td { overflow-wrap: anywhere; }
.calculadora--painel .resultado-topo .grafico-caixa { margin-top: 0; }
@media (min-width: 900px) {
  .calculadora--painel .resultado-topo {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
  }
  .calculadora--painel .resultado-topo .grafico-caixa { height: 340px; }
}
@media (min-width: 1000px) {
  .calculadora.calculadora--painel {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-rows: auto auto;
  }
  .calculadora--painel > form,
  .calculadora--painel > .calculadora-coluna {
    grid-column: 1; grid-row: 1;
  }
  .calculadora--painel > .calc-apoio {
    grid-column: 2; grid-row: 1;
    position: static; align-self: start;
  }
  .calculadora--painel > .calc-apoio > .calc-complemento { position: sticky; top: 92px; }
  .calculadora--painel > .calculadora-resultado {
    grid-column: 1 / -1; grid-row: 2;
    position: static; margin-top: 0; min-width: 0;
  }
  .calculadora--painel > .calc-vazio {
    grid-column: 1 / -1; grid-row: 2;
    position: static; margin-top: 0;
  }
  /* Existem DOIS .aviso filhos diretos da calculadora: o alerta de validacao
     e o aviso educativo. Uma regra generica .aviso jogava os dois na mesma
     linha e, quando o alerta aparecia, um texto ficava por cima do outro.
     O :not() separa por intencao, nao por ordem: regra de mesma
     especificidade escrita depois anula a anterior, e era isso que estava
     arrastando o alerta da linha 2 (regra .calculadora > .aviso-alerta) para
     a linha 3. A dupla classe aqui vence sem depender da ordem. */
  .calculadora.calculadora--painel > .aviso-alerta {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: var(--e5);
  }
  .calculadora--painel > .aviso:not(.aviso-alerta) {
    grid-column: 1 / -1; grid-row: 3;
    margin-top: var(--e5);
  }
  /* Enquanto o alerta esta com [hidden] ele nao e item do grid, entao a linha
     2 continua livre para o resultado e nao sobra faixa vazia. So quando ele
     aparece de verdade o resultado e o aviso educativo descem uma linha. */
  .calculadora--painel:has(> .aviso-alerta:not([hidden])) > .calculadora-resultado,
  .calculadora--painel:has(> .aviso-alerta:not([hidden])) > .calc-vazio {
    grid-row: 3;
  }
  .calculadora--painel:has(> .aviso-alerta:not([hidden])) > .aviso:not(.aviso-alerta) {
    grid-row: 4;
  }
}

/* Estado vazio: a coluna da direita nao pode ficar em branco ate a pessoa
   calcular. Explica o que vai aparecer, sem inventar numero falso. */
.calc-vazio {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r3);
  padding: var(--e5);
  color: var(--texto-2);
  font-size: var(--t-sm);
  background: rgba(255,255,255,.5);
}
.calc-vazio strong {
  display: block; font-family: var(--f-titulo);
  font-size: var(--t-md); color: var(--texto);
  margin-bottom: var(--e2);
}
.calculadora:has(.calculadora-resultado:not([hidden])) .calc-vazio { display: none; }

/* So aparece na impressao (ui.js usa .calculadora para montar a folha). */
.marca-impressao { display: none; }

/* align-content:start e o que impede o campo de esticar quando a linha do
   grid fica alta por causa do vizinho. Sem isso, um campo SEM texto de ajuda
   ao lado de um campo COM ajuda tem o controle esticado e empurrado para
   baixo, e as duas colunas do formulario deixam de alinhar. */
.campo { display: grid; gap: var(--e1); margin-bottom: var(--e5); align-content: start; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--texto); }
.campo-ajuda { font-size: var(--t-xs); color: var(--texto-2); line-height: 1.4; }
.campo-erro { display: none; font-size: var(--t-xs); color: var(--vermelho); font-weight: 500; }
.campo.com-erro .campo-erro { display: block; }
.campo.com-erro .campo-prefixo,
.campo.com-erro .campo-sufixo { border-color: var(--vermelho); }

.campo-prefixo, .campo-sufixo {
  display: flex; align-items: center;
  min-height: var(--alt-controle);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  transition: border-color var(--tr), box-shadow var(--tr);
}
/* Controles "nus" (taxa, prazo, quantidade) e todos os select: mesma
   caixa, mesma altura e mesma borda das caixas de dinheiro. Os inputs que
   vivem DENTRO de .campo-prefixo ficam de fora: a borda ali e da caixa. */
.calculadora input[type="text"]:not(.campo-prefixo input):not(.campo-sufixo input),
.calculadora input[type="number"]:not(.campo-prefixo input):not(.campo-sufixo input),
.calculadora input[type="date"],
.calculadora select,
.calculadora textarea {
  width: 100%;
  min-width: 0;
  height: var(--alt-controle);
  padding: 0 var(--e3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  background: var(--papel);
  color: var(--texto);
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  font-weight: 600;
  transition: border-color var(--tr), box-shadow var(--tr);
}
/* O select e rotulo ("% ao mes", "anos"), nao numero: fonte de texto. */
.calculadora select {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 400;
  padding-right: var(--e2);
}
.calculadora textarea { height: auto; padding: var(--e3); font-family: var(--f-texto); font-weight: 400; }

.calculadora input:not(.campo-prefixo input):not(.campo-sufixo input):focus-visible,
.calculadora select:focus-visible,
.calculadora textarea:focus-visible {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(0,180,216,.22);
}

.campo-prefixo:focus-within, .campo-sufixo:focus-within {
  border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(0,180,216,.22);
}
.campo-prefixo > span, .campo-sufixo > span {
  font-family: var(--f-num); font-size: var(--t-sm); color: var(--texto-2);
  padding-inline: var(--e3); flex: none;
}
.campo-prefixo input, .campo-sufixo input {
  width: 100%; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-md); font-weight: 600; color: var(--texto);
  padding: var(--e3);
}
/* O exemplo precisa parecer exemplo. Antes o placeholder herdava o peso
   do valor digitado e passava a impressao de campo ja preenchido.
   A distincao vem de peso (600 contra 400) somado a cor, e nao so de
   cor, para o campo continuar legivel em AA. */
.campo-prefixo input::placeholder, .campo-sufixo input::placeholder {
  color: var(--texto-fantasma);
  font-weight: 400;
  opacity: 1;
}

/* Mesmo tratamento para todo input/textarea do site, nao so os de dinheiro:
   texto, numero, data, busca. Sem isso o placeholder de "Taxa de juros" ou
   "Prazo" continuava com a mesma cara de valor preenchido. */
input::placeholder, textarea::placeholder {
  color: var(--texto-fantasma);
  font-weight: 400;
  opacity: 1;
}
.campo-prefixo > span + input { padding-left: 0; }
.campo-prefixo input:focus-visible, .campo-sufixo input:focus-visible { outline: none; }

.campo-linha, .grade-percentuais {
  display: grid; grid-template-columns: 1fr; gap: 0 var(--e5);
}
@media (min-width: 560px) {
  .campo-linha, .grade-percentuais { grid-template-columns: 1fr 1fr; }
}

/* O formulario tambem vira duas colunas. Antes os campos tinham largura
   fixa (320px para dinheiro, 200px para percentual) dentro de uma coluna
   de ~700px, o que deixava sobra morta a direita de cada linha: era o
   "vazio na coluna da esquerda" apontado por Danilo. Agora cada campo
   preenche a propria celula e o formulario fica mais curto. */
@media (min-width: 640px) {
  .calculadora > form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e5);
    align-content: start;
  }
  .calculadora > .calculadora-coluna > form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e5);
    align-content: start;
  }
  .calculadora > form > .campo { margin-bottom: var(--e4); align-self: start; }
  .calculadora > .calculadora-coluna > form > .campo { margin-bottom: var(--e4); align-self: start; }

  /* Formulario de campo unico (Comparativo CLT/PJ) nao deve fingir duas
     colunas: metade do cartao ficava vazia. Uma coluna, com o campo em
     largura de leitura, parece decisao e nao sobra. */
  .calculadora > form:not(:has(> .campo ~ .campo)) { grid-template-columns: 1fr; }
  .calculadora > form:not(:has(> .campo ~ .campo)) > .campo { max-width: 340px; }
  /* Blocos que precisam da linha inteira. */
  .calculadora > form > .grade-percentuais,
  .calculadora > form > .campo-linha,
  .calculadora > form > button,
  .calculadora > form > .aviso,
  .calculadora > form > p { grid-column: 1 / -1; }
  .calculadora > .calculadora-coluna > form > .grade-percentuais,
  .calculadora > .calculadora-coluna > form > .campo-linha,
  .calculadora > .calculadora-coluna > form > button,
  .calculadora > .calculadora-coluna > form > .aviso,
  .calculadora > .calculadora-coluna > form > p { grid-column: 1 / -1; }

  /* O campo que carrega uma lista dinamica e uma tabela de linhas: precisa
     da largura inteira do form. Em meia coluna o campo de nome cai para
     ~85px e nao cabe "Administrativo". */
  .calculadora > form > .campo:has(.centro-cabecalho),
  .calculadora > form > .campo:has(.invisivel-cabecalho) { grid-column: 1 / -1; }
  .calculadora > .calculadora-coluna > form > .campo:has(.centro-cabecalho),
  .calculadora > .calculadora-coluna > form > .campo:has(.invisivel-cabecalho) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10. Resultado da calculadora
   -------------------------------------------------------------------------- */
.calculadora-resultado {
  background-color: var(--sup-escura-base);
  background-image: var(--sup-escura);
  color: var(--tinta-texto);
  border-radius: var(--r3);
  padding: var(--e5);
  margin-top: var(--e5);
  box-shadow: var(--fio-luz), var(--brilho-ciano);
}
.calculadora-resultado .texto-secundario { color: var(--tinta-texto-2); }
@media (min-width: 720px) { .calculadora-resultado { padding: var(--e6); } }

.calculadora-resultado-rotulo {
  font-family: var(--f-num);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ciano);
  margin: 0 0 var(--e2);
}
.calculadora-resultado-valor {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 600; line-height: 1.05;
  color: #fff;
  margin: 0;
  /* Brilho tenue atras do numero. E o dado mais importante da pagina e
     merece parecer aceso, nao impresso. */
  text-shadow: 0 0 28px rgba(34,211,238,.45);
}

.resultado-detalhes {
  display: flex; flex-wrap: wrap; gap: var(--e5) var(--e7);
  margin: var(--e5) 0 0; padding: var(--e5) 0 0;
  border-top: 1px solid var(--tinta-linha);
}
.resultado-detalhes > div { min-width: 140px; }
.resultado-detalhes dt {
  font-size: var(--t-xs); color: var(--tinta-texto-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.resultado-detalhes dd {
  margin: var(--e1) 0 0;
  font-size: var(--t-lg); font-weight: 600; color: #fff;
}

/* A CONTA: a tabela de composicao que o motor ja gera vira o componente
   de assinatura. Convencao real de contabilidade: valores alinhados a
   direita, e regua DUPLA sob o total. Ninguem precisa saber o nome disso
   para entender que aquela linha e a resposta. */
.tabela-scroll { overflow-x: auto; margin-top: var(--e5); }
.tabela-resultado {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
}
.tabela-resultado th {
  text-align: left;
  font-family: var(--f-num); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-texto-2);
  padding: 0 0 var(--e2);
  border-bottom: 1px solid var(--tinta-linha);
}
.tabela-resultado th:not(:first-child), .tabela-resultado td:not(:first-child) { text-align: right; }
.tabela-resultado td {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--tinta-linha);
  color: var(--tinta-texto);
}
.tabela-resultado td:first-child { font-family: var(--f-texto); color: var(--tinta-texto-2); }
.tabela-resultado tbody tr:last-child td {
  border-top: 1px solid var(--tinta-texto-2);
  border-bottom: 3px double var(--tinta-texto-2);
  font-weight: 600; color: #fff;
  padding-top: var(--e3);
}
.tabela-resultado tbody tr:last-child td:first-child {
  font-family: var(--f-texto); color: #fff;
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-xs);
}

.acoes-resultado {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e5); padding-top: var(--e5);
  border-top: 1px solid var(--tinta-linha);
}
.btn-acao {
  display: inline-flex; align-items: center; gap: var(--e2);
  font: 500 var(--t-sm)/1 var(--f-texto);
  padding: var(--e3) var(--e4);
  background: transparent; color: var(--tinta-texto);
  border: 1px solid var(--tinta-linha); border-radius: var(--r2);
  cursor: pointer; transition: all var(--tr);
}
.btn-acao:hover { background: var(--tinta-superficie); border-color: var(--ciano); color: #fff; }

/* --------------------------------------------------------------------------
   11. Blocos editoriais
   -------------------------------------------------------------------------- */
/* ---------- Direto ao ponto ----------
   Era um retangulo de cor chapada com um fio na lateral: leitura de
   caixa de apostila. Agora tem gradiente (luz de cima), fio de luz na
   aresta e sombra em duas camadas, entao a superficie parece material
   e nao papel colorido. O rotulo sai do bloco como uma etiqueta presa
   por cima, que e o que da o ar de recado e nao de paragrafo cercado. */
.resumo-artigo {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cor-resumo, var(--ciano)) 3%, #fff) 0%,
      color-mix(in srgb, var(--cor-resumo, var(--ciano)) 11%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--cor-resumo, var(--ciano)) 22%, #fff);
  border-left: 3px solid var(--cor-resumo, var(--ciano));
  border-radius: var(--r1) var(--r3) var(--r3) var(--r1);
  padding: calc(var(--e5) + var(--e2)) var(--e5) var(--e5);
  margin-block: var(--e6) var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
.resumo-artigo > p:first-child {
  position: absolute; top: 0; left: var(--e5);
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: var(--e2);
  margin: 0;
  padding: 5px var(--e3) 5px var(--e2);
  /* --ciano vivo com texto branco da 2,46:1 e reprova. A etiqueta usa
     sempre a versao escura da cor, que existe no sistema justamente
     para carregar texto claro em cima. */
  background: var(--cor-resumo, var(--ciano-texto));
  color: #fff;
  font-family: var(--f-num); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  border-radius: var(--r1);
  box-shadow: 0 2px 5px -1px rgba(16,32,47,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
/* A marca antes do rotulo: um traco grosso, nao um icone de biblioteca. */
.resumo-artigo > p:first-child::before {
  content: ""; width: 3px; height: 11px; border-radius: 2px;
  background: rgba(255,255,255,.7); flex: none;
}
.resumo-artigo ul { margin: 0; padding: 0; list-style: none; }
/* Marcador proprio: um traco curto na cor do assunto, alinhado a
   primeira linha. A bolinha padrao do navegador e o que mais denuncia
   texto sem tratamento. */
.resumo-artigo li { position: relative; padding-left: 1.15em; }
.resumo-artigo li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .62em; height: 2px; border-radius: 1px;
  background: var(--cor-resumo, var(--ciano)); opacity: .75;
}
.resumo-artigo li { margin-bottom: var(--e1); }

.bloco-termos-simples {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  margin-block: var(--e6);
}
.bloco-termos-simples h2 { font-size: var(--t-lg); margin-bottom: var(--e3); }
.lista-termos-simples { margin: 0; }
.item-termo + .item-termo { margin-top: var(--e4); }
.lista-termos-simples dt { font-weight: 600; margin-bottom: var(--e1); }
.lista-termos-simples dd { margin: 0; color: var(--texto-2); font-size: var(--t-sm); }

/* O aviso e uma nota apoiada sobre a pagina, nao um retangulo de cor
   chapada. Leva o relevo leve (--relevo-1), nunca o forte: ele acompanha
   o texto, nao compete com ele. */
.aviso {
  display: flex; gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r2);
  font-size: var(--t-sm);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  color: var(--texto-2);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
.aviso-alerta { background: linear-gradient(180deg, #FEF4F3 0%, var(--vermelho-fraco) 100%); border-color: #F3B9B4; color: #8A1C13; }
.aviso-info { background: linear-gradient(180deg, #F1FAFD 0%, var(--ciano-fraco) 100%); border-color: #A8E4F0; color: #0A5566; }
.aviso-sucesso { background: linear-gradient(180deg, #F0F9F2 0%, var(--verde-fraco) 100%); border-color: #B4DCC0; color: #14562A; }

/* O SVG dentro do botao de acao nao pode ser esmagado pelo texto ao lado. */
.icone-acao { flex: none; }

/* O aviso de diagnostico dentro do resultado escuro precisa inverter.
   O fio de luz claro do .aviso base viraria um risco branco sobre fundo
   escuro, entao aqui ele troca pelo fio discreto da superficie escura. */
.calculadora-resultado .aviso {
  background: var(--tinta-superficie);
  border-color: var(--tinta-linha);
  color: var(--tinta-texto);
  margin-top: var(--e4);
  box-shadow: var(--fio-luz);
}

.links-ferramentas { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }

/* --------------------------------------------------------------------------
   12. Cards e grades
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--e5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
  .grade-assunto.grid-3:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sobra da base pre-relevo (Fase 1): so este .card ainda tinha fundo
   chapado e o hover que levita -3px, o padrao generico que foi banido do
   resto do site. E o cartao de artigo da HOME, entao e visto por todo
   mundo que entra pela porta principal. Ganha o mesmo tratamento de
   material que .resumo-artigo/.indice-artigo: gradiente sutil, fio de
   luz, sombra em duas camadas. O hover aprofunda a sombra em vez de
   levitar - a foto ja tem seu proprio zoom (.card-artigo-foto img). */
.card {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel-2) 100%);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover {
  border-color: var(--azul-medio);
  box-shadow: var(--fio-luz-claro), var(--relevo-2);
  color: inherit;
}
.card h3 { font-size: var(--t-md); margin-bottom: var(--e2); }
.card p { font-size: var(--t-sm); color: var(--texto-2); }
.container-leitura > .card + .card { margin-top: var(--e5); }

/* --------------------------------------------------------------------------
   13. Busca
   -------------------------------------------------------------------------- */
.painel-busca {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14,29,46,.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--e7) var(--e4);
}
.painel-busca-caixa {
  width: 100%; max-width: 640px;
  background: var(--papel); border-radius: var(--r3);
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.painel-busca-topo {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e4); border-bottom: 1px solid var(--linha);
}
.painel-busca-topo input {
  flex: 1; border: 0; outline: none;
  font: 400 var(--t-md)/1.4 var(--f-texto); color: var(--texto);
}
.btn-fechar-busca {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--texto-2); padding: var(--e2);
}
.painel-busca-resultados { max-height: 60vh; overflow-y: auto; }
.painel-busca-resultados a {
  display: block; padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  text-decoration: none; color: var(--texto);
}
.painel-busca-resultados a:hover { background: var(--papel-2); }

/* --------------------------------------------------------------------------
   14. Rodape e cookies
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--sup-topo-base);
  background-image: linear-gradient(180deg, #0A1522 0%, #10233A 100%);
  color: var(--tinta-texto-2);
  padding-block: var(--e7) var(--e5);
  font-size: var(--t-sm);
  margin-top: var(--e8);
}
.site-footer p { margin-bottom: var(--e2); }
.site-footer strong { color: #fff; }
.rodape-links {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--tinta-linha);
}
.rodape-links a { color: var(--tinta-texto-2); text-decoration: none; }
.rodape-links a:hover { color: var(--ciano); text-decoration: underline; }
.site-footer .btn-preferencias-privacidade {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--tinta-texto-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-footer .btn-preferencias-privacidade:hover,
.site-footer .btn-preferencias-privacidade:focus-visible {
  color: var(--ciano);
}

.banner-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--tinta); color: var(--tinta-texto);
  border-top: 1px solid var(--tinta-linha);
  padding-block: var(--e4);
}
.banner-cookies .container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e4); justify-content: space-between;
}
.banner-cookies p { margin: 0; font-size: var(--t-sm); }
.banner-cookies a { color: var(--ciano); }
.banner-cookies-botoes { display: flex; gap: var(--e3); flex: none; }
.banner-cookies-botoes [aria-pressed="true"] {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
}
.banner-cookies .btn-secundario { color: var(--tinta-texto); border-color: var(--tinta-linha); }
.banner-cookies .btn-secundario:hover { background: var(--tinta-superficie); color: #fff; }

/* --------------------------------------------------------------------------
   15. Impressao
   ui.js monta a folha a partir de .calculadora e .calculadora-resultado.
   Na impressao o resultado precisa virar tinta sobre papel, senao sai um
   retangulo escuro gastando toner e ilegivel em impressora monocromatica.
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .faixa-contextual, .painel-busca, .banner-cookies,
  .site-footer, .acoes-resultado { display: none !important; }
  .marca-impressao {
    display: block; font-size: var(--t-xs); color: var(--texto-2);
    margin-bottom: var(--e4);
  }
  .marca-impressao span { display: block; }
  .calculadora { border: 0; padding: 0; }
  .calculadora-resultado { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .calculadora-resultado-valor, .resultado-detalhes dd { color: #000 !important; }
  .calculadora-resultado-rotulo, .resultado-detalhes dt { color: #444 !important; }
  .tabela-resultado td, .tabela-resultado th { color: #000 !important; border-color: #999 !important; }
  .tabela-resultado tbody tr:last-child td { border-color: #000 !important; }
}

/* --------------------------------------------------------------------------
   16. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   17. Pular para o conteudo
   Criado por ui.js em toda pagina; fica fora da tela ate receber foco.
   -------------------------------------------------------------------------- */
.link-pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: #fff;
  padding: var(--e3) var(--e4);
  border-radius: 0 0 var(--r2) 0;
  text-decoration: none; font-weight: 600; font-size: var(--t-sm);
}
.link-pular-conteudo:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   18. Artigo: a assinatura EDITORIAL
   Aqui mora a resposta ao "o site e todo igual". Calculadora e artigo
   deixam de compartilhar a mesma paleta: a ferramenta fica na familia
   CIANO (acao, instrumento) e o artigo na familia TELHA (leitura). O tipo
   de pagina se anuncia pela cor antes de a pessoa ler qualquer coisa.
   Estrutura tambem muda: o artigo ganha duas colunas com lateral fixa,
   em vez da coluna unica centralizada com margem morta dos dois lados.
   -------------------------------------------------------------------------- */
.pagina-artigo { padding-block: var(--e6) var(--e8); background: var(--papel); }

.artigo-grade { display: grid; gap: var(--e6); }
@media (min-width: 1000px) {
  .artigo-grade {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--e8);
    align-items: start;
  }
}
.artigo-principal { max-width: var(--larg-leitura); min-width: 0; }

/* Voltar */
.artigo-voltar {
  display: inline-block; font-size: var(--t-sm);
  text-decoration: none; color: var(--texto-2);
  margin-bottom: var(--e5);
}
.artigo-voltar:hover { color: var(--telha); }

/* Cabecalho: filete telha acima do rotulo, marcando o territorio editorial */
.artigo-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  font-size: var(--t-sm); color: var(--texto-2);
  margin: 0 0 var(--e4);
}
.artigo-meta-leitura {
  font-family: var(--f-num);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--texto-fantasma) 20%, var(--texto-2) 80%);
}
.artigo-meta .card-etiqueta { color: var(--telha); margin: 0; }
.pagina-artigo h1 { margin-bottom: var(--e5); }
.pagina-artigo h1 + .resumo-artigo,
.pagina-artigo .artigo-meta + h1 { margin-top: 0; }

/* Cada h2 recebe um filete telha curto, dando ritmo a leitura longa */
.pagina-artigo .artigo-principal h2 {
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: 3px solid var(--telha);
}

/* Resumo: mesmo componente da calculadora, vestido de editorial */
.pagina-artigo .resumo-artigo { --cor-resumo: var(--cor-assunto); }
/* O rotulo agora e uma etiqueta de fundo colorido: o texto dentro dela
   e sempre branco. Esta regra antiga pintava o texto de terracota sobre
   a etiqueta, o que alem de errado dava contraste ruim. */
.pagina-artigo .resumo-artigo > p:first-child { color: #fff; }
.pagina-artigo .resumo-artigo a { color: var(--cor-resumo, var(--telha)); }

/* Indice: some do corpo e reaparece na lateral, fixo. */
/* Mesmo tratamento do resumo, em tom mais quieto: e navegacao, nao
   conteudo. Gradiente curto no topo, fio de luz e sombra de contato. */
.indice-artigo {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
/* Sobre o papel telha o --telha cai para 4,46:1, logo abaixo do minimo.
   Um passo mais escuro resolve sem mudar a familia de cor. */
.indice-artigo > p:first-child {
  font-family: var(--f-num); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #9A3A1A; margin: 0 0 var(--e3);
}
.indice-artigo ol { margin: 0; padding: 0; list-style: none; counter-reset: item; }
.indice-artigo li { border-bottom: 1px solid #E4C6B7; }
.indice-artigo li:last-child { border-bottom: 0; }
.indice-artigo a {
  display: block; padding: var(--e3) 0;
  font-size: var(--t-sm); line-height: 1.35;
  color: var(--texto); text-decoration: none;
}
.indice-artigo a:hover { color: var(--telha); }

.artigo-lateral { display: grid; gap: var(--e5); }
@media (min-width: 1000px) {
  .artigo-lateral { position: sticky; top: 92px; }
}

/* A ponte para a ferramenta continua CIANO de proposito: e o unico
   elemento de acao dentro do territorio editorial, e precisa se destacar
   justamente por falar outra lingua. */
.secao-escura {
  background-color: var(--sup-escura-base);
  background-image: var(--sup-escura);
  color: var(--tinta-texto);
  border-radius: var(--r3); padding: var(--e5);
  box-shadow: var(--fio-luz), var(--brilho-ciano);
}
.secao-escura p { color: var(--tinta-texto-2); }
.secao-escura p:first-child { color: #fff; font-weight: 600; }
/* O botao da lateral ocupa a largura toda e, em 11 dos 18 artigos, o texto
   quebra em duas linhas. O .btn base tem line-height 1 e o texto herda
   text-align do container, entao as duas linhas saiam coladas e encostadas
   a esquerda dentro de um botao largo. */
.secao-escura .btn-primary {
  width: 100%;
  text-align: center;
  line-height: 1.3;
}

.faq-item {
  border-top: 1px solid var(--linha);
  padding-block: var(--e4);
}
.faq-item :is(h3, p:first-child) { font-weight: 600; }
.faq-item p:last-child { margin-bottom: 0; color: var(--texto-2); }

/* Acoes de compartilhar no artigo ficam claras, nao dentro de cartao escuro */
.pagina-artigo .acoes-resultado {
  border-top: 1px solid var(--linha);
  margin-top: var(--e6); padding-top: var(--e5);
}
.pagina-artigo .btn-acao { color: var(--texto-2); border-color: var(--linha); }
.pagina-artigo .btn-acao:hover {
  background: var(--telha-fraco); border-color: var(--telha); color: var(--telha);
}

/* --------------------------------------------------------------------------
   19. HOME: a assinatura PORTAL
   A home nao usa o mesmo ritmo das outras paginas. Ela abre escura, com a
   faixa de indicadores em alto contraste logo abaixo do cabecalho, como
   fazem os portais financeiros. E o unico lugar do site onde ferramenta
   (ciano) e leitura (telha) convivem, porque a home e a porta das duas.
   -------------------------------------------------------------------------- */

/* --- Faixa viva: o elemento de maior contraste do site ---
   Antes era um painel discreto encostado no canto da abertura. Danilo
   apontou, com razao, que estava apagada. Agora e largura cheia, quase
   preta, logo abaixo do cabecalho, e aparece antes de qualquer conteudo. */
.faixa-viva {
  background-color: #08111C;
  background-image: linear-gradient(180deg, #0B1726 0%, #060E17 100%);
  border-bottom: 1px solid var(--tinta-linha);
  box-shadow: var(--fio-ciano);
  overflow: hidden;
}
.faixa-viva-interna {
  display: flex; align-items: center; gap: var(--e5);
  min-height: 52px;
  overflow: visible;
}

/* A barra de mercado tem tres zonas fixas e uma lista que pode crescer. A
   lista precisa ser a área rolável, não a seleção de texto da faixa inteira:
   isso funciona com toque no celular e com gesto horizontal no trackpad. */
.painel-indicadores {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--e5); row-gap: var(--e2);
  min-width: 0; overflow: visible;
}
.painel-indicadores-lista#barraIndicadores {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--e5); row-gap: var(--e2);
  flex: 1 1 auto; min-width: 0;
  overflow: visible;
}
@media (max-width: 1199px) {
  .painel-indicadores-lista#barraIndicadores { order: 3; flex: 1 1 100%; min-width: 100%; }
}
@media (max-width: 480px) {
  .painel-indicadores-lista#barraIndicadores { column-gap: var(--e2); }
}

.painel-indicadores-titulo {
  display: inline-flex; align-items: center; gap: var(--e2);
  flex: none;
  font-family: var(--f-num); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-texto-2);
  padding-right: var(--e5); border-right: 1px solid var(--tinta-linha);
  text-decoration: none;
}
.painel-indicadores-titulo:hover,
.painel-indicadores-titulo:focus-visible { text-decoration: underline; }
.painel-indicadores-selo {
  flex: none;
  font-family: var(--f-num); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #7BE8A0;
  display: inline-flex; align-items: center; gap: var(--e2);
}
.painel-indicadores-selo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde-vivo);
  box-shadow: 0 0 0 0 rgba(45,198,83,.6);
  animation: pulso-vivo 2.4s infinite;
}
@keyframes pulso-vivo {
  0%   { box-shadow: 0 0 0 0 rgba(45,198,83,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(45,198,83,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,198,83,0); }
}
.painel-indicadores-selo--fallback { color: #F3C77B; }
.painel-indicadores-selo--fallback::before { background: #F3C77B; animation: none; }

.painel-indicadores-item {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  flex: none; white-space: nowrap;
}
.painel-indicadores-nome {
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-texto-2);
}
.painel-indicadores-valor {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); font-weight: 600; color: #fff;
}
/* --- Abertura escura --- */
.abertura {
  background-color: var(--sup-escura-base);
  background-image:
    radial-gradient(120% 90% at 82% 8%, rgba(0,180,216,.20) 0%, rgba(0,180,216,0) 55%),
    var(--sup-escura);
  color: var(--tinta-texto);
  padding-block: var(--e7);
  border-bottom: 1px solid var(--tinta-linha);
}
@media (min-width: 900px) { .abertura { padding-block: var(--e8); } }

.abertura-grade { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 940px) {
  .abertura-grade { grid-template-columns: 1.02fr 0.98fr; gap: var(--e8); }
}
.abertura h1 {
  color: #fff;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  letter-spacing: -.025em;
  margin-bottom: var(--e5);
}
.abertura h1 .grifo {
  background: linear-gradient(to top, rgba(34,211,238,.22) 0 36%, transparent 36%);
  box-shadow: inset 0 -2px 0 var(--ciano-vivo);
}
.abertura-texto > p {
  font-size: var(--t-md); color: var(--tinta-texto-2); max-width: 46ch;
}
.abertura-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.abertura .btn-secundario { color: var(--tinta-texto); border-color: var(--tinta-linha); }
.abertura .btn-secundario:hover { background: rgba(255,255,255,.07); color: #fff; border-color: var(--ciano); }
.abertura-selos {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e5); font-size: var(--t-sm); color: var(--tinta-texto-2);
}
.abertura-selos > span { display: inline-flex; align-items: center; gap: var(--e2); }
.abertura-selos svg { color: var(--verde-vivo); flex: none; }

/* A conta ao vivo dentro da abertura */
.demo-caixa {
  background-color: #0A1725;
  background-image: linear-gradient(160deg, #142A42 0%, #0A1725 70%);
  border: 1px solid var(--tinta-linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz), 0 24px 60px -20px rgba(0,0,0,.75), var(--brilho-ciano);
}
@media (min-width: 720px) { .demo-caixa { padding: var(--e6); } }
.demo-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e3);
  padding-bottom: var(--e4); margin-bottom: var(--e5);
  border-bottom: 1px solid var(--tinta-linha);
}
.demo-cabecalho h2 { margin: 0; font-size: var(--t-lg); color: #fff; }
.demo-cabecalho .texto-secundario { color: var(--tinta-texto-2); font-size: var(--t-xs); }

.demo-caixa .campo label { color: var(--tinta-texto-2); font-size: var(--t-xs); font-weight: 500; }
.demo-caixa .campo { margin-bottom: 0; }
.demo-caixa .campo-prefixo, .demo-caixa .campo-sufixo {
  background: rgba(255,255,255,.05); border-color: var(--tinta-linha);
}
.demo-caixa .campo-prefixo input, .demo-caixa .campo-sufixo input { color: #fff; }
.demo-caixa .campo-prefixo input::placeholder, .demo-caixa .campo-sufixo input::placeholder {
  color: var(--tinta-texto-2);
}
.demo-caixa .campo-prefixo > span, .demo-caixa .campo-sufixo > span { color: var(--tinta-texto-2); }
.demo-caixa .campo-prefixo:focus-within, .demo-caixa .campo-sufixo:focus-within {
  border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(0,180,216,.25);
}
.demo-grade-percentuais { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.demo-caixa .btn-bloco { margin-top: var(--e5); }

/* A CONTA: convencao contabil, regua dupla sob o total. */
.demo-resultado { margin-top: var(--e5); }
.lista-composicao { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.lista-composicao li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); padding-block: var(--e2);
  color: var(--tinta-texto-2);
}
.lista-composicao strong {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--tinta-texto);
}
.demo-resultado .rotulo {
  font-family: var(--f-num); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-texto-2);
  margin: var(--e4) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--tinta-texto-2);
}
.valor-grande {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem);
  font-weight: 600; line-height: 1.05; color: var(--ciano-vivo);
  margin: var(--e1) 0 0;
  padding-bottom: var(--e3);
  border-bottom: 3px double var(--tinta-texto-2);
  text-shadow: 0 0 30px rgba(34,211,238,.5);
}

/* --- Caminhos rapidos: lista arejada, sem cartao nem icone pastel --- */
.secao-caminhos-rapidos { background: var(--papel); padding-block: var(--e7); }
@media (min-width: 900px) { .secao-caminhos-rapidos { padding-block: var(--e8); } }
.caminhos-topo { display: grid; gap: var(--e4); margin-bottom: var(--e6); }
.caminhos-topo h2 { margin: 0; font-size: var(--t-xxl); }
.caminhos-topo p { margin: 0; color: var(--texto-2); max-width: 62ch; }

.grade-caminhos { border-top: 2px solid var(--texto); }
.cartao-caminho {
  --cor-assunto: var(--azul);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 132px 18px;
  gap: var(--e5); align-items: center;
  padding: var(--e6) var(--e3);
  margin-inline: calc(var(--e3) * -1);
  border-bottom: 1px solid var(--linha);
  text-decoration: none; color: inherit;
  transition: background var(--tr);
}
.cartao-caminho:hover { background: var(--papel-2); color: inherit; }
.cartao-caminho h3 {
  display: flex; align-items: baseline; gap: var(--e3);
  font-family: var(--f-texto); font-weight: 600; font-size: var(--t-md);
  line-height: 1.3; margin: 0; letter-spacing: 0;
}
.cartao-caminho h3::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-assunto); transform: translateY(-1px);
}
.cartao-caminho p { margin: 0; font-size: var(--t-sm); color: var(--texto-2); line-height: 1.45; }
.caminho-valor { text-align: right; font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.caminho-valor b { display: block; font-size: var(--t-base); font-weight: 600; color: var(--azul); line-height: 1.2; }
.caminho-valor small {
  display: block; font-family: var(--f-texto); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2);
}
.caminho-seta { color: var(--ciano-texto); transition: transform var(--tr); }
.cartao-caminho:hover .caminho-seta { transform: translate(2px, -2px); }
.cartao-caminho--preco { --cor-assunto: var(--ciano-texto); }
.cartao-caminho--caixa { --cor-assunto: var(--azul); }
.cartao-caminho--pessoas { --cor-assunto: #5B3A8E; }
.cartao-caminho--credito { --cor-assunto: var(--telha); }
@media (max-width: 900px) {
  .cartao-caminho {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e2) var(--e4); padding-block: var(--e5); align-items: baseline;
  }
  .caminho-valor { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .caminho-seta { display: none; }
}

/* --- Artigos com foto, no territorio TELHA --- */
.secao-artigos {
  background: var(--papel-2); border-block: 1px solid var(--linha);
  padding-block: var(--e7);
}
@media (min-width: 900px) { .secao-artigos { padding-block: var(--e8); } }
.secao-artigos .marcador-secao { color: var(--telha); }
.card-artigo { overflow: hidden; padding: 0; }
.card-artigo-foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-3); }
.card-artigo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.card-artigo:hover .card-artigo-foto img { transform: scale(1.03); }
.card-artigo-corpo { padding: var(--e4) var(--e5) var(--e5); }
.card-artigo .card-etiqueta { color: var(--telha); }

/* --- Sobre com a foto sangrando ate a borda --- */
.secao-sobre-v4 { background: var(--papel); padding-block: var(--e7); }
@media (min-width: 900px) { .secao-sobre-v4 { padding-block: var(--e8); } }
.sobre-bloco {
  display: grid; gap: var(--e6); align-items: center;
  max-width: var(--larg); margin-inline: auto;
}
@media (min-width: 940px) {
  .sobre-bloco {
    grid-template-columns:
      minmax(var(--e5), calc((100% - var(--larg)) / 2 + var(--e5)))
      minmax(0, calc(var(--larg) * 0.46 - var(--e5)))
      minmax(0, 1fr);
    gap: 0;
  }
  .sobre-texto { grid-column: 2; padding-right: var(--e7); }
  .sobre-foto { grid-column: 3; min-height: 420px; border-radius: var(--r3) 0 0 var(--r3); }
}
.sobre-texto { padding-inline: var(--e5); }
@media (min-width: 940px) { .sobre-texto { padding-left: 0; } }
.sobre-texto .marcador-secao { color: var(--telha); }
.sobre-foto {
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--papel-3); margin-inline: var(--e5); border-radius: var(--r3);
}
@media (min-width: 940px) { .sobre-foto { aspect-ratio: auto; height: 100%; margin-inline: 0; } }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Marcador de secao herdado do site antigo */
.marcador-secao {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-num); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ciano-texto); margin-bottom: var(--e3);
}
.marcador-secao::before { content: ""; width: 22px; height: 2px; background: currentColor; }

.linha-diagnostico {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e4); margin-top: var(--e5); font-size: var(--t-sm); color: var(--texto-2);
}

/* --------------------------------------------------------------------------
   20. Figuras de dado dentro do artigo
   Danilo apontou que a pagina de artigo continuava chapada e sem imagem.
   A resposta nao e enfeite: sao figuras que MOSTRAM a conta que o texto
   descreve, com os mesmos numeros do proprio artigo. Grafico que contradiz
   o texto ao lado e pior que nenhum grafico.
   Tudo em SVG e CSS, nada rasterizado: escala em qualquer tela, pesa quase
   nada e acompanha os tokens de cor.
   -------------------------------------------------------------------------- */
 .artigo-capa {
  overflow: hidden;
  border-radius: var(--r3);
  border: 1px solid var(--linha);
  background: var(--papel-3);
  margin: 0 0 var(--e6);
 }
 .artigo-capa img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
 }
 .artigo-capa figcaption {
  font-size: var(--t-sm);
  color: var(--texto-2);
  padding: var(--e2) var(--e1, 4px) 0;
 }

.figura {
  margin-block: var(--e6);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--papel-2);
  padding: var(--e5);
}
.figura-titulo {
  font-family: var(--f-num);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9A3A1A;
  margin: 0 0 var(--e4);
}
.figura-nota {
  font-size: var(--t-xs); color: var(--texto-2);
  margin: var(--e4) 0 0;
}

/* A CONTA: convencao contabil de verdade. Valores a direita, traco simples
   fechando os itens e regua DUPLA sob o total. */
.conta {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
}
.conta-linha {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: var(--e4);
  padding-block: var(--e2);
}
.conta-linha > span:first-child {
  font-family: var(--f-texto); color: var(--texto-2);
  display: flex; align-items: baseline; min-width: 0;
}
.conta-linha > span:first-child > em { font-style: normal; flex: none; }
.conta-linha > span:first-child::after {
  content: ""; flex: 1 1 auto; min-width: var(--e4);
  margin-left: var(--e2); margin-bottom: .3em;
  border-bottom: 1px dotted var(--linha-forte);
}
.conta-total {
  margin-top: var(--e2); padding-top: var(--e3); padding-bottom: var(--e2);
  border-top: 1px solid var(--texto);
  border-bottom: 3px double var(--texto);
}
.conta-total > span:first-child::after { display: none; }
.conta-total > span:first-child {
  font-family: var(--f-texto); font-weight: 600; font-size: var(--t-sm);
  color: var(--texto); text-transform: uppercase; letter-spacing: .06em;
}
.conta-total > .conta-valor {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 600; line-height: 1; color: var(--azul);
}

/* Regua de composicao: o mesmo numero, agora como proporcao. */
.regua {
  display: flex; height: 14px;
  border-radius: 999px; overflow: hidden;
  background: var(--papel-3);
  margin-top: var(--e5);
}
.regua > span { display: block; min-width: 2px; }
.regua-custo { background: var(--azul); }
.regua-fixas { background: var(--ocre); }
.regua-taxa { background: var(--ciano); }
.regua-lucro { background: var(--verde-vivo); }
.regua-legenda {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  margin-top: var(--e3); font-size: var(--t-xs); color: var(--texto-2);
}
.regua-legenda > span { display: inline-flex; align-items: center; gap: var(--e2); }
.regua-legenda i { width: 10px; height: 10px; border-radius: 2px; display: block; flex: none; }

.figura svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   21. Barras de comparacao
   Segundo tipo de figura do sistema. O primeiro artigo usa a CONTA (itens
   que somam um total) e a REGUA DE COMPOSICAO (um total repartido). Este
   compara duas grandezas independentes e mostra a diferenca entre elas.

   Sao componentes distintos de proposito: Danilo pediu que os artigos
   sejam variacoes de um modelo, nao copias de uma forma. Cada tipo de
   argumento pede o seu proprio desenho.
   -------------------------------------------------------------------------- */
.barras-comparacao { display: grid; gap: var(--e4); }
.barra-linha { display: grid; gap: var(--e2); }
.barra-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4);
}
.barra-rotulo { font-size: var(--t-sm); color: var(--texto-2); }
.barra-valor {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-md); font-weight: 600; color: var(--texto);
}
.barra-trilho {
  height: 16px; border-radius: 999px;
  background: var(--papel-3); overflow: hidden;
}
.barra-preenche { display: block; height: 100%; border-radius: 999px; }
.barra-preenche--precisa { background: var(--azul); }
.barra-preenche--tem { background: var(--ciano); }

.barra-falta {
  display: flex; align-items: baseline; gap: var(--e2);
  margin-top: var(--e2); padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: var(--t-sm); color: var(--texto-2);
}
/* O --vermelho passa em AA sobre branco (4,8:1) mas cai para 4,17 sobre
   o azul-papel da figura. Um passo mais escuro resolve sem sair da cor. */
.barra-falta strong {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lg); font-weight: 600; color: #C0261A;
}

/* --------------------------------------------------------------------------
   22. Resultado em FAIXA DE RISCO
   Segundo tipo de resultado de calculadora. A Precificacao devolve um VALOR
   (R$ 172,41); o Termometro devolve um ESTADO (saudavel / atencao / alerta).
   Precisam parecer diferentes, porque significam coisas diferentes: numero
   se le, estado se reconhece.

   CONTRATO COM O JS, conferido em motor2-precificacao.js antes de escrever:
   ao calcular, o motor faz
       resultado.className = "calculadora-resultado quiz-categoria-" + status
   ou seja, ele SOBRESCREVE a className inteira. Qualquer classe extra posta
   no HTML de #giroResultado seria apagada no primeiro calculo. Por isso toda
   a diferenciacao de estado mora nas tres classes quiz-categoria-*, e nada
   depende de classe adicional no HTML.

   Vale para Termometro de Capital de Giro, Quiz de Saude Financeira e
   Termometro de Viabilidade, que usam o mesmo sistema de estados.
   -------------------------------------------------------------------------- */

/* O titulo do estado nao e um numero: sai da fonte mono e volta para a
   fonte de titulo, em corpo menor que um valor monetario. */
.quiz-categoria-saudavel .calculadora-resultado-valor,
.quiz-categoria-atencao .calculadora-resultado-valor,
.quiz-categoria-alerta .calculadora-resultado-valor {
  font-family: var(--f-titulo);
  font-variant-numeric: normal;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-shadow: none;
}

/* Barra de estado no topo do painel, na cor do diagnostico. E o que faz a
   pessoa reconhecer a situacao antes de ler qualquer palavra. */
.quiz-categoria-saudavel,
.quiz-categoria-atencao,
.quiz-categoria-alerta { position: relative; overflow: hidden; }

.quiz-categoria-saudavel::before,
.quiz-categoria-atencao::before,
.quiz-categoria-alerta::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
}
.quiz-categoria-saudavel::before { background: var(--verde-vivo); }
.quiz-categoria-atencao::before  { background: #F0B429; }
.quiz-categoria-alerta::before   { background: var(--vermelho-claro); }

/* O rotulo acima do titulo acompanha a cor do estado. Sobre o painel
   escuro, os tres tons passam AA com folga. */
.quiz-categoria-saudavel .calculadora-resultado-rotulo { color: var(--verde-vivo); }
.quiz-categoria-atencao .calculadora-resultado-rotulo  { color: #F0B429; }
/* O --vermelho-claro passa com folga como numero grande, mas neste rotulo
   ele e texto de 12,5px e cai para 4,42:1 sobre o painel. Um tom mais claro
   resolve so aqui; a barra de estado continua no vermelho cheio. */
.quiz-categoria-alerta .calculadora-resultado-rotulo   { color: #FF9E97; }

/* O texto explicativo do diagnostico usa o .aviso, que ja e invertido
   dentro do painel escuro. Aqui so ganha a borda lateral do estado. */
.quiz-categoria-saudavel .aviso { border-left: 3px solid var(--verde-vivo); }
.quiz-categoria-atencao .aviso  { border-left: 3px solid #F0B429; }
.quiz-categoria-alerta .aviso   { border-left: 3px solid var(--vermelho-claro); }

/* A barra do quiz, quando existir, segue o mesmo codigo de cor. */
.quiz-categoria-saudavel .quiz-barra-preenchida { background-color: var(--verde-vivo); }
.quiz-categoria-atencao .quiz-barra-preenchida  { background-color: #F0B429; }
.quiz-categoria-alerta .quiz-barra-preenchida   { background-color: var(--vermelho-claro); }

/* --------------------------------------------------------------------------
   23. Listas dinamicas (Centro de Custo, Custos Invisiveis)
   Contrato conferido em motor2-precificacao.js antes de escrever: o JS
   cria/remove linhas via createElement/innerHTML com estas classes exatas.
   Nao existiam no estilo-v4.css ate agora; sem isso as duas calculadoras
   sairiam malformadas no rollout.

   Padrao: cada linha e uma fileira de largura total do form (nome | valor |
   remover), reaproveitando .campo-prefixo que ja existe para o campo de
   dinheiro em vez de reinventar.
   -------------------------------------------------------------------------- */
.centro-linha, .invisivel-linha {
  display: grid;
  grid-template-columns: minmax(0,1fr) 160px auto;
  gap: var(--e3);
  align-items: center;
  margin-bottom: var(--e3);
}
/* Custos Invisiveis tem uma coluna a mais (frequencia mensal/anual). */
.invisivel-linha { grid-template-columns: minmax(0,1fr) 140px 110px auto; }

.centro-nome, .invisivel-nome {
  height: 44px;
  padding: 0 var(--e3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  font-family: var(--f-texto); font-size: var(--t-base); color: var(--texto);
  background: var(--papel);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.centro-nome:focus-visible, .invisivel-nome:focus-visible {
  outline: none; border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(0,180,216,.22);
}

.centro-valor-caixa, .invisivel-valor-caixa { margin: 0; max-width: none; }

.invisivel-frequencia {
  height: 44px;
  padding: 0 var(--e2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  font-family: var(--f-texto); font-size: var(--t-sm); color: var(--texto);
  background: var(--papel);
}
.invisivel-frequencia:focus-visible {
  outline: none; border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(0,180,216,.22);
}

.btn-remover-centro, .btn-remover-invisivel {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--papel);
  color: var(--texto-2);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: all var(--tr);
}
.btn-remover-centro:hover, .btn-remover-invisivel:hover {
  border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-fraco);
}

/* Cabecalho de colunas das listas. Precisa espelhar EXATAMENTE o grid da
   linha acima, senao os rotulos nao caem sobre os campos que nomeiam.
   A ultima coluna e um span vazio com a largura do botao remover (36px). */
.centro-cabecalho, .invisivel-cabecalho {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-2);
}
.centro-cabecalho { grid-template-columns: minmax(0,1fr) 160px auto; }
.invisivel-cabecalho { grid-template-columns: minmax(0,1fr) 140px 110px auto; }
.centro-cabecalho span:last-child,
.invisivel-cabecalho span:last-child { width: 36px; }

/* Em telas estreitas as 3-4 colunas nao cabem: nome em cima, resto embaixo. */
@media (max-width: 640px) {
  .centro-linha { grid-template-columns: 1fr auto; grid-template-areas: "nome remover" "valor valor"; }
  .centro-nome { grid-area: nome; }
  .centro-valor-caixa { grid-area: valor; }
  .btn-remover-centro { grid-area: remover; }

  /* Linhas empilhadas nao tem colunas fixas: o cabecalho sai. */
  .centro-cabecalho, .invisivel-cabecalho { display: none; }

  .invisivel-linha { grid-template-columns: 1fr auto; grid-template-areas: "nome remover" "valor freq"; }
  .invisivel-nome { grid-area: nome; }
  .invisivel-valor-caixa { grid-area: valor; }
  .invisivel-frequencia { grid-area: freq; }
  .btn-remover-invisivel { grid-area: remover; }
}

/* --------------------------------------------------------------------------
   24. Componentes que estavam inline nas calculadoras do lote 1
   -------------------------------------------------------------------------- */
/* Blocos editoriais em sequencia no complemento (Comparativo CLT/PJ).
   Sem a margem os titulos encostam no paragrafo do bloco anterior. */
.caminho-card { margin-bottom: var(--e6); }
.caminho-card > h3 { margin: 0 0 var(--e2); font-size: var(--t-lg); }
.caminho-card > p { margin: 0; }
.caminho-card .links-ferramentas { margin-top: var(--e3); }

.grafico-caixa {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: var(--e5);
}

.grade-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--e5);
}
@media (min-width: 560px) {
  .grade-campos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
  /* display:contents faz os .campo de dentro virarem filhos diretos do
     grid do formulario, em vez de a grade inteira ocupar uma faixa propria.
     Sem isso, quando um dos dois campos esta oculto (o RAT so aparece fora
     do Simples), sobra meia faixa vazia e o campo anterior fica sozinho
     numa linha com um buraco do lado. */
  .calculadora > form > .grade-campos { display: contents; }
}

.campo-caixa-selecao {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-sm);
}
.campo-caixa-selecao input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ciano-texto);
}

.viab-paybacks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  margin-top: var(--e5);
}
@media (min-width: 560px) {
  .viab-paybacks { grid-template-columns: 1fr 1fr; }
}
.viab-payback {
  border: 1px solid var(--tinta-linha);
  border-radius: var(--r2);
  padding: var(--e4);
  text-align: center;
  background: rgba(255,255,255,.04);
}
.viab-payback--real { border-color: var(--ciano); border-width: 2px; }
.viab-payback-rotulo {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--tinta-texto-2);
}
.viab-payback-valor {
  margin: var(--e2) 0;
  font-family: var(--f-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}
.viab-payback-nota {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--tinta-texto-2);
}

/* Superficie para interfaces interativas sem <form>, como o checklist e o
   guia tributario. O resultado do guia continua usando o painel escuro. */
/* .calculadora--lista NAO entra aqui: no checklist quem faz o papel de
   cartao e o .nr1-conteudo. Deixar o wrapper com fundo tambem produzia
   cartao dentro de cartao. */
/* O wrapper nao e cartao: quem e cartao e o bloco de escolha. Com fundo no
   wrapper, o painel escuro (alto) esticava a linha do grid e sobrava um
   vazio branco enorme embaixo do seletor. */
/* Mesma lacuna do .calculadora > form: superficie de trabalho clara que
   ficou de fora da rodada de relevo. */
.calculadora--interativa > .campo {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  align-self: start;
  margin-bottom: 0;
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
@media (min-width: 720px) {
  .calculadora--interativa > .campo { padding: var(--e6); }
}

/* O Guia da Reforma Tributaria (unica pagina com --interativa) nao tem
   form: e so um seletor + o painel de texto que ele revela. O grid padrao
   de calculadora poe o seletor na coluna 1 e o painel sticky na coluna 2,
   lado a lado; como o seletor e baixo (um campo so) e o painel e alto
   (varios paragrafos), o conjunto fica torto. Aqui o painel e a
   continuacao da leitura, nao um resultado numerico: melhor empilhado,
   selecao em cima e resposta embaixo, ocupando a largura toda. */
.calculadora--interativa {
  grid-template-columns: 1fr;
}
.calculadora--interativa > .calculadora-resultado {
  grid-column: 1; grid-row: 2 / span 1;
  position: static;
  margin-top: var(--e5);
}

/* Checklist da NR-1: nao e formulario, mas ocupa o mesmo esqueleto de duas
   colunas das calculadoras. Sem estas regras os filhos diretos caem no
   auto-placement do grid e se espalham alternando entre as colunas: o
   rotulo "Seu progresso" de um lado e a barra do outro.
   A lista de itens faz o papel do formulario (coluna 1, cartao branco) e o
   progresso faz o papel do resultado (coluna 2, fixo ao rolar). */
/* Mesma lacuna do .calculadora > form: superficie de trabalho clara que
   ficou de fora da rodada de relevo. */
.nr1-conteudo {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
@media (min-width: 720px) { .nr1-conteudo { padding: var(--e6); } }

.nr1-painel {
  background: linear-gradient(180deg, var(--papel-2) 0%, var(--papel-3) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  margin-bottom: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}

.calculadora--lista > .marca-impressao { grid-column: 1 / -1; }

@media (min-width: 1000px) {
  .calculadora--lista > .nr1-conteudo { grid-column: 1; grid-row: 1; }
  .calculadora--lista > .nr1-painel {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 92px;
    margin-bottom: 0;
  }
}

.calculadora--lista > .acoes-resultado {
  border-top-color: var(--linha);
}
.calculadora--lista .btn-acao {
  color: var(--azul);
  border-color: var(--linha-forte);
}
.calculadora--lista .btn-acao:hover {
  color: var(--azul);
  background: var(--papel-2);
  border-color: var(--azul);
}

/* --------------------------------------------------------------------------
   25. Grupo C: checklist, calendario e indicadores
   -------------------------------------------------------------------------- */
.nr1-progresso-caixa {
  background-color: var(--ciano-fraco);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  margin-top: var(--e2);
}
.nr1-progresso-barra {
  background-color: var(--verde);
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width var(--tr);
}
.nr1-progresso-rotulo {
  font-size: var(--t-sm);
  color: var(--texto-2);
  margin-top: var(--e2);
  margin-bottom: 0;
}
.nr1-bloco { margin-top: var(--e6); }
.nr1-bloco:first-child { margin-top: 0; }
/* Titulo de secao dentro do checklist e rotulo de grupo, nao titulo de
   pagina: no tamanho de h2 padrao competia com o h1. */
.nr1-bloco > h2 { font-size: var(--t-lg); margin: 0 0 var(--e2); }
.nr1-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
}
.nr1-item input {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--verde);
}
.nr1-item span { line-height: 1.5; }
.nr1-item small {
  display: block;
  color: var(--texto-2);
  font-size: var(--t-sm);
  margin-top: 2px;
}

.calendario-item {
  border-left: 3px solid var(--telha);
  padding-left: var(--e4);
  margin-bottom: var(--e5);
}
.calendario-item h3 { margin-bottom: var(--e2); }
.calendario-item p { margin: 0 0 var(--e2); }
.calendario-fonte { font-size: var(--t-sm); color: var(--texto-2); }

.pagina-indicadores { background: var(--papel-2); }
.indicador { text-align: center; }
.indicador-nome {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Especificidade dobrada de proposito: o .card generico define font-size
   nos seus <p> e vencia, deixando o numero do mesmo tamanho do rotulo. Numa
   pagina de indicadores o numero e o protagonista. */
.indicador .indicador-valor {
  margin: var(--e2) 0;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--azul);
}
.indicador-data { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
.indicador-data--referencia { color: var(--vermelho); }

@media (prefers-reduced-motion: reduce) {
  .nr1-progresso-barra { transition: none; }
}


/* ============================================================
   24. INDICE DE ARTIGOS EM FAIXAS  (artigos/index.html)
   ------------------------------------------------------------
   Primeira tentativa foi um sumario tipografico: texto empilhado em
   fundo branco, separado so por fio. Ficou chapado e sem hierarquia,
   e foi recusado com razao.
   O que resolve e a faixa de largura total: cada assunto ocupa a tela
   inteira com fundo proprio, entao a quebra entre um tema e outro
   acontece mesmo rolando rapido.
   Cada faixa usa o tom fraco da SUA cor de assunto, nunca repetindo o
   fundo de outra: a cor deixa de ser alternancia decorativa e passa a
   identificar o tema. Verde e vermelho ficam de fora de proposito,
   reservados para direcao de numero no resto do sistema.
   ============================================================ */

.faixa-assunto { padding: var(--e8) 0; }

/* A COR do assunto e o FUNDO da faixa ficam separados de proposito: a
   mesma cor e usada na trilha de navegacao, que vive sobre o fundo
   escuro da abertura. Juntando os dois, o chip da trilha herdava o
   fundo claro e o texto claro sumia em cima dele. */
.tema--preco    { --cor-assunto: var(--telha); }
.tema--caixa    { --cor-assunto: var(--ciano-texto); }
.tema--investir { --cor-assunto: #1C3752; }
.tema--pessoas  { --cor-assunto: var(--ocre-texto); }
.tema--decidir  { --cor-assunto: var(--roxo); }

/* Peso alternado, claro e escuro, para a pagina ter respiracao em vez
   de cinco tons pastel seguidos. Cada assunto mantem a sua cor; o que
   alterna e a intensidade. Nenhum repete o navy da abertura. */
.faixa-assunto--preco    { background: #FCF1EC; }
.faixa-assunto--caixa    { background: #0B3D4A; color: var(--tinta-texto); }
.faixa-assunto--investir { background: var(--papel-3); }
.faixa-assunto--pessoas  { background: #402C10; color: var(--tinta-texto); }
.faixa-assunto--decidir  { background: var(--roxo-fraco); }

/* Nas faixas escuras a aba precisa clarear para nao sumir no fundo, e
   o texto de apoio inverte. */
.faixa-assunto--caixa   { --cor-aba: #3FC5E0; --tinta-aba: #062B34; }
.faixa-assunto--pessoas { --cor-aba: #E2A93B; --tinta-aba: #2E1F08; }
.faixa-assunto--caixa .aba-assunto,
.faixa-assunto--pessoas .aba-assunto { background: var(--cor-aba); color: var(--tinta-aba); }
.faixa-assunto--caixa .faixa-corpo,
.faixa-assunto--pessoas .faixa-corpo { border-top-color: var(--cor-aba); }
.faixa-assunto--caixa .faixa-desc,
.faixa-assunto--pessoas .faixa-desc { color: var(--tinta-texto-2); }
.faixa-assunto--caixa .faixa-atalho,
.faixa-assunto--pessoas .faixa-atalho {
  background: transparent; border-color: var(--cor-aba); color: var(--cor-aba);
}
.faixa-assunto--caixa .faixa-atalho:hover,
.faixa-assunto--pessoas .faixa-atalho:hover,
.faixa-assunto--caixa .faixa-atalho:focus-visible,
.faixa-assunto--pessoas .faixa-atalho:focus-visible {
  background: var(--cor-aba); color: var(--tinta-aba);
}

/* Sobre o fundo escuro da abertura o ponto usa a versao viva da cor:
   os tons -texto sao escuros de proposito e sumiriam ali. */
.trilha-assuntos .tema--preco    { --cor-assunto: var(--telha-claro); }
.trilha-assuntos .tema--caixa    { --cor-assunto: var(--ciano); }
.trilha-assuntos .tema--investir { --cor-assunto: #7FA8CC; }
.trilha-assuntos .tema--pessoas  { --cor-assunto: #E0A22E; }
.trilha-assuntos .tema--decidir  { --cor-assunto: #A98BD6; }

/* O catálogo alterna papel branco e papel frio sem criar uma nova cor. A
   faixa de abertura continua sangrando; apenas os quatro grupos respiram. */
main > section#crescer,
main > section#operacao { background: var(--papel); }
main > section#precificar,
main > section#decidir {
  background: var(--papel-2);
  border-block: 1px solid var(--linha);
}

/* A cor do assunto acompanha a calculadora sem invadir o resultado, o botão
   primário ou os estados semânticos escritos pelos motores. */
main[class*="tema--"] > .card-etiqueta,
main[class*="tema--"] .calc-cabecalho > .card-etiqueta {
  color: var(--cor-assunto);
}
main[class*="tema--"] .resumo-artigo {
  --cor-resumo: var(--cor-assunto);
}

/* Abertura: a unica faixa escura da pagina, para nao competir com
   nenhum assunto e marcar onde a leitura comeca. */
.faixa-abertura {
  padding: var(--e8) 0;
  background-color: var(--sup-escura-base);
  background-image: var(--sup-escura);
  color: var(--tinta-texto);
  position: relative;
  overflow: hidden;
}

/* ---------- cabecalho: aba de pasta ----------
   Os icones anteriores eram o traco fino de 24px que aparece em
   qualquer template, sem relacao nenhuma com o assunto. Foram
   removidos e o titulo virou a ABA de uma pasta de arquivo: o site
   chama Empresa em Ordem, e o mundo de quem le e o da papelada
   organizada. A aba nomeia o assunto e ja e o elemento grafico, entao
   nao sobra icone generico nem titulo repetido ao lado dele. */
.aba-assunto {
  display: inline-block;
  margin: 0;
  padding: var(--e3) var(--e5);
  background: var(--cor-assunto);
  color: #fff;
  font-size: var(--t-lg);
  line-height: 1.2;
  border-radius: 7px 7px 0 0;
}

/* A regua abaixo fecha a pasta: a aba senta em cima dela. */
.faixa-corpo {
  border-top: 3px solid var(--cor-assunto);
  padding-top: var(--e4);
  margin-bottom: var(--e6);
  display: grid; gap: var(--e3);
}
@media (min-width: 880px) {
  .faixa-corpo {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center; column-gap: var(--e5);
  }
}
.faixa-desc { color: #3E5062; margin: var(--e4) 0 0; max-width: 62ch; }

.faixa-atalho {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--cor-assunto);
  border-radius: var(--r2);
  background: var(--papel);
  color: var(--cor-assunto);
  font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; white-space: nowrap;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.faixa-atalho:hover,
.faixa-atalho:focus-visible { background: var(--cor-assunto); color: #fff; }

/* ---------- conteudo da faixa: destaque + secundarios ----------
   A grade de tres cartoes iguais dava o mesmo peso a tudo e o olho nao
   tinha para onde ir. Aqui cada assunto abre com um texto em destaque,
   como a abertura da pagina faz, e os demais ficam numa lista compacta
   ao lado. Hierarquia dentro do assunto, nao so entre assuntos. */
.faixa-conteudo { display: grid; gap: var(--e4); }
@media (min-width: 900px) {
  .faixa-conteudo { grid-template-columns: 1.15fr 1fr; align-items: start; column-gap: var(--e6); }
}

/* O texto de abertura do assunto: papel apoiado, canto quase reto,
   regua colorida na lateral. Sem o cartao de canto arredondado que
   levita 2px, que e o padrao de qualquer template. */
/* A imagem e o que separava esta pagina da home, que ja usava foto nos
   cartoes. O destaque abre com ela grande; as linhas da lista levam uma
   miniatura, o bastante para a lista nao virar so texto. */
.artigo-foto { display: block; overflow: hidden; background: var(--papel-2); }
.artigo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Todas as imagens sao 3:2. Fixar a ALTURA muda a proporcao do quadro e
   faz o recorte comer justamente o que importa: a nuvem de tempestade da
   reserva, a cabeca das pessoas nas fotos. Com aspect-ratio o quadro
   acompanha a imagem e nada e cortado. */
.artigo-destaque .artigo-foto { aspect-ratio: 3 / 2; }
.artigo-destaque .artigo-foto img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.artigo-destaque:hover .artigo-foto img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .artigo-destaque:hover .artigo-foto img { transform: none; }
}
.artigo-destaque-corpo {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e5);
  padding-left: calc(var(--e5) + 6px);
  flex: 1;
}

/* Linha da lista: miniatura a esquerda, texto a direita. */
.artigo-linha { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: var(--e4); align-items: start; }
.artigo-linha .artigo-foto { aspect-ratio: 3 / 2; border-radius: 3px; }

.artigo-destaque {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--papel);
  border-radius: 0 5px 5px 0;
  text-decoration: none; color: var(--texto);
  box-shadow:
    inset 6px 0 0 var(--cor-assunto),
    0 1px 0 rgba(16,32,47,.10),
    0 3px 8px -3px rgba(16,32,47,.22);
  transition: box-shadow var(--tr);
}
.artigo-destaque:hover,
.artigo-destaque:focus-visible {
  box-shadow:
    inset 12px 0 0 var(--cor-assunto),
    0 1px 0 rgba(16,32,47,.12),
    0 8px 18px -6px rgba(16,32,47,.30);
}
.artigo-destaque h3 {
  font-size: var(--t-xl); line-height: 1.15; margin: 0;
  transition: color var(--tr);
}
.artigo-destaque:hover h3 { color: var(--cor-assunto); }
.artigo-destaque-corpo > p { color: var(--texto-2); margin: 0; }
.artigo-destaque .cartao-meta { margin-top: auto; }

/* Os demais textos do assunto: linhas de uma lista, nao cartoes. */
.artigo-lista {
  display: grid;
  background: var(--papel);
  border-radius: 0 5px 5px 0;
  box-shadow:
    inset 6px 0 0 var(--cor-assunto),
    0 1px 0 rgba(16,32,47,.10),
    0 3px 8px -3px rgba(16,32,47,.22);
  overflow: hidden;
}
.artigo-linha {
  text-decoration: none; color: var(--texto);
  padding: var(--e4) var(--e5);
  padding-left: calc(var(--e5) + 6px);
  border-top: 1px solid var(--linha);
  transition: background var(--tr);
}
.artigo-linha:first-child { border-top: 0; }
.artigo-linha:hover,
.artigo-linha:focus-visible { background: var(--papel-2); }
.artigo-linha h3 {
  font-size: var(--t-md); line-height: 1.25; margin: 0 0 var(--e1, 4px);
  transition: color var(--tr);
}
.artigo-linha:hover h3 { color: var(--cor-assunto); }
.artigo-linha p { color: var(--texto-2); font-size: var(--t-sm); margin: 0 0 var(--e2); }
.cartao-meta {
  font-family: var(--f-num); font-size: var(--t-xs);
  color: var(--texto-2); margin: 0;
}
.cartao-artigo h3 { font-size: var(--t-base); line-height: 1.3; margin: 0; }
.cartao-artigo > p { color: var(--texto-2); font-size: var(--t-sm); margin: 0; flex: 1; }
.cartao-meta {
  font-family: var(--f-num); font-size: var(--t-xs);
  color: var(--texto-2); margin: 0;
}


/* ---------- abertura: curadoria ---------- */
.etiqueta-faixa {
  font-family: var(--f-num); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ciano); margin: 0 0 var(--e2);
}
.titulo-abertura { color: #fff; font-size: var(--t-xxl); line-height: 1.05; margin: 0 0 var(--e3); }
.faixa-abertura .titulo-abertura { margin-bottom: var(--e4); }
.faixa-abertura .subtitulo-abertura { color: #BCCEDC; font-size: var(--t-lg); margin: 0 0 var(--e6); max-width: 62ch; }

/* ---------- abertura do catalogo de calculadoras ----------
   A textura e feita com os proprios simbolos das contas. Ela reforca o que
   a pagina faz sem trazer clipart ou um icone generico para o fundo. */
.faixa-abertura > .container { position: relative; }
.marca-dagua-calculo {
  position: absolute;
  z-index: 0;
  top: 7%; right: -8%;
  width: 115%; max-width: none;
  color: var(--ciano-vivo);
  font-family: var(--f-num);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: .06;
  transform: rotate(-8deg);
  user-select: none;
  pointer-events: none;
}
/* A ilustracao precisa ficar de fora desta regra: ela e posicionada em
   absolute logo abaixo, e este seletor tem especificidade maior, entao
   sobrescreveria o position e jogaria a imagem de volta para o fluxo. */
.faixa-abertura > .container > *:not(.marca-dagua-calculo):not(.ilustracao-catalogo) {
  position: relative;
  z-index: 1;
}

/* Ilustracao de colagem de papel do catalogo de ferramentas. Ela foi composta
   com o lado esquerdo vazio de proposito, para o texto ocupar aquele espaco.
   Fica no canto superior direito, atras do texto, e some no celular, onde a
   largura precisa ser toda do conteudo. */
.ilustracao-catalogo {
  display: none;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 34%;
  max-width: 380px;
  max-height: 340px;
  height: auto;
  object-fit: contain;
  object-position: top right;
  pointer-events: none;
  user-select: none;
  /* Sem isto a ilustracao termina numa linha reta atras dos cartoes de
     destaque. O desvanecer faz ela se dissolver no fundo da faixa. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
}

@media (min-width: 900px) {
  .ilustracao-catalogo { display: block; }

  /* Os tres destaques sao um conjunto: ou aparecem os tres lado a lado, ou
     empilham. O 2+1 padrao da grade deixaria um buraco ao lado do terceiro. */
  .faixa-abertura .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Com a ilustracao a direita, o texto para antes dela para nao passar por
     baixo. Os cartoes de destaque abaixo seguem com a largura inteira. */
  .faixa-abertura .etiqueta-faixa,
  .faixa-abertura .titulo-abertura,
  .faixa-abertura .subtitulo-abertura { max-width: 62%; }

  /* A marca d'agua divide o fundo com a ilustracao: perde peso e recua para a
     esquerda, para as duas nao competirem no mesmo canto. */
  .faixa-abertura .marca-dagua-calculo { right: auto; left: -6%; opacity: .045; }
}
.destaque-ferramenta {
  display: flex;
  flex-direction: column;
  min-height: 10rem;
  padding: var(--e5);
  border: 1px solid var(--tinta-linha);
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(22,41,61,.98) 0%, rgba(14,29,46,.98) 100%);
  box-shadow: var(--fio-luz), 0 1px 2px rgba(0,0,0,.16), 0 8px 20px -8px rgba(0,0,0,.34);
  color: var(--tinta-texto);
  text-decoration: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.destaque-ferramenta:hover,
.destaque-ferramenta:focus-visible {
  border-color: var(--cor-destaque);
  box-shadow: var(--fio-luz), 0 1px 2px rgba(0,0,0,.20), 0 12px 24px -8px rgba(0,0,0,.42);
  color: var(--tinta-texto);
}
.destaque-ferramenta.tema--preco { --cor-destaque: var(--telha-claro); }
.destaque-ferramenta.tema--caixa { --cor-destaque: var(--ciano-vivo); }
.destaque-ferramenta.tema--decidir { --cor-destaque: #A98BD6; }
.destaque-ferramenta-numero {
  color: var(--cor-destaque);
  font-family: var(--f-num);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}
.destaque-ferramenta-rotulo {
  margin-top: var(--e2);
  color: var(--tinta-texto-2);
  font-size: var(--t-sm);
}
.destaque-ferramenta-nome {
  margin-top: auto;
  padding-top: var(--e4);
  color: var(--tinta-texto);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
}

/* No catálogo, a ficha repete a cor da pasta que a contém. A régua é uma
   sombra interna, então engrossa no hover sem deslocar o texto. */
main > section[class*="tema--"] .card {
  box-shadow: inset 5px 0 0 var(--cor-assunto), var(--fio-luz-claro), var(--relevo-1);
}
main > section[class*="tema--"] .card-etiqueta { color: var(--cor-assunto); }
main > section[class*="tema--"] .card-link:hover,
main > section[class*="tema--"] .card-link:focus-visible {
  box-shadow: inset 9px 0 0 var(--cor-assunto), var(--fio-luz-claro), var(--relevo-2);
}

.abertura-sumario { display: grid; gap: var(--e5); }
@media (min-width: 900px) { .abertura-sumario { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.destaque-principal {
  display: block; text-decoration: none; color: inherit;
  background: var(--tinta-superficie);
  border: 1px solid var(--tinta-linha);
  border-radius: var(--r3); overflow: hidden;
  transition: transform var(--tr), border-color var(--tr);
}
.destaque-principal:hover,
.destaque-principal:focus-visible { border-color: var(--ciano); }
/* height:auto e obrigatorio junto de aspect-ratio: sem ele o atributo
   height do <img> volta a valer e a imagem estica. A hero e 16:9, entao
   o quadro segue 16:9 e nada e cortado. */
.destaque-principal img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover; display: block;
}
.destaque-corpo { padding: var(--e5); }
.destaque-corpo h3 { color: #fff; font-size: var(--t-xl); line-height: 1.15; margin: 0 0 var(--e2); }
.destaque-corpo > p { color: var(--tinta-texto-2); margin: 0 0 var(--e3); }
.destaque-corpo .cartao-meta { color: var(--tinta-texto-2); }

.apoios { display: grid; gap: var(--e4); }
.apoio {
  display: block; text-decoration: none; color: inherit;
  padding: var(--e4);
  background: var(--tinta-superficie);
  border: 1px solid var(--tinta-linha);
  border-left: 3px solid var(--cor-apoio, var(--ciano));
  border-radius: var(--r2);
  transition: transform var(--tr), border-color var(--tr);
}
.apoio:hover,
.apoio:focus-visible { border-left-width: 6px; padding-left: calc(var(--e4) - 3px); }
.apoio h3 { color: #fff; font-size: var(--t-base); line-height: 1.3; margin: 0 0 var(--e2); }
.apoio p { color: var(--tinta-texto-2); font-size: var(--t-sm); margin: 0; }

/* ---------- navegacao por assunto, logo abaixo da abertura ---------- */
.trilha-assuntos {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  padding: var(--e4) 0 0;
  border-top: 1px solid var(--tinta-linha);
  margin-top: var(--e6);
}
.trilha-assuntos a {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--tinta-linha);
  border-radius: 999px;
  color: var(--tinta-texto); text-decoration: none;
  font-size: var(--t-sm);
  transition: border-color var(--tr), background var(--tr);
}
.trilha-assuntos a:hover,
.trilha-assuntos a:focus-visible { border-color: var(--ciano); background: rgba(0,180,216,.12); }
.trilha-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-assunto); flex: none; }

/* Ilustracoes decorativas dos quatro grupos do catalogo. A caixa preserva
   uma altura comum, enquanto o contain respeita a proporcao de cada assunto. */
.ilustracao-assunto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: min(28vw, 270px);
  height: 150px;
  margin: 0;
}
.ilustracao-assunto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 767px) {
  .ilustracao-assunto { display: none; }
}

/* ============================================================
   25. COR DO ASSUNTO DENTRO DO ARTIGO
   ------------------------------------------------------------
   O indice pinta cada assunto com uma cor. Se o artigo aberto
   volta ao terracota fixo, a cor do indice vira enfeite: quem
   clicou num cartao ciano chega num texto que nao tem nada de
   ciano. Aqui o artigo herda a cor do proprio assunto, entao o
   caminho inteiro (cartao -> texto) fica coerente.
   O <main> recebe a classe tema--X junto de pagina-artigo. Sem
   ela, o padrao continua sendo o terracota de antes.
   ============================================================ */

/* So define o padrao terracota para quem NAO tem tema--X. Antes essa
   regra vinha sem essa exclusao e, tendo a mesma especificidade das
   regras .tema--X abaixo (uma classe cada), vencia por estar depois no
   arquivo: apagava a cor de 16 dos 18 artigos, deixando tudo terracota. */
main.pagina-artigo:not([class*="tema--"]) { --cor-assunto: var(--telha); }

/* O filete acima de cada h2 e o maior marcador de cor do texto. */
.pagina-artigo.tema--preco .artigo-principal h2,
.pagina-artigo.tema--caixa .artigo-principal h2,
.pagina-artigo.tema--investir .artigo-principal h2,
.pagina-artigo.tema--pessoas .artigo-principal h2,
.pagina-artigo.tema--decidir .artigo-principal h2 {
  border-top-color: var(--cor-assunto);
}

/* Etiqueta de categoria e links dentro do texto. */
.pagina-artigo.tema--preco .card-etiqueta,
.pagina-artigo.tema--caixa .card-etiqueta,
.pagina-artigo.tema--investir .card-etiqueta,
.pagina-artigo.tema--pessoas .card-etiqueta,
.pagina-artigo.tema--decidir .card-etiqueta { color: var(--cor-assunto); }

/* O indice lateral usa o papel telha por padrao; nos outros assuntos
   ele fica neutro para nao brigar com a cor do tema. */
.pagina-artigo.tema--caixa .indice-artigo,
.pagina-artigo.tema--investir .indice-artigo,
.pagina-artigo.tema--pessoas .indice-artigo,
.pagina-artigo.tema--decidir .indice-artigo {
  background: var(--papel-2);
  border-color: var(--linha);
}
.pagina-artigo.tema--caixa .indice-artigo > p:first-child,
.pagina-artigo.tema--investir .indice-artigo > p:first-child,
.pagina-artigo.tema--pessoas .indice-artigo > p:first-child,
.pagina-artigo.tema--decidir .indice-artigo > p:first-child { color: var(--cor-assunto); }
.pagina-artigo.tema--caixa .indice-artigo li,
.pagina-artigo.tema--investir .indice-artigo li,
.pagina-artigo.tema--pessoas .indice-artigo li,
.pagina-artigo.tema--decidir .indice-artigo li { border-bottom-color: var(--linha); }
.pagina-artigo.tema--caixa .indice-artigo a:hover,
.pagina-artigo.tema--investir .indice-artigo a:hover,
.pagina-artigo.tema--pessoas .indice-artigo a:hover,
.pagina-artigo.tema--decidir .indice-artigo a:hover { color: var(--cor-assunto); }

/* O resumo "Direto ao ponto" tambem acompanha o assunto. */


/* ---------- regras específicas das páginas mecânicas ----------
   Migradas dos estilos inline do Lote 4. Os tokens antigos foram
   traduzidos para o vocabulário nativo do v4 antes da remoção do HTML. */

/* Guia de capital de giro: linha do tempo e ilustração. */
.linha-tempo {
  list-style: none;
  padding: 0;
  margin: var(--e5) 0;
  border-left: 3px solid var(--linha);
}
.linha-tempo li {
  position: relative;
  padding-left: var(--e5);
  padding-bottom: var(--e4);
}
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: calc(var(--e5) * -1 + 13px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--ciano-texto);
}
.linha-tempo strong {
  display: block;
  color: var(--azul);
}
.linha-tempo .destaque-intervalo::before {
  background-color: var(--telha);
}
.figura-ilustracao {
  margin: var(--e6) 0;
  text-align: center;
}
.figura-ilustracao img {
  max-width: 100%;
  height: auto;
}
.figura-ilustracao figcaption {
  margin-top: var(--e2);
  font-size: 0.9rem;
  color: var(--texto-2);
}

/* Contato. */
.contato-email {
  display: inline-block;
  margin-top: var(--e2);
  font-size: var(--t-lg);
  font-weight: 700;
  font-family: var(--f-titulo);
}

/* Ações do guia ficam em uma superfície clara, não no painel escuro de
   resultados das calculadoras. Reaproveita as classes existentes, mas
   precisa do par de cores escuro próprio para manter contraste AA. */
.container-leitura .acoes-resultado .btn-acao {
  color: var(--azul);
  border-color: var(--linha-forte);
}
.container-leitura .acoes-resultado .btn-acao:hover {
  background: var(--papel-2);
  border-color: var(--azul);
  color: var(--azul);
}

/* ---------- Quiz de saude financeira ----------
   O motor 7 cria as telas do diagnostico depois do carregamento. Estas regras
   cobrem tanto a abertura e o progresso que ja existem no HTML quanto as
   classes que o motor injeta no resultado. A abertura, a captura e os blocos
   claros usam o relevo completo do v4; o resultado evita um cartao externo
   envolvendo varios cartoes internos. */
.quiz-app { min-height: 340px; margin-block: var(--e6); }
.quiz-abertura,
.captura-email {
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
.quiz-abertura-texto { color: var(--texto-2); margin-top: 0; }
.quiz-progresso { margin-bottom: var(--e6); }
.quiz-progresso-trilho {
  height: 8px;
  background: var(--papel-3);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progresso-barra {
  height: 100%; width: 0;
  background: linear-gradient(180deg, var(--ciano-vivo) 0%, var(--ciano) 100%);
  border-radius: 999px;
  transition: width var(--tr);
}
.quiz-progresso-texto {
  margin: var(--e2) 0 0;
  font-family: var(--f-num);
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.quiz-pergunta-titulo { font-size: var(--t-lg); margin-bottom: var(--e5); }
.quiz-opcoes-lista { display: flex; flex-direction: column; gap: var(--e3); }
.quiz-opcao-btn {
  width: 100%;
  text-align: left;
  font: 400 var(--t-base)/1.45 var(--f-texto);
  color: var(--texto);
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  padding: var(--e4) var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.quiz-opcao-btn:hover,
.quiz-opcao-btn:focus-visible {
  border-color: var(--ciano-texto);
  background: var(--ciano-fraco);
  box-shadow: var(--fio-luz-claro), var(--relevo-2);
}
.quiz-revelacao {
  text-align: center;
  padding: var(--e6) var(--e5);
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
}
.quiz-revelacao-carregando { color: var(--texto-2); font-size: var(--t-md); }
.quiz-revelacao-carregando::after {
  content: "…"; display: inline-block;
  animation: quiz-piscar 1.2s ease-in-out infinite;
}
@keyframes quiz-piscar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.quiz-revelacao-rotulo,
.quiz-gargalo-rotulo,
.quiz-secundario-rotulo,
.quiz-perfil-rotulo {
  margin: 0 0 var(--e2);
  font: 600 var(--t-xs)/1.3 var(--f-num);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.quiz-revelacao-rotulo { color: var(--ciano-texto); }
.quiz-revelacao-frase {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  line-height: 1.35;
  margin-bottom: var(--e5);
}
.quiz-selo {
  background-color: var(--sup-topo-base);
  background-image: var(--sup-topo);
  color: var(--tinta-texto);
  border-radius: var(--r3);
  padding: var(--e6) var(--e5);
  text-align: center;
  margin-bottom: var(--e6);
  box-shadow: var(--fio-luz), var(--brilho-ciano);
}
.quiz-selo-rotulo { margin: 0 0 var(--e2); color: var(--ciano-vivo); }
.quiz-selo-nivel {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 700;
  margin: 0 0 var(--e3);
  color: var(--tinta-texto);
}
.quiz-selo-texto { margin: 0; color: var(--tinta-texto-2); }
.quiz-pilares { display: flex; flex-direction: column; gap: var(--e4); margin-bottom: var(--e6); }
.quiz-pilar-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e2);
}
.quiz-pilar-nome { font-weight: 600; font-size: var(--t-sm); }
.quiz-pilar-etiqueta {
  font: 600 var(--t-xs)/1 var(--f-num);
  padding: var(--e1) var(--e3);
  border-radius: 999px;
}
.quiz-pilar-trilho { height: 8px; background: var(--papel-3); border-radius: 999px; overflow: hidden; }
.quiz-pilar-preenchido { height: 100%; border-radius: 999px; transition: width 500ms ease; }
.quiz-grav-grave.quiz-pilar-preenchido { background: var(--telha); }
.quiz-grav-moderado.quiz-pilar-preenchido { background: var(--ocre); }
.quiz-grav-leve.quiz-pilar-preenchido { background: var(--verde); }
.quiz-grav-grave.quiz-pilar-etiqueta { background: var(--telha-fraco); color: var(--telha); }
.quiz-grav-moderado.quiz-pilar-etiqueta { background: var(--ocre-fraco); color: var(--ocre-texto); }
.quiz-grav-leve.quiz-pilar-etiqueta { background: var(--verde-fraco); color: var(--verde); }
.quiz-gargalo,
.quiz-secundario,
.quiz-contexto,
.quiz-perfil,
.quiz-rota,
.captura-email {
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: var(--e5);
  box-shadow: var(--fio-luz-claro), var(--relevo-1);
  margin-bottom: var(--e6);
}
.quiz-gargalo { border-left: 4px solid var(--telha); }
.quiz-gargalo-rotulo { color: var(--telha); }
.quiz-gargalo--saudavel { border-left-color: var(--verde); }
.quiz-gargalo--saudavel .quiz-gargalo-rotulo { color: var(--verde); }
.quiz-gargalo-titulo { font-size: var(--t-lg); margin-bottom: var(--e4); }
.quiz-armadilha {
  background: var(--telha-fraco);
  border-left: 3px solid var(--telha);
  padding: var(--e4);
  margin-top: var(--e4);
}
.quiz-armadilha p { margin: 0; }
.quiz-secundario { border-left: 4px solid var(--ocre); }
.quiz-secundario-rotulo { color: var(--ocre-texto); }
.quiz-secundario p:last-child,
.quiz-contexto p:last-child { margin-bottom: 0; }
.quiz-contexto { background: linear-gradient(180deg, var(--ciano-fraco) 0%, var(--papel-2) 100%); }
.quiz-perfil { background: linear-gradient(180deg, var(--roxo-fraco) 0%, var(--papel-2) 100%); }
.quiz-perfil-rotulo { color: var(--roxo); }
.quiz-perfil-nome { font-size: var(--t-lg); color: var(--azul); margin-bottom: var(--e3); }
.quiz-perfil-dupla { display: grid; gap: var(--e4); margin: var(--e5) 0; }
.quiz-perfil-item { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r2); padding: var(--e4); }
.quiz-perfil-item p:last-child { margin-bottom: 0; }
.quiz-perfil-item-rotulo { margin: 0 0 var(--e1); font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); }
/* Forca e armadilha nao sao "bom" e "ruim": sao duas faces do mesmo perfil.
   Verde/vermelho ficam reservados para direcao de numero em todo o site, entao
   a diferenca aqui vem da cor do proprio tema do quiz (roxo) contra um tom
   neutro, nao de uma cor de aprovacao/reprovacao. */
.quiz-perfil-item--forca { box-shadow: inset 3px 0 0 var(--roxo); }
.quiz-perfil-item--forca .quiz-perfil-item-rotulo { color: var(--roxo); }
.quiz-perfil-item--armadilha { box-shadow: inset 3px 0 0 var(--linha-forte); }
.quiz-perfil-ligacao { margin-bottom: 0; }
.quiz-rota { border-left: 4px solid var(--roxo); }
.quiz-rota-lista { margin: 0; padding-left: var(--e5); }
.quiz-rota-lista li { margin-bottom: var(--e3); }
.quiz-rota-lista li:last-child { margin-bottom: 0; }
.quiz-ferramentas { margin-bottom: var(--e5); }
.quiz-voltar-btn {
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; margin-bottom: var(--e4);
  font: 400 var(--t-sm)/1.4 var(--f-texto);
  color: var(--texto-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.quiz-voltar-btn:hover { color: var(--azul); }
/* No quiz, este bloco vem logo depois de #quizAcoes (Imprimir/Compartilhar/
   Refazer). Aquele bloco só tem margin-top, então sem isso os dois
   encostavam um no outro. */
#quizCaptura { margin-top: var(--e6); }
.captura-email { text-align: center; }
.captura-email h3 { margin-top: 0; }
.captura-email form { display: flex; flex-direction: column; gap: var(--e3); align-items: stretch; }
.captura-email form input[type="email"] {
  width: 100%; min-width: 0; height: var(--alt-controle);
  padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2);
  background: var(--papel); color: var(--texto); font: 400 var(--t-base)/1.4 var(--f-texto);
}
.captura-email form input[type="email"]:focus-visible { outline: none; border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(0,180,216,.22); }
.captura-aviso { margin-top: var(--e3); font-size: var(--t-sm); color: var(--telha); }
/* .texto-secundario só muda a cor, não o tamanho: sem isto, a letra miúda do
   aviso de privacidade saía do mesmo tamanho do texto principal e competia
   com ele. --t-sm é o mesmo tamanho que .aviso usa no resto do site. */
.captura-aviso-privacidade { margin-bottom: 0; font-size: var(--t-sm); }
@media (min-width: 640px) {
  .quiz-perfil-dupla { grid-template-columns: repeat(2, 1fr); }
  .captura-email form { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .captura-email form input[type="email"] { flex: 1 1 220px; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-revelacao-carregando::after,
  .quiz-opcao-btn:hover { animation: none; transform: none; }
  .quiz-opcao-btn, .quiz-pilar-preenchido { transition: none; }
}

/* Página não encontrada. */
.erro-404-codigo {
  font-family: var(--f-titulo);
  font-size: 4rem;
  color: var(--texto-2);
  margin: 0;
  line-height: 1;
}