/* apps/darwin-capital/plan-elite/css/style.css */

/* Animación de glow para el hero y tarjetas */
@keyframes border-glow {
    0%, 100% {
        border-color: rgba(59, 130, 246, 0.2);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.05);
    }
    50% {
        border-color: rgba(245, 158, 11, 0.4);
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.15);
    }
}

.premium-glow-card {
    border: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.05);
    animation: border-glow 8s infinite ease-in-out;
}

/* Glassmorphism */
.glass-panel {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Transiciones de FAQ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-content {
    max-height: 500px;
    opacity: 1;
}

.faq-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
    color: #f59e0b; /* Amber accent */
}

/* Inputs de formulario estilizados */
.form-input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    color: white;
    font-size: 0.875rem;
    width: 100%;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.5); /* Amber focus */
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Pasos del formulario (si se hace multi-paso) */
.form-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-step.hidden {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

/* Estilo para los divisores con degradados */
.gradient-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0) 0%, rgba(245, 158, 11, 0.2) 50%, rgba(245, 158, 11, 0) 100%);
}

.gradient-divider-blue {
    height: 1px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.2) 50%, rgba(59, 130, 246, 0) 100%);
}