@font-face{font-family:Sora;src:url(../fonts/sora-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* tokens do manual da marca (tema Palco) */
:root{
 --surface:#0c0918;--raised:#17122a;--night:#1b1433;--ink:#f3f1fa;--muted:#a9a3c2;
 --purple:#7048c8;--accent:#b7a0ff;--signal:#2fd0e6;--on-signal:#0c0918;--lilac:#d9ccff;
 --paper:#f6f5fb;--paper-ink:#120e22;--paper-muted:#5b5772;--line:#2a2342;
 --display:Sora,system-ui,sans-serif;--sans:"DM Sans",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;
 --r-lg:20px;--r-md:12px;--pill:999px;--gap:12px;
 --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem)}
.lab{font:500 .8125rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:1.1875rem;line-height:1.55;color:var(--ink)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:var(--pill);background:var(--signal);color:var(--on-signal);font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{background:#7fe6f3;transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:var(--purple);color:#fff}.btn.alt:hover{background:#8361d6}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:calc(100% - 2*clamp(16px,4vw,56px));max-width:1320px;margin-inline:auto}
section{padding-block:clamp(96px,12vw,180px)}

/* ---------- hero: palco dividido ---------- */
.hero{padding:var(--gap);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);min-height:100svh}
.sheet{background:var(--raised);border-radius:var(--r-lg);padding:28px clamp(28px,4vw,64px) 56px;display:flex;flex-direction:column}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.bar a:first-child{flex:none}
.bar img{width:112px;max-width:none;height:auto}
.bar nav{display:flex;gap:22px;font-size:.9375rem}
.bar nav a{text-decoration:none;color:var(--muted);transition:color .2s}.bar nav a:hover{color:var(--ink)}
.hero-copy{margin-top:auto;padding-top:64px}
.hero h1{font-size:clamp(3rem,1.6rem + 4.4vw,5.5rem);max-width:10ch;letter-spacing:-.04em;line-height:1}
.hero .lead{margin:28px 0 36px;max-width:40ch}
.hero-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero-cta a.txt{color:var(--muted);text-decoration:none;font-weight:500}.hero-cta a.txt:hover{color:var(--ink)}

/* player */
.visual{position:relative;background:var(--purple);border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden}
.visual::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:var(--signal);opacity:.28;filter:blur(110px);pointer-events:none} /* brilho do manual */
.visual img{position:relative}
.visual img{width:min(56%,420px);height:auto;flex:none}
.listen .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.listen-text{grid-column:1/6}
.listen-text h2{margin-top:14px}
.listen-text .lead{margin:22px 0 32px;max-width:36ch}
.stage{grid-column:6/13;position:relative;background:var(--purple);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,3vw,44px);color:#fff}
.stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;right:-20%;top:-25%;border-radius:50%;background:var(--signal);opacity:.22;filter:blur(90px);pointer-events:none} /* brilho do manual */
.now{position:relative;display:flex;align-items:center;gap:22px}
.play{flex:none;width:76px;height:76px;border-radius:50%;border:0;background:var(--signal);color:var(--on-signal);cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--ease)}
.play:hover{transform:scale(1.06)}.play:active{transform:scale(.96)}
.play svg{width:28px;height:28px}
.now h2{font-size:clamp(1.75rem,1rem + 1.6vw,2.5rem);line-height:1.1}
.now p{margin-top:6px;color:#e9e2ff}
.wave{position:relative;display:flex;align-items:center;gap:4px;height:120px;margin:34px 0 10px;cursor:pointer}
.wave i{flex:1;border-radius:var(--pill);background:rgba(255,255,255,.38);transition:background .15s}
.wave i.on{background:var(--signal)}
.time{position:relative;display:flex;justify-content:space-between;font:500 .875rem var(--mono);color:#e9e2ff;font-variant-numeric:tabular-nums}
.tracks{position:relative;list-style:none;margin-top:auto;display:grid;gap:4px}
.tracks a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;padding:12px 16px;border-radius:var(--r-md);text-decoration:none;transition:background .2s}
.tracks a:hover{background:rgba(255,255,255,.1)}
.tracks a.cur{background:rgba(12,9,24,.38)}
.tracks b{font-weight:600;font-size:1.0625rem}
.tracks small{grid-column:1;font-size:.875rem;color:#e9e2ff}
.tracks em{grid-row:1/3;grid-column:2;align-self:center;font:500 .875rem var(--mono);font-style:normal;color:#e9e2ff}

/* ---------- o que escrevemos: nomes grandes + quadro ---------- */
.work .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.work-list{grid-column:1/7}
.work-list h2{margin:14px 0 40px}
.rows.dk a{color:var(--muted)}
.rows.dk p{color:var(--muted)}
.rows.dk a.on,.rows.dk a:hover,.rows.dk a:focus-visible{color:var(--ink)}
.rows.dk a.on .t span{color:var(--signal)}
.names{list-style:none}
.names a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:10px 0;text-decoration:none;color:var(--muted);transition:color .2s}
.names b{font:600 clamp(1.875rem,1rem + 2.6vw,3.5rem)/1.1 var(--display);letter-spacing:-.03em;transition:transform .3s var(--ease)}
.names span{font-size:.9375rem;white-space:nowrap}
.names a.on,.names a:hover,.names a:focus-visible{color:var(--ink)}
.names a.on b{transform:translateX(10px)}
.names a.on span{color:var(--signal)}
.frame{grid-column:8/13;position:sticky;top:14vh;align-self:start;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--lilac)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.frame img.fit{object-fit:contain;padding:12% 12% 0;object-position:50% 100%}
.frame img.on{opacity:1}
.inline-pic{display:none}

/* ---------- como funciona: comprovante ---------- */
.proc{background:var(--lilac);color:var(--paper-ink)}
.proc .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.proc-head{grid-column:1/6}
.proc-head .lab,.learn-list .lab,.rows a.on .t span{color:#4b2185}
.proc-head h2{margin-top:14px}
.proc-head p{margin-top:22px;max-width:36ch}
.slip-track{grid-column:7/12}
.stage-mini{display:none}
.slip{background:var(--paper);padding:40px 36px 64px;font-variant-numeric:tabular-nums;clip-path:polygon(0 0,100% 0,100% 100%,96% calc(100% - 14px),92% 100%,88% calc(100% - 14px),84% 100%,80% calc(100% - 14px),76% 100%,72% calc(100% - 14px),68% 100%,64% calc(100% - 14px),60% 100%,56% calc(100% - 14px),52% 100%,48% calc(100% - 14px),44% 100%,40% calc(100% - 14px),36% 100%,32% calc(100% - 14px),28% 100%,24% calc(100% - 14px),20% 100%,16% calc(100% - 14px),12% 100%,8% calc(100% - 14px),4% 100%,0 calc(100% - 14px))}
.slip h3{font:600 1.0625rem/1.2 var(--display);letter-spacing:-.01em;margin-top:30px}
.slip h3:first-child{margin-top:0}
.slip .r{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:1rem}
.slip .r i{flex:1;min-width:20px;border-bottom:4px dotted #b9b3d3;transform:translateY(-4px)}
.slip .r em{font-style:normal;color:var(--paper-muted);text-align:right}
.slip .total{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--paper-ink);color:var(--paper);margin:32px -36px 0;padding:14px 36px;font-size:1rem;font-weight:500}

/* ---------- quem somos ---------- */
.team .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.team-text{grid-column:1/6}
.team-text h2{margin-top:14px}
.team-text p{margin-top:20px;max-width:42ch}
.team-text .lead{margin-top:24px}
.people{grid-column:6/13;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-self:center}
.people figure{margin:0}
.people img{width:100%;height:auto;aspect-ratio:4/5;object-position:50% 30%;object-fit:cover;border-radius:var(--r-lg);background:var(--raised)}
.people figcaption{margin-top:12px;font:600 1.125rem/1.2 var(--display);letter-spacing:-.02em}
.people figcaption span{display:block;font:400 .9375rem var(--sans);letter-spacing:0;color:var(--muted);margin-top:4px}

/* ---------- cursos: lista com quadro fixo ---------- */
.learn{background:var(--paper);color:var(--paper-ink)}
.learn .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.learn-pic{grid-column:1/6;position:sticky;top:12vh;align-self:start;aspect-ratio:1/1;border-radius:var(--r-lg);background:#ecebf6;overflow:hidden}
.learn-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;opacity:0;transition:opacity .3s ease}
.learn-pic img.on{opacity:1}
.learn-pic img.cover{object-fit:cover;padding:0}
.learn-list{grid-column:7/13}

.learn-list h2{margin:14px 0 40px}
.rows{list-style:none}
.rows a{display:block;padding:18px 0;text-decoration:none;color:var(--paper-muted);transition:color .2s}
.rows .t{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rows b{font:600 clamp(1.25rem,1rem + .8vw,1.625rem)/1.2 var(--display);letter-spacing:-.02em}
.rows .t span{font-size:.9375rem;white-space:nowrap}
.rows p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);max-width:44ch;color:var(--paper-muted)}
.rows p>span{overflow:hidden}
.rows a.on,.rows a:hover,.rows a:focus-visible{color:var(--paper-ink)}
.rows a.on p{grid-template-rows:1fr;margin-top:8px}


/* ---------- contato ---------- */
.contact{background:var(--night);position:relative;overflow:hidden}
.contact .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.contact-text{grid-column:1/6}
.contact-text h2{margin-top:14px}
.contact-text p{margin-top:20px;max-width:38ch}
.contact-text ul{list-style:none;margin-top:32px;display:grid;gap:10px}
.contact-text ul a{text-decoration:none;color:var(--accent)}.contact-text ul a:hover{color:var(--ink)}
.card{grid-column:7/13;background:var(--raised);border-radius:var(--r-lg);padding:clamp(28px,3vw,44px)}
.card form{display:grid;gap:12px}
.card label{font-size:.9375rem;color:var(--muted)}
.card input{width:100%;height:54px;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:400 1.0625rem var(--sans);padding:0 16px}
.card input:focus{border-color:var(--accent);outline:none}
.card .btn{width:100%;margin-top:8px;min-height:56px}
.card small{font-size:.875rem;color:var(--muted);line-height:1.5}

/* ---------- rodapé ---------- */
.foot{padding:var(--gap)}
.foot-pic{background:var(--lilac);border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden}
.foot-pic img{width:min(70%,440px)}
.foot-menu{background:var(--raised);border-radius:var(--r-lg);padding:clamp(28px,3.5vw,48px)}
.foot-menu>img{width:96px;max-width:none;height:auto;align-self:flex-start;flex:none}
.foot-top{display:grid;grid-template-columns:1fr 3fr;gap:32px;align-items:start}
.foot-top nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:.9375rem}
.foot-top b{display:block;font-weight:600;margin-bottom:6px}
.foot-top nav a{display:block;text-decoration:none;color:var(--muted);padding:3px 0;transition:color .2s}.foot-top nav a:hover{color:var(--ink)}
.legal{margin-top:36px;font-size:.8125rem;color:var(--muted)}

/* ---------- entrada ---------- */
@media (prefers-reduced-motion:no-preference){
 .js [data-in]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
 .js [data-in].in{opacity:1;transform:none}
 .stage::before{animation:glow 9s ease-in-out infinite alternate}
 @keyframes glow{to{transform:translate(-18%,22%) scale(1.15)}}
 .wave.playing i.on:last-of-type{animation:none}
}

/* ---------- tablet e celular ---------- */
@media (max-width:980px){
 .hero{grid-template-columns:1fr;min-height:0}
 .listen .wrap{grid-template-columns:1fr}.listen-text,.stage{grid-column:auto}.visual{min-height:56svh}
 .tracks{margin-top:24px}
 .work .wrap,.proc .wrap,.team .wrap,.learn .wrap,.contact .wrap{grid-template-columns:1fr}
 .work-list,.frame,.proc-head,.slip-track,.slip,.team-text,.people,.learn-pic,.learn-list,.contact-text,.card{grid-column:auto}
 .frame,.learn-pic{display:none}
 .inline-pic{display:block;width:100%;height:auto;aspect-ratio:1/1;flex:none;object-fit:cover;border-radius:var(--r-md);background:var(--lilac);margin:22px 0 10px}
 .inline-pic.fit{object-fit:contain;padding:16px 16px 0;object-position:50% 100%}
 .names a{flex-direction:column;gap:4px;color:var(--ink);padding:0 0 36px}
 .names a.on b{transform:none}
 .names,.rows{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*clamp(16px,4vw,56px));padding-inline:clamp(16px,4vw,56px);scroll-padding-inline:clamp(16px,4vw,56px)}
 .names::-webkit-scrollbar,.rows::-webkit-scrollbar{display:none}
 .work-list,.learn-list{min-width:0}
 .names li,.rows li{flex:0 0 84%;scroll-snap-align:start}
 .names a,.rows a{padding:0 0 8px}
 .team-text{position:static}
 .rows a{color:var(--paper-ink);padding:0 0 32px}.rows .inline-pic{background:#ecebf6;margin-top:0;height:auto;aspect-ratio:1/1;max-height:none}.rows .inline-pic.fit{padding:8%}.rows p{grid-template-rows:1fr;margin-top:8px}
}
@media (max-width:600px){
 .bar nav{display:none}
 .sheet{padding:22px 20px 40px}
 .hero h1{font-size:clamp(2.75rem,13vw,4rem)}
 .hero-cta .btn{width:100%}
 .play{width:64px;height:64px}
 .wave{height:84px;gap:3px}
 .people{grid-template-columns:repeat(3,1fr);gap:10px}.people img{border-radius:var(--r-md)}.people figcaption{font-size:.9375rem;margin-top:8px}.people figcaption span{font-size:.8125rem}
 .slip{padding:28px 20px 56px}.slip .total{margin-inline:-20px;padding-inline:20px}
 .foot-top,.foot-top nav{grid-template-columns:1fr}
}

/* hero: frase grande e onda da marca */
.hero{grid-template-columns:1fr}
.sheet{min-height:calc(100svh - 2*var(--gap))}
.hero-copy{margin-block:auto;padding-top:48px}
.hero h1{max-width:none;font-size:clamp(3.25rem,1rem + 7vw,8.25rem)}
.hero .lead{max-width:54ch}
.bigwave{display:flex;align-items:flex-end;gap:6px;height:clamp(72px,14vh,128px);margin-top:48px}
.bigwave i{flex:1;border-radius:var(--pill);background:var(--purple);opacity:.45;transform-origin:50% 100%}
.bigwave i:nth-child(6n){background:var(--signal);opacity:.6}
@media (prefers-reduced-motion:no-preference){.bigwave i{animation:breathe 3.2s ease-in-out infinite alternate}.bigwave i:nth-child(3n){animation-delay:-1.1s}.bigwave i:nth-child(3n+1){animation-delay:-2.3s}@keyframes breathe{from{transform:scaleY(.82)}to{transform:scaleY(1)}}}
@media (max-width:600px){.bigwave{gap:3px;height:64px;margin-top:36px}.bigwave i:nth-child(n+41){display:none}}
 @media (max-width:980px){.rows .t{flex-direction:column;gap:4px}.rows.dk a{color:var(--ink)}.rows.dk .inline-pic{background:var(--raised)}}

/* como funciona: o comprovante vai sendo impresso com a rolagem */
.stage-now{margin-top:40px;max-width:34ch}
.stage-now span{font:600 1.375rem/1.2 var(--display);letter-spacing:-.02em;color:var(--purple)}
.prog{margin-top:12px;height:8px;border-radius:var(--pill);background:rgba(18,14,34,.12);overflow:hidden}
.prog i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--purple);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s var(--ease)}
.slip .pr{max-height:5em;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease)}
.slip .pr.wait{opacity:0;transform:translateY(-8px);max-height:0;margin-top:0;margin-bottom:0}
.slip .total.pr.wait{padding-block:0}
.slip-track,.slip-stick{min-width:0}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
 .proc{height:300vh;padding:0}
 .proc .wrap{position:sticky;top:0;height:100svh;align-items:start;padding-top:14vh}
}
@media (max-width:980px){.stage-now{display:none}}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
 .proc-head p{display:none}
 .proc{height:210vh;padding:0}
 .proc .wrap{position:sticky;top:0;height:100svh;align-content:start;gap:10px;padding-top:28px}
 .proc-head h2{font-size:2rem;margin-top:6px}
 .stage-mini{display:block;background:var(--lilac);padding:4px 2px 12px}
 .stage-mini span{display:none}
 .stage-mini .prog{margin-top:0}
 .slip{padding:20px 18px 40px}
 .slip h3{margin-top:16px;font-size:1rem}
 .slip .r{margin-top:4px;font-size:.9375rem}
 .slip .total{margin:18px -18px 0;padding:10px 18px;font-size:.9375rem}
}
.pbar nav a.btn,.pbar nav a.btn:hover{color:var(--on-signal)}