/* =========================================================
   CPPEM · LIVE PMPE — 15 de setembro, 19h45
   -----------------------------------------------------
   Sistema visual herdado de ../unificados: Oxanium + Rajdhani,
   ouro #AF9256 sobre preto #0A0A0B, fios de 1px em ouro
   translúcido, cantos chanfrados de operação, grão de
   impressão, brasas subindo pela viewport.

   A peça que sustenta a hero é o BRASÃO FUNDIDO (.fusao),
   aqui com um par só: o brasão da PMPE de um lado e o leão do
   CPPEM do outro, partidos por uma costura de ouro — a
   corporação e quem prepara para ela, no mesmo medalhão.

   O que é novo em relação ao unificados é o bloco de
   INSCRIÇÃO (.inscricao): painel de data com contagem
   regressiva à esquerda e formulário à direita. O unificados
   é página de venda direta e não tem formulário nenhum.
   ========================================================= */

/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ───────────────────────────────────────────── */
:root {
  --gold:        #AF9256;
  --gold-light:  #C9AE7A;
  --gold-pale:   #F0DCB0;
  --gold-dark:   #8A7040;
  --gold-deep:   #5E4B29;

  --bg:   #0A0A0B;
  --bg-2: #111115;
  --bg-3: #18181E;
  --bg-4: #1F1F28;

  --border:        rgba(175,146,86,.18);
  --border-soft:   rgba(175,146,86,.10);
  --border-active: rgba(175,146,86,.55);

  --text:      #E8E4D9;
  --text-dim:  #ADA99B;
  --text-mute: #87847A;

  --danger: #C25B52;

  /* Assinatura quente da página. É de SUSSURRO: entra em halos e clarões,
     nunca em texto corrido ou botão. O sistema continua sendo o ouro. */
  --ember: #C4703F;

  --font-title: 'Oxanium', system-ui, sans-serif;
  --font-ui:    'Rajdhani', system-ui, sans-serif;

  --nav-h: 76px;
  --ease:  cubic-bezier(.4,0,.2,1);
  --t:     .28s var(--ease);

  --maxw: 1180px;
}

/* ─── BASE ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}
/* grão fino: dá peso de impressão ao preto chapado. Fica acima do conteúdo
   (z-index 210) e abaixo de navbar/dock/float — de dentro de uma camada
   z-index 1 o grão sumiria sob as seções. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 210; pointer-events: none;
  opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* height:auto é obrigatório: os <img> carregam width/height para reservar
   espaço e evitar layout shift, e sem isto o atributo height venceria e
   esticaria a imagem verticalmente. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
strong, b { font-weight: 700; color: var(--text); }
::selection { background: var(--gold); color: #0B0A08; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d0d0f; }
::-webkit-scrollbar-thumb { background: #2a2618; border: 2px solid #0d0d0f; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── LAYOUT ───────────────────────────────────────────── */
.container { width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
.center { text-align: center; }
.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;
}

/* Os dois clarões diagonais existem contra o "preto chapado": sem eles cada
   seção era um retângulo de #0A0A0B liso, e a página inteira lia seca entre
   um bloco e outro. São largos e fracos de propósito — não se enxerga o
   degradê, enxerga-se que o fundo tem profundidade. */
.section {
  position: relative; padding: 106px 0; z-index: 2;
  background:
    radial-gradient(900px 460px at 80% 6%,  rgba(196,112,63,.055), transparent 68%),
    radial-gradient(780px 420px at 14% 94%, rgba(175,146,86,.045), transparent 70%);
}
.section--alt { background: linear-gradient(180deg, #0C0C0E, #0F0F13 50%, #0C0C0E); }

/* ─── MARCAS D'ÁGUA ────────────────────────────────────────
   O brasão da PMPE entra pela direita nas seções planas e o leão do CPPEM
   pela esquerda nas alternadas. É o que dá profundidade ao preto chapado sem
   virar papel de parede. A máscara vertical apaga a marca perto das emendas
   para uma seção não "costurar" na outra. */
.section::before, .section--alt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* marca-pmpe, e NÃO brasao-pmpe: o brasão oficial é colorido e, mesmo a 6% de
   opacidade, jogava manchas de cor na direita da seção — a única coisa fora
   da paleta na página inteira. O arquivo marca-* é o mesmo desenho remapeado
   para a rampa de ouro, e some no preto como as outras texturas. */
.section::before {
  background: url('public/marca-pmpe.webp') calc(100% + 190px) 50% / auto 580px no-repeat;
  opacity: .06;
}
/* O leão é um desenho grande e de traço grosso: na mesma opacidade da marca
   da PMPE ele dominava as seções mais vazias. Mais recuado e mais apagado,
   volta a ser textura. */
.section--alt::before {
  background: url('public/emblema-leao.webp') -290px 50% / auto 620px no-repeat;
  opacity: .032;
}
/* fios de ouro nas duas emendas, num único pseudo */
.section--alt::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--border-active), transparent) top    / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--border-active), transparent) bottom / 100% 1px no-repeat;
}
.section > .container { position: relative; z-index: 2; }

/* ─── TIPOGRAFIA DE SEÇÃO ──────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; color: var(--gold);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

.section__head { text-align: center; max-width: 920px; margin: 0 auto 56px; }
.section__title {
  font-family: var(--font-title);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800; line-height: 1.04; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text); margin: 16px 0 0;
}
.section__title::after {
  content: ''; display: block; width: 78px; height: 2px; margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* na coluna do professor o título é de bloco, não de seção centralizada */
.section__title--left { font-size: clamp(26px, 3.4vw, 40px); }
.section__title--left::after { margin-inline: 0; }

.section__lead {
  max-width: 740px; margin: 22px auto 0; color: var(--text-dim);
  font-size: 17px; line-height: 1.7;
}
.section__lead strong { color: var(--gold-light); }
.gold {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── BRILHO (shine) ───────────────────────────────────── */
@keyframes shine-sweep {
  0%   { transform: translateX(-160%) skewX(-22deg); }
  55%  { transform: translateX(320%)  skewX(-22deg); }
  100% { transform: translateX(320%)  skewX(-22deg); }
}
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; top: -60%; left: 0;
  width: 42%; height: 220%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.55) 50%, rgba(255,255,255,.10) 65%, transparent 100%);
  animation: shine-sweep 4.6s var(--ease) infinite;
}
.shine--slow::after { animation-duration: 6.5s; width: 34%; }

/* ─── BOTÕES ───────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; height: 52px; padding: 0 30px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; white-space: nowrap; text-align: center;
  border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  transition: transform var(--t), filter var(--t), background var(--t), color var(--t);
}
.btn > span { position: relative; z-index: 2; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { cursor: progress; filter: grayscale(.35) brightness(.9); }

.btn--gold {
  color: #0B0A08;
  background: linear-gradient(168deg, var(--gold-pale) 0%, var(--gold-light) 22%, var(--gold) 55%, var(--gold-dark) 100%);
  filter: drop-shadow(0 10px 24px rgba(175,146,86,.30));
}
.btn--gold::before {
  content: ''; position: absolute; inset: 1px; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%);
  clip-path: inherit; pointer-events: none;
}
.btn--gold:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: drop-shadow(0 16px 32px rgba(175,146,86,.52)) brightness(1.06);
}

.btn--ghost {
  color: var(--gold-light);
  background: rgba(175,146,86,.05);
  box-shadow: inset 0 0 0 1px var(--border-active);
}
.btn--ghost:hover {
  color: #0B0A08;
  background: linear-gradient(168deg, var(--gold-light), var(--gold-dark));
  transform: translateY(-2px);
}

.btn--lg { height: 62px; padding: 0 44px; font-size: 15px; letter-spacing: 3px; }
.btn--block { width: 100%; }

/* =========================================================
   NAVBAR
   ========================================================= */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 320;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-pale));
  box-shadow: 0 0 12px rgba(175,146,86,.7);
}

.header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 300;
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(10,10,11,.72), rgba(10,10,11,.30));
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: height var(--t), background var(--t), box-shadow var(--t);
}
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-active) 20%, var(--border-active) 80%, transparent);
  opacity: .55; transition: opacity var(--t);
}
.header.is-stuck {
  height: 66px; background: rgba(9,9,10,.94);
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.95);
}
.header.is-stuck::after { opacity: 1; }

.header__inner {
  display: flex; align-items: center; gap: 26px;
  width: min(100% - 36px, 1320px); margin-inline: auto;
}

/* A marca é o LEÃO + o nome em Oxanium. O PNG antigo da logo saiu do projeto:
   o emblema é a marca atual, e um wordmark tipográfico ao lado dele resolve a
   leitura do nome sem trazer o arquivo obsoleto de volta.

   O unificados mascarava a caixa da marca com a própria logo para o brilho
   varrer só o desenho. Aqui NÃO dá: `mask-image` com origem .webp não pinta
   no Chrome (testado — a caixa fica vazia), e o emblema só existe em .webp.
   Como o arquivo já vem com alfa, o desenho recortado é o próprio <img>, e no
   lugar do brilho entra um halo de ouro no hover. */
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand__leao {
  position: relative; display: block; width: 42px;
  transition: width var(--t);
}
.brand__leao img {
  width: 100%;
  filter: drop-shadow(0 2px 8px rgba(175,146,86,.28));
  transition: filter var(--t);
}
.brand:hover .brand__leao img { filter: drop-shadow(0 2px 14px rgba(175,146,86,.65)); }
.header.is-stuck .brand__leao { width: 36px; }
.brand__nome {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-title); font-size: 19px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text);
}
.brand__nome i {
  margin-top: 4px; font-family: var(--font-ui); font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.6px; color: var(--gold);
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  position: relative; padding: 10px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim); transition: color var(--t);
}
.nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav a:hover { color: var(--gold-light); }
.nav a:hover::after { transform: scaleX(1); }

.nav-count {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 16px; margin-left: 8px;
  background: rgba(175,146,86,.07);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.nav-count b { font-family: var(--font-title); color: var(--gold-light); font-size: 14px; letter-spacing: 1px; }
.nav-count i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(175,146,86,.16); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(175,146,86,.16); }
  50%     { box-shadow: 0 0 0 8px rgba(175,146,86,.03); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* ─── A MARCAÇÃO DE TEMPO DA COLISÃO ───────────────────
     Vale para o medalhão (.fusao--hero) E para a manchete (.hero__meia), que
     entram juntos e batem no mesmo instante. Mora aqui, no ancestral comum,
     porque são dois ramos diferentes da árvore: com uma cópia em cada um,
     bastava ajustar um lado para os dois saírem de sincronia.
     O script.js lê o --impacto daqui (por herança) para soltar os estilhaços. */
  --vem:     .95s;    /* quando as metades começam a vir */
  --bate:    .55s;    /* quanto tempo levam para chegar */
  --impacto: 1.5s;    /* --vem + --bate: o instante da batida */

  position: relative; z-index: 2;
  min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 72px;
  overflow: hidden; text-align: center;
}
.hero__bg { position: absolute; inset: -6% 0 0; will-change: transform; }
.hero__bg i {
  position: absolute; inset: 0; display: block;
  background: url('public/bgatirador.webp') center 30% / cover no-repeat;
  transform: scale(1.04);
  opacity: .30;
  filter: grayscale(.55) contrast(1.06) brightness(.86);
}
/* Véu vertical, e não lateral: a hero é centralizada, então escurecer só um
   dos lados jogaria o texto para fora do eixo de leitura. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(10,10,11,.36) 0%, rgba(10,10,11,.86) 58%, rgba(10,10,11,.97) 100%),
    linear-gradient(180deg, rgba(10,10,11,.92) 0%, transparent 24%, transparent 62%, var(--bg) 100%);
}
.hero__dawn {
  position: absolute; left: 50%; bottom: -32%; transform: translateX(-50%);
  width: 130%; height: 60%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(175,146,86,.28), rgba(175,146,86,.06) 42%, transparent 70%);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(175,146,86,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(175,146,86,.055) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 70%);
}
.hero__scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.hero__inner { position: relative; z-index: 4; }

.tag {
  display: inline-flex; align-items: center; gap: 11px;
  height: 38px; padding: 0 18px; margin-bottom: 24px;
  background: rgba(175,146,86,.08);
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold-light);
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; }

.hero__title {
  font-family: var(--font-title);
  font-size: clamp(38px, 7.4vw, 86px);
  font-weight: 800; line-height: .98; letter-spacing: -.5px;
  text-transform: uppercase; color: var(--text);
  text-shadow: 0 8px 40px rgba(0,0,0,.75);
  max-width: 14ch; margin-inline: auto;
}

/* "OPERAÇÃO" é a designação, não a manchete: entra pequena e muito espaçada
   por cima do nome, como um código de operação.

   O text-indent não é decorativo. O letter-spacing também sai DEPOIS do último
   caractere, e essa sobra empurra o texto centralizado para a esquerda; o
   indent de mesmo valor devolve a palavra ao eixo. */
.hero__op {
  display: block; position: relative;
  margin-bottom: clamp(8px, 1.1vw, 14px); padding-top: clamp(14px, 2vw, 22px);
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.6vw, 18px); font-weight: 700;
  letter-spacing: clamp(7px, 1.5vw, 17px);
  text-indent: clamp(7px, 1.5vw, 17px);
  color: var(--gold); text-shadow: 0 0 24px rgba(175,146,86,.5);
}
.hero__op::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: clamp(46px, 7vw, 90px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ─── "PRAÇA PMPE" — as duas metades da manchete ───────────
   Entram uma de cada lado e se encontram no meio, no mesmo instante em que as
   metades do medalhão se chocam. Por isso as variáveis de tempo moram na
   .hero e não em cada um deles.

   `inline-block` é obrigatório: transform não se aplica a caixa inline, e sem
   isso as duas metades simplesmente não sairiam do lugar. */
.hero__nome { display: block; }
.hero__meia {
  display: inline-block;

  /* ─── O BRILHO ───────────────────────────────────────────
     São DUAS camadas de fundo recortadas no texto pelo background-clip: a de
     baixo é a rampa de ouro parada, a de cima é a lâmina de luz que anda.

     É por isso que não vira um retângulo. A varredura de `.shine` (a dos
     botões) é um pseudo-elemento branco por cima da caixa — no botão, que tem
     fundo sólido, ele lê como reflexo; sobre letras vazadas leria como um
     quadrado claro passando por trás delas. Aqui a luz É o preenchimento do
     texto: fora do desenho das letras não existe pixel nenhum para pintar.

     A camada da luz é mais estreita que a caixa (55%) de propósito: assim a
     posição em % se comporta de forma previsível (0% encosta à esquerda, 100%
     à direita) e dá para mandá-la para fora dos dois lados com -80% e 180%. */
  background-image:
    linear-gradient(104deg,
      transparent 34%,
      rgba(255,253,246,.35) 43%,
      rgba(255,253,246,.95) 50%,
      rgba(255,253,246,.35) 57%,
      transparent 66%),
    linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
  background-size: 55% 100%, 100% 100%;
  background-position: -80% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* As duas animações não brigam: a entrada mexe em transform/opacity/filter, o
   brilho mexe só em background-position.

   O brilho começa DEPOIS do impacto (+.5s) — antes disso as metades ainda
   estão viajando, e uma luz varrendo algo em movimento não lê como brilho, lê
   como falha de render.

   O atraso da segunda palavra é 1.13s, e o número é calculado, não estimado:
   a lâmina viaja 260% da caixa (de -80% a 180%) durante os 38% de varredura de
   um ciclo de 5s, e está DENTRO da palavra em 155% desse percurso (os 100% da
   caixa mais os 55% da própria lâmina) — ou seja, 5 × .38 × 155/260 = 1.13s.
   É quanto a luz leva para atravessar "PRAÇA", e é exatamente quando ela deve
   entrar em "PMPE".

   Com o valor antigo (.28s) dava para ver DUAS luzes ao mesmo tempo, uma em
   cada palavra — dois flashes soltos em vez de uma luz cruzando o nome. */
.hero__meia--a {
  animation:
    meia-esq var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards,
    brilho-letras 5s var(--ease) calc(var(--impacto) + .5s) infinite;
}
.hero__meia--b {
  animation:
    meia-dir var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards,
    brilho-letras 5s var(--ease) calc(var(--impacto) + 1.63s) infinite;
}
@keyframes meia-esq {
  0%   { transform: translateX(-118%); opacity: 0; filter: blur(7px); }
  55%  { opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; filter: blur(0); }
}
@keyframes meia-dir {
  0%   { transform: translateX(118%);  opacity: 0; filter: blur(7px); }
  55%  { opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; filter: blur(0); }
}
/* A varredura ocupa pouco mais de um terço do ciclo; o resto é espera. Sem a
   pausa o nome ficaria piscando sem parar e a luz viraria ruído. */
@keyframes brilho-letras {
  0%   { background-position: -80% 0, 0 0; }
  38%  { background-position: 180% 0, 0 0; }
  100% { background-position: 180% 0, 0 0; }
}

/* O baque da manchete. Bem mais contido que o do medalhão: o peso do impacto é
   daquela peça, e um texto grande dando um pulo do mesmo tamanho roubaria a
   cena dela e ainda borraria as letras. */
.hero__nome { animation: recuo-nome .42s var(--ease) var(--impacto) backwards; }
@keyframes recuo-nome {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.028); }
  55%  { transform: scale(.994); }
  100% { transform: scale(1); }
}

/* O respiro é maior do que era: o subtítulo saiu de baixo da manchete (onde
   24px bastavam, porque os dois são texto) para baixo da placa do medalhão, e
   colado ali ele lia como legenda da peça em vez de parágrafo da dobra. */
.hero__sub {
  margin: 38px auto 0; max-width: 62ch;
  font-size: 18.5px; line-height: 1.68; color: var(--text-dim);
}
.hero__sub strong { color: var(--gold-light); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }

/* ─── A CASCATA DEPOIS DA BATIDA ───────────────────────────
   Tudo daqui para baixo entra SÓ quando a colisão termina. É o que faz a
   entrada na página ter um foco: primeiro o nome da operação, depois os dois
   brasões se chocando, e só então a explicação, o botão e os números.

   Antes, o subtítulo ficava entre a manchete e o medalhão e entrava aos .32s,
   junto com o resto da dobra — três blocos de texto disputando a atenção
   enquanto a peça principal ainda nem tinha se montado.

   Os atrasos saem todos do --impacto (que mora na .hero): mudar a marcação da
   colisão reajusta a cascata inteira junto, sem nenhum número solto.

   ⚠️ O CTA principal só aparece em --impacto + .42s ≈ 1,9s. É a troca que essa
   coreografia pede. Para encurtar, mexa nos quatro delays abaixo — ou baixe o
   --impacto, que puxa tudo junto. */
.hero__sub,
.hero__cta,
.hero__nota,
.ficha {
  opacity: 0;
  animation: entra-apos-impacto .55s var(--ease) forwards;
}
.hero__sub  { animation-delay: calc(var(--impacto) + .28s); }
.hero__cta  { animation-delay: calc(var(--impacto) + .42s); }
.hero__nota { animation-delay: calc(var(--impacto) + .54s); }
.ficha      { animation-delay: calc(var(--impacto) + .66s); }
.hero__nota {
  display: block; margin-top: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--text-mute);
}

/* =========================================================
   BRASÃO FUNDIDO — a peça central da hero
   ---------------------------------------------------------
   Um medalhão hexagonal partido por uma costura diagonal de ouro. De um lado
   o brasão da PMPE, do outro o leão do CPPEM: a corporação e quem prepara
   para ela, dentro do mesmo aro.

   Como o corte funciona: o .fusao__core tem clip-path hexagonal e clip-path
   RECORTA TAMBÉM OS DESCENDENTES. Então cada .fusao__lado pode usar o seu
   próprio clip-path diagonal sem precisar de máscara composta — o hexágono do
   pai apara o que sobrar.

   Os dois lados ocupam a LARGURA INTEIRA do núcleo, não metade. É o que faz o
   desenho da esquerda mostrar a sua metade esquerda (e não a imagem inteira
   espremida), porque a diagonal corta uma imagem já centralizada.
   ========================================================= */
.fusoes {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(18px, 4vw, 54px); margin-top: 44px;
}
.fusao-wrap { display: flex; flex-direction: column; align-items: center; }

.fusao {
  position: relative;
  width: clamp(168px, 22vw, 244px); aspect-ratio: 1;
  /* Hexágono de bico curto: os vértices laterais ficam em 18%/82%, e não nos
     25%/75% de um hexágono regular. A faixa de largura cheia sobe de metade
     para dois terços da altura, e é ela que decide o tamanho máximo do
     desenho — com o bico longo, o topo caía na parte que afunila e a própria
     moldura decepava o "POLÍCIA" do escudo. */
  --hex: polygon(50% 0%, 93.3% 18%, 93.3% 82%, 50% 100%, 6.7% 82%, 6.7% 18%);
  /* O medalhão aparece em dois tamanhos (hero e CTA final) e a sigla de
     fallback precisa encolher junto. `cqw` resolve sem media query:
     1cqw = 1% da largura DESTE medalhão. */
  container-type: inline-size;
}
/* Na hero o medalhão é a peça que segura a dobra: bem maior que no unificados,
   onde dois deles dividiam a mesma linha. Aqui é um só. */
.fusao--hero { width: clamp(224px, 30vw, 340px); }

/* halo quente atrás do medalhão */
.fusao::before {
  content: ''; position: absolute; inset: -16%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--halo, rgba(175,146,86,.30)), transparent 68%);
  animation: halo-breathe 5.4s var(--ease) infinite;
}
@keyframes halo-breathe {
  0%,100% { opacity: .75; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

/* aro de ouro */
.fusao__aro {
  position: absolute; inset: 0; z-index: 1; clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-pale), var(--gold) 26%, var(--gold-deep) 62%, var(--gold-dark));
  filter: drop-shadow(0 16px 38px rgba(0,0,0,.8));
}
/* núcleo — deixa o aro aparecer com 3px e recorta os dois lados */
.fusao__core {
  position: absolute; inset: 3px; z-index: 2; overflow: hidden;
  clip-path: var(--hex);
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(175,146,86,.20), transparent 58%),
    linear-gradient(180deg, #1B1B23, #0A0A0D);
}

.fusao__lado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: filter var(--t), transform var(--t);
}
/* A diagonal vai de 54% no topo a 46% na base: uma inclinação de sabre, não
   um corte vertical de tabela. */
.fusao__lado--a { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.fusao__lado--b { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }

/* Cada desenho é ANCORADO na sua cunha por left/right, não empurrado por
   transform: em transform a porcentagem é da largura do PRÓPRIO elemento, e
   como brasão e emblema têm proporções diferentes o mesmo valor daria
   deslocamento diferente em cada um.

   A caixa quadrada com object-fit:contain equaliza as proporções: sobra em
   torno de 60% de cada desenho visível de um lado da costura — o bastante
   para reconhecer, e ainda assim claramente cortado, que é o efeito de fusão
   que se quer.

   62% é o teto: a caixa vai de 19% a 81% da altura, e é o que cabe dentro da
   faixa de largura cheia do hexágono (18%–82%). Subir daqui volta a encostar
   no bico e a decepar o desenho.

   Os 13% de recuo mantêm uma faixa do núcleo escuro e do aro de ouro à mostra
   em volta do desenho. Sem ela o medalhão deixa de parecer um medalhão. */
.fusao__lado img {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 62%; height: 62%; object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.7));
}
.fusao__lado--a img { left: 13%; }
.fusao__lado--b img { right: 13%; }

/* Recurso de segurança: se a imagem não carregar, o lado mostra a sigla no
   mesmo lugar e com o mesmo peso. O JS troca a classe no onerror do <img>
   (script.js, bloco "brasões ausentes"), então a página nunca exibe o ícone
   de imagem quebrada. */
.fusao__sigla {
  display: none;
  font-family: var(--font-title); font-weight: 800;
  font-size: 9cqw; letter-spacing: .5px; line-height: 1; text-align: center;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(175,146,86,.35);
}
/* A sigla é ANCORADA na cunha por left/right pelo mesmo motivo das imagens.
   O recorte é na meia-altura, onde o hexágono é mais largo e a costura passa
   exatamente em 50% — é a única faixa em que cabe a sigla inteira. */
.fusao__lado--a .fusao__sigla,
.fusao__lado--b .fusao__sigla {
  position: absolute; top: 50%; transform: translateY(-50%);
}
.fusao__lado--a .fusao__sigla { left: 7%;  right: 49%; }
.fusao__lado--b .fusao__sigla { left: 49%; right: 7%;  }
.fusao__lado.is-fallback img { display: none; }
.fusao__lado.is-fallback .fusao__sigla { display: block; }

/* ─── COSTURA ──────────────────────────────────────────────
   O fio de luz que junta as duas metades. A inclinação bate com a diagonal
   dos clip-paths: 8% de largura ao longo de 100% de altura num quadrado dá
   ~4.6°, e o topo cai à direita, então a rotação é positiva. */
.fusao__costura {
  position: absolute; left: 50%; top: -6%; z-index: 3;
  width: 2px; height: 112%;
  transform: translateX(-50%) rotate(4.6deg);
  background: linear-gradient(180deg, transparent, var(--gold-pale) 18%, #fff 50%, var(--gold-pale) 82%, transparent);
  box-shadow: 0 0 16px 2px rgba(240,220,176,.6);
  pointer-events: none;
}
/* faísca que respira no meio da costura. Miúda de propósito: grande, sobre
   dois desenhos cheios, ela lia como borrão claro no meio da peça. */
.fusao__faisca {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 5cqw; height: 5cqw;          /* escala com o medalhão, como a sigla */
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(140deg, #FFFDF6, var(--gold-light));
  box-shadow: 0 0 14px 2px rgba(240,220,176,.75);
  animation: faisca 3.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes faisca {
  0%,100% { transform: translate(-50%,-50%) rotate(45deg) scale(1);   opacity: .9; }
  50%     { transform: translate(-50%,-50%) rotate(45deg) scale(1.3); opacity: 1; }
}

.fusao:hover .fusao__lado--a { transform: translateX(-4px); }
.fusao:hover .fusao__lado--b { transform: translateX(4px); }

/* =========================================================
   A COLISÃO — só o medalhão da hero
   ---------------------------------------------------------
   No carregamento o medalhão aparece VAZIO: aro de ouro e núcleo escuro, sem
   nada dentro. Aí as duas metades entram cada uma do seu lado, se chocam no
   meio e param. É do choque que saem a costura, o clarão, a onda e os
   estilhaços — nada disso existe antes.

   A marcação de tempo (--vem, --bate, --impacto) mora na .hero, que é o
   ancestral comum deste medalhão e da manchete — os dois batem no mesmo
   instante. `--impacto` é `--vem + --bate` calculado à mão de propósito: usar
   calc() aqui obrigaria a repetir a soma em cada delay e a conta ficaria
   escondida em meia dúzia de lugares.

   O medalhão do CTA final NÃO entra nisto (o seletor é .fusao--hero): ele
   nasce montado, porque quem chega lá já viu a colisão lá em cima. */
/* As metades entram de FORA do medalhão. O overflow do núcleo as esconde até
   cruzarem a borda, então elas não aparecem flutuando sobre a hero — surgem
   já dentro do aro, como se o medalhão as tivesse capturado.

   O easing é de freada, não de mola: chega rápido e trava seco. Um
   cubic-bezier com overshoot faria as metades quicarem, e quicar é o oposto
   de bater. */
.fusao--hero .fusao__lado--a {
  animation: bate-esq var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards;
}
.fusao--hero .fusao__lado--b {
  animation: bate-dir var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards;
}
@keyframes bate-esq {
  0%   { transform: translateX(-155%); filter: blur(3px); opacity: .25; }
  70%  { opacity: 1; }
  100% { transform: translateX(0);     filter: blur(0);   opacity: 1; }
}
@keyframes bate-dir {
  0%   { transform: translateX(155%);  filter: blur(3px); opacity: .25; }
  70%  { opacity: 1; }
  100% { transform: translateX(0);     filter: blur(0);   opacity: 1; }
}

/* a costura só existe depois que as duas metades se encontram */
.fusao--hero .fusao__costura {
  opacity: 0;
  animation: costura-acende .55s var(--ease) var(--impacto) forwards;
}
@keyframes costura-acende {
  0%   { opacity: 0; transform: translateX(-50%) rotate(4.6deg) scaleY(.2); filter: brightness(3); }
  35%  { opacity: 1; transform: translateX(-50%) rotate(4.6deg) scaleY(1.1); }
  100% { opacity: 1; transform: translateX(-50%) rotate(4.6deg) scaleY(1);   filter: brightness(1); }
}

/* a faísca acende no impacto e só então assume o pulso perpétuo. São duas
   animações porque `faisca` é infinita e não pode carregar a entrada: a última
   da lista vence enquanto roda, e o `forwards` da primeira segura o opacity
   no intervalo entre uma e outra. */
.fusao--hero .fusao__faisca {
  opacity: 0;
  animation:
    faisca-acende .25s var(--ease) var(--impacto) forwards,
    faisca 3.2s var(--ease) 1.75s infinite;
}
@keyframes faisca-acende {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(3.4); }
  100% { opacity: .9; transform: translate(-50%,-50%) rotate(45deg) scale(1); }
}

/* recuo do medalhão inteiro: um golpe curto, sem balanço.
   Fica no .fusao (e não no núcleo) para o aro e o halo sacudirem junto — se
   só o miolo tremesse, a moldura pareceria solta. */
.fusao--hero { animation: recuo .42s var(--ease) var(--impacto) backwards; }
@keyframes recuo {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.055); }
  42%  { transform: scale(.984) translateX(2px); }
  68%  { transform: scale(1.012) translateX(-1px); }
  100% { transform: scale(1) translateX(0); }
}

/* ─── CLARÃO ───────────────────────────────────────────────
   O estouro de luz do encontro. Fica FORA do núcleo, para não ser recortado
   pelo hexágono: o clarão tem que vazar por cima da moldura. */
.fusao__clarao {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 62%; height: 62%; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #FFFDF6 0%, var(--gold-pale) 26%, rgba(196,112,63,.5) 52%, transparent 72%);
  mix-blend-mode: screen; pointer-events: none;
  animation: clarao .5s ease-out var(--impacto) backwards;
}
@keyframes clarao {
  0%   { opacity: 0;  transform: translate(-50%,-50%) scale(.15); }
  12%  { opacity: .95; }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(2.4); }
}

/* ─── ONDA DE CHOQUE ───────────────────────────────────────
   Um anel de ouro que sai do centro e passa por cima do aro. É o que dá
   escala ao impacto: sem ele o choque acontece só dentro do medalhão e some. */
.fusao__onda {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--gold-pale);
  transform: translate(-50%,-50%) scale(.2); opacity: 0;
  pointer-events: none;
  animation: onda .85s cubic-bezier(.15,.75,.3,1) var(--impacto) backwards;
}
@keyframes onda {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(.2);  border-width: 6px; }
  10%  { opacity: .85; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.85); border-width: 1px; }
}

/* ─── ESTILHAÇOS ───────────────────────────────────────────
   Os cacos que saltam do choque. O script.js cria os <i> e escreve o ângulo e
   a distância de cada um em variáveis CSS; a animação toda mora aqui, e mexe
   só em transform e opacity. Sem JS o medalhão continua batendo — só não
   solta faísca, e ninguém sente falta do que nunca viu. */
/* container-type torna esta camada a régua do `cqw` usado no --dist dos cacos:
   ela é `inset: 0` dentro do medalhão, então 1cqw = 1% da largura do medalhão.
   Sem isso a distância cairia na largura do próprio caco — ver o comentário no
   script.js. */
.fusao__estilhacos {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  container-type: inline-size;
}
.estilhaco {
  position: absolute; left: 50%; top: 50%;
  width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFDF6, var(--cor, var(--gold-light)) 55%, transparent 76%);
  box-shadow: 0 0 10px 2px var(--cor, var(--gold-light));
  opacity: 0;
  animation: estilhaco var(--dur, .9s) cubic-bezier(.1,.7,.3,1) var(--atraso, 0s) backwards;
}
/* A rotação vem primeiro e o deslocamento depois: assim o `translateX` anda no
   eixo já girado, e um ângulo por caco basta para espalhar em círculo. */
@keyframes estilhaco {
  0%   { opacity: 0;   transform: translate(-50%,-50%) rotate(var(--ang)) translateX(0); }
  12%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scale(.3); }
}

/* a placa só entra depois da batida — antes dela, não há o que nomear.
   Keyframe próprio, e não o `rise` da hero: aquele só declara o passo final, e
   um `backwards` sobre ele congelaria a placa no estado JÁ VISÍVEL durante o
   atraso, que é exatamente o que não se quer aqui. */
.fusao--hero ~ .fusao__placa {
  opacity: 0;
  animation: entra-apos-impacto .5s var(--ease) calc(var(--impacto) + .22s) forwards;
}
@keyframes entra-apos-impacto {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── PLACA SOB O MEDALHÃO ─────────────────────────────── */
.fusao__placa {
  margin-top: 18px; padding: 12px 22px 11px; text-align: center;
  background: linear-gradient(180deg, rgba(24,24,30,.85), rgba(12,12,15,.9));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: box-shadow var(--t);
}
.fusao-wrap:hover .fusao__placa { box-shadow: inset 0 0 0 1px var(--border-active); }
.fusao__placa b {
  display: block; font-family: var(--font-title); font-size: 14px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light);
}
.fusao__placa span {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--text-mute);
}

/* ─── FICHA (números da hero) ──────────────────────────── */
.ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 52px; }
.ficha__item {
  position: relative; padding: 18px 16px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(24,24,30,.78), rgba(12,12,15,.86));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.ficha__item:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--border-active);
  background: linear-gradient(180deg, rgba(31,31,40,.9), rgba(14,14,18,.92));
}
.ficha__item b {
  display: block; font-family: var(--font-title);
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1;
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ficha__item span {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--text-mute); line-height: 1.5;
}

.scroller {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1px solid var(--border-active); border-radius: 12px; z-index: 4;
}
.scroller i {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--gold); transform: translateX(-50%); animation: scrolldot 1.9s infinite;
}
@keyframes scrolldot { 0%{opacity:0;top:7px} 40%{opacity:1} 80%{opacity:0;top:20px} 100%{opacity:0} }

/* =========================================================
   FAIXA CORRIDA
   ========================================================= */
.strip {
  position: relative; z-index: 2; overflow: hidden;
  background: linear-gradient(180deg, #0e0e11, #131317);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 15px 0;
}
.strip__track { display: flex; gap: 46px; width: max-content; animation: marquee 38s linear infinite; }
.strip__track span {
  display: inline-flex; align-items: center; gap: 46px;
  font-family: var(--font-title); font-size: 12.5px; font-weight: 700;
  letter-spacing: 5px; text-transform: uppercase; color: var(--gold-dark);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   INSCRIÇÃO — painel de data + formulário
   ---------------------------------------------------------
   É o bloco que o unificados não tem: aquela é uma página de venda direta,
   sem captura. As duas colunas dividem a mesma moldura chanfrada, com um fio
   de ouro entre elas, para lerem como uma peça só e não como dois cards.
   ========================================================= */
.inscricao {
  display: grid; grid-template-columns: .85fr 1.15fr;
  max-width: 1000px; margin-inline: auto;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

/* ─── painel esquerdo ─── */
.painel {
  position: relative; padding: 40px 34px;
  background:
    radial-gradient(420px 260px at 20% 0%, rgba(196,112,63,.12), transparent 70%),
    linear-gradient(180deg, rgba(24,24,30,.9), rgba(12,12,15,.92));
  border-right: 1px solid var(--border);
}
.painel__quando {
  width: 84px; text-align: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.painel__dia {
  display: block; padding: 6px 0 2px;
  font-family: var(--font-title); font-size: 40px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.painel__mes {
  display: block; padding: 4px 0 5px;
  background: linear-gradient(168deg, var(--gold-light), var(--gold-dark));
  font-size: 11px; font-weight: 700; letter-spacing: 3.4px; color: #0B0A08;
}
.painel__meta { margin-top: 20px; }
.painel__meta b {
  display: block; font-family: var(--font-title); font-size: 20px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text);
}
.painel__meta span {
  display: block; margin-top: 5px;
  font-size: 13.5px; letter-spacing: 1px; color: var(--text-mute);
}

.painel__lista { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.painel__lista li {
  position: relative; padding-left: 34px;
  font-size: 15px; line-height: 1.55; color: var(--text-dim);
}
.painel__lista li::before {
  content: '✓'; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--font-title); font-size: 12px; font-weight: 800; color: var(--gold);
  background: rgba(175,146,86,.14);
  box-shadow: inset 0 0 0 1px rgba(175,146,86,.4);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ─── contagem regressiva ─── */
.cdown {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(4px, 1.6vw, 14px); margin-top: 26px; padding: 18px 14px;
  background: linear-gradient(180deg, rgba(10,10,11,.7), rgba(10,10,11,.4));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.cdown__unit { flex: 1; text-align: center; }
.cdown__unit b {
  display: block; font-family: var(--font-title);
  font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1;
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 44px rgba(175,146,86,.22);
}
.cdown__unit span {
  display: block; margin-top: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-mute);
}
.cdown__sep { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
.cdown__sep::before, .cdown__sep::after {
  content: ''; width: 4px; height: 4px; background: var(--gold-deep);
}
.cdown.is-over .cdown__unit b {
  background: linear-gradient(180deg, #8f8f8f, #4b4b4b);
  -webkit-background-clip: text; background-clip: text;
}

/* ─── formulário ─── */
.cadastro { padding: 40px 38px; }
.cadastro__eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold);
}
.cadastro__titulo {
  margin: 10px 0 26px;
  font-family: var(--font-title); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text);
}

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--text-mute);
}
/* Chanfro no input também: um retângulo de cantos retos no meio de uma página
   inteira de cantos cortados denuncia o componente emprestado. */
.field input {
  height: 54px; padding: 0 18px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: var(--text); background: rgba(10,10,11,.6);
  border: 0; box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: box-shadow var(--t), background var(--t);
}
.field input::placeholder { color: #6C6A62; font-weight: 500; }
.field input:focus {
  outline: none; background: rgba(10,10,11,.85);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(175,146,86,.14);
}
.field input.is-invalid { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px rgba(194,91,82,.14); }
.error {
  display: block; min-height: 1em;
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #D08F88;
}
.note {
  text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute);
}
.success {
  padding: 14px 16px; text-align: center;
  font-size: 14.5px; font-weight: 600; color: var(--gold-pale);
  background: rgba(175,146,86,.12);
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* =========================================================
   O CONCURSO — card de vagas + etapas
   ========================================================= */
.vagas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: start; }

.vaga {
  position: relative; overflow: hidden; padding: 30px 26px 28px; text-align: center;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: transform var(--t), box-shadow var(--t);
}
.vaga::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(300px circle at 50% 0%, var(--halo, rgba(175,146,86,.16)), transparent 68%);
}
.vaga:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--border-active); }
.vaga:hover::before { opacity: 1; }
.vaga > * { position: relative; z-index: 1; }

/* mesmo medalhão hexagonal da fusão, em escala de ícone */
.vaga__crest {
  position: relative; width: 96px; height: 96px; margin: 0 auto 18px;
  --hex: polygon(50% 0%, 93.3% 18%, 93.3% 82%, 50% 100%, 6.7% 82%, 6.7% 18%);
}
.vaga__crest::before {
  content: ''; position: absolute; inset: 0; clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-pale), var(--gold) 30%, var(--gold-deep) 70%, var(--gold-dark));
}
.vaga__crest::after {
  content: ''; position: absolute; inset: 2px; clip-path: var(--hex);
  background: linear-gradient(180deg, #1B1B23, #0C0C10);
}
.vaga__crest img, .vaga__crest .fusao__sigla {
  position: absolute; inset: 0; z-index: 2; margin: auto;
  width: 72%; height: 72%; object-fit: contain;
}
.vaga__crest .fusao__sigla {
  display: none; width: auto; height: auto;
  font-size: 14px; letter-spacing: 1px; text-align: center; line-height: 96px;
}
.vaga__crest.is-fallback img { display: none; }
.vaga__crest.is-fallback .fusao__sigla { display: block; }

.vaga h3 {
  font-family: var(--font-title); font-size: 18px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text);
}
.vaga__sigla {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold);
}
.vaga__num {
  display: block; margin: 18px 0 4px;
  font-family: var(--font-title); font-size: 46px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(175,146,86,.22);
}
.vaga__num-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-mute);
}
.vaga__detalhe {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
}
.vaga__detalhe b { display: block; color: var(--gold-light); font-weight: 700; }

/* ─── etapas ─── */
.etapas { display: grid; gap: 12px; }
.etapas__titulo {
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px;
}
.etapa {
  display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: transform var(--t), box-shadow var(--t);
}
.etapa:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--border-active); }
.etapa__n {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  font-family: var(--font-title); font-size: 15px; font-weight: 800; color: var(--gold);
  background: linear-gradient(160deg, rgba(175,146,86,.20), rgba(175,146,86,.03));
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.etapa h3 {
  font-family: var(--font-title); font-size: 16px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); margin-bottom: 5px;
}
.etapa p { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* =========================================================
   CARDS
   ========================================================= */
.cards { display: grid; gap: 18px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; padding: 34px 30px 32px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  transition: transform var(--t), box-shadow var(--t);
}
/* brilho que segue o cursor */
.card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(175,146,86,.13), transparent 60%);
}
.card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--border-active); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card--slim { padding: 30px 26px 28px; }

.card h3 {
  font-family: var(--font-title); font-size: 19px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text); margin-bottom: 10px;
  padding-right: 34px;
}
.card p { color: var(--text-dim); font-size: 16px; line-height: 1.66; }
.card p strong { color: var(--gold-light); }
.card__n {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-title); font-size: 12px; font-weight: 700;
  letter-spacing: 2px; color: rgba(175,146,86,.28);
}

.section .center { margin-top: 48px; }

/* =========================================================
   O PROFESSOR
   ========================================================= */
.duo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.duo__foto {
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
/* A foto já sai tratada do recorte (public/everton-mota.webp: fundo de
   estúdio removido, clarão quente atrás, saturação baixada). Um filter aqui
   dessaturaria de novo e apagaria o halo. */
.duo__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.duo__placa {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: block; padding: 12px 18px; text-align: left;
  background: linear-gradient(180deg, rgba(24,24,30,.9), rgba(12,12,15,.94));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--border-active);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.duo__placa b {
  display: block; font-family: var(--font-title); font-size: 15px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-light);
}
.duo__placa span {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--text-mute);
}
.duo__texto p { margin-top: 18px; color: var(--text-dim); font-size: 16.5px; line-height: 1.7; }
.duo__texto p strong { color: var(--gold-light); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.stat {
  padding: 18px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(24,24,30,.78), rgba(12,12,15,.86));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: box-shadow var(--t), transform var(--t);
}
.stat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--border-active); }
.stat b {
  display: block; font-family: var(--font-title);
  font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--text-mute); line-height: 1.5;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: box-shadow var(--t);
}
.faq__item[open] { box-shadow: inset 0 0 0 1px var(--border-active); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 62px 22px 26px;
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 1px; color: var(--text); transition: color var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-light); }
.faq__item summary::after {
  content: '+'; position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--gold); transition: transform var(--t);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 26px 24px; color: var(--text-dim); font-size: 16px; line-height: 1.7; }
.faq__item strong { color: var(--gold-light); }

/* =========================================================
   CTA FINAL
   ========================================================= */
.final { position: relative; z-index: 2; padding: 116px 0; overflow: hidden; text-align: center; }
.final::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 520px at 50% 100%, rgba(196,112,63,.12), transparent 68%),
    linear-gradient(180deg, var(--bg), #0D0D10);
}
.final::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--border-active), transparent);
}
.final__inner { position: relative; z-index: 3; }
.final .fusoes { margin-top: 0; margin-bottom: 34px; }
.final h2 {
  font-family: var(--font-title);
  font-size: clamp(30px, 4.8vw, 54px); font-weight: 800; line-height: 1.04;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.final p { margin: 22px auto 34px; max-width: 60ch; color: var(--text-dim); font-size: 17px; }
.final__note {
  display: block; margin-top: 18px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-mute);
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer { position: relative; z-index: 2; background: #08080A; border-top: 1px solid var(--border); padding: 62px 0 0; }
.footer__inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 44px;
}
.footer__leao { display: block; width: 74px; }
.footer__brand p { margin: 18px 0 20px; color: var(--text-dim); font-size: 15px; font-style: italic; max-width: 40ch; line-height: 1.6; }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: color var(--t), box-shadow var(--t), background var(--t);
}
.footer__social a:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--border-active); background: rgba(175,146,86,.08); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__col h4 {
  font-family: var(--font-title); font-size: 13px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.footer__col a { display: block; padding: 6px 0; color: var(--text-dim); font-size: 15px; transition: color var(--t); }
.footer__col a:hover { color: var(--gold-light); }
.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 22px 0 34px; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; letter-spacing: .6px; color: var(--text-mute);
}
.footer__bar strong { color: var(--text-dim); font-weight: 700; }
.footer__cnpj { letter-spacing: 1.4px; }
@media (max-width: 720px) { .footer__bar { padding-bottom: 96px; } }

/* =========================================================
   BARRA FIXA (mobile)
   ========================================================= */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
  display: none; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(9,9,10,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-active);
  /* visibility junto do transform: só deslocar deixaria o botão fora da tela
     ainda alcançável pelo Tab. */
  transform: translateY(110%); visibility: hidden;
  transition: transform .35s var(--ease), visibility .35s;
}
.dock.is-on { transform: none; visibility: visible; }
.dock__info { flex: 1; min-width: 0; }
.dock__info b { display: block; font-family: var(--font-title); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-light); }
.dock__info span { display: block; font-size: 11.5px; letter-spacing: 1.4px; color: var(--text-mute); }

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.anim { opacity: 0; transform: translateY(20px); animation: rise .8s var(--ease) forwards; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .18s } .d3 { animation-delay: .32s }
.d4 { animation-delay: .46s } .d5 { animation-delay: .6s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* =========================================================
   BRASAS — a camada de atmosfera da página inteira
   ---------------------------------------------------------
   As faíscas da hero (.sparks) morrem na primeira dobra e o resto da página
   ficaria seco: preto chapado, sem nada acontecendo entre uma seção e outra.
   As brasas sobem pela viewport o tempo todo, independente de onde a pessoa
   está — é `position: fixed`, então elas não rolam junto, elas sobem através
   do conteúdo como se a página estivesse sobre um braseiro.

   O z-index é 205: ACIMA das seções (que vivem em 2) e logo abaixo do grão do
   body (210). Embaixo não adiantaria — as seções pintam fundo opaco por cima
   e as brasas sumiriam. Navbar (300), dock (280) e o botão do WhatsApp (290)
   ficam por cima, para nenhuma faísca passar na frente de um controle.
   ========================================================= */
.brasas { position: fixed; inset: 0; z-index: 205; pointer-events: none; overflow: hidden; }
/* o calor de onde as brasas saem: um clarão morno preso à base da viewport */
.brasas::after {
  content: ''; position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%);
  width: 150%; height: 34%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(196,112,63,.11), rgba(175,146,86,.045) 42%, transparent 72%);
}
.brasa {
  position: absolute; bottom: -24px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFEFC9, var(--cor) 52%, transparent 74%);
  box-shadow: 0 0 calc(var(--s) * 3) calc(var(--s) * .35) var(--cor);
  opacity: 0;
  animation: brasa-sobe var(--dur) linear infinite;
  animation-delay: var(--atraso);
  will-change: transform, opacity;
}
/* O bailado lateral vive nos keyframes, e não numa segunda animação sobre um
   elemento aninhado: uma brasa é um ponto de luz de 3px, e um único
   translate3d por passo já entrega a deriva sem dobrar o número de nós. */
@keyframes brasa-sobe {
  0%   { opacity: 0;              transform: translate3d(0, 0, 0)          scale(1); }
  6%   { opacity: var(--op); }
  25%  {                          transform: translate3d(16px, -26vh, 0)   scale(.94); }
  50%  {                          transform: translate3d(-12px, -52vh, 0)  scale(.84); }
  75%  { opacity: calc(var(--op) * .55);
                                  transform: translate3d(14px, -78vh, 0)   scale(.68); }
  100% { opacity: 0;              transform: translate3d(-6px, -104vh, 0)  scale(.5); }
}

/* faíscas douradas da hero */
.sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 10px 2px rgba(201,174,122,.6);
  opacity: 0; animation: float linear infinite;
}
@keyframes float {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  12%  { opacity: .85; }
  85%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-260px) scale(.5); }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-count { margin-left: auto; }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .inscricao { grid-template-columns: 1fr; max-width: 560px; }
  .painel { border-right: 0; border-bottom: 1px solid var(--border); }
  .vagas { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 30px; }
  .duo__foto { max-width: 380px; margin-inline: auto; }
  .section__title--left::after { margin-inline: auto; }
  .duo__texto { text-align: center; }
  .duo__texto .eyebrow { justify-content: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 74px 0; }
  .container { width: calc(100% - 32px); }

  .header__inner { width: calc(100% - 24px); }
  .brand__nome { font-size: 16px; letter-spacing: 2px; }
  .brand__nome i { font-size: 8.5px; letter-spacing: 2px; }
  .nav-count { display: none; }

  .hero { padding-top: calc(var(--nav-h) + 30px); min-height: auto; padding-bottom: 58px; }
  .hero__bg i { opacity: .22; }
  .hero__cta .btn { width: 100%; }
  /* a etiqueta é longa: em tela estreita ela quebra em vez de vazar da caixa */
  .tag { height: auto; min-height: 38px; padding: 8px 14px; font-size: 10.5px;
         letter-spacing: 2px; line-height: 1.5; }

  .fusoes { margin-top: 34px; }
  .fusao--hero { width: clamp(200px, 60vw, 260px); }

  .ficha { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 36px; }
  .scroller { display: none; }

  .cards--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 14px 8px; }
  .stat span { font-size: 9px; letter-spacing: 1.6px; }

  .painel, .cadastro { padding: 30px 22px; }
  /* os separadores da contagem comem a largura das unidades em tela estreita */
  .cdown { padding: 16px 8px; gap: 2px; }
  .cdown__sep { display: none; }

  .etapa { padding: 18px 18px; gap: 14px; }
  .card h3 { padding-right: 30px; }

  .footer__inner { grid-template-columns: 1fr; gap: 26px; }
  .footer__bar { flex-direction: column; text-align: center; }

  .dock { display: flex; }
  .btn--lg { height: 58px; padding: 0 26px; font-size: 13.5px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    /* o delay também: sem isto a colisão vira 1,5s de medalhão vazio antes de
       o conteúdo simplesmente aparecer */
    animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .anim { opacity: 1; transform: none; }
}