/* 
   Proyecto X - Global Stylesheet
   Centralized styling for fonts, gradients and common UI elements.
*/

:root {
    --color-lime-100: #f7fee7;
    --color-lime-200: #d9f99d;
    --color-lime-500: #84cc16;
    --color-lime-600: #65a30d;
    --color-gray-50: #f9fafb;
    --color-gray-900: #111827;
}

body { 
    font-family: 'Inter', sans-serif; 
}

/* Typography Gradients */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #84cc16, #a3e635);
}

/* Background Gradients/Images */
.hero-bg {
    background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.95)), url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Transitions & Animations */
.transition-standard {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes slideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.6s ease-out forwards; }

/* Component Specific Styles */
.option-card { 
    transition: all 0.2s ease-in-out; 
}

.option-card:hover { 
    border-color: var(--color-lime-500); 
    background-color: var(--color-lime-100); 
}

.option-card.selected { 
    border-color: var(--color-lime-600); 
    background-color: var(--color-lime-200); 
    box-shadow: 0 4px 6px -1px rgba(132, 204, 22, 0.2); 
}
/* Wizard Steps */
.step-content { 
    display: none; 
}
.step-content.active { 
    display: block; 
    animation: fadeIn 0.5s ease-out; 
}