/* ══════════════════════════════════════════════════════════════════════
   assets/blog.css · estilo do blog e dos posts
   ══════════════════════════════════════════════════════════════════════
   Carregado DEPOIS de assets/lider.css, que traz os tokens, o cabeçalho,
   os botões e o rodapé. Aqui fica só o que é do blog: a listagem e a
   tipografia do artigo.

   O corpo do artigo é onde a página se justifica. Medida curta, entrelinha
   alta e escala grande: 18px de corpo é maior que o normal de propósito,
   porque texto sobre tabela de comissão é lido com atenção, não passado
   de olho.

   Mexer aqui muda todos os posts de uma vez. Não duplicar CSS nos posts.
   ══════════════════════════════════════════════════════════════════════ */

/* ── caixa de leitura ────────────────────────────────────────────────
   O HTML gerado pelo backend usa <article class="read">. O lider.css
   chama a mesma coisa de .leitura. Em vez de mexer no gerador e obrigar
   um deploy de backend, as duas apontam para o mesmo lugar aqui. Se um
   dia o gerador mudar para .leitura, esta regra pode sair. */
.read{max-width:var(--leitura);margin:0 auto;padding:0 28px}

/* ── listagem ───────────────────────────────────────────────────────── */
.bhero{padding:52px 0 26px;position:relative;overflow:hidden}
.bhero::after{
  content:"";position:absolute;right:-8%;top:-45%;width:60vw;height:60vw;
  max-width:760px;max-height:760px;pointer-events:none;
  background:radial-gradient(circle,rgba(34,179,6,.09),transparent 62%);
}
.bhero h1{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.0;
  font-size:clamp(34px,4.8vw,58px);max-width:17ch;margin:14px 0 14px;
}
.bhero h1 em{font-style:normal;color:var(--verde-fundo)}
.bhero p{font-size:17px;color:var(--grafite);max-width:62ch;line-height:1.62}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 32px}
.filtro{
  font-family:'Inter',sans-serif;font-size:13.2px;font-weight:600;color:var(--grafite);
  background:var(--branco);border:1.5px solid var(--borda);border-radius:99px;
  padding:8px 17px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s,transform .25s var(--curva);
}
.filtro:hover{transform:translateY(-1px);border-color:var(--grafite-2)}
.filtro[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:80px}
.post-card{
  display:flex;flex-direction:column;background:var(--branco);
  border:1px solid var(--borda);border-radius:18px;padding:26px 24px;
  position:relative;overflow:hidden;
  transition:transform .4s var(--curva),box-shadow .4s var(--curva);
}
.post-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--verde);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--curva);
}
.post-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(10,15,18,.10)}
.post-card:hover::before{transform:scaleX(1)}
.post-card .tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde-fundo);margin-bottom:14px;
}
.post-card h2{
  font-family:'Sora',sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.03em;line-height:1.22;margin-bottom:10px;
}
.post-card p{font-size:14.2px;color:var(--grafite);line-height:1.6;flex:1}
.post-card .pe{
  display:flex;align-items:center;gap:9px;margin-top:20px;padding-top:15px;
  border-top:1px solid var(--borda);font-size:11.5px;color:var(--grafite-2);
  font-family:'JetBrains Mono',monospace;
}
.vazio{
  grid-column:1/-1;padding:54px 26px;text-align:center;color:var(--grafite-2);
  border:1px dashed var(--borda);border-radius:18px;font-size:15px;
}

/* ── artigo ─────────────────────────────────────────────────────────── */
.trilha{
  padding:26px 0 0;font-size:12.5px;color:var(--grafite-2);
  display:flex;gap:9px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;
}
.trilha a:hover{color:var(--ink)}
.trilha span{color:var(--borda)}

article{padding:10px 0 70px}
.art-head{padding-bottom:32px;margin-bottom:40px;border-bottom:1px solid var(--borda)}
.art-head h1{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.02;
  font-size:clamp(32px,4.6vw,50px);margin:16px 0 20px;
}
.art-resumo{font-size:19.5px;color:var(--grafite);line-height:1.6}
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-size:12px;color:var(--grafite-2);font-family:'JetBrains Mono',monospace;
}
.art-meta b{font-weight:600;color:var(--grafite)}

article h2{
  font-family:'Sora',sans-serif;font-size:clamp(24px,3vw,32px);font-weight:800;
  letter-spacing:-.035em;line-height:1.14;margin:52px 0 18px;
}
article h3{
  font-family:'Sora',sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.025em;margin:34px 0 12px;
}
article p{font-size:18px;line-height:1.75;color:var(--grafite);margin-bottom:22px}
article ul,article ol{margin:0 0 24px 22px}
article li{font-size:18px;line-height:1.72;color:var(--grafite);margin-bottom:10px}
article strong{font-weight:650;color:var(--ink)}
article a:not(.btn){
  color:var(--verde-fundo);font-weight:600;
  border-bottom:1.5px solid rgba(34,179,6,.3);transition:border-color .2s;
}
article a:not(.btn):hover{border-bottom-color:var(--verde)}

/* Caixa de regra prática: é o trecho que a pessoa fotografa e manda no
   grupo do WhatsApp. Merece peso, e o fio verde marca que ali tem
   conclusão, não texto corrido. */
.dado{
  background:var(--papel-2);border:1px solid var(--borda);border-left:3px solid var(--verde);
  border-radius:0 14px 14px 0;padding:20px 24px;margin:0 0 28px;
}
.dado p{margin:0;font-size:16.5px;color:var(--grafite);line-height:1.62}
.dado p + p{margin-top:11px}
.dado .rot{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verde-fundo);
  display:block;margin-bottom:9px;
}

.tabela-box{overflow-x:auto;margin:0 0 30px;border:1px solid var(--borda);border-radius:14px}
table.dados{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
table.dados caption{
  caption-side:bottom;text-align:left;font-size:12.2px;color:var(--grafite-2);
  padding:13px 18px;border-top:1px solid var(--borda);background:var(--papel-2);line-height:1.5;
}
table.dados th{
  background:var(--papel-2);font-family:'JetBrains Mono',monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grafite-2);
  padding:13px 18px;text-align:left;white-space:nowrap;
}
table.dados td{padding:13px 18px;border-top:1px solid var(--borda);color:var(--grafite)}
table.dados td:not(:first-child),table.dados th:not(:first-child){
  font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;
}
table.dados tbody tr:nth-child(even){background:#fcfcfd}
/* Linha destacada = a que dói. Vermelho aqui significa custo, seguindo a
   mesma regra de cor do site inteiro. */
table.dados tr.destaque td{background:#fff6f6;font-weight:600;color:var(--ink)}

.art-cta{
  background:var(--ink);color:#fff;border-radius:22px;padding:38px 36px;
  margin:52px 0 0;position:relative;overflow:hidden;
}
.art-cta::after{
  content:"";position:absolute;right:-110px;bottom:-140px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(34,179,6,.16),transparent 62%);
}
.art-cta h2{
  font-family:'Sora',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.035em;
  line-height:1.1;margin:0 0 12px;color:#fff;position:relative;
}
.art-cta p{color:var(--névoa);font-size:16px;margin-bottom:24px;position:relative;line-height:1.6}
.art-cta .bs{display:flex;gap:11px;flex-wrap:wrap;position:relative}

.leia{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--borda)}
.leia h2{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.025em;margin:0 0 18px}
.leia ul{margin:0;list-style:none}
.leia li{margin-bottom:13px;font-size:16.5px;line-height:1.5}
.leia a{font-weight:600}

@media (max-width:1040px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){
  .posts{grid-template-columns:1fr}
  article p,article li{font-size:17px}
  .art-cta{padding:28px 24px}
  .dado{padding:16px 18px}
}