/* Mesma identidade do PS-5 Controle Test e do PS5 HDMI Tool: cores, botões, cartões e tipografia. */
:root{
  color-scheme:light;
  --bg:#f4f1ff; --bg-top:#e3dbff; --surface:rgba(255,255,255,.8); --surface2:rgba(91,63,212,.07); --line:rgba(91,63,212,.18);
  --text:#1b1440; --muted:#5b5480; --accent:#5b3fd4; --accent2:#7c5cff; --grad1:#5b3fd4; --grad2:#a855f7;
  --ok:#15803d; --warn:#a15c07; --btn1:#6d4cff; --btn2:#4f2fd0; --glow:rgba(124,92,255,.22); --shadow:0 10px 30px rgba(60,40,140,.10); --nav:rgba(244,241,255,.82);
  --ambar:#c26f00; --verm:#d4152a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0c0920; --bg-top:#2a1670; --surface:rgba(255,255,255,.05); --surface2:rgba(255,255,255,.08); --line:rgba(167,139,250,.22);
  --text:#f3f0ff; --muted:#b9b0dc; --accent:#a78bfa; --accent2:#7c5cff; --grad1:#e9d5ff; --grad2:#a78bfa;
  --ok:#4ade80; --warn:#fbbf24; --btn1:#6d4cff; --btn2:#5428e0; --glow:rgba(124,92,255,.35); --shadow:0 14px 40px rgba(0,0,0,.35); --nav:rgba(12,9,32,.82);
  --ambar:#ffb01f; --verm:#ff5664;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0920; --bg-top:#2a1670; --surface:rgba(255,255,255,.05); --surface2:rgba(255,255,255,.08); --line:rgba(167,139,250,.22);
  --text:#f3f0ff; --muted:#b9b0dc; --accent:#a78bfa; --accent2:#7c5cff; --grad1:#e9d5ff; --grad2:#a78bfa;
  --ok:#4ade80; --warn:#fbbf24; --btn1:#6d4cff; --btn2:#5428e0; --glow:rgba(124,92,255,.35); --shadow:0 14px 40px rgba(0,0,0,.35); --nav:rgba(12,9,32,.82);
  --ambar:#ffb01f; --verm:#ff5664;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;color:var(--text);font:16px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:radial-gradient(1200px 620px at 50% -140px,var(--bg-top),transparent 70%),var(--bg);min-height:100vh}
a{color:var(--accent)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grad{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.am{color:var(--ambar)}.vm{color:var(--verm)}

/* cortina entre páginas */
html.pt::before{content:"";position:fixed;inset:0;z-index:9999;background:#0c0920 var(--pt-logo,none) center/clamp(190px,36vmin,300px) no-repeat;pointer-events:none;animation:ptout .55s cubic-bezier(.7,0,.2,1) .06s both}
@keyframes ptout{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.ptc{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0c0920}
.ptc img{width:clamp(190px,36vmin,300px);height:auto}
@media print{html.pt::before,.ptc,#fxBg{display:none!important}}
@media (prefers-reduced-motion:reduce){html.pt::before{display:none}}

/* fundo vivo */
#fxBg{position:absolute;top:0;left:0;width:100%;height:min(115vh,1000px);z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.hero h1 .w{display:inline-block}
#scrollBar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--btn1),#a855f7);transform:scaleX(0);transform-origin:left;pointer-events:none}
.links a.on{color:var(--text);background:var(--surface2)}

/* botões */
.b{font:inherit;font-weight:600;color:var(--text);text-decoration:none;background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:11px 20px;min-height:48px;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s,box-shadow .25s,border-color .2s,background-position .5s}
.b:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
.b:active{transform:scale(.97)}
.b.p{color:#fff;border-color:transparent;background:linear-gradient(100deg,#5a3cf0,#7c3aed 45%,#c026d3 100%) 0 0/220% 100%;box-shadow:0 8px 24px var(--glow)}
.b.p:hover{background-position:100% 0}
.b.p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.b.p:hover::after{transform:translateX(120%);transition:transform .7s ease}
.b.arrow{padding-right:7px;color:#fff;border:0;background:linear-gradient(135deg,#1b1240,#2c1670)}
.b.arrow .ar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.7);transition:all .35s cubic-bezier(.3,1.3,.5,1)}
.b.arrow:hover{background:linear-gradient(135deg,#5a3cf0,#7c3aed)}
.b.arrow:hover .ar{background:#fff;color:#4c1d95;border-color:#fff;transform:translateX(3px) scale(1.08)}
.b.arrow .ar svg{width:16px;height:16px}
.b.wa{color:#fff;border-color:transparent;background:#0f7a41}
.b.loja{color:#241600;border-color:transparent;background:linear-gradient(100deg,#ffc14a,#ffb01f 60%,#ff9d0a);box-shadow:0 8px 24px rgba(255,160,20,.25)}
.b.loja:hover{filter:brightness(1.06)}
.magnetic{transition:transform .25s cubic-bezier(.3,1.3,.5,1),box-shadow .25s,background-position .5s!important}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rp .55s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes rp{to{transform:scale(1);opacity:0}}

/* topo */
.top{position:sticky;top:0;z-index:8;background:var(--nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:11px}
.links{display:flex;gap:4px;margin-left:auto}
.links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:99px}
.links a:hover{color:var(--text);background:var(--surface2)}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;flex:none}
.iconbtn svg{width:18px;height:18px}
:root .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:block}:root:not([data-theme="light"]) .i-moon{display:none}}
:root[data-theme="dark"] .i-sun{display:block}:root[data-theme="dark"] .i-moon{display:none}
.iconbtn.flip svg{animation:flip .45s cubic-bezier(.2,.7,.2,1)}
@keyframes flip{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* faixa do programa grátis */
.webcta,.projeto{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:22px;padding:14px 22px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent2) 22%,transparent),var(--surface));box-shadow:0 14px 44px var(--glow)}
.webcta h2,.projeto h2{font-size:clamp(20px,2.4vw,27px);margin:2px 0}
.webcta p{margin:0;color:var(--muted);font-size:15px}
.projeto{margin-top:0}
.sec.outros{padding-top:0}
.selo{display:grid;place-items:center;width:96px;height:96px;border-radius:24px;background:linear-gradient(180deg,#2a176b,#0d0824);animation:floaty 4s ease-in-out infinite}
.selo img{display:block;width:82px;height:auto}
@keyframes floaty{50%{transform:translateY(-5px) rotate(-2deg)}}

/* primeira dobra */
.hero{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:40px;align-items:start;padding:34px 0 36px}
.hero-texto{padding-top:18px}
h1{font-size:clamp(33px,5vw,54px);line-height:1.07;letter-spacing:-.03em;font-weight:800;margin:10px 0 14px}
.lead{font-size:18px;color:var(--muted);max-width:570px;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.chips li{display:flex;align-items:center;gap:7px}
.chips svg{width:17px;height:17px;color:var(--ok)}
.kick{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.caption{text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0}

/* palco 3D: sempre escuro, para o controle branco e a barra de luz aparecerem nos dois temas */
.stage3d{position:relative;aspect-ratio:1/.94;width:100%;margin:0 auto;border-radius:30px;background:radial-gradient(85% 70% at 50% 40%,#32208a 0,#17103f 62%,#0c0920 100%);box-shadow:0 25px 50px rgba(20,10,60,.5)}
.stage3d .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:opacity .5s}
.stage3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .5s}
.stage3d canvas.pega{cursor:grabbing}
.stage3d.pronto canvas{opacity:1}
.stage3d.pronto .poster{opacity:0}
.ribbon{position:absolute;overflow:hidden;width:150px;height:150px;top:-10px;left:-10px;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.ribbon::before{content:"Grátis";position:absolute;width:150%;height:40px;background-image:linear-gradient(45deg,#ff9d0a 0%,#ffc14a 51%,#ff9d0a 100%);transform:rotate(-45deg) translateY(-20px);display:flex;align-items:center;justify-content:center;color:#2b1a00;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:14px;box-shadow:0 5px 10px rgba(0,0,0,.23)}
.ribbon::after{content:"";position:absolute;width:10px;height:10px;bottom:0;left:0;z-index:-1;box-shadow:140px -140px #b86a00;background-image:linear-gradient(45deg,#d17a00 0%,#ffb01f 51%,#d17a00 100%)}

/* controle ao vivo, embaixo do modelo */
.aovivo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:18px;margin-top:12px;padding:14px 16px}
.aovivo .tit{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.cores{display:grid;grid-template-columns:repeat(6,minmax(0,34px));gap:6px}
.cor{width:100%;aspect-ratio:1;min-height:30px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--c);background-clip:padding-box;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 1px var(--line);transition:transform .15s}
.cor:hover{transform:scale(1.1)}
.cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.efeitos{display:flex;flex-wrap:wrap;gap:5px}
.efeito{font:inherit;font-size:12.5px;font-weight:600;min-height:32px;padding:4px 10px;border-radius:99px;color:var(--text);background:var(--surface2);border:1px solid var(--line);cursor:pointer;transition:background-color .15s,border-color .15s}
.efeito:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
.efeito[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(100deg,#5a3cf0,#7c3aed)}
.curso{display:flex;align-items:flex-end;gap:7px;margin-top:9px;font-size:12px;color:var(--muted)}
#curso{flex:1;display:grid;grid-template-columns:repeat(10,1fr);gap:3px;align-items:end;height:34px;padding:3px;border-radius:9px;background:var(--surface2);border:1px solid var(--line)}
#curso span{display:block;min-height:2px;border-radius:3px;background:color-mix(in srgb,var(--muted) 40%,transparent);transition:height .25s}
#curso span.on{background:linear-gradient(180deg,#a78bfa,#5a3cf0)}

/* chamada curta para o desbloqueio, na primeira dobra */
.nota-dz{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:20px;padding:8px 14px 8px 8px;border-radius:16px;text-decoration:none;font-size:14px;line-height:1.35;color:#d7f3c7;background:#070a06;border:1px solid rgba(141,255,42,.35);transition:border-color .2s}
.nota-dz:hover{border-color:rgba(141,255,42,.8)}
.nota-dz b{color:#b6ff66}
.nota-dz img{display:block;width:100%;height:auto;mix-blend-mode:screen}
.nota-dz svg{color:#b6ff66}

/* publicidade: deitada (4:1) */
.ad{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0d0926;aspect-ratio:4/1;width:100%;margin:6px 0 10px}
.ad .midia,.ad a{display:block;width:100%;height:100%}
.ad img,.ad video{display:block;width:100%;height:100%;object-fit:contain}
.adtag{position:absolute;top:8px;left:8px;z-index:1;font-size:12px;font-weight:600;color:#fff;background:rgba(10,6,32,.72);padding:2px 8px;border-radius:99px}
/* publicidade: em pé (1:4), à esquerda do topo. Só onde sobra margem para ela; ao descer a página, encolhe e fica presa no alto (site.js). */
.adtopo{--margem:calc((100% - 1080px)/2);--larg:min(230px,var(--margem) - 40px,(100vh - 141px)/4);display:none;position:fixed;z-index:2;top:87px;left:calc((var(--margem) - var(--larg))/2);width:var(--larg);aspect-ratio:1/4;margin:0;overflow:visible;transform-origin:top center}
.adtopo .midia{overflow:hidden;border-radius:inherit}
.adtopo .adtag{top:100%;left:0;margin-top:6px;padding:0;color:var(--muted);background:none;transform-origin:top left}/* embaixo da arte: encolhida, ela não pode ficar coberta */
@media (min-width:1440px) and (min-height:640px){.adtopo{display:block}}

/* seções */
.sec{padding:52px 0}
.sec>.h{max-width:720px;margin:0 0 24px}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:800;margin:6px 0 8px}
.sec .h p{color:var(--muted);margin:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);min-width:0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card.projeto{padding:18px 22px;border-color:color-mix(in srgb,var(--accent2) 45%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent2) 22%,transparent),var(--surface));box-shadow:0 14px 44px var(--glow)}
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--accent2) 18%,transparent),transparent 62%)}
.spot:hover::before{opacity:1}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.bento .card{grid-column:span 2;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:13px;align-content:start}
.bento .wide{grid-column:span 3}
.ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--btn1),#a855f7);grid-row:span 2}
.ico svg{width:22px;height:22px}
h3{font-size:18px;margin:0 0 5px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px}
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.who b{display:block;font-size:17px;margin-bottom:4px}
.tablewrap{overflow-x:auto;padding:6px 8px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:13px}
th.me{color:var(--accent)}
td.me{background:color-mix(in srgb,var(--accent2) 9%,transparent);font-weight:600}
.y{color:var(--ok)}.n{color:var(--muted)}.l{color:var(--warn)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:10px;font-weight:800;color:var(--accent);background:var(--surface2);border:1px solid var(--line)}
.steps li.semnro::before{display:none}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.price.best{border-color:color-mix(in srgb,var(--accent2) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 30%,transparent),0 14px 44px var(--glow)}
.val{font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 2px}
.val small{font-size:15px;font-weight:500;color:var(--muted)}
.price ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:8px;font-size:15px}
.price li{display:flex;gap:8px}
.price li svg{width:18px;height:18px;color:var(--ok);margin-top:3px}
.tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;padding:3px 10px;border-radius:99px;background:linear-gradient(90deg,var(--btn2),#7c2fd0)}
.tag.alt{color:var(--muted);background:var(--surface2);border:1px solid var(--line)}
.faq{display:grid;gap:8px;max-width:820px}
details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .25s}
details[open] summary::before{transform:rotate(45deg)}
details p{margin:9px 0 0;color:var(--muted);font-size:15px}
.bento .wide img{grid-column:1/-1;display:block;width:100%;height:auto;margin-top:14px;border-radius:14px;border:1px solid var(--line)}
.bento h3 .tag{vertical-align:2px;margin-left:4px}

/* Dat Zero Games: preto e verde da logo da loja, nos dois temas */
.card.dz{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;padding:30px;color:#eefbe6;background:radial-gradient(90% 80% at 12% 0,#142b0d 0,#070a06 62%);border-color:rgba(141,255,42,.38);box-shadow:0 22px 60px rgba(40,90,10,.28)}
.dz .kick{color:#b6ff66}
.dz h2{color:#fff}
.dz p{color:#c9dcc0;font-size:16px}
.dz-logo{display:block;width:min(240px,62%);height:auto;margin:0 0 16px;mix-blend-mode:screen}
.dz-lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:15px;color:#e2f3d8}
.dz-lista li{display:flex;gap:9px}
.dz-lista svg{color:#b6ff66;margin-top:2px}
.dz-oferta{display:flex;flex-direction:column;gap:12px;justify-content:center}
.dz-switch{display:block;width:100%;height:auto}
.dz-preco{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dz-preco small{font-size:14px;color:#c9dcc0}
.dz-preco b{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#b6ff66}
.dz-end{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px!important;margin:0!important}
.dz-end a{color:#eefbe6}
.dz-end svg{width:17px;height:17px;color:#b6ff66}
.pix-ok{margin:12px 0 0!important;min-height:22px;font-size:14px}
.final{text-align:center;padding:38px 20px}
.final .cta{justify-content:center}

/* montagem em 3D, guiada pela rolagem */
.story{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;align-items:start}
.storypalco{position:sticky;top:82px;height:min(calc(100vh - 108px),720px);order:2;border-radius:26px;overflow:hidden;background:radial-gradient(90% 75% at 50% 42%,#2f1e80 0,#161039 60%,#0c0920 100%);box-shadow:0 25px 50px rgba(20,10,60,.4)}
.storypalco canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.storypalco.pronto canvas{opacity:1}
.carrega{position:absolute;inset:0;display:grid;place-items:center;color:#b9b0dc;font-size:14px;transition:opacity .3s}
.pronto .carrega{opacity:0}
#rotulos3d{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.l3d{position:absolute;left:0;top:0;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap;background:rgba(10,6,32,.88);border:1px solid rgba(255,255,255,.24);color:#fff;will-change:transform}
.l3d.vm{color:#ff8a94;border-color:rgba(255,87,102,.6)}
.l3d.am{color:#ffc75a;border-color:rgba(255,176,31,.6)}
.l3d.ro{color:#cfc0ff;border-color:rgba(167,139,250,.65)}
.l3d.az{color:#9ad6ff;border-color:rgba(79,184,255,.65)}
.passos{display:grid}
.passo{margin:0 0 14vh;opacity:.42;transition:opacity .3s,border-color .3s,transform .3s}
.passo:last-child{margin-bottom:36vh}
.passo.on{opacity:1;border-color:color-mix(in srgb,var(--accent2) 55%,transparent);transform:translateX(4px)}
.passo .nro{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-bottom:8px;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--btn1),#a855f7)}
.passo img{display:none;width:100%;height:auto;border-radius:14px;margin-top:12px}
.passo p+p,.passo .sub+p{margin-top:10px}
.sub{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:15px;display:grid;gap:6px}
.sub b,.passo p b,.card p b{color:var(--text)}
code{font:13px ui-monospace,Menlo,monospace;overflow-wrap:anywhere;color:var(--text);background:var(--surface2);padding:1px 5px;border-radius:6px}
kbd{font-family:inherit;font-size:13px;font-weight:600;color:var(--text);background:var(--surface2);border:1px solid var(--line);border-bottom-width:2px;padding:1px 7px;border-radius:7px;white-space:nowrap}
.story.nogl{grid-template-columns:minmax(0,1fr)}
.story.nogl .storypalco{display:none}
.story.nogl .passo{opacity:1;margin-bottom:14px;transform:none}
.story.nogl .passo img{display:block}

/* fotos reais */
.fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.foto{margin:0;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.foto figcaption{padding:10px 14px 12px;font-size:14px;color:var(--muted)}
.telas .foto img{aspect-ratio:16/9}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.tela-grande{width:min(1180px,calc(100vw - 24px));max-width:none;padding:0;border:1px solid var(--line);border-radius:20px;background:#07061a;overflow:hidden}
.tela-grande::backdrop{background:rgba(5,3,20,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tela-grande img{display:block;width:100%;height:auto}
.tela-grande form{position:absolute;top:10px;right:10px;margin:0}
@media (hover:hover){.foto:hover img{transform:scale(1.04)}}
.comprar{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* avisos */
.aviso{margin-top:14px;padding:14px 18px;border-radius:16px;font-size:15px;line-height:1.5;border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.aviso b{color:var(--warn)}

/* rodapé */
footer{border-top:1px solid var(--line);padding:32px 0 40px;color:var(--muted);font-size:14px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:26px}
.fgrid h3{font-size:14px;color:var(--text);margin:0 0 10px}
.fgrid b{color:var(--text)}
.flinks{display:grid;gap:7px;justify-items:start}
.flinks a{color:var(--muted)}
.redes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.redes a{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.redes a:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent);color:var(--accent)}
.redes svg{width:19px;height:19px;fill:currentColor}

/* barra de compra no celular */
.mdl{position:fixed;left:0;right:0;bottom:0;z-index:7;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--nav);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mdl.on{transform:none}
.mdl .b{flex:1;min-height:50px;padding-inline:10px;font-size:14.5px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:30px;padding-top:30px}
  .hero-texto{padding-top:0}
  .card.dz{grid-template-columns:minmax(0,1fr);padding:22px}
  .aovivo{grid-template-columns:minmax(0,1fr)}
  .cores{grid-template-columns:repeat(12,minmax(0,34px))}
  .bento .card,.bento .wide{grid-column:span 3}
  .steps{grid-template-columns:1fr 1fr}
  .links{display:none}
  .top .iconbtn{margin-left:auto}
  .webcta,.projeto{grid-template-columns:auto minmax(0,1fr)}
  .webcta .b,.projeto .b{grid-column:1/-1}
  .story{grid-template-columns:minmax(0,1fr);gap:18px}
  .storypalco{order:0;top:66px;height:46vh;height:46svh;z-index:3}
  .passo{margin-bottom:58vh;transform:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .passo:first-child{margin-top:12vh}
  .passo:last-child{margin-bottom:30vh}
  .fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>:first-child{grid-column:1/-1}
  .mdl{display:flex}
  footer{padding-bottom:100px}
}
@media (max-width:640px){
  .bento .card,.bento .wide{grid-column:span 6}
  .who,.prices,.fotos{grid-template-columns:1fr}
  table{min-width:0;font-size:13.5px}
  th,td{padding:10px 7px}
  thead th:nth-child(2),tbody td:nth-child(2){display:none}
  .cores{grid-template-columns:repeat(6,minmax(0,40px))}
  .nota-dz{grid-template-columns:54px minmax(0,1fr) auto}
  .top .dl{display:none}
  .projeto{grid-template-columns:1fr;justify-items:center;text-align:center}
  .projeto .b{width:100%}
  .webcta{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 14px;margin-top:12px}
  .webcta p{display:none}
  .webcta .selo{width:58px;height:58px;border-radius:16px}
  .webcta .selo img{width:48px}
  .webcta .b{width:100%;min-height:48px!important;font-size:16px!important}
  .cta .b{width:100%}
  .sec{padding:38px 0}
  .lead{font-size:17px}
  .comprar .b{width:100%}
  .l3d{font-size:12px;padding:4px 10px}
}
@media (max-width:420px){.fgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}