/* ==========================================================================
   Páginas ESTÁTICAS geradas: /base-legal/ e /conferir-planilha/.

   Carregada DEPOIS de landing.css e usando só os tokens dela — nenhuma cor,
   sombra, raio ou fonte nova é definida aqui. O que este arquivo acrescenta é
   o que a landing não tinha: layout de ARTIGO (texto corrido longo, ficha
   técnica, tabela de dados) e os selos de vigência.

   ⚠️ Estas páginas não carregam `landing.js` de propósito — nenhuma delas tem
   `data-reveal`, aba ou botão de tema. O único script é o anti-flash do topo,
   copiado do index.html porque a CSP o autoriza por hash.
   ========================================================================== */

/* ---------- marca em texto ------------------------------------------------
   O logo da landing é um symbol SVG de ~4 KB embutido no index.html. Repeti-lo
   em 285 páginas custaria mais de 1 MB para desenhar a mesma palavra, e servi-lo
   como arquivo de imagem externo perderia o `currentColor` que faz "Perit"
   acompanhar o tema. Em texto ele custa zero byte e funciona nos dois temas. */
.bl-logo {
  font-family: var(--display);
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: var(--logo-fg); text-decoration: none; white-space: nowrap;
}
.bl-logo span { color: var(--accent-blue); }
.bl-logo--rodape { font-size: 19px; }
/* ⚠️ `.nav` e `.rodape` são navy nas duas temperaturas de tema, e `--logo-fg`
   sozinho é escuro no tema claro: "Perit" sumia sobre o navy, visto na captura.
   É a mesma correção que o `.logo-svg` já tem duas linhas abaixo em landing.css. */
.nav .bl-logo, .rodape .bl-logo { color: #fff; }

/* ---------- coluna de leitura --------------------------------------------
   65ch é a medida de linha em que texto longo se lê sem o olho perder a volta;
   a landing não precisava disso porque lá nada passa de dois parágrafos. */
.bl-wrap { max-width: 68ch; }
.bl-hero .bl-wrap { max-width: 74ch; }
/* ⚠️ A demonstração é outra coisa: lá a TABELA é o argumento, e 68ch a
   espremia até esconder a coluna "Saldo final" (medido: 724px de tabela num
   container de 686px). O corpo nunca rola na horizontal e a tabela rola dentro
   do próprio quadro — as duas regras continuam de pé —, mas esconder o saldo
   final numa página que existe para mostrar a cadeia do saldo é perder o ponto. */
.bl-wrap--dados { max-width: 940px; }

.bl-migalha { font-size: 13px; color: var(--text-sub); margin-bottom: 10px; }
.bl-migalha a { color: var(--accent-blue-texto); }

.bl-wrap h1 {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px;
}
.bl-hero h1 { color: #fff; }
.bl-hero .bl-lede { color: var(--navy-sub); }
.bl-hero .eyebrow { margin-bottom: 10px; }

.bl-lede { font-size: 17px; line-height: 1.6; color: var(--text-sub); margin: 0 0 18px; }

/* ---------- selos de categoria, status e vigência ------------------------- */
.bl-selos { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.bl-selo {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-sub);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-style: normal;
}
.bl-selo--em_vigor,
.bl-selo--em_dia   { background: var(--accent-green-bg); border-color: transparent; color: var(--cor-verde-texto); }
.bl-selo--alterado,
.bl-selo--vence_em_breve { background: var(--accent-orange-bg); border-color: transparent; color: var(--cor-laranja-texto); }
.bl-selo--revogado,
.bl-selo--vencido  { background: var(--accent-red-bg); border-color: transparent; color: var(--accent-red); }

/* ---------- avisos --------------------------------------------------------
   O aviso de vigência é o item mais importante destas páginas: verbete velho
   apresentado como atual é o contrário do que o produto vende. */
.bl-aviso {
  border-left: 3px solid var(--border-forte); background: var(--panel-2);
  padding: 12px 16px; margin: 18px 0; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.55; color: var(--text-sub);
}
.bl-aviso--forte { border-left-color: var(--accent-orange); background: var(--accent-orange-bg); color: var(--cor-laranja-texto); }

/* ---------- ficha técnica -------------------------------------------------- */
.bl-ficha {
  display: grid; gap: 0; margin: 22px 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--panel);
}
.bl-ficha > div { display: flex; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.bl-ficha > div:first-child { border-top: 0; }
.bl-ficha dt { flex: 0 0 34%; color: var(--text-sub); }
.bl-ficha dd { margin: 0; color: var(--text-main); }
.bl-ficha a { color: var(--accent-blue-texto); }

/* ---------- o texto do verbete -------------------------------------------- */
.bl-texto { margin-top: 26px; }
.bl-texto h2 {
  font-family: var(--serif); font-size: 23px; line-height: 1.25;
  margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid var(--border);
}
.bl-texto h3 { font-size: 17px; margin: 24px 0 8px; }
.bl-texto h4 { font-size: 15px; margin: 20px 0 6px; color: var(--text-sub); }
.bl-texto p { font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.bl-texto ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
/* 🔴 O reset da landing e `a { color: inherit; text-decoration: none }` para TODO
   link. No corpo das 25 paginas de recurso isso deixava a CTA principal — o
   "Abrir a calculadora agora" — com a cor e o peso do texto ao redor: link que
   ninguem ve e link que ninguem clica. `:not([class])` preserva os botoes, que
   ja tem afordancia propria. */
.bl-texto a:not([class]) { color: var(--accent-blue); border-bottom: 1px solid currentColor; }
.bl-texto a:not([class]):hover { color: var(--accent-blue-texto); }
.bl-texto li { font-size: 15.5px; line-height: 1.65; }

.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; }
.bl-tags span { font-size: 12px; color: var(--text-faint); background: var(--panel-2); padding: 3px 9px; border-radius: 999px; }

/* ---------- tabelas (do markdown e da planilha de exemplo) ---------------- */
.bl-tabela { overflow-x: auto; margin: 0 0 18px; }
.bl-tabela table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.bl-tabela th, .bl-tabela td { padding: 9px 11px; border-top: 1px solid var(--border); text-align: left; }
.bl-tabela thead th {
  border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-sub);
}
.bl-planilha td { text-align: right; font-variant-numeric: tabular-nums; }
.bl-planilha td:first-child, .bl-planilha td:nth-child(2),
.bl-planilha th:first-child, .bl-planilha th:nth-child(2) { text-align: left; }
.bl-celula-erro { background: var(--accent-red-bg); color: var(--accent-red); font-weight: 700; }

/* ---------- listas de achados --------------------------------------------- */
.bl-achados { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 9px; }
.bl-achados li { font-size: 14.5px; line-height: 1.6; color: var(--text-sub); }
.bl-achados li strong { color: var(--text-main); }
.bl-total-erro { color: var(--accent-red); }
.bl-metodologia { font-size: 13.5px; line-height: 1.65; color: var(--text-sub); background: var(--panel-2); padding: 16px; border-radius: var(--radius-md); }

/* ---------- a leitura jurídica (a única parte escrita por IA) -------------
   Cartão com barra à esquerda, para o olho separar sem ler o aviso: acima são
   números de motor, aqui é enquadramento. */
.bl-analise {
  border-left: 3px solid var(--accent-blue); background: var(--panel);
  border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--accent-blue);
  border-radius: var(--radius-md); padding: 15px 18px; margin: 0 0 12px;
}
.bl-analise h3 { font-size: 15px; margin: 0 0 7px; }
.bl-analise p { font-size: 14.5px; line-height: 1.65; margin: 0; color: var(--text-sub); }
.bl-analise__fontes { margin-top: 9px !important; font-size: 13px !important; }
.bl-analise__fontes a { color: var(--accent-blue-texto); font-family: var(--sans); }

/* ---------- índice --------------------------------------------------------- */
.bl-sumario { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.bl-sumario a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 13.5px; font-weight: 600; color: var(--text-main); text-decoration: none;
}
.bl-sumario a:hover { border-color: var(--accent-blue); color: var(--accent-blue-texto); }
.bl-sumario a span { font-size: 11.5px; color: var(--text-faint); }

.bl-cat { margin-bottom: 38px; scroll-margin-top: 80px; }
.bl-cat h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 14px; }
.bl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bl-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 11px 0; border-top: 1px solid var(--border); font-size: 15px;
}
.bl-lista li > a { color: var(--text-main); text-decoration: none; font-weight: 600; }
.bl-lista li > a:hover { color: var(--accent-blue-texto); text-decoration: underline; }
.bl-lista li > span { font-size: 12.5px; color: var(--text-faint); margin-left: auto; }

/* ---------- chamada final -------------------------------------------------- */
.bl-cta {
  margin-top: 40px; padding: 22px; border-radius: var(--radius-lg);
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.bl-cta p { flex: 1 1 100%; margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-sub); }
.bl-cta p strong { color: var(--text-main); }

@media (max-width: 640px) {
  .bl-ficha > div { flex-direction: column; gap: 3px; }
  .bl-ficha dt { flex: none; }
  .bl-lista li > span { margin-left: 0; flex: 1 1 100%; }
}

/* páginas de recurso ------------------------------------------------------
   A captura aqui é RECORTE — um cartão, uma linha do tempo, um alerta —, não a
   tela inteira. Por isso a figura tem moldura: o recorte não traz borda de
   janela nenhuma, e sem a moldura ele se confunde com o corpo da página.
   Jogo único no tema claro, como no menu da home: o toggle da landing é
   `data-theme`, e `<picture>` com `prefers-color-scheme` não o seguiria. */
.bl-figura {
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-2);
}
/* ⚠️ `width: 100%` ESTICAVA o recorte estreito: um corte de 400px virava 940
   na tela e saía borrado. Recorte nasce no tamanho em que foi feito; só o que
   for maior que a coluna encolhe. */
.bl-figura img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bl-figura figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-sub);
  padding: 9px 14px;
  border-top: 1px solid var(--border);
}

.rec-indice { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec-indice a {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.rec-indice a:hover { border-color: var(--accent-blue); transform: translateY(-1px); }
.rec-indice strong { display: block; font-size: 16px; margin-bottom: 3px; color: var(--text-main); }
.rec-indice span { font-size: 13.5px; line-height: 1.55; color: var(--text-sub); }