/* =========================================================================
   Diagnóstico con IA de los tests (Checklist Identity® e Impulse®).
   Se inserta en la pantalla de resultado. Usa los tokens del tema.
   ========================================================================= */

.diag-ai {
	margin-top: clamp(2rem, 5vw, 3rem);
	background: linear-gradient(160deg, #0c100e, var(--surface));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	animation: diag-in .5s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}
@keyframes diag-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.diag-ai__kicker {
	display: inline-block;
	font: 600 .68rem/1 var(--font-mono, monospace);
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent-ink, #04120B); background: var(--accent, #14F195);
	border-radius: var(--radius-pill, 999px); padding: .38rem .8rem; margin: 0 0 1.1rem;
}

/* Loader */
.diag-ai__loader { display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.diag-ai__loader p { margin: 0; font-size: .95rem; }
.diag-ai__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: diag-bounce 1.2s infinite ease-in-out both; }
.diag-ai__dot:nth-child(2) { animation-delay: .16s; }
.diag-ai__dot:nth-child(3) { animation-delay: .32s; }
@keyframes diag-bounce { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.diag-ai__title { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6rem; color: var(--ink); }
.diag-ai__diag { color: var(--ink); font-size: var(--fs-lg, 1.1rem); line-height: 1.55; margin: 0 0 1.6rem; }

.diag-ai__lab { font: 600 .7rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 1.6rem 0 .8rem; }

/* Fortalezas */
.diag-ai__str { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.diag-ai__str li { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink); line-height: 1.5; }
.diag-ai__str li::before { content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--accent); color: var(--accent-ink, #04120B); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Brechas */
.diag-ai__gaps { display: grid; gap: .8rem; }
.diag-ai__gap { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius, 14px); padding: 1rem 1.2rem; }
.diag-ai__gap strong { display: block; margin-bottom: .3rem; font-size: 1.02rem; }
.diag-ai__gap p { margin: 0 0 .35rem; color: var(--muted); line-height: 1.5; font-size: .94rem; }
.diag-ai__fix { color: var(--ink) !important; font-size: .92rem !important; }
.diag-ai__fix em { color: var(--accent); font-style: normal; font-weight: 600; }

/* Siguiente paso */
.diag-ai__next { margin-top: 1.6rem; background: var(--accent-dim, rgba(20,241,149,.12)); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 1.2rem 1.4rem; }
.diag-ai__next span { display: block; font: 600 .7rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; }
.diag-ai__next p { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.5; font-weight: 500; }

/* Servicios */
.diag-ai__svc { display: flex; flex-wrap: wrap; gap: .5rem; }
.diag-ai__svc span { font: 600 .8rem/1 var(--font-sans, sans-serif); color: var(--accent); background: var(--accent-dim, rgba(20,241,149,.12)); border: 1px solid var(--accent); border-radius: var(--radius-pill, 999px); padding: .5rem .9rem; }

/* CTAs */
.diag-ai__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.diag-ai__ctas .btn { flex: 1; min-width: 200px; }

@media (max-width: 560px) {
	.diag-ai__ctas .btn { flex: 1 1 100%; }
}