/* GRABA IMAGEN — Variables CSS Globales */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Montserrat:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-primary:       #0A2463;
  --color-primary-dark:  #061539;
  --color-primary-mid:   #1B4FD8;
  --color-primary-light: #3A7BD5;
  --color-accent:        #00C2FF;
  --color-accent-glow:   rgba(0,194,255,0.25);
  --color-white:         #FFFFFF;
  --color-off-white:     #F4F8FF;
  --color-gray-light:    #E8EFF9;
  --color-gray-mid:      #8FA3C0;
  --color-gray-dark:     #2D3A4F;
  --color-metal-silver:  #B8C5D6;
  --color-metal-gold:    #C9A84C;
  --color-metal-bronze:  #8C6239;
  --color-success:       #00D084;
  --color-warning:       #FFB300;
  --color-danger:        #E53935;
  --font-display:  'Barlow Condensed', sans-serif;
  --font-heading:  'Montserrat', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
  --radius-sm:    6px;
  --radius-md:    14px;
  --radius-lg:    28px;
  --radius-pill:  999px;
  --shadow-card:  0 4px 24px rgba(10,36,99,0.12);
  --shadow-hover: 0 12px 40px rgba(10,36,99,0.22);
  --shadow-glow:  0 0 40px rgba(0,194,255,0.35);
  --container-max: 1280px;
  --container-pad: clamp(16px,5vw,80px);
  --section-pad:   clamp(60px,8vw,120px);
  --transition-base:   0.3s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34,1.56,0.64,1);
  --z-header:  100;
  --z-dropdown: 200;
  --z-bubble:  9999;
}