/* ===============================
   ESTILOS GLOBALES - FUNDACIÓN AI-KOI
   =============================== */

/* Reset y configuración base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-color);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===============================
   VARIABLES CSS - ESQUEMA PROFESIONAL
   =============================== */
:root {
    /* Colores principales - Verde profesional */
    --primary-color: #2d6a4f;        /* Verde profesional más oscuro */
    --primary-light: #52b788;        /* Verde claro para acentos */
    --primary-dark: #1b4332;         /* Verde muy oscuro */
    --primary-darker: #14342b;       /* Verde más oscuro para hover */
    --primary-accent: #40916c;       /* Verde medio para hover */
    
    /* Colores secundarios - Escala de grises profesional */
    --secondary-color: #2c3e50;      /* Azul grisáceo oscuro */
    --dark-color: #1a1a1a;           /* Negro casi puro */
    --charcoal: #2d3436;             /* Carbón oscuro */
    --slate: #34495e;                /* Pizarra */
    
    /* Escala de grises refinada */
    --gray-50: #f8f9fa;              /* Casi blanco */
    --gray-100: #f1f3f4;             /* Gris muy claro */
    --gray-200: #e9ecef;             /* Gris claro */
    --gray-300: #ddd;                /* Gris medio-claro */
    --gray-400: #ced4da;             /* Gris medio */
    --gray-500: #adb5bd;             /* Gris neutro */
    --gray-600: #6c757d;             /* Gris medio-oscuro */
    --gray-700: #495057;             /* Gris oscuro */
    --gray-800: #343a40;             /* Gris muy oscuro */
    --gray-900: #212529;             /* Casi negro */
    
    /* Colores de estado */
    --success-color: #27ae60;        /* Verde éxito */
    --info-color: #3498db;           /* Azul información */
    --warning-color: #f39c12;        /* Naranja advertencia */
    --danger-color: #e74c3c;         /* Rojo peligro */
    
    /* Colores base - Esquema profesional */
    --white: #ffffff;
    --light-color: #f8f9fa;
    --background-color: #f5f7fa;     /* Fondo principal gris claro */
    --background-dark: #2c3e50;      /* Fondo oscuro profesional */
    --background-darker: #1a252f;    /* Fondo muy oscuro */
    --surface-color: #ffffff;        /* Superficie de tarjetas */
    --surface-dark: #34495e;         /* Superficie oscura */
    --border-color: #e1e8ed;         /* Color de bordes */
    --border-dark: #4a5568;          /* Color de bordes oscuro */
    
    /* Colores de texto */
    --text-primary: #1a1a1a;         /* Texto principal */
    --text-secondary: #4a5568;       /* Texto secundario */
    --text-muted: #718096;           /* Texto apagado */
    --text-light: #a0aec0;           /* Texto claro */
    
    /* Tipografía */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-xxxl: 2rem;
    
    /* Bordes y radius */
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-pill: 50px;
    
    /* Sombras profesionales */
    --shadow-sm: 0 2px 4px rgba(26, 26, 26, 0.08);
    --shadow: 0 4px 12px rgba(26, 26, 26, 0.12);
    --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.15);
    --shadow-xl: 0 12px 40px rgba(26, 26, 26, 0.18);
    
        /* Transiciones suaves */
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }