/* ==========================================================================
   Pele do painel — alinha o site ao Gateway-de-Pagamentos-VPay-web:
   - Arial/Helvetica em tudo (tailwind.config.js: font-sans e font-display),
     títulos font-semibold com tracking-tight;
   - raios do Tailwind: md 6px (botões/campos), lg 8px (ícones), xl 12px,
     2xl 16px (cartões e painéis);
   - botão chapado `bg-accent text-accent-foreground hover:opacity-90`;
   - cartões `border ink-800/10 bg-white shadow-sm dark:bg-ink-900`;
   - rótulos `text-[11px] font-medium uppercase tracking-wide opacity-55`;
   - hero sempre escuro, como `layout-acesso.tsx`, com o VANTA.NET das telas
     de acesso (js/hero-net.js) e a mesma sombra de texto.
   Carregado depois de spell.css: o que está aqui vence o que vier antes.
   ========================================================================== */

/* ---------- tokens ---------- */
html.dark {
  --surface: #121212;          /* ink-900: superfície dos cartões do painel */
  --bg-2: #0e0e0e;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.15);
}
:root { --border: rgba(31, 31, 31, 0.1); --border-strong: rgba(31, 31, 31, 0.15); }

/* ---------- tipografia ---------- */
body, .btn, .footer-grid h4, h1, h2, h3, .display,
.saldo-card strong, .stat strong, .step .num, .tier strong, .logo-name, .mockup-top {
  font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
.hero h1 { font-weight: 600; letter-spacing: -0.025em; }
.section-head h2 { letter-spacing: -0.02em; }
.grad, .quote-card blockquote { font-style: normal; }
.btn { font-weight: 500; }
.saldo-card strong, .stat strong, .tier strong { font-weight: 600; }
.logo-name { font-weight: 600; }

/* rótulos de seção como os títulos de bloco do painel */
.section-head .tag, .tag {
  color: var(--fg); opacity: 0.55; font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
}
.hero-logos-label { font-weight: 500; opacity: 0.55; color: var(--fg); }

/* ---------- raios ---------- */
.btn, .btn-sm, .field input, .field textarea, .field select, .copy-btn { border-radius: 6px; }
.theme-btn, .tx li, .card .ico, .bento .b .ico, .contact-card .ico, .tx-ico, .fees-list li, .step .num { border-radius: 8px; }
.faq-list details, .contact-card, .logo-chip, .saldo-card, .chip-row span, .support-banner { border-radius: 12px; }
.card, .stat, .step, .tier, .bento .b, .code-window, .fees-panel, form.contact-form, .vs .col, .mockup, .final-cta { border-radius: 16px; }
.step .num { border-radius: 8px; }

/* ---------- botões chapados ---------- */
.btn-primary, html.dark .btn-primary {
  background: var(--accent); color: var(--accent-fg); border-color: transparent;
  box-shadow: none; text-shadow: none; filter: none;
}
.btn-primary:hover { filter: none; opacity: 0.9; transform: none; box-shadow: none; }
.btn-primary:active { opacity: 0.85; }
.btn-ghost { border-color: var(--border-strong); }
.btn-ghost:hover { transform: none; }
.btn-dark:hover { transform: none; opacity: 0.9; box-shadow: none; }
.btn-wpp, .btn-wpp:hover, .btn-wpp:active { border: 0; box-shadow: none; transform: none; }
.btn-wpp:hover { background: #25d366; opacity: 0.9; }
.btn-wpp:active { opacity: 0.85; }
.btn-flow .flow-svg path { stroke: var(--accent); }

/* ---------- cartões ---------- */
.card, .stat, .step, .tier, .bento .b, .contact-card, .faq-list details, .logo-chip, form.contact-form, .fees-panel, .code-window {
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05);
}
.card:hover, .bento .b:hover, .step:hover, .tier:hover, .logo-chip:hover, .contact-card:hover {
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.08); border-color: rgba(255, 193, 7, 0.6);
}
html.dark .card:hover, html.dark .bento .b:hover, html.dark .step:hover, html.dark .tier:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.card .ico, .bento .b .ico, .contact-card .ico.mail { background: rgba(255, 193, 7, 0.1); border: 0; color: var(--accent); }
.no-card .ico { background: rgba(255, 51, 0, 0.1); color: var(--accent-strong); }
.card .ico svg, .bento .b .ico svg { stroke-width: 1.75; }
.bento .b.lead { background: var(--surface); border-color: rgba(255, 193, 7, 0.45); }
.bento .b.lead::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 193, 7, 0.12), rgba(255, 51, 0, 0.04));
}
.badge { font-weight: 600; letter-spacing: 0.04em; }
.stat strong { background: none; -webkit-text-fill-color: currentColor; color: var(--fg); }
.step .num { background: rgba(255, 193, 7, 0.12); color: var(--accent); box-shadow: none; font-size: 1rem; }
html.dark .step .num { color: var(--accent); }

/* ---------- hero: sempre escuro, como as telas de acesso ---------- */
.hero {
  --bg: #0a0a0a; --bg-2: #121212; --surface: #121212; --fg: #f7f6f4;
  --muted: rgba(247, 246, 244, 0.72);
  --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18);
  --accent-strong: #ff4d1a; --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.12);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  background: #0a0a0a; color: var(--fg);
}
.hero .spell-bg { --spell-bg-opacity: 0.8; }
.hero-money {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.hero-inner { z-index: 1; }
.hero .ticker { position: relative; z-index: 1; }
.hero-text { text-shadow: 0 1px 1px #0a0a0a, 0 0 14px #0a0a0a, 0 0 32px #0a0a0a, 0 2px 20px rgba(10, 10, 10, 0.95); }
.hero-text h1 { -webkit-text-stroke: 0.6px #0a0a0a; paint-order: stroke fill; }
/* texto com gradiente não aceita text-shadow (a sombra pintaria por cima do recorte) */
.hero-text .grad { text-shadow: none; -webkit-text-stroke: 0; filter: drop-shadow(0 2px 10px rgba(10, 10, 10, 0.9)); }
/* folga para o descendente do "g": o recorte do gradiente é pela caixa do elemento */
.hero h1 .grad { padding: 0.05em 0.06em 0.22em; margin: -0.05em -0.06em -0.22em; }
.hero .eyebrow, .hero .float-chip { background: rgba(10, 10, 10, 0.8); border-color: rgba(255, 255, 255, 0.15); color: var(--fg); }
/* texto recortado (shimmer) não aceita a sombra do hero: ela pintaria por cima das letras */
.hero-text .shimmer-text { text-shadow: none; color: #f7f6f4; --shimmer-contrast: rgba(255, 213, 79, 0.95); }
.hero .eyebrow { color: #f7f6f4; }
.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.2); color: var(--fg); background: rgba(10, 10, 10, 0.55); }
.hero .btn-ghost:hover { border-color: var(--accent); }
.hero .mockup { background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .hero-logos-label, .hero .logo-name { color: var(--fg); }

/* cabeçalho transparente enquanto estiver sobre o hero (qualquer tema) */
header.over-hero {
  --fg: #f7f6f4; --muted: rgba(247, 246, 244, 0.75); --border: rgba(255, 255, 255, 0.15); --accent-fg: #0a0a0a;
  background: transparent; border-bottom-color: transparent; color: var(--fg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
header.over-hero.scrolled { background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, 0.1); }
header.over-hero .logo-dark-text { display: none; }
header.over-hero .logo-light-text { display: block; }
header.over-hero .theme-btn { color: var(--fg); border-color: rgba(255, 255, 255, 0.18); }
header.over-hero .mobile-menu { background: #0a0a0a; }
@media (max-width: 720px) {
  header.over-hero { background: rgba(10, 10, 10, 0.9); }
}

/* ---------- CTA final: mesmo raio e véu do painel ---------- */
.final-cta { border-color: rgba(255, 255, 255, 0.12); }

/* ---------- marcos de faturamento: as mesmas cores do /faturamento do painel ---------- */
.tier { --t-a: #94a3b8; --t-b: #94a3b8; --t-txt: #334155; text-align: left; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 2px; }
.tier .medal {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; margin-bottom: 12px;
  font-size: 0; color: var(--t-txt);
  background: color-mix(in srgb, var(--t-a) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-a) 55%, transparent);
}
.tier .medal svg { width: 20px; height: 20px; }
.tier .tier-nome { font-size: 1.05rem; font-weight: 600; color: var(--t-txt); }
.tier strong { font-size: 0.95rem; font-weight: 500; color: var(--fg); opacity: 0.75; font-variant-numeric: tabular-nums; }
.tier span { margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tier {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--t-a) 16%, var(--surface)), color-mix(in srgb, var(--t-b) 6%, var(--surface)));
  border-color: color-mix(in srgb, var(--t-a) 35%, transparent);
}
.tier:hover { border-color: color-mix(in srgb, var(--t-a) 70%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--t-a) 22%, transparent); }
.tier-prata    { --t-a: #94a3b8; --t-b: #94a3b8; --t-txt: #334155; }
.tier-ouro     { --t-a: #fbbf24; --t-b: #eab308; --t-txt: #78350f; }
.tier-platina  { --t-a: #22d3ee; --t-b: #7dd3fc; --t-txt: #164e63; }
.tier-black    { --t-a: #1f1f1f; --t-b: #0a0a0a; --t-txt: #0a0a0a; }
.tier-esmeralda{ --t-a: #34d399; --t-b: #2dd4bf; --t-txt: #022c22; }
.tier-diamante { --t-a: #a78bfa; --t-b: #e879f9; --t-txt: #2e1065; }
html.dark .tier-prata    { --t-txt: #e2e8f0; }
html.dark .tier-ouro     { --t-txt: #fde68a; }
html.dark .tier-platina  { --t-txt: #a5f3fc; }
html.dark .tier-black    { --t-a: #f7f6f4; --t-b: #f7f6f4; --t-txt: #f7f6f4; }
html.dark .tier-esmeralda{ --t-txt: #a7f3d0; }
html.dark .tier-diamante { --t-txt: #ddd6fe; }
/* Black no claro: cartão escuro, como no painel */
html:not(.dark) .tier-black { background: linear-gradient(to bottom, #1f1f1f, #0a0a0a); border-color: rgba(10, 10, 10, 0.3); }
html:not(.dark) .tier-black .tier-nome, html:not(.dark) .tier-black strong { color: #fff; opacity: 1; }
html:not(.dark) .tier-black span { color: rgba(255, 255, 255, 0.6); }
html:not(.dark) .tier-black .medal { color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
@media (max-width: 1020px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .tiers { grid-template-columns: repeat(2, 1fr); } }