/* ═══════════════════════════════════════════════════════════════════════════════
   blog-030.css — o Blog no padrão SITE-030 · 30/08/2026
   ═══════════════════════════════════════════════════════════════════════════════
   Carrega depois de styles.min.css (fontes v1, tokens, camadas 029/030). Substitui a
   blog-021.css inteira: aqui o blog deixa de ter identidade própria e passa a ser a mesma
   casa da homepage — Newsreader nos títulos, Manrope no corpo, navy e marfim.

   A régua é de LEITURA LONGA, não de landing: coluna de 60–70 caracteres, entrelinha
   generosa, intertítulos que respiram, e o CTA do Mapa só no fim, como convite.
   ═══════════════════════════════════════════════════════════════════════════════ */

body{background:var(--paper-100);color:var(--ink-900)}
.limite{width:min(100% - 48px, 1200px);margin-inline:auto}
.bloco{padding:var(--space-12) 0}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--space-4);top:var(--space-4);z-index:50;background:var(--paper-50);padding:10px 14px;border-radius:4px}

/* ── cabeçalho de página interna (igual ao das páginas legais) ───────────────── */
.pag-topo{position:sticky;top:0;z-index:20;background:var(--ink-900);color:var(--paper-50)}
.pag-topo__linha{display:flex;align-items:center;gap:var(--space-6);min-height:64px}
.pag-topo__marca{font-family:var(--font-serif);font-size:22px;color:var(--paper-50);text-decoration:none;letter-spacing:-.01em}
.pag-topo__marca em{font-style:italic;color:var(--accent-gold)}
.pag-topo__nav{display:none;gap:var(--space-6);margin-left:auto;font-size:13.5px}
.pag-topo__nav a{color:var(--paper-200);text-decoration:none}
.pag-topo__nav a:hover{color:var(--paper-50)}
.pag-topo__cta{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-gold);text-decoration:none;border:1px solid rgba(201,162,93,.5);border-radius:4px;padding:9px 13px;white-space:nowrap}
.pag-topo__cta:hover{background:rgba(201,162,93,.12)}

/* ── etiqueta de seção ───────────────────────────────────────────────────────── */
.k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-gold-graf)}

/* ── índice do blog ──────────────────────────────────────────────────────────── */
.blog-hero{padding-bottom:var(--space-8);border-bottom:var(--frame)}
.blog-hero h1{font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.12;letter-spacing:-.015em;
  color:var(--ink-900);margin:var(--space-4) 0 0;max-width:18ch}
.blog-hero .lead,.blog-hero p:not(.k){margin-top:var(--space-4);font-size:16.5px;line-height:1.6;color:var(--ink-500);max-width:54ch}

/* cada artigo é uma entrada editorial — linha, não cartão de SaaS */
.artigos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.artigos > li{padding:var(--space-8) 0;border-bottom:var(--frame)}
.artigos > li:first-child{padding-top:var(--space-8)}
.artigos__data,.artigos__meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.artigos h2,.artigos h3{font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.01em;
  color:var(--ink-900);margin:10px 0 0;max-width:26ch}
.artigos h2 a,.artigos h3 a{color:inherit;text-decoration:none}
.artigos h2 a:hover,.artigos h3 a:hover{color:var(--accent-gold-graf)}
.artigos p:not(.artigos__data):not(.artigos__ler):not(.artigos__meta){margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--ink-500);max-width:60ch}
.artigos__ler{margin-top:var(--space-4)}
.link-sec{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-700);text-decoration:none;border-bottom:1px solid var(--accent-gold-graf);padding-bottom:2px}
.link-sec:hover{color:var(--ink-900);border-bottom-width:2px}

/* ── artigo ──────────────────────────────────────────────────────────────────── */
.artigo__coluna{max-width:100%}
.artigo__voltar{margin-bottom:var(--space-6)}
.artigo h1{font-family:var(--font-serif);font-weight:400;font-size:32px;line-height:1.14;letter-spacing:-.015em;
  color:var(--ink-900);margin:var(--space-4) 0 0;max-width:20ch}
.artigo__resumo{margin-top:var(--space-6);font-size:17px;line-height:1.55;color:var(--ink-500);max-width:52ch}
.artigo__meta{margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--frame);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}

.artigo__corpo{margin-top:var(--space-8)}
.artigo__corpo p{font-size:17px;line-height:1.7;color:var(--ink-700);max-width:64ch}
.artigo__corpo p + p{margin-top:var(--space-5)}
.artigo__corpo strong{color:var(--ink-900);font-weight:600}
.artigo__corpo em{font-style:italic}
.artigo__corpo h2{font-family:var(--font-serif);font-weight:400;font-size:26px;line-height:1.25;letter-spacing:-.01em;
  color:var(--ink-900);margin:var(--space-12) 0 0;max-width:24ch}
.artigo__corpo h3{font-family:var(--font-serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink-900);margin:var(--space-8) 0 0;max-width:28ch}
.artigo__corpo h2 + p,.artigo__corpo h3 + p{margin-top:var(--space-4)}
.artigo__corpo a{color:var(--ink-900);text-decoration:none;border-bottom:1px solid var(--accent-gold-graf)}
.artigo__corpo a:hover{border-bottom-width:2px}
.artigo__corpo ul,.artigo__corpo ol{margin:var(--space-5) 0 0;padding:0 0 0 0;list-style:none;display:grid;gap:11px;max-width:62ch}
.artigo__corpo li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.6;color:var(--ink-700)}
.artigo__corpo ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1.5px;background:var(--accent-gold-graf)}
.artigo__corpo ol{counter-reset:n}
.artigo__corpo ol li{counter-increment:n}
.artigo__corpo ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:11px;color:var(--accent-gold-graf)}
.artigo__corpo blockquote{margin:var(--space-8) 0 0;padding-left:var(--space-5);border-left:2px solid var(--accent-gold-graf)}
.artigo__corpo blockquote p{font-family:var(--font-serif);font-size:21px;line-height:1.45;color:var(--ink-900);font-style:italic;max-width:44ch}
.artigo__corpo figure{margin:var(--space-8) 0 0}
.artigo__corpo img{display:block;width:100%;height:auto;border:var(--frame);border-radius:6px}
.artigo__corpo figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-500);max-width:56ch}
.artigo__corpo hr{margin:var(--space-12) 0 0;border:0;border-top:var(--frame)}

/* caixas laterais e notas do artigo: papel mais claro, sem virar banner */
.artigo aside,.artigo__nota{margin-top:var(--space-8);padding:var(--space-6);background:var(--paper-50);
  border:var(--frame);border-radius:6px}
.artigo aside p,.artigo__nota p{font-size:15px;line-height:1.6;color:var(--ink-500);max-width:58ch}

/* ── assinatura do autor ─────────────────────────────────────────────────────
   Estava só na folha antiga: sem estas regras a foto (560px de largura natural)
   estourava 218px para fora da tela no 390. */
.artigo__autor{margin-top:var(--space-12);padding-top:var(--space-8);border-top:var(--frame);
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-5);align-items:start}
.artigo__autor img{width:96px;max-width:100%;height:auto;display:block;border-radius:6px;border-bottom:3px solid var(--guarantee)}
.artigo__autor-nome{font-family:var(--font-serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--ink-900);margin:0}
.artigo__autor-bio{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink-500);max-width:56ch}
.artigo__autor-link{margin:12px 0 0;font-size:14px}

/* ── fecho: o CTA do Mapa, contextual e discreto ─────────────────────────────── */
.primeiro-passo{padding-top:var(--space-8)}
.primeiro-passo__caixa{background:var(--ink-900);color:var(--paper-50);border-radius:6px;padding:var(--space-8) var(--space-6)}
.primeiro-passo__caixa h2{font-family:var(--font-serif);font-weight:400;font-size:26px;line-height:1.22;color:var(--paper-50);
  margin:var(--space-3) 0 0;max-width:22ch}
.primeiro-passo__caixa .k{color:var(--accent-gold)}
.primeiro-passo__caixa .lead{margin-top:var(--space-4);font-size:15.5px;line-height:1.6;color:var(--paper-200);max-width:54ch}
.primeiro-passo__acoes{margin-top:var(--space-6);display:grid;gap:var(--space-4);justify-items:start}
.botao{display:inline-flex;align-items:center;gap:12px;background:var(--accent-gold);color:var(--ink-900);
  text-decoration:none;font-size:14.5px;padding:16px 20px;border-radius:4px;min-height:52px}
.botao:hover{filter:brightness(1.05)}
.primeiro-passo__acoes .link-sec{color:var(--paper-200);border-bottom-color:rgba(201,162,93,.6)}
.primeiro-passo__acoes .link-sec:hover{color:var(--paper-50)}
.footer-interno{margin-top:0}

/* ── DESKTOP ≥ 900 ───────────────────────────────────────────────────────────── */
@media (min-width:900px){
  .pag-topo__linha{min-height:72px}
  .pag-topo__nav{display:flex}
  .pag-topo__cta{margin-left:0}
  .bloco{padding:var(--space-16) 0}
  .blog-hero h1{font-size:46px}
  .artigos > li{padding:var(--space-8) 0;display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);gap:var(--space-8);align-items:start}
  .artigos__data{padding-top:6px}
  .artigos h2,.artigos h3{font-size:27px;margin-top:0}
  .artigo__coluna{max-width:none;display:grid;grid-template-columns:minmax(0,68ch);justify-content:center}
  .artigo h1{font-size:44px}
  .artigo__corpo p{font-size:18px}
  .artigo__corpo h2{font-size:30px}
  /* os quatro filhos caíam em zigue-zague nas duas colunas e o título ia parar à direita
     do próprio texto: a coluna 1 recebe a fala, a 2 recebe a ação. */
  .primeiro-passo__caixa{padding:var(--space-12);display:grid;grid-template-columns:1.3fr auto;gap:var(--space-8);align-items:center}
  .primeiro-passo__caixa > .k,.primeiro-passo__caixa > h2,.primeiro-passo__caixa > .lead{grid-column:1}
  .primeiro-passo__acoes{grid-column:2;grid-row:1/span 3;align-self:center}
  .primeiro-passo__caixa h2{font-size:32px}
  .primeiro-passo__acoes{margin-top:0}
  .artigo__autor{grid-template-columns:120px minmax(0,1fr);gap:var(--space-6)}
  .artigo__autor img{width:120px}
  .artigo__autor-nome{font-size:26px}
}

/* o footer das páginas internas usa h3 (a home usa h4): evita o salto h2→h4 na
   hierarquia de títulos. O estilo é o mesmo — herdado de .footer-col h4 na camada 029. */
.footer-029 .footer-col h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-gold);font-weight:500;margin-bottom:var(--space-2)}

/* foco de teclado visível: o sistema não trazia regra própria e o anel padrão some
   sobre o navy. Aqui ele existe e tem contraste nos dois fundos. */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-gold);outline-offset:3px;border-radius:2px}