/* Vale Financiar?, direção C "marca-texto" (aprovada por Pedro em 2026-11-03, com o botão Avançado de 2026-11-04).
   Celular primeiro, tema claro. Sem faixa colorida na borda, sem pílula, sem sombra deslocada. */
@font-face { font-family: "Nunito"; src: url("/fontes/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("/fontes/nunito-latin-ext.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --papel: #FFFDF8; --campo: #FFFFFF; --tinta: #1E1530; --suave: #5F5872; --linha: #E9E1D3; --trilho: #F3EEE4;
  --roxo: #7C3AED; --roxo-forte: #5B21B6; --rosa: #F0367A; --rosa-texto: #C0145A; --laranja: #E8890C;
  --amarelo: #FFE066; --lilas: #EDE5FD; --rosa-claro: #FFE0EB; --cinza-g: #CFC7DA; --erro: #B3261E;
  /* nomes usados por calculadoras/graficos.js */
  --s0: var(--cinza-g); --s1: var(--roxo); --s1-claro: var(--lilas); --s2: var(--laranja); --s3: var(--rosa);
  --grade: var(--linha); --tinta-2: var(--suave); --tinta-3: var(--suave); --cartao: var(--campo);

  --fonte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --calha: 16px; --largura: 1120px; --gap: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 19px/1.5 var(--fonte); font-variant-numeric: tabular-nums; }
a { color: var(--roxo-forte); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--roxo); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }
h1, h2, h3 { font-weight: 900; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.1; margin: 6px 0 20px; }
h2 { font-size: 23px; line-height: 1.25; margin: 34px 0 8px; }
h3 { font-size: 20px; margin: 0 0 8px; font-weight: 800; }
p { margin: 0 0 12px; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.largura { max-width: var(--largura); margin: 0 auto; padding: 0 var(--calha); }

/* cabeçalho, não fixo */
.topo .largura { display: flex; align-items: center; gap: 28px; min-height: 56px; }
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--roxo); text-decoration: none; font-weight: 900; font-size: 20px; white-space: nowrap; }
.marca:hover { color: var(--roxo); }
.marca svg { flex: none; }
.secoes { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; font-size: 17px; font-weight: 700; }
.secoes a { color: var(--tinta); text-decoration: none; padding: 6px 0; }
.secoes a:hover, .secoes a[aria-current] { color: var(--roxo); text-decoration: underline; }
.topo { position: relative; z-index: 20; }
/* menu do celular (2026-11-04): botão Menu no topo abre a lista das seções logo abaixo, por cima do conteúdo */
.menu-cel { display: none; margin-left: auto; }
.menu-cel summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; margin-right: -4px;
  color: var(--tinta); font-size: 17px; font-weight: 800; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.menu-cel summary::-webkit-details-marker { display: none; }
.menu-cel .m-fecha, .menu-cel[open] .m-abre { display: none; }
.menu-cel[open] .m-fecha { display: inline; }
.menu-cel[open] summary { color: var(--roxo); }
.menu-painel { position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha); box-shadow: 0 18px 32px -18px rgba(30, 21, 48, .35); }
.menu-painel ul { list-style: none; margin: 0; padding: 6px var(--calha) 14px; }
.menu-painel li + li { border-top: 1px solid var(--linha); }
.menu-painel a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; color: var(--tinta);
  text-decoration: none; font-size: 20px; font-weight: 800; }
.menu-painel a::after { content: "›"; color: var(--roxo); font-size: 26px; font-weight: 700; line-height: 1; }
.menu-painel a[aria-current] { color: var(--roxo-forte); }
.menu-painel a[aria-current]::before { content: ""; order: -1; flex: none; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--amarelo); box-shadow: 0 0 0 3px var(--roxo); }
.menu-painel a[aria-current] { justify-content: flex-start; }
.menu-painel a[aria-current]::after { margin-left: auto; }

.migalha { font-size: 16px; color: var(--suave); margin: 8px 0 6px; }
.migalha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.migalha li + li::before { content: "›"; margin-right: 8px; }
.migalha a { color: var(--suave); padding-block: 11px; margin-block: -11px; }  /* área de toque de 44 px sem mudar o desenho */
@media (max-width: 599px) { .migalha li[aria-current] { display: none; } }  /* no celular o título já vem logo abaixo, no h1 */

main { padding-bottom: 0; }  /* o rodapé já traz margin-top; os dois somados davam 134 px (2026-11-05) */

/* ---------------------------------------------------------------- calculadora
   Ordem fixa, de cima para baixo: o que a pessoa escolhe, depois a resposta. Ninguém rola para baixo para mudar e para cima para ler. */
.calculadora { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.calculadora > * { min-width: 0; }
.campo label, .rotulo { display: block; font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.caixa { display: flex; align-items: center; height: 68px; padding: 0 16px; border: 3px solid var(--roxo); border-radius: 16px; background: var(--campo); }
.caixa:focus-within { border-color: var(--roxo-forte); box-shadow: 0 0 0 4px var(--amarelo); }
.caixa .pre, .caixa .pos { font-size: 22px; font-weight: 700; color: var(--suave); }
.caixa .pre { margin-right: 8px; }
.caixa .pos { margin-left: 8px; }
.caixa input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--tinta); font: 900 34px var(--fonte); font-variant-numeric: tabular-nums; }
.caixa input[type=date] { font-size: 26px; font-weight: 800; }
.campo .erro { color: var(--erro); font-size: 17px; font-weight: 700; margin: 8px 0 0; }
.campo .erro:empty { margin: 0; }
.campo.invalido .caixa { border-color: var(--erro); }
.calculadora.esmaecida .resultado { opacity: .45; }

.escolha { margin-top: 20px; }
.botoes { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--gap); }
.botoes button, button.avancado { height: 52px; margin: 0; padding: 0 4px; border-radius: 14px; border: 2px solid var(--linha); background: var(--campo); color: var(--tinta); font: 800 18px var(--fonte); cursor: pointer; white-space: nowrap; }
.botoes button:hover, button.avancado:hover { border-color: var(--roxo); }
.botoes button[aria-pressed="true"] { background: var(--amarelo); border-color: var(--tinta); }

/* Avançado: embaixo dos dados, para quem quer pôr outros números. Fechado, a conta usa o padrão. */
button.avancado { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 20px; padding: 0 16px; color: var(--roxo-forte); }
button.avancado::after { content: ""; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
button.avancado[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
button.avancado .mudou { font-size: 15px; font-weight: 800; color: var(--suave); margin-left: auto; margin-right: 14px; }
.aj { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px 12px; align-items: center; margin-top: 14px; font-size: 17px; }
.aj[hidden] { display: none; }
.aj label { font-weight: 700; line-height: 1.3; }
.mini { display: flex; align-items: center; height: 48px; padding: 0 12px; border: 2px solid var(--linha); border-radius: 12px; background: var(--campo); }
.mini:focus-within { border-color: var(--roxo-forte); box-shadow: 0 0 0 3px var(--amarelo); }
.mini input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--tinta); text-align: right; font: 800 18px var(--fonte); font-variant-numeric: tabular-nums; }
.mini small { color: var(--suave); padding-left: 6px; white-space: nowrap; font-size: 16px; }
.mini small.pre { padding: 0 6px 0 0; }
.padrao { grid-column: 1 / -1; justify-self: start; height: 44px; padding: 0 14px; border: 2px solid var(--linha); border-radius: 12px; background: transparent; color: var(--roxo-forte); font: 800 16px var(--fonte); cursor: pointer; }
.padrao:hover { border-color: var(--roxo); }
.padrao[hidden] { display: none; }

/* resposta */
.resultado { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--linha); scroll-margin-top: 12px; }
p.resposta { font-size: 24px; line-height: 1.4; font-weight: 700; margin: 0; text-wrap: pretty; }
p.resposta b, p.resposta strong { background: var(--amarelo); color: var(--tinta); font-weight: 900; padding: 0; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
p.nota { color: var(--suave); font-size: 17px; margin: 10px 0 0; }
p.nota:empty { display: none; }
p.nota b { color: var(--tinta); }

.total { margin: 20px 0 0; }
.total[hidden] { display: none; }
.total p { margin: 0; font-size: 19px; }
.total .valor { display: block; font-size: clamp(44px, 14vw, 60px); line-height: 1.05; font-weight: 900; color: var(--roxo); letter-spacing: -0.01em; margin: 2px 0 6px; white-space: nowrap; }
.total .valor.longo { font-size: clamp(32px, 11.5vw, 44px); }
.total .a-mais { font-size: 20px; font-weight: 700; }
.total .a-mais b { color: var(--rosa-texto); font-weight: 900; white-space: nowrap; }
.total .a-mais.neutro b { color: var(--roxo-forte); }

.grafico { margin-top: 24px; min-height: 40px; }
.grafico:empty { display: none; }
p.premissas { color: var(--suave); font-size: 16px; margin: 18px 0 0; }
p.premissas:empty { display: none; }
p.dado { color: var(--suave); font-size: 16px; margin: 6px 0 0; }

/* leitura abaixo do palco */
.leitura { margin-top: 16px; }
.col-e > *, .col-d > * { max-width: 68ch; }
/* no celular as duas colunas somem e os blocos voltam à ordem de leitura, seja qual for a coluna em que o computador
   os põe (conteudo/colunas.json). Em flex as margens não se fundem: a última margem de cada bloco sai, e o vão fica o
   do título seguinte, como no fluxo normal */
@media (max-width: 959px) {
  .leitura { display: flex; flex-direction: column; margin-top: 34px; }
  .leitura .col-e > .texto > p:first-child { margin-top: 0; }
  .leitura .lado > .tabela-bloco:first-child { margin-top: 12px; }
  .leitura > .col-e, .leitura > .col-d { display: contents; }
  .leitura .texto { order: 1; }
  .leitura .mais-q { order: 2; }
  .leitura .lado { order: 3; }
  .leitura .pode-bloco { order: 4; }
  .leitura .lado-q { order: 5; }
  .leitura .fim { order: 6; }
  .leitura .como-bloco { order: 7; }
  .leitura .segue-bloco { order: 8; }
  .leitura :is(.col-e, .col-d) > * > :is(:last-child, :has(+ [hidden]:last-child)) { margin-bottom: 0; }
}
.leitura .texto > p:first-child { margin-top: 34px; }
.lado h2 { margin-top: 34px; }
.tabela-bloco { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { table.tabela .so-largo { display: none; } }
table.tabela caption { text-align: left; color: var(--suave); font-size: 15px; caption-side: bottom; padding-top: 8px; }
table.tabela th, table.tabela td { padding: 9px 8px; border-bottom: 1px solid var(--linha); text-align: right; vertical-align: top; }
table.tabela th:first-child, table.tabela td:first-child { text-align: left; padding-left: 0; }
table.tabela th:last-child, table.tabela td:last-child { padding-right: 0; }
table.tabela thead th { color: var(--suave); font-weight: 800; border-bottom: 2px solid var(--linha); }
table.tabela tr.destaque td { font-weight: 900; }
/* marca-texto na linha inteira, de borda a borda da coluna */
table.tabela tr.destaque td { background: color-mix(in srgb, var(--amarelo) 60%, transparent); }
@media (max-width: 400px) { table.tabela { font-size: 15px; } table.tabela th, table.tabela td { padding: 8px 4px; } table.tabela thead th { font-size: 14px; } }
.lado p { font-size: 17px; color: var(--suave); margin-top: 12px; }
.continuar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.continuar a { font-weight: 700; }

/* ---------------------------------------------------------------- gráficos (calculadoras/graficos.js) */
.g-titulo { font-size: 20px; line-height: 1.3; margin: 0 0 12px; font-weight: 800; }
.g-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; color: var(--suave); margin-bottom: 10px; }
.g-leg i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.g-leg-val { margin-top: 12px; }
.g-leg-val b { color: var(--tinta); }
/* lista de legenda com valor, alinhada em três colunas fixas (quadrado, nome, valor) */
.g-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.g-lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 18px; }
.g-lista li:first-child { border-top: 0; }
.g-lista li i { width: 16px; height: 16px; border-radius: 4px; }
.g-lista li b { font-weight: 800; text-align: right; white-space: nowrap; }
.g-lista li i.g-vazio { background: repeating-linear-gradient(135deg, var(--trilho) 0 3px, var(--papel) 3px 5px); border: 1px dashed var(--suave); }
/* grade de dinheiro: cada quadradinho vale a mesma quantia */
.g-grade { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 4px; }
.g-grade i { aspect-ratio: 1; border-radius: 4px; }
.g-barras { display: grid; gap: 14px; }
.g-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.g-linha.g-apagada { opacity: .55; }
.g-nome { font-size: 17px; line-height: 1.25; font-weight: 700; }
.g-nome small { display: block; color: var(--suave); font-size: 15px; font-weight: 400; }
.g-dest .g-nome { font-weight: 900; }
.g-trilho { display: flex; align-items: center; gap: 0 10px; min-width: 0; }
.g-barra { display: flex; flex: none; gap: 2px; height: 28px; min-width: 4px; transition: width .28s ease; }
.g-barra span { display: block; height: 100%; min-width: 2px; }
.g-barra span:first-child { border-radius: 6px 0 0 6px; }
.g-barra span:last-child { border-radius: 0 6px 6px 0; }
.g-barra span:only-child { border-radius: 6px; }
.g-valor { font-size: 17px; font-weight: 800; white-space: nowrap; }
.g-rot-longo .g-trilho { flex-wrap: wrap; gap: 4px 10px; }
.g-rot-longo .g-valor { flex-basis: 100%; }
.g-aviso { margin: 12px 0 0; font-size: 16px; color: var(--suave); }
.g-parte { position: relative; padding-top: 26px; }
.g-todo { display: flex; gap: 2px; height: 44px; }
.g-todo span { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 3px; color: #fff; font-size: 16px; font-weight: 900; }
.g-todo span:first-child { border-radius: 8px 0 0 8px; }
.g-todo span:last-child { border-radius: 0 8px 8px 0; }
.g-todo span:only-child { border-radius: 8px; }
.g-todo span em { font-style: normal; }
/* sobre o cinza (s0) e o laranja (s2) o branco fica sem contraste; ali a porcentagem sai em tinta */
.g-todo span em.g-escuro { color: var(--tinta); }
.g-todo .g-vazio { background: repeating-linear-gradient(135deg, var(--trilho) 0 6px, var(--papel) 6px 10px); color: var(--suave); border: 1px dashed var(--suave); }
.g-leg .g-vazio { background: repeating-linear-gradient(135deg, var(--trilho) 0 3px, var(--papel) 3px 5px); border: 1px dashed var(--suave); }
.g-marca { position: absolute; top: 22px; bottom: 0; width: 2px; margin-left: -1px; background: var(--tinta); }
.g-marca span { position: absolute; top: -22px; left: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.g-marca.g-esq span { left: auto; right: 4px; }
svg text { font-family: inherit; }
.g-t1 { font-size: 16px; font-weight: 900; fill: var(--tinta); }
.g-t2 { font-size: 14px; font-weight: 700; fill: var(--suave); }
.g-t3 { font-size: 14px; fill: var(--suave); }
.g-t-inv { font-size: 14px; font-weight: 900; fill: #fff; }
.g-rel { position: relative; }
.grafico svg { display: block; max-width: 100%; }
.g-dica { position: absolute; background: var(--campo); border: 2px solid var(--linha); border-radius: 12px; padding: 8px 10px; font-size: 15px; pointer-events: none; display: grid; gap: 2px; min-width: 170px; }
.g-dica i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.g-dica[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .g-barra, button.avancado::after { transition: none; } }

/* ---------------------------------------------------------------- seções e página inicial */
.abertura { max-width: 62ch; color: var(--suave); font-size: 20px; margin: -8px 0 28px; }
.perguntas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.perguntas li { padding: 16px 0; border-top: 2px solid var(--linha); }
.perguntas li a { font-size: 21px; font-weight: 900; }
.perguntas li p { color: var(--suave); font-size: 17px; margin: 4px 0 0; max-width: 60ch; }
.perguntas li p b { color: var(--tinta); font-weight: 800; }
/* blocos da página inicial: o que é crédito, quanto custa, endividamento, novidades (o resto no fim, em "página inicial") */
.i-bloco { margin-top: 48px; padding-top: 8px; border-top: 2px solid var(--linha); }
.i-bloco > h2, .i-bloco .texto > h2 { font-size: 28px; margin: 24px 0 12px; }
.i-tipos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.i-tipos li { background: var(--lilas); border-radius: 20px; padding: 18px; }
.i-tipos li:last-child { background: var(--rosa-claro); }
.i-tipos h3 { font-size: 21px; font-weight: 900; margin: 0 0 6px; }
.i-tipos p { margin: 0 0 8px; font-size: 18px; }
.i-tipos .ex { margin: 0; font-size: 16px; font-weight: 800; color: var(--suave); }
.custo { margin: 8px 0 20px; }
.c-leg { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0 0 10px; padding: 0; font-size: 16px; color: var(--suave); }
.c-leg li { display: flex; align-items: center; gap: 8px; }
.c-leg i { width: 16px; height: 16px; border-radius: 4px; }
.c-lista { list-style: none; margin: 0; padding: 0; }
.c-lista li { padding: 12px 0; border-top: 1px solid var(--linha); }
.c-nome { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 18px; }
.c-nome a { font-weight: 800; color: var(--tinta); }
.c-nome span { color: var(--suave); font-size: 16px; white-space: nowrap; padding-top: 2px; }
.c-trilho { height: 28px; }
.c-barra { display: flex; gap: 2px; height: 100%; }
.c-barra i { display: block; min-width: 4px; }
.c-barra i:first-child { border-radius: 4px 0 0 4px; }
.c-barra i:last-child { border-radius: 0 4px 4px 0; }
i.c-pego { background: var(--cinza-g); }
i.c-juros { background: var(--roxo); }
.c-total { margin: 6px 0 0; font-size: 17px; color: var(--suave); }
.c-total b { color: var(--tinta); font-weight: 900; background: var(--amarelo); border-radius: 3px; }
.custo figcaption { margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--tinta); font-size: 15px; color: var(--suave); }
.i-links { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.i-links a { font-weight: 800; }
.i-links a::after { content: "\00a0→"; }
.i-novidades ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.i-novidades li { padding-top: 14px; border-top: 1px solid var(--linha); }
.i-novidades time { display: block; font-size: 15px; font-weight: 800; color: var(--suave); }
.i-novidades h3 { margin: 4px 0 6px; font-size: 21px; }
.i-novidades p { margin: 0; color: var(--suave); font-size: 17px; }
@media (min-width: 960px) {
  .i-credito { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
  .i-tipos { margin-top: 24px; }
  .i-custo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "titulo titulo" "barras abre" "barras depois"; grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
  .i-custo > .texto { display: contents; }
  .i-custo > .texto > h2 { grid-area: titulo; }
  .i-custo > .texto > p { grid-area: abre; margin-top: 0; }
  .i-custo > .custo { grid-area: barras; margin-top: 0; }
  .i-custo > .depois { grid-area: depois; }
  .i-novidades ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
}

/* topo das seções (aprovado por Pedro em 2026-11-04): título, ilustração, a conta mais procurada, 3 números, grupos */
.s-topo { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-topo h1 { margin-bottom: 12px; }
.s-topo .abertura { margin: 0 0 20px; }
.s-img { margin: 0 0 24px; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--papel); overflow: hidden; position: relative; }
.s-img picture, .s-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.s-comece { display: block; text-decoration: none; color: var(--tinta); background: var(--campo); border: 3px solid var(--roxo); border-radius: 20px; padding: 18px 18px 16px; }
.s-comece:hover { color: var(--tinta); box-shadow: 0 0 0 4px var(--lilas); }
.s-comece .rot { display: block; font-size: 15px; font-weight: 800; color: var(--suave); margin: 0 0 4px; }
.s-comece .tit { display: block; font-size: 24px; font-weight: 900; line-height: 1.2; color: var(--roxo-forte); margin: 0 0 8px; }
.s-comece .fr { display: block; font-size: 18px; margin: 0 0 12px; }
.s-comece .fr b, .s-lista p b { background: var(--amarelo); color: var(--tinta); font-weight: 900; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s-comece .ir { font-weight: 900; color: var(--roxo-forte); font-size: 18px; }
.s-comece .ir::after { content: " →"; }
.s-fatos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.s-fatos li { padding: 14px 0; border-top: 2px solid var(--linha); }
.s-fatos .n { display: block; font-size: 34px; font-weight: 900; line-height: 1.1; color: var(--roxo); }
.s-fatos p { margin: 4px 0 0; font-size: 17px; color: var(--suave); }
.s-grupo h2 { margin: 36px 0 4px; }
.s-grupo .sub { color: var(--suave); font-size: 17px; margin: 0 0 8px; }
.s-lista { column-gap: 48px; }
.outra-secao { margin-top: 24px; }
.s-tambem { margin-top: 40px; padding: 18px; background: var(--lilas); border-radius: 20px; }
.s-tambem h2 { margin: 0 0 8px; font-size: 21px; }
.s-tambem ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.s-tambem a { font-weight: 800; }
@media (min-width: 960px) {
  .s-topo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "texto img" "comece img"; grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
  .s-topo .texto { grid-area: texto; }
  .s-topo .s-comece { grid-area: comece; }
  .s-img { grid-area: img; aspect-ratio: auto; align-self: stretch; min-height: 340px; margin: 6px 0 0; }
  .s-img picture { position: absolute; inset: 0; }
  .s-fatos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; margin-top: 40px; }
  .s-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* grupo ímpar: a última conta ocupa a linha toda, sem meia linha vazia ao lado */
  .s-lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .s-tambem { display: flex; gap: 32px; align-items: baseline; padding: 20px 24px; }
  .s-tambem h2 { flex: none; margin: 0; }
  .s-tambem ul { display: flex; flex-wrap: wrap; gap: 6px 28px; list-style: none; padding: 0; }
}

/* institucionais */
.prosa { max-width: 68ch; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: 6px; }
.metodo { margin-top: 32px; padding-top: 8px; border-top: 2px solid var(--linha); scroll-margin-top: 16px; }
.metodo h3 { margin-top: 20px; }
.metodo p { margin-bottom: 8px; }
.metodo .rotulo { color: var(--suave); font-size: 17px; font-weight: 700; }

/* rodapé leve (Pedro, 2026-11-04): marca, seções numa linha, institucionais */
.rodape { border-top: 2px solid var(--linha); margin-top: 56px; padding: 28px 0 36px; font-size: 17px; color: var(--suave); }
.r-topo, .r-base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.r-topo { padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
.r-secoes { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.r-secoes a { color: var(--tinta); font-weight: 800; text-decoration: none; }
.r-secoes a:hover { color: var(--roxo); text-decoration: underline; }
.r-base { padding-top: 18px; }
.independencia { margin: 0; }
.irma { margin: 0; }
.irma a { color: var(--suave); }
.institucionais { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.institucionais a { color: var(--suave); }
@media (min-width: 960px) { .r-topo { justify-content: space-between; } }

/* Espaço de anúncio. Escondido até anuncios.js montar o bloco. Enquanto o Google não responde ele tem largura e
   altura zero (o bloco precisa de largura para carregar), e só reserva a altura quando o anúncio veio de fato. Sem
   anúncio (site ainda não aprovado, bloco sem venda) o espaço some, em vez de deixar um vão em branco no texto. */
.anuncio { margin: 32px 0; min-height: 280px; }
.anuncio[hidden] { display: none; }
/* o AdSense grava height no ins antes de responder; sem height 0 o vão de 280 a 390 px abria e fechava (CLS, 2026-11-05) */
.anuncio.esperando { margin: 0; min-height: 0; height: 0; overflow: hidden; }
.anuncio:has(ins[data-ad-status="unfilled"]) { display: none; }

@media (max-width: 959px) {
  .secoes { display: none; }
  .menu-cel { display: block; }
}
@media (min-width: 960px) {
  :root { --calha: 40px; }
  h1 { font-size: 46px; margin-bottom: 28px; }
  .migalha { margin-top: 16px; }
  /* duas colunas: escolhas à esquerda, resposta à direita, as duas começando na mesma linha */
  .calculadora { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; }
  .resultado { margin-top: 0; padding-top: 0; border-top: 0; }
  p.resposta { font-size: 30px; }
  .total .valor { font-size: 88px; }
  .total .valor.longo { font-size: 62px; }
  .g-grade { --cols: 20; }
  .g-linha { grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); gap: 12px; align-items: center; }
  /* duas colunas que empilham cada uma os seus blocos. Na página de conta, .conta junta a calculadora: os campos e o
     texto (col-e) à esquerda, a resposta e o resto (col-d) à direita. O texto começa logo abaixo dos campos e a
     coluna da direita logo abaixo da resposta. Quando os campos ficam mais altos que a resposta (lista de dívidas,
     Avançado aberto), a direita sobe para logo abaixo da resposta. pagina.js e quitacao-pagina.js medem os dois e
     marcam .conta com data-alto; sem script vale o palpite pelo tipo de página. */
  .conta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start;
    grid-template-areas: "pedido res" "esq res" "esq dir"; grid-template-rows: auto auto 1fr; }
  .conta:not([data-alto]):has(.calculadora[data-lista]), .conta[data-alto="pedido"] { grid-template-areas: "pedido res" "pedido dir" "esq dir"; }
  .conta > .calculadora, .conta > .leitura { display: contents; }
  .conta .calculadora > .pedido { grid-area: pedido; }
  .conta .calculadora > .resultado { grid-area: res; }
  .conta .col-e { grid-area: esq; }
  .conta .col-d { grid-area: dir; }
  .leitura.guia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start; }
  .perguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
}

/* plano de quitação, calculadora de lista (section.calculadora[data-lista]) */
.q-previa { grid-column: 1 / -1; margin: 0 0 24px; padding: 12px 14px; border-radius: 12px; background: var(--lilas); font-size: 19px; line-height: 1.4; }
.q-previa b { font-weight: 900; }
.q-previa a { white-space: nowrap; font-weight: 800; }
@media (min-width: 960px) { .q-previa { display: none; } }
.q-divida { padding: 18px 0 20px; border-top: 2px solid var(--linha); }
.q-divida:first-child { border-top: 0; padding-top: 0; }
.q-topo { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 0 0 8px; }
.q-topo .rotulo { margin: 0; font-size: 20px; font-weight: 900; }
.q-tirar { height: 40px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--linha); background: var(--campo); color: var(--rosa-texto); font: 800 16px var(--fonte); cursor: pointer; }
.q-tirar:hover { border-color: var(--rosa-texto); }
.q-divida .campo { margin-top: 14px; }
.q-mais { display: block; width: 100%; height: 56px; margin: 0 0 28px; border-radius: 14px; border: 2px dashed var(--roxo); background: var(--campo); color: var(--roxo-forte); font: 900 19px var(--fonte); cursor: pointer; }
.q-mais[hidden] { display: none; }
.aj.q-aj { display: block; }
.aj.q-aj[hidden] { display: none; }
.q-dica { color: var(--suave); font-size: 17px; margin: 0; }
.q-av { padding-top: 14px; }
.q-av .rotulo { font-weight: 900; margin-bottom: 6px; }
.q-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.q-par label { display: block; color: var(--suave); font-size: 16px; }
.q-par .mini { margin-top: 6px; }
.total .valor.rosa { color: var(--rosa-texto); }
.q-aviso { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--rosa-claro); font-size: 18px; }
.q-aviso[hidden], .q-tempo[hidden], .q-porque[hidden], .q-compara[hidden] { display: none; }
.q-leg { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 16px; color: var(--suave); }
.q-leg li { display: flex; align-items: center; gap: 8px; }
.q-leg i { width: 16px; height: 16px; border-radius: 4px; }
i.q-so { background: var(--lilas); }
i.q-foco { background: var(--roxo); }
.q-barras { list-style: none; margin: 0; padding: 0; }
.q-barras li { padding: 8px 0 10px; border-top: 1px solid var(--linha); }
.q-barras li:first-child { border-top: 0; }
.q-nome { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; margin: 0 0 6px; }
.q-nome b { font-weight: 800; }
.q-nome span { color: var(--suave); font-size: 16px; padding-top: 2px; white-space: nowrap; }
.q-trilho { position: relative; height: 30px; }
.q-barra { position: absolute; left: 0; top: 0; bottom: 0; display: flex; border-radius: 7px; overflow: hidden; min-width: 6px; }
.q-barra .q-foco { flex: 1; }
.q-mes { position: absolute; top: 0; left: 0; line-height: 30px; font-size: 16px; font-weight: 800; white-space: nowrap; }
.q-mes.dentro { top: 4px; line-height: 22px; padding: 0 8px; border-radius: 5px; background: var(--campo); color: var(--tinta); }
.q-eixo { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--tinta); font-size: 15px; color: var(--suave); }
.q-porque, .q-compara { font-size: 19px; margin: 18px 0 0; }
.q-porque b, .q-compara b { font-weight: 900; }
.q-compara b { color: var(--rosa-texto); white-space: nowrap; }
.q-divida .botoes button { font-size: 17px; }
@media (max-width: 400px) { .q-divida .botoes button { font-size: 15px; } }
@media (max-width: 340px) { .q-divida .botoes button { font-size: 14px; } }

/* páginas de atraso: linha do tempo numerada (sem conector nem bolinha) e o que o banco pode e não pode */
.atraso-bloco h2 { margin-top: 34px; }
.etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.etapas li { counter-increment: etapa; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--linha); }
.etapas li:first-child { border-top: 0; padding-top: 4px; }
.etapas li::before { content: counter(etapa); grid-column: 1; grid-row: 1 / span 3; font: 900 34px/1.05 var(--fonte); color: var(--roxo); }
.etapas li > p { grid-column: 2; margin: 0 0 6px; }
.etapas li > p:last-child { margin-bottom: 0; }
.etapas .quando { font-weight: 900; font-size: 20px; line-height: 1.3; }
.etapas .quando mark { background: none; color: var(--tinta); box-shadow: inset 0 -0.5em 0 var(--amarelo); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.etapas .voce span { display: block; font-size: 15px; font-weight: 900; color: var(--roxo); }
.pode { display: grid; row-gap: 8px; column-gap: 32px; }
.pode h3 { margin: 8px 0 8px; }
.pode ul { list-style: none; margin: 0; padding: 0; }
.pode li { position: relative; padding: 0 0 12px 30px; }
.pode li::before { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 20px; line-height: 1.4; }
.pode .sim li::before { content: "✓"; color: var(--roxo); }
.pode .nao li::before { content: "✕"; color: var(--rosa-texto); }
@media (min-width: 700px) { .pode { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lado .atraso-bloco p { font-size: inherit; color: var(--tinta); margin-top: 0; }
.lado .atraso-bloco .voce { color: var(--suave); }
.total + p.nota { margin-top: 14px; }
.total > p:first-child { text-wrap: balance; }

/* ---------------------------------------------------------------- página inicial (tools/inicial.py)
   Abertura, atalhos por assunto com a ilustração pequena e os blocos de dados. Escolhida por Pedro em 2026-11-04; três passos
   tirados, endividamento em painel e índice em cartões em 2026-11-06. */
.inicial mark { background: none; color: inherit; box-shadow: inset 0 -0.38em 0 var(--amarelo); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.inicial h1 { margin-top: 28px; }
.h-sub { color: var(--suave); font-size: 18px; margin: -4px 0 20px; }
/* abertura */
.ha-topo { display: grid; grid-template-columns: minmax(0, 1fr); }
.ha-topo .abertura { margin: 0 0 20px; }
.ha-hero .s-img { margin: 0; }
/* No celular, os atalhos "Escolha o financiamento" sobem para logo depois da abertura, antes da imagem: antes a primeira coisa tocável só aparecia depois de 1,4 tela (revisão de UI, 2026-11-04). No computador eles
   já aparecem na primeira tela e a ordem do HTML fica como está. */
@media (max-width: 959px) {
  .inicial { display: flex; flex-direction: column; }
  .inicial > .ha-topo { display: contents; }
  .inicial > * { order: 4; }
  .inicial > .ha-topo > .texto { order: 0; }
  .inicial > .hm-atalhos { order: 1; margin-top: 8px; }
  .inicial > .ha-topo > .ha-hero { order: 2; margin-top: 40px; }
}
/* atalhos por assunto */
.hb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 24px 0 0; }
.hb-chips a { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 12px 6px 6px; border: 2px solid var(--linha); border-radius: 14px; background: var(--campo); color: var(--tinta); font-weight: 800; text-decoration: none; }
.hb-chips a:hover { border-color: var(--roxo); color: var(--roxo-forte); }
.hb-chip-img { width: 56px; height: 40px; flex: none; object-fit: contain; border-radius: 8px; mix-blend-mode: multiply; }
.hb-chips span { font-size: 17px; line-height: 1.2; }
.hb-chips .hb-chip-n { flex: none; display: grid; place-items: center; width: 56px; height: 40px; border-radius: 8px; background: var(--amarelo); font-size: 22px; font-weight: 900; color: var(--tinta); }
.hm-comece-t { margin: 24px 0 0; font-weight: 900; font-size: 19px; }
.hm-comece { grid-template-columns: minmax(0, 1fr); }
/* todas as contas: um cartão por assunto (foto, nome, quantas contas) e uma conta por linha, em colunas que se equilibram */
.h-ind { display: flex; flex-direction: column; column-gap: 16px; }
.h-ind-sec { break-inside: avoid; display: flow-root; margin: 0 0 16px; padding: 6px 18px 6px; background: var(--campo); border: 2px solid var(--linha); border-radius: 20px; }
.h-ind-sec h3 { margin: 0; }
.h-ind-sec h3 a { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0 12px;
  border-bottom: 2px solid var(--linha); color: var(--tinta); text-decoration: none; }
.h-ind-sec h3 img { width: 64px; height: 44px; object-fit: contain; border-radius: 8px; mix-blend-mode: multiply; }
.h-ind-sec h3 .nome { font-size: 21px; font-weight: 900; line-height: 1.15; }
.h-ind-sec h3 a:hover .nome { color: var(--roxo); }
.h-ind-sec ul { list-style: none; margin: 0; padding: 0; }
.h-ind-sec li + li { border-top: 1px solid var(--linha); }
.h-ind-sec li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 9px 0;
  color: var(--tinta); font-size: 17px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.h-ind-sec li a::after { content: "›"; flex: none; color: var(--roxo); font-size: 24px; font-weight: 800; line-height: 1; }
.h-ind-sec li a:hover { color: var(--roxo-forte); text-decoration: underline; }
/* endividamento: painel roxo com os três números grandes, a barra de cada um e as três contas por onde começar */
.i-painel { background: var(--roxo-forte); color: #fff; border-radius: 24px; padding: 24px 20px 20px; }
.i-painel h2 { margin: 0; color: #fff; font-size: 26px; }
.i-fatos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.i-fatos li { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.i-fatos .n { display: block; font: 900 64px/1 var(--fonte); color: var(--amarelo); letter-spacing: -.01em; }
.i-fato-barra { display: block; height: 12px; margin: 14px 0; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.i-fato-barra i { display: block; height: 100%; border-radius: 6px; background: var(--amarelo); }
.i-fatos .t { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.3; }
.i-fatos .d { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .8); }
.i-painel .i-saida { margin: 20px 0 14px; font-size: 19px; }
.i-saida-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.i-saida-l a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; min-height: 64px; padding: 12px 16px;
  background: var(--campo); border-radius: 16px; color: var(--tinta); font-size: 18px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.i-saida-l a::after { content: "→"; flex: none; color: var(--roxo); font-weight: 900; }
.i-saida-l a:hover { color: var(--roxo-forte); box-shadow: 0 0 0 4px var(--amarelo); }
.i-painel :focus-visible { outline-color: var(--amarelo); }
/* o mesmo painel nas seções (2026-11-06): número, unidade, frase e detalhe, sem barra e sem título */
.s-painel { margin-top: 32px; padding-top: 4px; padding-bottom: 4px; }
.s-painel .i-fatos { margin-top: 0; }
.s-painel .i-fatos li:last-child { border-bottom: 0; }
.s-painel .i-fatos .n { font-size: 56px; }
.s-painel .i-fatos .n small { font-size: .45em; margin-right: .15em; }
.i-fatos .u { display: block; margin: 4px 0 12px; font-size: 20px; font-weight: 900; line-height: 1.25; color: var(--amarelo); }
.s-painel .i-fatos .t { font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .88); }
.s-painel .i-fatos .t b { font-weight: 800; color: #fff; }
/* programas do governo */
.h-prog-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h-prog-l > li { background: var(--campo); border: 2px solid var(--linha); border-radius: 20px; padding: 18px 18px 16px; display: flex; flex-direction: column; }
.h-prog-l h3 { font-size: 21px; font-weight: 900; margin: 0 0 6px; }
.h-prog-l p { font-size: 17px; margin: 0 0 10px; }
.h-prog-l .i-links { margin-top: auto; gap: 6px; font-size: 17px; }
@media (max-width: 599px) {
  .hm-atalhos .hb-chips a { gap: 8px; padding-right: 8px; }
  .hm-atalhos .hb-chip-img, .hm-atalhos .hb-chips .hb-chip-n { width: 44px; height: 32px; }
  .hm-atalhos .hb-chips span { font-size: 16px; }
  .hm-atalhos .hb-chips .hb-chip-n { font-size: 18px; }
}
@media (min-width: 600px) {
  .hb-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-ind { display: block; columns: 2; }
  .h-ind-sec.h-q2 { break-before: column; }
  .i-painel { padding: 32px 32px 32px; }
  .i-fatos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 24px; }
  .i-fatos li { padding: 0; border: 0; }
  .i-fatos .n { font-size: 72px; }
  /* seções: uma linha por número (número e unidade à esquerda, frase ao lado), sem o vão das três colunas
     ("tem mais espaço em branco do que informação", Pedro, 2026-11-06) */
  .s-painel { padding: 8px 32px; margin-top: 40px; }
  .s-painel .i-fatos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .s-painel .i-fatos li { grid-row: auto; display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: none;
    column-gap: 32px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .s-painel .i-fatos li:last-child { border-bottom: 0; }
  .s-painel .i-fatos .n { font-size: 48px; line-height: .92; }
  .s-painel .i-fatos .u { margin: 4px 0 0; font-size: 17px; }
  .s-painel .i-fatos .t { margin: 0; }
  .i-painel .i-saida { margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); max-width: none; }
  .h-prog-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .hm-comece { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 960px) {
  .inicial h1 { margin-top: 40px; }
  .ha-topo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
  .ha-hero .s-img { aspect-ratio: 1000 / 952; max-width: 400px; margin-left: auto; min-height: 0; }
  .ha-hero .s-img picture { position: static; }
  .hb-chips { grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 32px; }
  .hb-chips a { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px 12px; text-align: center; min-height: 0; }
  .hb-chip-img, .hb-chips .hb-chip-n { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .hb-chips .hb-chip-n { font-size: 30px; }
  .hm-comece { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 10px; }
  .h-ind { columns: 3; }
  .h-ind-sec.h-q2 { break-before: auto; }
  .h-ind-sec.h-q3 { break-before: column; }
  .i-painel { padding: 44px 48px 48px; }
  .i-painel h2 { font-size: 30px; }
  .i-fatos { column-gap: 48px; }
  .i-saida-l { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .i-fatos .n { font-size: 88px; }
  .s-painel { padding: 8px 40px; }
  .s-painel .i-fatos li { grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
  .s-painel .i-fatos .n { font-size: 56px; }
  .i-painel .i-saida { font-size: 20px; }
  .h-prog-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* "Esta página ajudou?" no fim da página, antes do rodapé. Botões quadrados no mesmo desenho dos botões da conta. */
.avaliacao { margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--linha); }
.avaliacao h2 { margin: 0 0 14px; font-size: 21px; }
.av-botoes { display: flex; gap: 12px; }
.av-botoes button { display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0; border-radius: 14px; border: 2px solid var(--linha); background: var(--campo); color: var(--roxo-forte); cursor: pointer; }
.av-botoes button:hover:not(:disabled) { border-color: var(--roxo); }
.av-botoes button[aria-pressed="true"] { background: var(--amarelo); border-color: var(--tinta); color: var(--tinta); }
.av-botoes button:disabled { cursor: default; }
.av-botoes button:disabled:not([aria-pressed="true"]) { opacity: .45; }
.av-nao svg { transform: rotate(180deg); }
.av-obrigado { margin: 12px 0 0; font-weight: 700; }
.av-obrigado:empty { display: none; }
.av-obrigado:focus { outline: 0; }
.av-falta { margin-top: 16px; max-width: 560px; }
.av-falta label { display: block; font-weight: 700; margin-bottom: 8px; }
.av-linha { display: flex; gap: 8px; }
.av-linha input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 2px solid var(--linha); border-radius: 14px; background: var(--campo); color: var(--tinta); font: 400 18px var(--fonte); outline: 0; }
.av-linha input:focus { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--lilas); }
.av-linha button { height: 52px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--roxo-forte); background: var(--roxo-forte); color: #fff; font: 800 18px var(--fonte); cursor: pointer; }
.av-linha button:hover { background: var(--roxo); border-color: var(--roxo); }
.av-dica { margin: 8px 0 0; font-size: 16px; color: var(--suave); }

/* ---------------------------------------------------------------- matéria (conteudo/materias, foto do Nano Banana no topo)
   Celular: título, abertura, foto e o texto. Computador: título e abertura à esquerda, foto à direita; abaixo, o texto à
   esquerda e as contas e "Para continuar" à direita. */
.m-topo { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-topo h1 { margin-bottom: 14px; }
.m-abre { font-size: 21px; line-height: 1.45; font-weight: 700; margin: 0 0 12px; max-width: 62ch; }
.m-abre2 { margin: 0 0 12px; max-width: 62ch; }
.m-foto { margin: 12px 0 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--papel); }
.m-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-corpo :is(.texto, .mais-q) ul { padding-left: 1.2em; }
.m-corpo :is(.texto, .mais-q) li { margin-bottom: 6px; }
.m-corpo .tabela-bloco { margin: 18px 0 20px; }
.m-contas .s-comece { margin-top: 12px; }
.m-contas .s-comece .tit { font-size: 21px; }
.m-contas .s-comece .fr { font-size: 17px; color: var(--tinta); }
.segue-bloco h2 { margin-top: 34px; }
/* chamadas das matérias, na seção e na inicial */
.m-cartoes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.m-cartoes a { display: block; text-decoration: none; color: var(--roxo-forte); }
.m-cartoes img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; border: 2px solid var(--linha); background: var(--papel); }
.m-cartoes h3 { margin: 12px 0 4px; font-size: 21px; line-height: 1.25; }
.m-cartoes a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m-cartoes a:hover img { border-color: var(--roxo); }
.m-cartoes p { margin: 0; font-size: 17px; color: var(--suave); }
.s-materias h2 { margin: 40px 0 4px; }
@media (min-width: 600px) { .m-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* um cartão só ocupa a largura deitado, foto à esquerda e texto à direita; com 2 ou 4, duas colunas largas no computador
   (sem isso sobravam dois terços ou um terço da linha vazios, revisão de espaços, 2026-11-04) */
@media (min-width: 600px) {
  .m-cartoes.m-um { grid-template-columns: minmax(0, 1fr); }
  .m-um li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 40px; align-items: center; }
  .m-um li > a { display: contents; }
  .m-um img { grid-row: 1 / 3; }
  .m-um h3 { grid-column: 2; align-self: end; margin-top: 0; font-size: 26px; }
  .m-um p { grid-column: 2; align-self: start; }
}
@media (min-width: 960px) {
  .m-topo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
  .m-topo h1 { margin-top: 6px; }
  .m-foto { margin: 0; }
  .leitura.m-corpo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: start; margin-top: 8px; }
  .m-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .m-cartoes.m-dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-cartoes.m-um { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- foto da calculadora e do guia (conteudo/fotos.json, "paginas")
   Celular: a foto abre a leitura, logo depois da conta, para os campos ficarem no alto. Computador: ao lado do título. */
.c-foto { display: none; margin: 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--papel); }
.c-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) {
  .leitura .c-foto-cel { display: block; order: 0; margin: 0 0 26px; }
}
@media (min-width: 960px) {
  .c-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 56px; align-items: center; margin-bottom: 28px; }
  .c-topo h1 { margin: 6px 0 0; }
  .c-topo .c-foto-largo { display: block; }
}