/*
 * s1stema — o site (beta). A base: fontes, cores, fundo, topo e abertura.
 *
 * O mundo é o do app (tema "Sistema"), depurado: azul-marinho, uma grade
 * viva, um neon. As fontes se alternam por papel —
 *   Geist (prosa e títulos, limpa) e Instrument Serif (ênfase, elegante);
 *   Rajdhani, Chakra Petch e Chivo Mono (as do programa: HUD, réplicas
 *   do app e números).
 * Movimento só em transform e opacity; nada anima com "reduzir movimento".
 */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/Rajdhani-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/Rajdhani-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/ChivoMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/ChivoMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --vazio: #02060f;
  --vazio-2: #040b1a;
  --painel: #0a1a36;
  --vidro: rgba(10, 30, 66, 0.5);
  --neon: #3fd4ff;
  --neon-forte: #9ae8ff;
  --neon-rgb: 63, 212, 255;
  --azul: #22a8ff;
  --marca-azul: #1b56ff;
  --texto: #f3f5f8;
  --texto-2: #c7d4e4;
  --texto-3: #93b2d1;
  --fio: rgba(140, 210, 255, 0.14);
  --fio-forte: rgba(140, 210, 255, 0.28);
  --ok: #3dffb0;
  --nao: #ff5a7a;
  --alerta: #ff3b4f;
  --alerta-claro: #ffb3bb;
  --alerta-rgb: 255, 59, 79;

  --f-sans: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-hud: 'Rajdhani', 'Segoe UI Semibold', sans-serif;
  --f-app: 'Chakra Petch', 'Segoe UI', sans-serif;
  --f-num: 'Chivo Mono', ui-monospace, 'Consolas', monospace;

  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --mover: cubic-bezier(0.77, 0, 0.175, 1);

  --margem: clamp(1.25rem, 5vw, 4.5rem);
  --largura: 75rem;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * A página inteira é medida em rem e cresce junto com a tela: a régua é a
 * composição de 1707 × 887 (um monitor 1440p com o zoom do navegador em
 * 150%). Acima disso, 1080p, 1440p e 4K mostram a MESMA tela, só maior
 * (16 px ÷ 1707 = 0,9375vw; 16 px ÷ 887 ≈ 1,8vh — vale o menor, para a
 * abertura caber na altura). Abaixo, 16 px de sempre (ou o tamanho que a
 * pessoa escolheu no navegador).
 */
html {
  font-size: clamp(1rem, min(0.9375vw, 1.8vh), 2rem);
  scroll-behavior: smooth;
  /* O topo é fixo: âncoras e o "pular para o conteúdo" param abaixo dele. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--vazio);
  color: var(--texto-2);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: rgba(var(--neon-rgb), 0.32);
  color: var(--texto);
}

:focus-visible {
  outline: 0.125rem solid var(--neon-forte);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}

html {
  scrollbar-color: rgba(var(--neon-rgb), 0.35) var(--vazio);
}

h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

/* A ênfase elegante: a frase que muda de voz no meio do título. */
.serifa {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--neon-forte);
}

.pular {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--texto);
  color: var(--vazio);
  font-weight: 600;
  transform: translateY(-150%);
}

.pular:focus-visible {
  transform: none;
}

/* ---------- o fundo: a grade do app, viva ---------- */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(68.75rem 38.75rem at 82% -8%, rgba(9, 43, 128, 0.55), transparent 62%),
    radial-gradient(56.25rem 37.5rem at 6% 108%, rgba(9, 43, 128, 0.4), transparent 60%),
    var(--vazio);
}

/* Grade fina parada no céu; o piso em perspectiva anda (o zoom do login). */
.fundo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(90, 170, 255, 0.07) 0 1px, transparent 1px) 0 0 / 4rem 4rem,
    linear-gradient(0deg, rgba(90, 170, 255, 0.07) 0 1px, transparent 1px) 0 0 / 4rem 4rem;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent 85%);
}

.fundo__piso {
  position: absolute;
  top: 62%;
  left: -50%;
  right: -50%;
  height: 80%;
  background:
    linear-gradient(90deg, rgba(var(--neon-rgb), 0.35) 0 1px, transparent 1px 4rem) 50% 0 / 4rem
      100%,
    linear-gradient(0deg, rgba(var(--neon-rgb), 0.35) 0 1px, transparent 1px 4rem) 0 0 / 100% 4rem;
  transform: perspective(26.25rem) rotateX(64deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(0deg, black 15%, transparent 90%);
  opacity: 0.55;
  animation: piso 4s linear infinite;
}

@keyframes piso {
  from {
    transform: perspective(26.25rem) rotateX(64deg) translateY(0);
  }
  to {
    transform: perspective(26.25rem) rotateX(64deg) translateY(4rem);
  }
}

/* ---------- o topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* As bordas do topo são as mesmas do conteúdo, em qualquer largura. */
  padding: 1rem max(var(--margem), calc((100% - var(--largura)) / 2));
  background: linear-gradient(
    180deg,
    rgba(2, 6, 15, 0.96) 0%,
    rgba(2, 6, 15, 0.88) 62%,
    rgba(2, 6, 15, 0) 100%
  );
}

.topo__esq {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.selo-beta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border: 1px solid rgba(var(--alerta-rgb), 0.5);
  border-radius: 999px;
  background: rgba(var(--alerta-rgb), 0.1);
  font-family: var(--f-hud);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--texto);
}

.selo-beta__nome {
  font-weight: 700;
  white-space: nowrap;
  color: var(--alerta-claro);
}

.selo-beta__nota {
  letter-spacing: 0.06em;
  color: var(--alerta-claro);
  opacity: 0.85;
}

/* O selo do topo é o aviso de beta fechado: vermelho inteiro. O ponto
   solto (no fim da página) continua no azul. */
.selo-beta .selo-beta__ponto {
  background: var(--alerta);
}

.selo-beta__ponto {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--neon);
}

.idioma {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--fio);
  border-radius: 999px;
}

.idioma__op {
  min-width: 2.375rem;
  min-height: 1.875rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-3);
  font-family: var(--f-hud);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 120ms var(--saida);
}

.idioma__op[aria-pressed='true'] {
  background: rgba(var(--neon-rgb), 0.16);
  color: var(--texto);
}

.idioma__op:active {
  transform: scale(0.96);
}

.marca {
  display: block;
  line-height: 0;
  border-radius: 0.25rem;
}

.marca svg {
  width: clamp(6.5rem, 12vw, 9.25rem);
  height: auto;
}

.marca__claro {
  fill: #fff;
}

.marca__azul {
  fill: var(--marca-azul);
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--saida),
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.botao--primario {
  background: var(--texto);
  color: var(--vazio);
  box-shadow: 0 0.625rem 1.875rem -0.75rem rgba(var(--neon-rgb), 0.55);
}

.botao--primario:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .botao--primario:hover {
    background: #fff;
    box-shadow: 0 0.875rem 2.375rem -0.75rem rgba(var(--neon-rgb), 0.75);
  }
}

.botao--travado {
  border: 1px dashed var(--fio-forte);
  color: var(--texto-3);
  cursor: not-allowed;
}

.botao__nota {
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: rgba(var(--neon-rgb), 0.1);
  color: var(--neon-forte);
  font-family: var(--f-num);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}