/* ==================================================================
   Angel Media — Diagnóstico de Crecimiento Digital
   INHERITS tokens.css + styles.css. No :root redeclaration (PATTERNS §1).
   Only tool-specific layout/components live here.
   ================================================================== */

.diag-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--am-space-9) var(--am-space-5) var(--am-space-10);
}

#diag-app { min-height: 60vh; scroll-margin-top: 110px; }

/* step enter animation (re-fires on each render) */
.diag-step { animation: diagIn var(--am-dur-slow) var(--am-ease) both; }
@keyframes diagIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .diag-step { animation: none; } }

/* ---- Intro ---------------------------------------------------- */
.diag-intro { text-align: center; }
.diag-title {
  font-family: var(--am-font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: var(--am-lead-tight);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
  margin: var(--am-space-3) 0 var(--am-space-5);
}
.diag-sub {
  max-width: 52ch;
  margin: 0 auto var(--am-space-7);
  font-family: var(--am-font-sans);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-relax);
  color: var(--am-fg-muted);
}

/* ---- Question ------------------------------------------------- */
.diag-progress {
  height: 4px;
  background: var(--am-negro-08);
  border-radius: var(--am-radius-pill);
  overflow: hidden;
  margin-bottom: var(--am-space-4);
}
.diag-progress span {
  display: block;
  height: 100%;
  background: var(--am-gradient-horiz);
  border-radius: var(--am-radius-pill);
  transition: width var(--am-dur) var(--am-ease);
}
.diag-count { margin: 0 0 var(--am-space-5); text-transform: uppercase; }
.diag-q {
  font-family: var(--am-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: var(--am-lead-snug);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
  margin: 0 0 var(--am-space-6);
}
.diag-opts { display: grid; gap: var(--am-space-3); }
.diag-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--am-font-sans);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-normal);
  color: var(--am-fg);
  background: var(--am-surface);
  border: 1.5px solid var(--am-border);
  border-radius: var(--am-radius-md);
  padding: var(--am-space-4) var(--am-space-5);
  cursor: pointer;
  transition: border-color var(--am-dur) var(--am-ease),
              box-shadow var(--am-dur) var(--am-ease),
              transform var(--am-dur-fast) var(--am-ease);
}
.diag-opt:hover { border-color: var(--am-border-coral); box-shadow: var(--am-shadow-md); }
.diag-opt:active { transform: scale(0.995); }
.diag-opt.is-selected {
  border-color: transparent;
  background: var(--am-gradient);
  color: #fff;
  box-shadow: var(--am-shadow-coral);
}
.diag-back {
  margin-top: var(--am-space-6);
  background: none; border: 0; cursor: pointer;
  color: var(--am-fg-muted); padding: var(--am-space-2) 0;
}
.diag-back:hover { color: var(--am-accent); }

/* ---- Result --------------------------------------------------- */
.diag-result { text-align: center; }
.diag-claim-lead {
  font-family: var(--am-font-sans);
  color: var(--am-fg-muted);
  font-size: var(--am-text-md);
  margin: var(--am-space-3) 0 0;
}
.diag-claim-lead.end { margin: 0 0 var(--am-space-5); }
.diag-claim {
  font-family: var(--am-font-display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  letter-spacing: var(--am-track-tight);
  margin: var(--am-space-2) 0;
  background: var(--am-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.diag-grade-row {
  display: inline-flex; align-items: center; gap: var(--am-space-3);
  margin: var(--am-space-2) 0 var(--am-space-5);
}
.diag-grade {
  font-family: var(--am-font-display);
  font-weight: 700;
  font-size: var(--am-text-3xl);
  line-height: 1;
  width: 1.4em; height: 1.4em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--am-radius-pill);
  border: 2px solid var(--am-fg);
  color: var(--am-fg);
}
.diag-grade-lbl { text-transform: uppercase; }
.diag-tagline {
  font-size: var(--am-text-lg);
  line-height: var(--am-lead-snug);
  max-width: 48ch; margin: 0 auto var(--am-space-6);
}
.diag-narrative {
  text-align: left;
  max-width: 60ch; margin: 0 auto;
  display: grid; gap: var(--am-space-4);
}
.diag-narrative p {
  font-family: var(--am-font-sans);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-relax);
  color: var(--am-fg);
}

/* grade color accents (sub-grades + main badge) */
.diag-g-A { color: #1F9D55; }
.diag-g-B { color: #2D7DD2; }
.diag-g-C { color: #C98A00; }
.diag-g-D { color: var(--am-accent-warm); }
.diag-g-F { color: #D6455C; }
.diag-grade.diag-g-A { border-color: #1F9D55; }
.diag-grade.diag-g-B { border-color: #2D7DD2; }
.diag-grade.diag-g-C { border-color: #C98A00; }
.diag-grade.diag-g-D { border-color: var(--am-accent-warm); }
.diag-grade.diag-g-F { border-color: #D6455C; }

/* caveat */
.diag-caveat {
  text-align: left;
  max-width: 60ch; margin: var(--am-space-6) auto 0;
  padding: var(--am-space-5);
  border-left: 3px solid var(--am-accent-warm);
  background: var(--am-coral-08);
  border-radius: var(--am-radius-sm);
  font-family: var(--am-font-sans);
  font-size: var(--am-text-base);
  line-height: var(--am-lead-relax);
  color: var(--am-fg);
}
.diag-caveat.soft { border-left-color: var(--am-border-coral); background: var(--am-rosa-08); }

/* breakdown + next */
.diag-h3 {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-bold);
  font-size: var(--am-text-lg);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
  margin: 0 0 var(--am-space-4);
}
.diag-breakdown, .diag-next { text-align: left; max-width: 60ch; margin: var(--am-space-8) auto 0; }
.diag-dims { list-style: none; margin: 0; padding: 0; }
.diag-dim {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--am-space-4) 0;
  border-bottom: 1px solid var(--am-border-soft);
}
.diag-dim:first-child { border-top: 1px solid var(--am-border-soft); }
.diag-dim-name { font-family: var(--am-font-sans); font-size: var(--am-text-md); color: var(--am-fg); }
.diag-dim-grade { font-family: var(--am-font-display); font-weight: 700; font-size: var(--am-text-xl); }
.diag-next-list {
  margin: 0; padding-left: 0; list-style: none;
  display: grid; gap: var(--am-space-4); counter-reset: nx;
}
.diag-next-list li {
  position: relative; padding-left: var(--am-space-7);
  font-family: var(--am-font-sans); font-size: var(--am-text-md);
  line-height: var(--am-lead-relax); color: var(--am-fg);
  counter-increment: nx;
}
.diag-next-list li::before {
  content: counter(nx);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: var(--am-radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--am-gradient); color: #fff;
  font-size: var(--am-text-sm); font-weight: var(--am-w-bold);
}

/* ---- Funnel --------------------------------------------------- */
.diag-funnel {
  margin: var(--am-space-9) auto 0;
  max-width: 60ch;
  background: var(--am-bg-dark);
  color: var(--am-fg-inverse);
  border-radius: var(--am-radius-xl);
  padding: var(--am-space-8) var(--am-space-7);
  text-align: left;
}
.diag-funnel-h {
  font-family: var(--am-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: var(--am-lead-snug);
  color: var(--am-fg-inverse);
  margin: 0 0 var(--am-space-4);
}
.diag-funnel-body {
  font-family: var(--am-font-sans);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-relax);
  color: rgba(247,244,239,0.82);
  margin: 0 0 var(--am-space-6);
}
.diag-funnel .am-btn-primary,
.diag-book { width: 100%; justify-content: center; }

/* ---- Contact gate (sits on the light body, like the questions) ---- */
.diag-contact-sub {
  font-family: var(--am-font-sans);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-relax);
  color: var(--am-fg-muted);
  margin: 0 0 var(--am-space-6);
}
.diag-fields { display: grid; gap: var(--am-space-2); margin-bottom: var(--am-space-5); }
.diag-fields .am-field-lbl { display: block; margin-top: var(--am-space-3); margin-bottom: var(--am-space-1); font-size: var(--am-text-sm); color: var(--am-fg-muted); }
.diag-fields .am-field input { width: 100%; }

.diag-opts-in { display: grid; gap: var(--am-space-3); margin: 0 0 var(--am-space-5); }
.diag-check {
  display: flex; gap: var(--am-space-3); align-items: flex-start;
  cursor: pointer;
  font-family: var(--am-font-sans);
  font-size: var(--am-text-base);
  line-height: var(--am-lead-normal);
  color: var(--am-fg);
}
.diag-check input {
  margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--am-accent); cursor: pointer;
}
.diag-consent {
  color: var(--am-fg-subtle);
  border-top: 1px solid var(--am-border-soft);
  padding-top: var(--am-space-4);
  margin: 0 0 var(--am-space-5);
  line-height: var(--am-lead-normal);
}
.diag-contact .am-btn-primary { width: 100%; justify-content: center; }
.diag-contact .am-form-msg {
  margin: var(--am-space-3) 0 0; min-height: 1.2em;
  color: var(--am-accent); font-weight: var(--am-w-medium);
}

/* ---- Result footer actions ----------------------------------- */
.diag-result-actions {
  display: flex; gap: var(--am-space-6); justify-content: center;
  flex-wrap: wrap; margin-top: var(--am-space-8);
}
.diag-link {
  background: none; border: 0; cursor: pointer;
  color: var(--am-fg-muted); letter-spacing: var(--am-track-wide);
  text-transform: none;
}
.diag-link:hover { color: var(--am-accent); }

@media (max-width: 600px) {
  .diag-wrap { padding: var(--am-space-8) var(--am-space-4) var(--am-space-9); }
  .diag-funnel { padding: var(--am-space-6) var(--am-space-5); }
}