/* =====================================================================
   BLOG — visual do conteúdo.
   Herda cor e fonte do site quando existirem as variáveis abaixo; se não
   existirem, usa os valores de reserva. Assim o mesmo arquivo serve para
   qualquer site sem precisar de ajuste.
   ===================================================================== */
.blog-corpo{
  --b-tinta:   var(--texto, #171B21);
  --b-tinta-2: var(--texto-2, #59616E);
  --b-tinta-3: var(--texto-3, #8A929E);
  --b-borda:   var(--borda, #DFE3E8);
  --b-areia:   var(--areia, #F4F6F8);
  --b-destaque:var(--amarelo, #1A6FD4);
  --b-raio:    var(--raio-g, 14px);
  --b-sombra:  var(--sombra, 0 1px 2px rgba(13,15,18,.04), 0 8px 24px rgba(13,15,18,.06));
  padding: clamp(2rem, 5vw, 4rem) 0;
  color: var(--b-tinta);
}

.blog-cabecalho{ max-width:760px; margin:0 0 2.2rem; }
.blog-cabecalho h1{ font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.15; margin:0 0 .6rem; letter-spacing:-.02em; }
.blog-cabecalho p{ color:var(--b-tinta-2); font-size:1.05rem; margin:0; }

/* ---------- Assuntos ---------- */
.blog-assuntos{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.blog-assuntos a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .9rem; border-radius:99px; text-decoration:none;
  font-size:.88rem; font-weight:600; color:var(--b-tinta);
  background:#fff; border:1px solid var(--b-borda);
}
.blog-assuntos a span{ font-size:.75rem; color:var(--b-tinta-3); }
.blog-assuntos a.atual{ background:var(--b-tinta); border-color:var(--b-tinta); color:#fff; }
.blog-assuntos a.atual span{ color:#fff; opacity:.7; }

/* ---------- Lista ---------- */
.blog-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:1.4rem; }
.blog-cartao{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--b-borda); border-radius:var(--b-raio);
  overflow:hidden; box-shadow:var(--b-sombra); transition:transform .2s, box-shadow .2s;
}
.blog-cartao:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(13,15,18,.10); }
.blog-cartao__foto{ display:block; aspect-ratio:16/10; background:var(--b-areia); overflow:hidden; }
.blog-cartao__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-cartao__sem-foto{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:2.4rem; font-weight:800; color:var(--b-tinta-3); background:var(--b-areia);
}
.blog-cartao__corpo{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-cartao h2{ font-size:1.12rem; line-height:1.35; margin:0; }
.blog-cartao h2 a{ color:inherit; text-decoration:none; }
.blog-cartao h2 a:hover{ text-decoration:underline; }
.blog-cartao p{ color:var(--b-tinta-2); font-size:.94rem; margin:0; }
.blog-cartao__pe{ margin-top:auto; padding-top:.5rem; display:flex; gap:.4rem; font-size:.83rem; color:var(--b-tinta-3); }

.blog-etiqueta{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--b-tinta-3); text-decoration:none;
}

.blog-vazio{ padding:3rem 0; color:var(--b-tinta-2); }

.blog-paginas{ display:flex; gap:.4rem; margin-top:2.5rem; }
.blog-paginas a{
  min-width:40px; height:40px; display:grid; place-items:center; text-decoration:none;
  border:1px solid var(--b-borda); border-radius:8px; color:var(--b-tinta); font-weight:600; background:#fff;
}
.blog-paginas a.atual{ background:var(--b-tinta); border-color:var(--b-tinta); color:#fff; }

/* ---------- Artigo ---------- */
.blog-artigo{ max-width:720px; margin:0 auto; }
.blog-migalha{ margin:0 0 1.5rem; }
.blog-migalha a, .blog-voltar{ color:var(--b-tinta-2); text-decoration:none; font-weight:600; font-size:.92rem; }
.blog-migalha a:hover{ color:var(--b-tinta); }
.blog-artigo__topo h1{ font-size:clamp(1.8rem, 4.2vw, 2.6rem); line-height:1.18; margin:.4rem 0 .8rem; letter-spacing:-.02em; }
.blog-artigo__resumo{ font-size:1.14rem; color:var(--b-tinta-2); line-height:1.6; margin:0 0 1rem; }
.blog-artigo__meta{ font-size:.88rem; color:var(--b-tinta-3); margin:0 0 2rem; }
.blog-artigo__capa{ margin:0 0 2.2rem; }
.blog-artigo__capa img{ width:100%; height:auto; border-radius:var(--b-raio); display:block; }

/* Texto: medida de linha confortável, que é o que faz ler até o fim */
.blog-texto{ font-size:1.08rem; line-height:1.75; }
.blog-texto > *{ margin:0 0 1.3rem; }
.blog-texto h2{ font-size:1.5rem; line-height:1.3; margin:2.4rem 0 .9rem; letter-spacing:-.01em; }
.blog-texto h3{ font-size:1.22rem; line-height:1.35; margin:2rem 0 .7rem; }
.blog-texto ul, .blog-texto ol{ padding-left:1.4rem; }
.blog-texto li{ margin-bottom:.5rem; }
.blog-texto a{ color:var(--b-tinta); text-decoration:underline; text-underline-offset:3px; }
.blog-texto img{ max-width:100%; height:auto; border-radius:var(--b-raio); display:block; }
.blog-texto figure{ margin:2rem 0; }
.blog-texto figcaption{ font-size:.87rem; color:var(--b-tinta-3); margin-top:.6rem; text-align:center; }
.blog-texto blockquote{
  margin:2rem 0; padding:.3rem 0 .3rem 1.3rem;
  border-left:3px solid var(--b-destaque); color:var(--b-tinta-2); font-size:1.1rem;
}
.blog-texto hr{ border:0; border-top:1px solid var(--b-borda); margin:2.5rem 0; }
.blog-texto table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.blog-texto th, .blog-texto td{ border:1px solid var(--b-borda); padding:.6rem .8rem; text-align:left; }
.blog-texto th{ background:var(--b-areia); font-weight:700; }

.blog-relacionados{ max-width:1100px; margin:4rem auto 0; }
.blog-relacionados h2{ font-size:1.3rem; margin:0 0 1.2rem; }

@media (max-width:640px){
  .blog-grade{ grid-template-columns:1fr; }
  .blog-texto{ font-size:1.04rem; }
}