/* ==========================================================================
   FIIC S.A. — Design Tokens
   Identidad: Family office colombiano. Old money pero moderno y luminoso.
   Sistema de color 60/30/10:
     60% — papel marfil / blanco hueso (background)
     30% — azul FIIC (cobalto profundo del logo)
     10% — acentos: tinta carbón + filete dorado pálido (uso ínfimo)
   ========================================================================== */

:root {
  /* — Azules FIIC (escala) — */
  --fiic-50:  #eef2f9;
  --fiic-100: #d8e1ee;
  --fiic-200: #b1c2dc;
  --fiic-300: #7d97c0;
  --fiic-400: #4f73a7;
  --fiic-500: #2a5395;   /* cobalto medio */
  --fiic-600: #1f4288;   /* logo principal */
  --fiic-700: #173674;   /* tinta */
  --fiic-800: #102855;
  --fiic-900: #0a1a3a;
  --fiic-950: #060f24;

  /* — Papel / Marfil — */
  --paper-0:  #ffffff;
  --paper-50: #fbfaf6;   /* off-white cálido */
  --paper-100: #f5f1e8;  /* marfil */
  --paper-200: #ece5d3;  /* crema antigua */
  --paper-300: #d9cfb5;
  --paper-400: #b8ab8a;

  /* — Tinta / Carbón — */
  --ink-900: #0e0f12;
  --ink-800: #1a1c21;
  --ink-700: #2c2f37;
  --ink-500: #5a5f6b;
  --ink-400: #80848e;
  --ink-300: #b1b4bb;

  /* — Filete (oro pálido, uso mínimo: bordes, sellos, números) — */
  --filete: #b5a06c;
  --filete-soft: #d4c08a;

  /* — Semánticos — */
  --bg: var(--paper-50);
  --bg-alt: var(--paper-100);
  --bg-deep: var(--fiic-900);
  --fg: var(--ink-900);
  --fg-mute: var(--ink-500);
  --fg-faint: var(--ink-400);
  --rule: rgba(14, 15, 18, 0.12);
  --rule-strong: rgba(14, 15, 18, 0.28);
  --rule-light: rgba(14, 15, 18, 0.06);
  --primary: var(--fiic-600);
  --primary-deep: var(--fiic-800);
  --on-primary: var(--paper-50);

  /* — Tipografía — */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* — Tamaños fluidos — */
  --t-xs: clamp(11px, 0.72rem, 12px);
  --t-sm: clamp(13px, 0.86rem, 14px);
  --t-base: clamp(15px, 1rem, 17px);
  --t-md: clamp(17px, 1.12rem, 19px);
  --t-lg: clamp(20px, 1.4rem, 24px);
  --t-xl: clamp(28px, 2.4vw, 36px);
  --t-2xl: clamp(40px, 4.5vw, 64px);
  --t-3xl: clamp(56px, 7vw, 104px);
  --t-4xl: clamp(72px, 9vw, 144px);

  /* — Espaciado — */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 160px);

  /* — Sombra (muy sutil, sólo en cards de papel) — */
  --shadow-sm: 0 1px 2px rgba(10, 26, 58, 0.04), 0 2px 6px rgba(10, 26, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 26, 58, 0.06), 0 12px 40px rgba(10, 26, 58, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 26, 58, 0.08), 0 24px 80px rgba(10, 26, 58, 0.12);

  /* — Animación — */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 240ms;
  --dur-2: 520ms;
  --dur-3: 900ms;

  /* — Layout — */
  --max-w: 1440px;
  --max-w-text: 720px;
}

/* ==========================================================================
   Reset suave
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   Tipografía utilitaria
   ========================================================================== */
.serif { font-family: var(--serif); font-weight: 400; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sans { font-family: var(--sans); }
.mono { font-family: var(--mono); }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-mute);
}
.eyebrow-num {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--filete);
  text-transform: uppercase;
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.display-it { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* — Selección — */
::selection { background: var(--fiic-600); color: var(--paper-50); }