/* Corujão Alfa Class — versão 2.
   Construção inspirada no huly.io: feixe de luz único, grade bento com cartões
   que têm luz própria, janelas de plataforma, halos de pontos e mini telas.
   Identidade Alfa: preto dominante, azul só nos detalhes, metal escuro escovado,
   luz fria em pontos contados (nada de neon espalhado, laranja ou dourado).
   Com movimento reduzido ou sem JavaScript, tudo aparece parado. */

@property --r { syntax: "<number>"; inherits: false; initial-value: 160; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --fundo: #050608;
  --painel: #101317;
  --painel-2: #15191e;
  --campo: #0a0c0f;
  --linha: #29313a;
  --linha-2: #1d242c;
  --texto: #f1f3f5;
  --apoio: #b9c0c8;
  --discreto: #7d8792;
  --azul: #35b6ff;
  --azul-claro: #9fdcff;
  --azul-escuro: #1d8fd6;
  --erro: #ff8a8a;

  --fonte-titulo: "Sora", system-ui, sans-serif;
  --fonte-texto: "Manrope", system-ui, sans-serif;

  --raio: 18px;
  --raio-card: 24px;
  --margem: clamp(16px, 4vw, 48px);
  --largura: 1280px;

  --metal-borda: linear-gradient(180deg, #4a5560 0%, #1b2026 50%, #2e3640 100%);
  --card-fundo: linear-gradient(180deg, #0f1317, #0a0c0f);
  --pontos: radial-gradient(circle, rgba(140, 205, 255, 0.95) 0.9px, transparent 1.5px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.04; letter-spacing: -0.025em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ── atmosfera ──────────────────────────────────────── */

.ceu {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 60% at 12% -12%, rgba(24, 38, 58, 0.5), transparent 62%),
    var(--fundo);
}
.ceu__horizonte {
  position: absolute;
  inset: auto 0 0 0;
  height: 55vh;
  background: linear-gradient(to top, rgba(40, 110, 170, 0.16), rgba(40, 110, 170, 0.05) 45%, transparent);
  opacity: 0;
}

.grao {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 70;
  padding: 10px 16px;
  background: var(--azul);
  color: var(--fundo);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* ── topo: barra flutuante de vidro ─────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px var(--margem) 0;
}
.topo__barra {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.topo.rolou .topo__barra {
  background: rgba(10, 12, 15, 0.72);
  border-color: rgba(52, 62, 73, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.topo__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.topo__marca img { width: 32px; height: auto; }
.topo__data {
  display: none;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apoio);
}
.topo__data strong { color: var(--texto); }
.topo__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(53, 182, 255, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(53, 182, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 182, 255, 0); }
}
.topo__cta {
  display: none;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1f9ff, #c7e9ff);
  color: #04131d;
  font-family: var(--fonte-titulo);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.topo__cta:hover { transform: translateY(-1px); }

/* ── rótulos, títulos e botões ──────────────────────── */

.selo,
.rotulo {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azul);
}
.selo {
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: rgba(16, 19, 23, 0.8);
}

.linha { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linha > span { display: block; will-change: transform; }

.titulo-secao { font-size: clamp(36px, 6.4vw, 64px); font-weight: 800; }
.titulo-secao .linha:last-child > span { color: var(--discreto); }

.secao__cabeca { display: grid; gap: 16px; max-width: 40em; }
.secao__intro { color: var(--apoio); max-width: 32em; }

.botao {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 14px 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #5cc6ff 0%, var(--azul) 55%, #2aa3ea 100%);
  color: #03121c;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -12px rgba(53, 182, 255, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.botao:hover::after { transform: translateX(120%); }
.botao:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 40px -14px rgba(53, 182, 255, 0.6); }
.botao:active { transform: translateY(1px) scale(0.995); }
.botao[disabled] { cursor: progress; filter: saturate(0.7) brightness(0.9); }
.botao--ok { background: linear-gradient(180deg, #e9f6ff, #bfe6ff); }
.botao--largo { width: auto; min-width: 290px; }

/* ── hero ───────────────────────────────────────────── */

main { overflow-x: clip; }

.hero {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "palco" "texto" "form";
}

.hero__palco {
  position: relative;
  grid-area: palco;
  margin: 4px calc(var(--margem) * -1) 12px;
  perspective: 1200px;
}

.coruja {
  position: relative;
  z-index: 1;
  margin: 0;
  transform-style: preserve-3d;
}
.coruja__img { width: 100%; }
/* Abertura: a máscara começa nos olhos e se abre até as pontas das asas. */
.anima .coruja__img {
  --r: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 41%, #000 calc(var(--r) * 1%), transparent calc(var(--r) * 1% + 12%));
  mask-image: radial-gradient(circle at 50% 41%, #000 calc(var(--r) * 1%), transparent calc(var(--r) * 1% + 12%));
}
.coruja__luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(150, 205, 255, 0.55) 50%, transparent 62%);
  -webkit-mask: url("/assets/img/coruja-asas.webp") center / 100% 100% no-repeat;
  mask: url("/assets/img/coruja-asas.webp") center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  transform: translateX(-130%);
}


/* Feixe de luz que desce do topo e bate na coruja. */
.feixe {
  position: absolute;
  left: 50%;
  top: -160px;
  height: calc(160px + 25%);
  width: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.feixe__nucleo {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(210, 238, 255, 0) 0%, rgba(210, 238, 255, 0.75) 45%, #ffffff 100%);
  box-shadow: 0 0 8px 1px rgba(110, 200, 255, 0.75), 0 0 30px 6px rgba(53, 182, 255, 0.22);
  transform-origin: top;
}
.feixe__cone {
  position: absolute;
  left: -110px;
  width: 220px;
  top: 35%;
  bottom: -30px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(53, 182, 255, 0.22), transparent 75%);
}
.feixe__impacto {
  position: absolute;
  left: -170px;
  width: 340px;
  bottom: -70px;
  height: 140px;
  background: radial-gradient(ellipse at center, rgba(200, 235, 255, 0.45) 0%, rgba(53, 182, 255, 0.14) 35%, transparent 70%);
}
.feixe--fim { top: 0; height: 96px; }

.hero__texto { grid-area: texto; display: grid; gap: 22px; align-content: start; position: relative; z-index: 2; }
.hero__texto .selo { justify-self: start; }

.titulo { font-size: clamp(42px, 10.6vw, 78px); font-weight: 800; }
.titulo .linha > span {
  background: linear-gradient(180deg, #ffffff 0%, #d9dfe5 55%, #8f9aa5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.titulo .linha--azul > span { background: none; color: var(--azul); }

.hero__sub { color: var(--apoio); font-size: clamp(17px, 2.1vw, 19px); max-width: 33em; }

/* Três fichas com ícone: data, ao vivo, gratuito. */
.hero__info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hero__info li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(14, 17, 21, 0.75);
  border: 1px solid var(--linha-2);
}
.hero__icone {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #13283a, #0c1824);
  border: 1px solid #1f3a52;
}
.hero__icone svg { width: 17px; height: 17px; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__info strong { font-family: var(--fonte-titulo); font-size: 15px; line-height: 1.2; }
.hero__info span:not(.hero__icone) { font-size: 12.5px; color: var(--discreto); line-height: 1.3; }

.hero__rolar { display: none; }

/* ── credencial de acesso (o formulário) ────────────── */

.cadastro {
  grid-area: form;
  position: relative;
  z-index: 3;
  margin-top: 26px;
  display: grid;
  gap: 15px;
  padding: 22px 24px 24px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(53, 182, 255, 0.09), transparent 55%) padding-box,
    linear-gradient(180deg, #12161b, #0d1014) padding-box,
    var(--metal-borda) border-box;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
  scroll-margin-top: 90px;
}
/* Luz que percorre a borda enquanto a pessoa preenche. */
.cadastro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang), transparent 0deg 250deg, rgba(53, 182, 255, 0.95) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: girar 3.6s linear infinite paused;
  pointer-events: none;
}
.cadastro:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes girar { to { --ang: 360deg; } }

.credencial__topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.credencial__marca {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #1b3348, #0b141d);
  border: 1px solid #23415a;
}
.credencial__marca img { width: 26px; }
.credencial__titulos { display: grid; gap: 2px; min-width: 0; }
.credencial__tipo { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--azul); }
.credencial__evento { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.credencial__data { display: grid; justify-items: end; line-height: 1.1; }
.credencial__data strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.credencial__data span { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--discreto); }

/* Picote: linha tracejada com dois recortes nas laterais. */
.credencial__corte {
  position: relative;
  height: 1px;
  margin: 4px -24px;
  background-image: linear-gradient(90deg, #303842 55%, transparent 55%);
  background-size: 10px 1px;
}
.credencial__corte::before,
.credencial__corte::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fundo);
  border: 1px solid #2e3640;
}
.credencial__corte::before { left: -13px; clip-path: inset(0 0 0 50%); }
.credencial__corte::after { right: -13px; clip-path: inset(0 50% 0 0); }

.campo { display: grid; gap: 6px; }
.campo label { font-size: 13.5px; font-weight: 600; color: var(--apoio); transition: color 0.2s ease; }
.campo:focus-within label { color: var(--texto); }
.campo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--campo);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input::placeholder { color: #545e69; }
.campo input:focus { outline: none; border-color: var(--azul); background: #0c1015; box-shadow: 0 0 0 4px rgba(53, 182, 255, 0.12); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { font-size: 13.5px; color: var(--erro); }
.campo--isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cadastro__status:empty { display: none; }
.cadastro__status { font-size: 14.5px; color: var(--erro); }
.cadastro__status[data-tipo="info"] { color: var(--apoio); }
.cadastro__regra { font-size: 13.5px; color: var(--discreto); }
.cadastro__regra strong { color: var(--apoio); font-weight: 600; }

/* ── faixa corrida ──────────────────────────────────── */

.faixa {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--linha-2);
  border-bottom: 1px solid var(--linha-2);
  background: rgba(9, 11, 14, 0.7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa__trilho {
  display: flex;
  align-items: center;
  width: max-content;
  animation: faixa 42s linear infinite;
}
.faixa span {
  margin-right: 30px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #cfd6dd;
}
.faixa i { flex: none; margin-right: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ── seções ─────────────────────────────────────────── */

.numeros,
.passos,
.fechamento {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 96px var(--margem);
}
.numeros { display: grid; gap: 40px; }
.passos { display: grid; gap: 40px; }

/* ── grade bento dos resultados ─────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  perspective: 1600px;
}
.bento__card {
  --mx: 20%;
  --my: 0%;
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: var(--raio-card);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(53, 182, 255, 0.09), transparent 55%) padding-box,
    var(--card-fundo) padding-box,
    var(--metal-borda) border-box;
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 100%;
}
.bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(53, 182, 255, 0.1), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.bento__card:hover::after { opacity: 1; }
.bento__card--operacoes,
.bento__card--acerto { grid-column: span 1; }

.bento__texto { display: grid; gap: 8px; position: relative; z-index: 1; }
.bento__rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--discreto); }
.bento__valor--menor { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.02em; }
.bento__nota { font-size: 13px; color: var(--discreto); }

.contador {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #d9dfe5 60%, #9aa5b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bento__card--lucro .contador { font-size: clamp(32px, 9vw, 76px); }

/* Janela de plataforma: print com barra de título, saindo pela borda do cartão. */
.bento__card--lucro,
.bento__card--hall { padding-bottom: 0; }
.janela {
  position: relative;
  margin: 18px -2px 0;
  border: 1px solid #2f3842;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #0b0e12;
  isolation: isolate;
  transform-origin: 50% 100%;
  box-shadow: 0 -24px 60px -36px rgba(53, 182, 255, 0.35), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.janela__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha-2);
  font-size: 11.5px;
  color: var(--discreto);
  white-space: nowrap;
  overflow: hidden;
}
.janela__barra i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2a323b; }
.janela__barra span { margin-left: 8px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; }
.janela img { width: 100%; }
.janela--hall img { max-height: 360px; object-fit: cover; object-position: top; }
.janela__halo {
  position: absolute;
  inset: -22px -22px 0;
  z-index: -1;
  background-image: var(--pontos);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 18% 10%, #000, transparent), radial-gradient(ellipse 55% 50% at 85% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 55% 60% at 18% 10%, #000, transparent), radial-gradient(ellipse 55% 50% at 85% 40%, #000, transparent);
  opacity: 0.55;
}

/* "1º" gigante ao fundo do Hall da Fama. */
.bento__dagua {
  position: absolute;
  top: -40px;
  right: -12px;
  z-index: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 240px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(159, 220, 255, 0.16);
  pointer-events: none;
}

/* 50 marcas, uma por operação do Corujão: ganhas em azul, perdidas em vermelho apagado. */
.matriz {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 2px;
}
.matriz i { aspect-ratio: 1; border-radius: 4px; }
.matriz .ganha { background: linear-gradient(180deg, var(--azul-claro), var(--azul)); }
.matriz .perdida { background: #4a2a30; box-shadow: inset 0 0 0 1px rgba(224, 106, 112, 0.35); }
.anima .matriz i:not(.acesa) { background: #1a2129; box-shadow: none; }

.legenda { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.legenda li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--apoio); }
.legenda strong { margin-left: auto; font-family: var(--fonte-titulo); font-size: 15px; color: var(--texto); }
.legenda__ponto { width: 8px; height: 8px; border-radius: 50%; }
.legenda__ponto--ganha { background: var(--azul); }
.legenda__ponto--perdida { background: #e06a70; }

/* Anel de assertividade: 64% (32 de 50). */
.bento__card--acerto { align-content: center; justify-items: start; gap: 16px; }
.anel { position: relative; width: 124px; height: 124px; display: grid; place-items: center; }
.anel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anel__fundo { fill: none; stroke: #1a2129; stroke-width: 9; }
.anel__valor { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 36; }
.anima .anel__valor { stroke-dashoffset: 100; }
.anel .contador { font-size: 25px; }

/* Linha do tempo de outubro, sobre um céu que vai da noite ao amanhecer. */
.noite__ceu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(53, 182, 255, 0.08), transparent 40%),
    linear-gradient(90deg, rgba(5, 7, 11, 0) 0%, rgba(14, 28, 44, 0.5) 60%, rgba(40, 92, 140, 0.32) 100%);
}
.noite__ceu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 220, 255, 0.5) 70%, rgba(159, 220, 255, 0.9));
}
.bento__card--noite h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.madrugada__corpo { position: relative; }
.madrugada__linha { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; position: relative; z-index: 1; }
.madrugada__linha li { position: relative; padding-left: 28px; }
.madrugada__linha li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--azul);
  background: #0b0e11;
}
.madrugada__hora { font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul); }
.madrugada__linha p { color: var(--apoio); font-size: 15.5px; margin-top: 2px; }
.madrugada__trilho { position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--linha); }
.madrugada__progresso { position: absolute; inset: 0; background: var(--azul); transform-origin: top; }

.aviso { font-size: 13px; color: var(--discreto); max-width: 52em; }

/* ── passos com mini telas ──────────────────────────── */

.passos__grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; perspective: 1600px; }
.passo {
  position: relative;
  display: grid;
  border: 1px solid transparent;
  border-radius: var(--raio-card);
  background: var(--card-fundo) padding-box, var(--metal-borda) border-box;
  overflow: hidden;
  isolation: isolate;
}
.passo__cena {
  position: relative;
  min-height: 200px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--linha-2);
  background: radial-gradient(80% 90% at 50% 0%, rgba(53, 182, 255, 0.13), transparent 62%);
  overflow: hidden;
}
.passo__cena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pontos);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent);
  opacity: 0.14;
}
.passo__texto { display: grid; gap: 8px; padding: 22px 24px 26px; }
.passo__numero { font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--azul); }
.passo h3 { font-size: 20px; font-weight: 700; }
.passo p { color: var(--apoio); font-size: 15.5px; }

/* Cena 1: mini formulário. */
.mock-campo {
  width: 100%;
  max-width: 270px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0a0c0f;
  border: 1px solid #2a323b;
  font-size: 11.5px;
  color: var(--discreto);
}
.mock-campo:first-child { border-color: rgba(53, 182, 255, 0.8); box-shadow: 0 0 0 3px rgba(53, 182, 255, 0.1); }
.mock-digitado { font-weight: 600; font-size: 13px; color: var(--texto); white-space: nowrap; overflow: hidden; }
.mock-digitado--2 { color: var(--apoio); }
.mock-cursor { width: 1.5px; height: 15px; background: var(--azul); animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.mock-botao {
  width: 100%;
  max-width: 270px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  font-weight: 700;
  color: #04131d;
  background: linear-gradient(180deg, #5cc6ff, var(--azul));
}

/* Cena 2: canal do Telegram. */
.mock-chat {
  width: 100%;
  max-width: 280px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0e12;
  border: 1px solid #2a323b;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.95);
}
.mock-chat__topo { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linha-2); }
.mock-chat__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #10202e; border: 1px solid #23415a; }
.mock-chat__avatar img { width: 17px; }
.mock-chat__topo strong { display: block; font-size: 13px; line-height: 1.2; }
.mock-chat__topo span { font-size: 11px; color: var(--discreto); }
.mock-bolha { display: grid; gap: 5px; width: 80%; padding: 9px 10px; border-radius: 4px 12px 12px 12px; background: #151b22; }
.mock-bolha i { height: 6px; border-radius: 3px; background: #2a3440; }
.mock-bolha i:nth-child(2) { width: 68%; }
.mock-bolha--curta { width: 52%; }
.mock-entrou {
  justify-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--azul);
  background: rgba(53, 182, 255, 0.1);
  border: 1px solid rgba(53, 182, 255, 0.3);
}

/* Cena 3: aviso do convite. */
.passo__cena--convite { grid-template-areas: "pilha"; }
.mock-aviso {
  grid-area: pilha;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 290px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(20, 25, 31, 0.95);
  border: 1px solid #2f3842;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(53, 182, 255, 0.06);
}
.mock-aviso--fundo { z-index: 0; height: 60px; transform: translateY(18px) scale(0.92); opacity: 0.45; }
.mock-aviso__icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, #13283a, #0c1824); border: 1px solid #1f3a52; }
.mock-aviso__icone svg { width: 17px; height: 17px; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
.mock-aviso__texto strong { display: block; font-size: 13px; line-height: 1.25; }
.mock-aviso__texto span { font-size: 11.5px; color: var(--discreto); }
.mock-aviso__acao { padding: 7px 12px; border-radius: 999px; font-family: var(--fonte-titulo); font-size: 12px; font-weight: 700; color: #04131d; background: var(--azul); }

/* ── fechamento ─────────────────────────────────────── */

.fechamento {
  isolation: isolate;
  overflow-x: clip;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-top: 130px;
  padding-bottom: 150px;
}
.fechamento__olhos {
  position: absolute;
  left: 50%;
  top: 30px;
  z-index: -1;
  width: min(980px, 150vw);
  height: 340px;
  transform: translateX(-50%);
  background: url("/assets/img/coruja-07-11.webp") center 21% / 100% auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 36% 42% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 36% 42% at 50% 50%, #000 25%, transparent 100%);
  opacity: 0.2;
  pointer-events: none;
}
.fechamento__frase { font-size: clamp(40px, 9vw, 96px); font-weight: 800; max-width: 12em; }
.fechamento__frase .palavra { display: inline-block; }
.fechamento p { color: var(--apoio); }
.fechamento .botao { margin-top: 10px; }

/* ── rodapé ─────────────────────────────────────────── */

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 28px var(--margem) 40px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--apoio);
}
.rodape__risco { color: var(--discreto); font-size: 12.5px; max-width: 60em; }

/* ── barra fixa no celular ──────────────────────────── */

.barra-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(5, 6, 8, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.barra-cta.visivel { transform: translateY(0); }

/* ── estados iniciais da animação (só com html.anima) ─ */

.anima [data-entra],
.anima .cadastro,
.anima .obrigado__cartao,
.anima [data-revela],
.anima [data-bento],
.anima [data-passo],
.anima .janela__halo,
.anima .feixe__cone,
.anima .feixe__impacto { opacity: 0; }
.anima .linha > span { transform: translateY(110%); }
.anima .feixe__nucleo { transform: scaleY(0); }

/* ── obrigado ───────────────────────────────────────── */

.obrigado { max-width: 720px; margin: 0 auto; padding: 0 var(--margem) 80px; display: grid; gap: 8px; }
.obrigado .hero__palco { grid-area: auto; margin: 0 auto; width: min(100%, 620px); }
.obrigado__cartao {
  position: relative;
  z-index: 2;
  margin-top: -6px;
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: 30px 26px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(53, 182, 255, 0.09), transparent 55%) padding-box,
    linear-gradient(180deg, #12161b, #0e1115) padding-box,
    var(--metal-borda) border-box;
}
.obrigado h1 { font-size: clamp(32px, 7vw, 50px); font-weight: 800; }
.obrigado__texto { color: var(--apoio); }
.obrigado__texto strong { color: var(--texto); }
.obrigado .botao--largo { width: 100%; }
.obrigado__pendente { font-size: 14px; color: var(--erro); }
.obrigado__lista { margin: 4px 0 0; padding-left: 22px; color: var(--apoio); font-size: 15.5px; display: grid; gap: 6px; }

/* ── telas pequenas ─────────────────────────────────── */

@media (max-width: 479px) {
  .hero__info li { grid-template-columns: 1fr; padding: 10px; }
  .hero__icone { display: none; }
  .credencial__tipo { font-size: 10px; letter-spacing: 0.14em; }
  .credencial__evento { font-size: 16px; }
  .credencial__data strong { font-size: 19px; }
  .bento__card--operacoes,
  .bento__card--acerto { grid-column: 1 / -1; }
}

/* ── telas maiores ──────────────────────────────────── */

@media (min-width: 640px) {
  .topo__data { display: flex; }
  .topo__cta { display: inline-flex; }
  .obrigado .botao--largo { width: auto; }
}

@media (min-width: 960px) {
  body { font-size: 18px; }

  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "texto palco" "texto form" "rolar rolar";
    grid-template-rows: auto 1fr auto;
    column-gap: 64px;
    padding-bottom: 40px;
    min-height: calc(100svh - 80px);
  }
  .hero__texto { align-self: center; padding-bottom: 40px; }
  /* A coluna guarda o eixo da coruja; as asas abertas passam da largura dela. */
  /* --asas respeita a largura da tela e a altura: o botão do cadastro fica na primeira tela. */
  .hero__palco { --asas: max(420px, min(900px, max(46vw, calc(100vw - 704px)), calc((100svh - 560px) * 2.37))); margin: -20px auto 0; width: min(100%, 420px); }
  .hero__palco .coruja { width: var(--asas); margin-left: calc((100% - var(--asas)) / 2); }
  .cadastro { margin-top: -16px; align-self: start; padding: 20px 26px 22px; gap: 12px; }
  .campo input { min-height: 50px; }
  .credencial__corte { margin-left: -26px; margin-right: -26px; }

  .hero__rolar {
    grid-area: rolar;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--discreto);
  }
  .hero__rolar span { width: 46px; height: 1px; background: var(--linha); position: relative; overflow: hidden; }
  .hero__rolar span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--azul);
    transform: translateX(-100%);
    animation: rolar 2.4s cubic-bezier(0.6, 0, 0.2, 1) infinite;
  }
  @keyframes rolar { 60%, 100% { transform: translateX(100%); } }

  .numeros,
  .passos { padding-top: 128px; gap: 52px; }

  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
  .bento__card { padding: 30px; }
  .bento__card--lucro { grid-column: 1 / span 7; grid-row: 1; padding-bottom: 0; }
  .bento__card--hall { grid-column: 8 / span 5; grid-row: 1 / span 2; padding-bottom: 0; }
  .bento__card--operacoes { grid-column: 1 / span 4; grid-row: 2; }
  .bento__card--acerto { grid-column: 5 / span 3; grid-row: 2; }
  .bento__card--noite { grid-column: 1 / -1; }

  /* As janelas entram inclinadas e se endireitam no hover. */
  .janela--lucro { margin: 24px -40px 0 14%; transform: perspective(1400px) rotateX(8deg) rotateY(-9deg); }
  .janela--hall { margin: 24px 24px 0 -2px; transform: perspective(1400px) rotateX(8deg) rotateY(7deg); }
  .bento__card:hover .janela { transform: perspective(1400px) rotateX(0deg) rotateY(0deg); }
  .janela--hall img { max-height: 470px; }


  .madrugada__linha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .madrugada__linha li { padding-left: 0; padding-top: 30px; }
  .madrugada__linha li::before { top: 0; }
  .madrugada__trilho { left: 5px; right: 5px; top: 5px; bottom: auto; width: auto; height: 1px; }
  .madrugada__progresso { transform-origin: left; }

  .passos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .passo__cena { min-height: 230px; }

  .barra-cta { display: none; }
}

@media (max-width: 959px) {
  body:not(.pagina-obrigado) { padding-bottom: 84px; }

  /* A coruja é menor no celular: o impacto do feixe encolhe junto para não lavar a cabeça. */
  .hero__palco .feixe__impacto { left: -80px; width: 160px; bottom: -32px; height: 64px; opacity: 0.7; }
  .hero__palco .feixe__cone { left: -60px; width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa__trilho,
  .topo__ponto,
  .mock-cursor,
  .hero__rolar span::after,
  .cadastro::before { animation: none; }
  .botao::after,
  .janela,
  .barra-cta { transition: none; }
}