/* Blog Moss do Brasil — identidade do site principal */
:root{
  --bg:#0b0b10;--bg2:#101018;--ink:#f4f4f6;--ink2:#b7b7c2;--dim:#7c7c8a;
  --or:#FF6A00;--or2:#FF8F2E;--line:rgba(255,255,255,.09);--lineor:rgba(255,106,0,.35);
  --hd:'Barlow Condensed',sans-serif;--bd:'Barlow',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--bd);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* grain igual ao site */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,56px);background:linear-gradient(rgba(11,11,16,.85),rgba(11,11,16,0));backdrop-filter:blur(6px)}
nav .logo img{height:38px;filter:drop-shadow(0 0 14px rgba(255,106,0,.3))}
nav .pill{display:flex;gap:.2rem;padding:.35rem;border-radius:999px;background:rgba(11,11,16,.55);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(160%)}
nav .pill a{padding:.5rem .95rem;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--ink2);transition:.25s var(--ease)}
nav .pill a:hover,nav .pill a.on{color:var(--ink);background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.35rem;border-radius:999px;font-family:var(--hd);font-weight:800;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent;transition:.25s var(--ease);white-space:nowrap;cursor:pointer}
.btn-o{background:var(--or);color:#0b0b0f;box-shadow:0 0 30px rgba(255,106,0,.35)}
.btn-o:hover{background:var(--or2);box-shadow:0 0 50px rgba(255,106,0,.55)}
@media(max-width:820px){nav .pill{display:none}}

/* cabeçalho da listagem */
.bloghead{padding:170px 0 40px}
.eyebrow{font:600 .8rem/1 var(--bd);letter-spacing:.34em;text-transform:uppercase;color:var(--or)}
.bloghead h1{font:800 clamp(3rem,8vw,6.5rem)/0.95 var(--hd);text-transform:uppercase;letter-spacing:-.01em;margin-top:14px}
.bloghead h1 em{font-style:normal;color:var(--or)}
.bloghead p{color:var(--ink2);max-width:640px;margin-top:18px}

/* destaque + grid */
.feature{position:relative;display:block;border-radius:26px;overflow:hidden;border:1px solid var(--line);margin:34px 0 26px;transition:border-color .3s}
.feature:hover{border-color:var(--lineor)}
.feature img{width:100%;aspect-ratio:21/9;object-fit:cover;transition:transform .8s var(--ease)}
.feature:hover img{transform:scale(1.03)}
.feature .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,11,16,.94) 92%)}
.feature .tx{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3.5vw,44px)}
.feature h2{font:800 clamp(1.8rem,4.4vw,3.4rem)/1 var(--hd);text-transform:uppercase;max-width:900px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding-bottom:90px}
.card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--lineor)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card .tx{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font:700 1.45rem/1.1 var(--hd);text-transform:uppercase}
.card p{color:var(--ink2);font-size:.95rem;flex:1}
.meta{display:flex;align-items:center;gap:10px;font:600 .72rem/1 var(--bd);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.meta .tag{color:var(--or)}

/* página da matéria */
.post-hero{position:relative;height:min(62vh,640px);min-height:380px;overflow:hidden}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,16,.35),rgba(11,11,16,.2) 40%,var(--bg) 98%)}
.post-head{max-width:880px;margin:-120px auto 0;position:relative;padding:0 clamp(20px,4vw,56px)}
.post-head h1{font:800 clamp(2.4rem,6vw,4.6rem)/0.98 var(--hd);text-transform:uppercase;margin:16px 0 18px}
article{max-width:880px;margin:0 auto;padding:34px clamp(20px,4vw,56px) 60px}
article p{margin:0 0 22px;color:#d6d6de}
article h2{font:700 clamp(1.5rem,3vw,2.2rem)/1.05 var(--hd);text-transform:uppercase;margin:40px 0 16px}
article h2::before{content:"";display:inline-block;width:26px;height:4px;background:var(--or);border-radius:2px;margin-right:12px;vertical-align:middle}
article strong{color:var(--ink)}
article blockquote{border-left:3px solid var(--or);padding:6px 0 6px 22px;margin:28px 0;font:600 1.35rem/1.4 var(--hd);color:var(--ink)}
article ul{margin:0 0 22px 20px;color:#d6d6de}
article li{margin-bottom:8px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:30px 0}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px}
.stat b{display:block;font:800 2.2rem/1 var(--hd);color:var(--or)}
.stat span{font:600 .72rem/1.4 var(--bd);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fonte{border-top:1px solid var(--line);margin-top:36px;padding-top:18px;font-size:.85rem;color:var(--dim)}
.fonte a{color:var(--ink2);text-decoration:underline}

/* CTA final */
.cta-blog{max-width:880px;margin:0 auto 90px;padding:0 clamp(20px,4vw,56px)}
.cta-blog .box{background:linear-gradient(160deg,rgba(255,106,0,.14),rgba(255,106,0,.03));border:1px solid var(--lineor);border-radius:22px;padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.cta-blog h3{font:800 clamp(1.6rem,3.4vw,2.4rem)/1 var(--hd);text-transform:uppercase}
.cta-blog p{color:var(--ink2);margin-top:6px}

footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--dim);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}