/* MEDIDA DE LEITURA EM px, NAO EM ch
   `ch` e a largura do caractere "0" da fonte ATUAL. Medido em producao: 72ch
   valia 621px com o fallback e 702,72px com a Manrope — 82px de diferenca. Quando
   a fonte trocava (display=swap), todo bloco com medida em ch mudava de largura e
   o texto refluia: CLS de 0,02 a 0,06 em laptop, desktop e wide.
   Os valores em px abaixo sao os equivalentes COM a fonte real aplicada, entao a
   medida de leitura e a mesma — sem depender de qual fonte esta carregada. */
/* ==========================================================================
   POLTERS — Base / Design Tokens
   --------------------------------------------------------------------------
   Direção: dark fantasy competitivo. Preto e grafite dominam a superfície.
   O roxo POLTERS é identidade e acento — nunca banho de cor.

   Decisões tipográficas (o cliente reprovou as fontes anteriores):
   - Display: Oswald. Condensada, vertical, autoritária. Conversa com a
     logo rasgada da guilda e com o registro de e-sport competitivo.
     Substitui Cinzel, que é o serif "fantasy genérico" padrão.
   - Corpo: Manrope. Humanista de contraste baixo, ótima em fundo escuro,
     numerais tabulares reais para o contador. Substitui Inter.
   - O par tem contraste de eixo (condensada x humanista), não duas
     grotescas parecidas.
   ========================================================================== */

:root {
  /* --- Superfícies --- */
  --bg:            #08080b;
  --bg-alt:        #0b0b10;
  --surface:       #101017;
  --surface-2:     #16161f;
  --line:          #1f1f2b;
  --line-strong:   #2b2b3a;
  --line-accent:   rgba(139, 92, 246, 0.24);

  /* --- Texto --- */
  --text:          #f4f4f8;
  --text-soft:     #b4b4c4;   /* elevado p/ contraste AA em corpo de texto */
  --text-dim:      #7d7d90;   /* elevado: 6e6e80 falhava contraste */

  /* --- Roxo POLTERS --- */
  --purple:        #7c3aed;
  --purple-600:    #6d28d9;
  --violet:        #8b5cf6;
  --lilac:         #c4b5fd;

  /* --- Feedback (recrutamento por classe) --- */
  --ok:            #34d399;
  --warn:          #fbbf24;
  --closed:        #8b8b9c;   /* elevado p/ legibilidade */

  /* --- Tipografia --- */
  --font-display: 'Oswald', 'Oswald-fallback', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;

  /* --- Escala tipográfica ---
     Primeiro havia seis tamanhos entre 0.70 e 0.78rem, separados por 0.02rem —
     ruído, não hierarquia. Colapsei em três, mas ficou o problema oposto: os
     três degraus estavam a 1,12x e 1,09x um do outro, e a página media 19
     tamanhos distintos com DOZE deles entre 1,00x e 1,10x de distância. Numa
     escala assim nenhum degrau é perceptível: tudo parece "mais ou menos do
     mesmo tamanho", e é isso que faz uma página parecer amadora.

     A escala agora tem razão ~1,25x entre degraus, que é o mínimo para o olho
     registrar a diferença sem medir:

       0.875 → 1 → 1.25 → 1.5(rem)
        14px  16   20     24

     O piso subiu de 13,1px para 14px. Abaixo de 14px em fundo escuro o texto
     perde peso aparente e vira cinza. */
  --fs-micro: 0.875rem;  /* labels, badges, metadados — 14px */
  --fs-ui:    1rem;      /* botões, nav, interface — 16px */
  --fs-body:  1.125rem;  /* corpo de texto — 18px */

  /* --- Layout --- */
  --wrap:      1180px;
  --wrap-read: 780px;
  --radius:    12px;
  --radius-sm: 8px;
  --header-h:  68px;

  /* --- Motion ---
     ease-out exponencial: sai rápido, assenta suave. Sem bounce.

     ESCALA DE DURAÇÃO (Fluid Functionalism)
     Antes havia dois tokens: --t (340ms) e --t-fast (180ms), e o --t servia
     tanto para `color` em hover (que percorre 0px) quanto para o drawer do
     menu (que atravessa a tela). Um token para dois papéis opostos: a cor
     ficava lenta e o drawer, apressado.

     A escala agora é escolhida por DISTÂNCIA PERCORRIDA + IMPORTÂNCIA:

       --t-fast  80ms   hover, cor, fade em elemento pequeno
       --t      160ms   indicador deslizante, tooltip, botão que aparece
       --t-slow 240ms   drawer, painel lateral, overlay de tela inteira

     240ms é o extremo LENTO da escala. Um drawer de 600ms não é suave,
     é atrasado. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast:    0.08s;
  --t:         0.16s;
  --t-slow:    0.24s;

  /* SAÍDA É MAIS RÁPIDA QUE ENTRADA.
     Entrando, o movimento guia o olho até algo novo. Saindo, o usuário já
     decidiu — esperar a animação é atrito. Uma saída rápida sinaliza
     conclusão e mantém o ritmo da interação.

     Em CSS, a transition declarada no estado de REPOUSO governa a volta.
     Por isso o repouso recebe --t-exit-* e o estado aberto recebe --t/--t-slow. */
  --t-exit:      0.1s;
  --t-exit-slow: 0.16s;

  /* --- Camadas --- */
  --z-sticky: 40;
  --z-header: 100;
  --z-drawer: 90;
  --z-skip:   200;
}

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

html {
  /* Sem scroll-behavior: smooth aqui. O slide das âncoras é feito em JS
     (main.js), com duração e curva controladas. Os dois juntos brigam:
     o nativo assume o clique e ignora o easing. */
  scroll-padding-top: calc(var(--header-h) + 14px);
  -webkit-text-size-adjust: 100%;
  /* NÃO adicionar overflow-x aqui.
     A 320px o documento mede 329px de scrollWidth porque `overflow-x: hidden`
     no body o torna contexto de scroll e o valor propaga para o html. Parece
     overflow, mas não é: medido, arrastar de lado devolve 0 — o usuário não
     consegue rolar horizontalmente.
     Tentei `overflow-x: clip` para zerar o número. Zerou, e ADICIONOU 0,047 de
     CLS: o body passou a se posicionar em y=0 antes do CSS completo e caía para
     y=68 depois. Trocar um artefato de medição por um deslocamento visível é
     piorar. Revertido de propósito. */
}

/* Fallback: sem JS, o navegador cuida da rolagem suave */
html:not(.js) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--purple);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { left: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}

/* O <main> é transformado durante a transição lateral entre seções.
   backface/perspective evitam tremor de texto no meio do movimento. */
main {
  /* flow-root impede que a primeira margem de bloco do conteúdo atravesse
     o <main> e desloque a página (margin collapsing). */
  display: flow-root;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* RITMO VERTICAL
   Medido antes: 104/104 em quatro seções e 148/148 em duas. Dois valores, ambos
   simétricos, aplicados por reflexo — a página tinha batida de metrônomo. Um
   scroll longo precisa de compasso: blocos que respiram e blocos que apertam.

   Três degraus agora, e o padding é ASSIMÉTRICO (o topo maior que a base). Isso
   importa porque o título de uma seção precisa de ar acima dele para começar,
   enquanto o fim de um bloco já é seguido pelo topo do próximo — somar dois
   paddings iguais criava vãos mortos de 200px+ entre seções. */
.section       { padding: clamp(56px, 7vw, 92px) 0 clamp(44px, 5.5vw, 72px); }
.section--tall { padding: clamp(84px, 10vw, 132px) 0 clamp(64px, 8vw, 104px); }
/* Seção comprimida: usada quando o bloco é curto e não deve parecer uma pausa */
.section--tight{ padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 4.5vw, 56px); }
.section--alt  { background: var(--bg-alt); }

/* Pula render e layout do que está fora da viewport.
   IMPORTANTE: não pode ser aplicado a seções que contenham .reveal.
   `content-visibility: auto` suspende transições de elementos fora de render,
   então o reveal ficava congelado em opacity 0 mesmo com .is-visible aplicado
   — quatro pilares sumiam no mobile. O ganho de render aqui é pequeno; a
   correção está em usar o recurso apenas onde não há animação de entrada.
   O guia, que tem 12 capítulos longos e nenhum reveal, continua usando. */
.section--skip {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ---------- Título de seção ----------
   Sem eyebrow tracked-caps acima de cada bloco. A hierarquia vem do
   tamanho e do peso da display, e o contexto vem de uma linha de apoio
   em texto normal quando faz falta. */
/* 49,6px medido no desktop contra um lead de 17,6px: razão 2,8x, o que faz o
   lead parecer legenda. E o título de seção estava a 1,03x do título da Bíblia
   (51,2px) — dois pesos quase idênticos disputando a mesma função.
   Reduzido para 2.65rem e o espaço abaixo cresceu: o respiro entre título e
   texto (medido em 16px) era metade do necessário. */
.section-title {
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

/* Marcador de contexto. Aparece em 3 lugares (recrutamento, Bíblia, guia) —
   pouco o bastante para não virar gramática de seção. Mantido em caixa alta
   porque os dois usos são nomes próprios de sistema ("AION 2 Global ·
   Recrutamento", "POLTERS Knowledge Base"), mas sem tracking somado. */
.section-tag {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-bottom: 12px;
}

/* 73ch medido no desktop, acima do teto de 65–75ch e no limite do confortável.
   62ch dá uma coluna que o olho percorre sem perder a linha de volta. */
/* 18,4px medido no desktop, a 1,04x de .bible-cta__text e 1,03x de .spec__v —
   três tamanhos disputando a mesma função sem que nenhum vença.
   Fixado em --fs-body (18px): é o degrau de corpo de texto da escala. Um lead
   de seção É corpo de texto com mais respiro, não um tamanho próprio. */
.section-lead {
  color: var(--text-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 605px;
}

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Preenchimento que corre da esquerda no hover.
   Anima transform num pseudo com cantos estáveis — sem cap arredondado
   virando reto no meio da transição. */
.btn--primary {
  background: var(--purple);
  color: #fff;
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--purple-600);
  transform: translateX(-101%);
  transition: transform var(--t) var(--ease-quart);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: none; }

/* Secundário definido por superfície, não por contorno */
.btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(139, 92, 246, 0.22);
  color: #fff;
}

/* Feedback tátil no toque/clique. Sem escala vinda de 0 — parte de 1. */
.btn:active { transform: scale(0.975); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* 44px é o mínimo confortável de toque. Antes estava 42. */
.btn--sm { min-height: 44px; padding: 11px 18px; font-size: var(--fs-ui); }
.btn--block { width: 100%; }

/* Seta que avança no hover — motion ligada ao significado do botão */
.btn__arrow {
  display: inline-block;
  transition: transform var(--t) var(--ease-quart);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Superfície de conteúdo ----------
   Sem card-lift default: nada de translateY + sombra + borda acesa.
   A resposta ao hover é uma mudança de tom e de borda, discreta. */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
}

/* ---------- Reveal seguro ----------
   O conteúdo é VISÍVEL por padrão. O estado inicial da animação só é
   aplicado quando o JS confirma que vai reverter (classe .js no <html>).
   Sem JS, aba em background, ou observer que não dispara: o texto está lá.

   A regra .is-visible é declarada DEPOIS e com a mesma especificidade, para
   vencer sempre. Isso importa porque `content-visibility: auto` congela
   transições de elementos fora de render: a classe chega, mas a transição
   não roda e o elemento fica preso em opacity 0. Com um estado final
   explícito, o valor é aplicado direto, sem depender da animação concluir. */
.reveal { opacity: 1; transform: none; }

html.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(14px);
}
/* 550ms era 3,4x o token para um deslocamento de 14px. Um bloco de texto que
   leva mais de meio segundo para aparecer é lido como atraso, não como
   elegância — e num scroll rápido o conteúdo chega depois do olho.
   240ms cobre a distância e ainda assenta suave. */
html.js .reveal {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html, html:not(.js) { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  /* Reduced motion recebe crossfade, não deslocamento */
  html.js .reveal:not(.is-visible) { opacity: 1; transform: none; }
}