/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                    BOSS SOLUCIONES - DESIGN SYSTEM                         ║
 * ║                    Manual de Identidad Corporativa 2014                    ║
 * ║                    PANTONE 2955 C | #003C6F | Colores oficiales            ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 */

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

 :root {
   /* ═══════════════════════════════════════════════════════════════════════
      PALETA OFICIAL - Manual de Identidad Corporativa BOSS 2014
      PANTONE 2955 C (principal) | 186 C (acento) | 369 C (verde)
      ═══════════════════════════════════════════════════════════════════════ */
   
   /* Colores corporativos oficiales */
   --logo-blue-dark: #003C6F;      /* PANTONE 2955 C - BOSS, azul principal */
   --logo-blue-medium: #557198;    /* PANTONE 2955 C 70% - SOLUCIONES */
   --logo-blue-light: #8398B7;     /* PANTONE 2955 C 50% */
   --logo-blue-pale: #B5C0D4;      /* PANTONE 2955 C 30% */
   --accent-gold: #F9BD27;         /* PANTONE 186 C - acento */
   --accent-green: #4CA702;        /* PANTONE 369 C */
   
   /* Fondos - derivados del azul corporativo */
   --bg-dark: #003C6F;
   --bg-dark-rgb: 0, 60, 111;
   --bg-dark-elevated: #557198;
   --bg-dark-elevated-rgb: 85, 113, 152;
   --bg-card: #003C6F;
   --bg-card-rgb: 0, 60, 111;
   --surface: #003C6F;             /* Color corporativo principal */
   --surface-rgb: 0, 60, 111;
   --surface-hover: #557198;
   
   /* Colores Primarios - Manual de Identidad */
   --primary: #003C6F;
   --primary-rgb: 0, 60, 111;
   --primary-light: #557198;
   --primary-light-rgb: 85, 113, 152;
   --primary-dark: #003C6F;
   --primary-dark-rgb: 0, 60, 111;
   --primary-glow: rgba(0, 60, 111, 0.5);
   
   /* Colores de Acento - paleta corporativa */
   --accent-cyan: #557198;
   --accent-cyan-rgb: 85, 113, 152;
   --accent-silver: #8398B7;
   --accent-silver-rgb: 131, 152, 183;
   --accent-pale: #B5C0D4;
   --accent-pale-rgb: 181, 192, 212;
   --accent-green-rgb: 76, 167, 2;
   
   /* Gradientes - paleta oficial (institucionales sólidos, sin difuminado a tonos claros) */
   --gradient-primary: linear-gradient(135deg, #003C6F 0%, #002553 100%);
   --gradient-hero: linear-gradient(135deg, #003C6F 0%, #002553 100%);
   --gradient-cool: linear-gradient(135deg, #557198 0%, #003C6F 100%);
   --gradient-warm: linear-gradient(135deg, #003C6F 0%, #557198 100%);
   --gradient-text: linear-gradient(135deg, #ffffff 0%, #B5C0D4 50%, #557198 100%);
   --gradient-border: linear-gradient(135deg, #003C6F, #557198, #8398B7, #B5C0D4);
   
   /* Texto - tonos corporativos */
   --text: #ffffff;
   --text-rgb: 255, 255, 255;
   --text-secondary: #B5C0D4;
   --text-muted: #8398B7;
   --text-muted-rgb: 131, 152, 183;
   --text-dim: #557198;
   --text-dim-rgb: 85, 113, 152;
   
   /* Bordes - azules corporativos */
   --border: rgba(0, 60, 111, 0.3);
   --border-light: rgba(85, 113, 152, 0.2);
   --border-glow: rgba(0, 60, 111, 0.5);
   
   /* Estados */
   --success: #4CA702;
   --success-rgb: 76, 167, 2;
   --warning: #F9BD27;
   --warning-rgb: 249, 189, 39;
   --error: #003C6F;
   --error-rgb: 0, 60, 111;
   --info: #557198;
   --info-rgb: 85, 113, 152;
   
   /* ═══════════════════════════════════════════════════════════════════════
      TIPOGRAFÍA
      ═══════════════════════════════════════════════════════════════════════ */
   --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --font-display: 'Space Grotesk', 'Inter', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   
   /* Tamaños de texto */
   --text-xs: 0.75rem;      /* 12px */
   --text-sm: 0.875rem;     /* 14px */
   --text-base: 1rem;       /* 16px */
   --text-lg: 1.125rem;     /* 18px */
   --text-xl: 1.25rem;      /* 20px */
   --text-2xl: 1.5rem;      /* 24px */
   --text-3xl: 1.875rem;    /* 30px */
   --text-4xl: 2.25rem;     /* 36px */
   --text-5xl: 3rem;        /* 48px */
   --text-6xl: 3.75rem;     /* 60px */
   --text-7xl: 4.5rem;      /* 72px */
   --text-8xl: 6rem;        /* 96px */
   --text-9xl: 8rem;        /* 128px */
   
   /* Line height */
   --leading-none: 1;
   --leading-tight: 1.1;
   --leading-snug: 1.3;
   --leading-normal: 1.5;
   --leading-relaxed: 1.7;
   --leading-loose: 2;
   
   /* Letter spacing */
   --tracking-tighter: -0.05em;
   --tracking-tight: -0.025em;
   --tracking-normal: 0;
   --tracking-wide: 0.025em;
   --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;
   
   /* ═══════════════════════════════════════════════════════════════════════
      ESPACIADO
      ═══════════════════════════════════════════════════════════════════════ */
   --space-0: 0;
   --space-1: 0.25rem;      /* 4px */
   --space-2: 0.5rem;       /* 8px */
   --space-3: 0.75rem;      /* 12px */
   --space-4: 1rem;         /* 16px */
   --space-5: 1.25rem;      /* 20px */
   --space-6: 1.5rem;       /* 24px */
   --space-8: 2rem;         /* 32px */
   --space-10: 2.5rem;      /* 40px */
   --space-12: 3rem;        /* 48px */
   --space-16: 4rem;        /* 64px */
   --space-20: 5rem;        /* 80px */
   --space-24: 6rem;        /* 96px */
   --space-32: 8rem;        /* 128px */
   --space-40: 10rem;       /* 160px */
   --space-48: 12rem;       /* 192px */
   --space-56: 14rem;       /* 224px */
   --space-64: 16rem;       /* 256px */
   
   /* Layout */
   --section-padding-y: 7rem;
   --section-padding-y-sm: 4rem;
   --container-max: 1280px;
   --container-max-lg: 1440px;
   --container-gutter: 1.5rem;
   --container-gutter-lg: 2rem;
   
   /* ═══════════════════════════════════════════════════════════════════════
      BORDES Y SOMBRAS
      ═══════════════════════════════════════════════════════════════════════ */
   --radius-none: 0;
   --radius-sm: 0.375rem;   /* 6px */
   --radius: 0.5rem;        /* 8px */
   --radius-md: 0.625rem;   /* 10px */
   --radius-lg: 0.75rem;    /* 12px */
   --radius-xl: 1rem;       /* 16px */
   --radius-2xl: 1.25rem;   /* 20px */
   --radius-3xl: 1.5rem;    /* 24px */
   --radius-full: 9999px;
   
   /* Sombras */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
   
   /* Sombras con Glow - paleta corporativa */
   --shadow-glow-sm: 0 0 20px rgba(0, 60, 111, 0.4);
   --shadow-glow: 0 0 40px rgba(0, 60, 111, 0.5);
   --shadow-glow-lg: 0 0 60px rgba(0, 60, 111, 0.6);
   --shadow-glow-xl: 0 0 80px rgba(0, 60, 111, 0.7);
   
   /* Sombras de color - paleta oficial */
   --shadow-primary: 0 0 40px rgba(0, 60, 111, 0.5);
   --shadow-medium: 0 0 40px rgba(85, 113, 152, 0.4);
   --shadow-light: 0 0 40px rgba(181, 192, 212, 0.3);
   
   /* ═══════════════════════════════════════════════════════════════════════
      ANIMACIONES Y TRANSICIONES
      ═══════════════════════════════════════════════════════════════════════ */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);
   
   /* Easing functions */
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
   
   /* Durations */
   --duration-instant: 100ms;
   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --duration-slower: 700ms;
   --duration-slowest: 1000ms;
   
   /* ═══════════════════════════════════════════════════════════════════════
      EFECTOS ESPECIALES
      ═══════════════════════════════════════════════════════════════════════ */
   --blur-sm: 4px;
   --blur: 8px;
   --blur-md: 12px;
   --blur-lg: 16px;
   --blur-xl: 24px;
   --blur-2xl: 40px;
   --blur-3xl: 64px;
   
   /* Glassmorphism */
   --glass-bg: rgba(0, 60, 111, 0.82);
   --glass-border: rgba(255, 255, 255, 0.08);
   --glass-blur: 20px;
   
   /* Backdrop */
   --backdrop-bg: rgba(0, 60, 111, 0.88);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
    REDUCED MOTION - ACCESIBILIDAD
    ═══════════════════════════════════════════════════════════════════════════ */
 @media (prefers-reduced-motion: reduce) {
   :root {
     --transition-fast: 0ms;
     --transition: 0ms;
     --transition-slow: 0ms;
     --transition-slower: 0ms;
     --duration-instant: 0ms;
     --duration-fast: 0ms;
     --duration-normal: 0ms;
     --duration-slow: 0ms;
     --duration-slower: 0ms;
     --duration-slowest: 0ms;
   }
   
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
    RESPONSIVE VARIABLES
    ═══════════════════════════════════════════════════════════════════════════ */
 @media (min-width: 640px) {
   :root {
     --container-gutter: 1.5rem;
   }
 }
 
 @media (min-width: 768px) {
   :root {
     --section-padding-y: 6rem;
     --text-4xl: 2.5rem;
     --text-5xl: 3.25rem;
     --text-6xl: 4rem;
   }
 }
 
 @media (min-width: 1024px) {
   :root {
     --container-gutter: 2rem;
     --section-padding-y: 7rem;
   }
 }
 
 @media (min-width: 1280px) {
   :root {
     --container-gutter-lg: 2.5rem;
   }
 }
 
 @media (max-width: 767px) {
   :root {
     --section-padding-y: 4rem;
     --text-4xl: 1.875rem;
     --text-5xl: 2.25rem;
     --text-6xl: 3rem;
     --text-7xl: 3.75rem;
   }
 }

 /* ─── Sitio público: utilidades Bootstrap alineadas al manual de color BOSS ─── */
 body .text-muted {
   color: var(--logo-blue-light) !important;
 }
 body .bg-light {
   background-color: rgba(181, 192, 212, 0.35) !important;
 }
 body .border-light {
   border-color: var(--logo-blue-pale) !important;
 }
 body .text-warning {
   color: var(--accent-gold) !important;
 }
 body .text-success {
   color: var(--accent-green) !important;
 }
 body .btn-outline-primary {
   color: var(--logo-blue-dark) !important;
   border-color: var(--logo-blue-dark) !important;
 }
 body .btn-outline-primary:hover,
 body .btn-outline-primary:focus {
   background-color: var(--logo-blue-dark) !important;
   border-color: var(--logo-blue-dark) !important;
   color: #ffffff !important;
 }
 body .badge.bg-primary {
   background-color: var(--logo-blue-dark) !important;
 }
 body .text-danger {
   color: var(--logo-blue-dark) !important;
 }
 body .alert-danger {
   --bs-alert-color: var(--logo-blue-dark);
   --bs-alert-bg: rgba(0, 60, 111, 0.08);
   --bs-alert-border-color: var(--logo-blue-pale);
 }
 body .alert-warning {
   --bs-alert-color: #003C6F;
   --bs-alert-bg: rgba(249, 189, 39, 0.2);
   --bs-alert-border-color: #F9BD27;
 }