/* ─────────────────────────────────────────────────────────── Estilos compartilhados — Mineiro Coins (FC 26) Tema neon escuro usado em todas as telas do checkout. ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Fonte dos títulos: Rajdhani (carregada do Google Fonts no de cada página). ───────────────────────────────────────────────────────────────────────────── 🗑️ REMOVIDO EM 30/08/2026 — o @font-face de 'Stretch Pro' (item A3 do PLANEJAMENTO-SEO-ABORDAGEM.md). A pasta assets/fonts/ nunca teve os arquivos: os 4 (.woff2/.woff/.otf/.ttf) respondiam 404 EM PRODUCAO, medido ao vivo. O navegador pedia os 4, em sequencia, e caia em Rajdhani no fim — ou seja, ninguem nunca viu 'Stretch Pro' no site, mas todo visitante pagava a espera. Era a corrente de dependencia mais longa da pagina: 2.474 ms. ⚠️ Se um dia a fonte for comprada: por os arquivos em assets/fonts/, devolver o bloco @font-face e por 'Stretch Pro' na frente do --title-font abaixo. NAO devolver so o nome no --title-font sem os arquivos: o nome sozinho casa com fonte INSTALADA NA MAQUINA de quem visita, e o site fica com aparencia diferente para cada visitante. */ :root { --title-font: 'Rajdhani', sans-serif; --bg: #080B14; --bg2: #0D1220; --card: #111827; --border: #1E2D45; --neon: #00FF80; --neon-dim: #00CC66; --gold: #F5B800; --gold-dim: #C8960A; --white: #F0F4FF; --gray: #6B7A99; --danger: #FF4D6D; --radius: 16px; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--white); font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 10%, rgba(0,255,128,.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(245,184,0,.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } .page { position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 32px 16px 60px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .page.wide { max-width: 920px; } /* ── Header ── */ .header { text-align: center; } .logo { height: 90px; filter: drop-shadow(0 0 18px rgba(0,255,128,.35)); cursor: pointer; } .tagline { margin-top: 8px; font-size: 13px; color: var(--gray); letter-spacing: .5px; } .tagline span { color: var(--neon); font-weight: 600; } /* O titulo de comprar / como-funciona / suporte / privacidade virou

: e' por ele que o Google descobre do que a pagina trata, e antes essas paginas nao tinham nenhum. A APARENCIA continua a mesma: o reset da linha 5 ja zera as margens de tudo, entao a unica coisa que o

traria a mais e' o negrito — desfeito aqui. ⚠️ Mexer nesta linha muda o visual dessas 4 paginas. */ h1.tagline { font-weight: 400; } /* ── Passos do topo (breadcrumb) ── */ .steps { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--gray); } .steps b { color: var(--neon); font-weight: 700; } .steps .sep { color: var(--border); } /* ── Card ── */ .card { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,128,.04); } .card-title { font-family: var(--title-font); font-size: 20px; font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; } /* Em coins.html este titulo e'

(a pagina precisava de um, e ele ja era o titulo principal dela). Nao precisa de ajuste: a classe .card-title ja fixa fonte, tamanho e peso 700, e o reset da linha 5 cuida da margem. */ .card-title .dot { width: 8px; height: 8px; background: var(--neon); border-radius: 50%; box-shadow: 0 0 8px var(--neon); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{box-shadow:0 0 6px var(--neon)} 50%{box-shadow:0 0 14px var(--neon)} } .muted { color: var(--gray); font-size: 13px; line-height: 1.6; } /* ── Presets ── */ .presets-label, .input-label { font-size: 11px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .preset-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--white); font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; padding: 10px 4px; cursor: pointer; transition: all .18s; text-align: center; line-height: 1.2; } .preset-btn small { display: block; font-size: 11px; font-weight: 500; color: var(--gray); font-family: 'Inter', sans-serif; } .preset-btn:hover, .preset-btn.active { border-color: var(--neon); background: rgba(0,255,128,.08); color: var(--neon); box-shadow: 0 0 12px rgba(0,255,128,.15); } .preset-btn.active small { color: var(--neon-dim); } /* ── Inputs ── */ .input-wrap { display: flex; align-items: center; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .2s; } .input-wrap:focus-within { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0,255,128,.1); } .step-btn { background: none; border: none; color: var(--gray); font-size: 20px; width: 48px; height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; flex-shrink: 0; } .step-btn:hover { color: var(--neon); background: rgba(0,255,128,.07); } .coins-input { flex: 1; background: none; border: none; color: var(--white); font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; text-align: center; outline: none; width: 100%; padding: 8px 0; } .coins-input::-webkit-outer-spin-button, .coins-input::-webkit-inner-spin-button { -webkit-appearance: none; } .coins-input[type=number] { -moz-appearance: textfield; } .input-suffix { padding-right: 16px; font-size: 12px; font-weight: 600; color: var(--gray); white-space: nowrap; flex-shrink: 0; } /* Campos de formulario padrao */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 600; color: var(--gray); letter-spacing: .3px; } /* 🐛 `select` ENTROU EM 28/08/2026 — ele estava de fora, e o efeito não era sutil: um