/**
 * CREA DIAGNOSTIC EXPERIENCE — estilos
 * ============================================================
 * Prefijo exclusivo .cdx- (CREA Diagnostic eXperience) — verificado sin
 * colisión con .c-*, .cam-*, .crea-*, .cds-*, .cwx-*, .fa-*, .b-* ya
 * existentes. Consume exclusivamente tokens de crea-design-system.css
 * (--crea-*) — cero colores nuevos.
 *
 * A diferencia de Welcome (celebración/atmósfera), este es "más
 * interfaz, menos fuegos artificiales" (regla 40 del Prompt 03): el
 * lenguaje visual es de dashboard/mapa vivo, no de espectáculo.
 * Solo se carga en index.html.
 * ============================================================
 */

.cdx-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: var(--crea-z-experience);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1000px 800px at 85% 15%, rgba(59,130,246,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 800px 700px at 10% 90%, rgba(124,58,237,0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--crea-bg-deep) 0%, #0a0c1e 50%, var(--crea-bg-deep) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  transition: opacity var(--crea-duration-slow) var(--crea-ease-enter);
}
.cdx-overlay.cdx-mounted { opacity: 1; }
.cdx-overlay[data-phase="exiting"] {
  opacity: 0;
  transition: opacity var(--crea-duration-cinematic) var(--crea-ease-exit);
}
/* El ambiente se aviva sutilmente a medida que avanza el diagnóstico
   (regla 41) — controlado por data-progress en pasos discretos, nunca
   un recálculo continuo. */
.cdx-overlay[data-progress="mid"] {
  background:
    radial-gradient(ellipse 1000px 800px at 85% 15%, rgba(59,130,246,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 800px 700px at 10% 90%, rgba(124,58,237,0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--crea-bg-deep) 0%, #0a0c1e 50%, var(--crea-bg-deep) 100%);
}
.cdx-overlay[data-progress="high"],
.cdx-overlay[data-progress="done"] {
  background:
    radial-gradient(ellipse 1100px 900px at 85% 15%, rgba(59,130,246,0.18) 0%, transparent 58%),
    radial-gradient(ellipse 900px 800px at 10% 90%, rgba(124,58,237,0.20) 0%, transparent 58%),
    radial-gradient(ellipse 700px 600px at 50% 50%, rgba(253,212,7,0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--crea-bg-deep) 0%, #0a0c1e 50%, var(--crea-bg-deep) 100%);
}

/* ── Skip / omitir ─────────────────────────────────────────────────── */
.cdx-skip {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  right: 20px;
  z-index: 5;
  background: transparent;
  border: none;
  color: var(--crea-text-secondary);
  font-family: var(--crea-font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  opacity: .55;
  transition: opacity var(--crea-duration-fast);
}
.cdx-skip:hover, .cdx-skip:focus-visible { opacity: 1; }
.cdx-skip:focus-visible { outline: 2px solid var(--crea-gold); outline-offset: 3px; border-radius: 4px; }

/* ── HUD superior ─────────────────────────────────────────────────── */
.cdx-hud {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--crea-space-xl);
  padding: 20px 24px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--crea-duration-normal), transform var(--crea-duration-normal);
}
.cdx-overlay[data-phase="question"] .cdx-hud,
.cdx-overlay[data-phase="transition"] .cdx-hud,
.cdx-overlay[data-phase="processing"] .cdx-hud,
.cdx-overlay[data-phase="pattern"] .cdx-hud {
  opacity: 1; transform: translateY(0);
}
.cdx-hud-brand {
  font-family: var(--crea-font-display);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--crea-gold);
  white-space: nowrap;
}
.cdx-hud-brand span { color: var(--crea-text-secondary); font-family: var(--crea-font-body); font-weight: 600; letter-spacing: 3px; font-size: 10px; margin-left: 8px; }

/* Progreso visual: puntos conectados, no "pregunta X de Y" (regla 7) */
.cdx-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cdx-progress-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background var(--crea-duration-normal), box-shadow var(--crea-duration-normal), transform var(--crea-duration-normal);
}
.cdx-progress-dot.is-done { background: var(--crea-gold); box-shadow: 0 0 8px 1px rgba(253,212,7,.55); }
.cdx-progress-dot.is-current { background: #fff; transform: scale(1.35); box-shadow: 0 0 10px 2px rgba(255,255,255,.5); }
.cdx-progress-line {
  width: 14px; height: 1px;
  background: rgba(255,255,255,.14);
}
.cdx-progress-line.is-done { background: rgba(253,212,7,.5); }

/* ── Layout principal: pregunta + mapa ───────────────────────────── */
.cdx-body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--crea-space-2xl);
  padding: 0 clamp(24px, 5vw, 64px) clamp(16px, 4vh, 40px);
  min-height: 0;
  overflow: hidden;
}

/* ── INTRO ────────────────────────────────────────────────────────── */
.cdx-intro {
  grid-column: 1 / -1;
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--crea-space-lg);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity var(--crea-duration-cinematic) var(--crea-ease-cinematic),
              transform var(--crea-duration-cinematic) var(--crea-ease-cinematic),
              filter var(--crea-duration-cinematic) var(--crea-ease-cinematic);
}
.cdx-overlay[data-phase="intro"] .cdx-intro {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
.cdx-overlay:not([data-phase="intro"]) .cdx-intro { display: none; }
.cdx-intro-spark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crea-gold);
  box-shadow: 0 0 16px 4px rgba(253,212,7,.55);
  animation: cdx-spark-pulse 2.4s ease-in-out infinite;
}
@keyframes cdx-spark-pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.cdx-intro-line {
  font-family: var(--crea-font-body);
  font-weight: 600;
  font-size: clamp(19px, 3vw, 26px);
  color: var(--crea-text);
  line-height: 1.4;
  max-width: 480px;
}
.cdx-intro-line--muted { color: var(--crea-text-secondary); font-weight: 500; font-size: clamp(15px, 2.2vw, 18px); }
.cdx-intro-cta {
  margin-top: var(--crea-space-md);
  padding: 16px 34px;
  border-radius: var(--crea-radius-sm);
  background: var(--crea-gradient-gold);
  color: #1a1000;
  border: none;
  font-family: var(--crea-font-body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  transition: transform var(--crea-duration-fast), box-shadow var(--crea-duration-fast);
}
.cdx-intro-cta:hover, .cdx-intro-cta:focus-visible { transform: translateY(-2px); box-shadow: var(--crea-glow-gold); }
.cdx-intro-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Panel de pregunta ────────────────────────────────────────────── */
.cdx-question-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--crea-space-lg);
}
.cdx-overlay:not([data-phase="question"]):not([data-phase="transition"]) .cdx-question-panel { display: none; }

.cdx-microcopy {
  font-family: var(--crea-font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crea-purple-soft);
  min-height: 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--crea-duration-normal), transform var(--crea-duration-normal);
}
.cdx-microcopy.is-visible { opacity: 1; transform: translateY(0); }

.cdx-question-text {
  font-family: var(--crea-font-body);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  color: var(--crea-text);
  line-height: 1.2;
  letter-spacing: -.3px;
  max-width: 34ch;
}

.cdx-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 640px;
}
.cdx-options[data-count="1col"] { grid-template-columns: 1fr; max-width: 420px; }

.cdx-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--crea-bg-interactive);
  border: 1px solid var(--crea-border-soft);
  border-radius: var(--crea-radius-md);
  padding: 14px 16px;
  color: var(--crea-text);
  font-family: var(--crea-font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transform: translateY(0);
  transition: transform var(--crea-duration-fast) var(--crea-ease-standard),
              border-color var(--crea-duration-fast) var(--crea-ease-standard),
              background var(--crea-duration-fast) var(--crea-ease-standard),
              box-shadow var(--crea-duration-fast) var(--crea-ease-standard);
}
.cdx-card:hover { transform: translateY(-3px); border-color: rgba(253,212,7,.35); background: rgba(255,255,255,.07); }
.cdx-card:focus-visible { outline: 2px solid var(--crea-gold); outline-offset: 2px; }
.cdx-card.is-selected {
  border-color: var(--crea-gold);
  background: rgba(253,212,7,.10);
  box-shadow: var(--crea-glow-gold);
  transform: translateY(-2px) scale(1.01);
}
.cdx-card-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.cdx-card-check {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--crea-border-soft);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all var(--crea-duration-fast);
}
.cdx-card.is-selected .cdx-card-check {
  border-color: var(--crea-gold);
  background: var(--crea-gold);
  color: #1a1000;
}

/* ── Slider de energía (Pregunta 5) ───────────────────────────────── */
.cdx-energy {
  position: relative;
  max-width: 520px;
  padding-top: 8px;
}
.cdx-energy-track {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.cdx-energy-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--cdx-energy, 50%);
  border-radius: 100px;
  background: linear-gradient(90deg, var(--crea-purple-soft), var(--crea-gold));
  transition: width 80ms linear, box-shadow var(--crea-duration-normal);
  box-shadow: 0 0 14px 2px rgba(253,212,7,.35);
}
.cdx-energy-input {
  position: absolute; inset: -14px 0;
  width: 100%; height: 38px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cdx-energy-input:focus-visible + .cdx-energy-track { outline: 2px solid var(--crea-gold); outline-offset: 4px; border-radius: 100px; }
.cdx-energy-label {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--crea-font-body);
  font-size: 12px;
  color: var(--crea-text-secondary);
}
.cdx-energy-value {
  font-family: var(--crea-font-mono);
  font-size: 15px;
  color: var(--crea-gold);
  font-variant-numeric: tabular-nums;
}
.cdx-energy-desc { margin-top: 6px; font-size: 13.5px; color: var(--crea-text-secondary); min-height: 18px; }

.cdx-question-nav {
  display: flex;
  align-items: center;
  gap: var(--crea-space-md);
  margin-top: var(--crea-space-sm);
}
.cdx-back {
  background: transparent;
  border: none;
  color: var(--crea-text-secondary);
  font-family: var(--crea-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  opacity: .7;
  transition: opacity var(--crea-duration-fast);
}
.cdx-back:hover, .cdx-back:focus-visible { opacity: 1; }
.cdx-back:disabled { visibility: hidden; }
.cdx-energy-continue {
  padding: 12px 26px;
  border-radius: var(--crea-radius-sm);
  background: transparent;
  border: 1px solid rgba(253,212,7,.4);
  color: var(--crea-gold);
  font-family: var(--crea-font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--crea-duration-fast);
}
.cdx-energy-continue:hover, .cdx-energy-continue:focus-visible { background: rgba(253,212,7,.1); box-shadow: var(--crea-glow-gold); }

/* Transición de salida de la pregunta actual (fade + scale down) y
   entrada de la siguiente desde profundidad (regla 17). */
.cdx-question-panel[data-anim="out"] .cdx-question-inner {
  animation: cdx-q-out 260ms var(--crea-ease-exit) forwards;
}
.cdx-question-panel[data-anim="in"] .cdx-question-inner {
  animation: cdx-q-in 420ms var(--crea-ease-cinematic) forwards;
}
@keyframes cdx-q-out { to { opacity: 0; transform: scale(.96) translateY(-6px); filter: blur(2px); } }
@keyframes cdx-q-in {
  from { opacity: 0; transform: scale(.97) translateY(14px) translateZ(0); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ── Mapa emprendedor (SVG) ───────────────────────────────────────── */
/* Prompt 06 — regla 2 y 8: el bloque título+mapa se muestra u oculta
   COMO UNIDAD (nunca el mapa solo) — "Tu mapa CREA" y el mapa aparecen y
   desaparecen juntos, siempre en ese orden. Esta es la ÚNICA condición
   de visibilidad del mapa en toda la hoja de estilos — antes existía una
   segunda ruta (el breakpoint mobile forzaba display:none en el mapa
   real) que violaba la regla "el mapa nunca desaparece en mobile"; esa
   segunda ruta ya no existe. */
.cdx-map-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cdx-overlay:not([data-phase="question"]):not([data-phase="transition"]):not([data-phase="processing"]):not([data-phase="pattern"]):not([data-phase="result"]) .cdx-map-block {
  display: none;
}
.cdx-map-title {
  font-family: var(--crea-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--crea-purple-soft);
  opacity: .85;
  flex-shrink: 0;
}
.cdx-map-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}
/* Prompt 04.1 — regla 3: además del safe-area interno del viewBox (ver
   diagnostic.js svgMapMarkup), el propio elemento SVG nunca debe verse
   forzado a crecer más allá del espacio vertical disponible — si eso
   pasara, `.cdx-body{overflow:hidden}` recortaría el mapa en vez de
   dejar que se achique. Se usa `aspect-ratio` explícito (1:1, igual que
   el viewBox) + un único `max-width` que ya incorpora el límite de
   altura vía min(...,50vh) — max-width y max-height por separado (sin
   aspect-ratio) pueden resolverse de forma independiente en algunos
   motores y estirar el SVG en vez de escalarlo uniformemente; con
   aspect-ratio fijo eso queda estructuralmente descartado. */
.cdx-map { width: 100%; max-width: min(420px, 50vh); aspect-ratio: 1 / 1; height: auto; overflow: visible; }
.cdx-map-center-ring {
  fill: none;
  stroke: rgba(253,212,7,.35);
  stroke-width: 1;
  animation: cdx-ring-pulse 3.4s ease-in-out infinite;
  transition: r var(--crea-duration-slow), opacity var(--crea-duration-slow);
}
@keyframes cdx-ring-pulse { 0%,100% { opacity: .4; r: 22; } 50% { opacity: .8; r: 25; } }
.cdx-map-center-dot {
  fill: var(--crea-gold);
  transition: r var(--crea-duration-slow) var(--crea-ease-cinematic);
}
.cdx-map-center-label {
  font-family: var(--crea-font-body);
  font-weight: 800;
  font-size: 11px;
  fill: var(--crea-bg-deep);
  text-anchor: middle;
  dominant-baseline: middle;
}
/* "El mapa se reorganiza" (regla 7 del Prompt 04): al entrar en tensión
   pre-resultado, el núcleo crece y su glow se intensifica — sin mover
   nada de golpe, solo transform/r, ambos GPU/paint-cheap. */
.cdx-map.is-focusing .cdx-map-center-dot { r: 19; }
.cdx-map.is-focusing .cdx-map-center-ring { animation-duration: 1.8s; }

.cdx-map-line {
  fill: none;
  stroke: rgba(255,255,255,.14);
  stroke-width: 1;
  transition: stroke var(--crea-duration-slow), stroke-width var(--crea-duration-slow), opacity var(--crea-duration-slow);
}
.cdx-map-line.is-active {
  stroke: var(--crea-gold);
  stroke-dasharray: 4 3;
  animation: cdx-flow 1.2s linear infinite;
}
.cdx-map-line.is-active.is-important { stroke-width: 1.8; }
@keyframes cdx-flow { to { stroke-dashoffset: -14; } }
.cdx-map-pulse { fill: var(--crea-gold); filter: drop-shadow(0 0 4px rgba(253,212,7,.8)); }

/* Inteligencia visual progresiva (regla 4): IMPORTANT gana tamaño/brillo/
   jerarquía; SECONDARY se mantiene discreto — no decorativo, refleja qué
   respuestas pesaron más en el resultado (recalculado en cada pregunta). */
.cdx-map-node-dot {
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.14);
  stroke-width: 1;
  transition: fill var(--crea-duration-normal), stroke var(--crea-duration-normal), r var(--crea-duration-normal);
}
.cdx-map-node.is-active .cdx-map-node-dot {
  fill: var(--crea-gold);
  stroke: rgba(253,212,7,.5);
}
.cdx-map-node.is-important .cdx-map-node-dot { r: 6.5; }
.cdx-map-node.is-secondary .cdx-map-node-dot { fill: rgba(253,212,7,.55); }
.cdx-map-node-glow {
  fill: rgba(253,212,7,0);
  transition: fill var(--crea-duration-slow);
}
.cdx-map-node.is-active .cdx-map-node-glow { fill: rgba(253,212,7,.14); }
.cdx-map-node.is-important .cdx-map-node-glow { fill: rgba(253,212,7,.24); }
.cdx-map-node.is-secondary .cdx-map-node-glow { fill: rgba(253,212,7,.06); }
/* Prompt 06 — regla 7: halo sutil detrás del texto (no una caja pesada)
   vía paint-order + stroke del mismo color del fondo — refuerza la
   legibilidad si cualquier línea/nodo queda cerca, sin agregar ningún
   elemento nuevo al DOM. Tamaño de fuente subido de 8.5 a 9.5 (regla 4:
   el mapa mobile puede renderizar más chico que el de desktop, así que
   arranca de una base más legible). */
.cdx-map-node-label {
  font-family: var(--crea-font-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  fill: var(--crea-text-secondary);
  paint-order: stroke;
  stroke: var(--crea-bg-deep);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--crea-duration-normal);
}
.cdx-map-node.is-active .cdx-map-node-label { opacity: 1; fill: var(--crea-text); }
.cdx-map-node.is-important .cdx-map-node-label { opacity: 1; fill: var(--crea-gold); font-weight: 800; }
.cdx-map-node.is-secondary .cdx-map-node-label { opacity: .55; }
.cdx-map-node.is-current .cdx-map-node-dot { fill: #fff; }
/* Pulso al activarse (regla 3-5): breve, una sola vez, nunca continuo */
@keyframes cdx-node-pulse { 0% { r: 5; } 40% { r: 9; } 100% { r: 5; } }
.cdx-map-node.is-pulsing .cdx-map-node-dot { animation: cdx-node-pulse 620ms var(--crea-ease-standard); }

/* Prompt 06 — regla 9: último pulso del núcleo antes de revelar el
   resultado — "CREA terminó de analizarte", no un corte abrupto. Anima
   desde el radio ya establecido por .is-focusing (19, no el base 15)
   porque para cuando esto se dispara la fase "processing" ya lo dejó
   así, y is-focusing sigue activo durante todo el resultado. */
.cdx-map.is-concluding .cdx-map-center-dot { animation: cdx-center-conclude 560ms var(--crea-ease-cinematic); }
.cdx-map.is-concluding .cdx-map-center-ring { animation: cdx-center-conclude-ring 560ms var(--crea-ease-cinematic); }
@keyframes cdx-center-conclude { 0%, 100% { r: 19; } 45% { r: 24; } }
@keyframes cdx-center-conclude-ring { 0% { opacity: .8; r: 25; } 50% { opacity: 1; r: 30; } 100% { opacity: .4; r: 22; } }

/* ── Revelación (fase "processing") + Patrón (fase "pattern") + Resultado ── */
.cdx-reveal, .cdx-pattern, .cdx-result {
  grid-column: 1 / -1;
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
  text-align: center;
}
.cdx-overlay:not([data-phase="processing"]) .cdx-reveal { display: none; }
.cdx-overlay:not([data-phase="pattern"]) .cdx-pattern { display: none; }
.cdx-overlay:not([data-phase="result"]) .cdx-result { display: none; }

/* ── Patrón — dimensiones dominantes apareciendo una por una ────────── */
.cdx-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--crea-space-xl);
}
.cdx-pattern-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
}
.cdx-pattern-chip {
  font-family: var(--crea-font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--crea-gold);
  background: rgba(253,212,7,.08);
  border: 1px solid rgba(253,212,7,.3);
  border-radius: var(--crea-radius-full);
  padding: 8px 18px;
  opacity: 0;
  transform: translateY(10px) scale(.94);
  transition: opacity var(--crea-duration-normal) var(--crea-ease-cinematic), transform var(--crea-duration-normal) var(--crea-ease-cinematic);
}
.cdx-pattern-chip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.cdx-pattern-phrase {
  font-family: var(--crea-font-body);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 25px);
  color: var(--crea-text);
  max-width: 42ch;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
  transition: opacity var(--crea-duration-cinematic) var(--crea-ease-cinematic), transform var(--crea-duration-cinematic) var(--crea-ease-cinematic), filter var(--crea-duration-cinematic) var(--crea-ease-cinematic);
}
.cdx-pattern-phrase.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.cdx-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--crea-space-lg);
}
.cdx-reveal-line {
  font-family: var(--crea-font-body);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 27px);
  color: var(--crea-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--crea-duration-slow) var(--crea-ease-cinematic), transform var(--crea-duration-slow) var(--crea-ease-cinematic);
}
.cdx-reveal-line.is-visible { opacity: 1; transform: translateY(0); }

.cdx-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--crea-space-xl);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity var(--crea-duration-cinematic) var(--crea-ease-cinematic),
              transform var(--crea-duration-cinematic) var(--crea-ease-cinematic),
              filter var(--crea-duration-cinematic) var(--crea-ease-cinematic);
  overflow-y: auto;
  max-height: 100%;
  padding: 8px 4px 24px;
}
.cdx-overlay[data-phase="result"] .cdx-result { opacity: 1; transform: translateY(0); filter: blur(0); }

.cdx-result-eyebrow {
  font-family: var(--crea-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--crea-text-secondary);
  opacity: 0;
  transform: translateY(8px);
}
.cdx-result-title {
  font-family: var(--crea-font-body);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--crea-text);
  margin: 4px 0 0;
  letter-spacing: -.4px;
  opacity: 0;
  transform: translateY(8px);
}
.cdx-result-subtitle {
  font-family: var(--crea-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--crea-text-secondary);
  margin: 0 0 var(--crea-space-lg);
  max-width: 42ch;
  opacity: 0;
  transform: translateY(8px);
}
/* Prompt 04.1 — regla 5 (FASE 7-8): "TU MAPA CREA" y "Ya sabemos dónde
   estás" entran en cascada propia, no junto con el resto del bloque —
   son el primer beat de la revelación del resultado. */
.cdx-overlay[data-phase="result"] .cdx-result-eyebrow { animation: cdx-fade-up 480ms var(--crea-ease-cinematic) 60ms forwards; }
.cdx-overlay[data-phase="result"] .cdx-result-title { animation: cdx-fade-up 520ms var(--crea-ease-cinematic) 190ms forwards; }
.cdx-overlay[data-phase="result"] .cdx-result-subtitle { animation: cdx-fade-up 520ms var(--crea-ease-cinematic) 360ms forwards; }
@keyframes cdx-fade-up { to { opacity: 1; transform: translateY(0); } }

/* Revelación progresiva por etapas (regla 14 del Prompt 04): cada bloque
   [data-stage] nace oculto y se destapa en cascada vía JS agregando
   .is-revealed — nunca todo junto de golpe. */
.cdx-reveal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--crea-space-lg);
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--crea-duration-cinematic) var(--crea-ease-cinematic), transform var(--crea-duration-cinematic) var(--crea-ease-cinematic);
}
.cdx-reveal-stage.is-revealed { opacity: 1; transform: translateY(0); }

.cdx-result-profile-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crea-text-secondary);
}
.cdx-result-symbol { font-size: 34px; line-height: 1; text-shadow: 0 0 22px currentColor; color: var(--crea-gold); }
.cdx-result-archetype {
  font-family: var(--crea-font-body);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 46px);
  color: var(--crea-gold);
  letter-spacing: -.5px;
  margin: 0;
  opacity: 0;
  transform: scale(.92);
  text-shadow: 0 0 0 rgba(253,212,7,0);
}
/* Prompt 04.1 — regla 6: el arquetipo debe ser protagonista visual unos
   instantes — entrada suave + ligera escala + glow controlado + pulso
   final, disparados por el mismo .is-revealed que ya usa el stage
   "profile" (ver revealResultStages en diagnostic.js) — cero cambios de
   arquitectura, solo la animación de este elemento en particular. */
.cdx-reveal-stage[data-stage="profile"].is-revealed .cdx-result-archetype {
  animation: cdx-archetype-reveal 900ms var(--crea-ease-cinematic) forwards;
}
@keyframes cdx-archetype-reveal {
  0%   { opacity: 0; transform: scale(.92); text-shadow: 0 0 0 rgba(253,212,7,0); }
  55%  { opacity: 1; transform: scale(1.035); text-shadow: 0 0 26px rgba(253,212,7,.45); }
  80%  { transform: scale(.995); }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 14px rgba(253,212,7,.22); }
}
.cdx-result-insight {
  font-family: var(--crea-font-body);
  font-weight: 500;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: var(--crea-text);
  max-width: 46ch;
}
.cdx-result-secondary {
  font-size: 12.5px;
  color: var(--crea-text-secondary);
}
.cdx-result-secondary strong { color: var(--crea-purple-soft); }
/* Prompt 04.1 — regla 7: línea de personalización, discreta (no compite
   con el arquetipo), en cursiva-suave para que se lea como una cita de
   lo que la persona misma contestó. */
.cdx-result-context {
  font-size: 13px;
  font-style: italic;
  color: var(--crea-text-secondary);
  max-width: 40ch;
}

/* Índice de impulso */
.cdx-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cdx-score-ring-wrap { position: relative; width: 112px; height: 112px; }
.cdx-score-ring { transform: rotate(-90deg); }
.cdx-score-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; }
.cdx-score-ring-fill {
  fill: none;
  stroke: url(#cdxScoreGradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transition: stroke-dashoffset 1.1s var(--crea-ease-cinematic);
}
.cdx-score-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--crea-font-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--crea-text);
}
/* Prompt 04.1 — regla 8: CREA SCORE™ como métrica propietaria de marca —
   más presencia que la antigua etiqueta genérica "Índice de Impulso",
   que ahora vive discreta en .cdx-score-caption. */
.cdx-score-brand {
  font-family: var(--crea-font-body);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crea-text);
  margin-top: 6px;
}
.cdx-score-brand sup { color: var(--crea-gold); font-size: 9px; }
.cdx-score-tag { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--crea-gold); }
.cdx-score-caption { font-size: 10.5px; color: var(--crea-text-secondary); opacity: .65; max-width: 240px; text-align: center; }

.cdx-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.cdx-result-block {
  background: var(--crea-bg-interactive);
  border: 1px solid var(--crea-border-soft);
  border-radius: var(--crea-radius-md);
  padding: 14px 16px;
}
.cdx-result-block-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crea-purple-soft); margin-bottom: 6px; }
.cdx-result-block-text { font-size: 14px; color: var(--crea-text); line-height: 1.45; }

/* ── Áreas de oportunidad (regla 13) ─────────────────────────────── */
.cdx-opportunities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.cdx-opportunity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--crea-bg-interactive);
  border: 1px solid var(--crea-border-soft);
  border-radius: var(--crea-radius-md);
  padding: 12px 14px;
  text-align: left;
}
.cdx-opportunity-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--crea-gold); }
.cdx-opportunity-text { font-size: 12.5px; color: var(--crea-text-secondary); line-height: 1.4; }
/* Prompt 04.1 — regla 9: cada tarjeta aparece con ~140ms de diferencia
   respecto a la anterior (no las 3 juntas), micro-hover sutil, borde y
   glow mínimos — nunca deben competir visualmente con el Score. */
.cdx-opportunity {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--crea-ease-cinematic), transform 420ms var(--crea-ease-cinematic),
              border-color var(--crea-duration-fast), box-shadow var(--crea-duration-fast);
}
.cdx-reveal-stage[data-stage="opportunities"].is-revealed .cdx-opportunity { opacity: 1; transform: translateY(0); }
.cdx-reveal-stage[data-stage="opportunities"].is-revealed .cdx-opportunity:nth-child(1) { transition-delay: 0ms; }
.cdx-reveal-stage[data-stage="opportunities"].is-revealed .cdx-opportunity:nth-child(2) { transition-delay: 140ms; }
.cdx-reveal-stage[data-stage="opportunities"].is-revealed .cdx-opportunity:nth-child(3) { transition-delay: 280ms; }
.cdx-opportunity:hover { border-color: rgba(253,212,7,.3); box-shadow: 0 0 0 1px rgba(253,212,7,.12), 0 4px 14px rgba(0,0,0,.25); }

/* ── "Tu próximo movimiento" (regla 10) — más protagonismo que una
   tarjeta genérica: acento gold a la izquierda, tipografía mayor. ── */
.cdx-next-move {
  width: 100%;
  background: linear-gradient(135deg, rgba(253,212,7,.07), rgba(255,255,255,.02));
  border: 1px solid var(--crea-border-soft);
  border-left: 3px solid var(--crea-gold);
  border-radius: var(--crea-radius-md);
  padding: 18px 22px;
  text-align: left;
}
.cdx-next-move-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--crea-gold); margin-bottom: 6px; }
.cdx-next-move-text { font-size: clamp(15px, 2vw, 17px); font-weight: 600; color: var(--crea-text); line-height: 1.5; margin: 0; }

/* ── "Tu Ruta CREA" (regla 12) — resumen visual de identidad, no una
   tabla: filas con acento de color (oro = acción/progreso, púrpura =
   identidad/inteligencia — mismo lenguaje de color ya usado en toda la
   experiencia, regla 14). ── */
.cdx-route {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}
.cdx-route-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--crea-bg-interactive);
  border: 1px solid var(--crea-border-soft);
  border-left: 3px solid var(--crea-gold);
  border-radius: var(--crea-radius-md);
}
.cdx-route-item--identity { border-left-color: var(--crea-purple-soft); }
.cdx-route-k { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--crea-text-secondary); flex-shrink: 0; }
.cdx-route-v { font-size: 13px; font-weight: 700; color: var(--crea-text); text-align: right; }

.cdx-ecosystem-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(253,212,7,.08), rgba(124,58,237,.06));
  border: 1px solid rgba(253,212,7,.25);
  border-radius: var(--crea-radius-md);
  padding: 16px 20px;
  text-align: left;
}
.cdx-ecosystem-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crea-text-secondary); margin-bottom: 4px; }
.cdx-ecosystem-title { font-size: 16px; font-weight: 800; color: var(--crea-text); }

.cdx-alt-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12.5px;
}
.cdx-alt-links a { color: var(--crea-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.cdx-alt-links a:hover { color: var(--crea-gold); }

.cdx-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* CTA principal — visualmente dominante (regla 15): el "siguiente paso"
   real del ecosistema, no un botón genérico. */
.cdx-primary-cta {
  display: inline-block;
  padding: 17px 36px;
  border-radius: var(--crea-radius-sm);
  background: var(--crea-gradient-gold);
  color: #1a1000;
  font-family: var(--crea-font-body);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: transform var(--crea-duration-fast), box-shadow var(--crea-duration-fast);
}
.cdx-primary-cta:hover, .cdx-primary-cta:focus-visible { transform: translateY(-2px); box-shadow: var(--crea-glow-gold); }
.cdx-primary-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* CTA secundario — deliberadamente menos prominente (regla 15) */
.cdx-secondary-cta {
  padding: 12px 24px;
  border-radius: var(--crea-radius-sm);
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--crea-text-secondary);
  font-family: var(--crea-font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--crea-duration-fast);
}
.cdx-secondary-cta:hover, .cdx-secondary-cta:focus-visible { border-color: var(--crea-purple-soft); color: var(--crea-purple-soft); }
.cdx-restart {
  background: transparent;
  border: none;
  color: var(--crea-text-secondary);
  font-size: 12px;
  opacity: .6;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cdx-restart:hover, .cdx-restart:focus-visible { opacity: 1; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
.cdx-reduced .cdx-question-panel[data-anim] .cdx-question-inner { animation-duration: 1ms !important; }
.cdx-reduced .cdx-map-line.is-active { animation: none !important; }
.cdx-reduced .cdx-intro-spark { animation: none !important; opacity: .85; }
.cdx-reduced .cdx-map-center-ring { animation: none !important; }
.cdx-reduced .cdx-score-ring-fill { transition-duration: var(--crea-duration-fast); }
.cdx-reduced .cdx-map-node.is-pulsing .cdx-map-node-dot { animation: none !important; }
.cdx-reduced .cdx-pattern-chip,
.cdx-reduced .cdx-pattern-phrase,
.cdx-reduced .cdx-reveal-stage,
.cdx-reduced .cdx-reveal-line { transition-duration: var(--crea-duration-fast) !important; filter: none !important; }
.cdx-reduced .cdx-map.is-focusing .cdx-map-center-dot { transition-duration: var(--crea-duration-fast); }
/* Prompt 04.1: cobertura reduced-motion para los elementos nuevos de
   esta fase — se mantienen los cambios de estado (opacidad final) pero
   sin animación/escala/desfase (regla 17: no romper funcionalidad ni
   jerarquía, solo quitar movimiento). */
.cdx-reduced .cdx-result-archetype { animation: none !important; opacity: 1 !important; transform: none !important; text-shadow: none !important; }
.cdx-reduced .cdx-result-eyebrow,
.cdx-reduced .cdx-result-title,
.cdx-reduced .cdx-result-subtitle { animation: none !important; opacity: 1 !important; transform: none !important; }
.cdx-reduced .cdx-opportunity { transition-delay: 0ms !important; transition-duration: var(--crea-duration-fast) !important; transform: none !important; }
.cdx-reduced .cdx-map.is-concluding .cdx-map-center-dot,
.cdx-reduced .cdx-map.is-concluding .cdx-map-center-ring { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cdx-overlay { transition-duration: var(--crea-duration-fast); }
  .cdx-question-panel[data-anim] .cdx-question-inner { animation-duration: 1ms !important; }
  .cdx-map-line.is-active, .cdx-intro-spark, .cdx-map-center-ring { animation: none !important; }
  .cdx-map-node.is-pulsing .cdx-map-node-dot { animation: none !important; }
  .cdx-pattern-chip, .cdx-pattern-phrase, .cdx-reveal-stage, .cdx-reveal-line { transition-duration: var(--crea-duration-fast) !important; filter: none !important; }
  .cdx-result-archetype { animation: none !important; opacity: 1 !important; transform: none !important; text-shadow: none !important; }
  .cdx-result-eyebrow, .cdx-result-title, .cdx-result-subtitle { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cdx-opportunity { transition-delay: 0ms !important; transition-duration: var(--crea-duration-fast) !important; transform: none !important; }
  .cdx-map.is-concluding .cdx-map-center-dot, .cdx-map.is-concluding .cdx-map-center-ring { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cdx-body { grid-template-columns: 1fr; }
  /* Prompt 06 — regla 2: el mapa CREA real ya NO se oculta en mobile —
     esa era la causa raíz de que "desapareciera"/perdiera protagonismo.
     Con una sola columna, .cdx-map-block (título + mapa) simplemente se
     apila en el flujo vertical, en el mismo orden que ya tenía en el
     markup: pregunta → mapa → revelación/patrón/resultado — exactamente
     la composición "MAPA antes del resultado" que pide la regla 3. */
  /* Prompt 06 — regla 11: como el mapa ahora ocupa espacio vertical real
     en mobile (antes era una tira de 13px), .cdx-body pasa a ser el
     único contenedor con scroll — natural, de página, no una barra
     interna aislada — para que nada quede recortado si el contenido
     (mapa + resultado completo) es más alto que el viewport. */
  .cdx-body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .cdx-result { overflow: visible; max-height: none; }
  .cdx-result-grid { grid-template-columns: 1fr; }
  .cdx-opportunities { grid-template-columns: 1fr; }
  .cdx-ecosystem-card { text-align: left; }
  .cdx-primary-cta { width: 100%; text-align: center; }
}
@media (max-width: 560px) {
  .cdx-hud { gap: var(--crea-space-md); padding: 14px 16px; }
  .cdx-hud-brand span { display: none; }
  .cdx-body { padding: 0 18px 18px; gap: var(--crea-space-lg); }
  /* Ajuste quirúrgico (hallazgo de validación visual): en mobile angosto
     .cdx-body no aporta padding-top y .cdx-question-panel tampoco tiene
     separación propia respecto al HUD (CREA + puntos de progreso) que
     queda inmediatamente encima — el contenido de la pregunta arrancaba
     pegado a esa barra. Se agrega separación solo al panel de pregunta
     (no a .cdx-body en general, para no desplazar el mapa CREA, ya
     validado, ni ninguna otra sección) — mínimo espacio necesario para
     una jerarquía visual clara: HUD → pregunta → opciones. */
  .cdx-question-panel { padding-top: var(--crea-space-xl); }
  .cdx-options { grid-template-columns: 1fr; max-width: 100%; }
  .cdx-question-text { max-width: 100%; }
  .cdx-skip { right: 14px; font-size: 11.5px; }
  .cdx-pattern-chip { font-size: 12px; padding: 7px 14px; }
  .cdx-result-title { font-size: clamp(22px, 7vw, 30px); }
  /* Prompt 06 — regla 10-11: en pantallas angostas el mapa a 100% del
     ancho disponible deja las etiquetas (que se extienden hacia afuera
     del nodo, regla 6) sin margen antes del borde real del viewport —
     medido: hasta ~85px de desborde con respuestas largas. Se reduce el
     tamaño del propio SVG (sigue siendo "protagonista": ~74% del ancho
     de pantalla) para reservar ese margen, sin depender de recortar
     el texto de forma agresiva ni de ocultar el mapa. */
  .cdx-map { max-width: min(300px, 74vw, 46vh); }
  /* Prompt 04.1 — regla 16: en pantallas angostas "Tu Ruta CREA" se
     apila (clave arriba, valor abajo) en vez de comprimir dos columnas
     contra el borde — evita que valores largos (nombre de arquetipo,
     ecosistema recomendado) se corten o se superpongan. */
  .cdx-route-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cdx-route-v { text-align: left; }
}