/* ============================================================
   ACTIVA SOLUCIONES — Design Tokens
   Colors & Typography
   ============================================================
   Brand: Activa Soluciones — B2B consultoría enterprise (LATAM)
   Tagline: "El motor de las grandes marcas"
   ============================================================ */

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

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary blues — the "A" body */
  --activa-blue-900: #0A1A35;   /* deepest, near-black navy */
  --activa-blue-800: #122A52;
  --activa-blue-700: #1B3A6B;   /* primary deep blue */
  --activa-blue-600: #244C87;
  --activa-blue-500: #2E5C9E;   /* primary mid blue (gradient end) */
  --activa-blue-400: #4A78B8;
  --activa-blue-300: #7FA0CC;
  --activa-blue-200: #B8CCE0;
  --activa-blue-100: #E1E9F2;

  /* Accent orange — the ascending arrow */
  --activa-orange-700: #C5651A;
  --activa-orange-600: #E67E22;   /* deep accent, hover state */
  --activa-orange-500: #F39C12;   /* primary accent orange */
  --activa-orange-400: #F5B143;
  --activa-orange-300: #F8C977;
  --activa-orange-200: #FCE2B5;
  --activa-orange-100: #FEF3E0;

  /* Neutrals */
  --activa-black:      #0A0A0A;
  --activa-gray-900:   #1A1A1A;
  --activa-gray-800:   #2A2A2A;
  --activa-gray-700:   #4A4A4A;
  --activa-gray-600:   #6E6E6E;
  --activa-gray-500:   #A8A8A8;   /* light gray */
  --activa-gray-400:   #C7C7C7;
  --activa-gray-300:   #DCDCDC;
  --activa-gray-200:   #E8EAED;
  --activa-gray-100:   #F0F2F5;
  --activa-bg:         #F5F7FA;   /* background light */
  --activa-white:      #FFFFFF;

  /* ---------- SEMANTIC COLORS ---------- */
  --color-bg:           var(--activa-white);
  --color-bg-muted:     var(--activa-bg);
  --color-bg-dark:      var(--activa-blue-900);
  --color-bg-brand:     var(--activa-blue-700);

  --color-fg-1:         var(--activa-blue-900);     /* primary text */
  --color-fg-2:         var(--activa-gray-700);     /* secondary text */
  --color-fg-3:         var(--activa-gray-500);     /* muted / captions */
  --color-fg-on-dark:   var(--activa-white);
  --color-fg-on-brand:  var(--activa-white);

  --color-accent:       var(--activa-orange-500);
  --color-accent-hover: var(--activa-orange-600);
  --color-link:         var(--activa-blue-500);
  --color-link-hover:   var(--activa-blue-700);

  --color-border:       var(--activa-gray-200);
  --color-border-strong:var(--activa-gray-300);
  --color-border-brand: var(--activa-orange-500);

  --color-success:      #1F9D55;
  --color-warning:      var(--activa-orange-500);
  --color-danger:       #D14343;
  --color-info:         var(--activa-blue-500);

  /* ---------- SIGNATURE GRADIENTS ---------- */
  --gradient-brand:        linear-gradient(135deg, #1B3A6B 0%, #2E5C9E 100%);
  --gradient-brand-deep:   linear-gradient(135deg, #0A1A35 0%, #1B3A6B 60%, #2E5C9E 100%);
  --gradient-accent:       linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
  --gradient-hero:         linear-gradient(120deg, #0A1A35 0%, #1B3A6B 55%, #2E5C9E 100%);
  /* Ascending diagonal — echoes the logo arrows */
  --gradient-rise:         linear-gradient(45deg, #1B3A6B 0%, #2E5C9E 60%, #F39C12 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.25 — major third) */
  --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;
  --fs-6xl:   76px;
  --fs-display:96px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --border-hairline: 1px solid var(--color-border);
  --border-brand-line: 1px solid var(--activa-orange-500); /* signature 1px orange detail */

  /* ---------- SHADOWS ---------- */
  --shadow-xs:   0 1px 2px rgba(10, 26, 53, 0.06);
  --shadow-sm:   0 2px 6px rgba(10, 26, 53, 0.08);
  --shadow-md:   0 6px 18px rgba(10, 26, 53, 0.10);
  --shadow-lg:   0 16px 40px rgba(10, 26, 53, 0.14);
  --shadow-xl:   0 28px 64px rgba(10, 26, 53, 0.18);
  --shadow-brand:0 12px 36px rgba(27, 58, 107, 0.28);
  --shadow-accent:0 12px 36px rgba(243, 156, 18, 0.32);
  --shadow-inset:inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---------- MOTION ---------- */
  --ease-rise:   cubic-bezier(.2, .8, .2, 1);          /* signature — ascending */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-wide: 1440px;
  --nav-height:   72px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(56px, 7vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 3.5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}

.t-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-3);
}

.t-kpi {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 6vw, var(--fs-6xl));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);   /* KPIs are ALWAYS orange */
}