/* Identidade visual Data10 — a mesma do site data10.app.br.
   Azul-marinho #0b1f3a + verde-esmeralda (#10b981 / #34d399), títulos em
   Plus Jakarta Sans e texto em Inter. Carregado DEPOIS do estilo de cada
   página: redefine as variáveis que elas já usam e os componentes comuns.
   Tema claro é o padrão; o escuro vem do botão no topo (tema.js). */

:root {
  --navy: #0b1f3a; --navy-2: #12305a;
  --esmeralda: #10b981; --esmeralda-claro: #34d399; --esmeralda-escuro: #059669;

  --bg: #f7f9fc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1;
  --text: #0f172a; --text-2: #334155; --text-muted: #475569; --muted: #475569; --text-faint: #8392a7;
  --brand: #047857; --brand-dark: #065f46; --brand-light: #ecfdf5;
  --btn: #10b981; --btn-hover: #059669; --btn-text: #0b1f3a;
  --verde: #15803d; --verde-bg: #dcfce7; --ok: #15803d; --ok-bg: #dcfce7;
  --amarelo: #a16207; --amarelo-bg: #fef9c3;
  --vermelho: #b91c1c; --vermelho-bg: #fee2e2; --danger: #b91c1c; --danger-bg: #fee2e2;
  --exemplo-texto: #14532d;
  --radius: 10px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(11,31,58,.05), 0 6px 24px rgba(11,31,58,.07);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b1f3a; --surface: #102848; --surface-2: #163358; --border: #22406a; --border-strong: #2f5282;
  --text: #e8eef6; --text-2: #cbd5e1; --text-muted: #a9b8cc; --muted: #a9b8cc; --text-faint: #7f91aa;
  --brand: #34d399; --brand-dark: #6ee7b7; --brand-light: #0f3b44;
  --btn: #10b981; --btn-hover: #34d399; --btn-text: #0b1f3a;
  --verde: #4ade80; --verde-bg: #123d2b; --ok: #4ade80; --ok-bg: #123d2b;
  --amarelo: #facc15; --amarelo-bg: #3b3313;
  --vermelho: #fca5a5; --vermelho-bg: #4a1d24; --danger: #fca5a5; --danger-bg: #4a1d24;
  --exemplo-texto: #bbf7d0;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--text); font-family: var(--font); }
h1, h2, h3, .brand-name, .hero h1, section h2, .final h2 { font-family: var(--font-heading); letter-spacing: -.01em; }
a { color: var(--brand); }
input, select, textarea { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--esmeralda); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
::placeholder { color: var(--text-faint); }

/* ── Logotipo: quadrado azul-marinho com "10" em verde + "Data10" ── */
.brand-mark { width: 40px; height: 40px; border-radius: 9px; background: var(--navy); color: var(--esmeralda-claro);
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.brand-name .dez { color: var(--esmeralda); }
.brand-name small { font-family: var(--font); letter-spacing: 0; }

/* ── Topo azul-marinho, como o cabeçalho do site (nos dois temas) ── */
.topbar { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(11,31,58,.18); }
:root[data-theme="dark"] .topbar { background: #081830; box-shadow: inset 0 0 0 1px var(--border); }
.topbar .brand-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.topbar .brand-name { color: #fff; }
.topbar .brand-name .dez { color: var(--esmeralda-claro); }
.topbar .brand-name small { color: rgba(255,255,255,.7); }
.topbar .toplinks, .topbar .nav { color: rgba(255,255,255,.82); }
.topbar .toplinks a, .topbar .nav a, .topbar .nav span, .topbar .toplinks span { color: rgba(255,255,255,.85); }
.topbar .toplinks a:hover, .topbar .nav a:hover, .topbar .nav span:hover, .topbar .toplinks span:hover { color: #fff; }
.topbar .org-chip, .topbar .org-sel { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.topbar select.org-sel option { color: #0f172a; }
.topbar .btn.sec, .topbar .btn:not(.tema-btn) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.topbar .btn.sec:hover, .topbar .btn:not(.tema-btn):hover { background: rgba(255,255,255,.1); }

/* ── Botões: verde-esmeralda com texto azul-marinho, como no site ── */
.btn { background: var(--btn); color: var(--btn-text); border-color: var(--btn); border-radius: 8px; font-family: var(--font); font-weight: 600; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }
.btn.sec { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn.sec:hover { background: var(--surface-2); color: var(--text); }
.op.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }

/* Rótulo em caixa alta verde, como "CONSULTORIA EM CAPTAÇÃO DE RECURSOS" no site */
.eyebrow { background: none; padding: 0; border-radius: 0; color: var(--brand); letter-spacing: .12em; }

/* ── Botão de tema ── */
.tema-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: inherit; cursor: pointer;
  border: 1px solid currentColor; border-radius: 999px; padding: 5px 11px; font: 600 12.5px var(--font); opacity: .9; white-space: nowrap; }
.tema-btn:hover { opacity: 1; }
.topbar .tema-btn { color: #fff; border-color: rgba(255,255,255,.35); }
.tema-btn.flutuante { position: fixed; top: 14px; right: 14px; z-index: 60; background: var(--surface); color: var(--text);
  border-color: var(--border-strong); box-shadow: var(--shadow); }

/* Início (hub): o topo fica dentro da coluna, com respiro em cima */
.wrap > .topbar { margin: 18px 0 8px; }

/* Celular: o topo quebra em duas linhas e o botão de tema fica só com o ícone */
.topbar .brand-mark { flex-shrink: 0; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .topbar .toplinks, .topbar .nav { flex-wrap: wrap; gap: 8px 14px; width: 100%; }
  .topbar .brand-name small { display: none; }
}
@media (max-width: 560px) { .tema-btn .txt { display: none; } .tema-btn { padding: 5px 9px; } }