/* ==========================================
   VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================== */

   :root {
    /* COLORES PRINCIPALES */
    --color-primary: #1b6b3c;
    --color-primary-dark: #144c2c;
    --color-primary-light: #2d8e5a;
    --color-accent: #ff8c00;
    --color-accent-dark: #e67e00;
  
    /* COLORES NEUTRALES */
    --color-white: #ffffff;
    --color-light-gray: #f5f5f5;
    --color-gray: #999999;
    --color-dark-gray: #333333;
    --color-black: #000000;
  
    /* ESPACIADO */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
  
    /* TIPOGRAFÍA */
    --font-family-primary: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-family-display: "Playfair Display", Georgia, serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
  
    /* TRANSICIONES */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-elastic: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
    /* SOMBRAS */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
    /* BORDER RADIUS */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
  
    /* BREAKPOINTS */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
  }
  
  /* RESET Y ESTILOS BASE */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: var(--font-family-primary);
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-normal);
  }
  
  button {
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  
  /* CONTENEDOR */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
  }
  
  @media (max-width: 768px) {
    .container {
      padding: 0 var(--spacing-md);
    }
  }