/* ================= VARIABLES CORPORATIVAS XPRESS ================= */
:root {
  /* Colores Primarios */
  --xpress-orange: #F24C0D;
  --xpress-blue-dark: #001A72;
  --xpress-white: #FFFFFF;
  
  /* Colores Secundarios */
  --xpress-blue-medium: #123C8C;
  --xpress-gray-light: #F5F6FA;
  --xpress-gray-text: #6B6B6B;
  
  /* Colores Funcionales */
  --xpress-success: #28a745;
  --xpress-warning: #ffc107;
  --xpress-error: #dc3545;
  --xpress-info: #17a2b8;
  
  /* Gradientes modernos */
  --xpress-gradient-blue: linear-gradient(135deg, var(--xpress-blue-dark) 0%, var(--xpress-blue-medium) 100%);
  --xpress-gradient-orange: linear-gradient(135deg, var(--xpress-orange) 0%, #ff7e42 100%);
  
  /* Tipografía */
  --xpress-font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --xpress-font-body: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Espaciado */
  --xpress-spacing-xs: 0.25rem;
  --xpress-spacing-sm: 0.5rem;
  --xpress-spacing-md: 1rem;
  --xpress-spacing-lg: 1.5rem;
  --xpress-spacing-xl: 2rem;
  
  /* Bordes curvos modernos */
  --xpress-border-radius: 12px;
  --xpress-border-radius-lg: 20px;
  --xpress-border-radius-xl: 30px;
  
  /* Sombras modernas */
  --xpress-shadow-sm: 0 4px 12px rgba(0, 26, 114, 0.08);
  --xpress-shadow-md: 0 8px 24px rgba(0, 26, 114, 0.12);
  --xpress-shadow-lg: 0 12px 36px rgba(0, 26, 114, 0.18);
  
  /* Transiciones suaves */
  --xpress-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ================= ESTILOS GENERALES ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--xpress-font-body);
  color: var(--xpress-blue-dark);
  line-height: 1.6;
  background-color: var(--xpress-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--xpress-font-heading);
  font-weight: 700;
  color: var(--xpress-blue-dark);
  margin-bottom: var(--xpress-spacing-md);
}

a {
  color: var(--xpress-orange);
  text-decoration: none;
  transition: var(--xpress-transition);
}

a:hover {
  color: var(--xpress-blue-medium);
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--xpress-gray-light);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--xpress-blue-medium);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--xpress-blue-dark);
}