:root{
  --grafite:#0f0f10; --grafite-2:#16161a; --painel:#1c1c21; --linha:#2b2b31;
  --verde:#b8f000; --branco:#ffffff; --texto:#e9e9ee; --apagado:#a2a2ad;
  --icone-a:#22251a; --icone-b:#0b0c07;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--grafite);color:var(--texto);line-height:1.7;font-size:16px}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,100% - 32px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-weight:600;font-family:inherit;font-size:1rem;border:0;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-verde{background:var(--verde);color:var(--grafite)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

.logo{display:inline-flex;align-items:center;gap:.14em;font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--branco);font-size:1.6rem}
.tile{position:relative;flex:none;display:inline-grid;place-items:center;width:1.14em;height:1.14em;background:linear-gradient(155deg,var(--icone-a),var(--icone-b));box-shadow:inset 0 0 0 .075em var(--verde);color:var(--verde)}
.tile b{font-weight:600;font-size:.58em;line-height:1;letter-spacing:-.02em;transform:translateY(.04em)}
.tile svg{position:absolute;right:.1em;top:.1em;width:.22em;height:.22em}

header{position:sticky;top:0;z-index:50;background:rgba(15,15,16,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.menu{display:flex;gap:28px;align-items:center;font-weight:500;font-size:.95rem}
.menu a:not(.btn){color:var(--apagado)}
.menu a:not(.btn):hover,.menu a.ativo{color:var(--branco)}
.menu .btn{padding:10px 20px;font-size:.92rem}
.hamb{display:none;background:none;border:0;color:var(--branco);font-size:1.7rem;cursor:pointer}

/* lista */
.topo-blog{padding:72px 0 36px}
.olho{display:inline-flex;align-items:center;gap:8px;color:var(--verde);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.olho svg{width:12px;height:12px}
.topo-blog h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;color:var(--branco);letter-spacing:-.02em;line-height:1.1}
.topo-blog p{color:var(--apagado);max-width:600px;margin-top:12px;font-size:1.05rem}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filtros button{background:var(--painel);border:1px solid var(--linha);color:var(--apagado);font-family:inherit;font-size:.88rem;padding:8px 14px;cursor:pointer}
.filtros button[aria-pressed="true"]{border-color:var(--verde);color:var(--branco)}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding-bottom:90px}
.post{background:var(--painel);border:1px solid var(--linha);padding:26px;display:grid;gap:10px;align-content:start;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--verde);transform:translateY(-3px)}
.post .cat,.meta .cat{color:var(--verde);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.post h2{font-size:1.12rem;font-weight:600;color:var(--branco);line-height:1.35}
.post p{color:var(--apagado);font-size:.92rem}
.post small{color:#7d7d88;font-size:.8rem}

/* artigo */
.artigo{padding:64px 0 40px}
.artigo .col{max-width:740px;margin-inline:auto}
.voltar{color:var(--apagado);font-size:.9rem;display:inline-block;margin-bottom:28px}
.voltar:hover{color:var(--verde)}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:#8a8a95;font-size:.86rem;margin-bottom:14px}
.artigo h1{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:600;color:var(--branco);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.artigo .lead{color:var(--apagado);font-size:1.12rem;margin:18px 0 34px;padding-bottom:28px;border-bottom:1px solid var(--linha)}
.corpo h2{font-size:1.45rem;font-weight:600;color:var(--branco);margin:38px 0 12px;line-height:1.25}
.corpo p{margin-bottom:16px;color:#d4d4db}
.corpo ul,.corpo ol{margin:0 0 18px 22px;color:#d4d4db;display:grid;gap:8px}
.corpo strong{color:var(--branco);font-weight:600}
.corpo em{color:#cfe98a}
.corpo a{color:var(--verde);text-decoration:underline}
.fontes{margin-top:34px;padding:20px 22px;background:var(--grafite-2);border:1px solid var(--linha)}
.fontes h3{font-size:.95rem;color:var(--branco);margin-bottom:8px}
.fontes ul{margin-left:18px;display:grid;gap:6px;font-size:.88rem}
.fontes a{color:var(--apagado);text-decoration:underline;word-break:break-word}
.fontes p{font-size:.82rem;color:#7d7d88;margin-top:10px}
.cta{margin:46px 0 10px;background:linear-gradient(155deg,var(--icone-a),var(--icone-b));box-shadow:inset 0 0 0 3px var(--verde);padding:34px 28px;display:grid;gap:12px;justify-items:start;position:relative}
.cta > svg{position:absolute;right:20px;top:20px;width:26px;height:26px;color:var(--verde)}
.cta h3{font-size:1.35rem;color:var(--branco);font-weight:600;line-height:1.25}
.cta p{color:var(--apagado)}
.relacionados{max-width:740px;margin:50px auto 90px;display:grid;gap:14px}
.relacionados h3{font-size:1.1rem;color:var(--branco)}
.relacionados .lista{padding:0;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

footer{border-top:1px solid var(--linha);padding:34px 0;color:var(--apagado);font-size:.88rem}
footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .logo{font-size:1.3rem}
.zap{position:fixed;right:20px;bottom:20px;width:58px;height:58px;background:var(--verde);color:var(--grafite);display:grid;place-items:center;z-index:60}
.zap svg{width:28px;height:28px}

@media (max-width:900px){
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--grafite);flex-direction:column;align-items:flex-start;padding:22px 16px;border-bottom:1px solid var(--linha)}
  .menu.aberto{display:flex}
  .hamb{display:block}
}