/* ============================================================
   blog.css — estilos do índice e das páginas de artigo
   Complementa style.css. Usa as mesmas variáveis de :root.
   ============================================================ */

/* ---------- Índice ---------- */
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.blog__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog__grid{grid-template-columns:1fr}}

.post{display:flex;flex-direction:column}
.post__body{display:flex;flex-direction:column;flex:1}
.post__excerpt{flex:1}
.post__meta{font-size:12.5px;color:var(--muted-2);margin-top:2px}

/* ---------- Artigo ---------- */
.artigo{padding:8px 0 88px}
.artigo__head{padding:72px 0 28px;background:linear-gradient(180deg,var(--bg-2) 0%,#fff 100%)}
.artigo__cat{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-600);margin-bottom:14px}
.artigo__titulo{font-size:clamp(27px,3.8vw,42px);font-weight:800;margin-bottom:16px}
.artigo__info{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--muted)}
.artigo__info time{color:var(--muted)}

.artigo__corpo{font-size:17px;line-height:1.75;color:var(--text)}
.artigo__corpo p{margin:0 0 20px}
.artigo__lede{font-size:19px;line-height:1.65;color:var(--ink);border-left:3px solid var(--brand-400);padding-left:18px;margin-bottom:32px !important}
.artigo__corpo h2{font-size:25px;font-weight:700;margin:42px 0 16px;letter-spacing:-.02em}
.artigo__corpo h3{font-size:19px;font-weight:700;margin:30px 0 12px}
.artigo__corpo a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
.artigo__corpo a:hover{text-decoration-thickness:2px}

.artigo__lista{margin:0 0 22px;padding:0}
.artigo__lista li{position:relative;padding-left:26px;margin-bottom:11px;list-style:none}
.artigo__lista li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--brand-400)}
.artigo__lista--num{counter-reset:n}
.artigo__lista--num li{counter-increment:n;padding-left:34px}
.artigo__lista--num li::before{content:counter(n);position:static;float:left;margin-left:-34px;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-600);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

.artigo__nota{background:var(--brand-soft);border:1px solid var(--brand-soft-2);border-radius:var(--radius-sm);padding:16px 18px;font-size:15.5px;margin:0 0 24px !important}

.artigo__tabela-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.artigo__tabela{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.artigo__tabela th{background:var(--surface-2);text-align:left;font-weight:700;color:var(--ink);padding:12px 14px;border-bottom:1px solid var(--line)}
.artigo__tabela td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.artigo__tabela tr:last-child td{border-bottom:none}

.artigo__fonte{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:34px}

.artigo__cta{margin-top:48px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.artigo__cta h3{font-size:21px;font-weight:700;margin-bottom:10px}
.artigo__cta p{font-size:15.5px;color:var(--muted);margin-bottom:20px}

.artigo__voltar{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--brand-600);margin-top:36px}
.artigo__voltar:hover{text-decoration:underline}

.artigo__relacionados{margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.artigo__relacionados h2{font-size:20px;font-weight:700;margin-bottom:20px}
.artigo__rel-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:640px){.artigo__rel-lista{grid-template-columns:1fr}}
.artigo__rel-item{display:block;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;transition:border-color .2s,background .2s}
.artigo__rel-item:hover{border-color:var(--brand-soft-2);background:var(--brand-soft)}
.artigo__rel-item strong{display:block;font-size:15px;line-height:1.35;margin-bottom:4px}
.artigo__rel-item small{color:var(--muted);font-size:13px}