/* mx-afore — figura «Las tres fechas que decide el IMSS» (/retiro-por-matrimonio)
 * Marcado: pages/retiro_matrimonio.php → sb_fig_linea_matrimonio().
 *
 * Era un SVG de 760x306 con los cuatro hitos en FILA y `class="fig--wide"` —min-width:640px—:
 * en un teléfono de 412px la figura pedía scroll lateral y, dentro, cada tarjeta medía 180px con
 * texto de 12px, o sea dos o tres palabras por renglón. Rehecha en HTML, la misma secuencia
 * refluye a cualquier ancho.
 *
 * ── POR QUÉ VERTICAL SIEMPRE, Y NO "HORIZONTAL QUE SE APILA EN MÓVIL" ──────────────────────
 * Es la misma conclusión a la que llegó la línea de tiempo de /cuanto-tarda-el-retiro-de-afore
 * (fig/linea-tiempo.css), y por las mismas razones, que acá pesan incluso más:
 *
 * 1. No son cuatro marcas de tiempo pelados: cada hito lleva título y una frase entera. Cuatro
 *    columnas dentro de la caja de una figura dan ~150px cada una, que es volver a la
 *    ilegibilidad de la que veníamos huyendo, sólo que sin scroll lateral.
 * 2. Sería un dibujo que mantener por partida doble —dos geometrías de conector, dos órdenes de
 *    lectura— y los cuatro hitos de esta figura no son inamovibles: si mañana la CONSAR agrega
 *    una condición, la vertical la absorbe sin tocar el CSS.
 * 3. Bajar ES avanzar. En una página que se lee scrolleando, el sentido natural del tiempo va
 *    hacia abajo y coincide con el orden del <ol> que oye un lector de pantalla. En un teléfono
 *    el recurso escaso es el ancho; el alto no.
 *
 * El ancho de las pantallas grandes no se desperdicia: a partir de 760px el título del hito y su
 * frase se ponen lado a lado. Lo que se reparte es cada escalón —la línea sigue siendo vertical.
 *
 * ── QUÉ SE REUSA ───────────────────────────────────────────────────────────────────────────
 * El esqueleto entero es de figuras.css: .figh__pasos/.figh__paso (riel vertical con conector
 * por ::before, sin geometría que recalcular cuando el texto envuelve) y .figh__caja
 * (+ --acento) para la tarjeta de cada hito, más .figh__t/.figh__st para el encabezado. Acá sólo
 * va lo específico: el nodo de color sobre el riel, el ajuste del filete de la tarjeta y la banda
 * de la excepción.
 *
 * ── SOBRE LOS SELECTORES DE DOS CLASES ─────────────────────────────────────────────────────
 * Lo que pisa a figuras.css va con el padre (.mat__paso .mat__caja) para ganar por
 * ESPECIFICIDAD y no por orden de carga: son dos archivos distintos y el orden entre ellos no es
 * un contrato que esta figura pueda dar por seguro.
 * ───────────────────────────────────────────────────────────────────────────────────────────
 */

/* Cada <li> fija --fc, el color de su hito. Es la MISMA variable que .figh__caja--acento ya lee
   para el filete, así que el nodo del riel y la tarjeta no pueden terminar de colores distintos:
   hay un solo valor y lo pone el PHP. */

/* La tarjeta va en la segunda columna del escalón. La primera (22px de .figh__paso) es el carril
   del riel y queda vacía a propósito: el nodo y la línea son pseudo-elementos absolutos, no
   ítems del grid, así que no hay nada que reposicionar cuando el texto envuelve. Sin esto la
   tarjeta caería por auto-placement en la columna de 22px. */
.mat__paso > .mat__caja{grid-column:2}

/* El nodo: un anillo (fondo de la superficie + borde de color) y no un disco lleno. Dos razones.
   Una, tiene que leerse igual encima del riel. Dos, un disco relleno pediría un número blanco
   adentro y con --muted (#74828f) ese blanco queda en 3,3:1, por debajo del mínimo; el anillo no
   tiene texto encima y el problema no existe.
   Centrado: el riel de .figh__paso está en left:10px con 2px de ancho —centro en 11px—, y el
   anillo mide 15px, así que arranca en 3,5px. La altura lo alinea con el centro del primer
   renglón del título (14px de padding de la caja + media línea de 14,5px/1,35). */
.mat__paso::after{content:"";position:absolute;left:3.5px;top:16px;width:15px;height:15px;
  box-sizing:border-box;border-radius:50%;background:var(--surface);
  border:3px solid var(--fc,var(--brand))}
/* El riel arranca debajo del anillo. .figh__paso lo pone en top:24px, que es la altura de su
   disco de 22px; el anillo de acá es más chico y está más abajo. */
.mat__paso::before{top:33px}

/* La tarjeta conserva su borde neutro y el color se gasta SÓLO en el filete izquierdo, que es lo
   que hacía el SVG: caja gris con una barra de color arriba. .figh__caja--acento tiñe los cuatro
   lados, y con cuatro hitos de cuatro colores distintos eso es mucho ruido para un dibujo cuyo
   dato es la secuencia, no la paleta. */
.mat__paso .mat__caja{border-color:var(--border);border-left-color:var(--fc,var(--brand))}

/* La banda de la excepción. Va fuera del <ol> —no es un quinto hito, es la condición que puede
   tumbar los cuatro anteriores— y por eso lleva fondo de aviso en vez de sumarse al riel. */
.mat__aviso{margin:20px 0 0;padding:14px 16px;border-radius:11px;background:var(--warn-bg);
  border:1.5px solid var(--warn)}
/* ⚠️ `strong{color:var(--brand-d)}` (app.css:100) es GLOBAL y con especificidad 0,0,0,1: sin este
   color explícito el rótulo sale azul de marca sobre el crema del aviso, que es el error que este
   repo ya cometió dos veces. En --warn sobre --warn-bg da 6,7:1. */
.mat__aviso strong{display:block;margin-bottom:5px;font-size:13.5px;font-weight:800;
  color:var(--warn);line-height:1.35}
.mat__aviso span{display:block;font-size:13px;line-height:1.5;color:var(--soft)}
.mat__aviso span + span{margin-top:3px}

/* Desde acá entra el ancho para poner el título del hito al lado de su frase en vez de encima. El
   umbral no es "escritorio": es el ancho a partir del cual las dos columnas siguen teniendo sitio
   para ~6 palabras por renglón dentro de la caja de la figura. */
@media (min-width:760px){
  .mat__paso .mat__caja{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.55fr);
    column-gap:18px;align-items:baseline}
  .mat__paso .mat__caja h4{margin-bottom:0}
}

@media (max-width:620px){
  /* Cada píxel de padding es ancho de texto cuando el carril del riel ya se llevó 34px. */
  .mat__paso .mat__caja{padding:12px 13px}
}