/* =========================================================
   CMigrar — Design tokens
   Colores extraídos directamente de los activos de Branding
   (swatch oficial: #0066FF / #39BBF4 / #FEFEFE / #FFDE59)
   ========================================================= */
:root {
  /* Marca */
  --color-primary: #0066FF;
  --color-primary-600: #0050CC;
  --color-primary-700: #003D9E;
  --color-primary-100: #E6EFFF;
  --color-secondary: #39BBF4;
  --color-secondary-600: #1E9FD9;
  --color-accent: #FFDE59;
  --color-accent-600: #F2C82E;

  --color-navy: #061B3D;
  --color-navy-800: #0B2455;
  --color-ink: #0F1B2D;
  --color-body: #3D4A5C;
  --color-muted: #66748A;
  --color-line: #E4E9F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F8FD;

  /* Degradado de marca (hero, tarjetas destacadas) */
  --gradient-brand: linear-gradient(160deg, #0057E6 0%, #1C7CF2 45%, #39BBF4 100%);
  --gradient-brand-soft: linear-gradient(180deg, #EAF3FF 0%, #FFFFFF 100%);

  /* Escala cromática continua: el fondo de la página "desciende"
     del azul intenso del hero hasta el azul marino del footer,
     pasando por blancos azulados y un azul medio en las transiciones. */
  --wash-1: #EAF3FF; /* justo bajo el hero */
  --wash-2: #F4F9FF; /* blanco azulado de descanso */
  --wash-3: #EAF2FC; /* servicios */
  --wash-4: #DCEAFB; /* proceso — empieza a introducir azul medio */
  --wash-mid: #2E6FE0; /* azul medio de transición hacia testimonios */
  --wash-close: #C9DCF5; /* tono previo al cierre en azul marino */

  /* Tipografía: familia única con fallback de sistema */
  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* Espaciado */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 2px 8px rgba(6, 27, 61, 0.06);
  --shadow-md: 0 12px 32px rgba(6, 27, 61, 0.10);
  --shadow-lg: 0 24px 60px rgba(6, 27, 61, 0.16);
  --shadow-brand: 0 16px 40px rgba(0, 102, 255, 0.28);

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 260ms;

  --header-height: 76px;
}