/* Página de venda da vitrine para planejadores (/planejadores). Só esta página carrega este arquivo.
   Regra de cor: o amarelo de ação (--vp-acao) é exclusivo dos botões primários. Nenhum outro elemento usa amarelo. */
:root { --vp-bg:#050807; --vp-alt:#0c1411; --vp-linha:rgba(222,253,212,.1); --vp-txt:#f3faf6; --vp-suave:rgba(232,246,239,.68); --vp-fraco:rgba(232,246,239,.46);
  --vp-menta:#5ad6ba; --vp-tinta:#0d1411; --vp-acao:#ffd24d; --vp-acao-hover:#ffdf7a; --vp-clara:#eaf3ee; --vp-saida:cubic-bezier(.16,1,.3,1); }
.v-body { background:var(--vp-bg); padding-inline:0; }
.v-wrap { max-width:none; overflow-x:clip; padding-bottom:0; }
.v-top, .vp-larg, .v-rodape { box-sizing:border-box; max-width:1200px; margin-inline:auto; padding-inline:20px; }
.v-top { position:relative; z-index:3; }
.v-rodape { margin-top:0; padding-block:28px 40px; }
.vp { display:block; }
.vp img { max-width:100%; }
.vp-sec { padding-block:clamp(72px, 10vw, 128px); position:relative; }
/* Fundo alternado de ponta a ponta, sem mexer no layout */
.vp-alt { background:var(--vp-alt); box-shadow:0 0 0 100vmax var(--vp-alt); clip-path:inset(0 -100vmax); }

/* Tipografia */
.vp-kicker { display:inline-flex; align-items:center; gap:10px; font:600 13px/1 "Onest",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--vp-menta); margin:0 0 18px; }
.vp-kicker::before { content:""; width:18px; height:1px; background:currentColor; opacity:.7; }
.vp-h1 { font:600 clamp(40px, 6.2vw, 68px)/1.02 "Outfit",sans-serif; letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance; color:var(--vp-txt); }
.vp-h1 em, .vp-h2 em { font-style:normal; color:var(--vp-menta); }
.vp-h2 { font:600 clamp(32px, 4.6vw, 52px)/1.05 "Outfit",sans-serif; letter-spacing:-.03em; margin:0; text-wrap:balance; color:var(--vp-txt); max-width:18ch; }
.vp-h3 { font:600 clamp(24px, 2.7vw, 32px)/1.12 "Outfit",sans-serif; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
.vp-lead { font-size:clamp(17px, 1.5vw, 19px); line-height:1.65; color:var(--vp-suave); max-width:56ch; margin:0; }
.vp-txt { font-size:17px; line-height:1.7; color:var(--vp-suave); max-width:52ch; margin:0; }
.vp-txt q, .vp-lead q { quotes:"\201C" "\201D"; color:var(--vp-txt); }

/* Botão primário: a única coisa amarela da página */
.vp-btn { display:inline-flex; align-items:center; gap:10px; border-radius:99px; padding:16px 26px 16px 28px; font:600 17px/1 "Outfit",sans-serif; text-decoration:none; background:var(--vp-acao); color:var(--vp-tinta);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.8); transition:transform .35s var(--vp-saida), background .2s; }
.vp-btn svg { width:18px; height:18px; transition:transform .35s var(--vp-saida); }
.vp-btn:hover { background:var(--vp-acao-hover); transform:translateY(-2px); }
.vp-btn:hover svg { transform:translateX(3px); }
.vp-preco .vp-btn { box-shadow:inset 0 0 0 1.5px var(--vp-tinta), 0 12px 26px -16px rgba(13,20,17,.7); }

/* Aviso de dados de exemplo: neutro e discreto */
.vp-exemplo { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:12.5px; color:var(--vp-fraco); }
.vp-exemplo::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }

/* Moldura: navegador */
.vp-browser { border-radius:14px; overflow:hidden; background:#0b110f; box-shadow:0 0 0 1px rgba(222,253,212,.12), 0 40px 80px -40px rgba(0,0,0,.9); }
.vp-barra { display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#121a17; border-bottom:1px solid rgba(255,255,255,.06); }
.vp-barra i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.13); flex:none; }
.vp-url { flex:1; max-width:360px; margin-inline:auto; display:flex; align-items:center; justify-content:center; gap:6px; height:24px; border-radius:7px; background:rgba(255,255,255,.055);
  font:500 11.5px/1 "Onest",sans-serif; color:rgba(232,246,239,.62); white-space:nowrap; overflow:hidden; padding:0 10px; }
.vp-url svg { width:10px; height:10px; flex:none; opacity:.7; }
.vp-browser img { display:block; width:100%; height:auto; }

/* Moldura: celular */
.vp-phone { --w:260px; width:var(--w); flex:none; border-radius:calc(var(--w) * .165); padding:calc(var(--w) * .034);
  background:linear-gradient(155deg, #3a423f 0, #121614 22%, #0a0d0c 60%, #232a27 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 3px #050706, 0 0 0 1px rgba(0,0,0,.9), 0 50px 90px -40px rgba(0,0,0,.95); }
.vp-tela { position:relative; border-radius:calc(var(--w) * .13); overflow:hidden; background:#050807; aspect-ratio:9 / 19.3; display:flex; flex-direction:column; }
.vp-status { flex:none; height:calc(var(--w) * .115); display:flex; align-items:center; justify-content:space-between; padding:0 9% 0 11%; font:600 calc(var(--w) * .047)/1 "Onest",sans-serif; color:#fff; background:#070b0a; }
.vp-status b { width:31%; height:56%; border-radius:99px; background:#000; }
.vp-status svg { width:calc(var(--w) * .16); height:auto; }
.vp-tela img { display:block; width:100%; flex:1; min-height:0; object-fit:cover; object-position:top; }

/* Moldura: e-mail */
.vp-mail { border-radius:16px; overflow:hidden; background:#fff; color:#0d1411; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 40px 80px -40px rgba(0,0,0,.9); }
.vp-mail-topo { display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid #e3e9e6; font-family:"Onest",sans-serif; }
.vp-mail-topo img { width:36px; height:36px; border-radius:50%; background:#0d1411; padding:7px; object-fit:contain; }
.vp-mail-topo b { display:block; font-size:14px; }
.vp-mail-topo span { display:block; font-size:12.5px; color:#55625c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-mail-topo time { white-space:nowrap; font-size:12px; color:#7b8782; align-self:start; padding-top:2px; }
.vp-mail > img { display:block; width:100%; height:auto; }

/* Moldura: conversa do WhatsApp */
.vp-wa { width:290px; border-radius:20px; overflow:hidden; background:#efeae2 url(/assets/img/whatsapp-fundo.webp) center / 300px auto; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 40px 70px -30px rgba(0,0,0,.9); font-family:"Onest",sans-serif; }
.vp-wa-topo { display:flex; align-items:center; gap:10px; padding:11px 14px; background:#f6f5f3; color:#111b21; border-bottom:1px solid rgba(0,0,0,.06); }
.vp-wa-topo span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#d9dee2; color:#54656f; font-weight:700; font-size:14px; }
.vp-wa-topo b { display:block; font-size:14.5px; font-weight:600; }
.vp-wa-topo small { display:block; font-size:12px; color:#667781; }
.vp-wa-corpo { padding:16px 14px 20px; display:grid; gap:8px; }
.vp-wa-dia { justify-self:center; font-size:11.5px; color:#54656f; background:#fff; border-radius:7px; padding:4px 10px; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.vp-bolha { justify-self:start; max-width:88%; background:#fff; color:#111b21; font-size:14px; line-height:1.4; padding:7px 10px 8px; border-radius:0 9px 9px 9px; box-shadow:0 1px .5px rgba(11,20,26,.13); position:relative; margin:0; }
.vp-bolha::before { content:""; position:absolute; left:-7px; top:0; border:8px solid transparent; border-top-color:#fff; border-right-color:#fff; border-width:0 8px 10px 0; }
.vp-bolha time { float:right; font-size:11px; color:#667781; margin:6px 0 -4px 10px; }

/* Notificação (tela de bloqueio) */
.vp-notif { display:grid; grid-template-columns:38px 1fr; gap:11px; padding:12px 14px 13px; border-radius:20px; background:rgba(30,37,34,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 24px 50px -18px rgba(0,0,0,.85); color:#fff; font-family:"Onest",sans-serif; }
.vp-app { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.vp-app.wa { background:linear-gradient(#5ff27c, #22c35e); }
.vp-app.wa svg { width:24px; height:24px; }
.vp-notif p { margin:0; font-size:13.5px; line-height:1.35; color:rgba(255,255,255,.86); }
.vp-notif .t { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:2px; }
.vp-notif .t b { font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:11.5px; }
.vp-notif strong { display:block; color:#fff; font-weight:600; font-size:14px; }

/* HERO: 1 imagem (o celular) e 1 detalhe (o aviso do WhatsApp) */
.vp-hero { display:grid; gap:48px; padding-top:clamp(8px, 3vw, 40px); padding-bottom:clamp(64px, 8vw, 110px); }
.vp-acao { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin:34px 0 0; }
.vp-preco-linha { margin:0; font-size:15px; color:var(--vp-suave); }
.vp-garante { list-style:none; margin:34px 0 0; padding:24px 0 0; border-top:1px solid var(--vp-linha); display:grid; gap:12px; font-size:15px; color:var(--vp-suave); max-width:520px; }
.vp-garante li { display:flex; gap:12px; align-items:center; }
.vp-garante svg { width:18px; height:18px; color:var(--vp-menta); flex:none; }
.vp-cena { position:relative; margin:0; height:540px; isolation:isolate; }
.vp-cena::before { content:""; position:absolute; inset:8% 6% 14%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(90,214,186,.16), transparent); pointer-events:none; }
.vp-cena-phone { position:absolute; left:8%; top:10px; --w:clamp(196px, 58vw, 240px); animation:vp-flutua 8s ease-in-out infinite; }
.vp-pilha { position:absolute; right:0; bottom:70px; width:min(300px, 78%); }
.vp-pilha .vp-notif { opacity:0; animation:vp-chega .95s var(--vp-saida) .7s forwards; }
.vp-cena .vp-exemplo { position:absolute; left:8%; bottom:0; margin:0; }
@keyframes vp-chega { from { opacity:0; transform:translateY(-16px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes vp-flutua { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* PROVA DO PRODUTO */
.vp-cabeca { display:grid; gap:22px; margin-bottom:clamp(48px, 7vw, 96px); }
.vp-linha-prova { display:grid; gap:40px; align-items:center; }
.vp-linha-prova + .vp-linha-prova { margin-top:clamp(80px, 11vw, 140px); }
.vp-marca { display:block; font:600 13px/1 "Onest",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--vp-fraco); margin-bottom:16px; }
.vp-itens { list-style:none; padding:0; margin:26px 0 0; display:grid; max-width:460px; }
.vp-itens li { display:grid; grid-template-columns:9.6em 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--vp-linha); font-size:15.5px; color:var(--vp-suave); }
.vp-itens li b { color:var(--vp-txt); font-weight:600; }
.vp-palco { margin:0; display:flex; flex-direction:column; align-items:center; }
.vp-palco-perfil .vp-phone { --w:262px; }
.vp-palco-pedido { position:relative; align-items:flex-start; padding-bottom:10px; }
.vp-palco-pedido .vp-mail { width:min(400px, 92%); }
.vp-palco-pedido .vp-wa { width:min(270px, 74%); margin:-84px 0 0 auto; position:relative; }
.vp-palco-numeros { align-items:stretch; }
.vp-palco .vp-exemplo { align-self:flex-start; }

/* COMO FUNCIONA */
.vp-passos { list-style:none; margin:clamp(44px, 6vw, 80px) 0 0; padding:0; display:grid; gap:56px; position:relative; }
.vp-passos::before { content:""; position:absolute; left:19px; top:20px; bottom:20px; width:1px; background:var(--vp-linha); }
.vp-passo { position:relative; padding-left:64px; display:grid; gap:22px; }
.vp-no { position:absolute; left:0; top:-4px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:600 16px/1 "Outfit",sans-serif; color:var(--vp-menta); background:var(--vp-bg); box-shadow:inset 0 0 0 1.5px rgba(90,214,186,.55); }
.vp-passo h3 { font:600 24px/1.15 "Outfit",sans-serif; letter-spacing:-.015em; margin:0 0 10px; }
.vp-passo p { margin:0; color:var(--vp-suave); font-size:16px; line-height:1.65; max-width:42ch; }
.vp-tela-passo { position:relative; border-radius:14px; overflow:hidden; height:230px; box-shadow:0 0 0 1px rgba(222,253,212,.12); background:#070b0a; }
.vp-tela-passo img { display:block; }
.vp-tela-passo::after { content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent, rgba(5,8,7,.92)); pointer-events:none; }
.vp-tela-passo.p1 img, .vp-tela-passo.p2 img { width:165%; max-width:none; height:auto; }
.vp-tela-passo.p1 img { margin:-12% 0 0 -2%; }
.vp-tela-passo.p2 img { width:150%; margin:-8% 0 0 -2%; }
.vp-tela-passo.p3 { background:transparent; box-shadow:none; overflow:visible; height:auto; display:flex; }
.vp-tela-passo.p3::after { display:none; }
.vp-tela-passo.p3 .vp-phone { --w:200px; }
.vp-tela-passo.p3 .vp-tela { aspect-ratio:9 / 13; }

/* PROMESSA HONESTA */
.vp-honesta { display:grid; gap:48px; }
.vp-honesta .vp-h2 { max-width:16ch; }
.vp-colunas { display:grid; gap:40px; }
.vp-colunas h3 { font:600 15px/1 "Onest",sans-serif; letter-spacing:.1em; text-transform:uppercase; margin:0 0 6px; color:var(--vp-txt); }
.vp-colunas ul { list-style:none; margin:0; padding:0; }
.vp-colunas li { display:grid; grid-template-columns:22px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--vp-linha); font-size:16.5px; line-height:1.55; color:var(--vp-suave); }
.vp-colunas li svg { width:20px; height:20px; margin-top:2px; }
.vp-faz svg { color:var(--vp-menta); }
.vp-naofaz svg { color:rgba(232,246,239,.4); }

/* PREÇO: a única faixa clara da página */
.vp-preco { padding-inline:20px; background:var(--vp-clara); color:var(--vp-tinta); padding-block:clamp(64px, 9vw, 120px); }
.vp-preco-in { display:grid; gap:44px; max-width:1160px; margin:0 auto; }
.vp-preco .vp-kicker { color:#1f6f5c; }
.vp-valor { display:flex; align-items:flex-start; gap:6px; font:600 clamp(84px, 13vw, 150px)/.9 "Outfit",sans-serif; letter-spacing:-.05em; margin:0; }
.vp-valor small { font:500 clamp(18px, 2vw, 22px)/1 "Onest",sans-serif; letter-spacing:0; margin-top:.5em; color:#2c4a40; }
.vp-cond { margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.vp-cond span { font-size:14.5px; font-weight:600; padding:8px 14px; border-radius:99px; box-shadow:inset 0 0 0 1px rgba(13,20,17,.18); }
.vp-inclui { list-style:none; margin:0 0 32px; padding:0; }
.vp-inclui li { display:grid; grid-template-columns:22px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid rgba(13,20,17,.12); font-size:17px; line-height:1.45; }
.vp-inclui li:first-child { border-top:1px solid rgba(13,20,17,.12); }
.vp-inclui svg { width:20px; height:20px; color:#1f8f74; margin-top:1px; }
.vp-preco-nota { margin:16px 0 0; font-size:14px; color:#3a5a4f; }

/* PERGUNTAS */
.vp-faq { display:grid; gap:32px; }
.vp-faq-lista details { border-bottom:1px solid var(--vp-linha); }
.vp-faq-lista details:first-child { border-top:1px solid var(--vp-linha); }
.vp-faq-lista summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font:600 18px/1.35 "Outfit",sans-serif; color:var(--vp-txt); }
.vp-faq-lista summary::-webkit-details-marker { display:none; }
.vp-faq-lista summary:hover { color:var(--vp-menta); }
.vp-mais { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--vp-linha); color:var(--vp-menta); transition:transform .4s var(--vp-saida); }
.vp-mais svg { width:14px; height:14px; }
.vp-faq-lista details[open] .vp-mais { transform:rotate(45deg); }
.vp-faq-lista details p { margin:0; padding:0 48px 24px 0; color:var(--vp-suave); font-size:16px; line-height:1.7; max-width:62ch; }

/* CHAMADA FINAL */
.vp-final .vp-h2 { max-width:18ch; margin-bottom:18px; }
.vp-final .vp-lead { margin-bottom:34px; }

/* Revelar ao rolar (só com JS) */
.vp-js .vp-revela { opacity:0; transform:translateY(24px); transition:opacity .9s var(--vp-saida), transform 1.1s var(--vp-saida); }
.vp-js .vp-revela.on { opacity:1; transform:none; }

@media (min-width:600px) {
  .vp-colunas { grid-template-columns:1fr 1fr; gap:56px; }
}
@media (min-width:900px) {
  .vp-hero { grid-template-columns:minmax(0, 1fr) minmax(0, .9fr); align-items:center; gap:40px; }
  .vp-cena { height:600px; }
  .vp-cena-phone { --w:264px; left:14%; top:12px; }
  .vp-pilha { right:0; bottom:120px; width:320px; }
  .vp-cena .vp-exemplo { left:14%; }
  .vp-cabeca { grid-template-columns:1.1fr 1fr; align-items:end; gap:56px; }
  .vp-linha-prova { grid-template-columns:1fr 1.15fr; gap:72px; }
  .vp-linha-prova.inverte > :first-child { order:2; }
  .vp-palco-pedido .vp-mail { width:400px; }
  .vp-passos { grid-template-columns:1.12fr 1.12fr .9fr; gap:36px; }
  .vp-passos::before { left:20px; right:20px; top:19px; bottom:auto; width:auto; height:1px; }
  .vp-passo { padding-left:0; padding-top:68px; align-content:start; }
  .vp-no { top:0; }
  .vp-tela-passo { height:250px; }
  .vp-tela-passo.p3 .vp-tela { aspect-ratio:9 / 12.4; }
  .vp-honesta { grid-template-columns:.9fr 1.1fr; gap:72px; align-items:start; }
  .vp-preco-in { grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .vp-faq { grid-template-columns:.75fr 1.25fr; gap:72px; align-items:start; }
  .vp-faq > div:first-child { position:sticky; top:32px; }
  .vp-final { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:40px; }
  .vp-final .vp-lead { margin-bottom:0; }
  .vp-final .vp-acao { margin:0; justify-content:flex-end; }
}
@media (max-width:420px) {
  .vp-cena { height:500px; }
  .vp-btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .vp-cena-phone { animation:none; }
  .vp-pilha .vp-notif { animation:none; opacity:1; }
  .vp-js .vp-revela { opacity:1; transform:none; transition:none; }
}