/* O site da Velox Group: o 3D na tela inteira e, por cima, o painel de
   partidas, a torre de controle, a contagem e a ficha de cada planeta.
   Regra dos sites da Velox (decisao do dono a 3/10/2026): nada de tarjas
   pretas por tras do texto; a leitura sai da sombra. O painel de partidas e
   um objeto (o painel do aeroporto), por isso tem o seu fundo. */
:root {
  --ceu: #03050d;
  --texto: #eef2ff;
  --suave: #b3bbdc;
  --azul: #1769e0;
  --azul-claro: #6fa8ff;
  --ciano: #36d6f4;
  --verde: #22d3a8;
  --ambar: #f5b547;
  --violeta: #a08bff;
  --letra-painel: #ffd24d;
  --display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --corpo: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --sombra: 0 0 14px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9), 0 2px 3px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ceu); color: var(--texto); }
body { font: 400 16px/1.55 var(--corpo); overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* touch-action: o arrastar do dedo na cena e do site, nao do navegador: sem
   isto o celular tomava o gesto para rolar a pagina, cortava o arrastar a
   meio, e a vista so girava um pouco (pedido do dono a 19/10/2026). */
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#clarao { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 60; background: #fff; }

/* ---- O topo ---- */
#topo {
  position: fixed; z-index: 40; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
#topo .logo { height: 34px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)); }
.logo-link { pointer-events: auto; display: inline-flex; border-radius: 10px; }
.logo-link:hover .logo, .logo-link:focus-visible .logo { filter: drop-shadow(0 0 10px rgba(54, 214, 244, 0.85)); }
.topo-botoes { display: flex; gap: 8px; pointer-events: auto; }
.topo-botao {
  height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(180, 200, 255, 0.35);
  font-size: 0.85rem; text-shadow: var(--sombra); white-space: nowrap; flex-shrink: 0;
}
.topo-botao:hover { border-color: var(--ciano); }
#rever .icone-estreito { display: none; width: 18px; height: 18px; fill: var(--texto); margin: auto; }
.topo-botao.som, .topo-botao.icone { width: 36px; padding: 0; display: grid; place-items: center; }
.topo-botao.icone { color: var(--texto); text-decoration: none; }
.topo-botao.icone svg { width: 18px; height: 18px; }
.topo-botao.som svg { width: 18px; height: 18px; fill: var(--texto); }
.topo-botao.som .mudo { display: none; }
.topo-botao.som[aria-pressed="true"] .alto { display: none; }
.topo-botao.som[aria-pressed="true"] .mudo { display: block; }
body.no-portao #rever { display: none; }

/* ---- O painel de partidas ---- */
.painel {
  position: fixed; z-index: 30; left: 50%; top: 50%;
  width: min(1040px, calc(100vw - 32px));
  transform: translate(-50%, -64%);
  background: linear-gradient(#0d1018, #090b11);
  border: 1px solid #262c3d; border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--mono);
  transition: transform 0.9s cubic-bezier(.2, .8, .2, 1), top 0.9s cubic-bezier(.2, .8, .2, 1), opacity 0.6s;
}
.painel-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.painel-titulo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--letra-painel); text-transform: uppercase; }
.painel-en { color: #8a8f9c; font-weight: 500; }
.painel-relogio { font-size: 1.15rem; color: var(--letra-painel); letter-spacing: 0.08em; }
/* O cabecalho e as linhas partilham a mesma grelha: as colunas alinham-se. */
.painel-grade {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  column-gap: 1.1em; row-gap: 5px; align-items: center;
}
.painel-cabecalho, .painel-linha { display: contents; }
.painel-cabecalho span {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8f9c;
  padding-bottom: 6px; border-bottom: 1px solid #1d2230; margin-bottom: 2px;
}
.painel-celula { display: flex; gap: 2px; min-width: 0; }
.palheta {
  display: inline-grid; place-items: center;
  width: 1.12em; height: 1.55em;
  font-size: clamp(11px, 1.15vw, 16px); font-weight: 500;
  color: var(--letra-painel);
  background: linear-gradient(#1b1f2a 0 49%, #0c0e14 49% 51%, #161a23 51% 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.palheta.a-virar { color: #fff3c4; }
.painel-linha.principal .palheta { color: #fff; background: linear-gradient(#1a3266 0 49%, #0b1530 49% 51%, #142a58 51% 100%); }
.painel[data-situacao="autorizado"] .principal .c-situacao .palheta,
.painel[data-situacao="decolou"] .principal .c-situacao .palheta,
.painel[data-situacao="chegou"] .principal .c-situacao .palheta { color: #7dffb8; }
.painel[data-situacao="em rota"] .principal .c-situacao .palheta { color: var(--ciano); }

.painel.compacto {
  top: calc(64px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, 0) scale(0.78);
  transform-origin: top center;
  padding: 10px 12px;
}
.painel.compacto .painel-cabecalho, .painel.compacto .painel-linha:not(.principal) { display: none; }
.painel.compacto .painel-grade { row-gap: 0; }
.painel.compacto .painel-topo { margin-bottom: 6px; }
.painel.compacto .painel-titulo { font-size: 0.9rem; }

/* ---- O portao ---- */
#portao {
  position: fixed; z-index: 31; left: 50%; bottom: max(28px, calc(18px + env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
body:not(.no-portao) #portao { display: none; }
.portao-titulo { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 2.6vw, 1.7rem); text-shadow: var(--sombra); }
.portao-texto { margin: 0; color: var(--suave); text-shadow: var(--sombra); }
.portao-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.embarcar {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 14px 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #1769e0, #36a4f4);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  box-shadow: 0 10px 34px rgba(23, 105, 224, 0.45);
}
.embarcar small { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; opacity: 0.85; }
.embarcar:disabled { cursor: wait; opacity: 0.7; }
.embarcar:not(:disabled) small { display: none; }
.pular, .pular-viagem {
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(180, 200, 255, 0.4);
  text-shadow: var(--sombra);
}
.pular:hover, .pular-viagem:hover { border-color: var(--ciano); }
.portao-nota { margin: 4px 0 0; font-size: 0.85rem; color: var(--suave); text-shadow: var(--sombra); }
.pular-viagem {
  position: fixed; z-index: 35; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, calc(12px + env(safe-area-inset-bottom, 0px)));
  padding: 10px 18px; font-size: 0.88rem;
}
body:not(.na-viagem) .pular-viagem { display: none; }

/* ---- A torre de controle ---- */
.torre {
  position: fixed; z-index: 36; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  padding: 22px 24px; text-align: center;
  border: 1px solid rgba(111, 168, 255, 0.55); border-radius: 18px;
  box-shadow: 0 0 40px rgba(54, 214, 244, 0.18), inset 0 0 40px rgba(54, 214, 244, 0.08);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  animation: chamada 0.6s ease-out;
}
.torre-rotulo { margin: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ciano); text-shadow: var(--sombra); }
.torre h2 { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem); text-shadow: var(--sombra); }
.torre p { margin: 0; color: var(--texto); text-shadow: var(--sombra); max-width: 44ch; }
.autorizar {
  margin-top: 8px; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #10b981, #22d3a8); color: #04130d;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 10px 34px rgba(34, 211, 168, 0.4);
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes chamada { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes pulso { 0%, 100% { box-shadow: 0 10px 34px rgba(34, 211, 168, 0.35); } 50% { box-shadow: 0 10px 44px rgba(34, 211, 168, 0.75); } }

/* ---- A contagem ---- */
.contagem {
  position: fixed; z-index: 36; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 16vw, 12rem); line-height: 1;
  color: #fff; text-shadow: 0 0 30px rgba(111, 168, 255, 0.85), var(--sombra);
  pointer-events: none; white-space: nowrap;
}
.contagem.pulsa { animation: conta 1s ease-out; }
@keyframes conta { from { transform: translate(-50%, -50%) scale(1.35); opacity: 0.2; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); } }

/* ---- O sistema ---- */
.nomes { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
body:not(.no-sistema) .nomes, body.em-viagem .nomes { display: none; }
/* As etiquetas: o fio de luz sai da borda do planeta, na diagonal para cima
   e para a direita, e acaba numa linha fina por baixo do icone e do nome. */
.etiqueta {
  --cor: #6fa8ff;
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none;
}
.etiqueta { transition: opacity 0.25s; }
.etiqueta.tapada { opacity: 0; }
.etiqueta.tapada .rotulo { pointer-events: none; }
.etiqueta .fio {
  position: absolute; left: 0; top: 0; width: calc(46px + var(--extra, 0px)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor));
  transform-origin: 0 0; transform: rotate(-38deg);
  box-shadow: 0 0 6px var(--cor);
  transition: width 0.25s;
}
.etiqueta .ponta {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cor); box-shadow: 0 0 10px var(--cor);
}
/* --extra: o fio cresce (e a etiqueta sobe) quando duas se encavalariam. */
.etiqueta .rotulo {
  position: absolute; left: calc(36px + var(--extra, 0px) * 0.788); bottom: calc(27px + var(--extra, 0px) * 0.616);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0 4px 6px 0;
  border-bottom: 1px solid var(--cor);
  pointer-events: auto;
}
.etiqueta .rotulo img { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)); }
.etiqueta .nome {
  font-family: var(--display); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--texto); text-shadow: var(--sombra);
}
.etiqueta:hover .nome, .etiqueta:focus-visible .nome { color: var(--cor); }
.etiqueta.esquerda .fio { transform: rotate(-142deg); }
.etiqueta.esquerda .rotulo { left: auto; right: calc(36px + var(--extra, 0px) * 0.788); padding: 0 0 6px 4px; }
.etiqueta .textos { display: flex; flex-direction: column; line-height: 1.15; }
.etiqueta .planeta {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor); text-shadow: var(--sombra);
}
.etiqueta-lua .fio { width: 30px; }
.etiqueta-lua.esquerda .rotulo { right: 24px; }
.etiqueta-lua .rotulo { left: 24px; bottom: 18px; padding-bottom: 4px; }
.etiqueta-lua .nome { font-size: 0.74rem; }
.nome-nucleo {
  position: absolute; left: 0; top: 0;
  font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #cfe0ff; text-shadow: var(--sombra); white-space: nowrap;
}
.nome-constelacao {
  position: fixed; z-index: 21; left: 0; top: 0; opacity: 0; pointer-events: none;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 3vw, 2rem); letter-spacing: 0.06em;
  color: #fff; text-shadow: 0 0 20px rgba(111, 168, 255, 0.8), var(--sombra); white-space: nowrap;
}

.ficha {
  position: fixed; z-index: 25;
  left: max(28px, 6vw); top: 50%; transform: translateY(-50%);
  /* Um pouco mais larga (pedido do dono a 18/10/2026: "para nao quebrar as frases"). */
  width: min(520px, 40vw);
  display: flex; flex-direction: column; gap: 10px;
  text-shadow: var(--sombra);
}
body:not(.no-sistema) .ficha:not(.interior), body.em-viagem .ficha { display: none; }
/* Dentro de um planeta ou de uma lua: a mesma ficha, com o que o produto faz. */
.ficha.interior[hidden], body:not(.no-interior) .ficha.interior { display: none; }
.ficha-planeta {
  margin: 0; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ciano); text-shadow: var(--sombra);
}
.interior-itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.interior-itens li { position: relative; padding-left: 18px; font-size: 0.95rem; line-height: 1.45; }
.interior-itens li::before {
  content: ''; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cor, var(--ciano)); box-shadow: 0 0 8px var(--cor, var(--ciano));
}
.interior-dica { margin: 0; font-size: 0.82rem; color: var(--texto); opacity: 0.85; }
.interior-itens[hidden], .interior-secao[hidden], .interior-abas[hidden] { display: none; }
/* As abas do interior, e o que cada uma mostra. */
/* As abas todas numa linha (pedido do dono a 18/10/2026); se a tela for
   estreita demais, a linha desliza para o lado. */
.interior-abas { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.interior-abas::-webkit-scrollbar { display: none; }
.aba {
  flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; cursor: pointer; background: transparent; white-space: nowrap;
  border: 1px solid rgba(220, 230, 255, 0.5); color: var(--texto); font: 500 0.78rem var(--corpo); text-shadow: var(--sombra);
}
.aba[aria-selected="true"] { background: var(--azul); border-color: var(--azul); text-shadow: none; }
.aba:hover { border-color: var(--ciano); }
.interior-secao { display: grid; gap: 8px; }
.interior-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 8px; }
.interior-passos li { counter-increment: passo; position: relative; padding-left: 34px; font-size: 0.95rem; line-height: 1.45; }
.interior-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.8rem var(--display); color: #fff;
  background: var(--cor, var(--azul)); box-shadow: 0 0 10px var(--cor, var(--azul));
}
.interior-planos { display: grid; grid-template-columns: 1fr; gap: 8px; }
.plano { padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(220, 230, 255, 0.45); }
.plano p { margin: 0; }
.plano-nome { font: 700 0.95rem var(--display); }
.plano-chamada { font: 600 0.88rem var(--corpo); color: var(--cor, var(--ciano)); margin: 2px 0 6px !important; }
.plano ul { margin: 0; padding-left: 16px; font-size: 0.86rem; line-height: 1.45; }
.interior-nota { margin: 0; font-size: 0.82rem; }
.interior-grupo { margin: 4px 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ciano); }
/* A ficha do interior rola por dentro se for mais alta que a tela. */
.ficha.interior { max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; }
.ficha-empresa { margin: 0; font-size: 0.78rem; color: var(--suave); max-width: 46ch; }
body.no-interior { cursor: grab; }
/* Nos interiores claros (a cidade de dia), uma sombra suave do lado da
   ficha, so para o texto ler bem; nunca uma tarja. */
body.no-interior::before {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 10, 30, 0.42) 0%, rgba(4, 10, 30, 0.18) 30%, transparent 48%);
}
@media (max-width: 760px) {
  body.no-interior::before { background: linear-gradient(0deg, rgba(4, 10, 30, 0.5) 0%, rgba(4, 10, 30, 0.2) 35%, transparent 55%); }
}
body.no-interior:active { cursor: grabbing; }
.ficha.entra { animation: entra 0.55s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(calc(-50% + 14px)); } to { opacity: 1; transform: translateY(-50%); } }
.ficha-icone { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7)); }
.ficha-estado {
  align-self: flex-start;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.ficha-estado[data-tipo="no-ar"] { color: var(--verde); }
.ficha-estado[data-tipo="breve"] { color: var(--ambar); }
.ficha-estado[data-tipo="obra"] { color: var(--violeta); }
.ficha-nome { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.ficha-texto { margin: 0; color: var(--texto); font-size: 1.02rem; }
.ficha-luas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Os botoes da ficha, todos do mesmo tamanho, um embaixo do outro (pedido do
   dono a 18/10/2026). */
/* ...e com a largura do texto de cima, alinhados com ele dos dois lados
   (pedido do dono a 18/10/2026: tudo na ficha alinhado pela mesma margem). */
/* ...e menores, todos do mesmo tamanho (pedido do dono a 18/10/2026: "este
   tipo de botao faz menor e todos iguais"): uma coluna de 300 px, alinhada a
   esquerda com o texto (ao centro, na ficha da constelacao). */
.ficha-acoes { display: grid; grid-template-columns: minmax(0, 300px); gap: 9px; }
.ficha-acoes .acao { justify-content: center; text-align: center; padding: 9px 18px; font-size: 0.9rem; }
.lua {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; background: transparent;
  border: 1px solid rgba(180, 200, 255, 0.45); font-size: 0.9rem; text-shadow: var(--sombra);
}
.lua:hover { border-color: var(--ciano); }
.ficha-integra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha-integra[hidden] { display: none; }
.ficha-integra-rotulo { flex-basis: 100%; margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ciano); }
.lua.breve { border-style: dashed; color: var(--suave); }
/* A ficha da constelacao (a abertura) centrada na horizontal (pedido do dono
   a 18/10/2026); as fichas dos planetas continuam alinhadas a esquerda. */
/* ...e depois todas as fichas — as do sistema (planetas, luas e o sol) e as
   de dentro dos planetas — com o conteudo centrado e os botoes embaixo, ao
   centro, no mesmo lugar (pedidos do dono a 18/10/2026). As listas ficam
   num bloco ao centro, com o texto de cada item a esquerda. */
.ficha { align-items: center; text-align: center; }
.ficha .ficha-estado { align-self: center; }
.ficha .ficha-acoes { align-self: stretch; justify-content: center; }
.ficha .ficha-email, .ficha .redes-lista, .ficha .ficha-luas, .ficha .ficha-integra,
.ficha .interior-abas { justify-content: center; }
.ficha .ficha-sobre { justify-items: center; }
/* As abas de um interior nunca passam da largura da ficha (19/10/2026): na
   fila unica, com o centro, as do Planeta Ninho (5 abas) saiam pelos dois
   lados no celular, e o dedo arrastava a ficha de lado, a cortar o texto.
   Agora quebram em mais linhas, ao centro, e a ficha so rola na vertical. */
.ficha .interior-abas { flex-wrap: wrap; max-width: 100%; overflow-x: visible; row-gap: 6px; }
.ficha { overflow-x: hidden; touch-action: pan-y; }
.ficha .sobre-valores { justify-content: center; }
.ficha .sobre-fundador { padding-left: 0; border-left: 0; padding-top: 10px; border-top: 2px solid var(--azul); max-width: 46ch; }
.ficha .interior-itens, .ficha .interior-secao { align-self: center; text-align: left; }
/* A frase de abertura, no lugar do nome, um pouco menor. */
.ficha-nome.frase { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.22; max-width: 22ch; }
/* O "Quem somos": cada valor com o nome como subtitulo, e a frase do fundador. */
.ficha-sobre[hidden] { display: none; }
.ficha-sobre { display: grid; gap: 10px; }
.sobre-rotulo { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ciano); }
.sobre-valores { display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); gap: 10px 16px; }
.sobre-valor p { margin: 0; }
.sobre-valor-nome { font: 700 0.95rem var(--display); }
.sobre-valor-texto { font-size: 0.86rem; line-height: 1.4; color: var(--texto); }
.sobre-fundador { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid var(--azul); }
.sobre-fundador blockquote { margin: 0; font-size: 0.95rem; line-height: 1.5; font-style: italic; }
.sobre-fundador figcaption { margin-top: 6px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--suave); }
/* O botao "Quem somos" so com o sistema a vista. */
body:not(.no-sistema) #quem-somos { display: none; }
/* A ficha rola por dentro quando o conteudo e mais alto que a tela. */
.ficha { max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(200, 215, 255, 0.25) transparent; padding-inline: 6px; }
/* Sem uma palavra sozinha na ultima linha. */
.ficha p, .ficha li, .ficha blockquote { text-wrap: pretty; }
@media (max-width: 760px) { .ficha { max-height: 58vh; } .sobre-valores { grid-template-columns: 1fr 1fr; } }
/* As redes da Velox Group: circulos de vidro como no site da VeloxCoin; ao
   passar o mouse acendem na cor da marca. */
.ficha-redes[hidden] { display: none; }
.redes-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 12px; }
.rede {
  display: grid; place-items: center; width: 44px; height: 44px; 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;
}
.rede svg { width: 20px; height: 20px; fill: currentColor; }
.rede:hover, .rede:focus-visible {
  color: var(--cor); border-color: var(--cor); transform: translateY(-2px);
  box-shadow: 0 0 22px var(--cor), inset 0 0 14px color-mix(in srgb, var(--cor) 45%, transparent);
}
.rede[data-rede="tiktok"]:hover, .rede[data-rede="tiktok"]:focus-visible { color: #ffffff; }
.rede[data-rede="tiktok"]:hover svg, .rede[data-rede="tiktok"]:focus-visible svg { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
.acao {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1769e0, #36a4f4); border: 0; color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; text-shadow: none; box-shadow: 0 8px 24px rgba(23, 105, 224, 0.4);
}
.acao.secundaria { background: transparent; border: 1px solid rgba(180, 200, 255, 0.45); box-shadow: none; text-shadow: var(--sombra); }
.ficha-email { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.88rem; }
.ficha-email .email { user-select: all; }
.copiar {
  padding: 4px 12px; border-radius: 999px; cursor: pointer; background: transparent;
  border: 1px solid rgba(180, 200, 255, 0.4); font-family: var(--corpo); font-size: 0.8rem; text-shadow: var(--sombra);
}

.navegacao {
  position: fixed; z-index: 26; right: max(22px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
}
body:not(.no-sistema) .navegacao, body.em-viagem .navegacao { display: none; }
.ponto {
  width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(200, 215, 255, 0.7);
}
.ponto:first-child { border-radius: 3px; }
.ponto[aria-current="true"] { background: var(--ciano); border-color: var(--ciano); box-shadow: 0 0 10px var(--ciano); }

/* As setas da navegacao e a dica de deslizar so existem no celular. */
.seta-nav { display: none; }
.dica-deslizar[hidden], body:not(.no-sistema) .dica-deslizar, body.em-viagem .dica-deslizar { display: none; }
.dica-deslizar {
  position: fixed; z-index: 24; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; pointer-events: none;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(8, 14, 34, 0.72); border: 1px solid rgba(54, 214, 244, 0.45);
  box-shadow: 0 0 24px rgba(54, 214, 244, 0.18);
  animation: dicaEntra 0.6s ease-out both;
}
.dica-trilho {
  position: relative; width: 30px; height: 46px; flex: none;
  border-radius: 15px; background: linear-gradient(rgba(54, 214, 244, 0.28), rgba(54, 214, 244, 0));
}
.dica-mao { position: absolute; left: 50%; bottom: 0; width: 30px; height: 30px; margin-left: -15px; fill: #fff; filter: drop-shadow(0 0 6px rgba(54, 214, 244, 0.9)); animation: dicaSobe 1.6s ease-in-out infinite; }
.dica-texto { display: flex; flex-direction: column; font: 700 0.95rem var(--display); color: #fff; text-align: left; white-space: nowrap; }
.dica-texto small { font-family: var(--corpo); font-size: 0.78rem; font-weight: 400; color: var(--suave); margin-top: 2px; }
@keyframes dicaSobe {
  0% { transform: translateY(6px); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(-22px); opacity: 1; }
  100% { transform: translateY(-22px); opacity: 0; }
}
@keyframes dicaEntra { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dica-mao { animation: none; bottom: 8px; } }

.carregando { position: fixed; z-index: 70; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.8rem; color: var(--suave); }

/* O texto para leitores de tela e buscadores: escondido com o 3D, a vista
   sem ele. */
.so-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.sem-3d { overflow: auto; }
body.sem-3d .so-texto {
  position: static; width: auto; height: auto; clip: auto; white-space: normal;
  max-width: 760px; margin: 0 auto; padding: 110px max(16px, env(safe-area-inset-left, 0px)) 60px;
}
body.sem-3d .so-texto a { color: var(--ciano); }
body.sem-3d #portao, body.sem-3d #painel, body.sem-3d .pular-viagem, body.sem-3d #rever { display: none; }

/* ---- Celular ---- */
@media (max-width: 760px) {
  #topo .logo { height: 26px; }
  .topo-botao { font-size: 0.78rem; padding: 0 11px; }
  .topo-botoes { gap: 6px; }
  /* O painel no celular e o mesmo do computador (pedido do dono a 19/10/2026:
     "o letreiro completo e organizado"): as 5 colunas, o cabecalho e todas as
     linhas, com a letra do tamanho que faz caber as 46 palhetas na largura.
     A conta: 46 palhetas de 0,92em, 4 colunas de 0,5em e a folga do
     cabecalho "Portao" (~1em) = 45,5em, mais as margens. Vale para a partida
     e para a faixa de cima da viagem (o compacto: EM ROTA, CHEGOU). */
  .painel {
    --letra: min(16px, calc((100vw - 28px) / 45.5));
    width: calc(100vw - 12px); padding: 8px 6px 9px;
    top: calc(58px + env(safe-area-inset-top, 0px)); transform: translate(-50%, 0);
  }
  .painel-topo { margin-bottom: 6px; padding: 0 2px; }
  .painel-titulo, .painel-relogio { font-size: clamp(0.78rem, 3.6vw, 1.15rem); }
  .painel-grade { font-size: var(--letra); column-gap: 0.5em; row-gap: 3px; }
  .painel-cabecalho span { font-size: 0.72em; letter-spacing: 0.04em; padding-bottom: 4px; }
  .painel-celula { gap: 0; }
  .palheta { font-size: 1em; width: 0.92em; height: 1.5em; border-radius: 2px; }
  .painel.compacto { top: calc(54px + env(safe-area-inset-top, 0px)); transform: translate(-50%, 0); padding: 6px 6px 7px; }
  .painel.compacto .painel-titulo { font-size: clamp(0.7rem, 3.2vw, 0.9rem); }
  .ficha {
    left: 16px; right: 16px; width: auto; top: auto;
    bottom: max(64px, calc(54px + env(safe-area-inset-bottom, 0px))); transform: none;
    gap: 8px;
  }
  @keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .ficha-icone { width: 42px; height: 42px; }
  .ficha-texto { font-size: 0.93rem; }
  /* Todos os botoes do mesmo tamanho (pedido do dono a 19/10/2026): a mesma
     largura (meia linha) e a mesma altura, que cabe um texto de duas linhas,
     como "Conhecer o painel dos pais"; o texto fica no centro. */
  .ficha-acoes { grid-template-columns: 1fr 1fr; grid-auto-rows: 50px; }
  .ficha-acoes .acao {
    display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 4px 10px; font-size: 0.84rem; line-height: 1.15;
  }
  /* Um botao sozinho na linha (o "Quem somos" da abertura, o ultimo de uma
     conta impar) fica ao centro, da largura dos outros (19/10/2026). */
  .ficha-acoes .acao:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 9px) / 2); }
  /* No celular a abertura fica so com a frase: sem o nome do sol, o V e o
     "Constelacao Velox Group", que enchiam demais (pedido do dono a 19/10/2026). */
  .nome-nucleo { display: none; }
  .ficha.abertura .ficha-icone, .ficha.abertura .ficha-planeta { display: none; }
  .ficha.interior { max-height: 56vh; overflow-y: auto; }
  .interior-itens li { font-size: 0.86rem; }
  .navegacao {
    top: auto; right: 50%; bottom: max(14px, calc(6px + env(safe-area-inset-bottom, 0px)));
    transform: translateX(50%); flex-direction: row; align-items: center; gap: 14px;
  }
  .seta-nav {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
    border-radius: 50%; background: rgba(8, 14, 34, 0.6); border: 1px solid rgba(54, 214, 244, 0.55);
  }
  .seta-nav svg { width: 20px; height: 20px; fill: var(--texto); }
  #portao { bottom: max(22px, calc(14px + env(safe-area-inset-bottom, 0px))); }
}
/* Em tela estreita o texto nao cabe numa linha: o "Ver a viagem de novo" fica so com o icone. */
@media (max-width: 540px) {
  #rever { width: 36px; padding: 0; }
  #rever .rotulo { display: none; }
  #rever .icone-estreito { display: block; }
}
/* Enquanto a torre pede a decolagem, o painel sai da frente. */
body.a-pedir-decolagem .painel { opacity: 0; pointer-events: none; }
/* Telas baixas (celular deitado, janelas pequenas). */
@media (max-height: 560px) {
  #topo .logo { height: 24px; }
  .torre { top: 54%; padding: 12px 16px; gap: 6px; }
  .torre h2 { font-size: 1.1rem; }
  .torre p { font-size: 0.86rem; }
  .autorizar { padding: 10px 20px; font-size: 0.9rem; margin-top: 4px; }
  .contagem { font-size: clamp(3rem, 22vh, 8rem); }
  .painel.compacto { top: calc(44px + env(safe-area-inset-top, 0px)); transform: translate(-50%, 0) scale(0.66); }
  .portao-titulo { font-size: 1.05rem; }
  .portao-texto, .portao-nota { font-size: 0.82rem; }
  .embarcar, .pular { padding: 10px 20px; }
  .ficha { gap: 6px; }
  .ficha-nome { font-size: 1.3rem; }
  .ficha-texto { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha.entra, .torre, .autorizar, .contagem.pulsa { animation: none; }
}