/* TEMA B — Dados e IA: azul-noite, verde-água, detalhes em fonte de código. Combina com analista de dados. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root {
  --font-h: "Space Grotesk", "Segoe UI", sans-serif; --font-b: "Inter", "Segoe UI", system-ui, sans-serif; --font-m: "JetBrains Mono", Consolas, monospace;
  --r: 12px; --w-h: 700; --ls-h: -.02em;
  --bg-1: #0a1020; --fg-1: #e6ecf8; --mut-1: #8c99b3; --bd-1: #1e2a44; --acc-1: #36e0c0; --card-1: #0e1730;
  --bg-2: #0d1528; --fg-2: #e6ecf8; --mut-2: #8c99b3; --bd-2: #1e2a44; --acc-2: #7aa7ff; --card-2: #111c38;
  --bg-3: #06352f; --fg-3: #e6fff9; --mut-3: #8fd9c9; --bd-3: #0f5a4e; --acc-3: #6cf5d6; --card-3: #08453d;
  --bg-nav: rgba(10,16,32,.88); --fg-nav: #e6ecf8; --bd-nav: #1e2a44; --acc-nav: #36e0c0;
  --btn-bg: #36e0c0; --btn-fg: #04231e; --bd-btn: #36e0c0;
}
.rotulo, .hero-rotulos, .tag, .status, .cert .emissor, .cert .meta, .marco .ano, .caso .quem, .numero span { font-family: var(--font-m); }
.rotulo::before { content: "// "; opacity: .6; }
.hero-rotulos span:first-child::before { content: "$ "; color: var(--acc); }
.hero h1 { font-weight: 700; }
.hero-foto { padding-top: 34px; border: 1px solid var(--bd); border-radius: 14px; background: var(--card-1); box-shadow: 0 0 60px rgba(54,224,192,.10); overflow: hidden; }
.hero-foto::before { content: "● ● ●   pedro@musculini ~ whoami"; position: absolute; top: 0; left: 0; right: 0; height: 34px; line-height: 34px; padding: 0 14px; font: 500 11.5px var(--font-m); color: var(--mut); background: #0b132a; border-bottom: 1px solid var(--bd); letter-spacing: .02em; }
.hero-foto img { border-radius: 0; filter: saturate(.85) brightness(.92); }
.cartao { background: var(--card); }
.cartao:hover { box-shadow: 0 0 0 1px var(--acc), 0 12px 40px rgba(54,224,192,.07); }
.icone { background: rgba(54,224,192,.08); border-color: rgba(54,224,192,.25); }
.numero b { font-family: var(--font-m); font-weight: 700; }
.botao.cheio { box-shadow: 0 0 24px rgba(54,224,192,.25); }
.marco { font-size: 15px; }
.sec { background-image: radial-gradient(rgba(122,167,255,.05) 1px, transparent 1px); background-size: 26px 26px; }