/* =====================================================================
   LinkedVix · sistema visual base (site + painel)
   Paleta oficial: #0D7AD9 · #1A90D9 · #16466F · #38A668 · #75D966 · #1C8B8B
   Tipografia: Sora (títulos) + Open Sans (texto)
   Temas do painel: data-tema="noite" | "claro" | "oceano"
   ===================================================================== */

:root {
  --azul: #0d7ad9;
  --azul-claro: #1a90d9;
  --navy: #16466f;
  --tinta: #0a2540;
  --verde: #38a668;
  --lima: #75d966;
  --teal: #1c8b8b;
  --grad: linear-gradient(115deg, #0d7ad9 0%, #1c8b8b 52%, #38a668 100%);
  --grad-texto: linear-gradient(100deg, #5bb4f5, #7ee6a0);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --raio-s: 10px;
  --raio-m: 14px;
  --raio-l: 22px;

  /* Tema claro (padrão) */
  --bg: #f5f9fc;
  --superficie: #ffffff;
  --superficie-2: #eef5fb;
  --texto: #0a2540;
  --texto-suave: #55708a;
  --linha: #dfe8f1;
  --acento: #0d7ad9;
  --ok: #2f9a5e;
  --alerta: #c77a12;
  --erro: #d64545;
  --sombra: 0 20px 50px -30px rgba(10, 37, 64, 0.35);
}

[data-tema="noite"] {
  --bg: #071a2e;
  --superficie: #0f2b4a;
  --superficie-2: #123354;
  --texto: #e9f2fb;
  --texto-suave: #91aac3;
  --linha: #1d3d60;
  --acento: #4aa6f0;
  --ok: #5cc68a;
  --alerta: #f0b35a;
  --erro: #f07a7a;
  --sombra: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

[data-tema="oceano"] {
  --bg: #05211f;
  --superficie: #0c3936;
  --superficie-2: #0f4541;
  --texto: #e6f6f2;
  --texto-suave: #8fbcb3;
  --linha: #195550;
  --acento: #4fd1c0;
  --ok: #7fe08a;
  --alerta: #f0c36a;
  --erro: #f08a7a;
  --grad: linear-gradient(115deg, #1c8b8b, #38a668 60%, #75d966);
  --sombra: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 55%, transparent); outline-offset: 2px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }

.texto-grad { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--raio-m); padding: 14px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: var(--grad); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(13, 122, 217, 0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(13, 122, 217, 0.7); }
.btn--sec { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linha); box-shadow: none; }

.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-l); padding: 24px; box-shadow: var(--sombra); }

.selo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; border-radius: 99px; }
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); }

/* Dicas ao passar o mouse (regra do painel: pouco texto fixo, detalhes no hover) */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after {
  content: attr(data-dica); position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px);
  width: max-content; max-width: 280px; background: #0a2540; color: #eaf3fb;
  font: 500 12px/1.45 var(--font-body); padding: 9px 11px; border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }