/* Verão que Lute 2026 · LP de VENDAS (28/10) — só as seções próprias dela.
   KV aprovado intocado: hero "Luz quente", tokens, fonte, botões, topo, contagem, linha do tempo, dores, pares,
   metas, Gabi e FAQ vêm de vql.css + longa.css. Aqui só entram as seções novas do doc de vendas, montadas com os
   MESMOS tokens (ferrugem, manteiga, pêssego, areia, tinta) e os mesmos gestos do KV (estrelinha, oval desenhado
   à mão, marca-texto manteiga, furos de planner). Nenhuma cor ou fonte nova. */

/* 29/10 (Lara): marrom escuro #422516 no lugar do preto nos textos desta página; a moldura dos celulares segue preta */
.vendas{--tinta:#422516;--preto-cel:#1C1512;color:var(--tinta)}

/* ---------- HERO: a promessa da venda é mais longa que a da captura ---------- */
.vendas .logo-vivo{width:clamp(104px,15vh,190px)}
.vendas .h1-a{font-size:clamp(24px,6.5vw,30px);line-height:1.1;max-width:21ch}
.vendas .h1-a mark{font-weight:800}
.h1-topa{font-style:normal;color:var(--manteiga)}
.hd-sub{font-size:15.5px;line-height:1.45;font-weight:500;color:var(--creme-texto);max-width:38ch;text-shadow:0 2px 24px rgba(40,14,4,.4)}
.hd-sub strong{font-weight:800;color:var(--manteiga)}
.vendas .hd-data{text-align:center;text-wrap:balance}

/* ---------- É NESTE VERÃO! (título curto: pode ser maior que o da Longa) ---------- */
/* "NÃO NO PRÓXIMO…" sempre começa em linha nova (antes o NÃO ficava preso no VERÃO!); entrelinha um pouco maior
   que a da captura porque os acentos de caixa alta (Ã, É, Ó) encostavam na linha de cima */
.auge-longa.auge-vendas .titulo-kv{font-size:clamp(38px,5vw,72px);line-height:1.1}
@media (min-width:960px){.auge-vendas .titulo-kv .marca{white-space:nowrap}}
.auge-vendas .sem-quebra{white-space:nowrap}

/* ---------- FUNCIONA ASSIM ---------- */
.plano-vendas .plano-tit .grito{font-size:clamp(40px,6.4vw,88px)}
.plano-vendas .tempo{margin-top:clamp(32px,4vw,56px)}
.plano-vendas .cta-bloco.centro{margin-top:clamp(40px,5vw,64px)}

/* ---------- O SEGREDO DA BARRIGA ---------- */
.barriga{padding:clamp(64px,8vw,112px) 0}
.barriga-grade{display:grid;gap:36px}
.barriga-texto{display:grid;gap:16px;align-content:center}
.barriga-tit{font-size:clamp(26px,3.4vw,44px)}
.vendas strong.ferr{color:var(--ferrugem)}
.barriga-foto{position:relative;margin:0;width:min(100%,460px);aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--pessego);justify-self:center}
.barriga-foto img{width:100%;height:100%;object-fit:cover}
/* a "cinta" do transverso: o oval desenhado à mão do KV, em manteiga, contornando a cintura */
.cinta{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cinta path{fill:none;stroke:var(--manteiga);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 2px 6px rgba(40,14,4,.4));transition:stroke-dashoffset 1.5s var(--ease) .25s}
.cinta-rot{position:absolute;left:50%;top:80%;padding:7px 14px;border-radius:999px;background:var(--ferrugem);color:var(--manteiga);font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(40,14,4,.7);transform:translate(-50%,10px);opacity:0;transition:opacity .5s var(--ease-out) 1.3s,transform .8s var(--ease) 1.3s}
.barriga-foto.on .cinta path,html:not(.js) .cinta path{stroke-dashoffset:0}
.barriga-foto.on .cinta-rot,html:not(.js) .cinta-rot{opacity:1;transform:translate(-50%,0)}

/* ---------- PROVAS: mural de antes e depois ---------- */
.provas{padding:clamp(64px,8vw,112px) 0 clamp(36px,4vw,56px);overflow-x:clip}
.provas-cab{display:grid;justify-items:center;text-align:center;margin-bottom:clamp(28px,4vw,52px)}
.provas-cab h2{max-width:20ch}
.mural{column-count:2;column-gap:10px;padding:0 14px;max-width:1120px;margin-inline:auto}
.mural-col{display:contents}
.ad,.ad-cartao{break-inside:avoid;margin:0 0 10px}
.ad{position:relative;border-radius:18px;overflow:hidden;background:var(--areia)}
.ad img{width:100%;height:auto}
.ad figcaption{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--tinta);font-size:9.5px;font-weight:700;letter-spacing:.14em;line-height:1.4}
.ad-cartao{display:grid;gap:6px;padding:22px 18px;border-radius:18px}
.ad-cartao b{font-size:clamp(28px,3vw,40px);line-height:1;font-weight:800;letter-spacing:-.03em}
.ad-cartao span{font-size:13px;font-weight:600;line-height:1.35}
.ad-pessego{background:var(--pessego);color:var(--ferrugem)}
.ad-pessego span{color:var(--ferrugem-2)}
.ad-ferr{background:var(--ferrugem);color:var(--manteiga)}
.ad-ferr span{letter-spacing:.12em;font-size:11px;font-weight:700}
.provas-nota{margin-top:14px;text-align:center;font-size:12px;color:var(--tinta-2)}

/* ---------- DORES: sem foto aqui (o mural já é a imagem da seção) ---------- */
.dores-vendas{padding-top:clamp(40px,5vw,72px)}
.dores-vendas .dores-grade{grid-template-columns:minmax(0,1fr);max-width:760px}

/* ---------- APP: três celulares que se abrem em leque ---------- */
.app{position:relative;isolation:isolate;padding:clamp(64px,8vw,112px) 0;overflow-x:clip}
.app-grade{display:grid;gap:40px}
.app-texto{display:grid;gap:16px;align-content:center}
.app-tit{font-size:clamp(30px,4.2vw,56px)}
.checa{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--tinta)}
.checa-ok{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ferrugem)}
.checa-ok::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:12px;border:solid var(--manteiga);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.caixa-dest{padding:18px 20px;border-radius:20px;background:var(--manteiga);color:var(--ferrugem-2);font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.caixa-dest strong{font-weight:800}

/* o celular: moldura escura, ilha no topo (cobre o recorte do print da loja), tela no tamanho exato do print */
.cel{--cw:200px;width:var(--cw);padding:calc(var(--cw) * .034);border-radius:calc(var(--cw) * .15);background:var(--preto-cel);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 70px -34px rgba(60,22,8,.6),0 14px 26px -18px rgba(60,22,8,.45)}
.cel-tela{position:relative;aspect-ratio:622/1316;border-radius:calc(var(--cw) * .118);overflow:hidden;background:var(--branco)}
.cel-tela::before{content:"";position:absolute;z-index:1;top:0;left:22%;right:22%;height:3.1%;border-radius:0 0 12px 12px;background:var(--preto-cel)}
.cel-tela img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

.celulares{--cw:min(196px,44vw);--leque:1;position:relative;height:calc(var(--cw) * 2.36);margin-inline:auto;width:100%;max-width:520px}
.celulares::before{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,175,.7),rgba(255,214,175,0) 64%);z-index:-1}
.celulares .cel{--cw:inherit;position:absolute;left:50%;top:50%;will-change:transform}
.cel-c{z-index:2;transform:translate(-50%,-50%) translateY(calc((1 - var(--leque)) * 26px))}
.cel-e{z-index:1;transform:translate(-50%,-50%) translateX(calc(var(--leque) * -50%)) rotate(calc(var(--leque) * -7deg)) scale(.86)}
.cel-d{z-index:1;transform:translate(-50%,-50%) translateX(calc(var(--leque) * 50%)) rotate(calc(var(--leque) * 7deg)) scale(.86)}

/* ---------- TUDO O QUE PREPARAMOS: cartões que se empilham ---------- */
.entrega{padding:clamp(64px,8vw,112px) 0 clamp(24px,3vw,48px)}
.entrega-cab{display:grid;justify-items:center;text-align:center;margin-bottom:clamp(28px,4vw,56px)}
.entrega-tit{max-width:22ch}
.pilha{list-style:none;margin:0 auto;padding:0 14px;max-width:1080px;display:grid;gap:18px}
.cartao-e{position:relative;display:grid;background:var(--branco);border-radius:28px;box-shadow:0 0 0 1.5px var(--linha),0 30px 60px -44px rgba(70,26,10,.5);transform-origin:50% 0}
/* empilhar só quando cada cartão cabe na tela (vendas.js mede e liga .empilha) */
.pilha.empilha .cartao-e{position:sticky;top:calc(var(--topo-h) + 14px + var(--n) * 12px);transform:scale(var(--e-esc,1));will-change:transform}
.cartao-e::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tinta);opacity:var(--e-sombra,0);pointer-events:none}
.e-foto{position:relative;margin:10px 10px 0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--areia)}
.e-foto img{width:100%;height:100%;object-fit:cover}
.e-foto .sombra-mesa{top:-24%;right:-20%;width:150%;height:100%;opacity:.2;z-index:1}
.e-app{display:grid;place-items:center;background:var(--pessego)}
.e-app .cel{--cw:clamp(118px,34vw,168px);margin-top:16%;transform:rotate(-5deg)}
.e-txt{display:grid;gap:8px;align-content:center;padding:18px 20px 24px}
.e-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ferrugem);color:var(--manteiga);font-size:12px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.e-tit{font-size:clamp(18px,1.8vw,26px);font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ferrugem)}
.e-sub{font-size:clamp(15px,1.25vw,18px);font-weight:700;line-height:1.4;color:var(--tinta)}
.e-lista,.ticket-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.e-lista{margin-top:6px}
.e-lista li,.ticket-lista li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:var(--tinta-2)}
.e-lista li::before,.ticket-lista li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;margin-top:.05em;border-radius:50%;background:var(--pessego);color:var(--ferrugem);font-size:12px;font-weight:800;line-height:1}

/* ---------- OFERTA: o ingresso de planner ---------- */
.oferta{position:relative;isolation:isolate;display:grid;place-items:center;padding:clamp(72px,9vw,128px) 16px;overflow-x:clip;scroll-margin-top:calc(var(--topo-h) - 40px)}
.oferta::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,175,.78),rgba(255,214,175,0) 64%);z-index:-1}
.ticket{position:relative;width:min(560px,100%);display:grid;gap:14px;justify-items:center;text-align:center;padding:34px 34px 26px;border-radius:30px;background:var(--branco);box-shadow:0 0 0 1.5px var(--linha),0 44px 90px -36px rgba(28,21,18,.5)}
.ticket .furos{top:34px;bottom:34px}
.ticket-logo{width:118px}
.ticket-lista{width:100%;margin:2px 0 4px;padding:16px 4px;border-top:1.5px dashed var(--linha);border-bottom:1.5px dashed var(--linha);text-align:left}
.ticket-lista li{color:var(--tinta);font-weight:600}
.ticket-por{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--tinta-2)}
.preco{color:var(--ferrugem);font-weight:800;letter-spacing:-.03em;line-height:1}
.preco-vis{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 .22em}
.preco-x{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em}
.preco-rs{font-size:clamp(22px,2.6vw,32px)}
.preco-n{font-size:clamp(58px,8.4vw,92px)}
.preco-vista{font-size:clamp(17px,1.5vw,20px);color:var(--tinta)}
.preco-num{display:inline-flex;align-items:flex-start;white-space:nowrap} /* número e asterisco nunca se separam */
.preco-ast{font-size:clamp(26px,3.4vw,36px);line-height:1;align-self:flex-start;margin:.32em 0 0 -.18em}
.preco-nota{margin-top:-6px;font-size:12px;color:var(--tinta-2)}
/* /alunas (30/10): a aba recortada do KV pendurada no topo do cartão de preço + o preço cheio riscado */
.ticket-alunas{padding-top:66px}
.ticket-alunas .ticket-tag{font-size:12px;padding:10px 20px 11px;letter-spacing:.14em}
.ticket-por s{color:var(--tinta-2);text-decoration-color:var(--ferrugem);text-decoration-thickness:.14em}
.preco-vista strong{font-weight:800}
.ticket .btn{margin-top:4px}
.ticket .data{color:var(--tinta-2)}
/* números que rolam (mesmo gesto da contagem): cada dígito é uma fita de 0 a 9 */
/* um dígito "fantasma" invisível segura a largura e a linha de base; a fita corre por cima e o recorte é só da caixa dele */
.slot{position:relative;display:inline-block;line-height:1;clip-path:inset(-.06em -.04em)}
.slot-g{visibility:hidden}
.fita{position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;text-align:center;transform:translateY(calc(var(--d,0) * -1em));transition:transform 1.3s var(--ease) calc(var(--k,0) * 90ms)}
.fita span{display:block;height:1em;line-height:1}
.fita.sem-anim{transition:none}

/* ---------- GARANTIA: o selo girando devagar ---------- */
.garantia{padding:clamp(56px,7vw,104px) 0}
.garantia-grade{display:grid;gap:28px;justify-items:center;text-align:center;max-width:900px}
.selo{position:relative;width:clamp(176px,18vw,220px);aspect-ratio:1;display:grid;place-items:center}
.selo-anel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:gira 28s linear infinite}
.selo-anel text{font:700 12px var(--fonte);letter-spacing:.2em;fill:var(--ferrugem)}
@keyframes gira{to{transform:rotate(360deg)}}
.selo-miolo{width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;background:var(--ferrugem);color:var(--manteiga);box-shadow:0 22px 40px -22px rgba(110,45,22,.8)}
.selo-miolo b{font-size:clamp(50px,5vw,66px);line-height:.88;font-weight:800;letter-spacing:-.04em}
.selo-miolo small{font-size:11px;font-weight:700;letter-spacing:.22em}
.garantia-texto{display:grid;gap:12px;justify-items:center}
.garantia-tit{display:inline-flex;align-items:center;gap:.35em;font-size:clamp(28px,3.6vw,46px)}
.garantia-tit img{width:.62em;height:auto;flex:none;animation:lv-brilha 3.6s ease-in-out infinite}
.garantia-tit img:last-child{animation-delay:.6s}
.garantia-rot{font-size:12px}
.garantia .corpo{max-width:52ch}

/* ---------- rodapé ---------- */
.rodape-vendas .contato{font-size:13px;color:var(--tinta-2)}
.rodape-vendas .contato a{color:var(--ferrugem);font-weight:700;text-underline-offset:.18em}

@media (prefers-reduced-motion:no-preference){html:has(.vendas){scroll-behavior:smooth}}
@media (hover:hover) and (pointer:fine){
  .ad img{transition:transform .9s var(--ease)}
  .ad:hover img{transform:scale(1.03)}
}

/* =================== TABLET+ =================== */
@media (min-width:760px){
  .barriga-grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
  .barriga-foto{justify-self:end}
  .mural{column-count:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 20px;align-items:start}
  .mural-col{display:flex;flex-direction:column;gap:16px;will-change:transform}
  .mural-col:nth-child(2){margin-top:64px}
  .ad,.ad-cartao{margin:0}
  .ad figcaption{font-size:10px;left:12px;bottom:12px}
  .app-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
  .celulares{--cw:clamp(176px,19vw,236px)}
  .cartao-e{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
  .e-foto{margin:12px 0 12px 12px;aspect-ratio:auto;min-height:330px}
  .e-txt{padding:30px 40px 32px 36px}
  .e-app .cel{--cw:clamp(150px,15vw,190px);margin-top:28%}
  .ticket{padding:42px 56px 30px}
  .ticket-alunas{padding-top:74px}
  .ticket .furos-e{left:18px}.ticket .furos-d{right:18px}
  .garantia-grade{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:56px;align-items:center}
  .garantia-texto{justify-items:start}
}
@media (min-width:960px){
  .vendas .h1-a{font-size:clamp(36px,min(3.9vw,6.4vh),60px);line-height:1.04;max-width:22ch}
  .hd-sub{font-size:clamp(17px,min(1.45vw,2.6vh),21px);max-width:52ch}
}
/* telas estreitas */
@media (max-width:359px){
  .vendas .h1-a{font-size:23px}
  .hd-sub{font-size:14.5px}
  .preco-n{font-size:52px}
  .ticket-alunas .ticket-tag{font-size:10.5px;letter-spacing:.07em;padding-inline:14px}
  .ticket{padding:28px 22px 22px}
  .ticket .furos{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cinta path{stroke-dashoffset:0}.cinta-rot{opacity:1;transform:translate(-50%,0)}
  .celulares{--leque:1!important}
  .pilha.empilha .cartao-e{transform:none}
  .selo-anel{animation:none}
}