/* ---------- topo: por cima da grade, sem fundo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 20; height: 72px; padding-inline: var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.topo > * { pointer-events: auto; }

/* ---------- abertura: a grade de palavras no jeito do Muse Wonder ---------- */
.abertura { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--fundo); }
#grade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* sem script (ou antes dele): o título de verdade no meio; com a grade viva, ele fica só pro leitor de tela */
.abertura-titulo { position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; justify-items: center; gap: 14px; font: 400 clamp(38px, 6vw, 92px)/1.1 var(--mono); letter-spacing: .02em; white-space: nowrap; text-align: center; }
.abertura-founder { font-size: clamp(14px, 1.7vw, 22px); letter-spacing: .04em; }
.abertura-founder .rotulo { font-size: inherit; margin-right: .6em; }
.abertura.viva .abertura-titulo { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.abertura-pe { position: absolute; left: 0; right: 0; bottom: clamp(24px, 6vh, 64px); display: grid; justify-items: center; gap: 22px; padding-inline: var(--borda); text-align: center; pointer-events: none; }
.abertura-pe > * { pointer-events: auto; }
.abertura-pe p { max-width: 30em; font-size: clamp(17px, 1.5vw, 21px); color: #cfcdc8; text-wrap: balance; }
/* "Primeira vez? Criar conta" e, pra quem já entrou, "Você está como Fulano · Sair" */
.abertura-pe .abertura-linha { margin-top: -8px; font: 400 13.5px/1.5 var(--mono); letter-spacing: .03em; color: var(--suave); }
.abertura-pe .abertura-linha[hidden] { display: none; }
.abertura-linha b { font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.abertura-link { padding: 6px 2px; font: inherit; color: var(--texto); text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 4px; transition: color .2s; }
.abertura-link:hover { color: var(--ambar); }
.abertura-rodape { margin-top: -6px; font: 400 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.abertura-rodape a { display: inline-block; padding: 6px 4px; color: var(--apagado); text-decoration: none; transition: color .2s; }
.abertura-rodape a:hover { color: var(--ambar); }

/* tremida de quem errou (a porta e o mural de agradecimentos) */
@keyframes treme { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }

@media (max-width: 700px) {
  .topo { height: 62px; }
  .abertura-pe { bottom: max(18px, env(safe-area-inset-bottom)); gap: 18px; }
  .abertura-pe .botao.grande { width: 100%; max-width: 340px; }
}