/* Hub de Saúde — identidade visual compartilhada (TEMA CLARO)
   Paleta institucional: azul profundo #102A43, azul vivo #2563C7,
   verde #10A77A, cinza claro #F1F5F9, branco #FFFFFF.
   Tipografia: Space Grotesk (display) + Plus Jakarta Sans (texto). */

:root{
  --blue:#2563C7;       /* azul vivo (primário) */
  --blue-light:#3b7fe0;
  --green:#10A77A;      /* verde */
  --green-light:#18c091;
  --ink:#102A43;        /* azul profundo (texto forte / seções sérias) */
  --body:#334155;       /* texto corpo (slate-700) */
  --muted:#64748b;      /* texto secundário (slate-500) */
  --bg:#F1F5F9;         /* fundo (cinza claro) */
  --surface:#FFFFFF;    /* cartões */
  --surface-2:#F1F5F9;  /* cinza claro */
  --border:#e2e8f0;     /* slate-200 */
}

*{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;box-sizing:border-box}
.font-display{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}

html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body)}

/* Gradientes de marca */
.brand-grad{background:linear-gradient(135deg,#2563C7 0%,#10A77A 100%)}
.brand-grad-soft{background:linear-gradient(135deg,rgba(37,99,199,.10),rgba(16,167,122,.10))}
.brand-text{background:linear-gradient(135deg,#2563C7,#10A77A);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;border-radius:.75rem;padding:.8rem 1.4rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;cursor:pointer;text-decoration:none;font-size:.95rem;border:0}
.btn-primary{color:#fff;box-shadow:0 8px 24px -10px rgba(37,99,199,.5)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(16,167,122,.55)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface-2);border-color:#cbd5e1}

/* Cartões */
.card{background:var(--surface);border:1px solid var(--border);border-radius:1.25rem;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -16px rgba(15,23,42,.12)}
.card-hover{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card-hover:hover{transform:translateY(-4px);border-color:rgba(37,99,199,.4);box-shadow:0 12px 36px -16px rgba(37,99,199,.3)}

/* Pílulas / selos */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border);background:#fff;color:#334155}

/* Ambiente de fundo com blobs suaves */
.bg-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-blobs .b1{position:absolute;top:-10rem;left:8%;width:34rem;height:34rem;border-radius:50%;filter:blur(130px);opacity:.12;background:#2563C7}
.bg-blobs .b2{position:absolute;bottom:-12rem;right:6%;width:30rem;height:30rem;border-radius:50%;filter:blur(130px);opacity:.12;background:#10A77A}

/* Animações */
@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
/* Fallback CSS: se o JS não rodar/atrasar, o conteúdo aparece sozinho
   (nunca fica preso invisível). O .in do JS continua fazendo o fade suave. */
.reveal{opacity:0;animation:fadeUp .6s ease-out 1.4s forwards}
.reveal.in{opacity:1;animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}

/* Navegação */
.nav-link{color:#475569;text-decoration:none;font-weight:600;font-size:.92rem;padding:.4rem .2rem;position:relative}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2563C7,#10A77A)}

/* Utilidades */
.container-hd{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.section{padding:5rem 0}
.eyebrow{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}

/* LGPD banner */
#lgpd{position:fixed;bottom:0;left:0;right:0;z-index:60;padding:.9rem}
#lgpd .inner{max-width:1120px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1rem 1.1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;box-shadow:0 20px 50px -20px rgba(15,23,42,.25)}

/* Documentação */
.doc h2{scroll-margin-top:90px}
.doc code{background:var(--surface-2);padding:.15rem .4rem;border-radius:.35rem;font-size:.85em;color:var(--ink)}