/* mx-afore — figura «¿A qué subcuenta mandar tu depósito?» (/aportaciones-voluntarias).
 *
 * ── POR QUÉ ────────────────────────────────────────────────────────────────────────────────
 * Era un SVG de 720×424 con class="fig--wide", o sea min-width:640px por app.css:763. En un
 * teléfono de 412px eso es scroll lateral sobre texto de 11-12px que además NO refluye: el árbol
 * quedaba ilegible justo en el dispositivo donde más se lee. Y no es una figura decorativa — la
 * subcuenta se elige EN EL MOMENTO del depósito, casi nunca se puede cambiar después, y de esa
 * casilla depende si el dinero deduce y cuándo se puede tocar. Rehecho en HTML, el mismo dibujo
 * se apila solo a cualquier ancho.
 *
 * ── DE QUIÉN COPIA ─────────────────────────────────────────────────────────────────────────
 * Sigue de cerca a .arbol (app.css:845), el árbol de /retiro-de-afore ya migrado: misma rejilla
 * pregunta-izquierda / resultado-derecha, mismo conector "No" con su filete, mismos cuerpos de
 * texto. Que los dos árboles del mismo sitio se vieran distintos sería un defecto, no variedad.
 * Título, bajada y pie salen de las piezas compartidas de figuras.css (.figh__t / __st / __pie).
 *
 * ── COLOR ──────────────────────────────────────────────────────────────────────────────────
 * La columna de PREGUNTAS es siempre de marca (en el SVG las tres cajas de la izquierda eran
 * box-s). Lo que se tiñe es el RESULTADO, y ahí el color es contenido: neutro + rojo = no
 * deducible, marca = deducible con permanencia, verde = el mejor trato fiscal de los cuatro.
 * Cada variante fija sus cuatro tokens y el resto del bloque los lee; no hay hex sueltos.
 */

/* Variantes. --sc: título del resultado y su borde de acento; --sbd: borde; --sbg: fondo;
   --sded: el veredicto fiscal, que es la línea que la gente viene a buscar. */
.subq__paso--corto{--sc:var(--soft);--sbd:var(--border-2);--sbg:var(--surface-alt);
  --sded:var(--danger)}
.subq__paso--largo{--sc:var(--brand-l);--sbd:var(--brand-l);--sbg:var(--tile);--sded:var(--ok)}
.subq__paso--comp{--sc:var(--ok);--sbd:var(--ok);--sbg:var(--ok-bg);--sded:var(--ok)}

/* La banda de entrada: el enunciado del que cuelga todo. Era el rect box-b del SVG (fondo
   --tile, borde --brand-l), y se mantiene igual. */
.subq__entrada{margin:0 0 18px;padding:13px 16px;border-radius:11px;background:var(--tile);
  border:1.5px solid var(--brand-l);font-size:15px;font-weight:800;color:var(--brand-d);
  line-height:1.35}

.subq__pasos{list-style:none;margin:0;padding:0}
.subq__paso{position:relative;display:grid;gap:10px;padding-bottom:34px}
.subq__paso:last-child{padding-bottom:0}

/* La pregunta. El filete izquierdo es de marca en los tres pasos a propósito: marca la columna
   "lo que te preguntas", no el veredicto. */
.subq__q{padding:14px 16px 14px 19px;border-radius:11px;background:var(--surface-alt);
  border:1.5px solid var(--border);border-left:5px solid var(--brand-l)}
.subq__cab{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:var(--brand-l);
  letter-spacing:.06em;text-transform:uppercase}
.subq__q p{margin:0;font-size:14px;font-weight:700;color:var(--brand-d);line-height:1.4}

.subq__rama{display:flex;align-items:center;gap:12px;min-width:0}
/* El "sí" y su flecha. En el SVG la flecha era un <line> con marker; acá es el borde de un
   pseudo-elemento, así no hay geometría que recalcular cuando el texto envuelve. */
.subq__si{flex:none;font-size:11.5px;font-weight:800;color:var(--ok);letter-spacing:.06em;
  text-transform:uppercase}
.subq__si::after{content:"";display:inline-block;vertical-align:middle;margin-left:6px;width:16px;
  height:0;border-top:2px solid var(--ok)}
/* El último paso ya es la respuesta: conserva el conector para que el dibujo no se corte, pero
   sin rótulo (y aria-hidden desde el PHP: no hay nada que leer ahí). */
.subq__si--muda::after{margin-left:0}

.subq__r{flex:1 1 auto;min-width:0;padding:12px 16px;border-radius:11px;
  background:var(--sbg,var(--surface-alt));border:1.5px solid var(--sbd,var(--border))}
/* ⚠️ strong{color:var(--brand-d)} es GLOBAL (app.css:100) y acá pisaría el color de la rama:
   sobre --tile y sobre --ok-bg el título tiene que ser el de su variante, no el azul de marca.
   Sin esta línea vuelve el azul-sobre-azul de 1,38:1 que ya pasó una vez en este repo. */
.subq__r strong{display:block;font-size:14px;font-weight:800;color:var(--sc,var(--brand-d));
  line-height:1.35}
.subq__r span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.45}
/* Más específico que la regla de arriba a propósito: el veredicto fiscal no es una línea de
   apoyo más. Contraste medido: rojo 6,9:1 sobre --surface-alt, verde 4,7:1 sobre --tile. */
.subq__r .subq__ded{margin-top:6px;font-size:12px;font-weight:800;color:var(--sded,var(--soft))}

/* El "no" que baja al paso siguiente: etiqueta + el filete vertical que la acompaña. Calcado de
   .arbol__no para que los dos árboles del sitio se lean igual. */
.subq__no{position:absolute;left:14px;bottom:6px;font-size:11.5px;font-weight:800;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding-left:14px}
.subq__no::before{content:"";position:absolute;left:0;top:-14px;width:0;height:26px;
  border-left:2px solid var(--border)}

/* La advertencia del final. Era el <text> en --warn del SVG; el filete la separa del pie sin
   convertirla en un callout, que le daría más peso del que tiene dentro de la figura. */
.subq__ojo{margin:10px 0 0;padding-left:12px;border-left:3px solid var(--warn);font-size:12.5px;
  font-weight:700;color:var(--warn);line-height:1.5}

/* Desktop: las dos columnas del diagrama original —pregunta a la izquierda, resultado a la
   derecha—. Por debajo de este ancho colapsa a una sola columna y se apila, que es exactamente
   lo que el SVG no sabía hacer. El mismo corte que usa .arbol. */
@media (min-width:721px){
  .subq__paso{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center;gap:0 16px;
    padding-bottom:28px}
  .subq__q{grid-column:1}
  .subq__rama{grid-column:2}
}