/* ============================================================================
   QSALUD · DESIGN TOKENS · v1.0
   Copia canónica de qsalud-tokens.css (sin @import: las fuentes las encola
   el plugin con el handle qsr-fonts).
   ============================================================================ */

:root{

  /* === TIPOGRAFÍA · familias ============================================== */
  --qs-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --qs-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --qs-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* === TIPOGRAFÍA · escala fluida ========================================= */
  --qs-fs-display: clamp(38px, 6vw,   76px);
  --qs-fs-h1:      clamp(34px, 5vw,   60px);
  --qs-fs-h2:      clamp(28px, 3.6vw, 42px);
  --qs-fs-h3:      clamp(21px, 2.4vw, 26px);
  --qs-fs-h4:      clamp(18px, 2vw,   21px);
  --qs-fs-lead:    clamp(18px, 2.1vw, 22px);
  --qs-fs-body:    17px;
  --qs-fs-small:   13.5px;
  --qs-fs-kicker:  12px;

  /* === TIPOGRAFÍA · interlineado y tracking =============================== */
  --qs-lh-tight: 1.04;
  --qs-lh-head:  1.12;
  --qs-lh-body:  1.7;
  --qs-ls-tight: -0.01em;
  --qs-ls-kicker: 0.16em;

  /* === TIPOGRAFÍA · pesos ================================================= */
  --qs-w-regular: 400;
  --qs-w-medium:  500;
  --qs-w-semibold:600;
  --qs-w-bold:    700;

  /* === COLOR · marca ====================================================== */
  --qs-ink:       #0E1B2A;
  --qs-ink-soft:  #33485E;
  --qs-slate:     #5A6B7E;
  --qs-mist:      #8A99A8;
  --qs-blue:      #2E6FB5;
  --qs-blue-deep: #1C4E86;
  --qs-gold:      #B8894B;

  /* === COLOR · superficies =============================================== */
  --qs-paper:   #FBFCFD;
  --qs-paper-2: #F1F5F9;
  --qs-sky:     #D5E0EB;
  --qs-sky-soft:#E8EFF6;
  --qs-white:   #FFFFFF;
  --qs-line:    #D9E2EC;

  /* === COLOR · estado ==================================================== */
  --qs-ok:      #1E8E6A;
  --qs-warn:    #B8894B;
  --qs-error:   #C0392B;

  /* === RADIOS, SOMBRAS, ESPACIADO ======================================== */
  --qs-radius-sm: 8px;
  --qs-radius:    14px;
  --qs-radius-lg: 18px;
  --qs-radius-pill: 999px;

  --qs-shadow-card: 0 18px 40px -24px rgba(14,27,42,.35);
  --qs-shadow-soft: 0 8px 24px -16px rgba(14,27,42,.25);

  --qs-space-1: 8px;
  --qs-space-2: 16px;
  --qs-space-3: 24px;
  --qs-space-4: 40px;
  --qs-space-5: 64px;

  --qs-maxw: 1180px;
  --qs-maxw-narrow: 760px;
}

/* ============================================================================
   CLASES UTILITARIAS QSALUD (.qs-*)
   ============================================================================ */

.qs-display{ font-family:var(--qs-font-display); font-weight:var(--qs-w-regular);
  font-size:var(--qs-fs-display); line-height:var(--qs-lh-tight); letter-spacing:var(--qs-ls-tight); color:var(--qs-ink); }
.qs-h1{ font-family:var(--qs-font-display); font-weight:var(--qs-w-regular);
  font-size:var(--qs-fs-h1); line-height:var(--qs-lh-tight); letter-spacing:var(--qs-ls-tight); color:var(--qs-ink); }
.qs-h2{ font-family:var(--qs-font-display); font-weight:var(--qs-w-regular);
  font-size:var(--qs-fs-h2); line-height:var(--qs-lh-head); letter-spacing:var(--qs-ls-tight); color:var(--qs-ink); }
.qs-h3{ font-family:var(--qs-font-display); font-weight:var(--qs-w-medium);
  font-size:var(--qs-fs-h3); line-height:var(--qs-lh-head); color:var(--qs-ink); }
.qs-h4{ font-family:var(--qs-font-display); font-weight:var(--qs-w-medium);
  font-size:var(--qs-fs-h4); line-height:var(--qs-lh-head); color:var(--qs-ink); }

.qs-display em, .qs-h1 em, .qs-h2 em, .qs-h3 em{ font-style:italic; color:var(--qs-blue-deep); }

.qs-lead{ font-family:var(--qs-font-body); font-size:var(--qs-fs-lead);
  line-height:1.6; color:var(--qs-ink-soft); max-width:62ch; }
.qs-body{ font-family:var(--qs-font-body); font-size:var(--qs-fs-body);
  line-height:var(--qs-lh-body); color:var(--qs-ink-soft); }
.qs-small{ font-size:var(--qs-fs-small); color:var(--qs-slate); }

.qs-kicker{ font-family:var(--qs-font-mono); font-size:var(--qs-fs-kicker);
  letter-spacing:var(--qs-ls-kicker); text-transform:uppercase; color:var(--qs-slate);
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5em; }
.qs-kicker .qs-dot{ width:5px; height:5px; border-radius:50%; background:var(--qs-gold); display:inline-block; }

.qs-eyebrow{ font-family:var(--qs-font-mono); font-size:var(--qs-fs-kicker);
  letter-spacing:.14em; text-transform:uppercase; color:var(--qs-blue);
  display:flex; align-items:center; gap:10px; }
.qs-eyebrow::before{ content:""; width:28px; height:1.5px; background:var(--qs-blue); }

.qs-link, a.qs-link{ color:var(--qs-blue-deep); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.qs-link:hover{ color:var(--qs-blue); }

.qs-btn{ font-family:var(--qs-font-body); font-weight:var(--qs-w-semibold); font-size:16px;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--qs-blue); color:#fff; border:0; border-radius:var(--qs-radius-pill);
  padding:15px 26px; text-decoration:none; transition:transform .2s ease, background .2s ease; }
.qs-btn:hover{ transform:translateY(-2px); background:var(--qs-blue-deep); }
.qs-btn--ink{ background:var(--qs-ink); }
.qs-btn--ink:hover{ background:#000; }
.qs-btn--ghost{ background:transparent; color:var(--qs-ink); border:1.5px solid var(--qs-line); }
.qs-btn--ghost:hover{ background:transparent; border-color:var(--qs-blue); color:var(--qs-blue-deep); transform:translateY(-2px); }

.qs-card{ background:var(--qs-white); border:1px solid var(--qs-line);
  border-radius:var(--qs-radius); padding:28px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.qs-card:hover{ transform:translateY(-3px); box-shadow:var(--qs-shadow-card); border-color:#C6D3E2; }
.qs-card__tag{ font-family:var(--qs-font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--qs-blue); margin-bottom:12px; }

.qs-chip{ font-family:var(--qs-font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--qs-ink-soft); background:var(--qs-paper-2); border:1px solid var(--qs-line);
  border-radius:var(--qs-radius-pill); padding:7px 14px; display:inline-block; }

.qs-pull{ font-family:var(--qs-font-display); font-style:italic;
  font-size:clamp(22px,3vw,32px); line-height:1.3; color:var(--qs-ink);
  border-left:3px solid var(--qs-gold); padding:6px 0 6px 26px; }

.qs-wrap{ max-width:var(--qs-maxw); margin:0 auto; padding:0 24px; }
.qs-narrow{ max-width:var(--qs-maxw-narrow); margin:0 auto; padding:0 24px; }

.qs-divider{ height:1px; background:var(--qs-line); border:0; margin:0; }

@media (prefers-reduced-motion: reduce){
  .qs-btn, .qs-card{ transition:none; }
}