:root {
  --background:#0b0a08;
  --foreground:#ece5d8;
  --card:rgba(18,16,13,.72);
  --primary:#c4a67a;
  --primary-foreground:#14110d;
  --secondary:rgba(236,229,216,.08);
  --muted-foreground:#a49b8b;
  --destructive:#a33a2c;
  --border:rgba(196,166,122,.22);
  --font-display:"Barlow Condensed","Oswald",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Barlow",ui-sans-serif,system-ui,sans-serif
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--background)}
body{
  font-family:var(--font-body);
  color:var(--foreground);
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:.02em}
button,a,input{font:inherit}

.bg-video{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-30
}
.bg-fallback{
  position:fixed;inset:0;z-index:-40;
  background:url("/assets/twd/poster.jpg") center/cover no-repeat
}
.overlay-gradient{
  position:fixed;inset:0;z-index:-20;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,5,.42) 0%,rgba(8,7,5,.58) 45%,rgba(8,7,5,.84) 100%)
}
.overlay-noise{
  position:fixed;inset:0;z-index:-10;pointer-events:none;
  box-shadow:inset 0 0 22vw 8vw rgba(0,0,0,.65)
}
.overlay-noise:after{
  content:"";position:absolute;inset:0;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")
}
.sound-toggle{
  position:fixed;bottom:1rem;right:1rem;z-index:50;
  display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(11,10,8,.6);color:var(--foreground);
  backdrop-filter:blur(6px);cursor:pointer;transition:.2s
}
.sound-toggle:hover{background:rgba(11,10,8,.85)}
.main{position:relative;height:100vh;height:100dvh;overflow:hidden}
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding:1.5rem;text-align:center
}
.logo{
  height:auto;user-select:none;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.75))
}
.logo--hero{width:clamp(140px,20vw,280px)}
.logo--compact{width:clamp(72px,9vw,104px);margin-bottom:.75rem;flex-shrink:0}
.hero h1{
  margin-top:1.25rem;max-width:48rem;
  font-size:clamp(1.85rem,5vw,3rem);font-weight:700;text-transform:uppercase;
  line-height:.95;letter-spacing:.03em
}
.hero h1 .accent{color:var(--primary)}
.hero p.lead{
  margin-top:1rem;max-width:32rem;font-size:.95rem;
  color:rgba(236,229,216,.75)
}
.hero .tagline{
  margin-top:1rem;font-size:.625rem;text-transform:uppercase;
  letter-spacing:.3em;color:var(--muted-foreground)
}
.member-access{
  margin-top:.95rem;color:rgba(236,229,216,.62);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(196,166,122,.28);
  padding-bottom:3px
}
.member-access:hover{color:var(--primary);border-color:var(--primary)}

.wizard{
  display:flex;flex-direction:column;align-items:center;
  height:100%;padding:1rem
}
.wizard-inner{
  display:flex;flex-direction:column;flex:1;
  width:100%;max-width:42rem;overflow:hidden
}
.stepbar{display:flex;align-items:flex-start;gap:.375rem}
.stepbar>div{flex:1}
.stepbar .bar{
  height:3px;width:100%;background:rgba(236,229,216,.15);
  transition:background-color .3s
}
.stepbar .bar.on{background:var(--primary)}
.stepbar .lbl{
  display:none;margin-top:.5rem;font-size:.625rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted-foreground)
}
.stepbar .lbl.cur{color:var(--primary)}
.card{
  margin-top:1rem;flex:1;overflow-y:auto;
  border:1px solid var(--border);background:var(--card);
  backdrop-filter:blur(12px);padding:1rem
}
.eyebrow{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.35em;
  color:var(--primary)
}
.card h2{
  margin-top:.5rem;font-size:clamp(1.4rem,3.5vw,1.875rem);
  font-weight:700;text-transform:uppercase;line-height:1.1
}
.card p.desc{
  margin-top:.75rem;font-size:.875rem;color:rgba(236,229,216,.75)
}
.feature-list{
  margin-top:1.25rem;display:flex;flex-direction:column;gap:1rem
}
.feature{
  display:flex;gap:1rem;border-left:2px solid rgba(196,166,122,.6);
  padding-left:1rem
}
.feature svg{flex-shrink:0;color:var(--primary);margin-top:2px}
.feature h3{
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em
}
.feature p{font-size:.875rem;color:rgba(236,229,216,.7)}
.rules{
  margin-top:1rem;list-style:none;display:flex;flex-direction:column;gap:.62rem
}
.rules li{
  display:flex;gap:.75rem;font-size:.875rem;color:rgba(236,229,216,.82);
  line-height:1.45
}
.rules .num{font-family:ui-monospace,monospace;color:var(--primary)}
.accept{
  margin-top:1.25rem;display:flex;align-items:flex-start;gap:.75rem;
  border:1px solid var(--border);background:var(--secondary);
  padding:.85rem;cursor:pointer;font-size:.875rem;
  color:rgba(236,229,216,.85)
}
.accept input{
  accent-color:var(--primary);width:1rem;height:1rem;margin-top:2px;flex:none
}
.read-status{
  margin-top:1rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem .8rem;border:1px solid rgba(196,166,122,.15);
  background:rgba(0,0,0,.16);
  color:var(--muted-foreground);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase
}
.read-status strong{color:var(--primary);font-weight:600}
.read-status.done strong{color:#d7c19e}
.discord-final{text-align:center;padding:1.2rem .25rem}
.discord-final .icon{
  margin:0 auto;display:grid;place-items:center;width:4rem;height:4rem;
  border:1px solid rgba(196,166,122,.58);
  background:rgba(196,166,122,.1);color:var(--primary)
}
.discord-final h2{
  margin-top:1.3rem;font-size:clamp(1.7rem,4vw,2.2rem);
  text-transform:uppercase
}
.discord-final p{
  margin:.9rem auto 0;max-width:30rem;color:rgba(236,229,216,.74);
  font-size:.9rem;line-height:1.55
}
.discord-final .rules-ok{
  margin:1rem auto 0;display:inline-flex;align-items:center;gap:.45rem;
  color:var(--primary);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.09em
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  cursor:pointer;border:none;text-transform:uppercase;
  text-decoration:none;transition:.2s
}
.btn-primary{
  background:var(--primary);color:var(--primary-foreground);
  font-weight:700;letter-spacing:.16em;font-size:.875rem;
  min-height:2.5rem;padding:.65rem 1.5rem
}
.btn-primary:hover{background:rgba(196,166,122,.9)}
.btn-primary:disabled{
  cursor:not-allowed;opacity:.38;background:var(--primary);
  filter:grayscale(.2)
}
.btn-hero{margin-top:1.5rem;min-height:3rem;padding:.75rem 2rem;letter-spacing:.18em}
.btn-discord{margin-top:1.5rem;min-height:3rem;padding:.8rem 2rem}
.btn-ghost{
  background:transparent;color:var(--muted-foreground);
  letter-spacing:.12em;min-height:2.5rem;padding:.65rem 1rem
}
.btn-ghost:hover{color:var(--foreground)}
.nav{
  margin-top:1.5rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  border-top:1px solid var(--border);padding-top:1rem
}
.toast{
  position:fixed;top:1rem;right:1rem;z-index:60;max-width:22rem;
  padding:.75rem 1rem;border:1px solid var(--destructive);
  background:rgba(18,16,13,.95);color:var(--foreground);
  font-size:.875rem;opacity:0;transform:translateY(-8px);
  pointer-events:none;transition:.25s
}
.toast.show{opacity:1;transform:none}
.step-enter{animation:stepIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes stepIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media(min-width:640px){
  .stepbar .lbl{display:block}
  .card{padding:1.5rem}
  .wizard{padding:1rem 1.5rem}
}
@media(max-width:639px){
  .wizard{padding:.75rem}
  .logo--compact{width:76px}
  .card{margin-top:.75rem}
  .nav{gap:.5rem}
  .nav .btn{padding:.65rem .8rem;font-size:.72rem}
  .read-status{align-items:flex-start;flex-direction:column;gap:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .step-enter{animation:none}
  .bg-video{display:none}
}


/* ==========================================================
   TWD V8 — Consentimento de som
   ========================================================== */
.sound-consent{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(180deg,rgba(5,4,3,.48),rgba(5,4,3,.72)),
    rgba(6,5,4,.18);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:opacity .45s ease,visibility .45s ease;
}
.sound-consent.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.sound-consent__panel{
  width:min(560px,100%);
  border:1px solid rgba(196,166,122,.34);
  background:
    linear-gradient(135deg,rgba(18,16,13,.9),rgba(11,10,8,.82));
  box-shadow:0 28px 90px rgba(0,0,0,.58);
  padding:clamp(24px,5vw,42px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.sound-consent__panel:before{
  content:"";
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  opacity:.9;
}
.sound-consent__mark{
  width:54px;
  height:54px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(196,166,122,.5);
  color:var(--primary);
  background:rgba(196,166,122,.07);
}
.sound-consent__eyebrow{
  color:var(--primary);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.sound-consent h1{
  margin-top:10px;
  color:var(--foreground);
  font:700 clamp(1.7rem,4vw,2.55rem)/1 var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.sound-consent__text{
  margin:15px auto 0;
  max-width:430px;
  color:rgba(236,229,216,.7);
  font-size:.9rem;
  line-height:1.6;
}
.sound-consent__actions{
  margin-top:27px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.sound-consent__btn{
  min-height:50px;
  border:1px solid var(--primary);
  padding:12px 16px;
  font:700 .73rem/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.1em;
  cursor:pointer;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.sound-consent__btn--primary{
  background:var(--primary);
  color:var(--primary-foreground);
}
.sound-consent__btn--primary:hover{
  background:#d1b68d;
  transform:translateY(-2px);
}
.sound-consent__btn--ghost{
  background:rgba(11,10,8,.28);
  color:var(--foreground);
}
.sound-consent__btn--ghost:hover{
  background:rgba(196,166,122,.1);
  transform:translateY(-2px);
}
.sound-consent__note{
  margin-top:14px;
  color:rgba(236,229,216,.38);
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:560px){
  .sound-consent{
    padding:16px;
  }
  .sound-consent__panel{
    padding:26px 18px;
  }
  .sound-consent__actions{
    grid-template-columns:1fr;
  }
}


/* TWD V9 — feedback real do acionamento de áudio */
.sound-consent__note.is-error{
  color:#e6a197;
}
.sound-consent__btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none!important;
}
.sound-consent__btn.is-loading{
  position:relative;
}
.sound-consent__btn.is-loading:after{
  content:"";
  width:12px;
  height:12px;
  margin-left:9px;
  display:inline-block;
  vertical-align:-2px;
  border:1px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:twdSoundSpin .7s linear infinite;
}
@keyframes twdSoundSpin{
  to{transform:rotate(360deg)}
}

/* ==========================================================
   TWD V10 — Onboarding sem scroll interno no formulário
   O conteúdo usa altura natural da página. A leitura obrigatória
   continua controlada pelo timer existente no onboarding.js.
   ========================================================== */
body{
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.main{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:visible;
}
.wizard{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:2rem;
}
.wizard-inner{
  flex:0 0 auto;
  overflow:visible;
}
.card{
  flex:none;
  overflow:visible;
}

@media(max-width:639px){
  .wizard{padding-bottom:1.25rem}
}

/* TWD V11 — home mobile centralizada sem scroll */
.main--home{
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

@media(max-width:639px){
  body.is-home,
  body:has(.main--home){
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }
  .main--home{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }
  .main--home .hero{
    min-height:100%;
    height:100%;
    justify-content:center;
    padding:clamp(1rem,4vw,1.35rem) 1.35rem max(5rem,env(safe-area-inset-bottom));
    transform:translateY(-2.25vh);
  }
  .main--home .logo--hero{
    width:clamp(132px,42vw,172px);
  }
  .main--home .hero h1{
    margin-top:1.05rem;
    max-width:24rem;
    font-size:clamp(2.05rem,10.2vw,2.72rem);
    line-height:.98;
  }
  .main--home .hero p.lead{
    max-width:20.5rem;
    margin-top:.95rem;
    font-size:clamp(.92rem,4vw,1.04rem);
    line-height:1.42;
  }
  .main--home .btn-hero{
    width:min(100%,22rem);
    margin-top:1.45rem;
    min-height:3.05rem;
    padding:.78rem 1rem;
  }
  .main--home .member-access{
    margin-top:.9rem;
  }
  .main--home .hero .tagline{
    max-width:20rem;
    margin-top:.95rem;
    line-height:1.45;
  }
  .main--home ~ .toast{
    top:.75rem;
    right:.75rem;
    left:.75rem;
    max-width:none;
  }
}