/* ZapCentral — landing (modo leve). Tema claro. Archivo (títulos) + Inter (texto). */

:root {
  --bg:#f6faf8;
  --ink:#0d1b14;
  --muted:#3c4a44;
  --line:#dfe7e2;
  --verde:#12a150;        /* WhatsApp: só título grande/ícone */
  --verde-cta:#0a7d3b;    /* botão, texto branco (5,2:1) */
  --verde-cta-h:#096a33;
  --vermelho:#e8484d;     /* e-mail: só o momento do diferencial */
  --vermelho-tint:#fdeeee;
  --t-display: clamp(2rem, 8.2vw, 7rem);
  --t-xl: clamp(2rem, 5vw, 4rem);
  --t-h2: clamp(1.6rem, 3.6vw, 3rem);
  --t-corpo: 1.0625rem;
  --col: min(1200px, 100% - 48px);
  --fonte-titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --fonte-texto: "Inter", system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin:0; background:var(--bg); color:var(--ink); overflow-x: hidden;
  font-family:var(--fonte-texto); font-size:var(--t-corpo); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--fonte-titulo); font-weight:900; margin:0; line-height:.95; letter-spacing:-0.02em; }
p { margin:0; }
a { color:inherit; }
img { max-width:100%; display:block; }

.col { width:var(--col); margin-inline:auto; }
.secao { padding: clamp(64px, 11vw, 160px) 0; }

/* ---- botão ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--verde-cta); color:#fff; text-decoration:none;
  font-family:var(--fonte-titulo); font-weight:800; font-size:1.05rem;
  padding:16px 30px; border-radius:7px; border:0; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover { background:var(--verde-cta-h); transform:translateY(-1px); }
.btn.grande { font-size:1.25rem; padding:20px 40px; }

/* ---- topo / nav ---- */
.nav {
  position:sticky; top:0; z-index:20; background:rgba(246,250,248,.92);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.scrolled { border-color:var(--line); }
.nav .col { display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.nav__logo { height:100px; width:auto; }
.nav__links { display:flex; gap:32px; margin-left:auto; margin-right:8px; }
.nav__links a { text-decoration:none; font-weight:600; color:var(--muted); }
.nav__links a:hover { color:var(--ink); }

/* ---- herói (VSL em destaque, centralizado) ---- */
.hero { padding-top: clamp(24px, 3.5vw, 48px); text-align:center; }
.hero .col { display:flex; flex-direction:column; align-items:center; }
.hero h1 { font-size:clamp(1.7rem, 4.5vw, 3.5rem); padding-top:.06em; overflow-wrap:break-word; max-width:24ch; }
.hero h1 .zap { color:var(--verde); }
.hero h1 .mail { color:var(--vermelho); }
.hero__sub { font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted); max-width:56ch; margin:20px auto 30px; }
.hero__fig { position:relative; width:100%; max-width:900px; margin:0 auto; }
.hero__fig img { width:100%; border-radius:16px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(13,27,20,.14); }
.play {
  position:absolute; inset:0; margin:auto; width:96px; height:96px;
  display:grid; place-items:center; background:var(--verde-cta); border-radius:999px;
  box-shadow:0 16px 46px rgba(10,125,59,.42); text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.play:hover { transform:scale(1.06); background:var(--verde-cta-h); }
.play svg { width:38px; height:38px; margin-left:5px; }
.hero__cta { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:30px; }
.hero__nota { font-size:.95rem; color:var(--muted); }

/* ---- faixa de letras (a dor) ---- */
.faixa { border-block:1px solid var(--line); padding:26px 0; overflow:hidden; }
.faixa__trilho { display:flex; gap:0; width:max-content; white-space:nowrap; animation:correr 32s linear infinite; }
.faixa__trilho span { font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); color:var(--muted); padding:0 28px; }
.faixa__trilho .pt { color:var(--verde); }
@keyframes correr { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- recursos em linhas ---- */
.rec__titulo { font-size:var(--t-h2); max-width:16ch; margin-bottom: clamp(32px,5vw,64px); }
.linha {
  display:grid; grid-template-columns: 1.6rem 1fr 1.1fr; gap: clamp(20px,4vw,56px);
  align-items:baseline; padding: clamp(28px,4vw,44px) 0; border-top:1px solid var(--line);
}
.linha:last-child { border-bottom:1px solid var(--line); }
.linha__n { font-family:var(--fonte-titulo); font-weight:800; font-size:1.05rem; color:var(--muted); }
.linha__nome { font-family:var(--fonte-titulo); font-weight:900; font-size:var(--t-xl); line-height:.98; }
.linha__desc { color:var(--muted); font-size:1.15rem; max-width:40ch; }

/* ---- diferencial e-mail ---- */
.dif { background:var(--vermelho-tint); }
.dif h2 { font-size:clamp(2.2rem,6vw,5rem); max-width:14ch; }
.dif h2 .mail { color:var(--vermelho); }
.dif p { color:var(--muted); font-size:clamp(1.15rem,1.8vw,1.5rem); max-width:40ch; margin-top:28px; }

/* ---- ficha grátis/teste ---- */
.ficha .col { display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px,6vw,80px); }
.ficha__num { font-family:var(--fonte-titulo); font-weight:900; font-size:clamp(3.4rem,9vw,7.5rem); line-height:.88; letter-spacing:-0.03em; }
.ficha__num .verde { color:var(--verde); }
.ficha__leg { font-size:1.2rem; color:var(--muted); margin-top:10px; max-width:24ch; }

/* ---- planos em linhas ---- */
.planos__titulo { font-size:var(--t-h2); margin-bottom: clamp(28px,4vw,52px); }
.plano {
  display:grid; grid-template-columns: 1.1fr 1.5fr auto auto; gap: clamp(16px,3vw,40px);
  align-items:center; padding: clamp(26px,3.5vw,40px) 0; border-top:1px solid var(--line);
}
.plano:last-child { border-bottom:1px solid var(--line); }
.plano__nome { font-family:var(--fonte-titulo); font-weight:900; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1; }
.plano__desc { color:var(--muted); max-width:38ch; }
.plano__preco { font-family:var(--fonte-titulo); font-weight:900; font-size:clamp(1.5rem,2.6vw,2.2rem); white-space:nowrap; }
.plano__preco span { display:block; font-family:var(--fonte-texto); font-weight:600; font-size:.9rem; color:var(--muted); }
.plano .btn { white-space:nowrap; }
.plano--destaque .plano__nome { color:var(--verde); }

/* ---- dúvidas ---- */
.faq__titulo { font-size:var(--t-h2); margin-bottom: clamp(28px,4vw,52px); }
.faq details { border-top:1px solid var(--line); padding:24px 0; }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(1.15rem,2vw,1.5rem); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .sinal { flex:none; width:24px; height:24px; position:relative; }
.faq summary .sinal::before, .faq summary .sinal::after { content:""; position:absolute; background:var(--ink); border-radius:2px; }
.faq summary .sinal::before { inset:11px 0 11px 0; }
.faq summary .sinal::after  { inset:0 11px 0 11px; transition:opacity .2s; }
.faq details[open] summary .sinal::after { opacity:0; }
.faq p { color:var(--muted); margin-top:16px; max-width:62ch; }

/* ---- fecho ---- */
.fecho { text-align:center; }
.fecho h2 { font-size:clamp(2.4rem,8vw,6.5rem); padding-top:.08em; }
.fecho p { color:var(--muted); margin:24px auto 36px; max-width:34ch; }

/* ---- rodapé ---- */
.rodape { border-top:1px solid var(--line); padding:40px 0; }
.rodape .col { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.rodape b { font-family:var(--fonte-titulo); font-weight:900; }
.rodape small { color:var(--muted); }

/* ---- revelar ao rolar ---- */
.rev { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.rev.on { opacity:1; transform:none; }

/* ---- celular ---- */
@media (max-width: 860px) {
  :root { --col: calc(100% - 40px); }
  .nav__links { display:none; }
  .hero__fig { min-width:0; }
  .ficha .col { grid-template-columns:1fr; }
  .linha { grid-template-columns: 1fr; gap:10px; }
  .linha__n { font-size:.95rem; }
  .plano { grid-template-columns: 1fr; align-items:start; gap:12px; }
  .plano .btn { justify-self:start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .faixa__trilho { animation:none; }
  .rev { opacity:1; transform:none; transition:none; }
  .btn:hover { transform:none; }
}