/* ============================================================
   LP Segmentos — Impulse Maps
   Identidade oficial: coral #FF4438 | ink #0A0A0A | paper #FAF8F3
   Fontes: Fraunces (display) · Manrope (body) · JetBrains Mono (eyebrow)
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --ink-soft:#141414;
  --paper:#FAF8F3;
  --cream:#F2EDE1;
  --coral:#FF4438;
  --gold:#C9A24A;
  --muted:#6B6358;
  --on-ink:#FAF8F3;
  --on-ink-mu:rgba(250,248,243,.62);
  --wa:#25D366;
  --font-body:"Manrope",-apple-system,system-ui,sans-serif;
  --font-display:"Fraunces","Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--on-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(250,248,243,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{
  height:57px;width:auto;display:block;
  background:#EDEAE2;padding:11px 19px;border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.header-badge{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);border:1px solid rgba(255,68,56,.4);
  padding:.4rem .7rem;border-radius:100px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:64px 0 56px;
  text-align:center;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255,68,56,.16), transparent 70%),
    linear-gradient(180deg,#0d0d0d,#0a0a0a);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(250,248,243,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(250,248,243,.025) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(700px 400px at 50% 20%,#000,transparent 80%);
          mask-image:radial-gradient(700px 400px at 50% 20%,#000,transparent 80%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-mu);
  background:rgba(250,248,243,.05);border:1px solid rgba(250,248,243,.1);
  padding:.5rem .9rem;border-radius:100px;margin-bottom:1.6rem;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,68,56,.18)}

h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2rem,5.4vw,3.4rem);
  line-height:1.08;letter-spacing:-.02em;
  max-width:18ch;margin-bottom:1.2rem;
}
.h1-pre{color:var(--coral)}
.sub{
  font-size:clamp(1rem,2.4vw,1.18rem);
  color:var(--on-ink-mu);max-width:54ch;margin-bottom:2.4rem;
}

/* ---------- VSL ---------- */
.vsl{
  position:relative;                 /* âncora da moldura de progresso */
  width:100%;max-width:360px;margin:0 auto 2rem;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(250,248,243,.12);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,68,56,.06);
  background:#000;
}
.vsl-video{display:block;width:100%;aspect-ratio:9/16;background:#000;object-fit:cover}

/* Moldura de progresso perimetral — preenche em degradê conforme o vídeo anda */
.vsl-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.vsl-ring-track{
  stroke:rgba(250,248,243,.14);
  stroke-width:4;
  vector-effect:non-scaling-stroke;
}
.vsl-ring-fill{
  stroke:url(#vslGrad);
  stroke-width:5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:100;            /* começa vazio */
  transition:stroke-dashoffset .25s linear;
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(255,90,60,.9));
}
.vsl-ring.is-active .vsl-ring-fill{opacity:1}

/* ---------- CTA ---------- */
.cta-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:700;font-size:1.08rem;
  text-decoration:none;color:#062b16;
  background:var(--wa);
  padding:1.05rem 2.1rem;border-radius:100px;
  box-shadow:0 14px 36px -10px rgba(37,211,102,.6);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(37,211,102,.7);background:#22c35e}
.cta-btn svg{flex:0 0 auto}
.cta-sub{margin-top:.95rem;font-size:.9rem;color:var(--on-ink-mu)}

/* ---------- 3 AJUSTES ---------- */
.ajustes{background:var(--paper);color:var(--ink);padding:72px 0}
.sec-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.3rem);letter-spacing:-.02em;
  text-align:center;max-width:20ch;margin:0 auto 2.6rem;line-height:1.12;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.card{
  background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:16px;
  padding:1.8rem 1.6rem;text-align:left;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(10,10,10,.22)}
.card .num{
  font-family:var(--font-mono);font-size:.95rem;font-weight:600;
  color:var(--coral);display:inline-block;margin-bottom:1rem;
  border:1px solid rgba(255,68,56,.3);border-radius:8px;padding:.25rem .55rem;
}
.card h3{font-family:var(--font-body);font-size:1.18rem;font-weight:700;margin-bottom:.5rem;line-height:1.25}
.card p{font-size:.97rem;color:var(--muted)}
.cards-rodape{
  max-width:64ch;margin:2.4rem auto 0;text-align:center;
  font-size:1.02rem;line-height:1.6;color:var(--ink);
  padding-top:1.6rem;border-top:1px solid rgba(10,10,10,.1);
}
.cards-rodape{color:#3d3833}

/* ---------- PROVA / COMERCIAL ---------- */
.prova{background:var(--cream);color:var(--ink);padding:48px 0;border-top:1px solid rgba(10,10,10,.06)}
.prova-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.stats{display:flex;gap:2.4rem;flex-wrap:wrap}
.stat .num{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1}
.stat .num b{color:var(--gold);font-weight:600}
.stat .label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.assinatura{text-align:right}
.assina-nome{font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.assina-titulo{font-size:.85rem;color:var(--muted)}

/* ---------- CTA FINAL ---------- */
.cta-final{
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(255,68,56,.18), transparent 70%),
    var(--ink);
  color:var(--on-ink);padding:72px 0;text-align:center;
}
.cta-final-inner{display:flex;flex-direction:column;align-items:center}
.cta-final h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.2rem);letter-spacing:-.02em;line-height:1.14;
  max-width:22ch;margin-bottom:.9rem;
}
.cta-final p{color:var(--on-ink-mu);margin-bottom:2rem;max-width:46ch}

/* ---------- FOOTER ---------- */
.site-footer{background:#070707;color:var(--on-ink-mu);padding:28px 0;text-align:center;font-size:.85rem}
.site-footer a{color:var(--coral);text-decoration:none;font-weight:600}
.site-footer a:hover{text-decoration:underline}

/* ---------- RESPONSIVE (mobile-first: 99% dos acessos via WhatsApp) ---------- */
@media (max-width:760px){
  .wrap{padding:0 18px}
  .cards{grid-template-columns:1fr;gap:1rem}
  .prova-inner{flex-direction:column;text-align:center}
  .assinatura{text-align:center}
  .stats{justify-content:center;gap:1.6rem;row-gap:1.2rem}
  .header-badge{display:none}
  .header-inner{height:72px;justify-content:center}
  .logo{height:52px}

  .hero{padding:30px 0 40px}
  .eyebrow{font-size:.62rem;margin-bottom:1.1rem;padding:.45rem .8rem;line-height:1.4}
  h1{font-size:clamp(1.7rem,8vw,2.3rem);margin-bottom:.9rem;max-width:none}
  .sub{font-size:1.02rem;margin-bottom:1.6rem;max-width:none}

  /* VSL em destaque máximo no mobile */
  .vsl{margin-bottom:1.5rem;border-radius:14px}

  /* CTA fácil de tocar — largura total com respiro */
  .cta-btn{width:100%;max-width:420px;justify-content:center;font-size:1.05rem;padding:1.1rem 1.4rem}
  .cta-sub{font-size:.86rem;margin-top:.85rem}

  .ajustes{padding:52px 0}
  .sec-title{font-size:1.55rem;margin-bottom:2rem;max-width:none}
  .card{padding:1.5rem 1.4rem}
  .cards-rodape{font-size:.97rem;margin-top:1.8rem}

  .prova{padding:40px 0}
  .cta-final{padding:54px 0}
  .cta-final h2{font-size:1.5rem}
}

@media (max-width:380px){
  h1{font-size:1.55rem}
  .sub{font-size:.97rem}
  .stat .num{font-size:1.6rem}
}