/* Simples CLT. Direção A, "Holerite" (aprovada por Pedro em 2026-11-06): o resultado é um demonstrativo de pagamento,
   com quadro azul, linhas alternadas de formulário contínuo e o valor que cai na conta numa faixa azul cheia. Escolhas
   em controle segmentado, cantos quase retos (--raio). Fonte IBM Plex Sans (OFL, estatico/fontes), algarismos de
   largura fixa. Celular primeiro, tema claro. Sem faixa colorida na borda, sem pílula, sem sombra deslocada. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fontes/ibm-plex-sans-latin.woff2") format("woff2"); font-weight: 400 700; 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: "IBM Plex Sans"; src: url("/fontes/ibm-plex-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* paleta A: azul carteira, tinta, texto suave, linha, zebra e papel; os outros tons saem do mesmo azul */
  --papel: #FFFFFF; --campo: #FFFFFF; --tinta: #0F1E36; --suave: #4A5873; --linha: #D3DCEA; --zebra: #F2F6FC; --trilho: #F1F5FB;
  --azul: #1C3F7A; --azul-forte: #14305F; --azul-claro: #E3ECF8; --azul-palido: #EEF3FA; --cinza-g: #B7C4DA; --erro: #B3261E;
  --raio: 3px;
  /* nomes da identidade anterior, ainda lidos por estatico/css/inicial.css e pelo bloco antigo da página inicial abaixo.
     Guardam os tons da paleta A; quando ninguém mais os ler, saem daqui */
  --roxo: var(--azul); --roxo-forte: var(--azul-forte); --lilas: var(--azul-palido); --amarelo: var(--azul-claro);
  /* séries de calculadoras/graficos.js: roxo = o que chega (s1), azul = INSS (s4), rosa = imposto de renda (s3),
     laranja = FGTS (s2, texto escuro por cima), cinza = o resto (s0, texto escuro) */
  --s0: #C9CFD8; --s1: var(--azul); --s1-claro: var(--azul-claro); --s2: #93ACD3; --s3: var(--suave); --s4: #3D6CB3;
  --grade: var(--linha); --tinta-2: var(--suave); --tinta-3: var(--suave); --cartao: var(--campo);

  --fonte: "IBM Plex Sans", 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 18px/1.55 var(--fonte); font-variant-numeric: tabular-nums; }
a { color: var(--azul); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--azul-forte); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.15; margin: 6px 0 20px; }
h2 { font-size: 22px; line-height: 1.25; margin: 34px 0 8px; }
h3 { font-size: 20px; margin: 0 0 8px; }
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 { border-bottom: 1px solid var(--linha); }
.topo .largura { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca:hover { color: var(--tinta); }
.marca svg { flex: none; }
/* 9 seções numa linha só (2026-11-06): 15 px e vão de 20 px cabem a partir de 1100 px; abaixo disso vale o botão Menu */
.secoes { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 4px 20px; margin-left: auto; font-size: 15px; font-weight: 500; }
@media (max-width: 1099px) { .topo .secoes { display: none; } .topo .menu-cel { display: block; } }
.secoes a { color: var(--tinta); text-decoration: none; padding: 21px 0 19px; }
.secoes a:hover, .secoes a[aria-current] { color: var(--azul); text-decoration: none; box-shadow: inset 0 -3px 0 var(--azul); }
.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: 600; cursor: pointer; border-radius: var(--raio); -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(--azul); }
.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(15, 30, 54, .3); }
.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: 600; }
.menu-painel a::after { content: "›"; color: var(--azul); font-size: 26px; font-weight: 700; line-height: 1; }
.menu-painel a[aria-current] { color: var(--azul-forte); }
.menu-painel a[aria-current]::before { content: ""; order: -1; flex: none; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 0 3px var(--azul); }
.menu-painel a[aria-current] { justify-content: flex-start; }
.menu-painel a[aria-current]::after { margin-left: auto; }

.migalha { font-size: 15px; 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: 600; font-size: 16px; color: var(--tinta); margin: 0 0 8px; }
.caixa { display: flex; align-items: center; height: 60px; padding: 0 14px; border: 2px solid var(--azul); border-radius: var(--raio); background: var(--campo); }
.caixa:focus-within { border-color: var(--azul-forte); box-shadow: 0 0 0 3px var(--azul-claro); }
.caixa .pre, .caixa .pos { font-size: 20px; font-weight: 500; 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: 600 30px var(--fonte); font-variant-numeric: tabular-nums; }
.caixa input[type=date] { font-size: 24px; font-weight: 600; }
.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: 18px; }
/* controle segmentado: os botões encostam um no outro e dividem a mesma borda */
/* cada botão tem no mínimo a largura da sua palavra mais longa: no celular "Doméstica" saía 2 px para fora do botão
   (salário-maternidade, 360 e 390 px). Com espaço sobrando, as colunas continuam iguais */
.botoes { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(min-content, 1fr)); gap: 0; }
.botoes button, button.avancado { height: 48px; margin: 0; padding: 0 4px; border-radius: 0; border: 1.5px solid var(--cinza-g); background: var(--campo); color: var(--tinta); font: 500 16px var(--fonte); cursor: pointer; white-space: nowrap; }
/* rótulos longos ("Pedi demissão", "100%, domingo e feriado") quebram em 2 linhas em vez de sair do botão */
.botoes button { position: relative; white-space: normal; height: auto; min-height: 48px; margin-left: -1.5px; padding: 4px 6px; line-height: 1.15; }
.botoes button:first-child { margin-left: 0; border-radius: var(--raio) 0 0 var(--raio); }
.botoes button:last-child { border-radius: 0 var(--raio) var(--raio) 0; }
.botoes button:only-child { border-radius: var(--raio); }
@media (max-width: 480px) { .botoes button { font-size: 15px; } }
.botoes button:hover, button.avancado:hover { border-color: var(--azul); }
.botoes button:hover { z-index: 1; }
.botoes button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; z-index: 2; }

/* 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; border-radius: var(--raio); color: var(--azul); font-weight: 600; }
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: 600; 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: 1.5px solid var(--cinza-g); border-radius: var(--raio); background: var(--campo); }
.mini:focus-within { border-color: var(--azul-forte); box-shadow: 0 0 0 3px var(--azul-claro); }
.mini input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--tinta); text-align: right; font: 600 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: 1.5px solid var(--cinza-g); border-radius: var(--raio); background: transparent; color: var(--azul-forte); font: 600 16px var(--fonte); cursor: pointer; }
.padrao:hover { border-color: var(--azul); }
.padrao[hidden] { display: none; }

/* resposta */
/* a resposta é um demonstrativo: quadro azul, a frase no alto e, embaixo, o valor final e as parcelas (graficos.js,
   holerite). --res-x é o recuo de dentro do quadro, que a tabela do holerite também usa */
.resultado { --res-x: 20px; margin-top: 28px; padding: 0; border: 2px solid var(--azul); border-radius: var(--raio); scroll-margin-top: 12px; }
/* no holerite o valor que cai na conta vem logo abaixo da frase (a sugestão da direção C aprovada junto com a A); a
   nota, que explica a conta, desce para depois das parcelas */
.resultado:has(> .grafico > .g-hol) { display: flex; flex-direction: column; }
.resultado:has(> .grafico > .g-hol) > :is(p.nota, p.premissas, p.dado) { order: 1; }
p.resposta { font-size: 20px; line-height: 1.45; font-weight: 500; margin: 0; padding: 18px var(--res-x) 16px; border-bottom: 1px solid var(--linha); text-wrap: pretty; }
p.resposta b, p.resposta strong { color: var(--azul); font-weight: 700; white-space: nowrap; }
p.nota { color: var(--suave); font-size: 16px; margin: 12px 0 0; padding: 0 var(--res-x); }
p.nota:empty { display: none; }
p.nota b { color: var(--tinta); }

.total { margin: 20px 0 0; padding: 0 var(--res-x); }
.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: 700; color: var(--azul); 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(--erro); font-weight: 700; white-space: nowrap; }
.total .a-mais.neutro b { color: var(--azul-forte); }

/* o recuo é margem, não padding: graficos.js desenha o SVG na clientWidth do .grafico, e com padding o desenho saía
   8 a 9% maior que a caixa, encolhido e com faixa vazia em cima e embaixo (revisão visual, 2026-11-06) */
.grafico { margin: 14px var(--res-x) 0; min-height: 40px; padding: 0; }
.grafico:has(> .g-hol) { margin: 0; }
.resultado:has(> .grafico > .g-hol) > p.resposta { border-bottom: 0; }
.grafico:has(> .g-hol) > .g-titulo { padding: 0 var(--res-x); }
.grafico:empty { display: none; }
p.premissas { color: var(--suave); font-size: 15px; margin: 12px 0 0; padding: 0 var(--res-x); }
p.premissas:empty { display: none; }
p.dado { color: var(--suave); font-size: 15px; margin: 6px 0 0; padding: 0 var(--res-x) 18px; }

/* 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; }
.tabela-fig { margin: 18px 0 22px; }
.tabela-fig .tabela-tit { margin: 0 0 6px; font-size: 19px; }
.tabela-fig .tabela-leg { color: var(--suave); font-size: 15px; padding-top: 8px; }
/* tabela larga no celular: cada linha vira um cartão, com o nome da coluna ao lado do valor */
@media (max-width: 599px) {
  table.tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tabela-cartoes, table.tabela-cartoes tbody, table.tabela-cartoes tr, table.tabela-cartoes td { display: block; width: 100%; }
  table.tabela-cartoes tr { border: 2px solid var(--linha); border-radius: var(--raio); padding: 6px 14px 4px; margin-bottom: 12px; background: var(--campo); }
  table.tabela-cartoes td { display: flex; justify-content: space-between; gap: 16px; text-align: right; padding: 7px 0; }
  table.tabela-cartoes td:last-child { border-bottom: 0; }
  table.tabela-cartoes td::before { content: attr(data-rotulo); color: var(--suave); text-align: left; font-weight: 700; flex: 0 1 50%; }
  table.tabela-cartoes td:first-child { display: block; font-weight: 600; font-size: 18px; text-align: left; }
  table.tabela-cartoes td:first-child::before { content: none; }
}
@media (min-width: 600px) { table.tabela-cartoes { font-size: 16px; } table.tabela-cartoes th { font-size: 14px; padding-left: 6px; padding-right: 6px; } table.tabela-cartoes td { padding-left: 6px; padding-right: 6px; } }
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: 600; border-bottom: 2px solid var(--linha); }
table.tabela tr.destaque td { font-weight: 700; }
/* marca-texto na linha inteira, de borda a borda da coluna */
table.tabela tr.destaque td { background: var(--azul-claro); }
@media (max-width: 370px) { table.tabela { font-size: 14px !important; } }
@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: 600; }
.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: 2px; 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: 2px; }
.g-lista li b { font-weight: 600; 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: 2px; }
.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: 700; }
.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: 2px 0 0 2px; }
.g-barra span:last-child { border-radius: 0 2px 2px 0; }
.g-barra span:only-child { border-radius: 2px; }
.g-valor { font-size: 17px; font-weight: 600; 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: 700; }
.g-todo span:first-child { border-radius: 2px 0 0 2px; }
.g-todo span:last-child { border-radius: 0 2px 2px 0; }
.g-todo span:only-child { border-radius: 2px; }
.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: 700; 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: 700; 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: var(--raio); 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: 18px; 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: 700; }
.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: 600; }

/* 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: var(--raio); 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: 2px solid var(--azul); border-radius: var(--raio); padding: 18px 18px 16px; }
.s-comece:hover { color: var(--tinta); box-shadow: 0 0 0 3px var(--azul-claro); }
.s-comece .rot { display: block; font-size: 15px; font-weight: 600; color: var(--suave); margin: 0 0 4px; }
.s-comece .tit { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--azul-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 { color: var(--azul); font-weight: 700; }
.s-comece .ir { font-weight: 700; color: var(--azul-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: 700; line-height: 1.1; color: var(--azul); }
.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(--azul-palido); border-radius: var(--raio); }
.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: 600; }
@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: 1px 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: 600; text-decoration: none; }
.r-secoes a:hover { color: var(--azul); 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; }
/* o espaço do vão só existe na grade esq-curta do computador (regras do @media 960 px) */
.anuncio-vao { display: none; }
.anuncio-vao > ins { vertical-align: top; }

@media (max-width: 959px) {
  .resultado { --res-x: 14px; }
  p.resposta { font-size: 19px; padding-top: 16px; padding-bottom: 14px; }
  .botoes button { font-size: 15px; padding: 4px 2px; }
  .secoes { display: none; }
  .menu-cel { display: block; }
}
@media (min-width: 960px) {
  :root { --calha: 40px; }
  h1 { font-size: 40px; margin-bottom: 26px; }
  .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 { --res-x: 24px; margin-top: 0; }
  p.resposta { font-size: 22px; padding-top: 20px; padding-bottom: 18px; }
  .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: var(--raio); background: var(--azul-palido); font-size: 19px; line-height: 1.4; }
.q-previa b { font-weight: 700; }
.q-previa a { white-space: nowrap; font-weight: 600; }
@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: 700; }
.q-tirar { height: 40px; padding: 0 14px; border-radius: var(--raio); border: 2px solid var(--linha); background: var(--campo); color: var(--erro); font: 600 16px var(--fonte); cursor: pointer; }
.q-tirar:hover { border-color: var(--erro); }
.q-divida .campo { margin-top: 14px; }
.q-mais { display: block; width: 100%; height: 56px; margin: 0 0 28px; border-radius: var(--raio); border: 2px dashed var(--azul); background: var(--campo); color: var(--azul-forte); font: 700 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: 700; 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(--erro); }
.q-aviso { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--raio); background: var(--azul-palido); 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: 2px; }
i.q-so { background: var(--azul-palido); }
i.q-foco { background: var(--azul); }
.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: 600; }
.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: 2px; 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: 600; white-space: nowrap; }
.q-mes.dentro { top: 4px; line-height: 22px; padding: 0 8px; border-radius: 2px; 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: 700; }
.q-compara b { color: var(--erro); 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: 700 34px/1.05 var(--fonte); color: var(--azul); }
.etapas li > p { grid-column: 2; margin: 0 0 6px; }
.etapas li > p:last-child { margin-bottom: 0; }
.etapas .quando { font-weight: 700; font-size: 20px; line-height: 1.3; }
.etapas .quando mark { background: none; color: var(--tinta); box-shadow: inset 0 -0.5em 0 var(--azul-claro); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.etapas .voce span { display: block; font-size: 15px; font-weight: 700; color: var(--azul); }
.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: 700; font-size: 20px; line-height: 1.4; }
.pode .sim li::before { content: "✓"; color: var(--azul); }
.pode .nao li::before { content: "✕"; color: var(--erro); }
@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; }

/* "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: var(--raio); border: 2px solid var(--linha); background: var(--campo); color: var(--azul-forte); cursor: pointer; }
.av-botoes button:hover:not(:disabled) { border-color: var(--azul); }
.av-botoes button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.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: var(--raio); background: var(--campo); color: var(--tinta); font: 400 18px var(--fonte); outline: 0; }
.av-linha input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.av-linha button { height: 52px; padding: 0 18px; border-radius: var(--raio); border: 2px solid var(--azul-forte); background: var(--azul-forte); color: #fff; font: 600 18px var(--fonte); cursor: pointer; }
.av-linha button:hover { background: var(--azul); border-color: var(--azul); }
.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: var(--raio); 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; }
/* no celular a leitura é flex e as margens não se fundem: sem isto o vão entre a abertura e o primeiro título passava de 80 px */
@media (max-width: 959px) { .m-topo + .leitura { margin-top: 0; } }
/* 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(--azul-forte); }
.m-cartoes img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; 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 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; }
  /* a coluna da direita ("Faça a sua conta", "Para continuar") acompanha a rolagem até o fim do texto, como o sumário
     dos guias, e rola por dentro se for mais alta que a janela (Pedro, layout-1, 2026-11-06). Com o anúncio dessa
     coluna à mostra ela volta a ficar parada, porque anúncio que acompanha a tela é proibido (R14.10, anuncios.js).
     A folga de 6 px (padding, desfeito pela margem negativa) guarda o contorno de foco de 5 px, que o overflow cortava */
  .leitura.m-corpo > .col-d { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; scrollbar-width: thin;
    padding: 6px; margin: -6px; scroll-padding-block: 6px; }
  .leitura.m-corpo > .col-d:has(.anuncio:not([hidden])) { position: static; max-height: none; overflow-y: visible; }
  .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: var(--raio); 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; }
}

/* holerite: o valor que cai na conta na faixa azul cheia, no alto, e depois as parcelas em linhas alternadas, como no
   formulário contínuo. A tabela vai de borda a borda do quadro e recua o texto com --res-x. A barra do todo (g-hol-barra)
   e os quadradinhos de cor saíram, porque a tabela já mostra cada parcela */
.g-hol-barra { display: none; }
.g-hol { width: 100%; border-collapse: collapse; font-size: 17px; }
.g-hol th, .g-hol td { padding: 9px var(--res-x, 20px); text-align: left; font-weight: 400; vertical-align: top; }
.g-hol tr:is(.h-mais, .h-menos):nth-child(even) > * { background: var(--zebra); }
.g-hol th i { display: none; }
.g-hol th small { display: block; font-size: 15px; color: var(--suave); }
.g-hol td { text-align: right; white-space: nowrap; font-weight: 600; padding-left: 12px; }
.g-hol .h-menos td { color: var(--suave); }
.g-hol .h-final > * { background: var(--azul); color: #fff; font-size: 18px; font-weight: 600; padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.g-hol .h-final td { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.g-hol .h-final small { color: var(--azul-claro); font-size: 15px; font-weight: 400; }
.g-hol .h-fora > * { border-top: 1px solid var(--linha); padding-top: 12px; color: var(--tinta); }
.g-hol .h-fora td { font-size: 22px; font-weight: 700; color: var(--azul); }
/* holerite dentro de um quadro de vários gráficos (salário líquido): o quadro já recua, a tabela recua menos */
.g-varios-p .g-hol { --res-x: 14px; }
@media (max-width: 959px) {
  .g-hol { font-size: 16px; }
  .g-hol th, .g-hol td { padding-top: 8px; padding-bottom: 8px; }
  .g-hol td { padding-left: 8px; }
  .g-hol .h-final th { font-size: 16px; }
  .g-hol .h-final td { font-size: 25px; }
  .g-hol .h-fora td { font-size: 19px; }
}
@media (min-width: 960px) {
  .g-hol .h-final td { font-size: 36px; }
}

/* ---------------------------------------------------------------- sem foto (Simples CLT, 2026-11-06): a seção sem foto
   põe o texto no lugar dela. */
@media (min-width: 960px) {
  .s-topo.sem-foto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "texto comece"; grid-template-rows: auto; align-items: start; }
  .s-topo.sem-foto .s-comece { margin-top: 6px; }
}
.m-data, .m-quando { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--suave); }
.m-topo .texto .m-quando { margin: 0 0 12px; }
.m-cartoes li.sem-foto { border-top: 2px solid var(--linha); padding-top: 14px; }
.m-cartoes li.sem-foto h2, .m-cartoes li.sem-foto h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.25; }
.m-lista { grid-template-columns: minmax(0, 1fr) !important; max-width: 760px; gap: 22px; }
.materia.sem-foto .m-topo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

/* ---------------------------------------------------------------- explicação completa (Pedro, 2026-11-06)
   A calculadora em cima e, embaixo, o artigo longo. No computador o artigo ocupa a largura de leitura e a coluna da
   direita traz as palavras da lei traduzidas e, logo abaixo, o sumário, que acompanha a rolagem. No celular: sumário
   fechado, artigo, palavras da lei, para continuar. */
.g-varios-p + .g-varios-p { margin-top: 28px; }
details.g-varios-p { border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--campo); }
details.g-varios-p > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 16px; font-weight: 700; font-size: 18px; color: var(--azul-forte); cursor: pointer; }
details.g-varios-p > summary::-webkit-details-marker { display: none; }
details.g-varios-p > summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--azul); }
details.g-varios-p[open] > summary::after { content: "−"; }
details.g-varios-p[open] > summary { border-bottom: 2px solid var(--linha); }
details.g-varios-p > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.g-varios-p[open] { padding-bottom: 16px; }

.resumo > p:first-child { margin-top: 34px; font-size: 22px; line-height: 1.45; font-weight: 500; }
.resumo p { max-width: 68ch; font-size: 18px; }
.artigo-wrap { margin-top: 24px; }
.artigo { max-width: 72ch; }
.artigo .parte { scroll-margin-top: 16px; }
.artigo .parte > h2 { font-size: 25px; margin-top: 52px; }
.artigo p, .artigo li { line-height: 1.6; }
.artigo .lista, .artigo .passos { padding-left: 1.3em; }
.artigo .lista li, .artigo .passos li { margin: 6px 0; }
.artigo .passos { counter-reset: passo; list-style: none; padding-left: 0; }
.artigo .passos li { counter-increment: passo; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; margin: 12px 0; }
.artigo .passos li > span { min-width: 0; }
.artigo .passos li::before { content: counter(passo); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 2px;
  background: var(--azul); color: #fff; font-weight: 700; font-size: 17px; margin-top: 1px; }

/* a lei e a tradução, lado a lado no computador, uma sobre a outra no celular */
figure.lei { margin: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1.5px solid var(--azul); border-radius: var(--raio); overflow: hidden; background: var(--campo); }
figure.lei .rot { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--azul); }
figure.lei .lei-diz { padding: 16px 18px; background: var(--zebra); }
figure.lei blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinta); }
figure.lei blockquote p { margin: 0; }
figure.lei blockquote p::before { content: "“"; } figure.lei blockquote p::after { content: "”"; }
figure.lei figcaption { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--suave); }
figure.lei .lei-pt { padding: 16px 18px; }
figure.lei .lei-pt .rot { color: var(--azul-forte); }
figure.lei .lei-pt p:last-child { margin: 0; font-size: 18px; font-weight: 600; }
@media (min-width: 760px) { figure.lei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* exemplo de conta, como um contracheque: quadro azul, linhas alternadas e o total na faixa azul */
.exemplo { margin: 24px 0; padding: 0; border: 1.5px solid var(--azul); border-radius: var(--raio); background: var(--campo); overflow: hidden; }
.exemplo .ex-tit { margin: 0; padding: 14px 18px 8px; font-weight: 700; font-size: 19px; }
.exemplo dl { margin: 0; }
.exemplo .ex-l { display: flex; justify-content: space-between; gap: 16px; padding: 8px 18px; }
.exemplo .ex-l:nth-child(even) { background: var(--zebra); }
.exemplo dt { font-weight: 400; }
.exemplo dd { margin: 0; font-weight: 600; white-space: nowrap; }
.exemplo .ex-menos dd { color: var(--suave); }
.exemplo .ex-l.ex-total, .exemplo .ex-total { background: var(--azul); color: #fff; font-size: 21px; }
.exemplo .ex-total dt, .exemplo .ex-total dd { font-weight: 700; }
.exemplo > p { margin: 12px 0 0; padding: 0 18px 14px; color: var(--suave); font-size: 17px; }

/* termo da lei no texto: sublinhado pontilhado, a tradução abre embaixo (estatico/js/termos.js) */
a.termo { color: inherit; text-decoration: underline dotted var(--azul); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.termo:hover, a.termo[aria-expanded="true"] { color: var(--azul-forte); text-decoration-style: solid; }
.termo-bolha { position: absolute; z-index: 30; box-sizing: border-box; padding: 14px 16px; border-radius: var(--raio); background: var(--campo); border: 2px solid var(--azul);
  box-shadow: 0 10px 28px rgba(15, 30, 54, .18); font-size: 17px; line-height: 1.45; font-weight: 400; color: var(--tinta); }
.termo-bolha strong { display: block; font-weight: 700; color: var(--azul-forte); }
.termo-bolha p { margin: 4px 0 8px; }
.termo-bolha a { font-weight: 600; }

/* sumário e palavras da lei */
.sumario details { border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--campo); }
.sumario summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-weight: 700; color: var(--azul); cursor: pointer; }
.sumario summary::-webkit-details-marker { display: none; }
.sumario summary::after { content: "+"; font-size: 26px; color: var(--azul); }
.sumario details[open] summary::after { content: "−"; }
.sumario ol { margin: 0; padding: 4px 16px 14px 40px; font-size: 17px; }
.sumario li { margin: 6px 0; }
.sumario a { text-decoration: none; font-weight: 500; }
.sumario a:hover { text-decoration: underline; }
/* palavras da lei, quadro "Consulta" (Pedro, termos-1, opção C, 2026-11-07): um índice de casas iguais com o termo e a
   explicação curta. A explicação aberta ocupa uma fileira inteira logo abaixo da casa tocada, e o "dense" da grade puxa
   as casas seguintes para preencher a fileira de cima, então nada fica vazio. A casa aberta fica azul cheia e encosta no
   quadro da explicação, que tem o mesmo azul na borda. O abre e fecha mora em estatico/js/termos.js */
.termos-lado.tc { margin-top: 56px; padding: 0; border-radius: 0; background: none; }
.tc .termos-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 14px; }
.tc .termos-topo h2 { margin: 0; font-size: 25px; }
.tc .termos-topo .ver-dic { margin: 0; font-size: 16px; font-weight: 600; }
.termos-lado.tc dl.tc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-flow: row dense;
  margin: 0; gap: 0; border-top: 1.5px solid var(--azul); }
.termos-lado.tc dt { margin: 0; font-weight: 400; display: flex; }
.tc .tc-bot { all: unset; box-sizing: border-box; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t s" "c s";
  align-content: start; column-gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px 13px; cursor: pointer;
  border-bottom: 1px solid var(--linha); font: inherit; color: var(--tinta); -webkit-tap-highlight-color: transparent; }
.tc .tc-bot::after { content: "+"; grid-area: s; align-self: center; font-size: 24px; line-height: 1; font-weight: 400; color: var(--azul); }
.tc .tc-bot[aria-expanded="true"]::after { content: "−"; color: #fff; }
.tc .tc-bot:hover { background: var(--azul-palido); }
.tc .tc-bot:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.tc .tc-bot[aria-expanded="true"]:focus-visible { outline-color: #fff; }
.tc .tc-termo { grid-area: t; font-size: 18px; line-height: 1.25; font-weight: 700; }
.tc .tc-curto { grid-area: c; margin-top: 2px; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--azul); }
.tc .tc-bot[aria-expanded="true"] { background: var(--azul); color: #fff; border-bottom-color: var(--azul); }
.tc .tc-bot[aria-expanded="true"] .tc-curto { color: #DCE6F5; }
.termos-lado.tc dd.tc-det { grid-column: 1 / -1; margin: 0 0 12px; padding: 18px 18px 20px; border: 2px solid var(--azul); border-top-width: 0;
  background: var(--campo); }
.termos-lado.tc dd.tc-det[hidden] { display: none; }
.tc .tc-exp { margin: 0; max-width: 64ch; font-size: 17.5px; line-height: 1.55; }
.tc .tc-lei { margin: 10px 0 0; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--suave); }
.tc .tc-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 12px 0 0; font-size: 16px; font-weight: 600; }
.tc .tc-links a { padding-block: 11px; margin-block: -11px; }  /* toque de 44 px */
/* do tablet para cima, as casas ganham o fio vertical entre elas e a explicação abre em duas partes: o texto à
   esquerda, a lei e os links à direita */
@media (min-width: 600px) {
  .tc .tc-bot { box-shadow: inset -1px 0 0 var(--linha); }
  .termos-lado.tc dd.tc-det { display: grid; grid-template-columns: minmax(0, 64ch) minmax(200px, 1fr);
    grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 12px; padding: 20px 22px 22px; }
  .tc .tc-det .tc-exp { grid-column: 1; grid-row: 1 / span 2; }
  .tc .tc-det .tc-lei { grid-column: 2; grid-row: 1; margin: 3px 0 0; }
  .tc .tc-det .tc-links { grid-column: 2; grid-row: 2; align-self: end; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
}
@media (min-width: 960px) { .termos-lado.tc { padding: 0; } .termos-lado.tc dl.tc-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .termos-lado.tc dl.tc-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.artigo-fim { margin-top: 8px; }

@media (min-width: 960px) {
  .conta:has(> .artigo-wrap) { grid-template-areas: "pedido res" "esq res" "art art"; grid-template-rows: auto 1fr auto; }
  .conta > .resumo { grid-area: esq; }
  .conta > .artigo-wrap { grid-area: art; }
  /* coluna da direita = só o sumário, que acompanha a rolagem; as palavras da lei vêm depois do artigo, na largura toda
     (no texto, cada palavra já abre a tradução no balão) */
  .artigo-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; align-items: start;
    grid-template-areas: "art sum" "ter ter" "fim fim"; grid-template-rows: auto auto auto; }
  .artigo-wrap > .artigo { grid-area: art; max-width: none; }
  .artigo-wrap > .termos-lado { grid-area: ter; margin-top: 40px; }
  /* a célula do sumário ocupa só a linha do artigo (estica até o fim dele). O sticky fica no filho, então o sumário
     acompanha a rolagem até o fim do artigo e para ali, sem descer sobre as palavras da lei (Pedro, 2026-11-06) */
  .artigo-wrap > .sumario-cel { grid-area: sum; align-self: stretch; }
  .sumario-cel > .sumario { position: sticky; top: 16px; margin-top: 52px;
    max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--raio); }
  .artigo-wrap > .artigo-fim { grid-area: fim; }
  .sumario summary { pointer-events: none; }
  .sumario summary::after { content: none; }

  /* o sumário sobe para o vão ao lado da conta (Pedro, layout-1, opção A, 2026-11-06). pagina.js marca .conta com
     data-lado e --vao (a distância entre o fim do resumo e o fim da resposta). Sem script fica a grade de cima.
     dir-curta = a resposta termina antes do resumo: o sumário começa logo abaixo da resposta, à direita, e o artigo
     fica onde está. esq-curta = a resposta é a mais comprida: o sumário começa logo abaixo do resumo, à esquerda, e o
     artigo logo abaixo da resposta, na coluna dela. As 5 trilhas refazem as duas grades, campos 5fr | 64 | resposta
     6fr e artigo 1fr | 56 | sumário 320. As áreas pedido, res, esq, art, sum, ter e fim já vêm das regras de cima */
  .conta[data-lado]:has(> .artigo-wrap) { grid-template-columns: calc((100% - 64px) * 5 / 11) 64px minmax(0, 1fr) 56px 320px;
    column-gap: 0; grid-template-rows: auto auto 1fr auto auto auto; }
  .conta[data-lado] > .artigo-wrap { display: contents; }
  .conta[data-lado] > .artigo-wrap > .artigo { margin-top: 24px; }
  .conta[data-lado] > .artigo-wrap > .sumario-cel { margin-top: calc(-1 * var(--vao, 0px)); }
  .conta[data-lado] .sumario-cel > .sumario { margin-top: 28px; }
  .conta[data-lado="dir-curta"]:has(> .artigo-wrap) {
    grid-template-areas: "pedido . res res res" "esq . res res res" ". . res res res" "art art art . sum" "ter ter ter ter ter" "fim fim fim fim fim"; }
  /* esq-curta (Pedro, 2026-11-07, "por que o texto principal está na coluna da direita?"): o texto fica sempre à
     esquerda, com o sumário à direita. O vão ao lado da resposta recebe as palavras da lei da página, em duas colunas
     de casas. pagina.js mede o quadro fechado e, se ele passar do vão, marca data-ter="baixo" e ele volta para depois
     do artigo, na largura toda, para não abrir buraco embaixo da resposta */
  .conta[data-lado="esq-curta"]:has(> .artigo-wrap) { grid-template-rows: auto auto auto 1fr auto auto auto;
    grid-template-areas: "pedido . res res res" "esq . res res res" "ter . res res res" "adv . res res res" "art art art . sum" "adb adb adb . ." "fim fim fim fim fim"; }
  /* anúncio no que sobra do vão embaixo dos termos (Pedro, 2026-11-07). pagina.js marca data-cabe quando sobram 280 px,
     e data-fora quando o bloco já montado deixa de caber (casa aberta, resposta menor): ele desce para depois do artigo.
     Tamanho fixo (336×280 ou 300×600, anuncios.js), para o artigo não descer quando o anúncio chega */
  .conta[data-lado="esq-curta"] > .artigo-wrap > .anuncio-vao[data-cabe]:not([hidden]) { display: block; grid-area: adv; align-self: start; margin: 40px 0 0; }
  .conta[data-lado="esq-curta"] > .artigo-wrap > .anuncio-vao[data-cabe][data-fora]:not([hidden]) { grid-area: adb; margin: 32px 0 0; }
  .conta[data-lado="esq-curta"] > .artigo-wrap > .anuncio-vao[data-cabe].esperando:not([hidden]) { margin: 0; }
  .conta[data-lado="esq-curta"] > .artigo-wrap > .sumario-cel { margin-top: 0; }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) > .artigo-wrap > .termos-lado { margin-top: 28px; align-self: start; }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) .termos-lado dl.tc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) .termos-lado dd.tc-det { display: block; padding: 18px 18px 20px; }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) .termos-lado dd.tc-det[hidden] { display: none; }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) .tc .tc-det .tc-lei { margin: 10px 0 0; }
  .conta[data-lado="esq-curta"]:not([data-ter="baixo"]) .tc .tc-det .tc-links { flex-direction: row; gap: 4px 24px; margin: 12px 0 0; }
  /* casas que não cabem no vão ficam guardadas atrás da casa "Ver os N termos" (pagina.js) */
  .termos-lado dl.tc-grade > dt.tc-fora, .termos-lado dl.tc-grade > dt.tc-fora + dd.tc-det { display: none; }
  .tc .tc-mais { grid-template-areas: "t s"; align-content: center; font-weight: 700; color: var(--azul-forte); }
  .tc .tc-mais::after { content: "+"; }
  .conta[data-lado="esq-curta"][data-ter="baixo"]:has(> .artigo-wrap) { grid-template-rows: auto auto 1fr auto auto auto auto;
    grid-template-areas: "pedido . res res res" "esq . res res res" "adv . res res res" "art art art . sum" "adb adb adb . ." "ter ter ter ter ter" "fim fim fim fim fim"; }
}

/* monitor grande: o conteúdo passa de 1120 para 1360 px a partir de 1600 px de tela (Pedro, layout-1, 2026-11-06).
   A conta, a resposta e os cartões usam a largura nova. O texto corrido do artigo e da matéria fica com no máximo
   680 px (perto de 80 letras por linha) e a sobra vai para a coluna do lado (sumário ou contas da matéria) */
@media (min-width: 1600px) {
  :root { --largura: 1360px; }
  .artigo-wrap { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
  .leitura.m-corpo { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
  /* com o sumário no vão da conta, a 3ª trilha encolhe até o artigo (campos + 64 + ela) dar 680 px, e a sobra vai
     para a do sumário */
  .conta[data-lado]:has(> .artigo-wrap) { grid-template-columns: calc((100% - 64px) * 5 / 11) 64px
    minmax(0, max(0px, calc(680px - 64px - (100% - 64px) * 5 / 11))) 56px minmax(0, 1fr); }
}

/* dicionário trabalhista */
.d-letras { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.d-letras a { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--raio); border: 2px solid var(--linha); background: var(--campo); font-weight: 700; text-decoration: none; }
.d-letras a:hover { border-color: var(--azul); }
.dicionario dl { margin: 0; display: grid; gap: 18px; }
.d-letra { scroll-margin-top: 16px; }
.d-letra h2 { font-size: 34px; color: var(--azul); border-bottom: 2px solid var(--linha); padding-bottom: 4px; }
.d-item { scroll-margin-top: 16px; padding: 14px 16px; border-radius: var(--raio); }
.d-item:target { background: var(--azul-palido); }
.d-item dt { font-size: 21px; font-weight: 700; }
.d-item dd { margin: 4px 0 0; }
.d-item dd p { margin: 4px 0 0; max-width: 68ch; }
.d-lei { color: var(--suave); font-size: 16px; font-weight: 700; }
.d-ver { font-size: 17px; font-weight: 600; }
@media (min-width: 960px) { .dicionario dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }

/* ---------------------------------------------------------------- fotos do lote de 2026-11-06 nos cartões e listas
   As fotos têm o fundo no mesmo branco do papel, então vão sem moldura. Na calculadora e no guia com explicação completa
   (sem col-e) e no dicionário, a foto do celular (c-foto-abre) vem logo depois da conta, do título ou da abertura. */
@media (max-width: 959px) { .c-foto-cel.c-foto-abre { display: block; margin: 0 0 24px; } }
/* índice de notícias, sem o "Comece por aqui": a foto ocupa a altura do título e da abertura */
@media (min-width: 960px) {
  .s-topo-noticias { grid-template-areas: "texto img"; grid-template-rows: auto; align-items: center; }
  .s-topo-noticias .s-img { min-height: 300px; margin: 0; }
}
/* lista de notícias: a foto à esquerda e o texto à direita a partir de 600 px, como o cartão único (m-um) */
@media (min-width: 600px) {
  .m-lista li:not(.sem-foto) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr;
    column-gap: 28px; align-items: start; }
  .m-lista li:not(.sem-foto) > a { display: contents; }
  .m-lista li:not(.sem-foto) img { grid-column: 1; grid-row: 1 / 4; }
  .m-lista li:not(.sem-foto) :is(h2, h3) { grid-column: 2; grid-row: 2; margin: 4px 0 6px; font-size: 22px; }
  .m-lista li:not(.sem-foto) .m-data { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .m-lista li:not(.sem-foto) p { grid-column: 2; grid-row: 3; }
  /* cartão único (seções): a data entra entre o título e o resumo, e o texto fica no meio da altura da foto */
  .m-um li { grid-template-rows: 1fr auto auto auto 1fr; align-items: start; }
  .m-um img { grid-column: 1; grid-row: 1 / 6; }
  .m-um h3 { grid-row: 2; }
  .m-um .m-data { grid-column: 2; grid-row: 3; margin: 6px 0 8px; }
  .m-um p { grid-row: 4; }
}
/* no computador a lista de notícias com foto usa a largura toda da página */
@media (min-width: 960px) { .m-lista { max-width: none; } }
/* assuntos da inicial: a foto da seção abre o cartão */
.ini-assunto > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: -8px 0 16px; }