/* ============================================================
   LANDING PAGE — pagina de venda
   Depende dos tokens de base.css
   ============================================================ */

/* ---------- revelacao no scroll ---------- */
.rev{opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.rev.vis{opacity:1; transform:none}
.rev.d1{transition-delay:.08s} .rev.d2{transition-delay:.16s}
.rev.d3{transition-delay:.24s} .rev.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rev{opacity:1; transform:none}}

.lp-secao{max-width:1180px; margin:0 auto; padding:86px 24px}
.lp-secao-titulo{text-align:center; max-width:40ch; margin:0 auto 44px}
.lp-secao-titulo h2{font-size:clamp(27px,3.6vw,40px); letter-spacing:-.03em; margin-bottom:14px}
.lp-secao-titulo p{color:var(--ink-2); font-size:17px}
.selo{display:inline-flex; align-items:center; gap:8px; background:var(--brand-fundo); color:var(--brand);
  font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:var(--r-pill); margin-bottom:16px}
.selo.ouro{background:var(--ouro-fundo); color:#A86B00}
.selo.verde{background:var(--verde-fundo); color:var(--verde)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .selo.ouro{color:var(--ouro)}}
:root[data-theme="dark"] .selo.ouro{color:var(--ouro)}

/* ---------- cabecalho ---------- */
.lp-nav{display:none; gap:28px; margin-left:38px}
.lp-nav a{color:var(--ink-2); font-size:14.5px; font-weight:500; text-decoration:none}
.lp-nav a:hover{color:var(--brand)}
@media (min-width:1000px){ .lp-nav{display:flex} }

/* ---------- hero ---------- */
.lp-hero-in{padding:72px 24px 96px}
.hero-bullets{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px}
.hero-bullet{display:flex; align-items:center; gap:8px; color:#A9C4E0; font-size:13.5px; font-weight:500}
.hero-bullet svg{width:16px; height:16px; flex:none; stroke:var(--verde); fill:none; stroke-width:2.6}

/* ---------- simulador de amostra no hero ---------- */
.q-demo{background:var(--surface); border-radius:var(--r-4); padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.18)}
.q-demo-topo{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.q-demo-passo{font-size:12.5px; color:var(--ink-3); font-weight:500; white-space:nowrap}
.q-demo-barra{height:5px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; margin-bottom:20px}
.q-demo-barra i{display:block; height:100%; background:var(--brand); border-radius:var(--r-pill);
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.q-demo-enunciado{font-weight:600; font-size:16.5px; line-height:1.5; margin-bottom:18px; letter-spacing:-.012em}

/* Alternativas no estilo iOS: superficie propria, sem contorno.
   A separacao vem da sombra, nunca de linha. */
.q-demo-alt{display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-radius:var(--r-2);
  background:var(--surface); margin-bottom:10px; cursor:pointer; border:0; width:100%; text-align:left;
  font-family:var(--sans); font-size:14.5px; color:var(--ink); line-height:1.45;
  box-shadow:var(--s-1);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s}
.q-demo-alt:hover:not(:disabled){box-shadow:var(--s-2); transform:translateY(-1px)}
.q-demo-alt:active:not(:disabled){transform:scale(.995)}
.q-demo-alt:disabled{cursor:default}
.q-demo-alt .letra{font-family:var(--mono); font-weight:700; color:var(--ink-3); flex:none; font-size:12.5px;
  width:23px; height:23px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center;
  transition:background .2s, color .2s}
.q-demo-alt .corpo{flex:1; min-width:0}
.q-demo-alt.certa{background:var(--verde-fundo); box-shadow:0 2px 12px rgba(46,132,74,.2)}
.q-demo-alt.certa .letra{background:var(--verde); color:#fff}
.q-demo-alt.errada{background:var(--vermelho-fundo); box-shadow:0 2px 12px rgba(215,52,42,.16)}
.q-demo-alt.errada .letra{background:var(--vermelho); color:#fff}
.q-demo-alt.apagada{opacity:.52}
.q-demo-alt .porque{display:block; font-size:13px; line-height:1.55; margin-top:7px; color:var(--ink-2);
  animation:surgeExp .28s cubic-bezier(.22,1,.36,1)}
.q-demo-alt .tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:5px}
.q-demo-alt.certa .tag{color:var(--verde)}
.q-demo-alt.errada .tag{color:var(--vermelho)}
@keyframes surgeExp{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}

.q-demo-acao{margin-top:16px; display:flex; flex-direction:column; gap:9px}
/* Desabilitado continua legivel: some a sombra e o relevo, nao o texto. */
.q-demo-acao .btn.primary:disabled{opacity:1; background:var(--surface-2); color:var(--ink-3);
  box-shadow:none; cursor:default}
.q-demo-todos{color:var(--brand); font-size:13.5px; padding:9px 14px}
.q-demo-todos:hover{background:var(--brand-fundo); box-shadow:none; transform:none}
.q-demo-todos svg{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.q-demo-todos:hover svg{transform:translateX(3px)}
.q-demo-rodape{display:flex; align-items:center; gap:9px; margin-top:16px; color:var(--ink-3); font-size:12.5px}
.q-demo-rodape svg{flex:none}

/* tela final */
.q-fim{text-align:center; padding:6px 0}
.q-fim-anel{--pct:0; width:116px; height:116px; margin:0 auto 18px; border-radius:50%; display:grid;
  place-items:center; background:conic-gradient(var(--sc) calc(var(--pct)*1%), var(--surface-2) 0)}
.q-fim-anel>div{width:92px; height:92px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; text-align:center}
.q-fim-anel b{font-family:var(--display); font-size:29px; font-weight:700; line-height:1}
.q-fim-anel small{display:block; font-size:10px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.08em; margin-top:4px; font-weight:600}
.q-fim h3{font-size:21px; margin-bottom:9px}
.q-fim p{color:var(--ink-2); font-size:14.5px; line-height:1.6; max-width:38ch; margin:0 auto 20px}
.q-fim .btn{width:100%}
.q-fim .refazer{background:none; border:0; color:var(--ink-3); font-family:var(--sans); font-size:13px;
  cursor:pointer; margin-top:12px; padding:4px}
.q-fim .refazer:hover{color:var(--brand)}

/* ---------- contadores ---------- */
.lp-contadores{background:var(--surface); padding:52px 24px}
.contadores{max-width:1180px; margin:0 auto; display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); text-align:center}
.contador .n{font-family:var(--display); font-size:clamp(34px,4.4vw,50px); font-weight:700;
  letter-spacing:-.035em; line-height:1; color:var(--brand); font-variant-numeric:tabular-nums}
.contador .l{font-size:13.5px; color:var(--ink-3); margin-top:9px; line-height:1.45}

/* ---------- problema ---------- */
.lp-problema{background:linear-gradient(165deg,var(--navy),var(--navy-fundo)); color:#fff}
.lp-problema .lp-secao-titulo h2{color:#fff}
.lp-problema .lp-secao-titulo p{color:#A9C4E0}
.dor{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.dor-item{background:rgba(255,255,255,.07); border-radius:var(--r-3); padding:26px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.dor-item .x{width:40px; height:40px; border-radius:var(--r-2); background:rgba(215,52,42,.18);
  color:#FF8A7E; display:grid; place-items:center; margin-bottom:14px; font-size:19px; font-weight:700}
.dor-item h3{color:#fff; font-size:17px; margin-bottom:8px}
.dor-item p{color:#A9C4E0; font-size:14.5px; line-height:1.65}
.virada{text-align:center; margin-top:48px; max-width:52ch; margin-left:auto; margin-right:auto}
.virada h3{color:#fff; font-size:clamp(21px,2.8vw,28px); margin-bottom:12px}
.virada p{color:#C6D9EE; font-size:16.5px}

/* ---------- etapas ---------- */
.escada{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.degrau{background:var(--surface); border-radius:var(--r-3); padding:26px; box-shadow:var(--s-2);
  position:relative; overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
.degrau:hover{transform:translateY(-6px); box-shadow:var(--s-3)}
.degrau::after{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--cor)}
.degrau-num{width:46px; height:46px; border-radius:var(--r-2); background:var(--cor-fundo); color:var(--cor);
  font-family:var(--display); font-weight:700; font-size:21px; display:grid; place-items:center; margin-bottom:16px}
.degrau h3{font-size:18px; margin-bottom:5px}
.degrau .dur{font-size:12.5px; color:var(--ink-3); margin-bottom:12px; font-weight:500}
.degrau p{font-size:14.5px; color:var(--ink-2); line-height:1.6}
.degrau .certs{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px}

/* ---------- ferramentas ---------- */
.ferramentas{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.ferr{background:var(--surface); border-radius:var(--r-2); padding:20px; box-shadow:var(--s-1);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s}
.ferr:hover{transform:translateY(-4px); box-shadow:var(--s-2)}
.ferr-ico{width:40px; height:40px; border-radius:var(--r-1); background:var(--brand-fundo); color:var(--brand);
  display:grid; place-items:center; margin-bottom:13px}
.ferr-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.ferr h3{font-size:15.5px; margin-bottom:5px}
.ferr p{font-size:13.5px; color:var(--ink-3); line-height:1.55}

/* ---------- comparativo ---------- */
.comp{background:var(--surface); border-radius:var(--r-3); box-shadow:var(--s-2); overflow:hidden}
.comp table{min-width:540px}
.comp th{background:var(--surface-2); padding:16px; font-size:12px}
.comp th:nth-child(2){color:var(--ink-3)}
.comp th:nth-child(3){color:var(--brand)}
.comp td{padding:14px 16px; font-size:14.5px}
.comp td:first-child{font-weight:500}
.comp td:nth-child(2){color:var(--ink-3)}
.comp td:nth-child(3){color:var(--ink); font-weight:500}
.comp .sim{color:var(--verde); font-weight:700}
.comp .nao{color:var(--ink-3)}

/* ---------- preco ---------- */
.lp-preco{background:linear-gradient(165deg,var(--navy),var(--navy-fundo))}
.lp-preco .lp-secao-titulo h2{color:#fff}
.lp-preco .lp-secao-titulo p{color:#A9C4E0}
.caixa-preco{max-width:560px; margin:0 auto; background:var(--surface); border-radius:var(--r-4);
  padding:38px 34px; box-shadow:0 30px 90px rgba(0,0,0,.42); position:relative; overflow:hidden}
.caixa-preco::before{content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--brand),var(--ouro))}
.preco-topo{text-align:center; margin-bottom:26px}
.preco-ancora{color:var(--ink-3); font-size:14px; margin-bottom:10px}
.preco-valor{font-family:var(--display); font-size:clamp(44px,6vw,62px); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:var(--ink)}
.preco-valor small{font-size:.44em; font-weight:600; vertical-align:super; margin-right:4px}
.preco-parcela{margin-top:12px; font-size:17px; color:var(--brand); font-weight:600}
.preco-cond{font-size:13.5px; color:var(--ink-3); margin-top:8px}
.preco-lista{margin:26px 0}
.preco-lista li{display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:14.5px; line-height:1.55}
.preco-lista svg{width:19px; height:19px; flex:none; margin-top:2px; stroke:var(--verde); fill:none; stroke-width:2.6}
.preco-lista b{color:var(--ink)}
.preco-pag{text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:16px; line-height:1.6}

/* ---------- garantia ---------- */
.garantia{max-width:720px; margin:0 auto; text-align:center; background:var(--surface);
  border-radius:var(--r-4); padding:44px 32px; box-shadow:var(--s-2)}
.garantia-selo{width:92px; height:92px; margin:0 auto 20px; border-radius:50%;
  background:var(--verde-fundo); color:var(--verde); display:grid; place-items:center;
  font-family:var(--display); font-weight:700; line-height:1}
.garantia-selo b{display:block; font-size:30px}
.garantia-selo span{font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.garantia h2{font-size:26px; margin-bottom:12px}
.garantia p{color:var(--ink-2); font-size:16px; max-width:52ch; margin:0 auto}

/* ---------- transparencia ---------- */
.transp{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.transp-item{background:var(--surface); border-radius:var(--r-3); padding:24px; box-shadow:var(--s-1)}
.transp-item h3{font-size:16px; margin-bottom:8px; display:flex; align-items:center; gap:9px}
.transp-item h3 svg{width:19px; height:19px; flex:none; stroke:var(--verde); fill:none; stroke-width:2.4}
.transp-item p{font-size:14.5px; color:var(--ink-2); line-height:1.62}

/* ---------- FAQ ---------- */
.faq{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--surface); border-radius:var(--r-2); box-shadow:var(--s-1); overflow:hidden}
.faq-p{width:100%; text-align:left; background:none; border:0; padding:20px 22px; cursor:pointer;
  font-family:var(--display); font-size:16.5px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:14px; letter-spacing:-.015em}
.faq-p:hover{background:var(--surface-2)}
.faq-p .mais{margin-left:auto; flex:none; width:22px; height:22px; color:var(--ink-3); transition:transform .25s}
.faq-item.aberto .faq-p .mais{transform:rotate(45deg); color:var(--brand)}
.faq-r{max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.22,1,.36,1)}
.faq-r div{padding:0 22px 20px; color:var(--ink-2); font-size:15px; line-height:1.7}

/* ---------- popup de prova social ---------- */
.prova-pop{position:fixed; left:22px; bottom:22px; z-index:70; width:360px; max-width:calc(100vw - 44px);
  background:var(--surface); border-radius:var(--r-3); padding:17px 19px; box-shadow:var(--s-4);
  transform:translateY(130%); opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s}
.prova-pop.vis{transform:translateY(0); opacity:1}

.prova-topo{display:flex; gap:12px; align-items:center; margin-bottom:11px}
.prova-foto{width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--surface-2); box-shadow:var(--s-1)}
.prova-foto svg,.prova-foto img{width:100%; height:100%; display:block; object-fit:cover}
.prova-quem{min-width:0; flex:1}
.prova-quem b{display:block; font-size:14.5px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prova-quem small{display:block; color:var(--ink-3); font-size:12px; margin-top:2px}
.prova-selo{flex:none; display:inline-flex; align-items:center; gap:5px; background:var(--verde-fundo);
  color:var(--verde); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill)}
.prova-selo svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:3}

.prova-texto{font-size:14px; line-height:1.6; color:var(--ink-2)}
.prova-texto::before{content:"“"; color:var(--brand); font-family:var(--display);
  font-size:26px; line-height:0; vertical-align:-6px; margin-right:3px}
.prova-rodape{display:flex; align-items:center; gap:8px; margin-top:11px; color:var(--ink-3); font-size:11.5px}
.prova-estrelas{color:var(--ouro); letter-spacing:1px; font-size:12px}

.prova-x{position:absolute; top:9px; right:11px; background:none; border:0; color:var(--ink-3);
  font-size:17px; cursor:pointer; line-height:1; padding:3px 6px; border-radius:var(--r-1)}
.prova-x:hover{background:var(--surface-2)}

/* selo de exemplo: so aparece enquanto os depoimentos sao mock */
.prova-exemplo{position:absolute; top:-10px; left:16px; background:var(--ouro); color:#3A2500;
  font-size:10px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:var(--r-pill);
  text-transform:uppercase; box-shadow:var(--s-1)}

/* formato de fato verificavel, usado quando nao ha depoimento real */
.prova-pop.fato{display:flex; gap:13px; align-items:flex-start}
.prova-pop.fato .prova-ico{width:38px; height:38px; flex:none; border-radius:var(--r-1);
  display:grid; place-items:center; background:var(--brand-fundo); color:var(--brand)}
.prova-pop.fato .prova-ico svg{width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.prova-pop.fato .prova-txt b{display:block; font-size:14px; font-weight:600; line-height:1.35; margin-bottom:3px}
.prova-pop.fato .prova-txt small{display:block; color:var(--ink-3); font-size:12.5px; line-height:1.45}

@media (max-width:620px){
  .prova-pop{left:12px; right:12px; bottom:78px; width:auto; max-width:none}
}

/* ---------- barra fixa de compra no celular ---------- */
.barra-compra{position:fixed; left:0; right:0; bottom:0; z-index:65; background:var(--surface);
  box-shadow:0 -6px 24px rgba(12,23,38,.14); padding:11px 16px; display:none;
  align-items:center; gap:14px; transform:translateY(100%); transition:transform .35s cubic-bezier(.22,1,.36,1)}
.barra-compra.vis{transform:translateY(0)}
.barra-compra .valor{font-family:var(--display); font-weight:700; font-size:19px; line-height:1.1}
.barra-compra .valor small{display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:500; color:var(--ink-3); margin-top:2px}
.barra-compra .btn{margin-left:auto; flex:none}
@media (max-width:860px){ .barra-compra{display:flex} }

/* ---------- fecho ---------- */
.lp-cta-final{text-align:center; max-width:640px; margin:0 auto}
.lp-cta-final h2{font-size:clamp(28px,4vw,42px); letter-spacing:-.03em; margin-bottom:16px; color:#fff}
.lp-cta-final p{color:#A9C4E0; font-size:17px; margin-bottom:28px}

@media (max-width:860px){
  .lp-secao{padding:62px 20px}
  body{padding-bottom:70px}
}

/* Nota de transparencia dos depoimentos. Fica junto da prova social, nao
   escondida no rodape: quem le depoimento merece saber de onde ele veio. */
.transp-nota{max-width:680px; margin:14px auto 0; font-size:13.5px; line-height:1.6;
  color:var(--ink-3); background:var(--surface-2); border-radius:var(--r-2); padding:14px 18px}