/* O GRADIENTE DA CASA — roxo da Íris, azul da NONA VISÃO.
 *
 * 🔴 ELE VIVE NO CROMO: título, botão, trilho, foco, borda de destaque.
 * 🔴 NUNCA NO DADO: número, barra, anel e semáforo usam a paleta fixa. Duas coisas comparadas
 *    com cores diferentes viram exercício de memória de cor.
 */
:root {
  --nv-roxo: #7C4DFF;
  --nv-azul: #28D7F7;
  --nv-grad: linear-gradient(90deg, #7C4DFF 0%, #28D7F7 100%);
  --nv-fundo: #090B12;
  --nv-superficie: #121826;
  --nv-borda: rgba(255, 255, 255, 0.06);
  --nv-texto: #F8FAFC;
  --nv-texto-suave: #94A3B8;
}

/* Texto com o gradiente. O `color` de reserva importa: em navegador que não recorta o fundo
   no texto, sem ele a frase fica invisível — e uma manchete invisível é pior que sem efeito. */
.nv-grad-texto {
  background: var(--nv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--nv-roxo);
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nv-grad-texto { -webkit-text-fill-color: currentColor; background: none; color: var(--nv-roxo); }
}

.nv-grad-fundo { background: var(--nv-grad); }
.nv-grad-trilho { height: 1px; background: var(--nv-grad); opacity: 0.4; }
.nv-botao {
  background: var(--nv-grad);
  color: var(--nv-texto);
  border: 0; border-radius: 14px; padding: 12px 20px;
  font-weight: 600; cursor: pointer; transition: filter .15s;
}
.nv-botao:hover { filter: brightness(1.1); }
.nv-botao:focus-visible { outline: 2px solid var(--nv-azul); outline-offset: 2px; }