/* 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 — Landing Page
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header, 100);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
/* O header nao muda mais de DIMENSAO ao rolar: a transicao acima cobre
   fundo e borda, que e o que separa a faixa do conteudo por baixo.
   A regra que animava `height` foi removida junto com o encolhimento da
   logo — as duas somavam o mesmo efeito que o cliente apontou. */
/* Ao rolar, o header ganha densidade em vez de uma régua embaixo */
.header.is-scrolled {
  /* altura NAO muda mais no scroll: so o fundo e a sombra. O cliente
     apontou a logo trocando de tamanho, e o header encolhendo 10px era a
     outra metade do mesmo efeito. */
  background: rgba(5, 5, 10, 0.97);
}
/* A logo tem UMA altura, em qualquer posicao de scroll. */

@media (prefers-reduced-motion: reduce) {
  /* Nada de dimensao muda no scroll, entao aqui so resta neutralizar a
     transicao de cor. */
  .header, .logo__img { transition: background-color 0.15s linear; }
}

.header__inner {
  /* Altura fixa: sem isto o header oscila quando a fonte carrega e gera CLS */
  height: 100%;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- Logo: o wordmark oficial da guilda ---
   Era montado em tipografia ("POL" branco + "TERS" lilás, em Oswald), que é
   aproximação: a arte real tem a textura rasgada/pintada que o briefing
   descreve na seção 4, e nenhuma fonte reproduz isso.

   A caixa cobre a altura do header, não a altura do glifo — a área clicável
   pega a faixa inteira em volta do wordmark. Antes media 128x23. */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}

/* A altura manda; a largura vem do aspect-ratio da arte (1968/788 medido no
   recorte da tinta real, não da moldura do arquivo). Declarar as duas evita
   que o navegador precise da imagem para saber o espaço — reserva desde a
   primeira pintura e não gera CLS.
   ATENÇÃO: a altura também está no CSS crítico inline dos DOIS HTML, e a altura
   do header depende dela — mudar num lugar só reintroduz CLS. */
.logo__img {
  display: block;
  height: 30px;
  width: auto;
  aspect-ratio: 1968 / 788;
  /* A arte tem o roxo da marca. Um brilho discreto no hover responde ao toque
     sem inventar cor: aumenta a luminosidade do que já está lá. */
  /* sem transicao de height: a altura nao muda em nenhum estado */
  transition: filter var(--t) var(--ease);
}
.logo:hover .logo__img,
.logo:focus-visible .logo__img { filter: brightness(1.14); }

@media (max-width: 560px) {
  /* No celular o header tem 60px: o wordmark cede 4px para manter a mesma
     proporção de respiro em volta. */
  .logo__img { height: 26px; }
}

/* --- Navegação desktop ---
   O sublinhado é UM elemento só, que desliza de um item para o outro.
   Antes cada link tinha o próprio ::after: o traço piscava fora e dentro
   em vez de viajar. Agora ele percorre a distância. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__link {
  position: relative;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--text); }

/* Indicador deslizante.
   Ele ESTICA na direção do movimento e volta ao tamanho ao assentar —
   como um traço que ganha inércia. O esticamento vem de --ind-stretch,
   escrito pelo JS conforme a distância percorrida. Um traço que só
   translada com largura fixa é justamente a versão fraca. */
.nav__indicator {
  position: absolute;
  bottom: 1px;
  left: 0;
  height: 2px;
  width: var(--ind-w, 0px);
  background: var(--violet);
  transform: translate3d(var(--ind-x, 0px), 0, 0) scaleX(var(--ind-stretch, 1));
  transform-origin: var(--ind-origin, left) center;
  opacity: 0;
  pointer-events: none;
  /* 500ms era 3,1x o token. O traço percorre no máximo a largura da nav, e
     precisa acompanhar o cursor: acima de ~250ms ele fica ATRÁS do ponteiro,
     que é o oposto de dar resposta. 240ms mantém o esticamento legível. */
  transition: transform var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1),
              width var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1),
              opacity var(--t-exit) var(--ease);
}
.nav__indicator.is-on { opacity: 1; }

/* Rastro: uma segunda camada mais larga e translúcida, atrasada, que dá
   a leitura de velocidade sem virar glow difuso. */
.nav__indicator::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: var(--violet);
  opacity: 0.32;
  filter: blur(3px);
  transform: scaleX(var(--ind-stretch, 1));
  transform-origin: inherit;
  /* O rastro fica ligeiramente atrás do traço principal — é o que dá a
     leitura de velocidade. Mantém a proporção anterior (1,24x) sobre a nova
     duração, em vez dos 620ms absolutos. */
  transition: transform calc(var(--t-slow) * 1.24) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .nav__indicator { transition: opacity 0.15s linear; }
  .nav__indicator::after { display: none; }
}

/* Sem JS: cada link volta a ter seu próprio traço estático */
html:not(.js) .nav__link[aria-current='page']::after,
html:not(.js) .nav__link:hover::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--violet);
}

.header__cta { display: inline-flex; }

/* --- Hambúrguer --- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: var(--radius-sm);
}
.burger__bars {
  position: relative;
  width: 19px;
  height: 1.5px;
  background: var(--text);
  transition: background-color var(--t-fast) var(--ease);
}
.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--t) var(--ease-quart);
}
.burger__bars::before { top: -6px; }
.burger__bars::after  { top: 6px; }

.burger[aria-expanded='true'] .burger__bars { background: transparent; }
.burger[aria-expanded='true'] .burger__bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Drawer mobile --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: var(--z-drawer, 90);
  background: rgba(5, 5, 10, 0.99);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 22px 26px;
  display: grid;
  gap: 2px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  /* Estado de repouso = caminho de SAÍDA. Mais curto: quem fechou o menu já
     decidiu, e esperar a animação é atrito. */
  transition: transform var(--t-exit-slow) var(--ease),
              opacity var(--t-exit-slow) var(--ease),
              visibility var(--t-exit-slow) var(--ease);
}
/* Estado aberto = caminho de ENTRADA. Um pouco mais longo: o movimento guia
   o olho até o menu que acabou de aparecer. */
.mobile-nav.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-duration: var(--t-slow);
}

/* Itens sem régua entre eles: separação por tom no toque/hover */
.mobile-nav a:not(.btn) {
  padding: 16px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.mobile-nav a:not(.btn):hover,
.mobile-nav a:not(.btn):active {
  color: var(--text);
  background: rgba(139, 92, 246, 0.08);
}
.mobile-nav .btn { margin-top: 18px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 56px) 0 84px;
  overflow: hidden;
  isolation: isolate;
  /* Piso escuro: a arte é composta SOBRE isso, não apagada até virar isso */
  background: #05050a;
}

/* --------------------------------------------------------------------------
   ARTE DO HERO
   A versão anterior matava a imagem: opacity 0.42 + grayscale 0.3 sobre uma
   arte cujo foco tem luminância ~53 resultava em ~22. Lavada.
   Agora a arte vem quase em força total e a legibilidade do texto é resolvida
   por uma máscara DIRECIONAL, que escurece só a coluna da esquerda.
   -------------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: -6% -4%;      /* folga para o parallax não revelar borda */
  z-index: -3;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 68% é o centroide de luz MEDIDO na arte (x=68,6%), não um chute: com a
     nova proporção de 3:2 contra a caixa de ~1,6:1 o corte horizontal no
     desktop é 0px, então este valor só decide o enquadramento do olhar. */
  object-position: 68% center;
  opacity: 0.92;
  /* Satura o roxo em vez de dessaturar. Sem grayscale.
     A arte nova chega com luminância média 23,4 e 0% de pixel estourado, então
     o contraste tem margem para trabalhar sem queimar highlight. */
  filter: contrast(1.14) saturate(1.22) brightness(0.92);
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.04);
  will-change: transform;
}

/* Camada de brasa: intensifica as chamas roxas da própria arte.
   screen soma luz onde a arte já é clara, não inventa glow no vazio. */
.hero__ember {
  position: absolute;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(38% 46% at 62% 38%, rgba(139, 92, 246, 0.5), transparent 68%),
    radial-gradient(30% 38% at 78% 62%, rgba(109, 40, 217, 0.42), transparent 70%),
    radial-gradient(24% 30% at 52% 70%, rgba(167, 139, 250, 0.26), transparent 72%);
  animation: ember-drift 19s var(--ease) infinite alternate;
  /* Isola a camada: a animação infinita não força repintura do resto */
  contain: strict;
  will-change: transform;
}

/* A animação é decorativa e roda para sempre. Pausa quando o hero sai de
   vista (classe posta pelo JS) para não gastar GPU com o que ninguém vê. */
.hero.is-offscreen .hero__ember { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero__ember { animation: none; }
}

/* Deriva lenta e assimétrica. Anima só transform — sem custo de layout. */
@keyframes ember-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); }
  100% { transform: translate3d(1.8%, -1.2%, 0) scale(1.02); }
}

/* Máscara direcional: protege a coluna do texto e resolve na faixa seguinte.
   Um gradiente forte à esquerda em vez de três empilhados cobrindo tudo. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      #05050a 0%,
      rgba(5, 5, 10, 0.94) 26%,
      rgba(5, 5, 10, 0.62) 46%,
      rgba(5, 5, 10, 0.12) 68%,
      transparent 88%),
    /* vinheta discreta nos cantos, sem virar moldura */
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(5, 5, 10, 0.5) 100%),
    /* costura com a seção do countdown */
    linear-gradient(to top, var(--bg-alt) 0%, rgba(11, 11, 16, 0.7) 6%, transparent 26%);
}

.hero__inner {
  position: relative;
  /* 740px media ~93ch — o bloco inteiro do hero ocupava metade da tela sem
     precisar. 620px aperta a coluna e deixa mais da arte respirando à direita,
     que é o que o mockup do cliente mostra. */
  max-width: 620px;
  /* Reserva de altura: impede que o hero encolha quando a fonte carrega.
     Recalculada com o cronômetro dentro do bloco (~120px da faixa). */
  min-height: 620px;
}

/* "Nós somos a" em caixa normal.
   Era uppercase com 0.3em de tracking — 4,8px entre letras num texto de 16px.
   Isso é a assinatura do "eyebrow" de 2023: caps minúsculas espaçadas acima de
   um título. Como frase falada ("nós somos a POLTERS"), caixa alta a torna um
   rótulo de sistema em vez de uma voz. Em caixa normal ela LÊ como fala, e o
   contraste com o wordmark gigante abaixo fica maior, não menor. */
/* 16,8px medido, a 1,01x de .spec__v e 1,05x do corpo: invisível como degrau.
   Vai para --fs-body (18px). "Nós somos a" é a linha que apresenta a marca —
   merece o degrau de corpo, não um valor intermediário sem função. */
.hero__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  margin-bottom: 6px;
}

/* Título em cor sólida. Sem gradient-in-text.
   A sombra é tight e direcional (uma fonte de luz), não um halo radial.

   ANTES: clamp(4.2rem, 15.5vw, 9rem) resolvia em 144px num monitor de 1440px.
   O teto de um display é ~96px: acima disso a página grita em vez de desenhar,
   e a palavra POLTERS ficava com a largura de meia tela sem ganhar presença —
   só volume. O peso vem do contraste com o que está em volta, não do tamanho
   absoluto. Teto agora em 5.5rem (88px), e o mobile em 15vw para caber. */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 12vw, 5.5rem);
  font-weight: 700;
  /* -0.01em: Oswald é condensada e já vem apertada; tracking positivo em caixa
     alta grande abre buracos entre as hastes. */
  letter-spacing: -0.005em;
  line-height: 0.9;
  color: var(--text);
  margin-bottom: 18px;
  text-shadow: 0 2px 18px rgba(5, 5, 10, 0.85);
}

/* Metadados do servidor: AION 2 / South America / Asmodians.
   Aqui a caixa alta se justifica — são NOMES PRÓPRIOS curtos, não uma frase, e
   funcionam como placa de identificação. Mas 0.13em de tracking somado a
   uppercase era demais: reduzido para 0.06em, e o tamanho subiu para 1rem
   porque este é o dado que qualifica a guilda, não uma legenda. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-bottom: 26px;
}
.hero__meta span:not(:last-child)::after {
  content: '/';
  margin-left: 13px;
  color: var(--text-dim);
}

/* CONSOLIDAÇÃO DA ESCALA (medido, não estimado)
   A faixa de 16 a 21px tinha NOVE tamanhos distintos com nove pares a menos de
   1,10x de distância: 21,1 · 20,8 · 19,2 · 18,4 · 17,3 · 17,0 · 16,8 · 16,3 · 16.
   Cada um vinha de um clamp() próprio resolvendo num valor arbitrário do
   viewport. A escala documentada tem razão ~1,25x, mas isso valia só para os
   degraus grandes; no corpo de texto a hierarquia havia se dissolvido.

   Depois de consolidar: 18 tamanhos → 13 no desktop, 15 → 11 no mobile.
   Degraus de corpo: 20 (lead do hero) · 18 (--fs-body) · 16 (--fs-ui) ·
   14 (--fs-micro).

   Este é o lead do hero: o degrau de 20px, único texto acima do corpo. */
.hero__text {
  color: var(--text-soft);
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 468px;
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */


/* ==========================================================================
   CRONÔMETRO NO HERO  (áudio 6)
   --------------------------------------------------------------------------
   Estava numa seção própria de 431px de altura, centralizada, com título em
   caixa alta, data, os dígitos e uma linha de fuso horário. Cinco elementos
   empilhados no centro da tela = um segundo hero disputando com o primeiro.

   Aqui é uma FAIXA: alinhada à esquerda na mesma coluna do texto do hero,
   sem título próprio (o rótulo já diz o que é), e a data na mesma linha.
   Ocupa ~120px em vez de 431px.
   ========================================================================== */
.hero-cd {
  margin-top: clamp(30px, 4vw, 44px);
  /* Separada do bloco de ações por tom, não por régua. A faixa tem superfície
     própria para não se perder sobre a arte do hero. */
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 24px);
  border-radius: var(--radius-sm);
  background: rgba(5, 5, 10, 0.52);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  /* largura própria: não estica até o fim da coluna do texto */
  width: fit-content;
  max-width: 100%;
}

.hero-cd__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.hero-cd__label time {
  color: var(--lilac);
  font-weight: 600;
}

/* 4 colunas de largura própria, alinhadas à esquerda. A versão em `1fr` fazia
   os dígitos flutuarem no meio de células largas, com o rótulo desalinhado
   embaixo — é o que aparecia torto no print. */
.hero-cd__grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(14px, 2.4vw, 26px);
}

/* Mantida para a página do guia, que ainda usa a seção antiga */


.cd-unit {
  position: relative;
  /* dentro da faixa do hero não há padding: o espaço vem do gap da grade */
  padding: 0;
}

/* --------------------------------------------------------------------------
   DÍGITOS QUE ROLAM
   Cada unidade tem o valor atual e o próximo empilhados verticalmente numa
   janela com overflow hidden. Na troca a coluna desliza -50%, o que dá a
   leitura de TEMPO PASSANDO. O pulso de escala anterior sugeria impacto,
   que é o gesto errado para um cronômetro.
   Anima só transform: sem custo de layout.
   -------------------------------------------------------------------------- */
/* 68,8px medido, contra o wordmark de 144px: razão de 2,09x. Com o hero agora
   em 88px, os dígitos a 4.3rem passariam a competir com o próprio título da
   marca — dois blocos gigantes na mesma coluna vertical. Reduzido para 3.6rem
   (57,6px): mantém a razão de ~1,5x contra o hero e ainda é o maior elemento
   da sua própria seção, que é o que um cronômetro precisa ser. */
.cd-unit__roll {
  display: block;
  height: 1em;
  overflow: hidden;
  font-family: var(--font-display);
  /* Dentro do hero os dígitos não podem competir com o wordmark de 88px:
     2.4rem (38px) os mantém legíveis de longe e claramente subordinados. */
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}

/* Os dois dígitos empilhados. Nomeados para ficarem explícitos no CSS,
   em vez de dependerem só do seletor de filho. */
.cd-unit__cur,
.cd-unit__next {
  display: block;
  height: 1em;
  line-height: 1;
}

/* A coluna inteira desliza; os dois dígitos ficam colados */
.cd-unit__roll.is-rolling {
  animation: cd-roll 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cd-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-1em); }
}

/* Segundos rolam mais rápido: acontecem a cada tick */
.cd-unit--sec .cd-unit__roll.is-rolling {
  animation-duration: 0.32s;
}

/* 0.14em de tracking num rótulo de 13px abria 1,8px entre letras — "dias"
   virava "d i a s". Ficou legível e alinhado ao dígito acima.
   O tamanho subiu de 0.8rem (12,8px) para --fs-micro (14px): 12,8px estava
   abaixo do piso da escala, e em fundo escuro o texto perdia peso aparente.
   ESTE VALOR TAMBÉM ESTÁ NO CSS CRÍTICO INLINE do index.html. */
.cd-unit__label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   ANEL DE PROGRESSO DO MINUTO
   Envolve os segundos e se esvai ao longo de 60s. É o elemento que faltava
   para o bloco parecer cronômetro: algo contínuo, não só números trocando.
   Usa stroke-dashoffset — não causa layout, e o traço tem cap estável.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   BARRA DO MINUTO (substitui o anel)

   O anel SVG media 108px e envolvia os segundos. Dentro da faixa compacta do
   hero ele cortava o rótulo "seg" — exatamente o que aparece no print do
   cliente, com o círculo roxo passando por cima da palavra.

   A barra ocupa a largura que o dígito já usa, fica ABAIXO do rótulo, e
   entrega a mesma informação: o minuto se esvaindo. `scaleX` num retângulo,
   sem custo de layout. `--sec-frac` vem do JS.
   -------------------------------------------------------------------------- */
.cd-unit--sec::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 7px;
  border-radius: 1px;
  background: var(--violet);
  transform: scaleX(var(--sec-frac, 0));
  transform-origin: left center;
  transition: transform 0.9s linear;
}

@media (prefers-reduced-motion: reduce) {
  .cd-unit--sec::after { transition: none; }
}

/* Mantido para a página do guia, que ainda usa a seção antiga com o anel */
.cd-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(76px, 15vw, 108px);
  height: clamp(76px, 15vw, 108px);
  transform: translate(-50%, -58%) rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.cd-ring circle {
  fill: none;
  stroke-width: 1.5;
  /* r=20 => circunferência = 2πr ≈ 125.66 */
  stroke-dasharray: 125.66;
}



@media (prefers-reduced-motion: reduce) {
  .cd-unit__roll.is-rolling { animation: none; }

}

/* A linha "No seu fuso: 30/09/2026, 00:00 BRT (America/Sao_Paulo)" saiu junto
   com a seção. Ela informava o mesmo instante da data já mostrada, escrito de
   outra forma, e o "(America/Sao_Paulo)" entre parênteses era saída de API
   vazando para a interface. O público é South America; o fuso é o mesmo. */

.countdown__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(52, 211, 153, 0.15);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4ade80;
}

/* BUG CORRIGIDO: display de classe sobrepunha o atributo hidden, então o
   selo "SERVIDOR NO AR" ficava aceso com o contador ainda rodando. */
.countdown__live[hidden] { display: none; }

.countdown__live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 2s var(--ease) infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ==========================================================================
   SOBRE
   ========================================================================== */
/* O emblema é quadrado (aspect-ratio 1/1), então a coluna direita tem altura
   igual à própria largura: em 472px de largura ele media 472px de altura contra
   329px do texto — 143px de desequilíbrio, e o bloco ficava com o peso todo à
   direita. Estreitar a coluna do emblema resolve pela geometria: 0.72fr o deixa
   em ~390px, mais perto da altura do texto, e sobra largura para a leitura.
   `align-items: center` mantém os dois centrados no eixo que resta. */
.about__grid {
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.about__body { display: grid; gap: 16px; }
.about__body p { color: var(--text-soft); max-width: 585px; }
.about__body strong { color: var(--text); font-weight: 700; }

/* Emblema da guilda: arte quadrada, integrada ao fundo por máscara radial
   em vez de moldura. Sem caixa, sem borda, sem sombra em volta. */
.about__visual {
  position: relative;
  aspect-ratio: 1 / 1;
}

/* Vídeo e imagem compartilham o mesmo tratamento e ocupam o mesmo lugar */
.about__video,
.about__still img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* dissolve as bordas da arte na superfície da página */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 97%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 97%);
  transform: scale(1);
  /* 1100ms era 13,8x o token — o pior caso do site. Um hover de mais de um
     segundo não é lido como resposta: o usuário move o mouse e nada parece
     acontecer. O gesto é um zoom de 3,5%, então o token moderate serve. */
  transition: transform var(--t) var(--ease);
}
.about__visual:hover .about__video,
.about__visual:hover .about__still img { transform: scale(1.035); }

/* O vídeo só aparece quando o JS confirma que vai tocar. Até então a imagem
   estática é o que está na tela — nada de espaço vazio esperando mídia. */
.about__video {
  position: absolute;
  inset: 0;
  /* Crossfade entre a imagem estática e o vídeo. Aqui os 500ms eram
     PROPOSITAIS e continuam: é a única troca do site que precisa ser lenta,
     porque as duas mídias mostram a mesma arte e um corte rápido apareceria
     como piscada. A regra do token vale para resposta a interação; esta
     transição não responde a nada, ela esconde uma emenda. */
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.about__video.is-playing { opacity: 1; }

.about__still { display: block; }
/* Mesma duração do vídeo, de propósito: os dois lados do crossfade precisam
   somar 100% de opacidade em cada instante, ou a arte escurece no meio. */
.about__visual.has-video .about__still { opacity: 0; transition: opacity 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  /* Movimento em loop é exatamente o que reduced-motion pede para evitar */
  .about__video { display: none; }
  .about__visual.has-video .about__still { opacity: 1; }
}

/* ==========================================================================
   PILARES
   --------------------------------------------------------------------------
   Não é grid de cards idênticos. É uma lista tipográfica com régua
   horizontal: o nome do pilar em display grande, descrição ao lado.
   Sem ícone dentro de tile, sem caixa por item.
   ========================================================================== */
/* --------------------------------------------------------------------------
   PILARES — indicador que passa entre as opções
   Pedido: "nesta sessão poderia ter animação passando entre as opções".
   Um bloco de destaque único percorre verticalmente até o pilar sob o cursor
   ou em foco. Anima transform e height num elemento fora do fluxo, então
   não causa layout. Posição vinda do JS.
   -------------------------------------------------------------------------- */
.pillars { position: relative; margin-top: 42px; }

.pillars__indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--pi-h, 0px);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    rgba(139, 92, 246, 0.16) 0%,
    rgba(139, 92, 246, 0.06) 55%,
    transparent 100%);
  transform: translate3d(0, var(--pi-y, 0px), 0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  /* 460ms era 2,9x o token. Mesmo problema do indicador da nav: um destaque
     que segue o cursor precisa chegar antes de o olho procurá-lo. */
  transition: transform var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1),
              height var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1),
              opacity var(--t) var(--ease);
}
.pillars__indicator.is-on { opacity: 1; }

/* Barra de acento que acompanha o indicador, dando direção ao movimento */
.pillars__indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 1px;
  background: var(--violet);
}

@media (prefers-reduced-motion: reduce) {
  .pillars__indicator { transition: opacity 0.15s linear; }
}

/* --------------------------------------------------------------------------
   PILARES
   Antes o título ia a 2.3rem e o texto a 0.96rem na mesma linha de base —
   proporção de 2.4x, que fazia a descrição parecer legenda do título.
   Agora: título menor, texto maior (razão ~1.55x), e um numeral discreto
   estabelece a coluna da esquerda sem precisar de tamanho gigante.
   -------------------------------------------------------------------------- */
/* A numeração saiu, então a primeira coluna (auto) que a continha some do
   grid: agora é ícone / título / texto. */
.pillar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(200px, 0.3fr) 1fr;
  gap: clamp(16px, 3vw, 38px);
  align-items: center;
  /* O padding vertical cresce: com 4 blocos empilhados e gap 0 entre eles
     (medido), o único respiro entre um pilar e o próximo é este padding. Em
     20px os quatro pareciam uma tabela comprimida. */
  padding: clamp(26px, 3.4vw, 38px) clamp(16px, 2.4vw, 24px);
  border-radius: var(--radius-sm);
}

/* Divisor entre pilares por MUDANÇA DE TOM, não por régua: linhas de 1px foram
   removidas do site inteiro por serem "trejeito de IA". A alternância de
   superfície separa os blocos e ainda dá zebra à lista. */
.pillar:nth-child(even) { background: rgba(255, 255, 255, 0.016); }

/* Ícone do pilar, como no mockup do cliente. Traço simples, sem tile atrás. */
.pillar__icon {
  width: 30px;
  height: 30px;
  color: var(--violet);
  flex-shrink: 0;
  /* Hover num ícone de 30px: distância mínima, resposta imediata. 420ms
     fazia o ícone reagir depois de o cursor já ter saído. */
  transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease-quart);
}
.pillar__icon svg { width: 100%; height: 100%; }
.pillar:hover .pillar__icon,
.pillar:focus-within .pillar__icon {
  color: var(--lilac);
  transform: scale(1.1);
}

.pillar__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  /* 1.9rem: antes 1.62rem contra um texto de 1.06rem dava razão de 1,53x, e a
     descrição competia com o título. Em 1.9rem a razão vai a 1,8x e a leitura
     fica clara de longe. */
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t) var(--ease);
}
.pillar:hover .pillar__title { color: var(--lilac); }

/* NUMERAÇÃO REMOVIDA (era 01 / 02 / 03 / 04 em mono ao lado de cada título).
   O argumento anterior — "a sequência é real, então carrega informação" — não
   se sustenta: estes são quatro PRINCÍPIOS simultâneos, não etapas de um
   processo. Nada acontece na ordem 01→04, e o leitor não precisa da ordem para
   entender nada. Numerar aqui é scaffolding: a página parece organizada sem
   organizar informação nenhuma.

   O elemento continua no HTML por compatibilidade, mas sai de cena. */


/* 17px medido — colava em .bible-cta__text (17,3) e .hero__kicker (16,8).
   Vai para o degrau de 16px: é texto de apoio dentro de um card, subordinado
   ao título do pilar (30,4px). */
.pillar__text {
  color: var(--text-soft);
  font-size: var(--fs-ui);
  line-height: 1.6;
  max-width: 546px;
}

/* ==========================================================================
   RECRUTAMENTO
   ========================================================================== */
.recruit__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: 52px;
}
.recruit__body { display: grid; gap: 16px; }
.recruit__body p { color: var(--text-soft); max-width: 566px; }

/* Ficha técnica: linhas zebradas, sem uma régua por item */
.specs {
  display: grid;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 15px;
  font-size: var(--fs-ui);
}
.spec:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
/* Chaves da ficha técnica em caixa normal.
   Eram 7 rótulos uppercase+tracked numa coluna, ao lado de 7 valores TAMBÉM
   uppercase — 14 elementos gritando lado a lado, e nenhum vencendo. A hierarquia
   aqui é chave-fraca / valor-forte: basta a cor e o peso fazerem isso. A caixa
   alta era ornamento redundante. */
.spec__k {
  color: var(--text-dim);
  font-family: var(--font-body);
  /* 0.9rem media 14,4px, a 1,03x de --fs-micro (14): dois degraus a 0,4px de
     distância não são degraus. Alinhado ao micro, que é o token de rótulo. */
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* 16,3px medido, a 1,02x do corpo de 16px: um degrau que não existe.
   Vai para --fs-ui. A hierarquia chave-fraca/valor-forte desta ficha vem da
   cor, do peso e da família (Oswald contra Manrope) — não de 0,3px. */
.spec__v {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: right;
}

/* No mobile este clamp resolvia em 18,4px, a 1,02x de .section-lead (18) e
   1,09x de .class-card__name (17,3) — três tamanhos empilhados sem hierarquia
   perceptível justamente onde a tela é menor e a escala precisa ser mais clara.
   Fixado em 1.35rem (21,6px): o mesmo degrau dos outros títulos em Oswald,
   e claramente acima do corpo. */
.recruit__sub {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   CLASSES — carrossel contínuo
   O cliente pediu "todas as classeszinhas ali passando" e que a mensagem
   seja vaga aberta para todas (áudio 2). Não há status por classe.

   O trilho tem a lista duplicada e desliza -50%: quando chega ao fim, a
   segunda cópia está exatamente onde a primeira começou, então o loop é
   imperceptível. Anima só transform, sem custo de layout.
   -------------------------------------------------------------------------- */
.classes {
  position: relative;
  overflow: hidden;
  /* Dissolve as pontas em vez de cortar seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.classes__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: classes-scroll 44s linear infinite;
}

/* Pausa no hover: quem quiser ler uma classe consegue parar */
.classes:hover .classes__track { animation-play-state: paused; }

/* Fora de vista, não gasta GPU */
.classes.is-offscreen .classes__track { animation-play-state: paused; }

@keyframes classes-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Os 8 cards mediam 250×199 — dimensão idêntica, ícone + título + texto,
   repetido oito vezes. É a grade de cards que o register chama de "resposta
   preguiçosa". Aqui, porém, o card É o affordance certo: são 8 itens do mesmo
   tipo passando num trilho, e variar a largura quebraria o loop sem costura
   (o trilho desloca exatos -50%).

   A correção não é remover o card, é remover o excesso de CAIXA: a superfície
   fica mais próxima do fundo, o raio diminui, e o card passa a ser uma parada
   no trilho em vez de um objeto empilhado. A arte é o que se vê primeiro. */
.class-card {
  position: relative;
  flex: 0 0 clamp(196px, 20vw, 232px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 13px;
  background: rgba(255, 255, 255, 0.028);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 22px 20px;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--t) var(--ease);
}
.class-card:hover { background: rgba(255, 255, 255, 0.06); }

/* Brilho que sobe do rodapé do card no hover. Anima transform num pseudo:
   sem sombra difusa em volta, sem card-lift. */
.class-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: -1;
  background: linear-gradient(to top, rgba(124, 58, 237, 0.16), transparent);
  transform: translateY(101%);
  /* Saída do brilho: mais curta que a entrada */
  transition: transform var(--t-exit) var(--ease-quart);
}
/* Entrada: sobe 60% da altura do card, token moderate cobre */
.class-card:hover::before { transform: none; transition-duration: var(--t); }

/* Arte da classe sem tile: a imagem é a marca, colada na superfície */
.class-card__art {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* Escala de 1,09 num elemento de 60px: hover, não expansão */
  transition: transform var(--t) var(--ease-quart);
}
.class-card:hover .class-card__art { transform: scale(1.09) rotate(-2deg); }

/* --------------------------------------------------------------------------
   SEM MOVIMENTO: grade estática de 8 — não de 16

   BUG CORRIGIDO: o trilho vira `flex-wrap: wrap`, mas a lista está DUPLICADA
   (8 + 8 cópias, que é o mecanismo do loop sem costura). Numa grade, as duas
   cópias aparecem: o usuário via Cleric, Chanter... Sorcerer, e logo abaixo
   Cleric, Chanter de novo. Parecia erro de programação, e era.

   Os duplicados já carregam aria-hidden="true", então basta escondê-los.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .classes { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .classes__track {
    animation: none;
    width: 100%;
    /* grade de verdade, não flex-wrap: colunas de largura igual sem sobra */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
  }
  /* as 8 cópias somem: só a lista real fica */
  .classes__track .class-card[aria-hidden='true'] { display: none; }
  .class-card { flex: initial; }
  .class-card::before { display: none; }
  .class-card:hover .class-card__art { transform: none; }
}

/* Único elemento em caixa alta do card, agora que o papel virou caixa normal.
   Tracking reduzido de 0.045em: nome próprio curto em caps já tem separação
   suficiente na Oswald. */
/* Três elementos em Oswald ocupavam 21,6 / 21,1 / 20,8px — .footer__brand-line,
   este, e .logo__text. Papel visual idêntico (nome próprio curto em display),
   tamanhos arbitrariamente diferentes a 1,02x um do outro: nenhum lê como
   degrau, só como descuido. Unificados em 1.35rem (21,6px). */
.class-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* Papel da classe ("Suporte & Cura") em caixa normal.
   São 16 cards no trilho: 16 rótulos uppercase tracked passando na tela viravam
   uma faixa de ruído. E é uma descrição, não um código — "Suporte & Cura" lê
   melhor como frase. O nome da classe acima segue em caixa alta e passa a ser o
   único elemento gritado do card, que é o que se quer ler primeiro. */
.class-card__role {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  /* Alinhado ao token de rótulo em vez de 0.9rem (14,4px): o valor solto ficava
     a 1,03x do micro e criava um degrau que ninguém percebe. */
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
}



/* O selo dizia "VAGAS ABERTAS" em 16 cards ao mesmo tempo, logo abaixo de um
   título de seção que já diz "Vagas abertas para todas as classes". Repetir a
   mesma informação 16 vezes não a reforça — gasta atenção e enche o trilho de
   pastilhas verdes competindo com as artes.

   Agora é um PONTO: o mesmo sinal de "aberto", sem repetir o texto. A palavra
   fica onde ela informa (o título da seção) e o card fica com a arte, o nome e
   o papel. O texto continua acessível para leitor de tela. */
.class-card__open {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* esconde o texto sem remover do DOM nem da árvore de acessibilidade */
  font-size: 0;
  line-height: 0;
  color: #6ee7a8;
}
.class-card__open::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Centralizado E com medida: sem max-width a linha corria os 1180px do wrap
   (~154 caracteres no desktop). Acima de ~75ch o olho perde o início da
   linha seguinte ao voltar. 58ch mantém duas linhas equilibradas. */
.recruit__note {
  max-width: 566px;
  margin: 32px auto 0;
  font-size: var(--fs-ui);
  color: var(--text-soft);
  text-align: center;
}

/* ==========================================================================
   BÍBLIA (teaser)
   ========================================================================== */
.bible-cta {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

/* Media 51,2px contra os 42,4px do .section-title: o teaser da Bíblia estava
   MAIOR que os títulos das seções principais, invertendo a hierarquia sem
   motivo. Alinhado à mesma escala; o que destaca este bloco é o fundo alternado
   e o botão, não o corpo da letra. */
.bible-cta__title {
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
/* 17,3px medido — a 1,06x de .pillar__text e 1,03x de .section-lead.
   Vai para o degrau de 18px (--fs-body): é corpo de texto de um bloco de
   destaque, um degrau acima do texto de card. */
.bible-cta__text {
  color: var(--text-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 507px;
  margin-bottom: 28px;
}

/* Lista de capítulos: zebrada, número em mono (é dado real) */
.chapter-list {
  list-style: none;
  display: grid;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.chapter-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 15px;
  font-size: var(--fs-ui);
  color: var(--text-soft);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.chapter-list li:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
.chapter-list li:hover { color: var(--text); background: rgba(139, 92, 246, 0.06); }
/* Números de capítulo: eram mono, que aqui é costume, não função. "01" e "03"
   não são código nem dado tabular a alinhar — são rótulos de ordem. A Oswald
   com numerais tabulares alinha a coluna igual e mantém a voz da página.
   Mono na landing sobrava como "atalho para técnico", que o register proíbe. */
.chapter-list b {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* --violet (#8b5cf6) media 4,45:1 sobre a zebra da lista — abaixo do mínimo
     de 4,5:1 por uma fração. O --lilac (#c4b5fd) é o mesmo roxo dois passos
     mais claro: mantém a identidade e passa com folga. */
  color: var(--lilac);
  flex-shrink: 0;
  min-width: 21px;
}
.chapter-list li:last-child { color: var(--text-dim); }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final-cta { text-align: center; }
.final-cta .section-lead { margin: 0 auto 32px; }
/* "discord.gg/polters" abaixo do botão. Era mono — uma URL não é código, e a
   troca de família só para exibir um endereço é costume técnico sem função.
   Em Manrope ela lê como endereço, que é o que é. */


/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Alinhado ao mesmo grid do conteúdo. Sem tagline jogada num extremo e
   links no outro com um vão morto no meio.
   ========================================================================== */
/* Rodapé como piso próprio: mais escuro que a página, sem régua no topo */
.footer {
  background: #05050a;
  padding: 56px 0 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-bottom: 34px;
}

/* Wordmark do rodapé: mesmo tracking do header (0.11em vira 0.09em aqui porque
   o corpo é menor). 0.1em somado a 20,8px dava 2,08px entre letras — as hastes
   da Oswald condensada ficavam soltas, parecendo texto espaçado à força. */
.footer__brand-line {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}
.footer__tagline { font-size: var(--fs-ui); color: var(--text-soft); max-width: 332px; }

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
/* Lista de navegação: a WCAG 2.5.8 pede 44px de alvo (a isenção "inline" vale
   só para link dentro de frase, o que não é o caso aqui).
   A correção valia só em `max-width: 1080px`, então no desktop os links seguiam
   com 22px de altura — medido em 7 links do rodapé do guia. A altura de alvo
   agora é a regra base: o gap do grid compensa para a coluna não esticar. */
.footer__links { display: grid; gap: 0; list-style: none; font-size: var(--fs-ui); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* min-width também: "Início" tem 6 letras e o alvo ficava com 35px de
     largura mesmo com a altura certa. */
  min-width: 44px;
  color: var(--text-soft);
  transition: color var(--t-fast) var(--ease);
}
.footer__links a:hover { color: var(--lilac); }

/* Mesma correção para a linha de metadados do topo da Bíblia, onde o link
   "POLTERS" tinha 51x17. */
@media (max-width: 1080px) {
  .docs-hero__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .docs-hero__meta { gap: 0 18px; }
}

/* Duas ações apenas, alinhadas à direita no desktop */

@media (max-width: 700px) {

  .footer__actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   FAIXA FINAL
   Antes usava space-between com dois textos curtos: um colado à esquerda,
   outro à direita, e um vão morto de ~700px no meio. O slop.md chama isso
   de "content flung to the far edges" — assimetria por default.
   Agora os itens ficam agrupados à esquerda, separados por um ponto médio,
   alinhados à mesma margem do conteúdo acima.
   -------------------------------------------------------------------------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 6px;
  padding: 20px 0 0;
  font-size: var(--fs-micro);
  color: var(--text-dim);
}
.footer__bottom > * + *::before {
  content: '·';
  margin-right: 14px;
  color: rgba(255, 255, 255, 0.22);
}
/* O link do Discord na faixa final media 23px de altura em TODOS os viewports;
   a correção anterior cobria só `max-width: 700px`. Ganha altura de alvo sem
   virar botão: é texto de rodapé, não CTA (o CTA está acima, em
   .footer__actions). O gap vertical encolhe para a faixa não crescer. */
.footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-soft);
}
.footer__bottom a:hover { color: var(--lilac); }

@media (max-width: 700px) {
  .footer__bottom { gap: 4px 14px; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .classes       { grid-template-columns: repeat(2, 1fr); }
  .about__grid,
  .recruit__head,
  .bible-cta     { grid-template-columns: 1fr; }
  .about__visual { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }

  /* Pilares: ícone e título na primeira linha, texto abaixo */
  .pillar {
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    padding: 20px 16px;
  }
  .pillar__text { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --header-h: 60px; }

  /* min-height em svh fazia a seção inteira se mover quando a barra de
     endereço do navegador recolhia — era a maior fonte de CLS no mobile. */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 42px); padding-bottom: 64px; }
  /* 19vw resolvia em 74px num aparelho de 390px, e a palavra POLTERS ocupava
     89% da largura da tela — encostada nas duas margens, sem ar. 14vw a leva a
     ~55px e ~66% da largura, que é presença sem aperto. */
  .hero__title { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .hero__kicker { font-size: 1rem; letter-spacing: 0; }

  /* --------------------------------------------------------------------
     BUG CORRIGIDO: a máscara do hero era DIRECIONAL (escurecia a esquerda,
     liberava a direita). Funciona no desktop, onde o texto ocupa ~50% da
     largura. No celular o texto ocupa 100% e caía justamente sobre a parte
     clara da arte — daí "não dá pra ler nada".
     No mobile a máscara passa a ser VERTICAL: a arte respira no topo e
     escurece de baixo para cima, onde o texto fica.
     -------------------------------------------------------------------- */
  .hero__bg { inset: 0; }
  /* A variante mobile é um recorte vertical de 0,5:1 (768x1536 reescalado),
     então cobrir 390x937 amplia 1,19x e corta só 32px na horizontal.

     `center top` em vez de `center 12%`: o centroide de luz da arte nova está
     em y=25%, e o perfil por linha mostra o pico entre 10% e 40% da altura
     (26,5 / 23,6 / 28,6 contra 7,3 na metade de baixo). Ancorar no topo põe a
     figura na faixa que o véu deixa livre; 12% empurrava a cabeça para dentro
     da zona escurecida.

     Opacidade 0,82: com a arte no enquadramento certo ela não precisa ser
     apagada para o texto funcionar. */
  .hero__bg img {
    object-position: center top;
    opacity: 0.82;
    filter: contrast(1.08) saturate(1.14) brightness(0.82);
  }

  /* --------------------------------------------------------------------
     BRASA PARADA NO CELULAR

     `ember-drift` é uma animação infinita de 19s que escala e translada três
     gradientes radiais em `mix-blend-mode: screen`. Num desktop isso é
     irrelevante; num celular é uma composição de tela cheia repintando durante
     o scroll, competindo com o próprio gesto de rolagem — parte do
     "engasgo" que se sentia.

     A camada continua: ela intensifica as chamas roxas da arte e é o que dá
     profundidade ao hero. Só não se move. Ninguém percebe a falta de uma
     deriva de 19s; todos percebem o scroll travando.
     -------------------------------------------------------------------- */
  .hero__ember { inset: -16%; opacity: 0.34; animation: none; }

  /* Véu vertical: a arte respira no topo (onde está a criatura) e escurece de
     baixo para cima, onde ficam o texto, os botões e o cronômetro.
     O ponto de 50% desceu para 58% porque o bloco de conteúdo cresceu com a
     faixa do cronômetro — a proteção precisa começar mais abaixo. */
  .hero__veil {
    background:
      linear-gradient(to bottom,
        rgba(5, 5, 10, 0.34) 0%,
        rgba(5, 5, 10, 0.10) 16%,
        rgba(5, 5, 10, 0.72) 44%,
        rgba(5, 5, 10, 0.94) 62%,
        #05050a 78%),
      linear-gradient(to top, var(--bg-alt) 0%, transparent 14%);
  }

  /* Empurra o conteúdo para a metade inferior, onde a máscara protege.
     O teto caiu de 120px para 96px: com a escala tipográfica consolidada o
     bloco de texto cresceu ~14px (lead do hero foi de 19,2 para 20px, kicker
     de 16,8 para 18), e o cronômetro passava 9px da primeira dobra num
     aparelho de 844px de altura. O áudio 6 do cliente pede o cronômetro
     visível de entrada — o padding é o que sobra para ceder, porque a arte
     continua respirando acima do texto. */
  .hero__inner { padding-top: clamp(48px, 11vh, 96px); }

  /* --------------------------------------------------------------------
     CARROSSEL NO CELULAR: uma linha, não uma coluna

     No print do cliente o trilho aparecia como grade de 2 colunas com as 8
     classes DUPLICADAS — 16 cards empilhados, exigindo scroll interminável
     para passar por todos, e mostrando Cleric/Chanter duas vezes.

     Aqui o trilho continua sendo UMA LINHA que desliza, como no desktop. O
     card encolhe para caber ~2 na tela, e a animação fica mais rápida porque
     o trilho é mais curto: a mesma volta em 28s em vez de 44s.
     -------------------------------------------------------------------- */
  .classes    { gap: 10px; }
  .classes__track { gap: 10px; animation-duration: 28s; }
  .class-card {
    flex: 0 0 158px;
    padding: 14px 13px;
    gap: 8px;
  }
  .class-card__art { width: 42px; height: 42px; }
  /* 1.08rem resolvia em 17,3px, a 1,04x do lead (18) e 1,08x do corpo (16):
     invisível como degrau. --fs-body põe o nome da classe no degrau de corpo,
     e a distinção do papel vem da família (Oswald) e do peso, não de 1,3px. */
  .class-card__name { font-size: var(--fs-body); }
  /* O tamanho do papel da classe vem da regra base (--fs-micro): antes havia
     0.82rem aqui, que resolvia em 13,1px — abaixo do piso de 14px da escala.
     Em fundo escuro o texto perdia peso aparente e virava cinza. */

  .footer__top { gap: 26px; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   TELA CURTA — o cronômetro precisa caber na primeira dobra (áudio 6)

   Medido em três aparelhos, o bloco do hero consumia:
     iPhone SE   320x658 → 824px  (excedia 167px)
     Android     360x800 → 819px  (excedia 19px)
     iPhone 14   390x844 → 828px  (cabia)

   O gargalo não é a largura, é a ALTURA: por isso a consulta é por
   `max-height`, não por `max-width`. Num aparelho baixo o problema aparece
   mesmo com tela larga (paisagem), e um `max-width` não pegaria isso.

   Duas peças cedem, na ordem em que menos custam:
   - as margens entre blocos, que existem para respiro e não para informação
   - a linha de descrição, que ganha uma medida mais curta e perde uma linha

   O que NÃO cede: o wordmark, a meta (é a placa da guilda), os botões (alvo de
   toque) e o cronômetro. Encolher qualquer um deles descumpriria o briefing.
   ========================================================================== */
@media (max-width: 560px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 40px; }
  .hero__inner { padding-top: clamp(20px, 4vh, 44px); min-height: 0; }
  .hero__kicker { margin-bottom: 2px; }
  .hero__title { margin-bottom: 10px; }
  .hero__meta { gap: 6px 10px; margin-bottom: 14px; }
  /* 128px eram quatro linhas a 32px. Com 28ch o texto quebra em três, e o
     tamanho volta ao corpo: numa tela curta a hierarquia vem do wordmark
     acima, não deste parágrafo. */
  .hero__text { font-size: var(--fs-body); max-width: 273px; margin-bottom: 18px; }
  .hero__actions { gap: 8px; }
  .hero-cd { margin-top: 16px; padding: 12px 16px; }
  .hero-cd__label { margin-bottom: 6px; }
}

/* Tela muito curta (iPhone SE e similares): o texto de apoio sai de cena.
   O wordmark, a meta, os dois botões e o cronômetro sobrevivem — são o que o
   mockup do cliente mostra na primeira dobra. A frase continua no DOM para
   leitor de tela e para quem rola. */
@media (max-width: 560px) and (max-height: 700px) {
  .hero__text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero__meta { margin-bottom: 12px; }
}