/* Site público da Oferta Gloriosa: base (fontes, cores da marca, tipografia, botões, topo).
   As cores são as mesmas do painel (tema escuro). Não inventar cor nova aqui. */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fundo: #0c0c0e;
  --superficie: #161618;
  --superficie-2: #1f1f22;
  --borda: #27272a;
  --borda-forte: #3f3f46;
  --texto: #fafafa;
  --texto-2: #c4c4c8;
  --texto-3: #8b8b93;
  --marca: #a1fa06;
  --marca-hover: #b8ff3d;
  --texto-na-marca: #1c1c1c;
  --destaque-suave: #1e2a0b;
  --negativo: #f87171;
  --negativo-suave: #2c1515;

  --marca-brilho: rgba(161, 250, 6, 0.35);
  --marca-nevoa: rgba(161, 250, 6, 0.08);

  /* Azul do Telegram: só no botão do Telegram (pedido do Fabricio, 11/11/2026). */
  --telegram: #229ed9;
  --telegram-hover: #2aabee;
  --telegram-brilho: rgba(34, 158, 217, 0.4);

  --fonte-titulo: 'Outfit', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-codigo: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

  --texto-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --titulo-1: clamp(2.7rem, 1.2rem + 7.4vw, 6.4rem);
  --titulo-2: clamp(2rem, 1.2rem + 3.6vw, 3.9rem);
  --titulo-3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);

  --margem: clamp(1.25rem, 0.5rem + 3.6vw, 3.5rem);
  --secao: clamp(4.5rem, 3rem + 7vw, 9rem);
  --largura: 1180px;
  --canto: 18px 5px 18px 5px; /* canto cortado: motivo visual da marca */
  --canto-p: 12px 4px 12px 4px;

  --rapido: 160ms;
  --medio: 420ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 var(--texto-base)/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }

h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--titulo-1); font-weight: 800; line-height: 0.96; }
h2 { font-size: var(--titulo-2); font-weight: 800; line-height: 1.02; }
h3 { font-size: var(--titulo-3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: var(--marca); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--marca); color: var(--texto-na-marca); font-weight: 700; border-radius: 6px;
}
.pular:focus { top: 1rem; }

/* Rótulo pequeno em letra de código (numeração das seções, detalhes de "painel") */
.olho, .selo-topo, .abertura__canto, .cartao__etiqueta, .passos__num, .leitor__topo {
  font: 600 0.75rem/1.2 var(--fonte-codigo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.olho { color: var(--marca); }

.pisca {
  display: inline-block; width: 8px; height: 8px; margin-right: 0.6em; border-radius: 50%;
  background: var(--marca); box-shadow: 0 0 12px var(--marca);
  animation: piscar 1.8s ease-in-out infinite;
}
@keyframes piscar { 50% { opacity: 0.25; } }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.75em 1.4em;
  border: 1px solid transparent; border-radius: var(--canto-p);
  background: var(--marca); color: var(--texto-na-marca);
  font: 700 1rem/1 var(--fonte-titulo); letter-spacing: 0.01em; text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) ease, box-shadow var(--rapido) ease, background var(--rapido) ease, border-color var(--rapido) ease;
}
.botao svg { width: 1.3em; height: 1.3em; flex: none; }
.botao:hover { background: var(--marca-hover); transform: translateY(-2px); box-shadow: 0 10px 34px var(--marca-brilho); }
.botao:active { transform: translateY(0); box-shadow: none; }
.botao--grande { min-height: 58px; padding: 0.9em 1.3em; font-size: clamp(0.95rem, 4.3vw, 1.1rem); white-space: nowrap; box-shadow: 0 0 0 1px rgba(161, 250, 6, 0.4), 0 8px 40px rgba(161, 250, 6, 0.18); }
.botao--pequeno { min-height: 40px; padding: 0.5em 1.1em; font-size: 0.9rem; white-space: nowrap; }
.botao--linha { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.botao--linha:hover { background: var(--superficie-2); border-color: var(--marca); box-shadow: none; }
.botao--telegram { background: var(--telegram); border-color: var(--telegram); color: #ffffff; box-shadow: 0 8px 32px rgba(34, 158, 217, 0.22); }
.botao--telegram:hover { background: var(--telegram-hover); border-color: var(--telegram-hover); box-shadow: 0 10px 34px var(--telegram-brilho); }

/* Marca (coroa + nome) */
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.marca__coroa { width: 30px; height: auto; fill: var(--marca); filter: drop-shadow(0 0 10px var(--marca-brilho)); }
.marca__nome { font: 800 clamp(0.86rem, 4vw, 1.05rem)/1 var(--fonte-titulo); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.marca__nome b { color: var(--marca); font-weight: 800; }

/* Topo fixo */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem var(--margem);
  border-bottom: 1px solid transparent;
  transition: background var(--medio) ease, border-color var(--medio) ease;
}
.topo--rolou {
  background: rgba(12, 12, 14, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--borda);
}
.topo__nav { display: none; gap: 2rem; font-size: 0.92rem; font-weight: 500; }
.topo__nav a { color: var(--texto-2); text-decoration: none; transition: color var(--rapido) ease; }
.topo__nav a:hover { color: var(--marca); }
@media (min-width: 860px) { .topo__nav { display: flex; } }

/* Seções */
.secao { padding: var(--secao) var(--margem); position: relative; }
.secao > * { max-width: var(--largura); margin-inline: auto; }
.secao--escura {
  background:
    radial-gradient(60rem 30rem at 85% 0%, var(--marca-nevoa), transparent 70%),
    var(--superficie);
  border-block: 1px solid var(--borda);
}
.secao__cabeca { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.secao__cabeca h2 { max-width: 16ch; }
.secao__lead { max-width: 52ch; color: var(--texto-2); font-size: 1.08em; }

/* Entrada ao rolar (só quando o JavaScript está ligado) */
.js [data-revelar] { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--curva), transform 600ms var(--curva); }
.js [data-revelar].visivel { opacity: 1; transform: none; }

/* Botão flutuante (celular) */
.flutuante {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 160%);
  padding: 0.9em 1.8em; border-radius: var(--canto-p);
  background: var(--marca); color: var(--texto-na-marca);
  font: 700 1rem/1 var(--fonte-titulo); text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(161, 250, 6, 0.5);
  transition: transform var(--medio) var(--curva);
}
.flutuante--visivel { transform: translate(-50%, 0); }
@media (min-width: 860px) { .flutuante { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-revelar] { opacity: 1; transform: none; }
}