:root{
  --bg:#11001f;
  --bg2:#250044;
  --purple:#6d2de2;
  --purple2:#9d4dff;
  --gold:#ffcc35;
  --gold2:#ffe48b;
  --ink:#221833;
  --muted:#6d647c;
  --card:rgba(255,255,255,.94);
  --glass:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.18);
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 20%, rgba(157,77,255,.35), transparent 28rem),
    radial-gradient(circle at 82% 12%, rgba(255,204,53,.22), transparent 24rem),
    linear-gradient(135deg,#070010 0%,#22003f 50%,#050008 100%);
  color:white;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25));
}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.bg-orb{position:fixed;border-radius:999px;filter:blur(26px);opacity:.35;pointer-events:none;animation:floatOrb 12s ease-in-out infinite alternate}
.orb-a{width:270px;height:270px;background:#8b35ff;left:-80px;top:160px}
.orb-b{width:210px;height:210px;background:#ffca2f;right:-50px;top:380px;animation-delay:2s}
.orb-c{width:190px;height:190px;background:#1ea7ff;left:55%;bottom:30px;animation-delay:4s}
@keyframes floatOrb{to{transform:translate3d(40px,-50px,0) scale(1.18)}}
.notes span{position:fixed;bottom:-60px;color:rgba(255,255,255,.28);font-size:clamp(1.4rem,3vw,3rem);animation:rise 14s linear infinite;pointer-events:none;text-shadow:0 0 16px rgba(255,204,53,.45)}
.notes span:nth-child(1){left:8%;animation-delay:0s}.notes span:nth-child(2){left:24%;animation-delay:4s}.notes span:nth-child(3){left:40%;animation-delay:2s}.notes span:nth-child(4){left:58%;animation-delay:6s}.notes span:nth-child(5){left:74%;animation-delay:1s}.notes span:nth-child(6){left:90%;animation-delay:5s}
@keyframes rise{to{transform:translateY(-115vh) rotate(25deg);opacity:0}}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px clamp(16px,4vw,54px);
  background:rgba(20,0,35,.76);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:900;letter-spacing:.2px}
.brand img{height:42px;width:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
.main-nav{display:flex;gap:7px;align-items:center}
.main-nav a{color:white;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:800;font-size:.92rem;opacity:.86;transition:.25s}
.main-nav a:hover,.main-nav a.active{background:rgba(255,204,53,.16);color:var(--gold);opacity:1;box-shadow:inset 0 0 0 1px rgba(255,204,53,.25)}
.menu-toggle{display:none;border:0;background:rgba(255,255,255,.12);color:white;border-radius:13px;padding:10px 13px;font-size:1.2rem}
main{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;padding:0 clamp(16px,3vw,34px)}
.lesson{
  min-height:min(860px,calc(100svh - 68px));
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(62px,8vw,110px) 0;
  opacity:.45;transform:translateY(40px) scale(.985);
  transition:opacity .65s ease, transform .65s ease;
  scroll-margin-top:78px;
}
.lesson.visible{opacity:1;transform:translateY(0) scale(1)}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:42px;align-items:center}
.eyebrow{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:.84rem;margin:0 0 12px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3rem,8vw,7.6rem);line-height:.88;letter-spacing:-.08em;margin-bottom:24px;text-shadow:0 10px 60px rgba(109,45,226,.72)}
h2{font-size:clamp(2rem,5vw,4.5rem);line-height:1;letter-spacing:-.055em;margin-bottom:16px;color:white;text-shadow:0 8px 40px rgba(109,45,226,.55)}
h3{font-size:1.4rem;margin-bottom:8px;color:#2d0d45}
p{line-height:1.55}
.subtitle{font-size:clamp(1.1rem,2vw,1.45rem);color:rgba(255,255,255,.86);max-width:760px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 20px;border-radius:999px;text-decoration:none;font-weight:900;transition:.24s;box-shadow:0 16px 32px rgba(0,0,0,.18)}
.btn.primary{background:linear-gradient(135deg,var(--gold),#ff9d24);color:#2a0a00}.btn.primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(255,204,53,.28)}
.btn.ghost{background:rgba(255,255,255,.11);color:white;border:1px solid rgba(255,255,255,.24)}.btn.ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.gold-tip,.alert,.dark-tip{
  border:1px solid rgba(255,204,53,.5);background:linear-gradient(135deg,rgba(255,204,53,.2),rgba(255,204,53,.07));
  padding:18px 20px;border-radius:20px;color:#fff8dc;font-weight:700;box-shadow:0 18px 50px rgba(0,0,0,.18)
}
.hero-card,.remote-image-card,.info-card,.method-card,.menu-grid article,.volume-highlight,.vote-card,.accordion details,.finish-card{
  background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6)
}
.hero-card{padding:34px;text-align:center;position:relative;overflow:hidden;transform-style:preserve-3d}
.hero-card::before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 20% 0%,rgba(255,204,53,.3),transparent 34%),radial-gradient(circle at 90% 30%,rgba(109,45,226,.22),transparent 35%);pointer-events:none}
.hero-card img{position:relative;max-width:100%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.16))}
.mini-flow{position:relative;display:grid;gap:10px;margin-top:22px}.mini-flow span{background:#f4edff;border:1px solid #e2d0ff;color:#3d1462;border-radius:16px;padding:13px 14px;font-weight:800}
.section-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:30px}.section-head p:not(.eyebrow){color:rgba(255,255,255,.82);font-size:1.08rem;max-width:850px}
.step-badge{flex:0 0 auto;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--gold),#ffad21);color:#2b1500;display:grid;place-items:center;font-weight:1000;font-size:1.4rem;box-shadow:0 14px 36px rgba(255,204,53,.3)}
.cards{display:grid;gap:18px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}
.info-card,.method-card{padding:24px;transition:.25s}.info-card:hover,.method-card:hover{transform:translateY(-6px) rotate(.3deg)}.icon{font-size:2.2rem;margin-bottom:12px}.info-card p,.method-card p,.method-card li,.menu-grid span{color:#4a405c}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.timeline div,.flow-row div,.vote-steps div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:18px;backdrop-filter:blur(10px)}
.timeline b,.flow-row span,.vote-steps b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--gold);color:#351900;margin-bottom:10px;font-weight:1000}.timeline span,.flow-row p,.vote-steps span{color:rgba(255,255,255,.86)}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.check-grid label{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:18px;cursor:pointer;backdrop-filter:blur(12px);font-weight:800}.check-grid input{width:24px;height:24px;accent-color:var(--gold)}.check-grid label:has(input:checked){background:rgba(255,204,53,.17);border-color:rgba(255,204,53,.48);text-decoration:line-through;text-decoration-thickness:2px}
.remote-layout{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(270px,.55fr);gap:20px;align-items:stretch}.remote-image-card{padding:16px;background:#12001f}.remote-image-card img{display:block;width:100%;height:auto;border-radius:22px}.key-list{display:grid;gap:10px}.key-pill{text-align:left;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.12);color:white;border-radius:18px;padding:14px 16px;cursor:pointer;transition:.22s}.key-pill b{display:block;color:var(--gold);font-size:1.05rem}.key-pill span{color:rgba(255,255,255,.82)}.key-pill:hover,.key-pill.active{background:linear-gradient(135deg,rgba(255,204,53,.28),rgba(157,77,255,.18));transform:translateX(5px)}
.method-title{display:flex;align-items:center;gap:12px}.method-title span{font-size:2rem}.method-card ol{padding-left:22px}.method-card li{margin:11px 0}.method-card.neon{background:linear-gradient(135deg,#fff,#f7efff);border-color:rgba(157,77,255,.28)}
.flow-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.flow-row b{display:block;color:white}.flow-row div{min-height:150px;transition:.24s}.flow-row div:hover{transform:translateY(-7px);background:rgba(255,204,53,.16)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.menu-grid article{padding:20px;display:grid;gap:8px}.menu-grid b{font-size:1.1rem;color:#361054}.menu-grid article:hover{outline:2px solid rgba(255,204,53,.45)}
.volume-highlight{display:grid;grid-template-columns:1fr minmax(240px,.9fr) 1fr;gap:22px;align-items:center;padding:24px}.volume-highlight h3{font-size:2rem;color:#5a20b8}.volume-highlight img{width:100%;border-radius:20px;box-shadow:0 18px 46px rgba(0,0,0,.18)}.volume-highlight li{margin:10px 0;color:#4a405c}.volume-highlight ul{padding-left:20px}.volume-highlight p{color:#4a405c}
.vote-card{display:grid;grid-template-columns:280px 1fr;gap:28px;padding:26px;align-items:center}.phone-mock{background:linear-gradient(180deg,#23003f,#070010);border:8px solid #1d1229;border-radius:34px;min-height:430px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 22px 44px rgba(0,0,0,.25)}.phone-top{width:80px;height:8px;background:rgba(255,255,255,.25);border-radius:999px;margin-bottom:44px}.score{font-size:5rem;font-weight:1000;color:var(--gold);text-shadow:0 0 30px rgba(255,204,53,.45)}.phone-mock button{border:0;background:var(--gold);color:#2c1700;font-weight:1000;border-radius:999px;padding:13px 20px;margin-top:20px}.vote-steps{display:grid;gap:12px}.vote-steps div{color:white}.script-box{margin-top:16px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:22px}.script-box h3{color:var(--gold)}.script-box p{font-size:1.1rem;color:white}
.dark-tip{background:linear-gradient(135deg,#5b2300,#2c1000);border-color:rgba(255,204,53,.45);font-size:1.06rem}
.accordion{display:grid;gap:12px}.accordion details{padding:0;overflow:hidden}.accordion summary{padding:18px 20px;cursor:pointer;font-weight:950;color:#37104f;list-style:none}.accordion summary::after{content:"+";float:right;font-size:1.4rem;color:#6d2de2}.accordion details[open] summary::after{content:"–"}.accordion p{padding:0 20px 20px;margin:0;color:#4a405c}
.finish-card{text-align:center;padding:30px}.finish-card img{width:min(420px,80%)}.finish-card p{color:#5e536d;font-weight:800}.checklist-save{grid-template-columns:repeat(2,1fr)}
.progress-panel{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:10px}.progress-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--progress,0%),rgba(255,255,255,.16) 0);box-shadow:0 16px 40px rgba(0,0,0,.26)}.progress-ring span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#19002d;color:white;font-weight:1000;font-size:.86rem}.progress-panel button{width:48px;height:48px;border:0;border-radius:16px;background:rgba(255,255,255,.14);color:white;font-weight:1000;font-size:1.3rem;backdrop-filter:blur(14px);cursor:pointer}.progress-panel button:hover{background:var(--gold);color:#301600}
footer{position:relative;z-index:1;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:30px;color:rgba(255,255,255,.75)}footer a{color:var(--gold);font-weight:900;text-decoration:none}
@media (max-width:920px){
  .main-nav{position:fixed;left:12px;right:12px;top:70px;display:none;grid-template-columns:repeat(2,1fr);background:rgba(20,0,35,.95);padding:14px;border-radius:22px;border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow)}
  .main-nav.open{display:grid}.menu-toggle{display:block}.brand span{display:none}
  .hero,.remote-layout,.vote-card,.volume-highlight{grid-template-columns:1fr}.cards.three,.cards.two,.timeline,.flow-row,.menu-grid,.check-grid,.checklist-save{grid-template-columns:1fr}
  .lesson{min-height:auto;padding:58px 0}.section-head{flex-direction:column}.progress-panel{right:10px;bottom:10px}.progress-ring{width:56px;height:56px}.progress-ring span{width:44px;height:44px;font-size:.78rem}.progress-panel button{display:none}
}
@media (max-width:560px){
  .topbar{padding:10px 14px}.brand img{height:34px}main{padding:0 14px}h1{font-size:3.3rem}h2{font-size:2.25rem}.hero-card,.info-card,.method-card,.volume-highlight,.vote-card,.finish-card{border-radius:22px}.phone-mock{min-height:330px}.score{font-size:4rem}.remote-image-card{padding:10px}.gold-tip,.alert,.dark-tip{padding:15px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.lesson{opacity:1;transform:none}}

/* Correção de contraste - Pontuação real pela plateia */
#plateia .vote-card{
  background:linear-gradient(135deg,#160022 0%,#31005a 52%,#12001f 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,204,53,.42) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
#plateia .phone-mock{
  background:linear-gradient(180deg,#2a004c 0%,#0b0014 100%) !important;
  color:#ffffff !important;
  border-color:#0b0014 !important;
}
#plateia .phone-mock p,
#plateia .phone-mock b{
  color:#ffffff !important;
}
#plateia .score{
  color:#ffcc35 !important;
}
#plateia .phone-mock button{
  background:linear-gradient(135deg,#ffcc35,#ff9d24) !important;
  color:#2c1700 !important;
  border:0 !important;
  box-shadow:0 10px 28px rgba(255,204,53,.26) !important;
}
#plateia .vote-steps div{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#ffffff !important;
}
#plateia .vote-steps span{
  color:#ffffff !important;
}
#plateia .vote-steps b{
  background:#ffcc35 !important;
  color:#351900 !important;
}
#plateia .script-box{
  background:linear-gradient(135deg,#3d0a67,#1c002d) !important;
  border:1px solid rgba(255,204,53,.38) !important;
  color:#ffffff !important;
}
#plateia .script-box h3{
  color:#ffcc35 !important;
}
#plateia .script-box p{
  color:#ffffff !important;
}


/* Ajuste visual da seção Pausar/Pular/Furar fila - mesmo padrão branco de TOM e VELOCIDADE */
#pausa .pause-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  padding:24px;
  margin-top:8px;
  background:var(--card);
  color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.6);
}
#pausa .pause-card{
  background:linear-gradient(135deg,#ffffff,#f7f2ff);
  border:1px solid rgba(109,45,226,.16);
  border-radius:22px;
  padding:22px;
  min-height:142px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#pausa .pause-card.main{
  grid-column:1 / -1;
  min-height:auto;
  background:linear-gradient(135deg,#fff8d9,#fff3aa);
  border-color:rgba(255,204,53,.65);
}
#pausa .pause-card b{
  color:#5a20b8;
  font-size:1.45rem;
  line-height:1.1;
  letter-spacing:-.02em;
}
#pausa .pause-card.main b{
  color:#351900;
}
#pausa .pause-card span{
  color:#4a405c;
  line-height:1.45;
  font-weight:650;
}
#pausa .pause-card strong{
  color:#2d0d45;
}
#pausa .how-to-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:16px 0 14px;
}
#pausa .how-to-row div{
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.20);
}
#pausa .how-to-row b{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--gold);
  color:#351900;
  margin-bottom:10px;
  font-weight:1000;
}
#pausa .how-to-row span{
  display:block;
  color:#4a405c;
  line-height:1.42;
  font-weight:650;
}
#pausa .how-to-row strong{
  color:#2d0d45;
}
#pausa .alert{
  margin-top:0;
}


@media (max-width:920px){
  #pausa .pause-panel,
  #pausa .how-to-row{
    grid-template-columns:1fr;
  }
  #pausa .pause-card.main{
    grid-column:auto;
  }
}


/* Ajustes - Download de músicas e Modo Online VIP */
.kb-download-box,
.kb-online-box{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.kb-download-box h3,
.kb-online-box h3{
  color:#5a20b8;
  letter-spacing:.02em;
}
.kb-download-box p,
.kb-online-box p{
  color:#4a405c;
}
.kb-download-box li,
.kb-online-box li{
  color:#4a405c;
}
@media (max-width:920px){
  .kb-download-box,
  .kb-online-box{
    grid-template-columns:1fr;
  }
}