*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#060807;--card:#0d100e;--card2:#111512;--claro:#D7E2EA;--verde:#7CE04A;--branco:#fff;--linha:rgba(124,224,74,.14)}
html,body{background:var(--bg);font-family:'Kanit',sans-serif;color:var(--claro);overflow-x:clip}
img{display:block;max-width:100%}a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sv-topo{padding:22px 0}
.sv-voltar{color:var(--verde);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.sv-voltar:hover{opacity:.75}
h1,h2,h3{font-weight:500;line-height:1.15}
.eyebrow{color:var(--verde);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:500;margin-bottom:14px}
/* HERO da listagem — estilo SOBRE MIM */
.gradiente{background:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.blog-hero{text-align:center;padding:56px 20px 20px}
.blog-hero .eyebrow{display:none}
.blog-hero h1{font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;font-size:clamp(3rem,12vw,160px);margin-bottom:24px}
.blog-hero-sub{color:#fff;font-weight:500;font-size:clamp(1.3rem,2.6vw,2rem);margin-bottom:14px}
.blog-hero p{color:var(--claro);font-weight:300;line-height:1.6;max-width:560px;margin:0 auto;font-size:clamp(.95rem,1.6vw,1.1rem);opacity:.7}
/* filtros */
.blog-filtros{display:flex;gap:10px;flex-wrap:wrap;padding:36px 0 28px}
.blog-filtro{background:var(--card);border:1px solid var(--linha);color:var(--claro);border-radius:999px;
  padding:9px 20px;font-family:'Kanit',sans-serif;font-size:.8rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.blog-filtro:hover{border-color:var(--verde)}
.blog-filtro.ativo{background:var(--verde);color:#060807;border-color:var(--verde)}
/* grade de cards */
.blog-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:32px}
.post-card{background:var(--card);border:1px solid var(--linha);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(124,224,74,.4)}
.post-card-capa{aspect-ratio:16/10;overflow:hidden;background:#0a0c0b}
.post-card-capa img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-card-capa img{transform:scale(1.05)}
.post-card-corpo{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.post-card-cat{color:var(--verde);text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;font-weight:500}
.post-card-data{opacity:.4;font-size:.7rem;font-weight:300}
.post-card h3{color:#fff;font-weight:500;font-size:1.1rem;line-height:1.25;margin-bottom:8px}
.post-card-resumo{opacity:.6;font-weight:300;font-size:.88rem;line-height:1.5;flex:1}
.post-card-seta{margin-top:16px;align-self:flex-end;width:38px;height:38px;border-radius:50%;background:var(--card2);
  border:1px solid var(--linha);display:grid;place-items:center;transition:background .2s}
.post-card:hover .post-card-seta{background:var(--verde)}
.post-card-seta svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:2;transition:stroke .2s}
.post-card:hover .post-card-seta svg{stroke:#060807}
/* carregar mais */
.blog-mais{display:flex;justify-content:center;padding:20px 0 60px}
.btn-mais{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--linha);color:var(--claro);
  border-radius:999px;padding:14px 30px;font-family:'Kanit',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:border-color .2s}
.btn-mais:hover{border-color:var(--verde)}
.btn-mais svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:2}
/* rodape + voltar ao topo */
.sv-rodape{border-top:1px solid var(--linha);padding:24px 0;display:flex;justify-content:space-between;opacity:.72;font-size:.82rem;font-weight:300;gap:16px;flex-wrap:wrap}
.sv-rodape a{text-decoration:underline}
.topo-btn{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--verde);color:#060807;font-size:20px;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;box-shadow:0 0 20px rgba(124,224,74,.45)}
.topo-btn.ver{opacity:1;pointer-events:auto}
.topo-btn:hover{transform:translateY(-3px)}
@media (max-width:900px){.blog-grade{grid-template-columns:1fr 1fr}.blog-hero{min-height:0;display:block}
  .blog-hero .hero-bg{position:relative;height:auto;aspect-ratio:16/9;z-index:0}
  .blog-hero::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(6,8,7,.5) 70%,transparent 100%)}
  .blog-hero-conteudo{padding:28px 0 8px}}
@media (max-width:560px){.blog-grade{grid-template-columns:1fr}}
/* header do blog */
.blog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px;position:relative;z-index:40}
.blog-header .logo{display:flex;align-items:center;gap:10px;font-weight:900;color:#fff;font-size:1.05rem;letter-spacing:-.01em}
.blog-header .logo img{width:36px;height:36px;object-fit:contain;border-radius:8px}
.blog-nav{display:flex;gap:28px;align-items:center}
.blog-nav a{color:var(--claro);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;transition:color .2s}
.blog-nav a:hover{color:var(--verde)}
.blog-nav a.ativo{color:var(--verde)}
@media (max-width:720px){
  .blog-nav{gap:16px}
  .blog-nav a{font-size:.68rem;letter-spacing:.04em}
  .blog-header .logo span{display:none}
}