/* mx-afore — árbol de decisión Ley 73 / Ley 97 (/ley-73-o-ley-97).
 *
 * ── QUÉ ES ─────────────────────────────────────────────────────────────────────────────────
 * La figura de fig_arbol_ley_73_97() en pages/ley_73_97.php. Era un SVG de 720×560 con
 * coordenadas absolutas: con `.fig__box svg.fig--wide{min-width:640px}` (app.css:763) pedía
 * scroll lateral en cualquier teléfono, justo en la página que resuelve LA pregunta del nicho.
 * Acá el mismo dibujo —pregunta arriba, dos ramas debajo, una caja colgando de cada rama— se
 * apila solo, porque las ramas van en .figh__duo (auto-fit + minmax de figuras.css).
 *
 * ── EL CÓDIGO DE COLOR NO ES DECORACIÓN ────────────────────────────────────────────────────
 * Ley 73 = azul (--brand), Ley 97 = verde (--accent). Es el mismo código que usan .th-73 y
 * .th-97 en la tabla comparativa de la misma página (rediseno.css:739) y los rótulos del
 * resto del sitio: si acá se cambia, se rompe la lectura de toda la página. Cada rama lo
 * inyecta en tres custom properties desde el PHP y este archivo sólo las consume:
 *   --rc  color de identidad de la rama (borde de la carta)
 *   --rb  la variante legible del mismo color: banda de título y respuesta SÍ/NO
 *   --rf  fondo del cuerpo de la carta  (el tinte pálido del régimen)
 *
 * ── CONTRASTE (la trampa de esta casa) ─────────────────────────────────────────────────────
 * 1. `h1,h2,h3,h4{color:var(--brand-d)}` es global (app.css:80). La banda de título de la
 *    carta es un <h4> sobre fondo de color: sin pisarlo daba azul-sobre-azul. Por eso
 *    .arbley__cab fija color explícito, y por eso su selector de clase (0,1,0) le gana al de
 *    elemento (0,0,1) sin depender del orden de carga.
 * 2. El verde legible (--rb) es --accent-t y no --accent, y por eso se usa en los dos sitios
 *    donde ese color es TEXTO: blanco sobre --accent (#5fa544) da 3,0:1 y --accent sobre
 *    blanco también, o sea que no pasa AA en ninguna de las dos direcciones. Con --accent-t
 *    (#3f7d28) son 5,0:1 en los dos sentidos. Como borde de la carta sí queda --accent: ahí
 *    el mínimo es 3:1 de elemento no textual, y es donde el verde de marca se reconoce.
 * 3. Los rótulos de cada fila van en --soft y no en --muted, que es lo que tenían como .t-sm
 *    en el SVG: --muted sobre --tile es 3,5:1 y son texto de 12px. Con --soft, 6,8:1.
 * ───────────────────────────────────────────────────────────────────────────────────────────
 */

/* ---------- Nodo raíz: la pregunta de la que cuelga todo ---------- */
/* Centrado como en el SVG. Va en fondo de marca porque es LA pregunta, no una más. */
.arbley__q{margin:0 0 4px;padding:13px 18px;border-radius:12px;background:var(--brand);
  color:var(--surface);font-size:15px;font-weight:800;line-height:1.4;text-align:center;
  text-wrap:balance}

/* ---------- Las dos ramas ---------- */
/* La rejilla la pone .figh__duo; acá sólo se le quitan las marcas de lista y se le da un poco
   más de aire, porque cada ítem son dos cajas apiladas y no una sola tarjeta. */
.arbley__ramas{list-style:none;margin:0;padding:0;gap:16px}
.arbley__rama{position:relative;display:grid;gap:12px;align-content:start;padding-top:20px}
/* El conector que en el SVG era un <line> con marcador de flecha. Como pseudo-elemento no hay
   geometría que recalcular cuando el texto envuelve o cuando la rejilla pasa a una columna. */
.arbley__rama::before{content:"";position:absolute;left:15px;top:0;height:14px;
  border-left:2px solid var(--brand-l)}

/* La respuesta que abre la rama. Va en el color de la rama y no en un verde de "sí": las dos
   etiquetas quedan pegadas a su carta, y un "SÍ" verde encima de la carta AZUL de la Ley 73
   contradecía el código de color de la página entera. */
.arbley__resp{margin:0;font-size:12.5px;font-weight:800;color:var(--rb);letter-spacing:.04em}

/* ---------- La carta de cada régimen ---------- */
/* overflow:hidden para que la banda de título respete el radio de la esquina sin repetirle el
   border-radius (que era lo que en el SVG obligaba al segundo <rect> tapa-esquinas). */
.arbley__caja{border:1.5px solid var(--rc);border-radius:12px;background:var(--rf);
  overflow:hidden}
.arbley__cab{margin:0;padding:10px 15px;background:var(--rb);color:var(--surface);
  font-size:13.5px;font-weight:800;line-height:1.35;letter-spacing:.02em}
/* Por si algún día el título lleva un <strong>: el global lo pintaría de --brand-d sobre la
   banda de color. Es el error más repetido del repo; se corta de raíz. */
.arbley__cab strong{color:inherit}

.arbley__dl{margin:0;padding:13px 15px 14px;display:grid;gap:11px}
.arbley__fila{display:grid}
.arbley__dl dt{font-size:12px;font-weight:700;color:var(--soft);line-height:1.35}
.arbley__dl dd{margin:2px 0 0;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.45}

/* ---------- Tercer nivel: la caja que cuelga de cada rama ---------- */
/* El cuerpo es .figh__caja de figuras.css; acá sólo se agrega el conector que la ata a la
   carta de arriba y el tinte de la variante "ventaja". */
.arbley__extra{position:relative}
.arbley__extra::before{content:"";position:absolute;left:15px;top:-13px;height:12px;
  border-left:2px solid var(--border)}
/* Doble clase en los dos: le ganan a `.figh__caja` y a `.figh__caja h4` por especificidad, sin
   depender de qué hoja cargue primero. El borde NO se toca: lo pone .figh__caja--acento
   leyendo el --fc que le pasa el PHP. */
.figh__caja.arbley__extra--ok{background:var(--ok-bg)}
.figh__caja.arbley__extra--ok h4{color:var(--ok)}

@media (max-width:720px){
  .arbley__q{font-size:14.5px;padding:12px 15px}
  .arbley__cab{font-size:13px}
}