/* ============================================================
   AROCA CONSULTING — Design Tokens
   Extraídos del sistema de diseño en Figma
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --navy:        #002852;
  --green:       #00bf63;
  --green-dark:  #00a856;   /* hover del CTA */
  --ink:         #111111;   /* títulos / nav */
  --text:        #222222;   /* cuerpo */
  --muted:       #475569;   /* etiquetas */
  --muted-2:     #666666;   /* legales / secundario */
  --white:       #ffffff;
  --bg-subtle:   #f7faff;   /* fondos de sección suaves */
  --bg-tint:     #fafcff;   /* tarjetas / inputs */
  --border:      #e6eaf0;   /* bordes 1px */
  --border-navy: rgba(0, 40, 82, 0.1);

  /* Variable que consumen los iconos SVG exportados de Figma */
  --fill-0: var(--navy);

  /* ---------- Tipografía ---------- */
  --font-brand: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (px / line-height) */
  --fs-hero:     56px;   --lh-hero:     1.1;
  --fs-display:  44px;   --lh-display:  1.22;   /* títulos de sección */
  --fs-h3:       28px;   --lh-h3:       1.35;
  --fs-card:     24px;   --lh-card:     1.42;
  --fs-body-lg:  20px;   --lh-body-lg:  1.6;
  --fs-body:     17px;   --lh-body:     1.65;
  --fs-small:    15px;   --lh-small:    1.6;
  --fs-caption:  13px;   --lh-caption:  1.5;

  --fw-regular: 500;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Espaciado ---------- */
  --sp-8:   8px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;
  --sp-160: 160px;

  /* ---------- Layout ---------- */
  --container: 1536px;      /* caja: da ~1344px de texto (Figma) tras restar 2×gutter, con márgenes ~178px */
  --gutter:    clamp(20px, 5vw, 96px);
  --section-y: clamp(56px, 7vw, 96px);

  --sp-112: 112px;
  --sp-128: 128px;
  --sp-144: 144px;
  --sp-176: 176px;

  /* ---------- Forma y movimiento ---------- */
  --radius: 0px;
  --shadow-card:  0 10px 30px rgba(0, 40, 82, 0.05);
  --shadow-hover: 0 16px 40px rgba(0, 40, 82, 0.10);
  --shadow-nav:   0 2px 20px rgba(0, 40, 82, 0.04);
  --transition:   150ms ease;

  /* Motion */
  --dur-fast:   150ms;   /* color / borde / hover base */
  --dur-mid:    250ms;   /* elevación de tarjeta, zoom de imagen */
  --dur-reveal: 500ms;   /* aparición al hacer scroll */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Anillos de foco accesible */
  --ring-green: 0 0 0 3px rgba(0, 191, 99, 0.30);
  --ring-navy:  0 0 0 3px rgba(0, 40, 82, 0.22);
  --ring-white: 0 0 0 3px rgba(255, 255, 255, 0.60);
}