/* ══════════════════════════════════════════════════════════════
   /vendacomonunca/ — a página de vendas com VSL
   Carrega DEPOIS de ../marketplace/css/style.css: tokens, botões,
   caderno, prints, CTA, rodapé, barra e aviso vêm de lá. Aqui só o
   que é novo: a abertura com o vídeo e a barra dos 2:05.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   A ABERTURA — preto, a etiqueta verde do lucro dentro da manchete
   e o vídeo como a coisa principal. O padding de baixo
   é grande de propósito: é nele que o painel branco do caderno sobe
   por dentro (ver .note na página principal).
   ══════════════════════════════════════════════════════════════ */
.vhero{
  position:relative; overflow:hidden; background:#000; text-align:center;
  padding:clamp(2rem,6vw,4rem) 0 clamp(2.5rem,6vw,4rem);
}
/* o halo azul atrás do vídeo: luz, não mancha — só existe no preto */
.vhero::before{
  content:""; position:absolute; left:50%; top:38%; width:min(60rem,140vw); aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(38,97,156,.35),rgba(38,97,156,0) 70%);
}
.vhero-inner{position:relative; z-index:1}

.vhero-h{
  margin:0 auto; max-width:14ch;
  font-size:clamp(2.3rem,8.6vw,4.6rem); font-weight:900;
  letter-spacing:-.04em; line-height:1.12; text-wrap:balance;
  animation:rise .8s var(--ease) .08s both;
}
/* a etiqueta do gancho, na manchete: ponta à esquerda, furo, torta */
.vhero-h .price-tag{
  position:relative; display:inline-block; white-space:nowrap;
  margin:.12em 0 0 .08em; padding:0 .26em .02em .6em; line-height:1.05;
  background:var(--win); color:#fff;
  clip-path:polygon(.36em 0,100% 0,100% 100%,.36em 100%,0 50%);
  transform:rotate(-3deg); transform-origin:left center;
  animation:priceIn .6s cubic-bezier(.34,1.56,.64,1) .55s both;
}
@keyframes priceIn{from{opacity:0; transform:rotate(-14deg) scale(.6)}}
.vhero-h .price-tag::before{
  content:""; position:absolute; left:.2em; top:50%;
  width:.14em; height:.14em; margin-top:-.07em; border-radius:50%; background:#000;
}
.vhero-sub{
  margin:clamp(1rem,2.4vw,1.3rem) auto 0; max-width:32ch;
  font-size:clamp(1.02rem,2.3vw,1.25rem); font-weight:500; line-height:1.4;
  color:var(--g-30); letter-spacing:-.015em;
  animation:rise .8s var(--ease) .16s both;
}
.vhero-sub b{color:#fff; font-weight:700}

/* as três garantias, numa linha só embaixo do vídeo */
.vhero-facts{
  list-style:none; margin:clamp(1.3rem,3vw,1.8rem) auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .6rem;
  animation:rise .8s var(--ease) .3s both;
}
.vhero-facts li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .8rem; border-radius:99px; background:var(--g-80);
  font-size:.85rem; font-weight:600; color:#fff; letter-spacing:-.01em;
}
.vhero-facts li::before{
  content:"✓"; display:grid; place-items:center; width:1.1rem; height:1.1rem;
  border-radius:50%; background:var(--win); font-size:.62rem; font-weight:800;
}
.vhero-go{margin-top:clamp(1.4rem,3.4vw,2rem); animation:rise .8s var(--ease) .38s both}

/* A VSL: a coisa principal da abertura. */
.vsl{
  position:relative; margin:clamp(1.6rem,4vw,2.4rem) auto 0;
  /* 16:9: o vídeo é gravação de tela com a câmera no canto, e
     qualquer corte comeria a tela ou o rosto */
  width:min(46rem,100%); aspect-ratio:16/9;
  border-radius:16px; overflow:hidden;
  background:var(--g-90); box-shadow:0 0 0 1px var(--g-80), 0 30px 60px -30px rgba(38,97,156,.55);
  animation:rise 1s var(--ease) .1s both;
}
.vsl video{display:block; width:100%; height:100%; object-fit:cover; background:#000}

/* o play: véu preto bem leve sobre a thumb inteira (qualquer toque
   começa), play grande no meio e a frase em branco com sombra para
   ler em cima de qualquer imagem */
.vsl-resume{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.6rem,2vw,1rem); padding:1rem;
  border:0; cursor:pointer; font:inherit; color:#fff;
  background:rgba(0,0,0,.32);
}
.vsl-resume-i{
  position:relative; width:clamp(3.6rem,12vw,5.6rem); aspect-ratio:1; border-radius:50%;
  background:var(--lapis); box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
  transition:transform .35s var(--ease), background .25s;
}
.vsl-resume-i::after{
  content:""; position:absolute; left:55%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:.85em 0 .85em 1.4em; font-size:clamp(.7rem,2vw,1rem);
  border-color:transparent transparent transparent #fff;
}
.vsl-resume:hover .vsl-resume-i{transform:scale(1.07); background:var(--lapis-deep)}
.vsl-resume-t{
  max-width:32ch; font-size:clamp(.9rem,2.6vw,1.2rem); font-weight:700; line-height:1.3;
  letter-spacing:-.01em; text-wrap:balance; text-shadow:0 1px 3px rgba(0,0,0,.6);
  /* tarja escura atrás: a frase lê em cima de qualquer thumb */
  padding:.45em .9em; border-radius:10px; background:rgba(0,0,0,.72);
}

/* depois do play o botão sai e ficam os controles nativos */
.vsl.is-on .vsl-resume{display:none}

/* a barra dos 2:05: flutua no pé da tela, de ponta a ponta, e pulsa
   até a pessoa tocar ou chegar sozinha no preço. Enquanto ela está
   ali, a barra de compra (.mbar) sai, para não empilhar duas. */
.vsl-next{
  position:fixed; z-index:95;
  left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom));
  max-width:34rem; margin-inline:auto;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:999px;
  background:var(--lapis); color:#fff;
  font-weight:700; font-size:1rem; letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(38,97,156,.9);
  transform:translateY(calc(100% + 2rem)); transition:transform .45s var(--ease);
}
.vsl-next[hidden]{display:none}
.vsl-next.is-on{transform:none; animation:pulse 1.6s ease-out .45s infinite}
.vsl-next span{display:inline-block; animation:nudge 1.8s var(--ease) infinite}
.vsl-next:hover{background:var(--lapis-deep)}
@keyframes pulse{
  0%{box-shadow:0 12px 30px -10px rgba(38,97,156,.9), 0 0 0 0 rgba(38,97,156,.65)}
  100%{box-shadow:0 12px 30px -10px rgba(38,97,156,.9), 0 0 0 14px rgba(38,97,156,0)}
}
@keyframes nudge{0%,55%,100%{transform:none} 25%{transform:translateY(5px)}}
body.seta-on .mbar{transform:translateY(120%)}
/* o aviso de cookies também sai enquanto a barra está ali: ele ficava
   por cima dela e roubava o toque. É só aviso (os pixels já carregam),
   então esconder não muda nada — e ele volta quando a barra some */
body.seta-on .consent{display:none}

/* sem vídeo ainda: a moldura avisa, sem fingir que dá para tocar */
.vsl.is-empty .vsl-resume{cursor:default}
.vsl.is-empty .vsl-resume-i{background:var(--g-80); box-shadow:none}
.vsl.is-empty .vsl-resume:hover .vsl-resume-i{transform:none}


/* ══════════════════════════════════════════════════════════════
   A TRAVA — até os 2:05 só existem a abertura e o rodapé. A classe
   vem do <head> e sai no vsl.js. Sem o caderno subindo por dentro,
   o padding gigante de baixo da abertura vira buraco: encolhe.
   ══════════════════════════════════════════════════════════════ */
.vsl-trava #conteudo,
.vsl-trava .mbar{display:none}
.vsl-trava .vhero{padding-bottom:clamp(3rem,8vw,5rem)}


/* ══════════════════════════════════════════════════════════════
   O IMPULSO — logo depois do vídeo, ainda no preto. O padding de
   baixo é grande porque é nele que o caderno branco sobe por dentro
   (o .note tem margin-top negativo); a abertura, que antes fazia
   esse papel, volta a ter respiro normal.
   ══════════════════════════════════════════════════════════════ */
.lucro{
  position:relative; background:#000; text-align:center;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(9rem,20vw,14rem);
}
.lucro-h{
  margin:0 auto; max-width:16ch;
  font-size:clamp(2rem,6.4vw,3.6rem); font-weight:900; letter-spacing:-.035em; line-height:1.05;
  text-wrap:balance;
}
/* destaque azul na seção: o lápis da página, um tom mais claro para
   ler como texto no preto */
.lucro{--azul:#4A8FD9}
.lucro-mark{color:var(--azul)}
.lucro-lead{
  margin:clamp(.8rem,2vw,1.1rem) auto 0; max-width:40ch;
  font-size:clamp(1rem,2.2vw,1.2rem); font-weight:500; line-height:1.4; color:#fff;
  text-wrap:balance;
}
.lucro-grid{
  list-style:none; margin:clamp(1.8rem,4.5vw,2.8rem) auto 0; padding:0; max-width:58rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.6rem,1.6vw,1rem);
}
.lucro-item{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:clamp(1rem,2.4vw,1.4rem) .8rem clamp(1.1rem,2.4vw,1.4rem);
  border-radius:16px; background:var(--g-90); border:1px solid var(--g-80);
}
.lucro-item img{
  width:auto; height:clamp(4.5rem,11vw,6.5rem); max-width:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.lucro-n{font-size:clamp(.9rem,1.8vw,1rem); font-weight:600; color:var(--g-30); letter-spacing:-.01em}
/* a etiqueta do lucro de cada um, azul como os destaques da seção */
.lucro-tag{
  display:inline-block; padding:.12em .55em .16em; border-radius:6px;
  background:var(--lapis); color:#fff; white-space:nowrap;
  font-size:clamp(1.25rem,3vw,1.7rem); font-weight:900; letter-spacing:-.03em; line-height:1.1;
  transform:rotate(-3deg);
}
.lucro-total{
  margin-top:clamp(1.6rem,4vw,2.4rem);
  font-size:clamp(1rem,2.2vw,1.2rem); font-weight:500; color:var(--g-30);
  letter-spacing:-.015em; line-height:1.4;
}
/* a pergunta que fecha o impulso: a maior frase da seção */
.lucro-big{
  margin:clamp(.6rem,1.6vw,1rem) auto 0; max-width:20ch;
  font-size:clamp(1.8rem,5.6vw,3.2rem); font-weight:900; letter-spacing:-.035em; line-height:1.08;
  text-wrap:balance;
}
.lucro-big b{color:var(--azul); font-weight:900; white-space:nowrap}

@media (max-width:700px){
  .lucro-grid{grid-template-columns:repeat(2,1fr)}
}


/* cada anúncio (print + lista) num cartão igual ao do "ISSO te
   interessa", para as duas seções brancas falarem a mesma língua */
.note .shot{
  padding:clamp(1rem,2.6vw,1.4rem); border-radius:16px;
  background:#F4F4F4; border:1px solid var(--g-10); text-align:left;
}
.note .shot img{border-radius:8px}
.note .sample-pair{align-items:stretch}
.note-lead b{font-weight:800; color:#000}

/* embaixo de cada anúncio, o porquê em lista: X vermelho no que
   não vendeu, ✓ verde no que vendeu — o mesmo item, invertido */
.shot-list{list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.55rem; text-align:left}
.shot-list li{
  position:relative; padding-left:1.7rem;
  font-size:clamp(.95rem,1.6vw,1.05rem); font-weight:600; line-height:1.35;
  letter-spacing:-.015em; color:#242424;
}
.shot-list li::before{
  position:absolute; left:0; top:.1em;
  display:grid; place-items:center; width:1.2rem; height:1.2rem; border-radius:50%;
  color:#fff; font-size:.66rem; font-weight:800; line-height:1;
}
.shot-list.is-x li::before{content:"✕"; background:var(--loss)}
.shot-list.is-v li::before{content:"✓"; background:var(--win)}


/* os feedbacks: com 5 prints + o cartão "O próximo é o seu", no
   desktop eles viram uma grade 3×2 — numa linha só os seis ficavam
   pequenos demais para ler. No celular segue a faixa que rola. */
@media (min-width:821px){
  .fb .fb-strip{
    display:grid; grid-template-columns:repeat(3,1fr);
    max-width:62rem; margin-inline:auto; overflow:visible;
  }
  .fb .fb-shot{max-width:none}
}

/* ══════════════════════════════════════════════════════════════
   O QUE TEM DENTRO — antes do preço. Branco com o corte diagonal do
   caderno; embaixo não tem fim próprio: emenda no branco do CTA, e
   os dois leem como um painel só que afunila até o botão.
   ══════════════════════════════════════════════════════════════ */
.val{
  position:relative; background:#fff; color:#000;
  padding-block:clamp(4.5rem,11vw,7rem) clamp(1rem,3vw,2rem);
  clip-path:polygon(0 0,100% clamp(1.5rem,4vw,3rem),100% 100%,0 100%);
}
.val-inner{max-width:920px; text-align:center}
.val-h{
  font-size:clamp(2.2rem,6vw,4rem); font-weight:900; letter-spacing:-.03em; line-height:.95;
}
/* um cartão só, com o que a pessoa ganha — o resto fica no PDF */
.val-card{
  margin:clamp(1.8rem,4.5vw,2.8rem) auto 0; max-width:34rem; text-align:left;
  padding:clamp(1.4rem,3.4vw,2rem); border-radius:16px;
  background:#F4F4F4; border:1px solid var(--g-10);
}
.val-more{
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--g-10);
  font-size:.95rem; line-height:1.4; color:var(--g-60); letter-spacing:-.012em;
}
.val-list{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.val-list li{
  position:relative; padding-left:1.6rem;
  font-size:clamp(1.05rem,2.2vw,1.2rem); font-weight:600; line-height:1.35; letter-spacing:-.015em; color:#242424;
}
.val-list li::before{
  content:"✓"; position:absolute; left:0; top:.15em;
  display:grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--win); color:#fff; font-size:.62rem; font-weight:800;
}
.val-list b{font-weight:700; color:#000}

.val-once{
  margin:clamp(1.6rem,4vw,2.4rem) auto 0; max-width:26ch;
  font-size:clamp(1.25rem,3vw,1.8rem); font-weight:800; color:#000;
  letter-spacing:-.028em; line-height:1.2; text-wrap:balance;
}
.val-list .val-red{color:var(--loss)}

/* o CTA continua o mesmo painel: sem o respiro de topo inteiro */
.val + .cta{padding-top:clamp(2.5rem,6vw,4rem)}


/* o preço que desce: números de largura fixa, senão o valor tremia
   de largura a cada quadro; no fim, um pulo curto para marcar a queda */
#precoNovo{font-variant-numeric:tabular-nums}
#precoNovo.is-caiu{animation:caiu .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes caiu{40%{transform:scale(1.08)}}
/* o botão enquanto o preço desce: apagado, sem clique, com os três
   pontinhos andando — e a seta só aparece quando ele libera */
.btn-buy.is-preparando{
  pointer-events:none; background:var(--g-60); box-shadow:none; transform:none;
}
.btn-buy.is-preparando .btn-arrow{display:none}
.btn-buy.is-preparando .btn-label::after{
  content:""; display:inline-block; width:1.1em; text-align:left;
  animation:pontos 1.2s steps(4) infinite;
}
@keyframes pontos{0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."}}

/* ══════════════════════════════════════════════════════════════
   PERGUNTAS FREQUENTES — preto, logo depois da ponta do funil.
   Cada pergunta é um <details>: o "+" vira "×" quando abre.
   ══════════════════════════════════════════════════════════════ */
.faq{background:#000; padding-block:clamp(3.5rem,9vw,6rem)}
.faq-inner{max-width:760px}
.faq-h{
  text-align:center; line-height:1;
  font-size:clamp(2rem,6vw,3.4rem); font-weight:900; letter-spacing:-.03em;
}
.faq-list{margin-top:clamp(1.8rem,4.5vw,2.8rem); border-top:1px solid var(--g-80)}
.faq-q{border-bottom:1px solid var(--g-80)}
.faq-q summary{
  position:relative; list-style:none; cursor:pointer;
  padding:1.15rem 2.6rem 1.15rem 0;
  font-size:clamp(1.02rem,2.2vw,1.2rem); font-weight:700; letter-spacing:-.02em; line-height:1.3;
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%;
  background:var(--g-80); font-size:1.2rem; font-weight:600; line-height:1;
  transition:transform .3s var(--ease), background .25s;
}
.faq-q[open] summary::after{transform:translateY(-50%) rotate(45deg); background:var(--lapis)}
.faq-q summary:hover::after{background:var(--lapis)}
.faq-q p{
  padding:0 2.6rem 1.25rem 0; margin:0;
  font-size:clamp(.95rem,1.9vw,1.05rem); line-height:1.55; color:var(--g-30); letter-spacing:-.01em;
}


/* ══════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO — efeito por efeito
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .vhero-h,.vhero-sub,.vhero-facts,.vsl,.vsl-next.is-on,.vsl-next span{animation:none}
  .vhero-h .price-tag{animation:none; transform:rotate(-3deg)}
  .vsl-next{transition:none}
  .vsl-resume-i{transition:none}
  .faq-q summary::after{transition:none}
  #precoNovo.is-caiu{animation:none}
}