/* ============================================ */
        /* VIRGILIO DESIGN SYSTEM - ENTERPRISE GRADE  */
        /* ============================================ */
        
        :root {
            /* COLORES - Neutrales */
            --gray-50: #fafafa;
            --gray-100: #f5f5f5;
            --gray-200: #e5e5e5;
            --gray-300: #d4d4d4;
            --gray-400: #a3a3a3;
            --gray-500: #737373;
            --gray-600: #525252;
            --gray-700: #404040;
            --gray-800: #262626;
            --gray-900: #171717;
            
            /* COLORES - Acento Principal */
            --primary-50: #f0fdf4;
            --primary-100: #dcfce7;
            --primary-500: #34a853;
            --primary-600: #2AA048;
            --primary-700: #1E8038;
            
            /* COLORES - Funcionales */
            --blue-50: #eff6ff;
            --blue-500: #2AA048;
            --blue-600: #1E8038;
            --red-50: #fef2f2;
            --red-500: #ef4444;
            --red-600: #dc2626;
            --amber-50: #fffbeb;
            --amber-500: #f59e0b;
            --amber-600: #d97706;
            
            /* BACKGROUNDS */
            --bg-primary: #ffffff;
            --bg-secondary: #fafafa;
            --bg-tertiary: #f5f5f5;
            
            /* TIPOGRAFÍA */
            --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
            --text-xs: 12px;
            --text-sm: 14px;
            --text-base: 16px;
            --text-lg: 20px;
            --text-xl: 24px;
            --text-2xl: 32px;
            --text-3xl: 40px;
            
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            
            --leading-tight: 1.25;
            --leading-normal: 1.5;
            --leading-relaxed: 1.75;
            
            --tracking-tight: -0.02em;
            --tracking-normal: 0;
            
            /* ESPACIADO - Sistema modular 4px */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
            --space-12: 48px;
            --space-16: 64px;
            --space-20: 80px;
            
            /* BORDES */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            
            /* SOMBRAS */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            
            /* TRANSICIONES */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --yaya-green: #2AA048;
            --yaya-dark: #2AA048;
            --yaya-light: #E8F5E9;
        /* Neutrals Apple Style - AGREGADO */
        --gray-50: #FAFAFA;
        --gray-100: #F5F5F5;
        --gray-200: #E8E8E8;
        --gray-300: #D1D1D6;
        --gray-600: #8E8E93;
        --gray-800: #48484A;
        --gray-900: #1C1C1E;
        
        /* Shadows Apple Style - AGREGADO */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
        
        /* Spacing - AGREGADO */
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;

        }