/**
 * Estilo das páginas de artigo.
 *
 * Folha própria, servida como arquivo estático, e **não o CSS do app**: a
 * página do artigo é HTML gerado no build, não passa pelo React nem pelo
 * Tailwind, e carregar o bundle da SPA aqui custaria centenas de KB para
 * mostrar texto. As cores são as mesmas de `src/shared/styles/globals.css`.
 */
:root {
  /* Verde B, 5,20:1 com branco e 4,68:1 sobre o cinza das seções — escolhido
     pelo Gustavo em 15/10/2026. `--verde-escuro` era #00a846 (3,14:1), e
     `--verde`, que pintava os estados de hover, era #00c853 (2,24:1): os dois
     reprovavam, tanto como texto de link quanto como fundo do botão de CTA.

     **O hover ficou mais escuro, não mais claro.** Com os dois tokens no mesmo
     valor, passar o mouse não mudaria nada — e clarear é justamente o que
     derrubava o contraste. `--verde-hover` é o mesmo matiz dois degraus
     abaixo (6,78:1); nos links de texto entra também o sublinhado, para o
     estado não depender só de cor (WCAG 1.4.1). */
  --verde: #007E35;
  --verde-escuro: #007E35;
  --verde-hover: #006A2D;
  --escuro: #1a1a1a;
  --texto: #3a3d42;
  --cinza: #696F7D;
  --secao: #f1f3f5;
  --linha: #dbddde;
  --medida: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: #fff;
  line-height: 1.65;
  font-size: 17px;
}

a { color: var(--verde-escuro); }
a:hover { color: var(--verde-hover); text-decoration: underline; }

.envelope { max-width: var(--medida); margin: 0 auto; padding: 0 20px; }

/* ---- cabeçalho ----

   **Fundo escuro, como o cabeçalho do resto do site.** Até 15/10/2026 esta
   barra era branca, e o `/logo.svg` — que é a versão para fundo escuro, feita
   de #DBDDDF e branco — simplesmente sumia nela. Decisão do Gustavo: mesma
   cor, mesma altura e mesmo logo do cabeçalho da home e da LP.

   **Por que cor sólida e não o gradiente da home.** O cabeçalho do app pinta
   três gradientes `#3A3D42 → transparente` em `mix-blend-mode: multiply`, o
   que sobre um hero escuro fica perfeito e sobre o branco do artigo vira uma
   faixa que clareia até sumir. Medido: a dois terços da altura da barra o
   fundo chega a ~#696C70 e o texto branco cai para ~4,0:1, abaixo da AA. O
   `#1A1C1F` é a cor que esse mesmo cabeçalho assume quando fica opaco na LP
   (`rgba(26, 28, 31, 0.94)`), e é sólida: o contraste vale em qualquer ponto.

   Alturas e tamanho do logo vêm de `src/app/layout/Header.tsx`
   (`h-[60px] lg:h-[80px]` e `h-[20px] lg:h-[26px]`). São duas bases de código
   que não têm como compartilhar componente — esta página é HTML estático e não
   carrega React nem Tailwind —, então quem impede as duas de divergirem é
   `infra/qa/teste-cabecalho-artigos.mjs`, que compara as duas no navegador. */
.topo {
  background: #1A1C1F;
}
.topo__interno {
  max-width: 68rem; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* A linha do logo é o que tem de bater com a do app: 60px, 80px a partir de
   1024px. No mobile ela é a primeira de duas linhas (ver abaixo); no desktop
   ela é a barra inteira. */
.topo__linha { display: flex; align-items: center; min-height: 60px; }
.topo__logo { display: inline-flex; align-items: center; }
.topo__logo img { height: 20px; width: auto; }
.topo__nav { display: flex; gap: 18px; font-size: 14px; flex-shrink: 0; }

@media (min-width: 1024px) {
  .topo__linha { min-height: 80px; }
  .topo__logo img { height: 26px; }
}

/* **No mobile a navegação desce para uma segunda linha.** O logo do site traz a
   assinatura "apenas o prazer de dirigir" e, mesmo nos 20px do cabeçalho do
   app, ocupa 258px — com os três links ao lado dá 417px de conteúdo numa tela
   de 390px, e o último item era cortado (medido em 15/10/2026). Esconder um
   link seria pior: esta é a única navegação da página.

   A barra fica com duas linhas, como a do app no mobile — lá a segunda linha é
   a busca. A linha do logo continua com os mesmos 60px. */
@media (max-width: 1023px) {
  .topo__interno { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
  .topo__nav { padding-bottom: 12px; gap: 16px; font-size: 13px; }
}

/* Branco sobre #1A1C1F = 17,1:1. O dourado do hover é o mesmo
   `text-signa-gold` que o cabeçalho do app usa, e dá 7,2:1. */
.topo__nav a { color: #FFFFFF; text-decoration: none; }
.topo__nav a:hover { color: #C8A44E; text-decoration: underline; }

/* ---- migalhas ---- */
.migalhas { font-size: 13px; color: var(--cinza); padding: 18px 0 0; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migalhas li::after { content: "›"; margin-left: 6px; color: var(--linha); }
.migalhas li:last-child::after { content: ""; }
.migalhas a { color: var(--cinza); text-decoration: none; }
.migalhas a:hover { color: var(--verde-escuro); text-decoration: underline; }

/* ---- artigo ---- */
.artigo { padding: 8px 0 56px; }
.artigo h1 {
  font-size: clamp(28px, 6vw, 40px); line-height: 1.15; color: var(--escuro);
  margin: 14px 0 10px; letter-spacing: -0.02em;
}
.artigo h2 { font-size: clamp(21px, 4.4vw, 26px); line-height: 1.25; color: var(--escuro); margin: 38px 0 10px; }
.artigo h3 { font-size: 18px; color: var(--escuro); margin: 26px 0 8px; }
.artigo p { margin: 0 0 16px; }
.artigo ul, .artigo ol { margin: 0 0 16px; padding-left: 22px; }
.artigo li { margin-bottom: 6px; }
.artigo strong { color: var(--escuro); }
.artigo table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.artigo th, .artigo td { border: 1px solid var(--linha); padding: 8px 10px; text-align: left; vertical-align: top; }
.artigo th { background: var(--secao); color: var(--escuro); }
.artigo img { max-width: 100%; height: auto; }

.resumo { font-size: 19px; color: var(--cinza); margin: 0 0 20px; }

/* ---- assinatura do autor ---- */
.autor {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  margin: 0 0 28px; font-size: 14px;
}
.autor img { border-radius: 50%; flex-shrink: 0; }
.autor__nome { font-weight: 600; color: var(--escuro); text-decoration: none; }
.autor__nome:hover { text-decoration: underline; }
.autor__cargo { color: var(--cinza); margin: 2px 0 0; }
.autor__datas { color: var(--cinza); margin: 4px 0 0; font-size: 13px; }

/* ---- CTA ---- */
.cta {
  background: var(--secao); border: 1px solid var(--linha); border-radius: 12px;
  padding: 20px; margin: 28px 0; text-align: center;
}
.cta__titulo { font-size: 18px; font-weight: 600; color: var(--escuro); margin: 0 0 6px; }
.cta__apoio { font-size: 14px; color: var(--cinza); margin: 0 0 14px; }
.cta__botao, .cta-linha__botao, .cta-fixo__botao {
  display: inline-block; background: var(--verde-escuro); color: #fff; text-decoration: none;
  font-weight: 600; border-radius: 8px; padding: 12px 22px;
}
.cta__botao:hover, .cta-linha__botao:hover, .cta-fixo__botao:hover { background: var(--verde-hover); color: #fff; }
.cta-linha { background: var(--secao); border-left: 3px solid var(--verde-escuro); padding: 14px 16px; border-radius: 0 8px 8px 0; }
.cta-linha__botao { margin-left: 8px; padding: 8px 16px; font-size: 15px; }

/* fixo no rodapé, só no celular */
.cta-fixo { display: none; }
@media (max-width: 767px) {
  .cta-fixo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--linha); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .cta-fixo__botao { display: block; text-align: center; }
  body { padding-bottom: 76px; }
}

/* ---- FAQ, fontes, leia também ---- */
.bloco { margin: 44px 0 0; }
.bloco h2 { margin-top: 0; }
.faq__pergunta { font-weight: 600; color: var(--escuro); margin: 20px 0 4px; }
.fontes { font-size: 14px; color: var(--cinza); }
.leia { display: grid; gap: 12px; }
.leia a {
  display: block; border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px;
  text-decoration: none; color: var(--escuro);
}
.leia a:hover { border-color: var(--verde-escuro); }
.leia__cluster { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); margin-bottom: 4px; }

/* ---- índice ---- */
.indice h1 { font-size: clamp(30px, 6vw, 42px); color: var(--escuro); margin: 24px 0 8px; }
.indice__cluster { margin: 40px 0 0; }
.indice__data { font-size: 13px; color: var(--cinza); }

/* ---- página do autor ---- */
.perfil { display: flex; gap: 20px; align-items: center; margin: 24px 0 8px; }
.perfil img { border-radius: 50%; }
.perfil h1 { margin: 0 0 4px; font-size: clamp(26px, 5vw, 34px); }

/* ---- rodapé ---- */
.rodape { border-top: 1px solid var(--linha); background: var(--secao); margin-top: 56px; padding: 32px 0 40px; }
.rodape__colunas { max-width: 68rem; margin: 0 auto; padding: 0 20px; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rodape h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); margin: 0 0 10px; }
.rodape ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.rodape li { margin-bottom: 7px; }
.rodape a { color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--verde-escuro); text-decoration: underline; }