:root{
  --bg:#050c17; --bg2:#0a1b30; --ink:#f4f6f7; --mute:#a9b7c2; --line:rgba(255,255,255,.12);
  --orange:#f4803c; --teal:#0b95a5; --blue:#10507f;
  --glass:rgba(12,28,48,.55);
  --depth:700px;
  --ff:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;background:var(--bg);color-scheme:dark}
body{font-family:var(--ff);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- fundo fixo ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 45%,#0e2a47 0%,#081526 50%,var(--bg) 100%)}
.bg__glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.35;will-change:transform}
.bg__glow--a{background:var(--orange);left:55%;top:-25%;opacity:.22}
.bg__glow--b{background:var(--teal);left:-20%;top:40%;opacity:.28}
.bg__mark{position:absolute;left:50%;top:50%;width:min(120vmin,1100px);opacity:.035;transform:translate(-50%,-50%);filter:blur(2px);will-change:transform}
.bg__grid{position:absolute;inset:0;opacity:.5;background:
  repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),rgba(255,255,255,.035) calc(100%/12 - 1px) calc(100%/12));
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent)}
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:30;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal),var(--orange))}

/* ---------- topo e navegação ---------- */
.top{position:fixed;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,48px)}
.top__brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13px;letter-spacing:.14em}
.top__brand b{font-weight:500;color:var(--mute)}
.dots{position:fixed;z-index:20;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.dots ol{list-style:none;display:grid;gap:14px}
.dots button{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;background:none;border:0;color:var(--mute);font:600 11px var(--ff);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:4px}
.dots button span{opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none}
.dots button:hover span,.dots button[aria-current="true"] span{opacity:1;transform:none}
.dots button i{width:9px;height:9px;border-radius:50%;border:2px solid var(--mute);transition:.25s}
.dots button[aria-current="true"] i{background:var(--orange);border-color:var(--orange);box-shadow:0 0 14px var(--orange);transform:scale(1.25)}
.dots button[aria-current="true"]{color:var(--ink)}

/* ---------- cena 3D ---------- */
.stage{position:fixed;inset:0;z-index:5;perspective:1000px;perspective-origin:50% 45%;overflow:hidden;pointer-events:none}
.layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:84px clamp(20px,7vw,110px) 40px;
  opacity:0;will-change:transform,opacity,filter;backface-visibility:hidden;pointer-events:none}
.layer.is-active{pointer-events:auto}
.wrap{width:min(1080px,100%)}
.center{text-align:center}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
h2{font-size:clamp(28px,5vw,60px);line-height:1.04;font-weight:800;letter-spacing:-.02em;max-width:18ch}
.center h2{margin-inline:auto}
.lead{margin-top:16px;max-width:52ch;font-size:clamp(15px,1.6vw,19px);line-height:1.55;color:var(--mute)}
.center .lead{margin-inline:auto}

/* entrada escalonada do conteúdo da camada ativa */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.is-active .rise{opacity:1;transform:none}
.is-active .rise:nth-child(2){transition-delay:.06s}.is-active .rise:nth-child(3){transition-delay:.12s}
.is-active .rise:nth-child(4){transition-delay:.2s}.is-active .rise:nth-child(5){transition-delay:.28s}

/* ---------- hero ---------- */
.hero{display:grid;justify-items:center;text-align:center;gap:clamp(10px,2.4vh,24px)}
.hero__logo{height:min(46vh,430px);width:auto;aspect-ratio:1;object-fit:contain;
  --p:0;-webkit-mask-image:linear-gradient(52deg,#000 calc(var(--p)*1% - 15%),transparent calc(var(--p)*1%));mask-image:linear-gradient(52deg,#000 calc(var(--p)*1% - 15%),transparent calc(var(--p)*1%));
  animation:draw 2.6s cubic-bezier(.5,0,.2,1) .3s forwards;filter:drop-shadow(0 0 40px rgba(244,128,60,.18))}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@keyframes draw{to{--p:130}}
.hero__tag{font-size:clamp(17px,2.4vw,28px);font-weight:500;max-width:30ch;line-height:1.35}
.hero__tag em{font-style:normal;color:var(--orange);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.center .hero__cta{margin-top:30px}
.hero .hero__cta{margin-top:0}
.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);opacity:.8}
.hint i{width:1px;height:34px;background:linear-gradient(var(--orange),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border-radius:999px;font:700 13px var(--ff);letter-spacing:.1em;text-transform:uppercase;color:#07101c;border:0;cursor:pointer;
  background:linear-gradient(120deg,#ff9a4d,var(--orange));box-shadow:0 10px 30px -10px rgba(244,128,60,.7);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(244,128,60,.85)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.btn--small{padding:10px 18px;font-size:11px}

/* ---------- cartões de áudio ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(22px,4vh,40px)}
.card{position:relative;padding:18px;border-radius:20px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;gap:14px;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(11,149,165,.6);transform:translateY(-3px)}
.card__row{display:flex;align-items:center;gap:14px}
.play{flex:none;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),#ff9a4d);box-shadow:0 8px 22px -8px rgba(244,128,60,.8)}
.play svg{width:20px;height:20px;fill:#07101c}
.play .i-pause{display:none}.card.is-playing .i-pause{display:block}.card.is-playing .i-play{display:none}
.card h3{font-size:16px;font-weight:700;line-height:1.2}
.card p{font-size:12px;color:var(--mute);margin-top:3px;letter-spacing:.04em}
.wave{display:flex;align-items:center;gap:3px;height:34px}
.wave i{flex:1;border-radius:3px;background:linear-gradient(var(--teal),var(--blue));opacity:.55;height:var(--h);transform-origin:center}
.card.is-playing .wave i{opacity:1;animation:bar .9s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.07s)}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--orange))}
.time{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- paginação dos players ---------- */
.cards{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.cards.is-in{opacity:1;transform:none}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;font-size:12px;letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.pager[hidden]{display:none}
.pager button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(10px);transition:.2s}
.pager button:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.pager button:disabled{opacity:.3;cursor:default}
.bar{cursor:pointer;padding:6px 0;background-clip:content-box}
.bar i{border-radius:3px}

/* ---------- sites ---------- */
.sites{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(22px,4vh,40px)}
.site{border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);transition:.25s}
.site:hover{border-color:rgba(244,128,60,.6);transform:translateY(-3px)}
.site__shot{aspect-ratio:16/10;position:relative;background:linear-gradient(135deg,#12365a,#0a1b30 60%,#1b2a3f)}
.site__shot::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:rgba(255,255,255,.06)}
.site__shot::after{content:"prévia em breve";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.site__meta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.site__meta span{font-size:11px;color:var(--orange);letter-spacing:.14em;text-transform:uppercase}
.foot{margin-top:48px;font-size:12px;color:var(--mute)}

/* ---------- rolagem real (1 tela por camada) ---------- */
.rail{position:relative;z-index:1;pointer-events:none}
.rail i{display:block;height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}

/* ---------- celular: menos profundidade, mesmo efeito ---------- */
@media (max-width:820px){
  :root{--depth:520px}
  .cards,.sites{grid-template-columns:1fr}
  .sites .site:nth-child(n+3){display:none}
  .layer{align-items:flex-start;padding-top:96px}
  .layer--hero{align-items:center;padding-top:60px}
  .dots{right:6px}.dots button span{display:none}
  .top__brand span{display:none}
  h2{font-size:clamp(26px,8vw,40px)}
  .card{padding:14px}
  .wave{height:26px}
}
@media (max-height:640px){.hero__logo{height:34vh}.cards{margin-top:16px}}

/* ---------- movimento reduzido: vira página normal ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
  .stage{position:static;perspective:none;overflow:visible;pointer-events:auto}
  .layer{position:relative;min-height:100vh;opacity:1!important;transform:none!important;filter:none!important;pointer-events:auto}
  .rail{display:none}
  .rise{opacity:1;transform:none;transition:none}
  .hero__logo{animation:none;-webkit-mask-image:none;mask-image:none}
  .hint{display:none}
}

/* notebooks de tela baixa: players um pouco mais compactos para caber 3x2 + setas */
@media (max-height:780px) and (min-width:821px){
  .layer{padding-top:70px;padding-bottom:24px}
  .card{padding:13px;gap:9px}.play{width:44px;height:44px}.wave{height:24px}
  h2{font-size:clamp(26px,4vw,46px)}.lead{margin-top:10px}.cards{margin-top:18px}.pager{margin-top:12px}
}

.phone{margin-top:22px;font-size:14px;letter-spacing:.08em}
.phone a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--orange)}
.phone a:hover{color:var(--orange)}