/* VENDE+ · páginas por segmento (12/10/2026): movimento guiado pela rolagem.
   Sem bibliotecas. Sem JavaScript (sem a classe .js no <html>), tudo fica parado no estado final. */
:root{--eo:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* 1. Revelar ao rolar */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--eo),transform .9s var(--eo);transition-delay:var(--d,0s)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r] .s{opacity:0;transform:translateY(14px);transition:opacity .7s var(--eo),transform .7s var(--eo);transition-delay:calc(var(--i,0)*90ms + .15s)}
.js [data-r].in .s{opacity:1;transform:none}

/* telas entram como se a câmera descesse sobre elas */
.js .figure[data-r]{transform:perspective(1400px) rotateX(12deg) translateY(44px) scale(.96);transition-duration:1s,1.2s}
.js .figure--phone[data-r]{transform:perspective(1200px) rotateY(-16deg) translateY(44px) scale(.96)}
.js .figure[data-r].in{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.js .figure.tilt{transition:transform .25s ease-out}
.js .figure--phone.in img{animation:vs-float 6s ease-in-out 1.2s infinite}

/* tabelas de exemplo: uma linha de cada vez, e a etiqueta de situação "estala" */
.js [data-r] tr.s{transform:translateX(-14px)}
.js [data-r].in tr.s .tag{animation:vs-pop .55s var(--spring) both;animation-delay:calc(var(--i,0)*90ms + .5s)}

/* passos do dia: a linha se desenha e cada número pulsa na vez */
.steps{position:relative}
.steps li{position:relative;z-index:1}
.steps::before{content:"";position:absolute;left:0;right:0;top:38px;height:2px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--eo) .25s;z-index:0}
.steps.in::before{transform:none}
.js .steps.in li::before{animation:vs-ping 1.2s ease-out calc(var(--i,0)*180ms + .5s) 1}
@media (max-width:760px){.steps::before{display:none}}

/* 2. Hero: o título entra palavra por palavra; a tela começa inclinada e se endireita com a rolagem (a "câmera") */
.js .hero .crumbs{animation:vs-fade .7s both}
.js .hero .eyebrow{animation:vs-up .7s var(--eo) .1s both}
.js .hero h1 .w{display:inline-block;opacity:0;animation:vs-up .8s var(--eo) both;animation-delay:calc(var(--i,0)*55ms + .15s)}
.js .hero .lead{animation:vs-up .9s var(--eo) .55s both}
.js .hero .lead + p{animation:vs-up .9s var(--eo) .7s both}
.js .hero .fine{animation:vs-fade .9s .9s both}
.shot-wrap{position:relative;max-width:980px;margin:44px auto 0;perspective:1600px}
.shot-wrap .shot{margin:0;max-width:none;transform-origin:50% 0;transform:rotateX(calc(14deg*var(--sp,0))) translateY(calc(36px*var(--sp,0))) scale(calc(1 - .05*var(--sp,0)));transition:transform .12s linear}
.js .shot-wrap .shot{--sp:1}
.js .shot-wrap{animation:vs-slam 1.1s var(--eo) .45s both}
.shot-wrap--only{height:118px;margin-top:36px;perspective:none}

/* avisos que rodam por cima da tela (interface sobreposta) */
.vs-notes{position:absolute;left:2%;bottom:18px;width:min(340px,90%);height:78px;margin:0;padding:0;list-style:none;text-align:left;z-index:2}
.shot-wrap--only .vs-notes{left:50%;bottom:auto;top:0;transform:translateX(-50%)}
.vs-notes .nt{position:absolute;left:0;top:0;width:100%;background:#fff;color:#04173A;border-radius:14px;padding:11px 14px 11px 40px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);opacity:0;transform:translateY(26px) scale(.96);transition:opacity .5s,transform .6s var(--spring)}
.vs-notes .nt::before{content:"";position:absolute;left:14px;top:16px;width:14px;height:14px;border-radius:50%;background:#18D64A;box-shadow:0 0 0 4px rgba(24,214,74,.25)}
.vs-notes .nt b{display:block;font-size:.88rem;line-height:1.25}
.vs-notes .nt small{display:block;color:#454E5D;font-size:.77rem;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-notes .nt:first-child:not([data-p]){opacity:1;transform:none}
.vs-notes .nt[data-p="0"]{opacity:1;transform:none;z-index:3}
.vs-notes .nt[data-p="1"]{opacity:.5;transform:translateY(-14px) scale(.94);z-index:2}
.vs-notes .nt[data-p="2"]{opacity:0;transform:translateY(-26px) scale(.9);z-index:1}
@media (max-width:640px){.vs-notes{height:70px;bottom:10px}.vs-notes .nt{padding:9px 12px 9px 36px}.vs-notes .nt b{font-size:.8rem}.vs-notes .nt small{font-size:.72rem}}

/* 3. Preço que conta e lista que entra em fila */
.js .price .v .n{display:inline-block;min-width:5.2ch;text-align:left}

@keyframes vs-up{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes vs-fade{from{opacity:0}to{opacity:1}}
@keyframes vs-slam{0%{opacity:0;transform:translateY(60px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes vs-pop{0%{transform:scale(.5)}60%{transform:scale(1.14)}100%{transform:none}}
@keyframes vs-ping{0%{box-shadow:0 0 0 0 rgba(24,214,74,.6)}100%{box-shadow:0 0 0 14px rgba(24,214,74,0)}}
@keyframes vs-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

@media (prefers-reduced-motion:reduce){
  .js [data-r],.js [data-r] .s{opacity:1;transform:none;transition:none}
  .js .hero .crumbs,.js .hero .eyebrow,.js .hero h1 .w,.js .hero .lead,.js .hero .lead + p,.js .hero .fine,.js .shot-wrap{animation:none;opacity:1}
  .shot-wrap .shot{transform:none!important}
  .js .figure--phone.in img,.js [data-r].in tr.s .tag,.js .steps.in li::before{animation:none}
  .steps::before{transform:none;transition:none}
  .vs-notes .nt{transition:none}
}

/* quatro selos numa linha só no desktop */
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--4 .card{padding:20px}
.grid--4 h3{font-size:1.05rem}

/* ===== Mockups: notebook e celular com o VENDE+ em uso (vídeos gravados da demo) ===== */
.hero--laptop{padding-bottom:72px}
.shot-wrap--laptop{max-width:1060px;padding:0 4%}
.laptop{position:relative;margin:0 auto;width:100%}
.laptop__screen{position:relative;background:#050608;border-radius:clamp(10px,1.8vw,22px) clamp(10px,1.8vw,22px) 0 0;padding:2.1% 2.1% 2.7%;
  box-shadow:0 0 0 1px #9aa1ac,0 0 0 clamp(2px,.28vw,4px) #d6dae0,inset 0 0 0 1px rgba(255,255,255,.07),0 50px 90px -40px rgba(0,0,0,.75)}
.laptop__screen::before{content:"";position:absolute;left:50%;top:.8%;width:.62%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3e4a5c,#0b0e13 70%);box-shadow:0 0 0 2px #0f1217;z-index:2}
.laptop__screen::after{content:"";position:absolute;left:2.1%;right:2.1%;top:2.1%;bottom:2.7%;border-radius:3px;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 38%)}
.laptop__video,.laptop__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#fff;border-radius:3px}
.laptop__base{position:relative;z-index:1;margin:0 -7%;height:0;padding-bottom:2.5%;
  background:linear-gradient(180deg,#f3f5f7 0%,#e2e5ea 28%,#bfc4cc 68%,#8f959f 100%);border-radius:3px 3px 50% 50%/3px 3px 100% 100%;
  box-shadow:inset 0 1px 0 #fbfcfd,0 28px 40px -18px rgba(0,0,0,.65)}
.laptop__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);
  background:linear-gradient(180deg,#b3b8c0,#dadde2);border-radius:0 0 12px 12px}
.laptop__base::after{content:"";position:absolute;left:10%;right:10%;bottom:-20px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);filter:blur(5px)}
.js .shot-wrap--laptop .laptop{transform-origin:50% 0;transform:rotateX(calc(14deg*var(--sp,0))) translateY(calc(36px*var(--sp,0))) scale(calc(1 - .05*var(--sp,0)));transition:transform .12s linear;--sp:1}
.shot-wrap--laptop .vs-notes{left:0;bottom:56px}

/* celular */
.phone{position:relative;width:100%;max-width:290px;margin:0 auto;border-radius:15.5%/7.3%;padding:0;display:flow-root;
  background:linear-gradient(150deg,#59606b 0%,#22262c 16%,#0d0f12 48%,#20242a 84%,#5f6570 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 0 0 4px #090a0c,0 44px 70px -30px rgba(4,23,58,.6),0 18px 30px -18px rgba(0,0,0,.5)}
.phone::before{content:"";position:absolute;right:-1.3%;top:27%;width:1.5%;height:10.5%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#262a30,#646a75)}
.phone::after{content:"";position:absolute;left:-1.3%;top:18%;width:1.5%;height:19%;border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#646a75 0 13%,transparent 13% 24%,#646a75 24% 58%,transparent 58% 64%,#646a75 64% 100%)}
/* a borda é a margem da tela: em %, a margem do filho mede a largura do celular; o padding do celular media o bloco de fora e engrossava a borda no topo */
.phone__screen{position:relative;overflow:hidden;border-radius:12.4%/5.7%;background:#fff;aspect-ratio:780/1776;isolation:isolate;margin:3.4%}
.phone__screen video,.phone__screen img{display:block;width:100%;height:100%;object-fit:cover}
.phone__island{position:absolute;z-index:2;top:1.1%;left:50%;width:30%;height:2.85%;transform:translateX(-50%);background:#000;border-radius:999px}
.phone__screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%)}
.device{margin:0 auto;max-width:300px}
.js .device[data-r]{transform:perspective(1200px) rotateY(-16deg) rotateX(4deg) translateY(44px) scale(.96);transition-duration:1s,1.2s}
.js .device[data-r].in{transform:perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.js .device.in .phone{animation:vs-float 6.5s ease-in-out 1.2s infinite}

/* notebook + celular no hero */
.shot-wrap--duo .phone{position:absolute;z-index:3;right:0;bottom:-34px;width:21%;max-width:none}
.js .shot-wrap--duo .phone{animation:vs-float 6.5s ease-in-out 1.8s infinite}

@media (max-width:640px){
  .hero--laptop{padding-bottom:30px}
  .laptop__base{margin:0 -5%;padding-bottom:3%}
  .shot-wrap--laptop .vs-notes{position:relative;left:auto;bottom:auto;width:100%;margin:18px auto 0}
  .shot-wrap--duo .phone{width:30%;right:-1%;bottom:-16px}
}
@media (prefers-reduced-motion:reduce){
  .js .shot-wrap--laptop .laptop{transform:none!important}
  .js .device.in .phone,.js .shot-wrap--duo .phone{animation:none}
}
/* nada passa da largura da tela: colunas da grade podem encolher e tabelas rolam dentro do cartão */
.split>*{min-width:0}
.card:has(> table.t){overflow-x:auto}
@media (max-width:640px){.shot-wrap--duo .vs-notes{display:none}}
/* Notebook dentro das seções (13/10/2026): a função mostrada no computador, ao lado do texto */
.device--laptop{max-width:none;padding:0 6% 26px}
.split:has(.device--laptop){grid-template-columns:.8fr 1.2fr}
.js .device--laptop[data-r]{transform:perspective(1400px) rotateX(10deg) translateY(44px) scale(.96)}
.js .device--laptop[data-r].in{transform:perspective(1400px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
@media (max-width:860px){.split:has(.device--laptop){grid-template-columns:1fr}.device--laptop{padding:0 5% 22px}}
/* o vídeo do notebook já tem a legenda de cada passo: os avisos por cima cobriam essa legenda */
.shot-wrap--laptop .vs-notes{display:none}