/* Camada de interações: gradiente vivo no hero, celular com profundidade, números que contam, brilho nos cards, marca aplicável ao checkout, A/B arrastável e conversa com "digitando". Tudo degrada para o estado estático com prefers-reduced-motion. */

/* Hero: gradiente WebGL atrás do conteúdo */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%)}
.hero-gl.on{opacity:1}
.hero>.in,.hero>.logos{position:relative;z-index:1}

/* Hero: celular inclina com o mouse, reflexo de luz na tela */
.hero .demo{perspective:1100px}
.hero .demo .phone{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero .demo.tilting .phone{transition:transform .12s linear}
.hero .demo .phone::after{content:"";position:absolute;inset:12px;border-radius:34px;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.38),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.hero .demo.tilting .phone::after{opacity:1}

/* Números: brilho que percorre o 20x */
.grad-num{background-size:220% 100%;animation:grad-flow 7s ease-in-out infinite alternate}
@keyframes grad-flow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* Corrida: mesma velocidade, a Compra Rápida chega antes */
.race .race-bar{transform-origin:left center}
.race.armed .race-bar{transform:scaleX(0)}
.race.go .race-bar{transform:scaleX(1);transition:transform 2.6s linear}
.race.go .race-row.cr .race-bar{transition-duration:1.09s}
.race-row.cr{position:relative}
.race-flag{position:absolute;right:-4px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--green);color:var(--night);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .4s cubic-bezier(.3,1.6,.5,1)}
.race-flag svg{width:12px;height:12px}
.race-row.cr .race-bar{position:relative}
.race.done .race-flag{opacity:1;transform:scale(1)}

/* Produto: brilho que segue o cursor na borda do card */
.rc{position:relative;isolation:isolate}
.rc::before,.rc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease}
.rc::before{padding:1.5px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(15,78,249,.9),rgba(126,160,255,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.rc::after{z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(15,78,249,.07),transparent 60%)}
.rc:hover::before,.rc:hover::after{opacity:1}
.rc.run .slip-r .st{animation:st-pop .5s cubic-bezier(.3,1.5,.5,1) both}
.rc.run .slip-r:nth-of-type(1) .st{animation-delay:.08s}
.rc.run .slip-r:nth-of-type(2) .st{animation-delay:.32s}
.rc.run .slip-r:nth-of-type(3) .st{animation-delay:.56s}
.rc.run .slip-r:nth-of-type(4) .st{animation-delay:.8s}
@keyframes st-pop{0%{opacity:0;transform:scale(.5) translateX(6px)}100%{opacity:1;transform:none}}

/* Calculadora: o resultado brilha quando muda */
.calc-big.bump{animation:calc-bump .6s ease}
@keyframes calc-bump{40%{transform:scale(1.035)}}

/* "Vestir a marca": a cor escolhida vale para todos os checkouts da página */
.screen{font-family:var(--brand-font,inherit);transition:font-family .2s}
.screen .pay:not(.approved),.screen .pay .go{transition:background-color .45s ease}
.screen .pay:not(.approved){background:var(--brand,var(--blue))}
.screen .step.active,.screen .opt.sel{border-color:var(--brand,var(--blue))}
.screen .add{color:var(--brand,var(--blue))}
.screen .step.added .add{background:var(--brand,var(--blue));border-color:var(--brand,var(--blue));color:#fff}
.brand-vis{gap:12px}
.brand-vis .v-brand{gap:14px}
.brand-vis .aa{appearance:none;background:none;border:0;padding:4px 6px;border-radius:10px;cursor:pointer;font-family:var(--brand-font,Georgia,"Times New Roman",serif);transition:background-color .2s}
.brand-vis .aa:hover{background:var(--paper)}
.brand-vis .sw{gap:8px}
.brand-vis .sw button{appearance:none;width:28px;height:28px;padding:0;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line-l);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.brand-vis .sw button:hover{transform:scale(1.12)}
.brand-vis .sw button[aria-checked="true"]{box-shadow:0 0 0 2px var(--c)}
.brand-vis .aa:focus-visible,.brand-vis .sw button:focus-visible,.ab-range:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.brand-vis .v-btn{background:var(--brand,var(--blue));font-family:var(--brand-font,inherit);transition:background-color .45s ease}
.v-hint{font-family:var(--mono);font-size:.66rem;color:var(--slate);text-align:center}

/* Teste A/B arrastável */
.ab-vis{gap:12px}
.ab-vis .v-split span{flex:none;transition:width .25s ease;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.ab-vis .v-split .a{width:calc(100% - var(--cr,50%))}
.ab-vis .v-split .b{width:var(--cr,50%)}
.ab-vis .v-split small{font-weight:700;opacity:.75;margin-right:4px;font-size:.66rem}
.ab-range{width:100%;margin:0;accent-color:var(--blue);cursor:grab}
.ab-range:active{cursor:grabbing}

/* Escalar: barras sobem ao entrar na tela */
.v-bars.armed span{transform:scaleY(0);transform-origin:bottom}
.v-bars.go span{transform:scaleY(1);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.v-bars.go span:nth-child(2){transition-delay:.25s}
.v-bars.go span:nth-child(3){transition-delay:.5s}

/* WhatsApp: ritmo de conversa real, "digitando" e visto azul */
.chat.play .bubble,.chat.play .chat-ok{animation-delay:calc(.9s + var(--d) * 1.5s)}
.chat-body{position:relative}
.typing{position:absolute;left:14px;display:inline-flex;gap:4px;align-items:center;padding:12px 14px;border-radius:12px;border-top-left-radius:4px;background:#fff;box-shadow:0 1px .5px rgba(0,0,0,.12);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.typing.on{opacity:1;transform:none}
.typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:typing-dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-top small{transition:color .2s}
.chat-top small.is-typing{color:#9FF0C4;opacity:1}
.ticks{display:inline-block;margin-left:3px;color:#8696A0;font-size:.7rem;letter-spacing:-3px;transition:color .3s ease}
.ticks.read{color:#53BDEB}

@media (prefers-reduced-motion:reduce){
  .hero-gl{transition:none}
  .hero .demo .phone{transform:none!important;transition:none}
  .grad-num{animation:none}
  .race.armed .race-bar,.v-bars.armed span{transform:none}
  .rc.run .slip-r .st{animation:none}
  .chat.play .bubble,.chat.play .chat-ok{animation-delay:0s}
}

/* Calculadora: resultado só depois de "Calcular", com carregamento e entrada suave */
.calc-go{min-width:280px}
.calc-go.loading{cursor:progress}
.calc-go.loading svg{display:none}
.calc-go.loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:calc-spin .7s linear infinite}
@keyframes calc-spin{to{transform:rotate(360deg)}}
.calc-reveal{display:flex;flex-direction:column;align-items:center;gap:10px;animation:calc-in .5s cubic-bezier(.2,.8,.2,1) both}
.calc-reveal[hidden]{display:none}
@keyframes calc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.calc-go.loading::after,.calc-reveal{animation:none}}

/* Calculadora: produtos marcados por padrão (estilo "voo direto"), resultado somado e aberto por produto */
.calc-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0;min-width:0}
.calc-prods legend{grid-column:1/-1;padding:0;margin-bottom:12px;font-size:.95rem;font-weight:700;color:#DDE5F5}
.calc-chk{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-d);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.calc-chk:hover{border-color:rgba(126,160,255,.45)}
.calc-chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.calc-box{flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid #4A6290;display:grid;place-items:center;transition:background-color .2s ease,border-color .2s ease}
.calc-box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s ease}
.calc-chk input:checked+.calc-box{background:var(--blue);border-color:var(--blue)}
.calc-chk input:checked+.calc-box svg{opacity:1;transform:none}
.calc-chk:has(input:checked){border-color:rgba(126,160,255,.55);background:rgba(15,78,249,.12)}
.calc-chk input:focus-visible+.calc-box{outline:2px solid var(--blue-hi);outline-offset:3px}
.calc-chk-t b{display:block;color:#fff;font-size:.98rem}
.calc-chk-t small{display:block;margin-top:2px;color:var(--mist);font-size:.84rem}
.calc-go:disabled:not(.loading){opacity:.55;cursor:not-allowed}
.calc-split{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.calc-split span{display:grid;grid-template-columns:auto auto;gap:2px 14px;align-items:baseline;padding:10px 14px;border-radius:12px;border:1px solid var(--line-d);background:rgba(255,255,255,.03);text-align:left}
.calc-split b{font-size:.86rem;color:#DDE5F5}
.calc-split i{font-style:normal;font-family:var(--mono);font-size:.86rem;color:#fff;justify-self:end}
.calc-split small{grid-column:1/-1;font-size:.76rem;color:#7F8DA8}
@media (max-width:640px){.calc-prods{grid-template-columns:1fr}.calc-split span{width:100%}}

/* Calculadora: segmento sem corte e destaque para "por ano" */
@media (min-width:821px){.calc-in{grid-template-columns:minmax(0,1fr) max-content}#c-seg{width:auto;min-width:100%}}
@media (max-width:480px){#c-seg{font-size:.92rem;padding-left:12px;padding-right:40px}}
.calc-amt{display:flex;align-items:flex-start;justify-content:center;gap:.08em}
.calc-plus{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;color:#5CEA00;margin-top:.04em}
.calc-per{display:inline-flex;align-items:center;margin-top:4px;padding:8px 20px;border-radius:999px;background:rgba(92,234,0,.14);border:1px solid rgba(92,234,0,.45);color:#9FF07A;font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.06em;text-transform:uppercase}

/* Calculadora: borda em degradê da marca (azul → verde) correndo devagar e brilho que percorre o valor */
.calc{border:1.5px solid transparent;background:linear-gradient(var(--night-2),var(--night-2)) padding-box,linear-gradient(120deg,#0F4EF9,#7EA0FF 30%,#5CEA00 50%,#7EA0FF 70%,#0F4EF9) border-box;background-size:100% 100%,300% 300%;animation:calc-border 10s ease-in-out infinite alternate;box-shadow:0 40px 90px -50px rgba(15,78,249,.6)}
@keyframes calc-border{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
.calc-big{background-size:220% 100%;animation:grad-flow 7s ease-in-out infinite alternate}
.calc-big.bump{animation:calc-bump .6s ease,grad-flow 7s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.calc,.calc-big,.calc-big.bump{animation:none}}