/* Paleta de colores moderna para el sector de seguros */
:root {
    /* Colores principales */
    --primary-blue: #2563EB;      /* Azul principal para confianza */
    --secondary-green: #059669;    /* Verde para ahorros/beneficios */
    --accent-orange: #EA580C;      /* Naranja para CTAs urgentes */
    
    /* Neutros */
    --neutral-gray-50: #F8FAFC;   /* Fondos claros */
    --neutral-gray-100: #F1F5F9;  /* Fondos alternativos */
    --neutral-gray-600: #475569;  /* Texto secundario */
    --neutral-gray-900: #0F172A;  /* Texto principal */
    --white: #FFFFFF;
    
    /* Estados */
    --error-red: #DC2626;
    --success-green: #16A34A;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, #1E40AF 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-green) 0%, #047857 100%);
}

/* Utilidades de color para Tailwind */
.text-primary-600 { color: var(--primary-blue) !important; }
.text-secondary-600 { color: var(--secondary-green) !important; }
.text-accent-600 { color: var(--accent-orange) !important; }
.text-neutral-600 { color: var(--neutral-gray-600) !important; }
.text-neutral-900 { color: var(--neutral-gray-900) !important; }

.bg-primary-600 { background-color: var(--primary-blue) !important; }
.bg-secondary-600 { background-color: var(--secondary-green) !important; }
.bg-accent-600 { background-color: var(--accent-orange) !important; }
.bg-neutral-50 { background-color: var(--neutral-gray-50) !important; }
.bg-neutral-100 { background-color: var(--neutral-gray-100) !important; }

.border-primary-600 { border-color: var(--primary-blue) !important; }
.border-secondary-600 { border-color: var(--secondary-green) !important; }

/* Hover states */
.hover\:bg-primary-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-secondary-700:hover { background-color: #047857 !important; }
.hover\:bg-accent-700:hover { background-color: #c2410c !important; }

.hover\:text-primary-600:hover { color: var(--primary-blue) !important; }
.hover\:text-primary-700:hover { color: #1d4ed8 !important; }

/* Focus states */
.focus\:ring-primary-300:focus { 
    --tw-ring-color: rgba(37, 99, 235, 0.3) !important; 
}

/* Animaciones de entrada */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slide-up {
    animation: slideUpFade 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Asegurar que los elementos sean visibles por defecto */
.feature-card, 
.testimonial-card, 
.seguro-card, 
.stat-item {
    opacity: 1;
    transform: translateY(0);
}

/* Solo aplicar estados ocultos cuando sea necesario */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}