/* ============================================================================
   WECOIN — wecoin.online
   ----------------------------------------------------------------------------
   Landing de captura com roleta de prêmios. A identidade é a mesma da WEP
   Finance (preto com subtom violeta + gradiente violeta→magenta), porque é para
   lá que o lead vai cair depois do autologin: a pessoa não pode sentir que
   trocou de empresa no meio do caminho.

   O que é DA WECOIN e não do broker: o verde-limão e o dourado. Eles carregam a
   "pegada brasileira" sem cair no pastiche de bandeira — aparecem em dinheiro,
   selos e no prêmio máximo da roda, nunca como cor de fundo.

   ORDEM DO ARQUIVO
     1. tokens        6. roleta
     2. base          7. seções de conteúdo
     3. layout        8. modal + confete
     4. componentes   9. rodapé
     5. hero e form  10. responsivo
   ========================================================================== */

@import url('../fonts/space-grotesk/font.css');
@import url('../fonts/jetbrains-mono/font.css');

/* ------------------------------------------------------------- 1. tokens -- */
:root {
  --bg: #07050C;
  --s1: #0E0A16;
  --s2: #15101F;
  --s3: #1D1629;

  --bd: rgba(168, 85, 247, .13);
  --bd2: rgba(168, 85, 247, .26);
  --bd3: rgba(168, 85, 247, .45);

  --tx: #F3EEFA;
  --tm: #A99BBE;
  --tl: #6E6285;

  --ac: #A855F7;
  --ac2: #7C3AED;
  --pk: #FF2E88;
  --acb: rgba(168, 85, 247, .13);
  --grad: linear-gradient(135deg, #A855F7 0%, #C13BE8 45%, #FF2E88 100%);

  /* Verde/ouro: dinheiro, selos e o prêmio máximo. */
  --gr: #2BD98A;
  --grb: rgba(43, 217, 138, .12);
  --gold: #F5B841;
  --goldb: rgba(245, 184, 65, .12);

  --r2: 12px;
  --r3: 16px;
  --r4: 22px;

  --sh2: 0 14px 38px rgba(0, 0, 0, .5);
  --sh3: 0 32px 90px rgba(0, 0, 0, .62);
  --glow: 0 14px 40px -10px rgba(124, 58, 237, .55);

  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --wheel: clamp(300px, 42vw, 486px);
  --nav-h: 66px;
}

/* --------------------------------------------------------------- 2. base -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

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

/* Auréola fixa no topo: dá profundidade ao preto sem custar um elemento. */
body::before {
  content: '';
  position: fixed;
  top: -320px;
  left: 50%;
  width: 1100px;
  height: 720px;
  margin-left: -550px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, .20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
::selection { background: rgba(168, 85, 247, .34); color: #fff; }

.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------- 3. layout -- */
.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.sec { position: relative; z-index: 1; padding: clamp(56px, 8vw, 104px) 0; }
.sec-tight { padding-block: clamp(38px, 5vw, 62px); }

.sec-head { text-align: center; max-width: 660px; margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ac);
  background: var(--acb);
  border: 1px solid var(--bd2);
  border-radius: 100px;
  padding: 6px 13px;
}
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.06; font-weight: 700; }
.h1 { font-size: clamp(34px, 5.6vw, 62px); }
.h2 { font-size: clamp(27px, 3.8vw, 43px); margin-top: 16px; }
.h3 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -.02em; }
.lead-p { color: var(--tm); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.6; margin-top: 16px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gold-text { color: var(--gold); }

/* Aparecer ao rolar. Sem JS (ou com movimento reduzido) o conteúdo já nasce
   visível — a animação é enfeite, não pode ser condição para ler a página. */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.no-js .reveal, .reveal.is-off { opacity: 1; transform: none; }

/* -------------------------------------------------------- 4. componentes -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 100px;
  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
  min-height: 52px;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-gold { background: linear-gradient(135deg, #FFD877, #F5B841 55%, #D89A16); color: #1A1206; box-shadow: 0 14px 40px -12px rgba(245, 184, 65, .6); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { border: 1px solid var(--bd2); color: var(--tx); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: var(--bd3); background: var(--acb); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.btn-block { width: 100%; }

.card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r3);
  padding: 22px;
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--tm);
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--bd);
  border-radius: 100px;
  padding: 7px 13px;
}
.chip-gr { color: var(--gr); border-color: rgba(43, 217, 138, .3); background: var(--grb); }
.chip-gold { color: var(--gold); border-color: rgba(245, 184, 65, .32); background: var(--goldb); }

/* Moldura com a luz girando — a mesma do login do broker. Um por tela. */
.glow-frame {
  position: relative;
  padding: 2px;
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: 0 0 80px -16px rgba(168, 85, 247, .6), var(--sh3);
}
.glow-frame::before, .glow-frame::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 170%; aspect-ratio: 1;
  margin: -85% 0 0 -85%;
  will-change: transform;
}
.glow-frame::before {
  background: conic-gradient(from 0turn, transparent 0 .58turn, rgba(91, 33, 182, .55) .68turn,
              var(--ac) .80turn, var(--pk) .90turn, #fff .965turn, transparent 1turn);
  animation: spin-frame 3.8s linear infinite;
}
.glow-frame::after {
  background: conic-gradient(from .5turn, transparent 0 .70turn, rgba(255, 46, 136, .30) .82turn,
              rgba(168, 85, 247, .75) .93turn, transparent 1turn);
  animation: spin-frame 6.4s linear infinite reverse;
}
.glow-frame > * { position: relative; z-index: 1; }
.glow-frame-inner {
  background: linear-gradient(180deg, var(--s2), var(--s1));
  border-radius: 20px;
  padding: clamp(20px, 3.2vw, 30px);
}
@keyframes spin-frame { to { transform: rotate(1turn); } }

/* ---- Campos ---- */
.field { margin-bottom: 13px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tm); margin-bottom: 6px; }
.input {
  width: 100%;
  background: rgba(7, 5, 12, .7);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  padding: 14px 15px;
  /* 16px trava o zoom automático do iOS ao focar o campo. */
  font-size: 16px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder { color: var(--tl); }
.input:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px var(--acb); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A99BBE' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.input.has-error { border-color: var(--pk); box-shadow: 0 0 0 3px rgba(255, 46, 136, .14); }
.field-err { display: none; color: var(--pk); font-size: 12px; margin-top: 5px; }
.field-err.is-on { display: block; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  display: none;
  border-radius: var(--r2);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 14px;
  background: rgba(255, 46, 136, .1);
  border: 1px solid rgba(255, 46, 136, .35);
  color: #FF7FB0;
}
.form-alert.is-on { display: block; }
.form-alert a { text-decoration: underline; font-weight: 600; }

/* -------------------------------------------------------- 5. nav e hero --- */
.announce {
  position: relative; z-index: 3;
  background: var(--grad);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  text-align: center;
  padding: 9px 14px;
}
.announce b { font-weight: 800; }

.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(7, 5, 12, .72);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--bd); background: rgba(7, 5, 12, .93); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  box-shadow: 0 0 24px rgba(168, 85, 247, .55);
}
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; color: var(--tm); }
.nav-links a:hover { color: var(--tx); }

.hero { position: relative; z-index: 1; padding: clamp(30px, 5vw, 62px) 0 clamp(46px, 6vw, 80px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}
.hero-copy { max-width: 560px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.hero-form-wrap { margin-top: 26px; }
.form-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.form-sub { color: var(--tm); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-legal { font-size: 11px; color: var(--tl); line-height: 1.5; text-align: center; margin-top: 11px; }
.form-legal a { text-decoration: underline; }

/* --------------------------------------------------------------- 6. roleta */
.wheel-stage {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.wheel-box { position: relative; width: var(--wheel); height: var(--wheel); }

/* Ponteiro no topo, apontando para dentro. É ele que define o "12 horas":
   toda a matemática do giro no JS mira este ponto. */
.wheel-pointer {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  /* A ponta desce 24px além da borda da caixa — 15px de aro + 9px dentro da
     roda —, para o ponteiro TOCAR a fatia que aponta em vez de flutuar sobre
     o aro. E o z-index precisa passar do véu de "travada" (6): sob o véu, o
     branco vira cinza e a seta some. */
  border-top: 46px solid #FFFFFF;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .9));
  z-index: 8;
}
/* Botão dourado que "prende" o ponteiro. Fica ACIMA do triângulo (não em cima
   dele): sobreposto, ele comia metade da seta e o conjunto virava só um disco. */
.wheel-pointer::after {
  content: '';
  position: absolute;
  top: -52px; left: -16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFD877, #D89A16);
  box-shadow: 0 0 0 4px rgba(7, 5, 12, .9), 0 0 26px rgba(245, 184, 65, .55);
}

/* Aro externo: o "corpo" da roda. O anel dourado e a sombra interna dão o
   volume que faz a roda parecer um objeto, e não um gráfico de pizza. */
.wheel-rim {
  position: absolute; inset: 0;
  border-radius: 50%;
  padding: 15px;
  background: conic-gradient(from 0deg, #3A2C50, #6B4E96, #3A2C50, #6B4E96, #3A2C50);
  box-shadow:
    0 0 0 3px rgba(245, 184, 65, .55),
    0 0 60px -8px rgba(168, 85, 247, .6),
    var(--sh3);
}

.wheel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* O background conic vem inline no HTML: as fatias são geradas em PHP a
     partir do mesmo array que sorteia, para desenho e sorteio nunca
     divergirem. */
  transform: rotate(0deg);
  will-change: transform;
}
/* Linhas divisórias entre as fatias. */
.wheel::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(11, 7, 20, .5) 0 .7deg, transparent .7deg 45deg);
  pointer-events: none;
}

.wheel-labels { position: absolute; inset: 0; }
/* Cada etiqueta é uma faixa que sai do centro da roda para a borda e gira em
   torno desse centro. A altura fixa com margin-top negativa é o que faz o
   transform-origin (0 50%) cair EXATAMENTE no centro da roda — com altura
   automática, a faixa nasceria abaixo do centro e o texto giraria torto.
   As porcentagens de width/padding resolvem contra a largura da roda: o texto
   ocupa de 21% a 47% do diâmetro, ou seja, começa fora do miolo e termina
   antes do aro. */
.wheel-label {
  position: absolute;
  left: 50%; top: 50%;
  width: 47%;
  height: 42px;
  margin-top: -21px;
  transform-origin: 0 50%;
  display: flex; align-items: center;
  padding-left: 21%;
}
.wheel-label span {
  font-size: clamp(9.5px, 1.15vw, 13px);
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* Fatias da metade esquerda ficariam de cabeça para baixo; giramos o texto
   180° para continuar legível, como em qualquer roleta física. */
.wheel-label.is-flipped span { transform: rotate(180deg); }

/* Miolo: fica FORA do elemento que gira, senão o texto giraria junto. */
.wheel-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #2B2140, #0B0714 72%);
  border: 3px solid var(--gold);
  color: #fff;
  font-size: clamp(11.5px, 1.35vw, 14px);
  font-weight: 800; letter-spacing: .05em; line-height: 1.2;
  display: grid; place-items: center; text-align: center;
  z-index: 4;
  box-shadow: 0 0 34px rgba(245, 184, 65, .38), inset 0 2px 12px rgba(0, 0, 0, .8);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wheel-hub:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 52px rgba(245, 184, 65, .6), inset 0 2px 12px rgba(0, 0, 0, .8); }
.wheel-hub:disabled { cursor: not-allowed; color: var(--tm); border-color: rgba(245, 184, 65, .34); }

/* Pulso do miolo enquanto a roda está liberada e ninguém clicou ainda. */
.wheel-box.is-armed .wheel-hub {
  animation: hub-pulse 1.5s ease-in-out infinite;
  color: var(--gold);
}
@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(245, 184, 65, .35), inset 0 2px 12px rgba(0, 0, 0, .8); }
  50% { box-shadow: 0 0 62px rgba(245, 184, 65, .75), inset 0 2px 12px rgba(0, 0, 0, .8); }
}

/* Véu de "trancado": some assim que o formulário é validado. */
.wheel-lock {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(7, 5, 12, .46);
  backdrop-filter: blur(1.5px);
  display: grid; place-items: center;
  text-align: center;
  padding: 0 9%;
  z-index: 6;
  transition: opacity .4s ease, visibility .4s ease;
}
.wheel-lock-badge {
  background: rgba(7, 5, 12, .93);
  border: 1px solid var(--bd2);
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 13.5px; font-weight: 700; color: var(--tx);
  line-height: 1.4;
  box-shadow: var(--sh2);
  max-width: 100%;
}
.wheel-lock-badge small { display: block; font-weight: 500; color: var(--tm); font-size: 11.5px; margin-top: 5px; }
.wheel-box.is-unlocked .wheel-lock { opacity: 0; visibility: hidden; }

.wheel-caption { text-align: center; font-size: 12.5px; color: var(--tl); line-height: 1.5; }
.wheel-caption b { color: var(--tm); }

/* ---------------------------------------------------- 7. seções de conteúdo */
/* Faixa de cotações: dois blocos idênticos deslizando dão o loop infinito
   sem emenda visível. */
.ticker {
  border-block: 1px solid var(--bd);
  background: linear-gradient(180deg, rgba(21, 16, 31, .8), rgba(7, 5, 12, .4));
  overflow: hidden;
  position: relative; z-index: 1;
}
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; }
.ticker-item {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  font-size: 13px; white-space: nowrap;
  border-right: 1px solid var(--bd);
}
.ticker-sym { font-weight: 700; letter-spacing: .02em; }
.ticker-px { color: var(--tm); font-family: var(--mono); font-size: 12.5px; }
.ticker-up { color: var(--gr); font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.ticker-dn { color: var(--pk); font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
@keyframes ticker { to { transform: translateX(-50%); } }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mt-40 { margin-top: 40px; }

/* ---- Prêmios ---- */
.prize-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.prize-card {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r3);
  padding: 20px 18px 18px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.prize-card:hover { transform: translateY(-4px); border-color: var(--bd3); }
.prize-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--slice, var(--ac));
}
.prize-card.is-jackpot { border-color: rgba(245, 184, 65, .45); background: linear-gradient(180deg, rgba(245, 184, 65, .07), var(--s1)); }
.prize-emoji { font-size: 26px; line-height: 1; }
.prize-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin-top: 12px; }
.prize-desc { font-size: 12.8px; color: var(--tm); line-height: 1.5; margin-top: 7px; }
.prize-odds {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--tl);
  border: 1px dashed var(--bd2); border-radius: 100px; padding: 3px 9px;
}

/* ---- Passos ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; counter-reset: step; }
.step { position: relative; padding-top: 12px; }
.step-n {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--acb); border: 1px solid var(--bd2);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: var(--ac);
  font-family: var(--mono);
}
.step h3 { margin-top: 16px; }
.step p { color: var(--tm); font-size: 14px; line-height: 1.6; margin-top: 8px; }

/* ---- Diferenciais ---- */
.feat { padding: 22px; }
.feat-ico { font-size: 24px; }
.feat h3 { margin-top: 14px; font-size: 16.5px; }
.feat p { color: var(--tm); font-size: 13.5px; line-height: 1.6; margin-top: 8px; }

/* ---- Simulador ---- */
.sim { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.sim-panel { background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--bd2); border-radius: var(--r4); padding: clamp(22px, 3vw, 30px); }
.sim-amount { font-family: var(--mono); font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -.02em; }
.sim-range { width: 100%; margin-top: 16px; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: var(--s3); cursor: pointer; }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 5px var(--acb); }
.sim-range::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 5px var(--acb); }
.sim-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; border-top: 1px solid var(--bd); padding-top: 20px; }
.sim-out-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--tl); }
.sim-out-v { font-family: var(--mono); font-size: clamp(16px, 2.3vw, 21px); font-weight: 700; color: var(--gr); margin-top: 5px; }
.sim-note { font-size: 11.5px; color: var(--tl); line-height: 1.55; margin-top: 16px; }

/* ---- Depoimentos ---- */
.quote { display: flex; flex-direction: column; gap: 16px; }
.quote-txt { font-size: 14.5px; line-height: 1.65; color: var(--tx); }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #fff;
}
.quote-name { font-size: 13.5px; font-weight: 700; }
.quote-city { font-size: 12px; color: var(--tl); }
.stars { color: var(--gold); font-size: 13px; letter-spacing: .1em; }

/* ---- Números ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 22px 12px; border: 1px solid var(--bd); border-radius: var(--r3); background: var(--s1); }
.stat-v { font-family: var(--mono); font-size: clamp(21px, 3vw, 31px); font-weight: 700; }
.stat-k { font-size: 12px; color: var(--tl); margin-top: 6px; }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; }
.faq details[open] { border-color: var(--bd2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 17px 20px;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 21px; color: var(--ac); line-height: 1; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 20px 18px; color: var(--tm); font-size: 14px; line-height: 1.65; }

/* ---- Chamada final ---- */
.final {
  text-align: center;
  background: linear-gradient(180deg, rgba(168, 85, 247, .10), rgba(255, 46, 136, .05));
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  padding: clamp(34px, 5vw, 58px) clamp(20px, 4vw, 48px);
}

/* --------------------------------------------------- 8. modal e confete --- */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4, 2, 8, .82);
  backdrop-filter: blur(6px);
}
.modal.is-open { display: flex; }
.modal-card {
  width: min(460px, 100%);
  text-align: center;
  animation: pop-in .42s cubic-bezier(.2, 1.1, .3, 1) both;
  max-height: 92vh; overflow-y: auto;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 16px; font-size: 22px; color: var(--tl); z-index: 3; line-height: 1; }
.modal-close:hover { color: var(--tx); }
.modal-badge {
  width: 74px; height: 74px; margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD877, #F5B841 60%, #D89A16);
  display: grid; place-items: center; font-size: 34px;
  box-shadow: 0 0 46px rgba(245, 184, 65, .5);
}
.modal-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.modal-prize { font-size: clamp(24px, 4vw, 31px); font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.modal-desc { color: var(--tm); font-size: 14.5px; line-height: 1.6; margin-top: 14px; }
.modal-note { font-size: 11.5px; color: var(--tl); line-height: 1.55; margin-top: 14px; }

#confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: none; }
#confetti.is-on { display: block; }

/* ------------------------------------------------------------ 9. rodapé -- */
.foot { border-top: 1px solid var(--bd); background: rgba(7, 5, 12, .6); position: relative; z-index: 1; padding: 52px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
.foot p { color: var(--tm); font-size: 13px; line-height: 1.65; margin-top: 14px; max-width: 400px; }
.foot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--tl); font-weight: 700; }
.foot ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.foot li a { font-size: 13.5px; color: var(--tm); }
.foot li a:hover { color: var(--tx); }
.foot-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bd); font-size: 11.5px; color: var(--tl); line-height: 1.7; }
.foot-legal details { margin-top: 12px; }
.foot-legal summary { cursor: pointer; color: var(--tm); font-weight: 600; }
.odds-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 11.5px; }
.odds-table th, .odds-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bd); }
.odds-table th { color: var(--tl); font-weight: 600; }
.odds-table td:last-child, .odds-table th:last-child { text-align: right; font-family: var(--mono); }

/* ---------------------------------------------------------- 10. responsivo */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* No celular a roda vem ANTES do formulário: ela é o motivo de a pessoa
     ter parado na página, e precisa aparecer sem rolagem. */
  .hero-visual { order: -1; }
  .hero-copy { max-width: none; }
  .prize-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
  .sim { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --wheel: min(84vw, 380px); }
  .nav-links { display: none; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .form-grid2 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .prize-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* Nada aqui é informação — é tudo enfeite em loop. Some sem custo funcional. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow-frame::before, .glow-frame::after,
  .ticker-track, .wheel-box.is-armed .wheel-hub { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .modal-card { animation: none; }
}