/* Salud Viva — estilos combinados para publicar */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* Salud Viva — Webfonts
   SUBSTITUTIONS (no original font files were provided):
   - Brand wordmark / elegant gold caps = Trajan-style Roman serif  → Cinzel
   - Bold campaign headlines (geometric sans)                       → Montserrat
   - Body / UI text                                                 → Mulish
   Flagged to the client — swap these @font-face sources when the
   licensed brand fonts are delivered. */



/* Salud Viva — Color tokens
   Derived from the brand logo and campaign posters:
   royal/navy blue + bright sky blue, ceremonial gold, foliage green. */
:root {
  /* ---- Royal blue (primary) ---- */
  --blue-950: #021a3c;
  --blue-900: #04244f;
  --blue-800: #04346f; /* primary navy band */
  --blue-700: #053c9b;
  --blue-600: #0a53b0;
  --blue-500: #1e73c8;
  --blue-400: #2a8fe0; /* bright accent (“COMIENZO”) */
  --blue-300: #5bb0ec;
  --blue-200: #a7d2f5;
  --blue-100: #dceaf9;
  --blue-50:  #f3f6fc;

  /* ---- Ceremonial gold ---- */
  --gold-700: #8a6310;
  --gold-600: #b8860b;
  --gold-500: #c9a227; /* base gold */
  --gold-400: #d9b23c;
  --gold-300: #edc862; /* highlight */
  --gold-100: #f8eecb;
  --gradient-gold: linear-gradient(135deg, #b8860b 0%, #edc862 48%, #a87c12 100%); /* @kind color */

  /* ---- Foliage green (secondary) ---- */
  --green-700: #2f6f22;
  --green-600: #3e8c2c;
  --green-500: #4fa836; /* base green */
  --green-400: #5bb946;
  --green-100: #e3f3dc;

  /* ---- Neutrals (cool, blue-leaning) ---- */
  --white:   #ffffff;
  --paper:   #f7f9fc; /* page background */
  --mist:    #eef2f8; /* subtle fill */
  --line:    #dce3ed;
  --ink-900: #10243f; /* deep blue ink */
  --ink-700: #2b3a4f;
  --ink-500: #5a6b80;
  --ink-300: #8a99ac;

  /* ---- Status ---- */
  --success: #3e8c2c;
  --success-soft: #e3f3dc;
  --warning: #d9920f;
  --warning-soft: #fbeecb;
  --danger:  #d23b3b;
  --danger-soft: #fbe2e2;
  --info:    #2a8fe0;
  --info-soft: #dceaf9;

  /* ================= Semantic aliases ================= */
  --color-primary:        var(--blue-800);
  --color-primary-strong: var(--blue-900);
  --color-primary-hover:  var(--blue-700);
  --color-accent:         var(--blue-400);
  --color-accent-hover:   var(--blue-500);
  --color-secondary:      var(--green-500);
  --color-secondary-hover:var(--green-600);
  --color-gold:           var(--gold-500);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-300);
  --text-on-primary:var(--white);
  --text-accent:    var(--blue-700);
  --text-link:      var(--blue-600);

  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-subtle: var(--mist);
  --surface-primary:var(--blue-800);
  --surface-tint:   var(--blue-50);

  --border-subtle:  var(--line);
  --border-strong:  var(--blue-200);
  --border-focus:   var(--blue-400);

  --focus-ring: 0 0 0 3px rgba(42, 143, 224, 0.40);
}


/* Salud Viva — Typography tokens */
:root {
  /* ---- Families ---- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;       /* brand wordmark, ceremonial gold caps */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* campaign headlines, UI titles */
  --font-body:    'Mulish', 'Segoe UI', system-ui, sans-serif;  /* body & UI text */

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:   900;  /* @kind font */

  /* ---- Type scale (fluid-friendly base 16px) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-display: 4.75rem;/* 76 */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* small caps labels */
  --tracking-display:0.16em;  /* wordmark / Cinzel caps */

  /* ---- Semantic roles ---- */
  --heading-font: var(--font-heading);
  --heading-weight: var(--fw-extrabold);
  --heading-leading: var(--leading-tight);
  --body-font: var(--font-body);
  --body-leading: var(--leading-relaxed);
  --eyebrow-tracking: var(--tracking-wider);
}


/* Salud Viva — Spacing & layout tokens (4px base grid) */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7.5rem;   /* 120 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-10);
}


/* Salud Viva — Radii & shadow tokens.
   The brand favors soft, rounded "pill" pieces (capsule contact bars,
   circular icon medallions) over hard edges. Shadows are soft and cool. */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;   /* cards */
  --radius-xl:  28px;   /* panels, hero cards */
  --radius-pill:999px;  /* buttons, badges, contact bars */
  --radius-circle:50%;  /* icon medallions, avatars */

  /* ---- Shadows (cool blue-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(4, 52, 111, 0.06);
  --shadow-sm: 0 2px 8px rgba(4, 52, 111, 0.08);
  --shadow-md: 0 8px 24px rgba(4, 52, 111, 0.10);
  --shadow-lg: 0 18px 48px rgba(4, 52, 111, 0.14);
  --shadow-gold: 0 6px 20px rgba(184, 134, 11, 0.28);
  --shadow-inset: inset 0 0 0 1px rgba(4, 52, 111, 0.06);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}


/* Salud Viva — light base layer (resets + helpful element defaults).
   Token-only; safe for consumers to inherit. */
:root {
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  line-height: var(--heading-leading);
  margin: 0 0 0.5em;
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); }
h3 { font-size: var(--text-xl);  font-weight: var(--fw-bold); }
h4 { font-size: var(--text-lg);  font-weight: var(--fw-bold); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand wordmark helper — Cinzel gold caps */
.sv-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow / kicker label */
.sv-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
}

::selection { background: var(--blue-200); color: var(--blue-900); }