/* Quiz /plan · sistema visual "propuesta A": mundo oscuro de Flow con la
   tarjeta elevada de verdad y un segundo acento cálido.
   Tipografía de marca: Montserrat titulares, Open Sans cuerpo. */

:root {
  /* El fondo es casi negro para que la tarjeta pueda SUBIR. Antes fondo y
     tarjeta estaban a 2% de distancia y la tarjeta no existía como objeto. */
  --bg: #030A0A;
  --bg-soft: #0C1817;
  --card: #102220;
  --card-top: #16302D;
  --cyan: #14B8A6;
  --cyan-bright: #5FE8D7;
  --cyan-deep: #0B7A6E;
  /* Segundo acento: cálido contra frío es lo que rompe la monotonía de un
     solo tono sin salirse de la marca. Sólo para datos duros. */
  --sand: #F5C97B;
  /* Los tres tonos de texto están calibrados sobre el fondo #07100F:
     --on 16:1, --on-soft 10:1, --on-muted 7:1. Ninguno baja de AAA para
     texto grande ni de AA para el resto. El gris tenue de antes (#6B807D)
     se quedaba en 4.4:1 y costaba leerlo. */
  --on: #E8F1F0;
  --on-soft: #AEC3C0;
  --on-muted: #8DA5A1;
  --line: rgba(255,255,255,0.09);
  --line-cyan: rgba(95,232,215,0.28);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Sin esto, el atributo hidden pierde contra cualquier display explícito
   (la tarjeta de WhatsApp es display:flex y se seguía viendo). */
[hidden] { display: none !important; }

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--on);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(760px 420px at 12% -6%, rgba(20,184,166,0.16), transparent 68%),
    radial-gradient(620px 380px at 92% 8%, rgba(245,201,123,0.055), transparent 70%);
}
h1, h2, .q__text, .plan-hero__arch, .spoiler__archetype, .recurso__titulo {
  font-family: Montserrat, "Open Sans", sans-serif;
}

.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 56px 28px 76px; }
.view { display: none; }
.view.is-active { display: block; animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sólo la pregunta usa las dos columnas. Loader, captura y plan se leen
   mejor en una columna angosta, así que se quedan centrados. */
.view[data-view="loading"], .view[data-view="result"] {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
/* El formulario va más angosto: un campo de nombre de 700px se ve raro y
   alarga el recorrido del ojo entre etiqueta y campo. */
.view[data-view="capture"], .view[data-view="error"] {
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.view[data-view="question"].is-active {
  display: grid; grid-template-columns: 1fr 1.06fr; gap: 60px; align-items: start;
}
/* En cuanto contesta la primera, el argumento se retira y la tarjeta se
   centra sola: ya no está decidiendo si entra, está adentro. */
.view[data-view="question"].is-solo {
  grid-template-columns: 1fr; max-width: 660px;
  margin-left: auto; margin-right: auto;
}

/* ---------- Columna del argumento ---------- */
.col-arg.is-compact { display: none; }
.eyebrow {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sand);
  margin-bottom: 22px;
}
.intro__title {
  font-weight: 800; font-size: clamp(30px, 3.3vw, 45px); line-height: 1.1;
  letter-spacing: -.025em; margin-bottom: 22px; text-wrap: balance;
}
/* Regla de marca: palabra-acento en Montserrat 400 cyan, nunca cursiva */
.intro__title em { font-style: normal; font-weight: 400; color: var(--cyan-bright); }
.intro__sub { font-size: 17px; line-height: 1.7; color: var(--on-soft); max-width: 46ch; margin-bottom: 34px; }

.proof {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 24px; margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(245,201,123,0.075), rgba(245,201,123,0.02));
  border: 1px solid rgba(245,201,123,0.18); border-radius: 16px;
}
.proof__num {
  font-family: Montserrat, sans-serif; font-weight: 900; font-size: 33px;
  line-height: 1; color: var(--sand); white-space: nowrap; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.proof__num span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: rgba(245,201,123,0.62); margin-top: 8px; }
.proof__txt { font-size: 14.5px; line-height: 1.6; color: var(--on-soft); }
.proof__txt strong { color: var(--on); font-weight: 600; }

.filter { font-size: 14px; line-height: 1.6; color: var(--on-muted); max-width: 44ch; }

/* Promesa de tiempo bajo la tarjeta. Se retira al avanzar: a la pregunta 8
   «menos de un minuto» ya se lee como mentira y estorba más de lo que ayuda. */
.under {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  margin-top: 18px; font-size: 13.5px; color: var(--on-muted);
}
.under b { color: var(--on-soft); font-weight: 600; }
.under svg { color: var(--cyan-bright); flex: none; }
.under.is-hidden { display: none; }

/* ---------- Pregunta ---------- */
.q {
  position: relative;
  background: linear-gradient(180deg, var(--card-top), var(--card));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 30px 28px 26px;
  box-shadow: 0 32px 70px -28px rgba(0,0,0,0.95), 0 0 0 1px rgba(95,232,215,0.06) inset;
}
/* Filo de luz arriba: es lo que despega la tarjeta del fondo */
.q::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(95,232,215,0.55), transparent);
}
.q__progress { height: 3px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.q__progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-bright));
  box-shadow: 0 0 10px rgba(95,232,215,0.5);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.q__step {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-muted); margin-bottom: 12px;
}
.q__text { font-size: clamp(21px, 3.5vw, 23px); font-weight: 700; line-height: 1.28; letter-spacing: -.015em; margin-bottom: 22px; }
.q__options { display: flex; flex-direction: column; gap: 8px; }

/* Las opciones van MÁS oscuras que la tarjeta, no más claras: dentro de una
   superficie elevada lo que se hunde se lee como campo, no como adorno. */
.opt {
  position: relative; text-align: left; width: 100%;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 13px;
  padding: 14px 44px 14px 16px;
  color: var(--on); font-size: 15.5px; font-family: inherit; line-height: 1.45;
  cursor: pointer; transition: border-color .18s, background .18s, transform .12s;
}
.opt:hover { border-color: rgba(95,232,215,0.5); background: rgba(95,232,215,0.075); }
.opt:active { transform: scale(.995); }
.opt.is-picked { border-color: var(--cyan); background: rgba(95,232,215,0.10); }
.opt__quote { display: block; font-size: 14.5px; color: #A8BFBB; margin-top: 6px; line-height: 1.5; }
.opt::after {
  content: '→'; position: absolute; right: 16px; top: 14px;
  color: var(--on-muted); font-size: 14px; opacity: 0; transform: translateX(-4px);
  transition: opacity .18s, transform .18s;
}
.opt:hover::after { opacity: 1; transform: none; color: var(--cyan-bright); }

.ghost {
  background: none; border: 0; color: var(--on-muted); font-size: 13px;
  font-family: inherit; cursor: pointer; margin-top: 18px; padding: 4px 0;
}
.ghost:hover { color: var(--on-soft); }

/* ---------- Captura ---------- */
.capture__sub { font-size: 15px; color: var(--on-soft); margin: -10px 0 20px; }
label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-muted); margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=tel] {
  width: 100%; background: rgba(255,255,255,0.04); color: var(--on);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 15px; font-family: inherit;
}
input::placeholder { color: var(--on-muted); }
input:focus { outline: none; border-color: var(--cyan); background: rgba(95,232,215,0.05); }

.btn {
  width: 100%; margin-top: 22px;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  color: #04231F; border: 0; border-radius: var(--radius);
  padding: 14px 24px; font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: filter .18s, transform .12s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.99); }
.btn[disabled] { opacity: .5; cursor: default; }

.err { color: #FF8A80; font-size: 13px; margin-top: 10px; min-height: 1em; }
.capture__legal { font-size: 11px; color: var(--on-muted); margin-top: 12px; line-height: 1.4; }

/* ---------- Selector de país ---------- */
.phone { position: relative; display: flex; gap: 8px; }
.phone__flag {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 12px; cursor: pointer;
  color: var(--on); font-size: 15px; font-family: inherit;
}
.phone__flag:hover { border-color: var(--line-cyan); }
.phone__dial { font-variant-numeric: tabular-nums; }
.phone__caret { color: var(--on-muted); font-size: 10px; }
.phone input { flex: 1 1 auto; min-width: 0; }
.phone__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: min(320px, 100%);
  background: #0E1E1C; border: 1px solid var(--line-cyan); border-radius: var(--radius);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.7); overflow: hidden;
}
.phone__search {
  width: 100%; background: rgba(255,255,255,0.05); color: var(--on);
  border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px;
  font-size: 14px; font-family: inherit;
}
.phone__search:focus { outline: none; }
.phone__list { max-height: 240px; overflow-y: auto; }
.phone__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 10px 14px; cursor: pointer;
  color: var(--on); font-size: 14px; font-family: inherit; text-align: left;
}
.phone__item:hover, .phone__item.is-cursor { background: rgba(95,232,215,0.10); }
.phone__item-dial { margin-left: auto; color: var(--on-muted); font-variant-numeric: tabular-nums; }

/* ---------- Loader ---------- */
.loader { position: relative; min-height: 72vh; padding-top: 12px; }
.dots-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dot {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan); opacity: .4;
  animation: float 5s ease-in-out infinite, twinkle 12s ease-in-out infinite;
}
.dot.sm { width: 2px; height: 2px; opacity: .25; }
.dot.lg { width: 6px; height: 6px; opacity: .5; }
.dot.hot { background: var(--cyan-bright); box-shadow: 0 0 8px var(--cyan-bright); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes twinkle { 0%,100% { opacity: .3; } 50% { opacity: .8; } }

.loader__head { position: relative; z-index: 1; text-align: center; margin-bottom: 26px; }
.percent {
  font-weight: 800; font-size: clamp(56px, 11vw, 104px); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan), var(--cyan-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.percent__sign { font-size: .45em; -webkit-text-fill-color: var(--cyan); margin-left: 3px; }
.progress-linear { width: 100%; max-width: 380px; margin: 0 auto 16px; height: 3px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.progress-linear__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-bright)); box-shadow: 0 0 12px rgba(95,232,215,.6); transition: width .35s ease; }
.scene-dots { display: inline-flex; gap: 7px; margin-bottom: 14px; }
.scene-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.14); transition: all .3s; }
.scene-dot.is-active { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.scene-dot.is-done { background: var(--cyan-deep); }
.loader__warn { font-size: 12px; color: var(--on-muted); display: flex; align-items: center; justify-content: center; gap: 7px; }
.loader__warn-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5B84B; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.loader__stage { position: relative; z-index: 1; min-height: 300px; }
.scene { display: none; }
.scene.is-active { display: block; animation: sceneIn .45s ease both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scene__kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; text-align: center; }
.scene__caption { font-size: 14px; color: var(--on-soft); text-align: center; margin-top: 16px; min-height: 2.6em; }
.scene__counter { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.scene__counter-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-muted); }
.scene__counter-num { font-size: 26px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }

/* Escena 1 · terminal */
.cli { background: #050D0C; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cli__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--line); }
.cli__dot { width: 10px; height: 10px; border-radius: 50%; }
.cli__dot--r { background: #FF5F57; } .cli__dot--y { background: #FEBC2E; } .cli__dot--g { background: #28C840; }
.cli__title { margin-left: 8px; font-size: 12px; color: var(--on-muted); }
.cli__body { padding: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.9; min-height: 200px; }
.cli__line { animation: fadeUp .3s ease both; }
.cli__line .prompt { color: var(--cyan); margin-right: 6px; }
.cli__line .accent { color: var(--cyan-bright); }
.cli__line .ok { color: #28C840; }
.cli__line .muted { color: var(--on-muted); }
.cli__cursor { display: inline-block; width: 7px; height: 14px; background: var(--cyan); margin-left: 4px; vertical-align: -2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Escena 2 · síntomas */
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pchip {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--on-muted);
  transition: all .3s;
}
.pchip__icon { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--on-muted); flex: 0 0 auto; transition: all .3s; }
.pchip.is-checking { border-color: var(--line-cyan); color: var(--on); }
.pchip.is-checking .pchip__icon { border-color: var(--cyan); border-top-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pchip.is-match { border-color: var(--line-cyan); background: rgba(95,232,215,0.08); color: var(--on); }
.pchip.is-match .pchip__icon { border-color: var(--cyan-bright); background: var(--cyan-bright); box-shadow: 0 0 10px var(--cyan-bright); }
.pchip.is-skip { opacity: .35; }

/* Escena 3 · ejes */
.axes { display: flex; flex-direction: column; gap: 16px; }
.axis { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.axis__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.axis__name { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-soft); }
.axis__val { font-size: 22px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.axis__bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.axis__fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-bright)); box-shadow: 0 0 10px rgba(95,232,215,.5); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.axis.is-weak .axis__val { color: #F5B84B; }
.axis.is-weak .axis__fill { background: linear-gradient(90deg, #8A5A0B, #F5B84B); box-shadow: 0 0 10px rgba(245,184,75,.5); }

/* Escena 4 · grafo */
.graph { position: relative; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.kgraph { width: 100%; height: auto; display: block; }
.kgraph line { stroke: rgba(95,232,215,0.28); stroke-width: 1; opacity: 0; transition: opacity .5s; }
.kgraph line.is-on { opacity: 1; }
.kgraph circle.kg-node { fill: #0B2E2A; stroke: var(--cyan); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .4s; }
.kgraph circle.kg-node.is-on { opacity: 1; }
.kgraph circle.kg-node.is-hot { fill: var(--cyan-bright); stroke: var(--cyan-bright); filter: drop-shadow(0 0 6px var(--cyan-bright)); }
.graph__redacted {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(6px);
  background: rgba(5,13,12,.92); border: 1px solid var(--line-cyan); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; color: var(--cyan-bright); white-space: nowrap;
  opacity: 0; transition: opacity .45s, transform .45s;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.graph__redacted.is-visible { opacity: 1; transform: translateX(-50%); }

/* Escena 5 · checklist */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cli-item {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--on-muted);
  transition: all .3s;
}
.cli-item__icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--on-muted); display: flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
.cli-item.is-done { color: var(--on); border-color: var(--line-cyan); }
.cli-item.is-done .cli-item__icon { border-color: var(--cyan-bright); background: var(--cyan-bright); color: #04231F; }

.spoiler { margin-top: 22px; text-align: center; padding: 22px; border: 1px solid var(--line-cyan); border-radius: 16px; background: rgba(95,232,215,0.06); animation: fadeUp .5s ease both; }
.spoiler__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.spoiler__text { font-size: 14px; color: var(--on-soft); margin-bottom: 8px; }
.spoiler__archetype {
  font-size: clamp(24px, 5vw, 34px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Micro-sí del formulario ---------- */
.ask {
  margin-top: 22px; padding: 16px;
  background: rgba(95,232,215,0.06);
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius);
}
.ask__q { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
/* Apiladas siempre: las etiquetas llevan la razón completa y en dos columnas
   quedarían ilegibles. */
.ask__opts { display: flex; flex-direction: column; gap: 9px; }
.ask__box {
  display: flex; align-items: flex-start; gap: 11px; line-height: 1.45;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; color: var(--on); font-size: 14px; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: border-color .18s, background .18s;
}
.ask__box:hover { border-color: var(--line-cyan); }
.ask__dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--on-muted);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s; margin-top: 1px;
}
.ask__box.is-on { border-color: var(--cyan); background: rgba(95,232,215,0.13); font-weight: 600; }
.ask__box.is-on .ask__dot { border-color: var(--cyan-bright); }
.ask__box.is-on .ask__dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan-bright); box-shadow: 0 0 8px var(--cyan-bright);
}

/* ---------- Recurso para el no calificado ---------- */
.recurso {
  margin-top: 24px; padding: 26px 24px;
  background: linear-gradient(135deg, rgba(95,232,215,0.09), rgba(20,184,166,0.04));
  border: 1px solid var(--line-cyan);
  border-radius: 18px;
}
.recurso__eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px;
}
.recurso__titulo { font-size: clamp(24px, 5vw, 32px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.recurso__bajada { font-size: 13px; color: var(--on-muted); margin-bottom: 16px; }
.recurso__por-que { font-size: 16px; line-height: 1.6; color: var(--on); margin-bottom: 20px; }
.btn--recurso { display: block; text-align: center; text-decoration: none; margin-top: 0; }

/* ---------- Tarjeta de WhatsApp ---------- */
.wa-card {
  position: relative; z-index: 2;
  background: rgba(37, 211, 102, 0.07);
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wa-card--result { margin: 24px 0 0; }
.wa-card--top { margin: 0 0 22px; }
.wa-card__title { font-size: 17px; font-weight: 600; width: 100%; margin-bottom: 4px; line-height: 1.4; }
.wa-card__text { font-size: 15px; color: #CFE0DD; flex: 1 1 260px; line-height: 1.6; }
.wa-btn {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  /* Verde de WhatsApp sobre tinta casi negra: 8.4:1, se lee de lejos */
  background: #25D366; color: #05231A; text-decoration: none;
  border-radius: 10px; padding: 14px 20px; font-size: 16px; font-weight: 700;
  transition: filter .18s, transform .12s;
}
.wa-btn:hover { filter: brightness(1.07); }
.wa-btn:active { transform: scale(.98); }
.wa-btn__icon { display: inline-flex; }
@media (max-width: 520px) {
  .wa-card { flex-direction: column; align-items: stretch; text-align: left; }
  .wa-btn { justify-content: center; }
}

/* ==========================================================================
   Resultado · formato keynote
   Calibrado para leerse cómodo a los 50: cuerpo de 17px, interlineado 1.8,
   y ningún texto por debajo de 7:1 de contraste sobre el fondo. Los grises
   tenues del resto de la interfaz no se usan aquí.
   ========================================================================== */
.result { animation: fadeUp .5s ease both; }

.plan-hero {
  padding: 30px 28px 28px;
  border: 1px solid rgba(95,232,215,0.22);
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  background:
    radial-gradient(700px 300px at 12% -40%, rgba(95,232,215,0.16), transparent 62%),
    linear-gradient(180deg, #0C1E26 0%, #08161C 100%);
}
.plan-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.plan-hero__brand { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on); }
.plan-hero__brand span { font-weight: 400; color: var(--cyan-bright); }
.plan-hero__stamp {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-bright); border: 1px solid rgba(95,232,215,0.45);
  border-radius: 99px; padding: 6px 13px;
}
.plan-hero__for { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8FB6B2; margin-bottom: 12px; }
.plan-hero__arch {
  font-size: clamp(30px, 6.5vw, 46px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.03em; color: var(--on); margin-bottom: 14px;
}
.plan-hero__arch em { font-style: normal; font-weight: 400; color: var(--cyan-bright); }
.plan-hero__sub { font-size: 17px; line-height: 1.65; color: #C9DBD8; max-width: 54ch; }

/* Los cuatro ejes. El más bajo se pinta en ámbar: el color hace el trabajo
   semántico sin necesidad de una etiqueta que leer. */
/* Cierra abajo: la tarjeta de WhatsApp se mete entre este bloque y el cuerpo
   del plan, así que portada+ejes tienen que ser una tarjeta completa y no
   quedar con el borde abierto a media página. */
.ejes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 22px 28px 24px;
  border: 1px solid rgba(95,232,215,0.22);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,0.02);
}
.eje__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.eje__name { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9FBDB9; }
.eje__val { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--cyan-bright); font-variant-numeric: tabular-nums; }
.eje__track { height: 5px; background: rgba(255,255,255,0.12); border-radius: 99px; overflow: hidden; }
.eje__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-bright)); box-shadow: 0 0 10px rgba(95,232,215,0.45); }
.eje.is-low .eje__val { color: #FFC86B; }
.eje.is-low .eje__fill { background: linear-gradient(90deg, #9A6A12, #FFC86B); box-shadow: 0 0 10px rgba(255,200,107,0.45); }

.result__kicker { display: none; }

.result__body {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(95,232,215,0.22);
  border-radius: 18px;
  padding: 30px 28px 32px;
}
.result__body h3 {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan-bright); font-weight: 700;
  margin: 34px 0 14px;
}
.result__body h3::after { content: ''; flex: 1; height: 1px; background: rgba(95,232,215,0.24); }
.result__body h3:first-child { margin-top: 0; }

/* 17px con 1.8 de interlineado: el salto más barato en legibilidad */
.result__body p {
  font-size: 17px; line-height: 1.8; color: #DCE8E6;
  margin-bottom: 15px; max-width: 62ch;
}
.result__body p:last-child { margin-bottom: 0; }
.result__body strong { color: #FFFFFF; font-weight: 600; }

/* Los pasos son una secuencia real, por eso van numerados */
.plan-step {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.10);
}
.plan-step:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.10); }
.plan-step__n {
  font-size: 34px; font-weight: 800; line-height: .82; letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--cyan-bright), var(--cyan-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.plan-step p { margin: 0; }

/* La sección más dura del texto también es la que más pesa visualmente */
.plan-truth {
  margin-top: 30px; padding: 22px 24px;
  border: 1px solid rgba(95,232,215,0.32); border-radius: 14px;
  background: linear-gradient(135deg, rgba(95,232,215,0.10), rgba(11,122,110,0.05));
}
.plan-truth h3 { margin-top: 0; }

.debug { font-size: 12px; color: var(--on-muted); margin-top: 16px; font-family: ui-monospace, Menlo, monospace; }

@media (max-width: 620px) {
  .ejes { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
  .plan-hero, .ejes, .result__body { padding-left: 20px; padding-right: 20px; }
  .plan-step { grid-template-columns: 42px 1fr; gap: 12px; }
}

/* ---------- Una columna ---------- */
@media (max-width: 900px) {
  .wrap { padding: 30px 20px 60px; }
  .view[data-view="question"].is-active { grid-template-columns: 1fr; gap: 0; }
  /* display:contents sube proof y filter a ser items del grid. Sin esto el
     order no hace nada, porque el item real es la columna, no sus hijos. */
  .col-arg { display: contents; }
  .col-arg.is-compact > * { display: none; }
  /* El caso y el filtro bajan de la pregunta: en móvil lo primero que tiene
     que entrar en pantalla es el titular y la primera opción. */
  .eyebrow { order: 1; justify-self: start; margin-bottom: 16px; font-size: 10.5px; letter-spacing: .12em; }
  .intro__title { order: 2; font-size: 28px; margin-bottom: 14px; }
  .intro__sub { order: 3; font-size: 15.5px; line-height: 1.55; max-width: none; margin-bottom: 22px; }
  .col-card { order: 4; }
  .proof { order: 5; max-width: none; margin: 36px 0 0; }
  .filter { order: 6; max-width: none; margin-top: 20px; }
  .q__text { font-size: 21px; }
}

@media (max-width: 520px) {
  .wrap { padding: 28px 16px 48px; }
  .q { padding: 24px 18px 22px; }
  .patterns { grid-template-columns: 1fr; }
  .phone__menu { width: 100%; }
  .proof { flex-direction: column; gap: 12px; }
}