/* Figura "Por dónde pasa tu dinero" — /que-es-una-afore (fig_flujo_dinero_afore).
 *
 * Arquetipo: FLUJO. Cuatro etapas en secuencia, cada una con tres ítems, más la desviación de la
 * subcuenta de vivienda colgando de la etapa 2. El armazón lo pone figuras.css (.figh__pasos y
 * .figh__paso para la línea de tiempo, .figh__n para el disco numerado, .figh__t/.figh__st/
 * .figh__pie para los textos de marco); acá va sólo lo que esta figura tiene y ninguna otra: la
 * rejilla de ítems término/glosa de cada etapa y la caja de la desviación.
 *
 * El SVG resolvía las cuatro etapas como cuatro columnas de 160px pegadas de lado a lado. Eso no
 * se porta: es justo la geometría que obligaba a scrollear en un teléfono. Acá las etapas bajan
 * (la secuencia se lee de arriba abajo, como el resto de las figuras del sitio) y lo que se
 * reparte en columnas son los TRES ÍTEMS de cada etapa, que son cortos y sí entran de a dos o de
 * a tres según el ancho. Ninguna media query decide eso: lo hace auto-fit + minmax.
 *
 * Todo lo que cambia de color por etapa viaja en --fc, que el PHP fija en el style del <li>: es
 * dato de la figura, no del tema, igual que --gc en .arbol y --fc en .figh__caja--acento.
 */

/* ── Las cuatro etapas ─────────────────────────────────────────────────────────────────────── */

/* El disco hereda el color de su etapa. El de figuras.css es azul fijo, pero acá el color ES
   información: era la banda superior de cada columna del SVG, y separa lo que entra (azul de
   marca), lo que tu AFORE administra (azul claro) y lo que sale como pensión (verde).
   Va con .dinero delante porque .figh__n pinta el fondo con la misma especificidad: sin el
   ancestro quedaría dependiendo del orden de carga de las hojas. */
.dinero .dinero__n{background:var(--fc,var(--brand))}

/* El rail que une las etapas arranca en el color de la etapa y se apaga hacia la siguiente: es
   lo que insinuaban las tres flechas horizontales del dibujo original. */
.dinero .dinero__paso::before{background:linear-gradient(to bottom,var(--fc,var(--border)),var(--border))}

/* .figh__paso es una rejilla de dos columnas (disco | contenido); el cuerpo es UN solo hijo para
   que el h4 y la <dl> no se vuelvan celdas sueltas de esa rejilla. */
.dinero__cuerpo{min-width:0}

/* El título de la etapa se tiñe con su color —en el SVG iba en blanco sobre la banda—. Los tres
   valores de --fc pasan AA sobre blanco (--brand-l da 5,99:1 y --ok 4,87:1), así que el color
   puede llevar el peso de la agrupación sin que el texto pierda contraste.
   Doble clase para no depender del orden de carga frente a `.figh__paso h4` de figuras.css, que
   tiene la misma especificidad y fija color y margen. */
.dinero .dinero__cuerpo h4{margin:0 0 9px;color:var(--fc,var(--brand-d))}

/* ── Los tres ítems de cada etapa ──────────────────────────────────────────────────────────── */

/* Tarjetas chicas, no .figh__cajas: aquéllas arrancan en 190px y se van a una sola columna por
   debajo de 720px, que para tres etiquetas de dos palabras deja una torre de doce filas. Con
   148px caben tres en escritorio y dos en un teléfono de 412px, que es la densidad que tenía el
   dibujo original.
   margin:0 porque la hoja de usuario del navegador le pone márgenes a <dl>. */
.dinero__items{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;
  margin:0}

/* El filete izquierdo en el color de la etapa hace el trabajo que hacía el marco de la columna
   del SVG: agrupa visualmente los tres ítems como parte de una misma etapa. */
.dinero__item{min-width:0;padding:9px 11px;border:1px solid var(--border);
  border-left:3px solid var(--fc,var(--brand));border-radius:9px;background:var(--surface-alt)}
.dinero__item dt{font-size:13px;font-weight:800;color:var(--brand-d);line-height:1.3}
/* La glosa es la letra chica del SVG (t-sm, --muted). margin:0 explícito: <dd> trae 40px de
   sangría izquierda de fábrica y acá rompería la caja. */
.dinero__item dd{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}

/* ── La desviación de la subcuenta de vivienda ─────────────────────────────────────────────── */

/* El malentendido más caro del sistema y el único aviso de la figura: mismo fondo y mismo borde
   ámbar que pintaba el SVG con fill/stroke, ahora con los tokens del tema. Va dentro de la etapa
   2 y con margen arriba para que se lea como una nota colgada de sus ítems, no como una etapa
   más. */
.dinero__desvio{margin-top:10px;padding:12px 14px;border:2px solid var(--warn);
  border-radius:12px;background:var(--warn-bg)}
/* ⚠️ El strong{color:var(--brand-d)} de app.css:100 es global y pinta de azul de marca cualquier
   negrita, incluida ésta, que va sobre fondo ámbar. Acá el titular tiene que seguir al color de
   su aviso: es lo que lo identifica como advertencia y no como un subtítulo más de la figura.
   Una clase le gana de sobra al selector de elemento. */
.dinero__desvio strong{display:block;font-size:13.5px;font-weight:800;color:var(--warn);
  line-height:1.35}
.dinero__desvio p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft)}

@media (max-width:720px){
  /* Ítems un poco más angostos y apretados para que en un teléfono sigan entrando dos por fila
     en vez de caer a una sola columna. */
  .dinero__items{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px}
  .dinero__item{padding:8px 10px}
  .dinero__desvio{padding:11px 12px}
}