/* ============================================================
   ENFOQUE COMERCIAL — Autodiagnóstico
   Usa el armado de Agendar (css/agendar.css): columna oscura,
   tarjeta, campos y chips. Acá va lo propio: progreso, preguntas
   y resultado.
   ============================================================ */

/* ---------- Columna oscura ---------- */
.ad-lead { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--ec-on-navy-dim); }
.ad-meta { margin-top: 24px; font-size: 13px; color: var(--ec-on-navy-faint); }
/* En pantallas chicas la columna se acorta para que el cuestionario quede cerca. */
@media (max-width: 959px) {
  .ad-aside .agenda__label, .ad-aside .agenda__list { display: none; }
  .ad-aside .ad-meta { margin-top: 16px; }
}

/* ---------- Progreso ---------- */
.ad-prog { padding: 22px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--ec-border); }
.ad-prog__fila {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ec-muted);
}
.ad-prog__area { color: var(--ec-blue); }
.ad-prog__bar { margin-top: 12px; height: 3px; border-radius: 2px; background: var(--ec-border); overflow: hidden; }
.ad-prog__bar span {
  display: block; height: 100%;
  background: var(--ec-blue);
  transform-origin: left; transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.ad-card.is-resultado .ad-prog { display: none; }

/* ---------- Inicio ---------- */
.ad-nota { margin-top: -12px; font-size: 15px; color: var(--ec-muted); }
.paso__nota.is-error { color: #B42318; }

/* ---------- Preguntas ---------- */
.ad-preg.is-entrando { animation: ecRise .45s var(--ease-out) both; }
.ad-preg__t { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.01em; }
.ad-opciones { margin-top: 22px; display: grid; gap: 10px; }
.ad-op {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 14px; align-items: start;
  width: 100%; padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--ec-border);
  background: var(--ec-white); color: var(--ec-ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.ad-op:hover { border-color: var(--ec-blue-soft); transform: translateY(-1px); }
.ad-op__k {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ec-card); color: var(--ec-navy);
  font-family: var(--fh); font-weight: 700; font-size: 13px;
  transition: background .2s, color .2s;
}
.ad-op > span:last-child { padding-top: 3px; }
.ad-op[aria-pressed="true"] { border-color: var(--ec-blue); background: #EAF3FA; }
.ad-op[aria-pressed="true"] .ad-op__k { background: var(--ec-blue); color: var(--ec-white); }

/* ---------- Datos ---------- */
.ad-listo { color: var(--ec-blue); }
.ad-datos__t { margin-top: 10px; line-height: 1.25; }
.ad-privado { margin-top: -8px; font-size: 12px; line-height: 1.5; color: var(--ec-muted); }

/* ---------- Resultado ---------- */
.ad-res { gap: 28px; }
.ad-res__top { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .ad-res__top { grid-template-columns: 220px minmax(0,1fr); align-items: start; }
}
.ad-res__score {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 12px;
  background: var(--ec-navy); color: var(--ec-white);
  animation: agPop .6s var(--ease-out) both;
}
.ad-res__label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ec-on-navy-faint); }
.ad-res__num { font-family: var(--fh); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.ad-res__num small { margin-left: 4px; font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--ec-on-navy-faint); }
.ad-res__bar { display: block; height: 6px; border-radius: 3px; background: var(--ec-navy-hair); overflow: hidden; }
.ad-res__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ec-blue-soft), var(--ec-blue));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.ad-res__txt { animation: ecRise .5s var(--ease-out) .15s both; }
.ad-res__nivel { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.ad-res__nivel[data-tono="bajo"] { color: var(--ec-blue); }
.ad-res__nivel[data-tono="moderado"] { color: #B54708; }
.ad-res__nivel[data-tono="alto"] { color: #B42318; }
.ad-res__titulo {
  margin-top: 8px;
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--ec-navy);
  outline: none;
}
.ad-res__txt p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ec-ink); }
.ad-res__cta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; animation: ecRise .5s var(--ease-out) .25s both; }

.ad-plan__label { margin-top: 0; color: var(--ec-muted); }
.ad-plan__lista { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ad-plan__item {
  display: grid; gap: 8px;
  padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--ec-border); background: var(--ec-white);
}
.ad-plan__area { font-family: var(--fh); font-weight: 700; font-size: 16px; color: var(--ec-navy); }
.ad-plan__fila { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ec-ink); }
.ad-plan__tag { padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-muted); }
.ad-plan__tag--meta { color: var(--ec-blue); }
.ad-plan__link { margin-top: 2px; font-size: 14px; font-weight: 600; }

.ad-areas { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ad-areas li {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 8px;
  background: var(--ec-card);
  font-size: 14px; color: var(--ec-ink);
}
.ad-areas__pts { font-size: 12px; font-weight: 700; }
.ad-areas__pts[data-pts="10"] { color: var(--ec-blue); }
.ad-areas__pts[data-pts="5"] { color: var(--ec-muted); }
.ad-areas__pts[data-pts="0"] { color: #B42318; }

@media (prefers-reduced-motion: reduce) {
  .ad-preg.is-entrando, .ad-res__score, .ad-res__txt, .ad-res__cta { animation: none; }
  .ad-res__bar span, .ad-prog__bar span { transition: none; }
}