/* Site da VeloxCoin, fase 1: a abertura ate ao planeta VLX.
   Um so tema, escuro: o site e o espaco. As cores sao as do logo da VLX. */
:root {
  color-scheme: dark;
  --espaco: #02030a;
  --texto: #e7ebff;
  --suave: #a3acd0;
  --linha: rgba(140, 160, 255, 0.2);
  --ciano: #36d6f4;
  --violeta: #7b5cff;
  --magenta: #c25cff;
  --f-titulo: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-dado: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--espaco); color: var(--texto); }
body { font: 400 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
a { color: var(--ciano); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

#cena, #fundo-sem-3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
#fundo-sem-3d {
  display: none;
  background:
    radial-gradient(circle at 46% 58%, #c4f5ff 0, #47d2f2 9%, #6a4dff 20%, #2a1670 30%, transparent 31%),
    radial-gradient(circle at 50% 60%, rgba(70, 210, 255, 0.35), transparent 45%),
    var(--espaco);
}
body.sem-3d #cena { display: none; }
body.sem-3d #fundo-sem-3d { display: block; }

#clarao {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff, #c9f6ff 55%, #9fdcff);
}

/* O brilho do sol no ecra, no fim do site: a luz que "queima" a lente. */
#brilho-sol {
  --x: 30%;
  --y: 30%;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 244, 222, 0.6), rgba(255, 176, 96, 0.2) 16%, rgba(255, 140, 70, 0.06) 34%, transparent 55%);
}

/* Pre-carregamento: anel com a percentagem real */
#carregando {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: var(--espaco);
  transition: opacity 0.5s ease;
}
#carregando.saiu { opacity: 0; pointer-events: none; }
#carregando svg { width: 92px; height: 92px; grid-area: 1 / 1; transform: rotate(-90deg); }
#carregando circle { fill: none; stroke-width: 3; }
#carregando .trilho { stroke: var(--linha); }
#carregando .progresso {
  stroke: var(--ciano);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 0.25s ease;
}
#percentagem {
  grid-area: 1 / 1;
  font-family: var(--f-dado);
  font-size: 13px;
  color: var(--suave);
}
#carregando.pronto > svg, #carregando.pronto #percentagem { display: none; }
#entrar {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 18px;
}
#entrar[hidden] { display: none; }
/* "Entrar no universo Velox": o mesmo brilho de estrelas do "Role para
   explorar" (pedido do dono a 3/10/2026). */
#entrar-com-som {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: none;
  border: 0;
  cursor: pointer;
}
#entrar-com-som .linha { display: inline-flex; align-items: center; gap: 14px; }
#entrar-com-som .texto {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 20px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--ciano), #ffffff, var(--magenta), var(--violeta), var(--ciano), #ffffff, var(--ciano));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(54, 214, 244, 0.75)) drop-shadow(0 0 16px rgba(194, 92, 255, 0.5));
  animation: rolar-brilho 3.2s linear infinite;
}
#entrar-com-som .estrela {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px var(--ciano)) drop-shadow(0 0 18px var(--magenta));
  animation: rolar-estrela 1.6s ease-in-out infinite;
}
#entrar-com-som .e2 { animation-delay: 0.8s; }
/* "Aperte aqui", por baixo da frase (pedido do dono a 3/10/2026). */
#entrar-com-som .aperte {
  margin-top: -4px;
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--texto);
  border: 1px solid rgba(54, 214, 244, 0.55);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 0 14px rgba(54, 214, 244, 0.35), inset 0 0 10px rgba(123, 92, 255, 0.25);
  animation: entrar-pulso 2.2s ease-in-out infinite;
}
#entrar-com-som:hover .aperte { border-color: var(--ciano); box-shadow: 0 0 22px rgba(54, 214, 244, 0.6), inset 0 0 12px rgba(123, 92, 255, 0.35); }
#entrar-com-som:hover .texto { filter: drop-shadow(0 0 10px rgba(54, 214, 244, 1)) drop-shadow(0 0 22px rgba(194, 92, 255, 0.7)); }
@media (max-width: 420px) {
  #entrar-com-som .texto { letter-spacing: 0.12em; font-size: 13px; }
  #entrar-com-som .linha { gap: 8px; }
  #entrar-com-som .estrela { width: 14px; height: 14px; }
}
#entrar-com-som img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linha), 0 0 28px rgba(54, 214, 244, 0.55), 0 0 60px rgba(194, 92, 255, 0.35);
  animation: entrar-pulso 2.2s ease-in-out infinite;
}
#entrar-com-som:hover img { box-shadow: 0 0 0 1px var(--ciano), 0 0 36px rgba(54, 214, 244, 0.8), 0 0 80px rgba(194, 92, 255, 0.5); }
@keyframes entrar-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.acoes-topo { display: flex; align-items: center; gap: 10px; }
#som, #contato-topo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: rgba(10, 14, 40, 0.6);
  color: var(--texto);
  cursor: pointer;
  padding: 0;
}
#som[hidden] { display: none; }
/* O botao "Velox Group": volta a constelacao do grupo. */
#ir-grupo {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--linha); background: rgba(10, 14, 40, 0.6);
  color: var(--texto); text-decoration: none; font: 500 13px var(--f-dado, inherit); letter-spacing: 0.04em;
  box-sizing: border-box; flex-shrink: 0; transition: opacity 0.9s ease, border-color 0.25s;
}
#ir-grupo:hover, #ir-grupo:focus-visible { border-color: var(--ciano); }
/* Um anel de luz que pulsa a volta, para se ver que e um link (pedido do
   dono a 18/10/2026). Sem animacao para quem pede menos movimento. */
#ir-grupo { animation: pulsoGrupo 2.4s ease-out infinite; }
#ir-grupo img { animation: brilhoGrupo 2.4s ease-in-out infinite; }
@keyframes pulsoGrupo {
  0% { box-shadow: 0 0 0 0 rgba(54, 214, 244, 0.6); border-color: rgba(54, 214, 244, 0.9); }
  70% { box-shadow: 0 0 0 9px rgba(54, 214, 244, 0); border-color: var(--linha); }
  100% { box-shadow: 0 0 0 0 rgba(54, 214, 244, 0); border-color: var(--linha); }
}
@keyframes brilhoGrupo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(54, 214, 244, 0)); } 30% { filter: drop-shadow(0 0 6px rgba(54, 214, 244, 0.95)); } }
@media (prefers-reduced-motion: reduce) { #ir-grupo, #ir-grupo img { animation: none; } }
#ir-grupo img { width: 16px; height: 18px; object-fit: contain; }
#som:hover, #contato-topo:hover { border-color: var(--ciano); }
#som svg, #contato-topo svg { width: 18px; height: 18px; grid-area: 1 / 1; }
#contato-topo { box-sizing: border-box; transition: opacity 0.9s ease; }
#som, #contato-topo { flex-shrink: 0; }
#som .desligado { display: none; }
#som[aria-pressed="false"] .ligado { display: none; }
#som[aria-pressed="false"] .desligado { display: block; }
/* O botao do som fica a vista durante a abertura. */
body.na-abertura .topo { opacity: 1; pointer-events: none; }
body.na-abertura .topo .logo, body.na-abertura .topo .selo-teste,
body.na-abertura .topo #contato-topo, body.na-abertura .topo #ir-grupo { opacity: 0; }
body.na-abertura .topo #som { pointer-events: auto; }

#apresenta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22%;
  z-index: 4;
  margin: 0;
  text-align: center;
  font-family: var(--f-dado);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--suave);
  opacity: 0;
  pointer-events: none;
}

#pular, #pular-reboque {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  font-family: var(--f-dado);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(10, 14, 40, 0.7);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
#pular:hover, #pular-reboque:hover { border-color: var(--ciano); }
#pular-reboque[hidden] { display: none; }

/* Durante a abertura o conteudo fica escondido e nao se rola. */
body.na-abertura { overflow: hidden; }
.topo, main, .rodape {
  position: relative;
  z-index: 2;
  transition: opacity 0.9s ease;
}
body.na-abertura .topo,
body.na-abertura main,
body.na-abertura .rodape { opacity: 0; pointer-events: none; }
body.na-abertura.chegou main { opacity: 1; pointer-events: auto; }

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) 14px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: 15px;
}
.selo-teste {
  font-family: var(--f-dado);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
/* No telemovel o topo tem logo, selo e dois botoes: tudo numa linha. */
@media (max-width: 420px) {
  .topo, .acoes-topo { gap: 8px; }
  .logo { gap: 8px; font-size: 14px; }
  .selo-teste { font-size: 10px; letter-spacing: 0.06em; padding: 4px 9px; }
  #som, #contato-topo { width: 32px; height: 32px; }
  #ir-grupo { height: 32px; padding: 0 9px; }
  #ir-grupo span { display: none; }
}

/* O heroi: o titulo por cima do planeta, as chamadas por baixo */
.heroi {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-inline: 16px;
  padding-block: calc(13vh + env(safe-area-inset-top, 0px)) calc(5vh + env(safe-area-inset-bottom, 0px));
}
.heroi h1 { margin: 0; display: grid; gap: 8px; }
.heroi .nome {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(38px, 8vw, 88px);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--ciano), var(--violeta) 60%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heroi .sub {
  font-family: var(--f-dado);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.base-heroi { display: grid; gap: 18px; justify-items: center; max-width: 40rem; }
.tese { margin: 0; color: var(--suave); text-wrap: balance; text-shadow: 0 1px 12px var(--espaco); }
/* Os botões do início têm sempre o mesmo tamanho, o do maior (pedido do
   dono a 4/10/2026): lado a lado no computador, um por cima do outro no
   celular. */
.chamadas { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chamadas .botao { text-align: center; }
@media (max-width: 480px) { .chamadas { grid-template-columns: 1fr; } }
.botao {
  display: inline-block;
  font-family: var(--f-dado);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--texto);
  text-decoration: none;
  border: 1px solid var(--linha);
  background: rgba(10, 14, 40, 0.6);
  border-radius: 999px;
  padding: 11px 18px;
}
.botao:hover { border-color: var(--ciano); }
.botao.primario {
  color: var(--espaco);
  font-weight: 500;
  border-color: transparent;
  background: linear-gradient(90deg, var(--ciano), var(--violeta));
}
.botao.inativo { color: var(--suave); opacity: 0.7; }
/* "Role para explorar": brilha com as cores da VLX e as estrelas do logo,
   para chamar a atencao (pedido do dono a 3/10/2026). E so informativo: nao
   se toca nem reage ao rato. */
.rolar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 14px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.rolar .linha { display: inline-flex; align-items: center; gap: 12px; }
.rolar .texto {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 17px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--ciano), #ffffff, var(--magenta), var(--violeta), var(--ciano), #ffffff, var(--ciano));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(54, 214, 244, 0.75)) drop-shadow(0 0 16px rgba(194, 92, 255, 0.5));
  animation: rolar-brilho 3.2s linear infinite;
}
.rolar .estrela {
  width: 16px;
  height: 16px;
  fill: #ffffff;
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px var(--ciano)) drop-shadow(0 0 18px var(--magenta));
  animation: rolar-estrela 1.6s ease-in-out infinite;
}
.rolar .e2 { animation-delay: 0.8s; }
.rolar .seta {
  width: 24px;
  height: 24px;
  color: var(--ciano);
  filter: drop-shadow(0 0 6px var(--ciano));
  animation: rolar-seta 1.6s ease-in-out infinite;
}
@keyframes rolar-brilho { to { background-position: 300% 0; } }
@keyframes rolar-estrela {
  0%, 100% { opacity: 0.35; transform: scale(0.65) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}
@keyframes rolar-seta {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(7px); opacity: 1; }
}
@media (max-width: 380px) { .rolar .texto { letter-spacing: 0.16em; } }

/* Capitulos: a rolagem leva a camera a volta do planeta */
.capitulo {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 38rem;
  padding-inline: clamp(16px, 7vw, 96px);
  padding-block: 12vh;
}
/* No telemovel o texto fica em cima e o planeta desce para a metade de
   baixo. Sem faixa escura por tras (o dono pediu: tapava o espaco): a
   leitura vem da sombra das proprias letras. */
@media (max-aspect-ratio: 11/10) {
  .capitulo {
    max-width: none;
    justify-content: flex-start;
    padding-top: calc(15vh + env(safe-area-inset-top, 0px));
  }
  .capitulo h2, .capitulo p, .capitulo .rotulo {
    text-shadow: 0 1px 3px rgba(2, 3, 10, 0.95), 0 0 12px rgba(2, 3, 10, 0.9), 0 0 28px rgba(2, 3, 10, 0.7);
  }
}
.capitulo .rotulo {
  margin: 0;
  font-family: var(--f-dado);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ciano);
}
.capitulo h2 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 24px var(--espaco);
}
.capitulo p { margin: 0; color: var(--suave); max-width: 32rem; text-shadow: 0 1px 14px var(--espaco); }
.endereco {
  font-family: var(--f-dado);
  font-size: 13px;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.rodape {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding-inline: 16px;
  padding-block: 12vh calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 13px;
  color: var(--suave);
  /* Sem faixa por tras (tapava o sol e o espaco): so as letras, com sombra. */
  text-shadow: 0 1px 3px rgba(2, 3, 10, 0.95), 0 0 14px rgba(2, 3, 10, 0.9);
}
.rodape p { margin: 0; max-width: 46rem; }
.rodape a { color: var(--texto); }
#ver-abertura {
  margin-bottom: 14px;
  font-family: var(--f-dado);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
#ver-abertura:hover { border-color: var(--ciano); }

@media (prefers-reduced-motion: reduce) {
  .topo, main, .rodape, #carregando, #carregando .progresso { transition: none; }
  .rolar .texto, .rolar .estrela, .rolar .seta, #entrar-com-som img,
  #entrar-com-som .texto, #entrar-com-som .estrela, #entrar-com-som .aperte { animation: none; }
}

.topo .logo, .topo .selo-teste { transition: opacity 0.9s ease; }

/* Ao rolar, o logo e o selo do topo saem; o botao do som fica. */
body.rolou .topo .logo, body.rolou .topo .selo-teste { opacity: 0; pointer-events: none; }

/* ---- O reboque até ao whitepaper (pedido do dono a 4/10/2026) ----
   Durante a viagem só fica o botão do som e o "Pular"; a página não rola. */
body.rebocando { overflow: hidden; }
body.rebocando main,
body.rebocando .rodape,
body.rebocando .topo .logo,
body.rebocando .topo .selo-teste,
body.rebocando .topo #contato-topo, body.rebocando .topo #ir-grupo { opacity: 0; pointer-events: none; }

/* O holograma da torre: um painel de luz que se abre de cima para baixo. */
#holograma {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}
#holograma[hidden] { display: none; }
.holo-painel {
  pointer-events: auto;
  position: relative;
  width: min(30rem, 100%);
  margin-top: 30vh;
  padding: 26px 26px 18px;
  text-align: center;
  border: 1px solid rgba(54, 214, 244, 0.6);
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(54, 214, 244, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(40, 30, 110, 0.55), rgba(8, 10, 40, 0.72));
  box-shadow: 0 0 28px rgba(54, 214, 244, 0.45), inset 0 0 40px rgba(123, 92, 255, 0.25);
  backdrop-filter: blur(6px);
  transform-origin: 50% 0;
  animation: holo-abre 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both, holo-pisca 4s ease-in-out 0.9s infinite;
}
.holo-painel::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -14vh;
  width: 2px;
  height: 14vh;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(54, 214, 244, 0), rgba(54, 214, 244, 0.85));
  box-shadow: 0 0 12px var(--ciano);
}
.holo-rotulo { margin: 0 0 8px; font: 500 11px var(--f-dado); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ciano); }
.holo-titulo {
  margin: 0;
  font: 700 clamp(20px, 3vw, 28px)/1.2 var(--f-titulo);
  background: linear-gradient(90deg, var(--ciano), #ffffff, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.holo-texto { margin: 10px auto 18px; max-width: 24rem; font-size: 15px; color: var(--texto); text-shadow: 0 0 10px rgba(54, 214, 244, 0.35); }
.holo-acoes { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.holo-acoes .botao { text-align: center; }
@media (max-width: 420px) { .holo-acoes { grid-template-columns: 1fr; } }
.holo-voltar {
  margin-top: 14px;
  font: 12px var(--f-dado);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--suave);
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.holo-voltar:hover { color: var(--texto); }
/* "Voltar para o espaço sideral" numa linha só, também em celulares pequenos. */
.holo-voltar { white-space: nowrap; }
@media (max-width: 380px) { .holo-voltar { letter-spacing: 0.05em; font-size: 11px; } }
@keyframes holo-abre {
  0% { opacity: 0; transform: scaleY(0.02) scaleX(0.6); filter: brightness(3); }
  45% { opacity: 1; transform: scaleY(0.04) scaleX(1); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes holo-pisca { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 50% { opacity: 0.82; } 52% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .holo-painel { animation: none; } }

/* ---- Rodapé numa linha e a janela dos créditos (pedido do dono a 4/10/2026) ---- */
.rodape .linha-final span { white-space: nowrap; }
.link-creditos {
  font: inherit;
  color: var(--texto);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-shadow: inherit;
}
.link-creditos:hover { color: var(--ciano); }
#creditos {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 3, 10, 0.6);
  backdrop-filter: blur(4px);
}
#creditos[hidden] { display: none; }
/* Numa tela baixa (celular deitado) o painel passava da altura e o "Fechar"
   ficava fora de alcance: o painel rola por dentro. */
.creditos-painel {
  width: min(32rem, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(54, 214, 244, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40, 30, 110, 0.75), rgba(8, 10, 40, 0.92));
  box-shadow: 0 0 26px rgba(54, 214, 244, 0.3);
}
#creditos-titulo { margin: 0 0 14px; font: 700 20px var(--f-titulo); }
.creditos-painel p { margin: 0 0 10px; font-size: 14px; color: var(--suave); }
.creditos-painel .botao { margin-top: 8px; cursor: pointer; }

/* ---- As redes sociais (pedido do dono a 4/10/2026) ----
   A faixa "Sintonize nossos canais", no capítulo Contato: cada rede num
   círculo de vidro neon; um pulso de rádio passa de um ícone ao seguinte e,
   ao passar o mouse, o ícone acende na cor da própria marca. */
.canais { margin-top: 14px; }
.canais[hidden] { display: none; }
.capitulo .canais-rotulo {
  margin: 0 0 14px;
  font: 500 12px var(--f-dado);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ciano);
}
.canais-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* No computador, os oito numa linha (passam um pouco da coluna do texto). */
@media (min-width: 561px) { .canais-lista { flex-wrap: nowrap; width: max-content; } }
@media (max-width: 560px) {
  .canais-lista { display: grid; grid-template-columns: repeat(4, 48px); gap: 16px 20px; }
}
.canal {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--texto);
  border: 1px solid rgba(54, 214, 244, 0.45);
  background: radial-gradient(circle at 35% 30%, rgba(120, 140, 255, 0.3), rgba(10, 14, 40, 0.78) 70%);
  box-shadow: 0 0 14px rgba(54, 214, 244, 0.25), inset 0 0 12px rgba(123, 92, 255, 0.3);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.canal svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: currentColor; transition: filter 0.25s; }
.canal::before, .canal::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--ciano);
  opacity: 0;
  pointer-events: none;
  animation: canal-pulso calc(var(--n, 8) * 0.55s) ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.55s);
}
.canal::after { animation-delay: calc(var(--i, 0) * 0.55s + 0.18s); }
@keyframes canal-pulso {
  0% { opacity: 0.9; transform: scale(1); }
  14% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}
.canal:hover, .canal:focus-visible {
  color: var(--cor);
  border-color: var(--cor);
  box-shadow: 0 0 22px var(--cor), inset 0 0 14px color-mix(in srgb, var(--cor) 45%, transparent);
  transform: translateY(-2px);
}
/* O TikTok com as duas cores do próprio logo, deslocadas. */
.canal[data-rede="tiktok"]:hover, .canal[data-rede="tiktok"]:focus-visible { color: #ffffff; }
.canal[data-rede="tiktok"]:hover svg, .canal[data-rede="tiktok"]:focus-visible svg,
.canal-botao[data-rede="tiktok"]:hover svg, .canal-botao[data-rede="tiktok"]:focus-visible svg {
  filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55);
}
/* O nome aparece por baixo, no mouse e no teclado. */
.canal-nome {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, -4px);
  font: 500 11px var(--f-dado);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  text-shadow: 0 1px 8px var(--espaco);
}
.canal:hover .canal-nome, .canal:focus-visible .canal-nome { opacity: 1; transform: translate(-50%, 0); }

/* O botão invisível por cima da nave do Vex, e o "Toque na nave". */
#tocar-nave {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#tocar-nave[hidden] { display: none; }
#tocar-nave:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; }
#tocar-nave .dica {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font: 500 11px var(--f-dado);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ciano);
  text-shadow: 0 0 10px rgba(54, 214, 244, 0.65), 0 1px 4px var(--espaco);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
#tocar-nave.com-dica .dica { opacity: 1; animation: dica-pisca 1.8s ease-in-out infinite; }
@keyframes dica-pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
body.rebocando #tocar-nave { display: none; }

/* O painel "Comunidade Velox", na cidade das redes: em baixo, para se verem
   os logos das torres e a nave do Vex por cima. */
#comunidade {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: end center;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
#comunidade[hidden] { display: none; }
/* Sem viagem ("reduzir movimento"): o painel abre ao centro, sobre o site. */
#comunidade.sem-viagem {
  place-items: center;
  pointer-events: auto;
  background: rgba(2, 3, 10, 0.6);
  backdrop-filter: blur(4px);
}
.comunidade-painel {
  margin-top: 0;
  width: min(38rem, 100%);
  border-color: rgba(255, 92, 200, 0.6);
  box-shadow: 0 0 28px rgba(255, 92, 200, 0.4), inset 0 0 40px rgba(123, 92, 255, 0.25);
}
.comunidade-painel::before {
  background: linear-gradient(180deg, rgba(255, 92, 200, 0), rgba(255, 92, 200, 0.85));
  box-shadow: 0 0 12px #ff5cc8;
}
#comunidade.sem-viagem .comunidade-painel::before { display: none; }
.comunidade-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 560px) { .comunidade-lista { grid-template-columns: repeat(2, 1fr); } }
.canal-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  font: 13px var(--f-dado);
  white-space: nowrap;
  color: var(--texto);
  text-decoration: none;
  border: 1px solid rgba(54, 214, 244, 0.35);
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.canal-botao svg { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; }
.canal-botao:hover, .canal-botao:focus-visible {
  color: var(--cor);
  border-color: var(--cor);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cor) 60%, transparent);
}
.canal-botao[data-rede="tiktok"]:hover, .canal-botao[data-rede="tiktok"]:focus-visible { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .canal::before, .canal::after, #tocar-nave.com-dica .dica { animation: none; }
}

/* ---- Utilidade, distribuição e ficha técnica (pedido do dono a 4/10/2026) ---- */
.capitulo[hidden] { display: none; }
.capitulo .nota { font-size: 14px; }
.usos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 34rem;
}
.usos li {
  position: relative;
  padding-left: 22px;
  color: var(--suave);
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 1px 10px var(--espaco);
}
.usos li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 10px var(--ciano);
}
.usos strong { display: block; color: var(--texto); font-weight: 500; }

/* A distribuição: uma barra com as sete fatias e a lista por baixo. */
.barra-fatias {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 34rem;
  height: 12px;
}
.barra-fatias span {
  flex-grow: 0;
  flex-shrink: 1;
  border-radius: 3px;
  background: var(--cor);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 60%, transparent);
}
.fatias {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34rem;
  display: grid;
  gap: 2px;
}
.fatias li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  text-shadow: 0 1px 10px var(--espaco);
}
.fatia-nome { position: relative; padding-left: 18px; color: var(--texto); font-size: 15px; line-height: 1.3; }
.fatia-nome::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--cor);
}
.fatia-detalhe { display: block; color: var(--suave); font-size: 12px; }
.fatia-pct, .fatia-vlx { font: 13px var(--f-dado); white-space: nowrap; text-align: right; }
.fatia-pct { color: var(--texto); }
.fatia-vlx { color: var(--suave); }
.fatia-conferir {
  font: 11px var(--f-dado);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ciano);
}
@media (max-width: 480px) {
  .fatias li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fatia-vlx { display: none; }
}

/* A ficha técnica: o nome à esquerda, o valor à direita, sem partir. */
.ficha {
  margin: 0;
  max-width: 30rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}
.ficha div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  text-shadow: 0 1px 10px var(--espaco);
}
.ficha dt { color: var(--suave); font-size: 14px; }
.ficha dd { margin: 0; color: var(--texto); font: 13px var(--f-dado); white-space: nowrap; text-align: right; }
@media (max-width: 380px) { .ficha dd { font-size: 12px; } .ficha dt { font-size: 13px; } }
/* Os dois botões do mesmo tamanho (pedido do dono a 4/10/2026), um por
   baixo do outro: ficam com a largura do maior. */
.acoes-confira {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-self: flex-start;
}
.acoes-confira .botao { text-align: center; }

/* O seletor de idiomas (idioma.css) some durante a abertura e as viagens. */
body.na-abertura .topo .idioma { opacity: 0; pointer-events: none; }
body.rebocando .topo .idioma { opacity: 0; pointer-events: none; }
.topo .idioma { transition: opacity 0.9s ease; }