/* Blog ImpactaSales — estilo compartilhado (reusa a identidade do site) */
:root{
  --ground:#F4F7F4; --surface:#FFFFFF; --surface-2:#EEF4F0;
  --ink:#101613; --muted:#55655C; --faint:#7C8B82;
  --border:#E2E9E3; --brand:#0A9E48; --brand-strong:#0A7A39;
  --tint:#E9F7EE;
  --shadow:0 1px 2px rgba(16,22,19,.04),0 14px 36px -14px rgba(16,22,19,.16);
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  :root{} body{}
}}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#090D0A; --surface:#111713; --surface-2:#161E18;
  --ink:#E9F2EC; --muted:#93A69A; --faint:#6E8175;
  --border:#202A23; --brand:#34D677; --brand-strong:#86ECAC;
  --tint:#11201A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -18px rgba(0,0,0,.65);
}}
:root[data-theme="dark"]{
  --ground:#090D0A; --surface:#111713; --surface-2:#161E18;
  --ink:#E9F2EC; --muted:#93A69A; --faint:#6E8175;
  --border:#202A23; --brand:#34D677; --brand-strong:#86ECAC;
  --tint:#11201A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif; line-height:1.15; color:var(--ink)}
a{color:var(--brand-strong)}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* NAV */
nav{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--ground) 86%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:9px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px; color:var(--ink); text-decoration:none}
.brand b{color:var(--brand)}
.mark{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:500; font-size:15px}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-weight:600; font-size:15px; padding:11px 18px; text-decoration:none; cursor:pointer; border:1px solid transparent}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-strong)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border)}
@media (max-width:640px){ .hide-sm{display:none} }

/* BREADCRUMB */
.crumb{font-size:13px; color:var(--faint); margin:26px 0 10px}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--brand-strong)}

/* ARTIGO */
.article{max-width:760px; margin:0 auto; padding:0 20px 40px}
.article h1{font-size:clamp(30px,5vw,46px); font-weight:800; margin:6px 0 10px}
.article .meta{color:var(--faint); font-size:14px; margin-bottom:28px}
.prose{color:var(--ink)}
.prose p{margin:0 0 18px}
.prose h2{font-size:clamp(22px,3.4vw,30px); font-weight:700; margin:38px 0 12px}
.prose h3{font-size:19px; font-weight:700; margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px}
.prose li{margin:7px 0}
.prose strong{color:var(--ink)}
.prose .lead{font-size:20px; color:var(--muted); margin-bottom:24px}
.prose blockquote{margin:22px 0; padding:14px 18px; border-left:3px solid var(--brand); background:var(--surface-2); border-radius:0 10px 10px 0; color:var(--muted)}

/* CTA box dentro do artigo */
.cta-box{margin:34px 0; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--tint); box-shadow:var(--shadow)}
.cta-box h3{margin:0 0 6px; font-size:21px}
.cta-box p{margin:0 0 14px; color:var(--muted)}

/* INDEX do blog */
.blog-hero{padding:46px 0 10px; text-align:center}
.blog-hero h1{font-size:clamp(32px,5vw,48px); font-weight:800; margin:0 0 8px}
.blog-hero p{color:var(--muted); font-size:19px; max-width:620px; margin:0 auto}
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; padding:30px 0 50px}
.post-card{display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:22px; transition:transform .15s, box-shadow .15s}
.post-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.post-card .tag{display:inline-block; font-size:12px; font-weight:600; color:var(--brand-strong); background:var(--tint); padding:3px 9px; border-radius:999px; margin-bottom:10px}
.post-card h2{font-size:20px; font-weight:700; margin:0 0 7px}
.post-card p{margin:0; color:var(--muted); font-size:15px}

/* Funil visual (ilustração dentro do artigo) */
.funnel-vis{margin:22px auto; display:flex; flex-direction:column; gap:7px; align-items:center; max-width:460px}
.fstep{color:#fff; border-radius:9px; padding:11px 14px; text-align:center; font-weight:600; font-size:15px; line-height:1.25; box-shadow:var(--shadow)}
.fstep span{display:block; font-weight:400; font-size:12px; opacity:.9; margin-top:1px}
.fcap{font-size:13px; color:var(--faint); text-align:center; margin:-6px 0 18px}

/* Exemplo numérico destacado */
.example{margin:22px 0; padding:18px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface)}
.example strong{color:var(--ink)}

/* Continue lendo */
.related{margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--border)}
.related h2{font-size:18px; margin:0 0 12px}
.related a{display:block; text-decoration:none; color:var(--ink); padding:12px 14px; border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface)}
.related a:hover{border-color:var(--brand); color:var(--brand-strong)}
.related a small{display:block; color:var(--faint); font-weight:400; font-size:13px; margin-top:2px}

/* FOOTER */
footer{border-top:1px solid var(--border); background:var(--surface)}
.foot-in{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; flex-wrap:wrap; color:var(--faint); font-size:14px}