/* ============================================
   VARIABLES CSS - Paleta de Colores y Configuración
   ============================================ */

   @font-face {
    font-family: 'Open Sans';
    src: url('../assets/fonts/OpenSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

   @font-face {
    font-family: 'Open Sans';
    src: url('../assets/fonts/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Open Sans';
    src: url('../assets/fonts/OpenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

   :root {
    /* COLORES PRINCIPALES */
    --primary-color: #FF2F00;
    --secondary-color: #333333;
    --white: #FFFFFF;
    
    /* COLORES SECUNDARIOS */
    --gray-dark: #666666;
    --gray-light: #999999;
    --gray-lighter: #e4e4e4;
    --gray-bg: #f5f5f5;
    
    /* COLORES DE TEXTO */
    --text-color: #333333;
    --text-light: #666666;
    --text-lighter: #999999;
    
    /* TIPOGRAFÍA */
    --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    /* TAMAÑOS DE FUENTE - Responsive con clamp() */
    --font-size-h1: clamp(2rem, 3vw, 2.4rem);
    --font-size-h2: clamp(1.4rem, 2.4vw, 2rem);
    --font-size-h3: clamp(1.2rem, 2vw, 1.4rem);
    --font-size-body: clamp(0.8rem, 1.2vw, 1rem);
    --font-size-small: clamp(0.5rem, 1vw, 0.8rem);
    
    /* ESPACIADOS */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 3rem;      /* 48px */
    --spacing-xl: 5rem;      /* 80px */
    
    /* CONTENEDOR */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    
    /* TIMING DE ANIMACIONES */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* EASING FUNCTIONS */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* SOMBRAS */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Z-INDEX LAYERS */
    --z-header: 1000;
    --z-slider-controls: 100;
    --z-modal: 2000;
    --z-overlay: 10;
    
    /* HEADER */
    --header-height: 120px;
    --header-height-mobile: 80px;
    
    /* BORDER RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* RESPONSIVE OVERRIDES */
@media (max-width: 767px) {
    :root {
        --container-padding: 1rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
}