/* =========================================================================
   Blog, tema CLARO. Sobrescreve as variáveis do estilo.css só nas páginas
   do blog (body.blog-page), então header, botões e rodapé reaproveitados
   ficam claros sem tocar no resto do site.
   ========================================================================= */
body.blog-page{
  --bg:        #f6f7fb;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #eef1f7;
  --linha:     rgba(18,22,45,.10);
  --linha-2:   rgba(18,22,45,.16);
  --txt:       #16182b;
  --txt-2:     #3f4459;
  --txt-3:     #6b7186;
  --sombra:    0 20px 50px -26px rgba(20,22,43,.20);
  --sombra-lg: 0 30px 70px -34px rgba(124,58,237,.28);
  background:var(--bg);
  color:var(--txt);
}
/* os brilhos de fundo são de tema escuro; some com eles no claro */
body.blog-page .brilhos{ display:none; }

/* header claro */
.topo-conta{
  position:sticky; top:0; z-index:50; height:var(--topo);
  border-bottom:1px solid var(--linha);
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px) saturate(1.4);
}
.topo-conta .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.blog-main, .post-main{ position:relative; z-index:1; padding:44px 0 70px; min-height:70vh; }

/* --------- hero da listagem --------- */
.blog-hero{ max-width:720px; margin:0 auto 44px; text-align:center; }
.blog-hero h1{ font-family:'Outfit',sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:.4rem 0 .8rem; }
.blog-hero p{ font-size:1.08rem; color:var(--txt-2); }

/* --------- grade de posts --------- */
.blog-grade{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.blog-card{
  display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--linha);
  border-radius:var(--raio); padding:26px; box-shadow:var(--sombra);
  transition:transform .22s, border-color .22s, box-shadow .22s;
}
.blog-card:hover{ transform:translateY(-4px); border-color:var(--rosa); box-shadow:var(--sombra-lg); }
.blog-card-cat{
  display:inline-block; font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rosa); margin-bottom:12px;
}
.blog-card h2, .blog-card h3{ font-family:'Outfit',sans-serif; font-weight:700; font-size:1.2rem; line-height:1.25; margin-bottom:10px; color:var(--txt); }
.blog-card p{ font-size:.94rem; color:var(--txt-2); margin-bottom:16px; flex:1; }
.blog-card-meta{ font-size:.8rem; color:var(--txt-3); }

/* --------- paginação --------- */
.blog-paginacao{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin-top:44px; }
.blog-paginacao a, .blog-paginacao span{
  min-width:42px; height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linha); border-radius:12px; font-weight:600; font-size:.95rem; color:var(--txt-2);
  background:var(--bg-2); transition:border-color .2s, color .2s, background .2s;
}
.blog-paginacao a:hover{ border-color:var(--rosa); color:var(--txt); }
.blog-paginacao .atual{ background:var(--grad); color:#fff; border-color:transparent; }
.blog-paginacao .reticencias{ border:none; background:none; min-width:auto; padding:0 2px; color:var(--txt-3); }

/* --------- post individual --------- */
.post{ max-width:720px; margin:0 auto; padding:0 24px; }
.post-migalha{ font-size:.85rem; color:var(--txt-3); margin-bottom:22px; }
.post-migalha a{ color:var(--txt-2); }
.post-migalha a:hover{ color:var(--rosa); }
.post-cat{
  display:inline-block; font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rosa); margin-bottom:14px;
}
.post h1{ font-family:'Outfit',sans-serif; font-weight:800; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; color:var(--txt); }
.post-meta{ font-size:.9rem; color:var(--txt-3); padding-bottom:26px; margin-bottom:30px; border-bottom:1px solid var(--linha); }

/* destaque: post de apoio faz parte de um guia */
.post-guia{
  margin:0 0 26px; padding:12px 18px; border-radius:var(--raio-sm);
  background:#f5f0ff; border:1px solid var(--linha-2); font-size:.92rem; color:var(--txt-2);
}
.post-guia a{ color:var(--rosa); font-weight:700; text-decoration:none; }
.post-guia a:hover{ text-decoration:underline; }

/* conteúdo do artigo */
.post-conteudo{ font-size:1.1rem; line-height:1.8; color:var(--txt-2); }
.post-conteudo h2{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.6rem; color:var(--txt); margin:2em 0 .7em; letter-spacing:-.02em; }
.post-conteudo h3{ font-family:'Outfit',sans-serif; font-weight:700; font-size:1.3rem; color:var(--txt); margin:1.6em 0 .5em; }
.post-conteudo p{ margin:0 0 1.3em; }
.post-conteudo a{ color:var(--rosa); text-decoration:underline; text-underline-offset:3px; }
.post-conteudo a:hover{ color:var(--violeta); }
.post-conteudo strong{ color:var(--txt); font-weight:700; }
.post-conteudo ul, .post-conteudo ol{ margin:0 0 1.3em; padding-left:1.4em; }
.post-conteudo li{ margin-bottom:.6em; }
.post-conteudo ul li{ list-style:disc; }
.post-conteudo ol li{ list-style:decimal; }
.post-conteudo blockquote{
  margin:1.6em 0; padding:16px 24px; border-left:4px solid var(--rosa);
  background:#fdf2f8; border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  color:var(--txt); font-style:italic; font-size:1.08rem;
}
.post-conteudo img{ border-radius:var(--raio); margin:1.5em 0; }
.post-conteudo h2:first-child, .post-conteudo p:first-child{ margin-top:0; }

/* CTA no fim do post */
.post-cta{
  margin:44px 0 0; padding:44px 32px; text-align:center;
  background:linear-gradient(135deg,#f5f0ff,#fdf0f7);
  border:1px solid var(--linha-2); border-radius:var(--raio-lg);
}
.post-cta-emoji{ font-size:2.6rem; display:block; margin-bottom:8px; }
.post-cta h3{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.5rem; margin-bottom:.6rem; color:var(--txt); }
.post-cta p{ max-width:480px; margin:0 auto 1.6rem; color:var(--txt-2); }

/* outros posts */
.post-outros{ max-width:1000px; margin:64px auto 0; padding:0 24px; }
.post-outros h2{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.4rem; margin-bottom:22px; color:var(--txt); }

/* rodapé claro */
.rodape-conta{ border-top:1px solid var(--linha); background:var(--bg-2); padding:26px 0; position:relative; z-index:1; font-size:.85rem; color:var(--txt-3); }
.rodape-conta .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.rodape-conta a{ color:var(--txt-2); }
.rodape-conta a:hover{ color:var(--rosa); }

@media (max-width:560px){
  .post{ padding:0 18px; }
  .blog-main, .post-main{ padding:28px 0 54px; }
}