/* Index page specific styles */
:root {
    --color-primary: #5b21b6; /* Morado Intenso */
    --color-primary-light: #ede9fe;
    --color-accent: #10b981; /* Verde Esmeralda */
    --color-accent-hover: #059669;
    --color-inactive: #94a3b8;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-bg {
    background-color: #f5f3ff;
}

.cta-button {
    transition: all 0.3s ease;
    background-color: var(--color-accent);
}

.cta-button:hover {
    transform: translateY(-2px);
    background-color: var(--color-accent-hover);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}

.secondary-cta {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.secondary-cta:hover {
    background-color: #e0d9f5;
}

.feature-card, .testimonial-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.feature-card:hover, .testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.pricing-card-recommended {
    border: 2px solid var(--color-primary);
}

.text-primary { 
    color: var(--color-primary); 
}

/* General Animation Styles */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in animation for steps */
@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-item {
    opacity: 0; /* Start hidden */
}

.step-item.animate {
    animation: slide-in-left 0.6s ease-out forwards;
}

/* Pricing Toggle Switch */
.pricing-toggle-active {
    background-color: var(--color-primary);
    color: white;
}