/* ============================================================
   NAV — Botões de destaque (Fórum e Xenos)
   Arquivo NOVO e isolado. Nenhuma regra existente é redefinida:
   tudo vive sob .navcta. Para remover, apague o <link> e o arquivo.

   Os dois botões são deliberadamente DIFERENTES entre si — eles
   levam a lugares de natureza distinta e o topo precisa comunicar
   isso antes do clique:

   • FÓRUM  — contorno ciano, vazado. É a cor institucional do
              acervo. Vazado = "espaço de leitura e conversa".
   • XENOS  — preenchido verde-lima, com brilho. Cor que o site já
              usa como segundo canal no comparador 3D. Preenchido
              = "aqui você entra e joga".
   ============================================================ */

.site-nav .navcta {
  --cta-cor: var(--neon, #00f3ff);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--cta-cor);
  border-radius: 999px;
  font-family: var(--f-mono, 'Share Tech Mono', monospace);
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cta-cor);
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.site-nav .navcta .ic { font-size: .95rem; line-height: 1; }

.site-nav .navcta:hover,
.site-nav .navcta:focus-visible {
  background: color-mix(in srgb, var(--cta-cor) 16%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cta-cor) 35%, transparent);
  transform: translateY(-1px);
}

.site-nav .navcta:focus-visible { outline: 2px solid var(--cta-cor); outline-offset: 2px; }

/* Navegador sem color-mix: mantém contraste com rgba fixo. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .site-nav .navcta--forum:hover { background: rgba(0, 243, 255, .16); }
  .site-nav .navcta--jogo:hover  { background: rgba(57, 255, 20, .16); }
}

/* ---- FÓRUM: vazado, ciano institucional ---- */
.site-nav .navcta--forum {
  --cta-cor: var(--neon, #00f3ff);
  background: transparent;
}

/* ---- XENOS: preenchido, verde-lima, com pulso discreto ---- */
.site-nav .navcta--jogo {
  --cta-cor: #39ff14;
  background: rgba(57, 255, 20, .12);
  box-shadow: 0 0 14px rgba(57, 255, 20, .18);
  font-weight: 700;
}
.site-nav .navcta--jogo::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14;
  animation: navctaPulso 2.4s ease-in-out infinite;
}
@keyframes navctaPulso {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* Estado ativo: você está na seção. */
.site-nav .navcta.on {
  background: var(--cta-cor);
  color: #04202a;
  font-weight: 700;
}
.site-nav .navcta.on::after { background: #04202a; box-shadow: none; }

/* ---- Mobile: o nav rola na horizontal; os CTAs não podem encolher ---- */
@media (max-width: 680px) {
  .site-nav { gap: 10px; padding-right: 14px; }
  .site-nav .navcta { padding: 6px 11px; font-size: .64rem; letter-spacing: 1px; }
  .site-nav .navcta .rot-longo { display: none; }
}

/* Toque confortável em telas pequenas sem alterar a altura do nav. */
@media (max-width: 480px) {
  .site-nav .navcta { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .navcta { transition: none; }
  .site-nav .navcta--jogo::after { animation: none; opacity: .9; }
}