/* Landing de venda (/) — visual Híbrido do app novo: faixa escura no topo
   (como o menu do app, com o logo e o amarelo da marca) e a página clara,
   com muito branco, texto grafite e o amarelo só como destaque.
   Página própria: não carrega o app.css (o dele é o painel antigo, escuro).
   Cores iguais às de temas/hibrido.css. Sem nada de fora (fonte local). */

:root{
  --marca:#faff69; --marca-forte:#eef35a; --marca-tinta:#0e0f11; --marca-traco:#c9cc1c;
  --escuro:#0e0f11; --escuro-2:#191b1f; --escuro-linha:#2a2d33;
  --escuro-texto:#c9cdd3; --escuro-suave:#a4a9b1;

  --branco:#ffffff;
  --gelo:#f5f6f8;
  --linha:#e2e5ea;
  --linha-forte:#cdd2d9;
  --ink:#0e1013;
  --grafite:#15171b;
  --body:#3a3f47;
  --muted:#565c66;
  --verde:#137a3a;

  --sombra-print:0 1px 2px rgba(16,24,40,.05),0 12px 32px -8px rgba(16,24,40,.14),0 32px 64px -24px rgba(16,24,40,.16);
  --sombra-cartao:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.05);

  --fonte:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --largura:1200px;
  --lado:clamp(16px,4vw,32px);
  --secao:clamp(72px,9vw,128px);
  --raio:14px;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--branco);color:var(--body);
  font:400 17px/1.6 var(--fonte);-webkit-font-smoothing:antialiased;
  overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{color:var(--ink);margin:0;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent);
  text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--marca);color:var(--marca-tinta)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.topo :focus-visible,.final :focus-visible,.rodape :focus-visible{outline-color:var(--marca)}

.caixa{width:100%;max-width:calc(var(--largura) + 2*var(--lado));margin:0 auto;padding:0 var(--lado)}
.centro{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:20;background:var(--marca);color:var(--marca-tinta);
  padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.pular:focus{top:12px}
section[id]{scroll-margin-top:72px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 24px;border-radius:10px;border:1px solid var(--grafite);background:var(--grafite);
  color:#fff;font:600 16px/1 var(--fonte);text-decoration:none;white-space:nowrap;
  transition:background-color .15s,border-color .15s,transform .15s}
.btn:hover{background:#000;border-color:#000}
.btn:active{transform:translateY(1px)}
.btn.claro{background:var(--branco);color:var(--ink);border-color:var(--linha-forte)}
.btn.claro:hover{background:var(--gelo);border-color:var(--ink)}
.btn.marca-btn{background:var(--marca);border-color:var(--marca);color:var(--marca-tinta)}
.btn.marca-btn:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.btn.pequeno{min-height:40px;padding:0 16px;font-size:15px;border-radius:9px}

/* ---------- topo (a faixa escura) ---------- */
.topo{position:sticky;top:0;z-index:10;background:var(--escuro);border-bottom:1px solid var(--escuro-linha)}
.topo-dentro{display:flex;align-items:center;gap:32px;min-height:64px}
.marca{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.marca img{height:16px;width:auto}
.menu{display:flex;gap:28px;margin-right:auto}
.menu a,.entrar{color:var(--escuro-texto);text-decoration:none;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;min-height:44px}
.menu a:hover,.entrar:hover{color:#fff}
.topo-acoes{display:flex;align-items:center;gap:20px;margin-left:auto}
@media (max-width:820px){
  .menu{display:none}
  .topo-dentro{gap:16px}
  .topo-acoes{gap:14px}
}

/* ---------- 1. topo da página ---------- */
.hero{padding-top:clamp(48px,7vw,96px)}
.palco{margin-top:clamp(40px,5vw,64px);padding-bottom:clamp(56px,7vw,96px);
  background:linear-gradient(180deg,var(--branco) 0,var(--branco) 38%,var(--gelo) 38%,var(--gelo) 100%);
  border-bottom:1px solid var(--linha)}
.hero-texto{text-align:center;max-width:920px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--marca);color:var(--marca-tinta);
  border:1px solid var(--marca-traco);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.chip .ponto{width:7px;height:7px;border-radius:50%;background:var(--marca-tinta)}
.hero h1{margin-top:24px;font-size:clamp(38px,1.4rem + 4.6vw,72px);line-height:1.04;letter-spacing:-.035em}
.grifo{background:linear-gradient(transparent 58%,var(--marca) 58%,var(--marca) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.lead{font-size:clamp(18px,.95rem + .45vw,21px);line-height:1.55;color:var(--body);max-width:640px}
.hero .lead{margin:24px auto 0}
.garantia{display:inline-flex;align-items:flex-start;gap:10px;margin-top:18px;color:var(--ink);
  font-weight:500;font-size:16px;text-align:left}
.garantia .ic{flex-shrink:0;margin-top:2px}
.acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}

.ic circle{fill:var(--verde)}
.ic path{stroke:#fff}

/* ---------- molduras dos prints ---------- */
.navegador{background:var(--branco);border:1px solid var(--linha);border-radius:12px;overflow:hidden;
  box-shadow:var(--sombra-print)}
.navegador .barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  background:#eef0f3;border-bottom:1px solid var(--linha)}
.navegador .barra i{width:10px;height:10px;border-radius:50%;background:#d3d7dd}
.navegador .barra .url{margin:0 auto;padding:3px 14px;border-radius:6px;background:var(--branco);
  border:1px solid var(--linha);color:var(--muted);font-size:12.5px;line-height:1.4;
  transform:translateX(-18px);white-space:nowrap}
.navegador img{width:100%}
.quadro{border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);background:var(--branco);
  box-shadow:var(--sombra-print)}
.celular{justify-self:center;width:min(300px,78vw);padding:9px;background:var(--grafite);
  border-radius:40px;box-shadow:var(--sombra-print)}
.celular img{border-radius:32px}

.hero-video{max-width:1120px;margin:0 auto}
.hero-video .barra{position:relative}
.tela-video{aspect-ratio:1280/800;background:#f2f3f5}
.tela-video video{width:100%;height:100%;object-fit:cover}
.tocar{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;
  min-height:28px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:999px;cursor:pointer;
  background:var(--branco);color:var(--ink);font:600 13px/1 var(--fonte)}
.tocar:hover{border-color:var(--ink)}
.tocar svg{fill:currentColor}
.tocar .i-pausa{display:none}
.hero-video.tocando .i-pausa{display:block}
.hero-video.tocando .i-tocar{display:none}

/* ---------- seções ---------- */
.secao{padding:var(--secao) 0}
.secao.gelo{background:var(--gelo)}
.secao h2{font-size:clamp(30px,1.2rem + 2.2vw,46px);line-height:1.1;letter-spacing:-.03em}
.secao h2 + .lead{margin-top:18px}
.duas{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}

/* 2. como funciona */
.passos{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:32px}
.passos li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.passos .n{width:44px;height:44px;border-radius:50%;background:var(--marca);color:var(--marca-tinta);
  border:1px solid var(--marca-traco);display:grid;place-items:center;font-weight:700;font-size:18px}
.passos h3{font-size:21px;line-height:1.3;letter-spacing:-.01em;margin-top:8px}
.passos p{margin-top:6px;color:var(--body)}

/* 3. agenda */
.intro{align-items:end;gap:20px 64px}
.recursos{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.recursos li{position:relative;padding-left:22px;color:var(--body)}
.recursos li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;
  background:var(--marca);box-shadow:inset 0 0 0 1px var(--marca-traco)}
.recursos strong{color:var(--ink);font-weight:600}

/* 4. ver antes de aprovar */
.texto > p{margin-top:18px}
.texto > h2 + p{margin-top:20px}
.lista-check{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.lista-check li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.lista-check .ic{flex-shrink:0;margin-top:3px}
.forte{color:var(--ink);font-weight:600}
.texto .forte{margin-top:24px}

/* 5. conferência */
.conferencia{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:16px}
.conferencia li{display:grid;grid-template-columns:28px 1fr;column-gap:14px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);padding:22px 20px;box-shadow:var(--sombra-cartao)}
.conferencia .selo{grid-row:span 2;display:block;padding-top:1px}
.conferencia .selo .ic{width:28px;height:28px}
.conferencia h3{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.conferencia p{margin-top:6px}
.depois{margin-top:32px;max-width:640px;color:var(--ink);font-weight:500}
.nota{max-width:680px;margin:20px auto 0;padding:16px 20px;border-radius:12px;background:var(--gelo);
  border:1px solid var(--linha);color:var(--body);font-size:15.5px;line-height:1.55}
.nota strong{color:var(--ink);font-weight:600}

/* 6. resultados */
.navegador.largo{margin-top:56px}
/* os números do print são da conta de exemplo: dizer, para não soar promessa */
.legenda{margin-top:16px;text-align:center;font-size:14px;color:var(--muted)}

/* 7. planos */
.planos{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:48px}
.plano{flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);padding:32px 28px 28px;box-shadow:var(--sombra-cartao)}
.plano.destaque{border:2px solid var(--ink);padding:31px 27px 27px;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 16px 40px -12px rgba(16,24,40,.22)}
.plano h3{font-size:18px;font-weight:600;letter-spacing:0}
.preco{margin-top:14px;font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.preco small{font-size:16px;font-weight:500;letter-spacing:0;color:var(--muted)}
.qtd{margin-top:10px;color:var(--body)}
.plano .btn{margin-top:28px;width:100%}
#planos .depois{font-weight:400;color:var(--body)}

/* 8. perguntas */
.faq{display:grid;gap:0 56px;margin-top:48px}
.faq > div{padding:24px 0;border-top:1px solid var(--linha-forte)}
.faq h3{font-size:18px;line-height:1.4;font-weight:600;letter-spacing:-.005em}
.faq p{margin-top:8px}

/* 9. chamada final e rodapé (de volta à faixa escura) */
.final{background:var(--escuro);color:var(--escuro-texto);padding:clamp(72px,9vw,120px) 0;text-align:center}
.final h2{color:#fff;font-size:clamp(32px,1.2rem + 2.8vw,52px);line-height:1.08;letter-spacing:-.03em}
.final-dentro > p{margin:16px auto 0;font-size:clamp(17px,.95rem + .3vw,19px);max-width:560px}
.final .btn{margin-top:32px}
.final .contato{margin-top:28px;font-size:15px;color:var(--escuro-suave)}
.final a:not(.btn),.rodape a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.final a:not(.btn):hover,.rodape a:hover{text-decoration-color:#fff}
.rodape{background:var(--escuro);border-top:1px solid var(--escuro-linha);color:var(--escuro-suave);
  font-size:14px;line-height:1.6;padding:28px 0 36px}
.rodape-dentro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px}

/* ---------- telas largas ---------- */
@media (min-width:880px){
  .duas{grid-template-columns:1fr 1fr;gap:64px}
  .como{grid-template-columns:1.15fr .85fr}
  .ver{grid-template-columns:.8fr 1.2fr}
  .conferencia{grid-template-columns:repeat(3,1fr);gap:20px}
  .conferencia li{display:block;padding:28px}
  .conferencia .selo{display:inline-block;padding:0}
  .conferencia h3{margin-top:16px;font-size:20px}
  .conferencia p{margin-top:8px}
  .faq{grid-template-columns:1fr 1fr}
  .agenda{grid-template-columns:.85fr 1.15fr}
  .agenda > .celular{order:-1}
}

/* ---------- celular ---------- */
@media (max-width:560px){
  body{font-size:16px}
  .acoes .btn{flex:1 1 100%}
  .navegador .barra{height:30px;padding:0 10px;gap:5px}
  .navegador .barra i{width:8px;height:8px}
  .navegador .barra .url{font-size:11px;padding:2px 10px;transform:none}
  .garantia{font-size:15px}
  .plano{max-width:none}
  .hero-video .url{display:none}
  .tocar{right:5px;min-height:24px;padding:0 10px;font-size:12px}
  .rodape-dentro{flex-direction:column}
}
@media (max-width:360px){
  .topo-dentro{gap:10px}
  .topo-acoes{gap:12px}
  .marca img{height:14px}
  .btn.pequeno{padding:0 12px}
}