/* ============================================================
   IHV Design System — Colors, Type & Tokens
   Inversiones Hermanos Valero · v2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand color tokens ---------- */
  --color-klein:        #1E4FA8;  /* IHV Azul Klein — hero, brand surfaces */
  --color-klein-deep:   #173E84;  /* Klein darker (pressed states on klein) */
  --color-klein-soft:   #DCE6F5;  /* Klein tinted background */

  --color-navy:         #0A2E5C;  /* Anchor — footer, dark cards, headings */
  --color-navy-deep:    #061E3D;  /* Navy darker — extreme contrast */

  --color-primary:      #1A6FD8;  /* Action blue — buttons, links */
  --color-primary-hover:#1860BE;
  --color-primary-press:#154FA0;

  --color-accent:       #7DD3FC;  /* Cian luminoso — eyebrows on dark */
  --color-accent-deep:  #00B8D4;  /* Cian eléctrico — UI states on light */

  /* ---------- Neutrals ---------- */
  --color-text:         #1F2937;  /* Grafito */
  --color-text-muted:   #6B7280;  /* Gris medio */
  --color-text-subtle:  #9CA3AF;
  --color-border:       #E5E7EB;
  --color-border-strong:#D1D5DB;
  --color-bg-soft:      #F3F4F6;
  --color-bg-softer:    #F9FAFB;
  --color-bg:           #FFFFFF;

  /* ---------- Semantic ---------- */
  --color-success:      #15803D;
  --color-warning:      #B45309;
  --color-danger:       #B91C1C;
  --color-info:         var(--color-primary);

  /* ---------- Foreground/background pairs (semantic) ---------- */
  --fg-1: var(--color-text);
  --fg-2: var(--color-text-muted);
  --fg-3: var(--color-text-subtle);
  --fg-on-klein: #FFFFFF;
  --fg-on-navy:  #FFFFFF;
  --fg-accent:   var(--color-accent);

  --bg-1: var(--color-bg);
  --bg-2: var(--color-bg-softer);
  --bg-3: var(--color-bg-soft);

  /* ---------- Type families ---------- */
  --font-primary:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-editorial: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (modular 1.250) ---------- */
  --fs-display:    48px;
  --fs-h1:         40px;
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-body-lg:    17px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-caption:    11px;
  --fs-quote:      19px;
  --fs-lead:       17px;
  --fs-stat:       32px;
  --fs-mono:       12px;

  /* ---------- Spacing (multiples of 8) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* ---------- Radii ---------- */
  --radius-input: 4px;
  --radius-card:  8px;
  --radius-pill:  999px;

  /* ---------- Borders ---------- */
  --border-thin:   1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* ---------- Elevation / shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(10, 46, 92, 0.06);
  --shadow-md:  0 4px 12px rgba(10, 46, 92, 0.08);
  --shadow-lg:  0 12px 32px rgba(10, 46, 92, 0.12);
  --shadow-focus: 0 0 0 3px rgba(26, 111, 216, 0.30);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --gutter-desktop: 24px;
  --gutter-mobile:  16px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;
}

/* ============================================================
   Semantic typographic styles
   ============================================================ */

.ihv-display {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.ihv-h1 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.ihv-h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--fg-1);
}
.ihv-h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--fg-1);
}
.ihv-h4 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ihv-body-lg {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-1);
}
.ihv-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-1);
}
.ihv-body-sm {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--fg-2);
}
.ihv-caption {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ihv-eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

/* Editorial (Crimson Pro) */
.ihv-quote {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.45;
  color: var(--fg-1);
}
.ihv-lead {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
}
.ihv-stat {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-klein);
  font-feature-settings: "lnum" 1;
}

/* Mono — for codes, RIF, references */
.ihv-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  line-height: 1.5;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  font-family: var(--font-primary);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: 800 var(--fs-h1)/1.08 var(--font-primary); letter-spacing: -0.025em; }
h2 { font: 700 var(--fs-h2)/1.18 var(--font-primary); letter-spacing: -0.018em; }
h3 { font: 700 var(--fs-h3)/1.25 var(--font-primary); letter-spacing: -0.012em; }
h4 { font: 700 var(--fs-h4)/1.3  var(--font-primary); letter-spacing: -0.01em; }
p  { font: 400 var(--fs-body)/1.6 var(--font-primary); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-hover); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }