/* ── Diagnóstico Hero ── */
.diag-hero { padding-top: calc(var(--header-height) + var(--space-16)); }

.diag-hero__benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-10);
}

.diag-hero__card {
    padding: var(--space-6) !important;
    text-align: center;
}

.diag-hero__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-3);
}

.diag-hero__card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.diag-hero__card p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.diag-hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    margin-top: var(--space-10);
}

.diag-hero__stat {
    text-align: center;
}

.diag-hero__stat strong {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.diag-hero__stat span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .diag-hero__benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .diag-hero__benefits { grid-template-columns: 1fr; }
    .diag-hero__stats { flex-direction: column; gap: var(--space-4); }
}

/* ── Diagnóstico Page ── */
.diag-page { padding-top: var(--space-8); }
.diag-wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8); align-items: start; }

/* Sidebar */
.diag-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-8)); padding: var(--space-6) !important; }
.diag-sidebar h4 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.diag-sidebar > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.diag-steps-nav { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.diag-step-indicator {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-sm); color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.diag-step-indicator span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    transition: all var(--transition-fast);
}
.diag-step-indicator.is-active { color: var(--color-primary); }
.diag-step-indicator.is-active span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.diag-step-indicator.is-done span { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary); }
.diag-progress { height: 4px; background: var(--color-bg-secondary); border-radius: var(--radius-full); }
.diag-progress__bar { height: 100%; background: var(--color-primary-gradient); border-radius: var(--radius-full); transition: width var(--transition-slow); }

/* Main */
.diag-step h2 { margin-bottom: var(--space-4); }
.diag-step-intro { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: var(--space-2); max-width: 600px; }
.diag-step-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); }
.diag-questions { display: flex; flex-direction: column; gap: var(--space-6); }
.diag-question label { display: block; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.diag-question.is-warning { animation: shake 0.4s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.diag-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.diag-option {
    padding: var(--space-3) var(--space-5);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm); color: var(--color-text-secondary);
    transition: all var(--transition-fast); cursor: pointer;
}
.diag-option:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }
.diag-option.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.diag-nav { display: flex; justify-content: space-between; margin-top: var(--space-8); gap: var(--space-4); }

/* ── Lead Form (Step 0) ── */
.diag-lead-form { display: flex; flex-direction: column; gap: var(--space-5); }

.diag-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.diag-form-field { display: flex; flex-direction: column; }

.diag-form-field label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
}

.diag-form-field input,
.diag-form-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.diag-form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 36px;
}

.diag-form-field input::placeholder { color: var(--color-text-muted); opacity: 0.6; }

.diag-form-field input:focus,
.diag-form-field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(253, 98, 99, 0.12);
}

/* Input error state */
.diag-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
    animation: shake 0.4s ease;
}

/* Lead warning message */
.diag-lead-warning {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-size: var(--text-sm);
    text-align: center;
    animation: fade-in 0.3s ease;
}

@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Result ── */
.diag-result { text-align: left; }

.diag-result__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.diag-result__ring {
    width: 140px; height: 140px; min-width: 140px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--color-bg-secondary);
    position: relative;
}
.diag-result__ring::after {
    content: ''; position: absolute;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--color-bg-primary);
}
.diag-result__score { font-size: var(--text-3xl); font-weight: var(--font-extrabold); color: var(--color-text-primary); position: relative; z-index: 1; }
.diag-result__total { font-size: var(--text-sm); color: var(--color-text-muted); position: relative; z-index: 1; }

.diag-result__info h2 { margin-bottom: var(--space-2); }
.diag-result__info p { font-size: var(--text-base); color: var(--color-text-secondary); max-width: 500px; }

/* Opportunity box */
.diag-result__opportunity {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}
.diag-result__opp-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.diag-result__opp-value { font-size: var(--text-3xl); font-weight: var(--font-extrabold); color: var(--color-primary); }
.diag-result__opp-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Pillar bars */
.diag-result__bars { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.diag-bar__label { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.diag-bar__track { height: 8px; background: var(--color-bg-secondary); border-radius: var(--radius-full); }
.diag-bar__fill { height: 100%; border-radius: var(--radius-full); transition: width 1s ease; }

/* Recommendations */
.diag-result__recs-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.diag-result__recs { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.diag-rec-item {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}
.diag-rec-item strong { font-size: var(--text-sm); display: block; margin-bottom: var(--space-1); }
.diag-rec-item p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .diag-wrapper { grid-template-columns: 1fr; }
    .diag-sidebar { position: static; }
    .diag-options { flex-direction: column; }
    .diag-form-row { grid-template-columns: 1fr; }
    .diag-result__header { flex-direction: column; text-align: center; }
    .diag-result__info { text-align: center; }
    .diag-result__info p { margin: 0 auto; }
}