/* Tokens iguais aos do painel (src/index.css), para a página pública ter a mesma cara. */
:root {
  --ink: #1d1d1f; --ink-2: #515154; --ink-3: #86868b; --ink-4: #c7c7cc;
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.14);
  --canvas: #f5f5f7; --surface: #fff; --surface-2: #fafafa;
  --accent: #0a84ff; --accent-dark: #0066cc; --accent-soft: #eaf3ff;
  --success: #1f9d48; --success-soft: #e9f9ee;
  --code-bg: #1d1d1f; --code-ink: #f5f5f7;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #8e8e93; --ink-4: #48484a;
    --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
    --canvas: #000; --surface: #1c1c1e; --surface-2: #232325;
    --accent-soft: rgba(10,132,255,.16); --success: #34c759; --success-soft: rgba(52,199,89,.14);
    --code-bg: #111113; --shadow-card: none;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--canvas); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.marca:hover { text-decoration: none; }
.marca svg { flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primario { background: var(--accent); color: #fff; }
.btn-primario:hover { background: var(--accent-dark); }
.btn-secundario { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secundario:hover { background: var(--surface-2); }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn-sm svg { width: 16px; height: 16px; }

.selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 500;
}
.selo svg { width: 14px; height: 14px; }