/* ===========================================================================
   Emekíng Studio: identidad institucional — azul #2F5590 sobre base clara
   ========================================================================== */

:root {
  --bg-primary: #f4f6f9;
  --bg-secondary: #ffffff;
  --bg-tint: #e9f1f8;
  --surface: #ffffff;
  --surface-2: #e6ecf3;
  --surface-3: #d7e2ee;
  --border: rgba(31, 58, 82, 0.14);
  --border-strong: rgba(31, 58, 82, 0.26);
  --divider-accent: rgba(21, 161, 219, 0.45);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-dark: rgba(15, 27, 46, 0.55);
  --glass-border: rgba(47, 85, 144, 0.18);
  --glass-border-light: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(16px);
  --glass-blur-strong: blur(22px);
  --glass-shadow-sm: 0 10px 28px -12px rgba(20, 38, 61, 0.16), inset 0 1px 0 var(--glass-highlight);
  --glass-shadow-md: 0 20px 48px -16px rgba(20, 38, 61, 0.2), inset 0 1px 0 var(--glass-highlight);
  --glass-shadow-dark: 0 20px 48px -16px rgba(2, 6, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --text-primary: #14263d;
  --text-secondary: #5c6d82;
  --text-muted: #8a93a0;
  --text-on-accent: #ffffff;

  /* Paleta institucional */
  --navy: #2f5590;
  --navy-deep: #0775b3;
  --blue-deep: #14263d;
  --blue-secondary: #2f5590;
  --accent: #2f5590;
  --accent-bright: #0775b3;
  --accent-celeste: #15a1db;
  --accent-soft: rgba(47, 85, 144, 0.1);

  --success: #2f5590;
  --error: #1b2733;

  --font-display: "Fredoka", "Baloo 2", "Segoe UI", Arial, sans-serif;
  --font-body: "Manrope", "Segoe UI", Arial, sans-serif;

  --fs-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --fs-sm: clamp(0.86rem, 0.83rem + 0.13vw, 0.93rem);
  --fs-base: clamp(1rem, 0.97rem + 0.12vw, 1.06rem);
  --fs-md: clamp(1.1rem, 1.04rem + 0.28vw, 1.24rem);
  --fs-lg: clamp(1.5rem, 1.35rem + 0.7vw, 1.9rem);
  --fs-xl: clamp(2rem, 1.7rem + 1.4vw, 2.8rem);
  --fs-2xl: clamp(2.75rem, 2rem + 3.2vw, 4.8rem);
  --fs-3xl: clamp(4rem, 2.8rem + 5vw, 7rem);
  --fs-4xl: clamp(3.75rem, 2.6rem + 5.6vw, 7.4rem);

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-normal: 1.65;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.09em;
  --tracking-wider: 0.16em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);
  --space-xl: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
  --space-2xl: clamp(4rem, 2.7rem + 5.5vw, 7.5rem);
  --space-3xl: clamp(5.5rem, 3.8rem + 7vw, 10rem);

  --section-py: clamp(5.5rem, 8.5vw, 9.5rem);
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 3vw, 4rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 8px 22px rgba(20, 38, 61, 0.09);
  --shadow-md: 0 16px 40px rgba(20, 38, 61, 0.11);
  --shadow-lg: 0 28px 70px rgba(20, 38, 61, 0.14);
  --shadow-glow: 0 0 0 1px rgba(47, 85, 144, 0.28), 0 14px 34px rgba(47, 85, 144, 0.18);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 450ms;

  --z-header: 100;
  --z-floating: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}