@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/plus-jakarta-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:700 900;font-display:swap;src:url(fonts/red-hat-display.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/red-hat-mono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/red-hat-text.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/unbounded.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Music';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-music-symbols.woff2) format('woff2');unicode-range:U+266a-266b, U+1d11e}
/* Landing do Musizz. Tokens = src/theme/palette.ts (darkPalette, Midnight Stage).
   Gerado por design/GUITZZ-44-landing-v2/gen/final.py (branch design/GUITZZ-44). */
:root{
  color-scheme:dark;
  --bg:#111A28;--surface:#0D1520;--card:#16202E;--card-hi:#1D2A3C;--c-high:#243449;--line:#243448;
  --glass:rgba(22,32,46,.55);--glass-b:rgba(234,244,251,.08);
  --ink:#EAF4FB;--muted:#8CA3B9;--faint:#5F7488;
  --accent:#02E4FD;--accent-dim:#0FB6CC;--accent-soft:#0E2A38;--on-accent:#052831;
  --mesh:#2A5F84;--warm:#FFC94D;--warm-soft:#332A12;--secondary:#FF7A52;--secondary-soft:#33201A;
  --success:#43E19A;--success-soft:#0E3527;--danger:#FF6B62;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
p,h1,h2,h3,ul{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.pix{image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font:700 16px/1 var(--body);text-decoration:none;border:1px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#5BF0FF}
.btn-ghost{border-color:#34495f;color:var(--ink);background:rgba(234,244,251,.03)}
.btn-ghost:hover{border-color:var(--accent-dim)}
.btn-sm{min-height:42px;padding:10px 18px;font-size:14px}
.store{display:inline-block;border-radius:12px}
.store img{height:52px;width:auto}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.micro{color:var(--muted);font-size:14px}
.micro b{color:var(--ink);font-weight:700}
/* no computador, "Jogar agora" vem primeiro; no celular, a App Store */
.is-desk .ctas .store{order:2}
.is-desk .ctas .btn-play{order:1}

/* ---------- iPhone ---------- */
.phone{--u:10px;font-size:var(--u);position:relative;flex:none;width:28em;height:58em;padding:1em;border-radius:4.7em;
  background:linear-gradient(150deg,#56627a 0%,#1d2530 18%,#0f141c 48%,#2a3441 76%,#141a23 100%);
  box-shadow:inset 0 0 0 .12em rgba(255,255,255,.26),inset 0 0 0 .5em #0a0e14,0 0 0 .06em rgba(0,0,0,.9),0 4em 7em -2em rgba(0,0,0,.75),0 0 9em -2.5em rgba(2,228,253,.25)}
.phone::before{content:"";position:absolute;left:-.3em;top:10.5em;width:.34em;height:14.6em;border-radius:.2em 0 0 .2em;background:linear-gradient(#2c3643 0 2.6em,transparent 2.6em 4.4em,#2c3643 4.4em 9em,transparent 9em 10em,#2c3643 10em)}
.phone::after{content:"";position:absolute;right:-.3em;top:16em;width:.34em;height:7.6em;border-radius:0 .2em .2em 0;background:#2c3643}
.scr{position:relative;width:100%;height:100%;border-radius:3.75em;overflow:hidden;isolation:isolate;color:var(--ink);font-family:var(--body);line-height:1.3;
  background:radial-gradient(70% 40% at 10% -6%,rgba(42,95,132,.6),transparent 64%),radial-gradient(50% 30% at 100% 6%,rgba(2,228,253,.14),transparent 60%),#111A28}
.scr::before{content:"";position:absolute;z-index:40;top:1.1em;left:50%;transform:translateX(-50%);width:8.8em;height:2.6em;border-radius:1.4em;background:radial-gradient(circle at 80% 50%,#1b2a3d 0 .38em,#050608 .44em),#000}
.scr::after{content:"";position:absolute;inset:0;z-index:41;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 24%,transparent 38%,transparent 72%,rgba(255,255,255,.05) 100%)}
.pad{position:absolute;inset:0;padding:5.2em 1.8em 2.4em;display:flex;flex-direction:column}
.ahd{display:flex;align-items:center;gap:1em;margin-bottom:1.6em}
.ahd .bk{width:3em;height:3em;border-radius:50%;background:var(--glass);border:.1em solid var(--glass-b);display:grid;place-items:center;flex:none}
.ahd .bk::before{content:"";width:.8em;height:.8em;border-left:.2em solid var(--ink);border-bottom:.2em solid var(--ink);transform:translateX(.15em) rotate(45deg)}
.ahd small{display:block;font:800 .9em/1 var(--body);letter-spacing:.16em;color:var(--accent);margin-bottom:.35em}
.ahd strong{display:block;font:700 1.6em/1.1 var(--display)}
.ahd .cr{margin-left:auto;display:flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:2em;background:var(--accent-soft);color:var(--accent);font:800 1.1em/1 var(--body)}
.ahd .cr::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--accent);box-shadow:0 0 .6em var(--accent)}

/* Rush */
.ru-ring{position:relative;width:19em;height:19em;margin:.6em auto 1.4em}
.ru-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ru-ring .trk{fill:none;stroke:var(--line);stroke-width:7}
.ru-ring .prg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(2,228,253,.7))}
.ru-ring .prg.low{stroke:var(--secondary);filter:drop-shadow(0 0 4px rgba(255,122,82,.7))}
.ru-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ru-c .n{font:800 6.4em/1 var(--display);letter-spacing:-.03em}
.ru-c .n.ch{font-size:5em}
.ru-c .t{font:700 1.3em/1 var(--body);color:var(--muted);margin-top:.5em;font-variant-numeric:tabular-nums}
.ru-ins{text-align:center;font-size:1.2em;color:var(--muted);margin-bottom:1.6em}
.ru-st{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-bottom:1.2em}
.ru-st div{background:var(--card);border:.1em solid var(--glass-b);border-radius:1.3em;padding:.9em .8em}
.ru-st small{display:block;font:700 .85em/1 var(--body);color:var(--faint);margin-bottom:.45em}
.ru-st b{font:700 1.7em/1 var(--display);font-variant-numeric:tabular-nums}
.ru-mic{display:flex;align-items:center;gap:.8em;background:var(--accent-soft);border-radius:1.3em;padding:1em 1.1em;font:700 1.05em/1.2 var(--body);color:var(--accent)}
.ru-mic .bars{display:flex;align-items:center;gap:.25em;height:1.8em}
.ru-mic .bars i{width:.3em;border-radius:.2em;background:var(--accent);animation:bar 1s ease-in-out infinite}
.ru-mic .bars i:nth-child(1){height:40%;animation-delay:-.2s}.ru-mic .bars i:nth-child(2){height:90%;animation-delay:-.5s}.ru-mic .bars i:nth-child(3){height:60%;animation-delay:-.1s}.ru-mic .bars i:nth-child(4){height:100%;animation-delay:-.7s}.ru-mic .bars i:nth-child(5){height:50%;animation-delay:-.35s}
@keyframes bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.toast{position:absolute;z-index:8;left:50%;top:20em;transform:translate(-50%,0) scale(.8);opacity:0;padding:.7em 1.3em;border-radius:2em;background:var(--success);color:#062a1a;font:800 1.3em/1 var(--display);letter-spacing:.02em;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,-.6em) scale(1)}

/* ---------- cenas dos jogos (escaláveis por font-size) ---------- */
.scene{--u:10px;font-size:var(--u);position:relative;overflow:hidden;background:#0D1520;isolation:isolate}
.scene .bgimg{position:absolute;inset:0;background:center/cover no-repeat;image-rendering:pixelated}
/* Flap */
.sc-flap{background:#70c8e8}
.sc-flap .bgimg{background-image:url(img/g-flap-sky.webp);background-position:center bottom}
.sc-flap .pipes{position:absolute;left:0;top:0;bottom:3.4em;width:200%;animation:pipes 8s linear infinite}
.sc-flap .pipes i{position:absolute;width:3.4em;background:url(img/g-flap-pipe.webp) center top/100% auto repeat-y;image-rendering:pixelated}
.sc-flap .pipes i.up{bottom:0}.sc-flap .pipes i.dn{top:0;transform:rotate(180deg)}
.sc-flap .ground{position:absolute;left:0;right:0;bottom:0;height:3.6em;background:url(img/g-flap-ground.webp) 0 0/auto 100% repeat-x;image-rendering:pixelated;animation:ground 1.4s linear infinite}
.sc-flap .bird{position:absolute;left:18%;top:40%;width:4em;image-rendering:pixelated;animation:bird 1.2s ease-in-out infinite}
@keyframes pipes{to{transform:translateX(-50%)}}
@keyframes ground{to{background-position:-8em 0}}
@keyframes bird{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-1.8em) rotate(8deg)}}
/* nota flutuante usada em várias cenas */
.nt{position:absolute;z-index:5;display:grid;place-items:center;min-width:3.6em;height:3.6em;padding:0 .7em;border-radius:1.2em;background:rgba(13,21,32,.84);border:.12em solid rgba(2,228,253,.45);box-shadow:0 0 1.6em rgba(2,228,253,.35);font:800 1.9em/1 var(--display);color:var(--accent)}
.nt small{display:block;font:800 .3em/1 var(--body);letter-spacing:.2em;color:var(--muted)}
/* Blocos */
.sc-blocos .bgimg{background-image:url(img/g-tetris-night.webp)}
.sc-blocos .well{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:12em;height:100%;display:grid;grid-template-columns:repeat(8,1.5em);grid-auto-rows:1.5em;align-content:end;background:rgba(13,21,32,.35);border-inline:.12em solid rgba(234,244,251,.12)}
.sc-blocos .well i{border-radius:.2em;box-shadow:inset 0 -.2em 0 rgba(0,0,0,.25),inset 0 .15em 0 rgba(255,255,255,.3)}
.sc-blocos .fall{position:absolute;left:50%;top:0;width:4.5em;height:3em;margin-left:-1.5em;animation:fall 3.2s steps(8) infinite}
.sc-blocos .fall i{position:absolute;width:1.5em;height:1.5em;border-radius:.2em;background:var(--warm);box-shadow:inset 0 -.2em 0 rgba(0,0,0,.25),inset 0 .15em 0 rgba(255,255,255,.3)}
@keyframes fall{0%{transform:translateY(-3em)}100%{transform:translateY(14em)}}
.b1{background:var(--accent)}.b2{background:var(--secondary)}.b3{background:var(--warm)}.b4{background:var(--success)}.b5{background:#9b8cff}
/* Encantador de Serpentes */
.sc-cobra .bgimg{background-image:url(img/g-cobra-grass.webp);background-size:6em}
.sc-cobra .body{position:absolute;inset:0}
.sc-cobra .body i{position:absolute;width:2em;height:2em;border-radius:.5em;background:#3fbf5f;box-shadow:inset 0 -.25em 0 rgba(0,0,0,.2)}
.sc-cobra .head{position:absolute;width:2.2em;image-rendering:pixelated}
.sc-cobra .apple{position:absolute;width:2em;image-rendering:pixelated;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
/* Quebra-Tijolos */
.sc-quebra{background:linear-gradient(180deg,#1a1236,#0D1520)}
.sc-quebra .bricks{position:absolute;left:8%;right:8%;top:14%;display:grid;grid-template-columns:repeat(6,1fr);gap:.35em}
.sc-quebra .bricks i{height:1.2em;border-radius:.2em;box-shadow:inset 0 -.2em 0 rgba(0,0,0,.25)}
.sc-quebra .bricks i.x{visibility:hidden}
.sc-quebra .paddle{position:absolute;bottom:12%;left:40%;width:22%;height:.9em;border-radius:1em;background:var(--ink);animation:paddle 2.4s ease-in-out infinite}
.sc-quebra .ball{position:absolute;width:1.1em;height:1.1em;border-radius:50%;background:var(--accent);box-shadow:0 0 1em var(--accent);animation:ball 2.4s linear infinite}
@keyframes paddle{0%,100%{left:20%}50%{left:58%}}
@keyframes ball{0%{left:30%;bottom:15%}25%{left:50%;bottom:62%}50%{left:68%;bottom:15%}75%{left:48%;bottom:55%}100%{left:30%;bottom:15%}}
/* Invasão Alienígena */
.sc-inv .bgimg{background-image:url(img/g-invasao-space.webp)}
.sc-inv .fleet{position:absolute;left:10%;right:10%;top:12%;display:grid;grid-template-columns:repeat(5,1fr);gap:.6em 1em;animation:fleet 3s ease-in-out infinite alternate}
.sc-inv .fleet img{width:2.6em;margin:auto;image-rendering:pixelated}
.sc-inv .ship{position:absolute;bottom:8%;left:50%;width:3.6em;margin-left:-1.8em;image-rendering:pixelated;animation:ship 3s ease-in-out infinite alternate}
.sc-inv .shot{position:absolute;bottom:22%;left:50%;width:.3em;height:1.6em;background:var(--accent);box-shadow:0 0 .8em var(--accent);border-radius:.2em;animation:shot 1s linear infinite}
@keyframes fleet{to{transform:translateX(1.4em)}}
@keyframes ship{from{transform:translateX(-2.4em)}to{transform:translateX(2.4em)}}
@keyframes shot{from{transform:translateY(0);opacity:1}to{transform:translateY(-14em);opacity:0}}
/* Escala */
.sc-escala{background:radial-gradient(80% 60% at 50% 0%,rgba(42,95,132,.55),transparent 70%),#111A28;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;padding:1.2em}
.sc-escala .lbl{font:800 .95em/1 var(--body);letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.sc-escala .row{display:flex;gap:.45em;flex-wrap:wrap;justify-content:center}
.sc-escala .row span{display:grid;place-items:center;width:3em;height:3em;border-radius:.9em;font:700 1.15em/1 var(--display);background:var(--card);color:var(--faint);border:.12em solid transparent;transition:all .25s}
.sc-escala .row span.done{background:var(--success-soft);color:var(--success)}
.sc-escala .row span.cur{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-.25em);box-shadow:0 0 1.2em rgba(2,228,253,.35)}
/* Rush (cena compacta, fora do telefone) */
.sc-rush{background:radial-gradient(70% 60% at 50% 30%,rgba(2,228,253,.14),transparent 70%),#111A28;display:grid;place-items:center}
.sc-rush .ring{position:relative;width:12em;height:12em}
.sc-rush .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sc-rush .ring .trk{fill:none;stroke:var(--line);stroke-width:8}
.sc-rush .ring .prg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;animation:ringrun 3s linear infinite;filter:drop-shadow(0 0 4px rgba(2,228,253,.7))}
.sc-rush .ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 4.2em/1 var(--display)}
@keyframes ringrun{from{stroke-dashoffset:0}to{stroke-dashoffset:326.7}}

/* ---------- FAQ (details) ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 18px/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:62ch}

/* ---------- toggle de preço ---------- */
.toggle{display:inline-flex;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.toggle button{appearance:none;border:0;background:transparent;color:var(--muted);font:700 15px/1 var(--body);padding:12px 20px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.toggle button[aria-pressed="true"]{background:var(--card-hi);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.toggle .off{font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--success-soft);color:var(--success)}
[data-plan="mensal"] .only-anual,[data-plan="anual"] .only-mensal{display:none}
.checks{list-style:none;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' fill='none' stroke='%2302E4FD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.checks li.dim{color:var(--muted)}
.checks li.dim::before{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' fill='none' stroke='%235F7488' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* ---------- rodapé ---------- */
.foot{border-top:1px solid var(--line);padding-block:40px;color:var(--muted);font-size:15px}
.foot .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot img{height:26px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .lang{display:flex;gap:4px}
.foot .lang a{padding:6px 10px;border-radius:8px}
.foot .lang a[aria-current]{background:var(--card);color:var(--ink)}
.foot .cp{width:100%;color:var(--faint);font-size:14px}
.sel{user-select:all}
.in-l{display:grid;gap:.8em}
.in-l div{padding:1.3em 1.4em;border-radius:1.4em;background:var(--card);border:.12em solid var(--glass-b)}
.in-l div.on{border-color:var(--accent);background:var(--accent-soft)}
.in-l b{display:block;font:700 1.5em/1.1 var(--display)}
.in-l small{display:block;margin-top:.35em;font-size:1.05em;color:var(--muted)}
/* telas e cenas sempre com as cores do app, mesmo em versões claras */
.phone,.scene{--ink:#EAF4FB;--muted:#8CA3B9;--faint:#5F7488;--card:#16202E;--line:#243448;--accent:#02E4FD;--accent-soft:#0E2A38;--on-accent:#052831;--glass:rgba(22,32,46,.55);--glass-b:rgba(234,244,251,.08);--surface:#0D1520;--success:#43E19A;--success-soft:#0E3527;--secondary:#FF7A52;--warm:#FFC94D;color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.phone .ahd strong,.phone .ru-c .n,.phone .ru-st b,.phone .in-l b,.scene .nt,.scene .row span,.scene .ring b,.toast{font-family:"Unbounded","Arial Black",system-ui,sans-serif}

:root{
  color-scheme:dark;
  --display:"Red Hat Display","Arial Black",system-ui,sans-serif;
  --body:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Red Hat Mono",ui-monospace,Menlo,monospace;
  --c-low:#1A2637;--c-mid:#1F2D40;--c-high:#243449;--c-highest:#2A3C54;
}
body{background:var(--bg);font-family:var(--body);font-size:17px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em}
main,section{overflow-x:clip}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
section{padding-block:96px}
h2{font-size:clamp(32px,4.4vw,56px);line-height:1.04;margin-bottom:44px}
.btn{font-family:var(--body)}
.store img{height:52px}
.ctas+.micro{margin-top:18px}
.btn-play svg,.nv .btn svg,.pl-free .btn svg{flex:none;margin-left:-2px}

/* nav */
.nv{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(17,26,40,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,244,251,.06)}
.nv .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nv .logo{height:30px;width:auto}
.nv nav{display:flex;gap:26px;margin-left:auto}
.nv nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.nv nav a:hover{color:var(--ink)}
@media (max-width:860px){.nv nav{display:none}.nv .btn{margin-left:auto}}

/* 1. hero: texto à esquerda, Riff à direita olhando para o texto */
.hero{position:relative;padding-block:56px 64px;
  background:radial-gradient(52% 46% at 10% -8%,rgba(42,95,132,.55),transparent 64%),radial-gradient(40% 50% at 78% 40%,rgba(42,95,132,.5),transparent 70%),radial-gradient(30% 30% at 94% 4%,rgba(2,228,253,.12),transparent 60%),var(--bg)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(42px,5.7vw,80px);font-weight:900;line-height:.98;letter-spacing:-.035em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 42px rgba(2,228,253,.35)}
.hero .sub{font-size:clamp(17px,1.5vw,20px);max-width:34em;margin-bottom:10px;color:var(--ink);opacity:.9}
.hero .sup{color:var(--muted);margin-bottom:30px}
.hero-art{position:relative;width:100%;max-width:560px;justify-self:end;aspect-ratio:1/1.04}
.beam{position:absolute;inset:-120px -10% 8%;background:conic-gradient(from 180deg at 50% 0%,transparent 0 156deg,rgba(120,226,255,.13) 170deg,rgba(234,244,251,.15) 180deg,rgba(120,226,255,.13) 190deg,transparent 204deg);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,#000 30%,transparent 92%);pointer-events:none}
.halo{position:absolute;left:8%;right:8%;top:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(42,95,132,.55),rgba(42,95,132,.18) 60%,transparent)}
.floor{position:absolute;left:14%;right:14%;bottom:1%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,228,253,.34),rgba(2,228,253,.08) 60%,transparent)}
.ducks{position:relative;z-index:2;width:101%;aspect-ratio:1000/1024;margin:0 0 0 -.5%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.duck{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .9s ease,transform .9s ease}
.duck.on{opacity:1;transform:none}
.sym{position:absolute;z-index:3;font:400 clamp(46px,6vw,84px)/1 "Noto Music",serif;pointer-events:none;animation:float 6s ease-in-out infinite}
.sym.y1{left:1%;bottom:17%;color:var(--ink);text-shadow:0 0 26px rgba(2,228,253,.6)}
.sym.y2{right:-1%;bottom:36%;font-size:clamp(38px,4.6vw,62px);color:var(--warm);text-shadow:0 0 22px rgba(255,201,77,.5);animation-delay:-2.6s}
.chip{position:absolute;z-index:3;display:grid;place-items:center;min-width:64px;height:64px;padding:0 14px;border-radius:20px;background:rgba(13,21,32,.86);border:2px solid rgba(2,228,253,.5);box-shadow:0 0 28px rgba(2,228,253,.32);font:800 28px/1 var(--display);color:var(--accent);animation:float 5s ease-in-out infinite}
.chip.k1{left:-2%;top:30%}
.chip.k2{left:12%;top:4%;animation-delay:-1.6s;border-color:rgba(255,201,77,.55);color:var(--warm);box-shadow:0 0 28px rgba(255,201,77,.25)}
.chip.k3{right:0;top:12%;animation-delay:-3.1s;border-color:rgba(67,225,154,.5);color:var(--success);box-shadow:0 0 28px rgba(67,225,154,.22)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;gap:12px}.hero-art{justify-self:center;max-width:380px;margin-top:16px}.chip{min-width:50px;height:50px;font-size:22px;border-radius:16px}.hero{padding-block:40px 72px}}

/* 2. exercícios musicais */
.ex-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:56px}
.ex-h h2{margin-bottom:0}
.ex-p p{color:var(--muted);font-size:18px;max-width:34em}.ex-p p+p{margin-top:14px}
.ex-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.exc{--c:var(--accent);--cs:var(--accent-soft);position:relative;overflow:hidden;padding:28px;border-radius:26px;background:var(--card);border:1px solid var(--glass-b);display:flex;flex-direction:column;gap:10px}
.exc::before{content:"";position:absolute;inset:0 0 auto;height:160px;background:radial-gradient(70% 100% at 20% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%);pointer-events:none}
.exc-2{--c:var(--secondary);--cs:var(--secondary-soft)}
.exc-3{--c:var(--success);--cs:var(--success-soft)}
.exc h3{position:relative;font-size:21px;line-height:1.2;color:var(--c)}
.exc p{position:relative;color:var(--muted)}
.viz{position:relative;height:88px;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.v-listen .eq{flex:1;display:flex;align-items:center;gap:5px;height:64px;padding:0 14px;border-radius:18px;background:var(--cs)}
.v-listen .eq i{flex:1;max-width:8px;border-radius:4px;background:var(--c);animation:bar 1.1s ease-in-out infinite}
.v-listen .det{display:grid;place-items:center;align-content:center;gap:4px;width:64px;height:64px;border-radius:18px;border:2px solid var(--c);color:var(--c);font:800 26px/1 var(--display);box-shadow:0 0 24px color-mix(in srgb,var(--c) 30%,transparent)}
.v-listen .det small{font:700 10px/1 var(--mono);color:var(--muted);letter-spacing:.02em}
.v-games .t{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.v-games .t img{width:38px;height:38px;object-fit:contain}
.v-games .t-rush{border:2px solid var(--accent);color:var(--accent);font:800 26px/1 var(--display);background:var(--accent-soft)}
.v-games .t:nth-child(2){transform:rotate(-4deg)}.v-games .t:nth-child(3){transform:rotate(3deg)}
.v-time svg{width:76px;height:76px;transform:rotate(-90deg);flex:none}
.v-time .trk{fill:none;stroke:var(--cs);stroke-width:6}
.v-time .prg{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:50}
.v-time .min{position:absolute;left:0;width:76px;text-align:center;font:600 11px/1 var(--mono);color:var(--muted)}
.v-time .min b{display:block;font:800 24px/1 var(--display);color:var(--ink);margin-bottom:2px}
.v-time .days{display:flex;gap:6px}
.v-time .days i{width:18px;height:18px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.v-time .days i.on{background:var(--c);border-color:var(--c)}
.v-time .days i.today{border:2px solid var(--c);background:var(--cs)}
@media (max-width:900px){.ex-h{grid-template-columns:1fr;gap:20px}.ex-c{grid-template-columns:1fr}}

/* 3. jogos inclusos: 2 por linha, imagem à esquerda */
.ex,.hw,.pr,.fin{background:var(--surface)}
.gs,.wo,.fq{background:var(--bg)}
.gms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gm{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);padding:10px;border-radius:28px;background:var(--card);border:1px solid var(--glass-b);transition:border-color .2s,transform .2s}
.gm:hover{border-color:rgba(2,228,253,.28);transform:translateY(-2px)}
.gm-v{min-height:228px;border-radius:20px;--u:8px}
.gm-b{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 18px 18px 24px}
.gm-b h3{font-size:23px;line-height:1.15}
.gm-b p{color:var(--muted);font-size:15.5px;line-height:1.55;flex:1}
.gm-feat{grid-column:1/-1;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.gm-phone{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:40px;min-height:400px;background:radial-gradient(55% 60% at 50% 45%,rgba(2,228,253,.18),transparent 70%),radial-gradient(60% 50% at 0% 0%,rgba(42,95,132,.55),transparent 70%),var(--surface)}
.gm-phone .phone{--u:7.4px}
.gm-feat .gm-b{justify-content:center;padding:32px 40px}
.gm-feat h3{font-size:clamp(30px,3.4vw,44px)}
.gm-feat p{flex:none;font-size:18px;max-width:30em;margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;font:700 15px/1 var(--body);text-decoration:none;color:var(--accent);border:1.5px solid rgba(2,228,253,.45);background:rgba(2,228,253,.06);transition:background .15s,color .15s,border-color .15s}
.pill:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill svg{transition:transform .15s}.pill:hover svg{transform:translateX(3px)}
.pill-solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent);min-height:52px;padding:14px 26px;font-size:16px}
.pill-solid:hover{background:#5BF0FF;border-color:#5BF0FF}
.gms-more{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:48px;text-align:center;font:700 clamp(19px,2vw,24px)/1.3 var(--display);letter-spacing:-.01em}
.gms-more::before,.gms-more::after{content:"";flex:0 1 120px;height:1px;background:linear-gradient(90deg,transparent,var(--c-highest))}
.gms-more::after{transform:scaleX(-1)}
@media (max-width:980px){.gm,.gm-feat{grid-template-columns:1fr}.gm-v{min-height:0;aspect-ratio:16/9;--u:8.5px}.gm-phone{aspect-ratio:auto;min-height:340px;padding-top:28px}.gm-phone .phone{--u:6.4px}.gm-b,.gm-feat .gm-b{padding:20px 14px 14px}}
@media (max-width:700px){.gms{grid-template-columns:1fr}.gms-more::before,.gms-more::after{display:none}}

/* 4. como funciona */
.stp{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 26px}
.stp-i{padding:30px;border-radius:26px;background:var(--card);border:1px solid var(--glass-b);box-shadow:0 24px 50px -34px rgba(0,0,0,.8)}
.stp-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:22px;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:var(--on-accent);font:700 18px/1 var(--mono);box-shadow:0 0 22px rgba(2,228,253,.3)}
.stp-i h3{font-size:20px;margin-bottom:8px}
.stp-i p{color:var(--muted)}
.priv{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:15px;margin-bottom:30px}
.priv svg{flex:none;color:var(--success)}
@media (max-width:860px){.stp{grid-template-columns:1fr}}

/* 5. para quem é */
.wo h2{text-align:center;margin-inline:auto}
.wh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.wh-i{display:grid;grid-template-columns:168px minmax(0,1fr);gap:26px;align-items:center;padding:28px;background:var(--bg)}
.wh-i img{width:168px;height:168px;object-fit:cover;border-radius:20px;filter:saturate(.92)}
.wh-i h3{font-size:22px;margin-bottom:8px}
.wh-i p{color:var(--muted);font-size:16px;line-height:1.6}
@media (max-width:980px){.wh-i{grid-template-columns:120px minmax(0,1fr);gap:20px;padding:22px}.wh-i img{width:120px;height:120px}}
@media (max-width:760px){.wh{grid-template-columns:1fr}}
@media (max-width:460px){.wh-i{grid-template-columns:1fr}.wh-i img{width:100%;height:auto;aspect-ratio:16/10}}

/* 6. preço */
.pr-h{text-align:center;margin-bottom:44px}
.pr-h h2{margin-bottom:14px}
.pr-s{color:var(--muted);font-size:19px}
.pls{display:grid;grid-template-columns:repeat(2,minmax(0,410px));justify-content:center;gap:22px}
.pl{display:flex;flex-direction:column;gap:18px;padding:30px;border-radius:26px;background:var(--card);border:1px solid var(--line)}
.pl-prem{border:2px solid var(--accent);background:linear-gradient(170deg,#10324a,var(--card) 42%);box-shadow:0 28px 70px -34px rgba(2,228,253,.55)}
.pl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;min-height:48px}
.pl-n{font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pl-prem .pl-n{color:var(--accent)}
.pl .toggle{padding:4px}
.pl .toggle button{padding:9px 14px;min-height:40px;font-size:14px}
.pl-a{font:800 46px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-a small{font:600 15px/1 var(--body);letter-spacing:0;color:var(--muted)}
.pl-b{color:var(--muted);font-size:14px;margin-top:-8px}
.pl .checks{margin-top:4px}
.pl .btn{margin-top:auto;width:100%}
.pastel{text-align:center;margin-top:26px;color:var(--muted)}
@media (max-width:860px){.pls{grid-template-columns:minmax(0,1fr)}}

/* 7. faq */
.fq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.fq-h{position:sticky;top:112px}
.fq h2{margin-bottom:0}
.faq summary{font:600 18px/1.35 var(--body)}
@media (max-width:900px){.fq-in{grid-template-columns:1fr;gap:20px}.fq-h{position:static}}

/* 8. comece agora: painel de pedal */
.panel{position:relative;overflow:hidden;text-align:center;padding:88px 30px 80px;border-radius:30px;border:1px solid var(--c-highest);
  background:repeating-linear-gradient(90deg,rgba(234,244,251,.014) 0 1px,transparent 1px 3px),linear-gradient(160deg,var(--c-highest) 0%,var(--card) 36%,var(--c-mid) 66%,#0D1520 100%);
  box-shadow:inset 0 1px 0 rgba(234,244,251,.14),inset 0 -1px 0 rgba(0,0,0,.4),0 40px 70px -40px #000}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#C9D6E3,#5F7488 70%);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:rgba(13,21,32,.55);transform:rotate(35deg)}
.s1{left:16px;top:16px}.s2{right:16px;top:16px}.s3{left:16px;bottom:16px}.s4{right:16px;bottom:16px}
.led{display:block;width:14px;height:14px;margin:0 auto 28px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent),0 0 4px #fff inset;animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{box-shadow:0 0 28px var(--accent),0 0 4px #fff inset}}
.fin h2{font-size:clamp(46px,7.4vw,104px);font-weight:900;letter-spacing:-.04em;margin-bottom:14px}
.fin-s{color:var(--muted);font-size:clamp(17px,1.6vw,20px);margin-bottom:32px}
.ctas.c{justify-content:center}
.fin .micro{margin-top:14px}
.foot a[href^="mailto"]{text-decoration:none}
.foot a[href^="mailto"]:hover{color:var(--ink)}
@media (max-width:560px){section{padding-block:80px}.panel{padding:64px 20px 56px}}

.foot .logo{height:28px;width:auto}
.foot{background:var(--bg);border-top:0}
.foot .cp{color:var(--muted)}
/* GUITZZ-138: seletor de idioma no header */
/* acima de 860px o menu de seções empurra tudo para a direita; abaixo, o seletor empurra */
.nv .lang-nv{position:relative}
.nv .lang-nv+.btn{margin-left:0}
.lang-nv summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 10px;border-radius:10px;color:var(--muted);font-weight:700;font-size:14px;letter-spacing:.04em;user-select:none}
.lang-nv summary::-webkit-details-marker{display:none}
.lang-nv summary:hover,.lang-nv[open] summary{color:var(--ink);background:var(--card)}
.nv .lang-nv nav{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;min-width:160px;margin:0;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.nv .lang-nv nav a{padding:10px 12px;border-radius:8px;font-size:15px}
.nv .lang-nv nav a:hover{background:var(--card-hi)}
.nv .lang-nv nav a[aria-current]{color:var(--ink)}
@media (max-width:860px){.nv .lang-nv{margin-left:auto}}
@media (max-width:480px){.nv .wrap{gap:12px}}