/* ============================================================
   NORTH — Sistema visual "Editorial Ink" (teste v2)
   Tipografia real · sem degradês · layout de revista
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#FBF9F4;      /* fundo papel quente */
  --paper-2:#F3EEE3;    /* cartão */
  --ink:#181712;        /* tinta */
  --muted:#6E6A5E;      /* texto secundário */
  --rule:#E4DDCE;       /* linhas finas */
  --emerald:#0B6B4F;    /* acento principal */
  --emerald-deep:#084C38;
  --clay:#B5533A;       /* acento secundário (raro) */
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  counter-reset:sec;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 26px}

/* ---- Tipografia ---- */
h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,7vw,66px);
   line-height:1.02;letter-spacing:-.03em;margin:0 0 18px}
h2{font-family:var(--disp);font-weight:600;font-size:26px;letter-spacing:-.01em;
   margin:52px 0 16px;padding-top:22px;border-top:1px solid var(--rule)}
h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
   font-family:var(--mono);font-weight:500;font-size:13px;color:var(--emerald);
   display:block;margin-bottom:10px;letter-spacing:.1em}
h2.plain::before{content:none}
h3{font-family:var(--disp);font-weight:600;font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
p{margin:0 0 14px}
a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:600}
.lead{font-size:21px;line-height:1.5;color:#2c2a22;max-width:640px}
.muted,.mut{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-weight:500;text-transform:uppercase;
   letter-spacing:.2em;font-size:12px;color:var(--emerald);margin-bottom:16px;display:block}
.accent{color:var(--emerald)}
.clay{color:var(--clay)}

/* ---- Cabeçalho / marca ---- */
.mark{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.mark .dot{width:12px;height:12px;background:var(--emerald);border-radius:50%;display:inline-block}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- Secções ---- */
section{padding:8px 0}
.hero{padding:70px 0 40px}
.pill{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
   text-transform:uppercase;color:var(--emerald);border:1px solid var(--emerald);
   padding:6px 12px;border-radius:2px;margin-bottom:26px}

/* ---- Grelhas / cartões ---- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:20px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:720px){.g2,.g3{grid-template-columns:1fr}}
.cell{background:var(--paper);padding:22px}
.cell .n{font-family:var(--mono);font-size:12px;color:var(--emerald);letter-spacing:.1em;display:block;margin-bottom:10px}
.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:20px}

/* ---- Passos numerados ---- */
.step{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .idx{font-family:var(--mono);font-size:13px;color:var(--emerald);min-width:34px;padding-top:3px}

/* ---- Tabelas ---- */
table{width:100%;border-collapse:collapse;margin:14px 0}
th{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
   font-size:11px;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink)}
td{padding:13px 12px;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15.5px}
.val{font-family:var(--disp);font-weight:600;color:var(--ink);white-space:nowrap;font-size:18px}
.valm{font-family:var(--disp);font-weight:600;color:var(--emerald);white-space:nowrap;font-size:18px}

/* ---- Blocos de destaque ---- */
.note{border-left:2px solid var(--emerald);background:var(--paper-2);padding:16px 20px;margin:16px 0;border-radius:0 6px 6px 0}
.callout{background:var(--emerald);color:#F4F1E8;padding:26px;border-radius:6px;margin:18px 0}
.callout b{color:#fff}.callout .big{font-family:var(--disp);font-size:24px;font-weight:700}
.callout.clay{background:var(--clay)}
.internal{border:1px dashed var(--clay);border-radius:6px;padding:20px;margin-top:16px;background:#fdf6f3}
.internal h2{color:var(--clay);border:none;padding-top:0}
.internal h2::before{content:none}

/* ---- utilitários ---- */
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
   color:var(--emerald);border:1px solid var(--rule);padding:3px 9px;border-radius:2px}
.price{font-family:var(--disp)}
.price .num{font-size:30px;font-weight:700}
.price .per{color:var(--muted);font-size:15px}
.foot{padding:40px 0;margin-top:30px;border-top:1px solid var(--rule);color:var(--muted);
   font-family:var(--mono);font-size:12px;letter-spacing:.08em}
ul,ol{padding-left:20px}li{margin:6px 0}
code{font-family:var(--mono);font-size:.88em;background:var(--paper-2);padding:2px 6px;border-radius:3px}
hr{border:none;border-top:1px solid var(--rule);margin:26px 0}

/* ---- Logo ---- */
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:30px;display:block}
.logo.lg{font-size:34px}.logo.lg img{width:52px;height:52px}

/* ---- Stat tiles (com count-up) ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:22px}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);padding:26px 22px}
.stat .num{font-family:var(--disp);font-weight:700;font-size:44px;letter-spacing:-.02em;color:var(--emerald);line-height:1}
.stat .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---- Gatilho de dor ---- */
.hook{font-family:var(--disp);font-weight:600;font-size:clamp(21px,3.4vw,29px);line-height:1.28;letter-spacing:-.01em;margin:26px 0;padding-left:18px;border-left:3px solid var(--clay);color:#2c2a22}
.hook .accent{color:var(--emerald)}

/* ---- Gráfico de barras (animado) ---- */
.chart{margin:22px 0}
.chart .cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.bar{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:14px;margin:11px 0}
.bar .lbl{font-size:14px;color:var(--ink);text-align:right}
.bar .track{background:var(--paper-2);border-radius:5px;height:32px;overflow:hidden}
.bar .fill{height:100%;width:0;background:var(--emerald);border-radius:5px;transition:width 1.05s cubic-bezier(.2,.7,.2,1)}
.bar .fill.muted{background:var(--muted)}
.bar:hover .fill{filter:brightness(1.08)}
.reveal.in .bar .fill{width:var(--w)}
.bar .v{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;min-width:70px}
.bar .v.up{color:var(--emerald)}

/* ---- Funil ---- */
.funnel{margin-top:14px}
.frow{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:14px;margin:9px 0}
.frow .lbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:right}
.frow .track{height:36px}
.frow .fbar{height:36px;width:0;background:var(--emerald);border-radius:5px;transition:width 1.05s cubic-bezier(.2,.7,.2,1)}
.reveal.in .frow .fbar{width:var(--w)}
.frow .v{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink);min-width:64px}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}