/* =============================================================
   Si al Ahorro — Colors & Type · v2 (azul + blanco, iOS style)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------
     PRIMARY PALETTE — Blues (trust, tech, modernity)
     ----------------------------------------------------------- */
  --navy-950: #06101E;
  --navy-900: #0B1E45;
  --navy-800: #0057FF;   /* brand primary blue */
  --navy-700: #1A6BFF;
  --navy-600: #3B82F6;
  --navy-500: #60A5FA;
  --navy-400: #93C5FD;
  --navy-300: #BAE6FD;
  --navy-200: #DBEAFE;
  --navy-100: #EFF6FF;
  --navy-50:  #F8FAFF;

  /* -----------------------------------------------------------
     ACCENT PALETTE — Sky Blue (highlights, interactive)
     ----------------------------------------------------------- */
  --gold-900: #0C4A6E;
  --gold-800: #075985;
  --gold-700: #0369A1;
  --gold-600: #0284C7;
  --gold-500: #0EA5E9;   /* sky blue accent */
  --gold-400: #38BDF8;
  --gold-300: #7DD3FC;
  --gold-200: #BAE6FD;
  --gold-100: #E0F2FE;
  --gold-50:  #F0F9FF;

  /* -----------------------------------------------------------
     NEUTRALS — blue-tinted slate
     ----------------------------------------------------------- */
  --ink-950: #0A0F1A;
  --ink-900: #131C30;
  --ink-800: #1E2D4F;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  --paper:        #FFFFFF;
  --paper-tint:   #F0F6FF;
  --paper-deep:   #DBEAFE;
  --white:        #FFFFFF;

  /* -----------------------------------------------------------
     SEMANTIC TOKENS
     ----------------------------------------------------------- */
  --bg:          #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-tint:     #F0F6FF;
  --bg-inverse:  #0B1E45;

  --fg:          #0A1628;
  --fg-muted:    #475569;
  --fg-subtle:   #64748B;
  --fg-faint:    #94A3B8;
  --fg-inverse:  #FFFFFF;

  --accent:        #0057FF;
  --accent-strong: #0040CC;
  --accent-soft:   #EFF6FF;

  --border:        rgba(0, 87, 255, 0.09);
  --border-strong: rgba(0, 87, 255, 0.18);
  --border-gold:   rgba(14, 165, 233, 0.30);
  --divider:       rgba(0, 87, 255, 0.06);

  --gain:    #059669;
  --gain-bg: #D1FAE5;
  --loss:    #DC2626;
  --loss-bg: #FEE2E2;
  --warn:    #D97706;
  --warn-bg: #FEF3C7;
  --info:    var(--navy-600);
  --info-bg: var(--navy-100);

  /* -----------------------------------------------------------
     TYPOGRAPHY — iOS-friendly, clean sans
     ----------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Inter', -apple-system, sans-serif;
  --font-number:  'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.10em;

  /* -----------------------------------------------------------
     SPACING
     ----------------------------------------------------------- */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* -----------------------------------------------------------
     RADII — iOS style, generously rounded
     ----------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* -----------------------------------------------------------
     ELEVATION — crisp, light shadows
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 87, 255, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 87, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 87, 255, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 32px rgba(0, 87, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 56px rgba(0, 87, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-gold: 0 6px 20px rgba(0, 87, 255, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   130ms;
  --dur-base:   210ms;
  --dur-slow:   380ms;

  /* -----------------------------------------------------------
     SIGNATURE — blue gradient rule
     ----------------------------------------------------------- */
  --rule-gold: linear-gradient(90deg, #0057FF 0%, #0EA5E9 100%);
}

/* ── Element defaults ─────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; color: var(--navy-800); }
h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--navy-700);
}

p {
  margin: 0 0 1em;
  color: var(--fg);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--navy-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--navy-700);
  border-radius: 2px;
}

.kicker {
  font-family: var(--font-display);
  color: var(--navy-700);
  font-weight: 700;
}

a {
  color: var(--navy-700);
  text-decoration: none;
  border-bottom: 1px solid var(--border-gold);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--navy-800); }

code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-number);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.figure {
  font-family: var(--font-number);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
}

hr.gold-rule {
  border: 0;
  height: 2px;
  background: var(--rule-gold);
  width: 40px;
  margin: 16px 0;
  border-radius: 2px;
}