/* Estrutura: fundo, moldura, lateral, navegação */
#bg{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;display:block}

.stage{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px) clamp(12px,3vw,40px)}
.wrap{position:relative;z-index:1;width:100%;max-width:1320px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}

.frame{flex:1 1 640px;min-width:0;display:flex;flex-wrap:wrap;background:var(--surface);border-radius:32px;overflow:hidden;height:min(780px,calc(100vh - 96px));box-shadow:0 30px 80px rgba(0,0,0,.6)}

/* Lateral */
.side{flex:0 0 320px;max-width:100%;display:flex;flex-direction:column;align-items:center;padding:56px 28px 28px;overflow-y:auto}
.brand{display:block;width:250px;max-width:100%}
.brand img{width:100%;height:auto}
.side__tagline{margin:22px 0 0;max-width:250px;text-align:center;color:var(--text-muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.social{display:flex;gap:18px;margin-top:26px}
.social a{display:flex;padding:4px}
.btn-outline{margin-top:40px;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;border:2px solid var(--text);border-radius:999px;color:var(--text);font-weight:500;font-size:15px;transition:background .2s,border-color .2s,color .2s}
.btn-outline:hover{background:var(--accent);border-color:var(--accent);color:#061312}
.side__spacer{flex:1;min-height:32px}
.side__copy{margin:0;font-size:12px;color:#8a8a8a;text-align:center}

/* Conteúdo */
.main{flex:1 1 400px;min-width:0;background:var(--surface-2);border-radius:32px;overflow-y:auto;height:100%}
.main:focus{outline:none}
.js .page[hidden]{display:none}

/* Navegação (só existe com JS; sem JS todas as seções aparecem em sequência) */
.nav{flex:0 0 72px;display:none;flex-direction:column;justify-content:space-between;align-items:center;gap:20px;margin:0 auto}
.js .nav{display:flex}
.nav__group{display:flex;flex-direction:column;background:var(--surface-3);border-radius:999px}
.nav__group--main{gap:6px;padding:14px 10px}
.nav__group--step{gap:4px;padding:10px 8px}
.nav button{border:0;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#d6d6d6;transition:color .2s,background .2s}
.nav button:hover{background:var(--hover)}
.nav__group--main button{width:52px;height:52px}
.nav__group--step button{width:44px;height:44px}
.nav button[aria-current="page"]{color:var(--accent)}
.nav button:disabled{color:#555;cursor:default;background:transparent}

/* Telas estreitas: a página inteira rola */
@media (max-width:899px){
  .frame{height:auto}
  .side{flex-grow:1}
  .main{height:auto;overflow:visible}
  .nav{flex-direction:row}
  .nav__group{flex-direction:row}
}