/* Vendas e Planos: movimento com proposito. Somente transform/opacity (mais filter pontual). */

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);filter:blur(4px)}
html.js .reveal.in{opacity:1;transform:none;filter:none;transition:opacity var(--dur-slow) var(--ease-out) calc(var(--i,0)*60ms),transform var(--dur-slow) var(--ease-out) calc(var(--i,0)*60ms),filter var(--dur-slow) var(--ease-out) calc(var(--i,0)*60ms)}
html.sd .reveal{opacity:1;transform:none;filter:none;animation:rv linear both;animation-timeline:view();animation-range:entry calc(var(--i,0)*3%) entry calc(36% + var(--i,0)*3%)}
@keyframes rv{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html.rm .reveal{transform:none;filter:none}
html.rm .reveal.in{transition:opacity var(--dur-fast) linear}

/* ---------- barra de progresso de leitura ---------- */
.progress{position:fixed;left:0;top:0;z-index:90;width:100%;height:3px;background:var(--primary);transform-origin:0 50%;transform:scaleX(0);display:none}
@supports (animation-timeline:scroll()){.progress{display:block;animation:grow linear both;animation-timeline:scroll(root block)}}
@keyframes grow{to{transform:scaleX(1)}}

/* pausa de animacoes continuas fora da viewport / aba oculta */
.is-off,.is-off *,.is-off *::before,.is-off *::after,html.tab-hidden *,html.tab-hidden *::before,html.tab-hidden *::after{animation-play-state:paused !important}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.mesh i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,var(--mesh-1),transparent 62%);animation:drift 26s var(--ease-in-out) infinite alternate;will-change:transform}
.mesh i:nth-child(1){left:-15%;top:-30%}
.mesh i:nth-child(2){right:-20%;top:-10%;background:radial-gradient(circle,var(--mesh-2),transparent 62%);animation-duration:34s;animation-delay:-9s}
.mesh i:nth-child(3){left:20%;top:20%;background:radial-gradient(circle,var(--mesh-3),transparent 62%);animation-duration:40s;animation-delay:-16s}
@keyframes drift{to{transform:translate3d(7vmax,5vmax,0) scale(1.12)}}

.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block;transform:translateY(108%);animation:wup var(--dur-scene) var(--ease-out) forwards;animation-delay:calc(var(--wi)*60ms + 80ms)}
@keyframes wup{to{transform:none}}
.fade-up{opacity:0;animation:fup var(--dur-slow) var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes fup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* CTA magnetico + brilho */
.magnetic{display:inline-block;will-change:transform;transition:transform var(--dur-base) var(--ease-out)}
.btn-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 10px 24px -10px var(--glow)}
.btn-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,var(--sheen) 50%,transparent 65%);opacity:.6;transform:translateX(-130%);animation:sheen 4.8s var(--ease-in-out) infinite 1.4s;pointer-events:none}
@keyframes sheen{40%,100%{transform:translateX(130%)}}

/* ---------- mockup do produto (loop de ~10s) ---------- */
.mk{position:relative;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;--mw:560px;--mh:350px}
.mk-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:700;color:var(--muted)}
.mk-chrome i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);opacity:.6}
.mk-chrome b{margin-left:8px;font-weight:700}
.mk-stage{position:relative;aspect-ratio:16/10;transition:opacity var(--dur-slow) var(--ease-in-out)}
.mk-layer{position:absolute;inset:0;transition:opacity var(--dur-scene) var(--ease-in-out)}
.mk-video{background:linear-gradient(140deg,var(--video-surface),var(--video-bg));color:var(--video-text)}
.mk-video .scr{inset:12% 8% 26% 8%}
.mk-flow{background-color:var(--flow-bg);background-image:radial-gradient(circle,var(--flow-grid) 1px,transparent 1px);background-size:18px 18px;opacity:0}
.s-flow .mk-flow,.s-static .mk-flow{opacity:1}
.s-flow .mk-video,.s-static .mk-video{opacity:0}
.s-reset .mk-stage{opacity:0}
.s-snap .mk-layer{transition:none}
.mk-rec{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:var(--r-pill);background:var(--video-bg);border:1px solid var(--video-track);font-size:12px;font-weight:800;color:var(--video-text);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.mk-rec .d{width:9px;height:9px;border-radius:50%;background:var(--m-danger);animation:rec-pulse 1.1s var(--ease-in-out) infinite}
.s-rec .mk-rec{opacity:1}
.s-chap .mk-rec{opacity:0}
.mk-cursor{position:absolute;left:0;top:0;width:20px;height:20px;color:var(--video-text);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transform:translate(calc(var(--mw)*.16),calc(var(--mh)*.2))}
.s-rec .mk-cursor{animation:cur 3.4s var(--ease-in-out) forwards}
@keyframes cur{0%{transform:translate(calc(var(--mw)*.16),calc(var(--mh)*.2))}30%{transform:translate(calc(var(--mw)*.34),calc(var(--mh)*.34))}62%{transform:translate(calc(var(--mw)*.52),calc(var(--mh)*.5))}100%{transform:translate(calc(var(--mw)*.66),calc(var(--mh)*.36))}}
.mk-click{position:absolute;left:0;top:0;width:34px;height:34px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--video-accent);opacity:0}
.s-rec .mk-click.a{animation:clk 700ms var(--ease-out) 1000ms both;transform:translate(calc(var(--mw)*.34),calc(var(--mh)*.34))}
.s-rec .mk-click.b{animation:clk 700ms var(--ease-out) 2100ms both;transform:translate(calc(var(--mw)*.52),calc(var(--mh)*.5))}
@keyframes clk{from{opacity:.9;scale:.4}to{opacity:0;scale:1.5}}
.mk-timeline{position:absolute;left:8%;right:8%;bottom:9%}
.mk-track{position:relative;height:7px;border-radius:4px;background:var(--video-track)}
.mk-fill{position:absolute;inset:0;border-radius:4px;background:var(--video-accent);transform-origin:0 50%;transform:scaleX(0)}
.s-rec .mk-fill{animation:fillx 3.4s linear forwards}
@keyframes fillx{to{transform:scaleX(1)}}
.mk-chip{position:absolute;bottom:14px;transform:translate(-50%,8px);opacity:0;padding:3px 9px;border-radius:var(--r-pill);background:var(--video-chip);border:1px solid var(--video-track);font-size:11px;font-weight:700;white-space:nowrap;color:var(--video-text)}
.mk-chip::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:8px;background:var(--m-warn);margin-left:-1px}
.s-chap .mk-chip{animation:pop2 var(--dur-slow) var(--ease-out) forwards;animation-delay:calc(var(--k)*500ms)}
@keyframes pop2{to{opacity:1;transform:translate(-50%,0)}}
.mk-time{position:absolute;right:8%;bottom:16%;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--video-muted)}

.mk-flow svg{position:absolute;inset:0;width:100%;height:100%}
.fe{fill:none;stroke:var(--flow-edge);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.s-flow .fe,.s-static .fe{animation:draw 520ms var(--ease-in-out) forwards;animation-delay:calc(var(--d)*1s)}
.s-static .fe{animation:none;stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.fn{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.86)}
.s-flow .fn{animation:pop 420ms var(--ease-out) forwards;animation-delay:calc(var(--d)*1s)}
.s-static .fn{opacity:1;transform:none}
@keyframes pop{to{opacity:1;transform:none}}
.fn rect,.fn polygon{stroke-width:2}
.fn text{font:800 11px var(--font-sans)}
.fn .sub{font-weight:600;font-size:9.5px}
.fn.st rect{fill:var(--m-ok-tint);stroke:var(--m-ok)} .fn.st text{fill:var(--m-ok-ink)}
.fn.sp rect{fill:var(--m-helpdesk-tint);stroke:var(--m-helpdesk)} .fn.sp text{fill:var(--m-helpdesk-ink)}
.fn.dc polygon{fill:var(--m-warn-tint);stroke:var(--m-warn)} .fn.dc text{fill:var(--m-warn-ink)}
.fn.en rect{fill:var(--m-danger-tint);stroke:var(--m-danger)} .fn.en text{fill:var(--m-danger-ink)}
.fl{font:800 10px var(--font-sans);fill:var(--text);opacity:0}
.s-flow .fl,.s-static .fl{animation:pop 300ms var(--ease-out) forwards;animation-delay:calc(var(--d)*1s)}
.s-static .fl{animation:none;opacity:1}
.mk-flowtag{position:absolute;left:14px;top:12px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--text)}

/* ---------- storytelling fixado ---------- */
.stg{position:relative;aspect-ratio:16/11;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(140deg,var(--video-surface),var(--video-bg));color:var(--video-text);border:1px solid var(--video-track);box-shadow:var(--shadow-lg)}
.st{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease-in-out);display:flex;align-items:center;justify-content:center;padding:6%}
.stg[data-step="1"] .st1,.stg[data-step="2"] .st2,.stg[data-step="3"] .st3{opacity:1}
.step{position:relative;padding:20px 0 20px 26px;border-left:2px solid var(--border);transition:border-color var(--dur-base) var(--ease-out)}
.step.on{border-left-color:var(--primary)}
.step .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg-soft);color:var(--muted);font-weight:800;font-size:13px;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.step.on .n{background:var(--primary);color:var(--primary-ink)}
/* st1: contagem + gravando */
.cd{position:relative;width:120px;height:120px}
.cd span{position:absolute;inset:0;display:grid;place-items:center;font-size:96px;font-weight:800;opacity:0;font-variant-numeric:tabular-nums}
.stg[data-step="1"] .cd span{animation:cdn 7s var(--ease-out) infinite;animation-delay:calc((3 - var(--k))*1s)}
@keyframes cdn{0%{opacity:0;scale:1.4}4%{opacity:1;scale:1}13%{opacity:1;scale:1}14.5%,100%{opacity:0;scale:.9}}
.rcbox{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:var(--r-pill);background:var(--video-bg);border:1px solid var(--video-track);opacity:0;font-weight:800;font-size:13px}
.stg[data-step="1"] .rcbox{animation:rcs 7s var(--ease-out) infinite}
@keyframes rcs{0%,42%{opacity:0;translate:0 10px}48%,94%{opacity:1;translate:0}100%{opacity:0}}
.rcbox .d{width:9px;height:9px;border-radius:50%;background:var(--m-danger);animation:rec-pulse 1.1s var(--ease-in-out) infinite}
.rcbox .b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--video-track)}
.rcbar{position:absolute;left:10%;right:10%;bottom:6%;height:5px;border-radius:3px;background:var(--video-track);overflow:hidden}
.rcbar i{position:absolute;inset:0;background:var(--m-danger);transform-origin:0 50%;transform:scaleX(0)}
.stg[data-step="1"] .rcbar i{animation:rbar 7s linear infinite}
@keyframes rbar{0%,42%{transform:scaleX(0)}100%{transform:scaleX(1)}}
/* st2: organizar */
.orgbox{width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px}
.org{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--video-surface);border:1px solid var(--video-track);font-size:13px;font-weight:700}
.org b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--video-track);font-size:11px}
.org time{margin-left:auto;color:var(--video-muted);font-variant-numeric:tabular-nums;font-size:12px}
.stg[data-step="2"] .org.up{animation:swapu 5.5s var(--ease-in-out) infinite}
.stg[data-step="2"] .org.dn{animation:swapd 5.5s var(--ease-in-out) infinite}
@keyframes swapu{0%,25%{transform:none;border-color:var(--video-track)}40%,75%{transform:translateY(-100%);border-color:var(--video-accent)}90%,100%{transform:none;border-color:var(--video-track)}}
@keyframes swapd{0%,25%{transform:none}40%,75%{transform:translateY(100%)}90%,100%{transform:none}}
.stg[data-step="2"] .trl{animation:trl 5.5s var(--ease-out) infinite;animation-delay:calc(var(--k)*300ms)}
.trl{height:8px;border-radius:4px;background:var(--video-track);opacity:0}
@keyframes trl{0%{opacity:0;translate:-8px 0}12%,100%{opacity:1;translate:0}}
/* st3: compartilhar */
.shbox{width:100%;max-width:400px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:9px}
.shopt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--border);font-size:13px;font-weight:700}
.shopt.sel{border-color:var(--border);}
.stg[data-step="3"] .shopt.pub{animation:shsel 6s var(--ease-out) infinite}
@keyframes shsel{0%,20%{border-color:var(--border);background:transparent}30%,100%{border-color:var(--primary);background:var(--primary-tint)}}
.stg[data-step="3"] .shsw::after{animation:shknob 6s var(--ease-out) infinite}
.shsw{position:relative;margin-left:auto;width:34px;height:20px;border-radius:10px;background:var(--border-strong)}
.shsw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--primary-ink)}
@keyframes shknob{0%,40%{transform:none}50%,100%{transform:translateX(14px)}}
.stg[data-step="3"] .shsw{animation:shbg 6s linear infinite}
@keyframes shbg{0%,40%{background:var(--border-strong)}50%,100%{background:var(--primary)}}
.shtoast{align-self:center;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);background:var(--text);color:var(--bg);font-size:12.5px;font-weight:700;opacity:0}
.stg[data-step="3"] .shtoast{animation:shtoast 6s var(--ease-out) infinite}
@keyframes shtoast{0%,68%{opacity:0;translate:0 8px}76%,96%{opacity:1;translate:0}100%{opacity:0}}

/* ---------- tabs demo ---------- */
.panel-x{display:none}
.panel-x[data-on="true"]{display:grid;animation:xfade var(--dur-slow) var(--ease-out)}
@keyframes xfade{from{opacity:0;transform:translateY(8px)}}
.autobar{position:relative;height:3px;border-radius:2px;background:var(--bg-soft);overflow:hidden}
.autobar i{position:absolute;inset:0;background:var(--primary);transform-origin:0 50%;transform:scaleX(0)}
.autobar.run i{animation:fillx var(--auto,6s) linear forwards}
.autobar.paused i{animation-play-state:paused}

/* ---------- casos de uso: tilt + brilho ---------- */
.tilt{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);will-change:transform}
.tilt::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%);opacity:0;transition:opacity var(--dur-base) var(--ease-out);pointer-events:none}
.tilt:hover::before{opacity:1}
.tilt:hover{box-shadow:var(--shadow-md)}

/* ---------- integracao ---------- */
.pulse-l{fill:none;stroke:var(--mc,var(--primary));stroke-width:2;stroke-dasharray:5 9;animation:flow 1.8s linear infinite;opacity:.9}
@keyframes flow{to{stroke-dashoffset:-28}}
.base-l{fill:none;stroke:var(--border-strong);stroke-width:1.5;opacity:.55}
.hub-ring{fill:none;stroke:var(--primary);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 3s var(--ease-out) infinite}
@keyframes ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.im rect{fill:var(--mc-tint);stroke:var(--mc);stroke-width:2}
.im text{font:800 12px var(--font-sans);fill:var(--mc-ink)}

/* ---------- marquee (unico) ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.stopped .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 8px))}}

/* ---------- odometro ---------- */
.odo{display:inline-flex;align-items:baseline;height:1.15em;line-height:1.15;overflow:hidden;font-variant-numeric:tabular-nums}
.od-col{position:relative;display:inline-block;height:1.15em;overflow:hidden}
.od-strip{display:flex;flex-direction:column;transition:transform var(--dur-slow) var(--ease-out)}
.od-strip span{height:1.15em;display:block}
.od-txt{display:inline-block;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.od-txt.swap{animation:odoswap var(--dur-slow) var(--ease-out)}
@keyframes odoswap{from{opacity:0;transform:translateY(40%)}}

/* plano recomendado */
.plan-rec{position:relative;border-color:var(--primary) !important;box-shadow:0 0 0 1px var(--primary),var(--shadow-lg)}
.plan-rec::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 4px var(--glow);opacity:0;animation:glowp 3.6s var(--ease-in-out) infinite}
@keyframes glowp{50%{opacity:1}}
html.js .plan-rec.reveal.in,html.js .plan-rec:not(.reveal){transform:translateY(-8px)}
.plan-rec .ribbon{position:relative;overflow:hidden}
.plan-rec .ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,var(--sheen) 50%,transparent 65%);transform:translateX(-130%);animation:sheen 5s var(--ease-in-out) infinite 1s;opacity:.7}

/* ---------- FAQ acordeao ---------- */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-in-out)}
.faq-a>div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-i .icon{transition:transform var(--dur-base) var(--ease-out)}
.faq-item.open .faq-i .icon{transform:rotate(45deg)}

/* ---------- tabela comparativa ---------- */
.cmp th,.cmp td{padding:12px 16px;text-align:center;font-size:14px;border-bottom:1px solid var(--border)}
.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:var(--surface);z-index:1;min-width:190px}
.cmp thead th{position:sticky;top:var(--hdr-h,64px);background:var(--surface);z-index:2;font-weight:800;border-bottom:1px solid var(--border-strong)}
.cmp thead th:first-child{z-index:3}
.cmp tr.grp td{background:var(--bg-soft);font-weight:800;font-size:12.5px;color:var(--muted);text-transform:none;position:static}
.cmp .rec-col{background:color-mix(in srgb,var(--primary-tint) 55%,var(--surface))}

/* ---------- reduced motion: sem movimento continuo, parallax ou tilt ---------- */
@media (prefers-reduced-motion:reduce){
  .mesh i,.btn-cta::after,.marquee-track,.pulse-l,.hub-ring,.plan-rec::before,.plan-rec .ribbon::after,.mk-rec .d,.rcbox .d{animation:none !important}
  .w>span{transform:none;animation:none}
  .fade-up{opacity:1;animation:none}
  .tilt,.magnetic{transform:none !important;transition:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap}
  .marquee-track>[aria-hidden="true"]{display:none}
  .plan-rec{transform:none !important}
  .od-strip,.od-txt{transition:none}
  .panel-x[data-on="true"]{animation:none}
  .st{transition:opacity var(--dur-fast) linear}
}

/* ---------- extensao: janela de navegador (tudo em cqw, escala com o container) ---------- */
.bw{position:relative;container-type:inline-size;border:1px solid var(--border-strong);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}
.bw-top{display:flex;align-items:flex-end;gap:1.4cqw;height:4.6cqw;padding:0 2cqw;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.bw-dots{display:flex;gap:.9cqw;align-self:center}
.bw-dots i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--border-strong);opacity:.7}
.bw-tab{margin-left:1.5cqw;height:3.6cqw;display:flex;align-items:center;gap:1cqw;padding:0 2.2cqw;border-radius:1.2cqw 1.2cqw 0 0;background:var(--surface);font-size:1.5cqw;font-weight:700;color:var(--text)}
.bw-bar{display:flex;align-items:center;gap:2cqw;height:5.4cqw;padding:0 2cqw;border-bottom:1px solid var(--border);background:var(--surface)}
.bw-url{flex:1;height:3.4cqw;display:flex;align-items:center;padding:0 2cqw;border-radius:2cqw;background:var(--bg-soft);font-size:1.5cqw;color:var(--muted)}
.bw-tools{display:flex;align-items:center;gap:1.4cqw}
.bw-ico{width:3.2cqw;height:3.2cqw;display:grid;place-items:center;color:var(--muted)}
.bw-ico .icon{width:2cqw;height:2cqw}
.bw-ext{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:1.9cqw;display:grid;place-items:center}
.bw[data-s="1"] .bw-ext{display:none}
.bw-page{position:relative;height:58cqw;overflow:hidden;background:var(--surface)}
.pg-side{position:absolute;left:0;top:0;bottom:0;width:16cqw;padding:2.4cqw;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:1.6cqw;background:var(--surface-2)}
.pg-side i{display:block;height:1.4cqw;border-radius:.7cqw;background:var(--border)}
.pg-side i:first-child{background:var(--primary);width:70%}
.pg-main{position:absolute;left:16cqw;right:0;top:0;padding:3cqw}
.pg-h{height:2.4cqw;width:26cqw;border-radius:1cqw;background:var(--border)}
.pg-row{height:5.6cqw;margin-top:1.8cqw;display:flex;align-items:center;gap:2cqw;padding:0 2cqw;border:1px solid var(--border);border-radius:1cqw;background:var(--surface-2);font-size:1.6cqw;color:var(--muted);white-space:nowrap;overflow:hidden}
.pg-row b{min-width:11cqw;color:var(--text)}
.pg-btn{margin-top:1.8cqw;width:16cqw;height:5cqw;display:grid;place-items:center;border-radius:1cqw;background:var(--primary);color:var(--primary-ink);font-size:1.6cqw;font-weight:800}
.bwl{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out)}
.bw[data-s="1"] .l1,.bw[data-s="2"] .lp,.bw[data-s="3"] .lp,.bw[data-s="4"] .l4,.bw[data-s="5"] .l5,.bw[data-s="6"] .l6{opacity:1}
.bw-pop,.bw-menu{position:absolute;right:2cqw;top:.6cqw;width:34cqw;padding:2cqw;border-radius:1.6cqw;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-md);font-size:1.6cqw;color:var(--text)}
.mn{display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw;border-radius:1cqw;font-weight:700}
.mn+.mn{margin-top:.4cqw}
.mn .lg{width:3cqw;height:3cqw;border-radius:.8cqw;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-weight:800;font-size:1.6cqw}
.mn.dim{color:var(--muted);font-weight:600}
.mn.dim .lg{background:var(--bg-soft);color:var(--muted)}
.pin{margin-left:auto;width:3.2cqw;height:3.2cqw;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.pin .icon{width:1.8cqw;height:1.8cqw}
.bw[data-s="1"] .pin.hl{animation:pinon 4.5s var(--ease-out) infinite}
@keyframes pinon{0%,35%{background:transparent;color:var(--muted)}45%,100%{background:var(--primary);color:var(--primary-ink);box-shadow:0 0 0 .8cqw var(--glow)}}
.pp2,.pp3{display:none}
.bw[data-s="2"] .pp2,.bw[data-s="3"] .pp3{display:block}
.pp-btn{display:grid;place-items:center;height:5cqw;margin-top:1.8cqw;border-radius:1.2cqw;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:1.6cqw}
.bw[data-s="2"] .pp-btn{animation:pbtn 1.8s var(--ease-in-out) infinite}
@keyframes pbtn{50%{box-shadow:0 0 0 1cqw var(--glow)}}
.pp-tabs{display:flex;padding:.5cqw;border-radius:1.2cqw;background:var(--bg-soft);gap:.4cqw}
.pp-tabs span{flex:1;text-align:center;padding:1cqw 0;border-radius:.9cqw;font-weight:700;color:var(--muted)}
.bw[data-s="3"] .pp-tabs .t1{animation:tsel 6s var(--ease-out) infinite}
.bw[data-s="3"] .pp-tabs .t2{animation:tsel 6s var(--ease-out) infinite reverse}
@keyframes tsel{0%,45%{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}55%,100%{background:transparent;color:var(--muted);box-shadow:none}}
.opt{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 0;color:var(--muted);font-weight:600}
.opt i{width:1.8cqw;height:1.8cqw;border-radius:50%;border:.3cqw solid var(--border-strong)}
.opt.on{color:var(--text)}
.opt.on i{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 38%,transparent 42%)}
.sw2{margin-left:auto;width:5cqw;height:2.8cqw;border-radius:2cqw;background:var(--border-strong);position:relative}
.sw2::after{content:"";position:absolute;left:.4cqw;top:.4cqw;width:2cqw;height:2cqw;border-radius:50%;background:var(--primary-ink)}
.sw2.on{background:var(--primary)}.sw2.on::after{left:2.6cqw}
/* gravando */
.rp{position:absolute;left:3cqw;top:2.4cqw;display:flex;align-items:center;gap:1.2cqw;padding:1cqw 2cqw 1cqw 1.6cqw;border-radius:2cqw;background:var(--video-bg);color:var(--video-text);font-size:1.6cqw;font-weight:800;border:1px solid var(--video-track)}
.rp .d{width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--m-danger);animation:rec-pulse 1.1s var(--ease-in-out) infinite}
.fc{position:absolute;left:50%;bottom:2.6cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.4cqw;padding:1cqw 1.4cqw 1cqw 2cqw;border-radius:3cqw;background:var(--video-bg);color:var(--video-text);font-size:1.6cqw;font-weight:800}
.fc .b{width:3.6cqw;height:3.6cqw;border-radius:50%;display:grid;place-items:center;background:var(--video-track)}
.fc .b .icon{width:1.8cqw;height:1.8cqw}
.bd{position:absolute;width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;border-radius:50%;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:1.7cqw;display:grid;place-items:center;box-shadow:0 0 0 .7cqw var(--glow);opacity:0}
.bw[data-s="4"] .bd{animation:bdp 6.5s var(--ease-out) infinite;animation-delay:calc(var(--k)*1.6s + .6s)}
@keyframes bdp{0%{opacity:0;scale:.4}5%,60%{opacity:1;scale:1}70%,100%{opacity:1;scale:1}}
.bw[data-s="4"] .bd{animation-fill-mode:both}
.cur2{position:absolute;left:0;top:0;width:2.6cqw;height:2.6cqw;color:var(--text);filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.4));transform:translate(30cqw,17cqw)}
.bw[data-s="4"] .cur2{animation:cur2 6.5s var(--ease-in-out) infinite}
@keyframes cur2{0%{transform:translate(50cqw,45cqw)}20%,28%{transform:translate(31cqw,17.5cqw)}42%,50%{transform:translate(31cqw,25cqw)}66%,78%{transform:translate(27cqw,39.5cqw)}100%{transform:translate(50cqw,45cqw)}}
/* mascaras */
.bmk{position:absolute;border-radius:.9cqw;-webkit-backdrop-filter:blur(1cqw) saturate(.5);backdrop-filter:blur(1cqw) saturate(.5);background:color-mix(in srgb,var(--text) 14%,transparent);outline:.25cqw dashed var(--primary);outline-offset:.3cqw;opacity:0;transform:scale(.9)}
.bw[data-s="5"] .bmk{animation:bmk .6s var(--ease-out) forwards;animation-delay:calc(var(--k)*1s + .5s)}
@keyframes bmk{to{opacity:1;transform:none}}
.mkbar{position:absolute;left:50%;top:2.4cqw;transform:translateX(-50%);display:flex;gap:.8cqw;padding:.8cqw;border-radius:1.6cqw;background:var(--video-bg);color:var(--video-text);font-size:1.5cqw;font-weight:700}
.mkbar span{padding:.9cqw 1.6cqw;border-radius:1cqw}
.mkbar .on{background:var(--video-accent);color:var(--video-bg)}
/* compartilhar */
.bw-dlg{position:absolute;left:50%;top:50%;width:46cqw;transform:translate(-50%,-50%);padding:2.6cqw;border-radius:1.8cqw;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);font-size:1.6cqw;color:var(--text)}
.bw-dlg .lnk{margin-top:1.6cqw;height:4.6cqw;display:flex;align-items:center;padding:0 1.6cqw;border:1px solid var(--border-strong);border-radius:1cqw;background:var(--surface-2);color:var(--muted)}
.bw-dlg .cp{margin-top:1.6cqw;height:5cqw;display:grid;place-items:center;border-radius:1.2cqw;background:var(--text);color:var(--bg);font-weight:800}
.bw-toast{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1cqw;padding:1.2cqw 2.4cqw;border-radius:3cqw;background:var(--text);color:var(--bg);font-size:1.6cqw;font-weight:700;opacity:0}
.bw[data-s="6"] .bw-toast{animation:btoast 5s var(--ease-out) infinite}
@keyframes btoast{0%,40%{opacity:0;translate:0 1cqw}50%,90%{opacity:1;translate:0}100%{opacity:0}}
.bw[data-s="6"] .bw-dlg .cp{animation:cpk 5s var(--ease-out) infinite}
@keyframes cpk{0%,36%{transform:none}42%{transform:scale(.97)}50%,100%{transform:none}}

/* lista de passos do tutorial */
.stp{display:flex;gap:14px;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--r-lg);background:transparent;text-align:left;font:inherit;color:var(--text);cursor:pointer;transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.stp:hover{background:var(--surface-2)}
.stp[aria-current="step"]{background:var(--surface);border-color:var(--border-strong)}
.stp .n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg-soft);color:var(--muted);font-weight:800;font-size:13px}
.stp[aria-current="step"] .n{background:var(--primary);color:var(--primary-ink)}
.stp .desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-in-out)}
.stp[aria-current="step"] .desc{grid-template-rows:1fr}
.stp .desc>span{overflow:hidden;display:block}
@media (prefers-reduced-motion:reduce){.bw .pin,.bw .pp-btn,.bw .rp .d,.bw .cur2,.bw .bd,.bw .pp-tabs span,.bw .bw-toast,.bw .bw-dlg .cp{animation:none !important}.bw[data-s="4"] .bd,.bw[data-s="5"] .bmk{opacity:1;transform:none}.bw[data-s="6"] .bw-toast{opacity:1}}

.bw-url .icon{width:1.6cqw;height:1.6cqw;margin-right:1cqw;flex:none}
.bw-tab .icon{width:1.7cqw;height:1.7cqw;color:var(--primary)}