/* ============================================================================
   Diagnóstico 360 — tema inmersivo oscuro
   Depende de colors_and_type.css (variables + tipografía).
   ============================================================================ */

:root {
  --d-bg:        #0E0D0C;
  --d-bg-2:      #141210;
  --d-card:      #1A1614;
  --d-card-2:    #211C19;
  --d-line:      rgba(244,244,244,0.10);
  --d-line-2:    rgba(244,244,244,0.16);
  --d-paper:     #F4F4F4;
  --d-muted:     rgba(244,244,244,0.60);
  --d-faint:     rgba(244,244,244,0.34);
  --d-red:       #E4042C;
  --d-coral:     #FF4C2E;
  --d-ease:      cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
}

html, body { background: var(--d-bg); }
.diag {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(228,4,44,0.14), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(255,76,46,0.08), transparent 55%),
    var(--d-bg);
  color: var(--d-paper);
  font-family: var(--font-body);
  overflow-x: hidden;
}
.diag em { font-style: italic; }
.diag-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- NAV (Conferencias style) */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: calc(100% - 28px); max-width: 1240px;
  display: flex; align-items: center; gap: 20px; padding: 12px 14px 12px 20px;
  border-radius: 18px;
  background: rgba(15,13,12,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(244,244,244,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 14px;
  letter-spacing: -0.01em; flex-shrink: 0; color: var(--d-paper);
  text-decoration: none; transition: opacity 0.2s;
}
.nav__brand:hover {
  opacity: 0.8;
}
.nav__links {
  display: flex; align-items: center; gap: 22px; margin-left: auto;
  font-weight: 600; font-size: 13.5px;
}
.nav__links a {
  color: rgba(244,244,244,0.66); transition: color .2s; text-decoration: none;
}
.nav__links a:hover, .nav__links a.is-current {
  color: var(--d-paper);
}
.nav__coach {
  display: inline-flex !important; align-items: center; gap: 7px;
  color: var(--d-red) !important; font-weight: 800;
  background: rgba(228,4,44,0.10); border: 1px solid rgba(228,4,44,0.42);
  padding: 6px 12px; border-radius: 999px;
}
.nav__coach:hover {
  background: rgba(228,4,44,0.18) !important; color: var(--d-red) !important;
}
.nav__coach-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--d-red); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(228,4,44,0.6); animation: navPulse 2.2s ease-out infinite;
}
@keyframes navPulse {
  0% { box-shadow: 0 0 0 0 rgba(228,4,44,0.6); }
  70% { box-shadow: 0 0 0 7px rgba(228,4,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,4,44,0); }
}
.nav__cta {
  flex-shrink: 0; background: var(--d-red); color: #fff;
  font-weight: 700; font-size: 13px; padding: 11px 18px;
  border-radius: 999px; transition: background .2s, transform .2s;
}
.nav__cta:hover {
  background: #C1031F; transform: translateY(-1px);
}
.nav__burger {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(244,244,244,0.14); align-items: center;
  justify-content: center; margin-left: auto; background: none; cursor: pointer;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--d-paper);
  position: relative; transition: transform .25s;
}
.nav__burger span::before { position: absolute; top: -6px; }
.nav__burger span::after { position: absolute; top: 6px; }
@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 120; background: rgba(10,9,8,0.97);
  backdrop-filter: blur(10px); display: flex; flex-direction: column;
  align-items: flex-start;
  padding: 96px clamp(24px, 7vw, 48px) calc(40px + env(safe-area-inset-bottom));
  gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
  overflow-y: auto;
}
.mobile-menu.is-on { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--sans); font-weight: 700; font-size: clamp(16px, 4vw, 18px);
  letter-spacing: -0.02em; color: var(--d-paper); padding: 10px 0; border: none;
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  opacity: 0; transform: translateY(16px);
}
.mobile-menu.is-on a { animation: mmIn 420ms var(--ease-out) forwards; }
.mobile-menu a:nth-child(2) { animation-delay: 60ms; }
.mobile-menu a:nth-child(3) { animation-delay: 110ms; }
.mobile-menu a:nth-child(4) { animation-delay: 160ms; }
.mobile-menu a:nth-child(5) { animation-delay: 210ms; }
.mobile-menu a:nth-child(6) { animation-delay: 260ms; }
.mobile-menu a:nth-child(7) { animation-delay: 310ms; }
.mobile-menu a:nth-child(8) { animation-delay: 360ms; }
.mobile-menu a:nth-child(9) { animation-delay: 410ms; }
.mobile-menu a:nth-child(10) { animation-delay: 460ms; }
.mobile-menu a:nth-child(11) { animation-delay: 510ms; }
@keyframes mmIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu__coach { color: var(--d-red) !important; display: inline-flex !important; align-items: center; gap: 9px; }
.mobile-menu .mm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--d-red); flex: 0 0 auto; }
.mobile-menu__cta { margin-top: auto; background: var(--d-red); color: #fff !important; justify-content: center;
  border-radius: 16px !important; border: none !important; font-size: clamp(18px,5vw,22px) !important;
  font-weight: 700 !important; padding: 20px !important; }
.mobile-menu__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244,244,244,0.14);
  background: none; cursor: pointer; display: grid; place-items: center;
}
.mobile-menu__close svg { width: 22px; height: 22px; stroke: var(--d-paper); }

/* Independent progress bar below the menu */
.diag-progress {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 100;
  width: 100%; max-width: 100%; margin: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 9px 20px; border-radius: 999px;
  background: rgba(14,13,12,0.62);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--d-line);
}
.diag-progress__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--d-red); white-space: nowrap; flex: 0 0 auto; font-weight: 700;
  text-transform: uppercase;
}
.diag-progress__label b { color: var(--d-paper); font-weight: 700; }
.diag-progress__track {
  flex: 1 1 auto; height: 6px; border-radius: 99px;
  background: rgba(244,244,244,0.12); overflow: hidden;
}
.diag-progress__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--d-coral), var(--d-red));
  transition: width 480ms var(--d-ease);
}
.diag-progress__pct {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--d-paper); white-space: nowrap; flex: 0 0 auto;
  min-width: 46px; text-align: right;
}
@media (max-width: 600px) {
  .diag-progress { padding: 8px 16px; gap: 12px; }
  .diag-progress__label { display: flex; font-size: 10px; }
}
.diag-step-pill {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--d-muted); white-space: nowrap;
}
.diag-step-pill b { color: var(--d-paper); }
.diag-prog-shell {
  width: clamp(90px, 18vw, 220px); height: 5px; border-radius: 99px;
  background: rgba(244,244,244,0.12); overflow: hidden;
}
.diag-prog-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--d-coral), var(--d-red));
  transition: width 480ms var(--d-ease);
}

/* ---------------------------------------------------------------- LAYOUT */
.diag-stage {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) 120px;
  padding-top: 140px;
}
@media (prefers-reduced-motion: no-preference) {
  .diag-fade { animation: diagFade 520ms var(--d-ease) both; }
}
@keyframes diagFade {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}

/* ---------------------------------------------------------------- INTRO */
.intro {
  min-height: calc(100vh - 60px);
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px;
  position: relative;
}
.intro-copy { position: relative; z-index: 2; }
.intro-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--d-coral); margin-bottom: 26px;
}
.intro-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--d-red);
  box-shadow: 0 0 0 0 rgba(228,4,44,0.6); animation: diagPulse 2.4s infinite;
}
@keyframes diagPulse {
  0% { box-shadow: 0 0 0 0 rgba(228,4,44,0.55); }
  70%{ box-shadow: 0 0 0 12px rgba(228,4,44,0); }
  100%{ box-shadow: 0 0 0 0 rgba(228,4,44,0); }
}
.intro-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.96;
  letter-spacing: -0.03em; margin: 0 0 26px;
}
.intro-title em {
  position: relative; color: var(--d-red); font-style: italic; white-space: nowrap;
}
.intro-title .brush {
  position: absolute; left: -2%; right: -2%; bottom: -0.16em; width: 104%; height: 0.28em;
}
.intro-sub {
  font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.6; color: var(--d-muted);
  max-width: 60ch; margin: 0 0 40px; font-weight: 400;
}
.intro-sub strong { color: var(--d-paper); font-weight: 600; }
.intro-meta { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 48px; }
.intro-meta .mi { padding-right: 34px; }
.intro-meta .mi + .mi { padding-left: 34px; border-left: 1px solid var(--d-line); }
.intro-meta .mi-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2rem;
  letter-spacing: -0.02em; line-height: 1; color: var(--d-paper);
}
.intro-meta .mi-label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d-faint); margin-top: 8px;
}

/* ---- intro avatar ---- */
.intro-avatar {
  position: relative; z-index: 1; align-self: end;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 580px;
}
.intro-avatar-img {
  position: relative; z-index: 3; width: auto; height: clamp(560px, 86vh, 900px);
  max-width: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
  animation: avatarFloat 5.5s ease-in-out infinite;
  /* desvanece las piernas para que no se vea el corte inferior */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0,0,0,0.45) 84%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0,0,0,0.45) 84%, transparent 99%);
}
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-18px) rotate(0.4deg); }
}
.intro-avatar-glow {
  position: absolute; z-index: 1; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,4,44,0.30), rgba(228,4,44,0) 66%);
  filter: blur(6px);
}
.intro-avatar-ring {
  position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid rgba(228,4,44,0.30); pointer-events: none;
}
.intro-avatar-ring--1 { width: 500px; height: 500px; border-style: dashed; animation: hudSpin 26s linear infinite; }
.intro-avatar-ring--2 { width: 370px; height: 370px; border-color: rgba(43,212,168,0.28); animation: hudSpin 18s linear infinite reverse; }
.intro-avatar-badge {
  position: absolute; z-index: 4; top: -4%; right: 4%;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20,18,16,0.86); backdrop-filter: blur(8px);
  border: 1px solid var(--d-line-2); border-radius: 99px; padding: 9px 15px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--d-paper);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4); white-space: nowrap;
  animation: avatarFloat 5.5s ease-in-out infinite; animation-delay: -1.4s;
}
.intro-avatar-badge .iab-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--d-red);
  box-shadow: 0 0 0 0 rgba(228,4,44,0.6); animation: diagPulse 2.4s infinite; }

/* ---------------------------------------------------------------- BUTTONS */
.diag-btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  padding: 18px 30px; border-radius: 99px; border: none;
  background: var(--d-red); color: #fff;
  box-shadow: 0 14px 34px rgba(228,4,44,0.34);
  transition: transform 220ms var(--d-ease), box-shadow 220ms var(--d-ease), background 220ms;
}
.diag-btn:hover { transform: translateY(-2px); background: var(--d-coral); box-shadow: 0 20px 44px rgba(228,4,44,0.42); }
.diag-btn .arrow { transition: transform 240ms var(--d-ease); }
.diag-btn:hover .arrow { transform: translateX(5px); }
.diag-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.diag-btn.ghost {
  background: transparent; color: var(--d-paper);
  border: 1px solid var(--d-line-2); box-shadow: none;
}
.diag-btn.ghost:hover { background: rgba(244,244,244,0.06); border-color: var(--d-paper); }
.diag-btn.sm { font-size: 0.92rem; padding: 13px 22px; }

/* ---------------------------------------------------------------- EJE STEP */
.eje-head { position: relative; margin-bottom: 36px; }
.eje-ghostnum {
  position: absolute; right: -2%; top: -46px; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(8rem, 26vw, 19rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(244,244,244,0.07);
  pointer-events: none; user-select: none; letter-spacing: -0.04em;
}
.eje-kicker {
  display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 1;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--d-coral); margin-bottom: 14px;
}
.eje-kicker .kdot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.eje-name {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.03em;
  line-height: 1; margin: 0 0 14px;
}
.eje-tagline {
  position: relative; z-index: 1;
  font-size: clamp(1rem, 2vw, 1.18rem); color: var(--d-muted);
  max-width: 56ch; line-height: 1.5; margin: 0;
}
.eje-desc {
  position: relative; z-index: 1;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem); color: var(--d-muted);
  max-width: 56ch; line-height: 1.6; margin: 8px 0 0; font-weight: 700;
}
.eje-instruct {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 13px; color: var(--d-faint);
}

/* ---- question card ---- */
.q-list { display: flex; flex-direction: column; gap: 14px; }
.q-card {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--radius-lg); padding: 22px clamp(18px, 3vw, 28px);
  transition: border-color 240ms var(--d-ease), background 240ms var(--d-ease), transform 240ms var(--d-ease);
}
.q-card.answered { border-color: rgba(228,4,44,0.32); background: var(--d-card-2); }
.q-card.pending-hint { animation: qShake 420ms; }
@keyframes qShake {
  10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}
}
.q-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.q-idx {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 12px;
  color: var(--d-red); font-weight: 700; padding-top: 3px; min-width: 28px;
}
.q-text { font-size: clamp(1rem, 2vw, 1.16rem); font-weight: 500; line-height: 1.45; color: var(--d-paper); margin: 0; }

/* ---- likert ---- */
.likert { display: flex; flex-direction: column; gap: 10px; }
.likert-row { display: flex; gap: 8px; }
.likert-opt {
  flex: 1; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px 11px; border-radius: var(--radius-md);
  background: rgba(244,244,244,0.04); border: 1px solid var(--d-line);
  transition: all 200ms var(--d-ease);
}
.likert-opt:hover { background: rgba(244,244,244,0.08); border-color: var(--d-line-2); transform: translateY(-2px); }
.likert-opt .bead {
  width: 22px; height: 22px; border-radius: 99px;
  border: 2px solid var(--d-line-2); transition: all 200ms var(--d-ease);
  display: grid; place-items: center;
}
.likert-opt .bead svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.5); transition: all 200ms var(--d-ease); color: #fff; }
.likert-opt .lk-short {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  color: var(--d-faint); transition: color 200ms;
}
.likert-opt.sel { background: rgba(228,4,44,0.14); border-color: var(--d-red); }
.likert-opt.sel .bead { background: var(--d-red); border-color: var(--d-red); transform: scale(1.05); }
.likert-opt.sel .bead svg { opacity: 1; transform: scale(1); }
.likert-opt.sel .lk-short { color: var(--d-paper); }
.likert-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--d-faint); padding: 0 2px; letter-spacing: 0.03em; }

/* ---------------------------------------------------------------- NAV ROW */
.diag-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--d-line);
}
.diag-nav .count { font-family: var(--font-mono); font-size: 12px; color: var(--d-faint); }
.diag-nav .count b { color: var(--d-paper); }
.diag-nav .right { display: flex; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- METAS */
.metas-intro { max-width: 64ch; margin-bottom: 8px; }
.meta-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.meta-row {
  padding: 22px 0; border-bottom: 1px solid var(--d-line);
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.meta-row-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.meta-n { font-family: var(--font-mono); font-size: 12px; color: var(--d-red); font-weight: 700; }
.meta-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.meta-cur {
  margin-left: auto; font-size: 12px; color: var(--d-muted);
  display: flex; align-items: center; gap: 8px;
}
.meta-cur .pip { width: 8px; height: 8px; border-radius: 99px; background: var(--d-faint); }
.meta-cur b { color: var(--d-paper); font-weight: 700; }

/* slider track with current marker */
.meta-slider { position: relative; padding: 10px 0 4px; }
.ms-track {
  position: relative; height: 10px; border-radius: 99px;
  background: rgba(244,244,244,0.08); overflow: visible;
}
.ms-cur-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px;
  background: rgba(244,244,244,0.22);
}
.ms-tgt-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--d-coral), var(--d-red));
  transition: width 160ms var(--d-ease);
}
.ms-cur-mark {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 4px; height: 20px; border-radius: 2px; background: var(--d-paper); opacity: 0.55;
}
.ms-input {
  position: absolute; inset: -8px 0; width: 100%; height: calc(100% + 16px);
  margin: 0; opacity: 0; cursor: grab; -webkit-appearance: none; appearance: none;
}
.ms-input:active { cursor: grabbing; }
.ms-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 26px; border-radius: 99px; background: #fff;
  border: 3px solid var(--d-red); box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  pointer-events: none; transition: left 160ms var(--d-ease);
  display: grid; place-items: center;
}
.ms-thumb b { font-size: 11px; color: var(--d-red); font-weight: 800; }
.ms-scale { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--d-faint); }

/* ---------------------------------------------------------------- DATOS */
.datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 600px){ .datos-grid { grid-template-columns: 1fr; } }
.dfield { display: flex; flex-direction: column; gap: 8px; }
.dfield.span2 { grid-column: 1 / -1; }
.dfield label { font-size: 13px; font-weight: 600; color: var(--d-muted); letter-spacing: 0.02em; }
.dfield label .req { color: var(--d-red); }
.dfield input {
  background: var(--d-card); border: 1px solid var(--d-line-2); color: var(--d-paper);
  border-radius: var(--radius-md); padding: 15px 16px; font-size: 1rem;
  font-family: var(--font-body); transition: border-color 180ms, background 180ms;
}
.dfield input::placeholder { color: var(--d-faint); }
.dfield input:focus { outline: none; border-color: var(--d-red); background: var(--d-card-2); }
.dfield.err input { border-color: var(--d-coral); }
.dfield .msg { font-size: 12px; color: var(--d-coral); min-height: 0; }
.datos-note { display:flex; align-items:center; gap:8px; margin-top: 20px; font-size: 13px; color: var(--d-faint); }
.datos-note .pin { width:6px;height:6px;border-radius:99px;background:var(--d-red); }

/* ---------------------------------------------------------------- RESULTS */
.res-hero { text-align: center; margin-bottom: 48px; }
.res-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--d-coral); margin-bottom: 16px; }
.res-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.03em; line-height: 1; margin: 0 0 18px; }
.res-title em { color: var(--d-red); font-style: italic; }
.res-sub { color: var(--d-muted); font-size: 1.05rem; max-width: 54ch; margin: 0 auto; line-height: 1.55; }
.res-sub b { color: var(--d-paper); }

.res-scorecard {
  display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
  margin: 30px 0 10px;
}
.res-score { text-align: center; }
.res-score .big { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; }
.res-score .big .of { font-size: 1.2rem; color: var(--d-faint); font-weight: 600; }
.res-score .lbl { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-faint); margin-top: 8px; }
.res-score.accent .big { color: var(--d-red); }

.res-panel {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--radius-xl); padding: clamp(22px, 4vw, 40px);
  margin-bottom: 22px;
}
.res-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.res-panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; }
.res-panel-note { font-size: 13px; color: var(--d-muted); }

.res-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.res-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-muted); }
.res-legend .sw { width: 18px; height: 10px; border-radius: 3px; }
.res-legend .sw.cur { background: rgba(244,244,244,0.5); }
.res-legend .sw.tgt { background: var(--d-red); }

/* radar */
.radar-wrap { display: grid; place-items: center; padding: 10px 0 4px; }
.radar-svg { width: 100%; max-width: 540px; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: rgba(244,244,244,0.10); }
.radar-spoke { stroke: rgba(244,244,244,0.10); }
.radar-axis-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--d-muted); }
.radar-axis-num { font-family: var(--font-mono); font-size: 10px; fill: var(--d-faint); }
.radar-cur { fill: rgba(244,244,244,0.14); stroke: rgba(244,244,244,0.55); stroke-width: 2; }
.radar-tgt { fill: rgba(228,4,44,0.14); stroke: var(--d-red); stroke-width: 2.5; }
.radar-dot-cur { fill: #fff; }
.radar-dot-tgt { fill: var(--d-red); }
/* radar icon badges */
.radar-ico-disc { fill: #1a1614; stroke: rgba(228,4,44,0.45); stroke-width: 1.2; }
.radar-ico-glyph { stroke: var(--d-coral); stroke-width: 1.8; fill: none; }
.radar-ico-float { animation: radarIcoFloat 6s ease-in-out infinite; transform-box: view-box; }
@keyframes radarIcoFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

/* ---- BRECHA: dot-plot (gris = hoy · círculo rojo = tu siguiente nivel) ---- */
.gap-legend { margin: 14px 0 22px; }
.dotleg { width: 14px; height: 14px; border-radius: 99px; display: inline-block; }
.dotleg.now { background: #9a9893; }
.dotleg.goal { background: transparent; border: 3px solid var(--d-red); }
.gapplot { display: flex; flex-direction: column; gap: 16px; }
.gp-row { display: grid; grid-template-columns: 162px 1fr 42px; gap: 14px; align-items: center; }
.gp-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gp-ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--d-coral); display: grid; place-items: center; }
.gp-ic svg { width: 100%; height: 100%; }
.gp-name { font-weight: 700; font-size: 0.9rem; color: var(--d-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-track { position: relative; height: 26px; }
.gp-baseline { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 99px; background: rgba(244,244,244,0.10); }
.gp-connect { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 99px;
  background: linear-gradient(90deg, rgba(154,152,147,0.6), var(--d-red)); transition: all 700ms var(--d-ease); }
.gp-now { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 99px; background: #9a9893;
  transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--d-card); transition: left 700ms var(--d-ease); z-index: 2; }
.gp-goal { position: absolute; top: 50%; width: 19px; height: 19px; border-radius: 99px; background: var(--d-card);
  border: 3px solid var(--d-red); transform: translate(-50%,-50%); box-shadow: 0 0 14px rgba(228,4,44,0.4);
  transition: left 700ms var(--d-ease); z-index: 3; }
.gp-gap { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--d-coral); text-align: right; }

/* ---- BRECHA v2 (web): de qué punto a qué punto · prioridades marcadas ---- */
.gapplot.v2 { gap: 4px; }

/* escala 1–5 */
.gapplot.v2 .gp-scale {
  display: grid; grid-template-columns: 210px 1fr 92px; gap: 16px; align-items: center;
  margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--d-line);
}
.gp-scale-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-faint); }
.gp-scale-cap.end { text-align: right; }
.gp-scale-ruler { position: relative; height: 14px; }
.gp-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--d-faint);
}

/* filas */
.gapplot.v2 .gp-row {
  grid-template-columns: 210px 1fr 92px; gap: 16px; align-items: center;
  padding: 11px 12px 11px 0; border-radius: var(--radius-md); position: relative;
  transition: background 200ms var(--d-ease);
}
.gapplot.v2 .gp-row + .gp-row { border-top: 1px solid rgba(244,244,244,0.05); }
.gapplot.v2 .gp-row.focus {
  background: linear-gradient(90deg, rgba(228,4,44,0.12), rgba(228,4,44,0.02) 60%, transparent);
  padding-left: 12px;
}
.gapplot.v2 .gp-row.focus::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 99px; background: var(--d-red); box-shadow: 0 0 12px rgba(228,4,44,0.6);
}
.gapplot.v2 .gp-row.done { opacity: 0.62; }

/* etiqueta (rank + icono + nombre + flag) */
.gapplot.v2 .gp-label { gap: 11px; }
.gp-rank {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 99px;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800;
  font-size: 12px; color: var(--d-faint); border: 1px solid var(--d-line-2); background: transparent;
}
.gp-row.focus .gp-rank, .gp-rank.on { color: #fff; background: var(--d-red); border-color: var(--d-red); box-shadow: 0 0 14px rgba(228,4,44,0.45); }
.gp-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gapplot.v2 .gp-name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-flag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d-red); white-space: nowrap;
}
.gp-flag.done { color: var(--d-faint); }

/* pista con escala 1–5 marcada */
.gapplot.v2 .gp-track {
  height: 50px;
  background-image: linear-gradient(90deg, rgba(244,244,244,0.07) 0 1px, transparent 1px);
  background-size: 25% 100%; background-position: 0 0;
}
.gapplot.v2 .gp-baseline { height: 3px; background: rgba(244,244,244,0.08); }
.gapplot.v2 .gp-connect {
  height: 6px; background: linear-gradient(90deg, rgba(154,152,147,0.55), var(--d-red));
}
.gapplot.v2 .gp-row.focus .gp-connect {
  height: 7px; background: linear-gradient(90deg, rgba(154,152,147,0.55), #FF6A3D, var(--d-red));
  box-shadow: 0 0 16px rgba(228,4,44,0.55);
}
.gapplot.v2 .gp-now { width: 16px; height: 16px; box-shadow: 0 0 0 4px var(--d-card); }
.gapplot.v2 .gp-goal { width: 20px; height: 20px; }

/* valores sobre los marcadores: hoy debajo · meta arriba */
.gp-mk-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1;
  white-space: nowrap; pointer-events: none;
}
.gp-mk-tag.now { top: 15px; color: #b8b4ad; }
.gp-mk-tag.goal { bottom: 16px; color: #ff5763; }

/* columna derecha: brecha */
.gp-delta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.gp-delta-v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--d-coral); }
.gp-row.focus .gp-delta-v { color: #ff5763; }
.gp-delta-l { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-faint); }
.gp-delta-done { font-size: 18px; color: var(--d-teal, #2BD4A8); font-weight: 700; }

/* pie de leyenda */
.gp-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line);
  font-size: 12px; color: var(--d-faint);
}
.gp-foot-key { display: inline-flex; align-items: center; gap: 8px; }
.gp-foot-note { font-style: italic; }


/* time callout */
.gap-callout { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 20px;
  background: rgba(228,4,44,0.08); border: 1px solid rgba(228,4,44,0.28); border-radius: var(--radius-lg);
  font-size: 0.98rem; line-height: 1.5; color: var(--d-muted); }
.gap-callout b { color: var(--d-paper); }
.gap-callout-ic { flex-shrink: 0; font-size: 22px; }

/* recommendation */
.rec {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1c1714, #221713);
  border: 1px solid rgba(228,4,44,0.32);
}
.rec::before {
  content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background: radial-gradient(circle, rgba(228,4,44,0.22), transparent 70%); pointer-events:none;
}
.rec-tag {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--d-coral); margin-bottom:14px;
}
.rec-focus { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.rec-chip {
  font-size:12px; padding:6px 12px; border-radius:99px;
  background: rgba(244,244,244,0.06); border:1px solid var(--d-line-2); color:var(--d-paper);
}
.rec-chip b { color: var(--d-red); }
.rec-prog-title { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.5vw,2.2rem); letter-spacing:-0.02em; margin:0 0 10px; }
.rec-reason { color:var(--d-muted); line-height:1.55; max-width:62ch; margin:0 0 22px; }
.rec-bullets { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; }
.rec-bullets li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--d-paper); }
.rec-bullets li::before { content:""; flex-shrink:0; margin-top:7px; width:5px;height:5px;border-radius:99px;background:var(--d-red); }
.rec-foot { display:flex; gap:26px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--d-line); margin-bottom: 24px; }
.rec-foot .rf-lbl { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--d-faint); }
.rec-foot .rf-val { font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-top:4px; }

/* send */
.send-row { display:flex; gap:12px; flex-wrap:wrap; }
.send-btn {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:15px 24px; border-radius:99px; border:1px solid var(--d-line-2);
  background: rgba(244,244,244,0.05); color:var(--d-paper);
  transition: all 200ms var(--d-ease); text-decoration:none;
}
.send-btn:hover { transform:translateY(-2px); color:var(--d-paper); }
.send-btn.wa { background:#1faa53; border-color:#1faa53; color:#fff; box-shadow:0 12px 28px rgba(31,170,83,0.3); }
.send-btn.wa:hover { background:#25c763; color:#fff; }
.send-btn.mail:hover { border-color:var(--d-paper); background:rgba(244,244,244,0.1); }
.send-btn svg { width:20px; height:20px; }
.send-note { font-size:13px; color:var(--d-faint); margin-top:14px; display:flex; align-items:center; gap:8px; }

.res-restart { text-align:center; margin-top:36px; }
.res-restart a { color:var(--d-muted); font-size:14px; border-bottom:1px solid var(--d-line-2); padding-bottom:2px; cursor:pointer; }
.res-restart a:hover { color:var(--d-paper); }

/* ---------------------------------------------------------------- FOOTER */
.diag-footer {
  position:relative; z-index:1; border-top:1px solid var(--d-line);
  padding:26px clamp(16px,4vw,40px); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:12px; color:var(--d-faint); letter-spacing:0.04em;
}
.diag-footer b { color: var(--d-muted); font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  .q-card.pending-hint, .intro-eyebrow .dot { animation: none !important; }
  .eje-floater { animation: none !important; }
  .intro-avatar-img, .intro-avatar-badge, .intro-avatar-ring { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------- EJE FLOATERS */
.eje-step { position: relative; }
.eje-floaters { position: absolute; inset: -20px 0 0; z-index: 0; pointer-events: none; overflow: hidden; }
.eje-floater {
  position: absolute; color: var(--d-coral); transform: translate(-50%, -50%);
  animation-name: ejeFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.eje-floater svg { width: 100%; height: 100%; display: block; }
@keyframes ejeFloat {
  0%   { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
  50%  { transform: translate(-50%, -50%) translateY(-16px) rotate(8deg); }
  100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
}
.eje-kicker-ic { display: inline-grid; place-items: center; width: 17px; height: 17px; }
.eje-kicker-ic svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- EJE BG IMAGE */
.eje-step.has-bg { padding-top: 8px; }
.eje-bg {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 560px; max-height: 100%; z-index: 0; overflow: hidden; pointer-events: none;
}
.eje-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  opacity: 0.55; filter: saturate(1.05) contrast(1.02);
}
.eje-bg-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,13,12,0.30) 0%, rgba(14,13,12,0.52) 34%, rgba(14,13,12,0.90) 60%, var(--d-bg) 84%),
    radial-gradient(130% 90% at 50% 4%, transparent 26%, rgba(14,13,12,0.45) 100%);
}
.eje-hud {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(228,4,44,0.55);
  box-shadow: 0 0 24px rgba(228,4,44,0.25); pointer-events: none;
}
.eje-hud::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px dashed rgba(43,212,168,0.55);
}
.eje-hud::before {
  content: ""; position: absolute; inset: 40%; border-radius: 50%; background: rgba(244,244,244,0.5);
}
.eje-hud--1 { width: 124px; height: 124px; top: 18px; right: 7%; animation: hudSpin 20s linear infinite; }
.eje-hud--2 { width: 72px;  height: 72px;  top: 128px; right: 20%; animation: hudSpin 13s linear infinite reverse; }
.eje-hud--3 { width: 48px;  height: 48px;  top: 54px;  left: 9%;  animation: hudFloat 7s ease-in-out infinite; }
@keyframes hudSpin  { to { transform: rotate(360deg); } }
@keyframes hudFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

/* keep content above the bg */
.eje-step .eje-head, .eje-step .q-list, .eje-step .diag-nav { position: relative; z-index: 2; }
.eje-step.has-bg .eje-name,
.eje-step.has-bg .eje-tagline,
.eje-step.has-bg .eje-kicker,
.eje-step.has-bg .eje-instruct { text-shadow: 0 2px 14px rgba(0,0,0,0.65); }
.eje-step.has-bg .eje-ghostnum { -webkit-text-stroke-color: rgba(244,244,244,0.12); }
@media (prefers-reduced-motion: reduce) { .eje-hud { animation: none !important; } }


/* ---------------------------------------------------------------- GROWTH */
.res-panel.growth { background: linear-gradient(160deg, #15120f, #0f0e0d); }
.growth-head { text-align: center; max-width: 60ch; margin: 0 auto 8px; }
.growth-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-coral); margin-bottom: 14px; }
.growth-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 18px; }
.growth-statement em { color: #2BD4A8; font-style: normal; font-weight: 800; }
.growth-divider { width: 64px; height: 2px; background: var(--d-line-2); margin: 0 auto 16px; }
.growth-subline { color: var(--d-muted); font-size: 1rem; margin: 0 0 6px; }
.growth-subline b { color: var(--d-paper); }
.growth-svg { width: 100%; height: auto; display: block; margin: 6px auto 0; overflow: visible; }
.growth-ylabel { font-family: var(--font-mono); font-size: 12px; fill: var(--d-faint); }
.growth-xlabel { font-family: var(--font-display); font-weight: 600; font-size: 13px; fill: var(--d-muted); }
.growth-grid { stroke: rgba(244,244,244,0.08); }
.growth-mileline { stroke: rgba(244,244,244,0.35); stroke-width: 1.5; }
.growth-pill-bg { fill: #1d1916; stroke: var(--d-line-2); }
.growth-pill-tx { font-family: var(--font-display); font-weight: 700; font-size: 12px; fill: var(--d-paper); }
.growth-goal-bg { fill: #2BD4A8; }
.growth-goal-tip { fill: #2BD4A8; }
.growth-goal-k { font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 0.04em; fill: #07291f; }
.growth-goal-v { font-family: var(--font-display); font-weight: 800; font-size: 15px; fill: #06231b; }
.growth-foot { text-align: center; font-size: 11px; color: var(--d-faint); margin: 14px 0 0; }

/* ---------------------------------------------------------------- PDF DOWNLOAD BTN */
.send-btn.pdf-dl { background: rgba(244,244,244,0.05); }
.send-btn.pdf-dl:hover { border-color: var(--d-paper); background: rgba(244,244,244,0.1); }

/* ================================================================ PDF SHEET (LIGHT) */
.pdf-sheet {
  position: absolute; left: -10000px; top: 0;
  width: 794px; min-height: 1123px; background: #ffffff;
  color: #18150F; font-family: var(--font-body);
  padding: 22px 30px 16px; box-sizing: border-box;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pdf-sheet * { box-sizing: border-box; }
.pdf-topbar { display: flex; justify-content: space-between; align-items: center; }
.pdf-brand img { height: 40px; width: auto; display: block; }
.pdf-topbar-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pdf-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-red); }
.pdf-date { font-size: 12px; color: #8a857c; }

/* PDF HERO — big designed header */
.pdf-hero {
  margin: 11px 0 9px; padding: 16px 24px; border-radius: 16px;
  background: linear-gradient(120deg, #18150F 0%, #2a1411 62%, #4a0f1a 100%);
  position: relative; overflow: hidden; color: #fff;
}
.pdf-hero::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(228,4,44,0.45), transparent 68%);
}
.pdf-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #FF7A5C; margin-bottom: 8px;
}
.pdf-hero-eyebrow .phe-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--d-red); }
.pdf-hero-title {
  position: relative; z-index: 1; margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 27px;
  letter-spacing: -0.02em; line-height: 1.05; color: #fff;
}
.pdf-hero-title em { font-style: italic; color: #FF5A38; }
.pdf-hero-sub {
  position: relative; z-index: 1; margin: 0; max-width: 58ch;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82);
}
.pdf-hero-sub b { color: #fff; font-weight: 700; }

.pdf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; }
.pdf-stat { background: #F6F4F0; border: 1px solid #E6E2DA; border-radius: 12px; padding: 11px 10px; text-align: center; }
.pdf-stat-n { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; line-height: 1.05; color: #18150F; }
.pdf-stat-n span { font-size: 12px; color: #a09a90; }
.pdf-stat.accent { background: #FCE9EC; border-color: rgba(228,4,44,0.3); }
.pdf-stat.accent .pdf-stat-n { color: var(--d-red); }
.pdf-stat-l { font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; color: #8a857c; margin-top: 6px; font-weight: 600; }

.pdf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 7px; }
.pdf-card { background: #FBFAF7; border: 1px solid #E6E2DA; border-radius: 14px; padding: 13px; position: relative; }
.pdf-card-t { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 4px; color: #18150F; }
.pdf-legend { position: absolute; top: 15px; right: 15px; display: flex; gap: 12px; font-size: 10px; color: #6b665e; align-items: center; }
.pdf-legend.gap { position: static; margin: 6px 0 10px; }
.pdf-legend i { display: inline-block; vertical-align: middle; margin-right: 4px; }
.pdf-legend i.sw { width: 14px; height: 8px; border-radius: 2px; }
.pdf-legend i.sw.cur { background: #b4afa6; }
.pdf-legend i.sw.tgt { background: var(--d-red); }
.pdf-legend i.dotleg { width: 12px; height: 12px; border-radius: 99px; }
.pdf-legend i.dotleg.now { background: #9a9893; }
.pdf-legend i.dotleg.goal { background: #fff; border: 3px solid var(--d-red); }
.pdf-radar .radar-svg { max-width: 232px; }
.pdf-growth-stmt { font-size: 12px; color: #6b665e; margin-bottom: 6px; }
.pdf-growth-stmt b { color: #1F8A5B; }
.pdf-growth .growth-svg { margin-top: 4px; }
.pdf-gap { margin-bottom: 7px; }
.pdf-gap .gapplot { gap: 4px; }
.pdf-gap .gp-track { height: 19px; }

/* chart light overrides */
.radar-svg.light .radar-grid { stroke: #E2DED6; }
.radar-svg.light .radar-spoke { stroke: #E8E4DC; }
.radar-svg.light .radar-axis-label { fill: #2b2823; }
.radar-svg.light .radar-cur { fill: rgba(120,116,108,0.16); stroke: #908a80; }
.radar-svg.light .radar-tgt { fill: rgba(228,4,44,0.12); stroke: var(--d-red); }
.radar-svg.light .radar-dot-cur { fill: #6b665e; }
.radar-svg.light .radar-ico-disc { fill: #fff; stroke: rgba(228,4,44,0.4); }
.radar-svg.light .radar-ico-glyph { stroke: var(--d-red); }
.radar-svg.light .radar-ico-float { animation: none; }
.growth-svg.light .growth-grid { stroke: #E6E2DA; }
.growth-svg.light .growth-mileline { stroke: #b8b2a8; }
.growth-svg.light .growth-ylabel { fill: #a09a90; }
.growth-svg.light .growth-xlabel { fill: #4a463f; }
.growth-svg.light .growth-pill-bg { fill: #18150F; stroke: none; }
.growth-svg.light .growth-pill-tx { fill: #fff; }
.gapplot.light .gp-name { color: #18150F; }
.gapplot.light .gp-ic { color: var(--d-red); }
.gapplot.light .gp-baseline { background: #E6E2DA; }
.gapplot.light .gp-now { background: #9a9893; box-shadow: 0 0 0 3px #FBFAF7; }
.gapplot.light .gp-goal { background: #fff; box-shadow: 0 0 0 1px rgba(228,4,44,0.15); }
.gapplot.light .gp-gap { color: var(--d-red); }
.pdf-gap .gp-row { grid-template-columns: 188px 1fr 30px; gap: 10px; }
.pdf-gap .gp-name { font-size: 0.8rem; white-space: nowrap; overflow: visible; text-overflow: clip; }
.pdf-gap .gp-ic { width: 17px; height: 17px; }

.pdf-rec { display: flex; gap: 16px; align-items: stretch; justify-content: space-between;
  background: #18150F; border: none; border-radius: 16px; padding: 13px 20px; text-decoration: none; color: #fff; }
.pdf-rec-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #FF7A5C; }
.pdf-rec-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 6px 0 7px; color: #fff; }
.pdf-rec-reason { font-size: 11.5px; color: rgba(255,255,255,0.72); line-height: 1.5; max-width: 44ch; }
.pdf-rec-meta { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 9px; }
.pdf-rec-cta { flex-shrink: 0; align-self: center; text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: #fff; background: var(--d-red); border-radius: 12px; padding: 13px 16px; min-width: 140px; }
.pdf-rec-url { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 8px; color: rgba(255,255,255,0.78); margin-top: 6px; word-break: break-all; }
.pdf-foot { text-align: center; font-size: 10px; letter-spacing: 0.06em; color: #a09a90; margin-top: 9px; padding-top: 9px; border-top: 1px solid #E6E2DA; }

/* ---- PRINT ---- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff !important; height: auto !important; }
  .diag { background: #fff !important; min-height: 0 !important; }
  .diag-grain, .diag-top, .diag-progress, .diag-stage, .diag-footer, .diag-fab, .diag-mobile-menu { display: none !important; }
  .pdf-sheet { position: static !important; left: 0 !important; margin: 0 auto; box-shadow: none; }
  /* Scale the whole sheet so it always fits on a single page, margins intact */
  .pdf-sheet.pdf-printing {
    position: fixed !important; top: 0; left: 0; right: 0; margin: 0 auto;
    transform: scale(var(--pdf-scale, 1)); transform-origin: top center;
  }
  .pdf-sheet, .pdf-sheet * { page-break-inside: avoid !important; break-inside: avoid !important; }
}

/* ================================================================ MÓVIL */
@media (max-width: 760px) {
  .diag-stage { padding: 140px 16px 110px; }
  .diag-top { padding: 12px 16px; gap: 10px; }
  .diag-top .brand-logo { height: 24px; }
  .diag-top-right { gap: 10px; }
  .diag-step-pill { display: none; }
  .diag-prog-shell { width: 64px; }
  .diag-burger { width: 40px; height: 40px; }

  /* intro: avatar arriba, copy abajo */
  .intro { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-top: 12px; text-align: left; }
  .intro-avatar { order: -1; min-height: 0; margin-bottom: 4px; }
  .intro-avatar-img { height: clamp(290px, 46vh, 410px); }
  .intro-avatar-ring--1 { width: 300px; height: 300px; }
  .intro-avatar-ring--2 { width: 220px; height: 220px; }
  .intro-avatar-badge { font-size: 11px; padding: 7px 12px; top: -2%; right: 2%; }
  .intro-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }

  .res-scorecard { gap: 18px 26px; }
  .res-score .big { font-size: 2.3rem; }
  .res-score .big .of { font-size: 1rem; }
  .res-score .lbl { font-size: 11px; }

  .res-panel-head { margin-bottom: 12px; }
  .res-panel-title { font-size: 1.2rem; line-height: 1.2; }

  /* brecha: apila etiqueta sobre el track */
  .gp-row { grid-template-columns: 1fr; gap: 8px; position: relative; padding-bottom: 4px; }
  .gp-gap { position: absolute; top: 0; right: 0; }
  .gp-name { white-space: normal; }
  .gp-track { height: 24px; }

  /* brecha v2: oculta escala, apila etiqueta + pista, brecha arriba-derecha */
  .gapplot.v2 .gp-scale { display: none; }
  .gapplot.v2 .gp-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0 6px; align-items: stretch; }
  .gapplot.v2 .gp-row.focus { padding-left: 12px; }
  .gapplot.v2 .gp-track { height: 46px; }
  .gapplot.v2 .gp-delta { position: absolute; top: 12px; right: 4px; flex-direction: row; align-items: baseline; gap: 6px; }
  .gapplot.v2 .gp-delta-l { display: none; }
  .gp-foot-note { margin-left: 0; flex-basis: 100%; }

  .gap-callout { padding: 14px 16px; font-size: 0.92rem; }
}

@media (max-width: 460px) {
  .likert-opt { padding: 10px 3px 9px; gap: 6px; }
  .likert-opt .bead { width: 19px; height: 19px; }
  .likert-opt .lk-short { font-size: 9px; letter-spacing: 0; }
  .likert-row { gap: 5px; }
  .q-card { padding: 18px 16px; }
  .q-text { font-size: 1rem; }

  .diag-nav { flex-wrap: wrap; gap: 12px; }
  .diag-nav .right { width: 100%; justify-content: space-between; }

  .intro-meta .mi { padding-right: 20px; }
  .intro-meta .mi + .mi { padding-left: 20px; }
  .intro-meta .mi-num { font-size: 1.6rem; }

  .send-row { flex-direction: column; align-items: stretch; }
  .send-btn { justify-content: center; }

  .res-scorecard { gap: 14px 20px; }
  .res-score .big { font-size: 2rem; }

  .meta-cur { margin-left: 0; width: 100%; }
  .rec-foot { gap: 16px; }
}