/* ========================================
   VARIABLES CSS - FUN JUNGLE PARKS
   ======================================== */

:root {
    /* ===== COLORES PRINCIPALES ===== */
    --jungle-pink: #FF0164;          /* Rosa intenso del logo */
    --jungle-cyan: #4FDDE4;          /* Cyan/Turquesa del logo */
    --jungle-yellow: #F3F300;        /* Amarillo */
    --jungle-purple: #4A0B8F;        /* Morado/Púrpura */
    --jungle-purple-bg: #6400C0;        /* Morado/Púrpura */
    --jungle-blue: #003B91;
    --jungle-blue-violet: #3703D9;
    --jungle-red: #3703D9;
    
    /* ===== COLORES SECUNDARIOS ===== */
    --jungle-dark: #2C2C2C;          /* Gris oscuro para textos */
    --jungle-gray: #6C6C6C;          /* Gris medio */
    --jungle-light-gray: #F5F5F5;    /* Gris claro para fondos */
    --jungle-white: #FFFFFF;         /* Blanco */
    
    /* ===== GRADIENTES ===== */
    --gradient-primary: linear-gradient(90deg, #FF0053 20%, #2D2BB1 100%);
    --gradient-secondary: linear-gradient(135deg, #8B008B 0%, #FF1493 100%);
    --gradient-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    --gradient-bg: linear-gradient(90deg, #4a0b8f 0%, #f2295b 100%);
    
    /* ===== TIPOGRAFÍA ===== */
    --font-primary: 'Poppins', 'Arial', sans-serif;
    --font-secondary: 'Roboto', 'Helvetica', sans-serif;
    
    --fs-h1: 4rem;         /* 64px */
    --fs-h2: 3rem;         /* 48px */
    --fs-h3: 2.25rem;      /* 36px */
    --fs-h4: 1.875rem;     /* 30px */
    --fs-h5: 1.5rem;       /* 24px */
    --fs-body-lg: 1.25rem; /* 20px */
    --fs-body: 1rem;       /* 16px */
    --fs-body-sm: 0.875rem;/* 14px */
    
    /* ===== ESPACIADO ===== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
    
    --section-padding: 80px 0;
    --container-padding: 0 20px;
    
    /* ===== CONTENEDORES ===== */
    --container-max-width: 1320px;
    --container-md: 960px;
    --container-sm: 720px;
    
    /* ===== BORDES Y RADIOS ===== */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-round: 50%;
    
    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);
    
    /* ===== TRANSICIONES ===== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;

    /* ===== TRANSFORM ===== */
    --t-jungle: skew(-15deg) rotate(-15deg);

    /* ===== OPACITY ===== */
    --o-opacity: 0.77;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* 
  xs: 0-575px    (móvil)
  sm: 576-767px  (móvil grande)
  md: 768-991px  (tablet)
  lg: 992-1199px (desktop)
  xl: 1200px+    (desktop grande)
*/

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap');