/* ═══════════════════════════════════════════════════════════════════
   Diagnóstico SMART™ — estilos propios de /test/
   Reutiliza los tokens y componentes de styles.css (.btn, .qchip,
   .qfield, .quote__grid, .quote__stepnav, .kicker, .h-lead…) y solo
   define aquí lo que el diagnóstico necesita y no existe todavía:
   barra de progreso, escala Likert de 5 botones, radar SVG, riel de
   Estaciones, barras por eje, callouts de resultado y la tarjeta de
   captura de datos final.
   ═══════════════════════════════════════════════════════════════════ */

/* El nav es position:fixed (--nav-h): sin este colchón la tarjeta
   arranca pegada — o tapada — debajo de él, en cualquier pantalla del
   diagnóstico, no solo en la intro. Mismo ajuste que ya usa .hero. */
.diag-section { padding-block: calc(var(--nav-h) + var(--space-7)) clamp(var(--space-6), 6vw, var(--space-9)); }

.diag-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.diag-card h1 em,
.diag-card h1 .g { font-style: normal; color: var(--chispa-oro); }

/* El texto del hero NO va horneado en la imagen: a un ancho de tarjeta
   angosto (mobile) una imagen entera reescalada vuelve el texto horneado
   ilegible. Acá la imagen es solo el motivo (cápsulas + rayo) y el
   texto es HTML real superpuesto, con su propio tamaño responsive —
   siempre nítido, sin depender de la resolución del archivo. */
.diag-hero-wrap {
  position: relative;
  width: calc(100% + 2 * clamp(var(--space-5), 4vw, var(--space-7)));
  margin: calc(-1 * clamp(var(--space-5), 4vw, var(--space-7))) calc(-1 * clamp(var(--space-5), 4vw, var(--space-7))) var(--space-6);
}
.diag-hero {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.diag-hero-tag {
  position: absolute;
  left: 50%; top: 64%;
  transform: translate(-50%, -50%);
  width: 82%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #fff;
  font-size: clamp(10px, 2.3vw, 20px);
}
.diag-hero-tag span { color: var(--chispa-oro); }
@media (max-width: 620px) { .diag-hero-wrap, .diag-hero { border-radius: 0; } }

/* ── Progreso ─────────────────────────────────────────────────── */
.diag-progtxt {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-2);
}
.diag-prog {
  height: 6px;
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.diag-prog > div {
  height: 100%;
  background: linear-gradient(90deg, var(--azul), var(--chispa-verde));
  width: 0;
  transition: width 400ms var(--ease-out);
}

/* ── Encabezado de pantalla (pill de eje / etapa) ────────────────── */
.diag-qh { text-align: center; margin-bottom: var(--space-5); }
.diag-pill {
  display: inline-block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
}

/* ── Preguntas Likert ─────────────────────────────────────────── */
.diag-q { margin: var(--space-5) 0; }
.diag-q .diag-qt { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); line-height: 1.4; }
.diag-lik { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.diag-lik button {
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 11px;
  padding: var(--space-3) 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  cursor: pointer;
  line-height: 1.25;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.diag-lik button:hover { border-color: var(--azul); }
.diag-lik button.is-sel {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
  box-shadow: 0 6px 16px rgba(40, 122, 237, 0.28);
}

/* ── Contexto (selects) ──────────────────────────────────────── */
.diag-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-2); }
@media (max-width: 620px) { .diag-fields { grid-template-columns: 1fr; } }

/* ── Resultado: score + radar ────────────────────────────────── */
.diag-scorewrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-4);
}
.diag-bigscore {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
}
.diag-bigscore small { font-size: 20px; color: var(--ink-mute); font-weight: 700; }
.diag-bigscore-label {
  font-size: var(--text-xs);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 2px;
}
.diag-badgewrap { text-align: center; margin-bottom: var(--space-2); }
.diag-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
}

/* ── Riel de Estaciones (GPS) ─────────────────────────────────── */
.diag-gps { position: relative; margin: var(--space-7) 0 var(--space-3); padding-top: 34px; }
.diag-gps .diag-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #c8d2e6, var(--navy)); }
.diag-gps .diag-stations { display: flex; justify-content: space-between; margin-top: var(--space-2); }
.diag-gps .diag-stn { font-size: 10.5px; color: var(--ink-mute); text-align: center; width: 16%; font-weight: 700; }
.diag-pin { position: absolute; top: 0; transform: translateX(-50%); text-align: center; transition: left 600ms var(--ease-out); }
.diag-pin .diag-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--chispa-oro); border: 3px solid var(--paper); box-shadow: var(--shadow-md); margin: 0 auto; }
.diag-pin .diag-lbl { font-size: 10px; font-weight: 800; color: var(--navy); background: var(--chispa-oro); padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; white-space: nowrap; display: inline-block; }

/* ── Secciones de resultado ───────────────────────────────────── */
.diag-sec { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.diag-sec h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }

.diag-callout { border-radius: var(--radius); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); line-height: 1.6; }
.diag-callout b { font-weight: 800; }
.diag-callout--red   { background: #fdecea; border: 1px solid var(--chispa-roja); color: #8a2318; }
.diag-callout--gold  { background: #fef6e6; border: 1px solid var(--chispa-oro); color: #7a5610; }
.diag-callout--blue  { background: var(--azul-soft); border: 1px solid var(--azul); color: #1c3f8f; }
.diag-callout--green { background: #e9f8ef; border: 1px solid var(--chispa-verde); color: #0f5f30; }

.diag-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 620px) { .diag-grid2 { grid-template-columns: 1fr; } }
.diag-tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.diag-tile h4 { font-family: var(--font-display); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.diag-tile p { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }

/* ── Barras por eje ───────────────────────────────────────────── */
.diag-ebars { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.diag-ebar { display: flex; align-items: center; gap: var(--space-3); }
.diag-ebar .diag-name { flex: 0 0 150px; font-size: 12.5px; font-weight: 700; }
.diag-ebar .diag-track { flex: 1; height: 12px; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.diag-ebar .diag-fill { height: 100%; border-radius: 8px; }
.diag-ebar .diag-val { flex: 0 0 34px; text-align: right; font-size: 12.5px; font-weight: 800; }
@media (max-width: 480px) { .diag-ebar .diag-name { flex-basis: 96px; } }

/* ── Roadmap 90 días ──────────────────────────────────────────── */
.diag-road { display: flex; flex-direction: column; gap: var(--space-3); }
.diag-ritem { display: flex; gap: var(--space-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.diag-ritem .diag-when { flex: 0 0 72px; font-weight: 800; font-size: var(--text-xs); color: var(--azul); text-transform: uppercase; letter-spacing: 0.04em; }
.diag-ritem .diag-what { font-size: 13.5px; color: var(--ink); line-height: 1.5; }

/* ── Captura de datos (lead) ──────────────────────────────────── */
.diag-lead { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); }
.diag-lead h3 { font-family: var(--font-display); color: #fff; font-size: var(--text-lg); }
.diag-lead .diag-sub2 { color: rgba(255,255,255,0.72); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-4); }
.diag-lead .diag-frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .diag-lead .diag-frow { grid-template-columns: 1fr; } }
.diag-lead input {
  border: none; border-radius: 10px; padding: var(--space-3); font: inherit; font-size: var(--text-sm); width: 100%;
}
.diag-lead input:focus { outline: 3px solid rgba(248,176,50,0.5); }
.diag-lead .diag-full { grid-column: 1 / -1; }
.diag-lead .diag-btn-gold {
  background: var(--chispa-oro); color: var(--navy); width: 100%; margin-top: var(--space-4);
  border: none; border-radius: 999px; padding: var(--space-4); font-weight: 800; font-size: var(--text-base);
  cursor: pointer; transition: filter 160ms var(--ease-out); font-family: inherit;
}
.diag-lead .diag-btn-gold:hover { filter: brightness(1.06); }
.diag-lead .diag-btn-gold:disabled { opacity: 0.6; cursor: not-allowed; }
.diag-lead .diag-micro { text-align: center; color: rgba(255,255,255,0.55); font-size: var(--text-xs); margin-top: var(--space-2); }
.diag-lead .diag-err { text-align: center; color: var(--chispa-oro); font-size: var(--text-sm); margin-top: var(--space-3); display: none; }

/* ── Cálculo (pantalla intermedia) ───────────────────────────── */
.diag-calc { text-align: center; padding: var(--space-8) var(--space-3); }
.diag-calc h1 { margin: var(--space-3) 0; }

/* ── Radar SVG ────────────────────────────────────────────────── */
.diag-radar { display: inline-block; }

@media (max-width: 620px) {
  .diag-lik { grid-template-columns: repeat(5, 1fr); }
  .diag-lik button { font-size: 10px; padding: var(--space-2) 2px; }
}