/* Blog do Presta Contas MEI — carregado SÓ pelas páginas de /blog/.
   Depende de /tokens.css, que vem antes: cores, .shell, .button e o cabeçalho
   vivem lá e não se repetem aqui. Um arquivo à parte, e não mais 150 linhas em
   tokens.css, porque as 7 páginas da landing não precisam de nada disto — e o
   tokens.css é cacheado 7 dias por elas.

   🪤 `style=""` inline não é opção: a CSP `style-src 'self'` do painel mata
   atributo de estilo EM SILÊNCIO (cicatriz de 25/09). Tudo o que é visual mora
   aqui, em classe. */

.blog{padding-block:clamp(26px,4vw,44px) clamp(44px,6vw,74px)}

/* ───────────────────────────── a lista (/blog/) */
.blog-topo{max-width:62ch;margin-bottom:clamp(26px,4vw,40px)}
.blog-topo h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0 0 14px}
.blog-topo p{margin:0;color:var(--muted);font-size:1.05rem}

.cartoes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.5vw,26px);
  /* 🪤 `1fr` e não `minmax(0,1fr)` corta no telemóvel: uma coluna de grid tem
     largura mínima = conteúdo, e um título longo estoura a caixa (cicatriz da
     landing). `minmax(0,…)` deixa a coluna encolher. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.cartao{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:box-shadow .18s ease,transform .18s ease}
.cartao:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.cartao-capa{display:block;line-height:0;background:var(--surface)}
.cartao-capa img{width:100%;height:auto;display:block}
.cartao-texto{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
.cartao-data{margin:0;color:var(--faint);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.cartao-texto h2{margin:0;font-size:1.16rem;line-height:1.3}
.cartao-texto h2 a{color:var(--ink);text-decoration:none}
.cartao-texto h2 a:hover{color:var(--brand)}
.cartao-texto p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}

/* ───────────────────────────── o artigo */
.artigo{max-width:760px}
.migalhas{margin:0 0 18px;color:var(--faint);font-size:.84rem}
.migalhas a{color:var(--brand-2)}
.artigo h1{font-size:clamp(1.72rem,3.5vw,2.45rem);line-height:1.2;margin:0 0 12px;
  /* `balance` só é aplicado onde o navegador o entende; onde não, cai no normal. */
  text-wrap:balance}
.artigo-data{margin:0 0 22px;color:var(--faint);font-size:.84rem;font-weight:600}
.artigo-capa{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);
  margin-bottom:clamp(24px,3.5vw,36px)}

/* ───────────────────────────── a prosa */
.prosa{font-size:1.06rem;line-height:1.72;color:var(--ink)}
.prosa>*+*{margin-top:1.1em}
.prosa h2{font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.3;margin-top:2em;
  margin-bottom:.55em;color:var(--brand-3)}
.prosa p{margin:0}
.prosa strong{font-weight:700}
.prosa a{color:var(--brand-2);text-decoration:underline;text-underline-offset:2px}
.prosa a:hover{color:var(--brand)}
/* Sub-título do texto: uma pergunta do FAQ, um «Três regras que evitam erro:».
   Parágrafo próprio, colado ao que vem a seguir — é a sua legenda, não um bloco
   independente. */
.prosa p.sub{margin-top:1.6em}
.prosa p.sub+p{margin-top:.35em}
.prosa ul,.prosa ol{margin:0;padding-left:1.4em}
.prosa li+li{margin-top:.5em}
.prosa hr{margin-block:2.2em;border:0;border-top:1px solid var(--line)}
.prosa blockquote{margin:0;padding:18px 22px;background:var(--brand-soft);
  border-left:4px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prosa blockquote p{margin:0;font-size:1.1rem;font-weight:600;color:var(--brand-3)}
.prosa code{background:var(--surface);padding:.12em .36em;border-radius:6px;
  font-size:.92em}
/* O rodapé legal de cada artigo é o último parágrafo em itálico: fica menor e
   mais apagado, para não competir com o texto. */
.prosa>p>em:only-child{color:var(--muted)}

/* Tabela. Uma de 3 colunas não cabe a 360px, então a caixa rola na horizontal e
   é focável pelo teclado — sem isso quem navega por teclado não alcança o que
   está fora do corte. */
.tabela-rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.tabela-rolavel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.prosa table{width:100%;border-collapse:collapse;font-size:.97rem}
.prosa thead th{text-align:left;background:var(--surface);color:var(--brand-3);
  font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 14px;white-space:nowrap}
.prosa tbody td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.prosa tbody tr:nth-child(2n) td{background:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ───────────────────────────── a caixa do produto, no fim do texto */
.cta-artigo{margin-top:1.6em;padding:clamp(22px,3vw,30px);background:var(--brand-soft);
  border:1px solid var(--lilas-soft);border-radius:var(--r-md);text-align:center}
.cta-artigo .button{width:100%;max-width:340px}
.cta-nota{margin:12px 0 0;color:var(--muted);font-size:.88rem}

/* ───────────────────────────── leia também */
.leia-tambem{margin-top:clamp(36px,5vw,56px);padding-top:26px;
  border-top:1px solid var(--line)}
.leia-tambem h2{margin:0 0 14px;font-size:1.1rem;color:var(--brand-3)}
.leia-tambem ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.leia-tambem a{color:var(--brand-2);font-weight:600;text-decoration:none}
.leia-tambem a:hover{color:var(--brand);text-decoration:underline}

@media(max-width:560px){
  .prosa{font-size:1.02rem}
  .cta-artigo .button{max-width:none}
}