/* ============================================================================
Infografías — piezas COMPARTIDAS
POR QUÉ EN HTML Y CSS, Y NO EN SVG NI EN IMAGEN. Este sitio explica un documento y unos
plazos, y las dos cosas se leen mejor con texto real: escala con el zoom del navegador,
la lee un lector de pantalla, se puede copiar, respeta el modo oscuro sin exportar dos
versiones y no pesa. Una imagen de 60 KB que dice «$3,150.40» es un número que ningún
buscador ve y que se pudre el día que cambia el dato.
⚠️ Y ES LA SEGUNDA VEZ QUE ESTE ARCHIVO EXISTE. La primera fue un `` copiado de
mx-afore que apuntaba a un archivo inexistente: 404 en las 40 páginas durante todo el
desarrollo, sin romper nada visible. Si algún día no queda ninguna figura, se borra el
link Y el archivo, no uno solo.
Acá viven las piezas que usa CUALQUIER figura: el marco, el título, los discos numerados,
la línea de tiempo y la barra comparativa. Lo específico de una figura va en
assets/css/fig/.css y se carga sólo en su página (`page_css` del meta).
============================================================================ */
/* ---------- Marco ---------- */
.fig{border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);
padding:22px 24px;margin:0 0 24px;overflow-x:auto}
.fig__t{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:0 0 4px}
.fig__h{font-size:19px;font-weight:800;color:var(--titulo);margin:0 0 18px;line-height:1.3}
.fig__pie{font-size:14px;color:var(--soft);margin:16px 0 0;line-height:1.5}
.fig__pie strong{color:var(--ink)}
@media (max-width:640px){.fig{padding:18px 16px}}
/* ---------- Discos numerados (pasos de un proceso) ---------- */
.fig-pasos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fig-paso{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.fig-paso__n{width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
font-variant-numeric:tabular-nums;flex:none}
/* ⚠️ HIJO DIRECTO. La estructura es Títulodescripción, y con
el selector de descendiente la regla alcanzaba también a las negritas de ADENTRO de la
descripción: cada una se llevaba su renglón y dejaba lo que seguía empezando por un signo
de puntuación suelto («Guárdalo» ⏎ «: volver a entrar no te devuelve...»). */
.fig-paso__c > strong{display:block;color:var(--ink);margin:0 0 2px;font-size:16px}
.fig-paso__c span{color:var(--soft);font-size:15px;line-height:1.55}
/* ---------- Línea de tiempo horizontal ---------- */
.fig-tl{display:grid;gap:0;margin:6px 0 0}
.fig-tl__barra{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;
background:var(--border-2)}
.fig-tl__seg{height:100%}
.fig-tl__seg--a{background:var(--verde)}
.fig-tl__seg--b{background:var(--ambar)}
.fig-tl__seg--c{background:var(--bar-off)}
.fig-tl__hitos{display:flex;justify-content:space-between;margin:10px 0 0;gap:10px}
.fig-tl__hito{font-size:13.5px;color:var(--soft);line-height:1.4;flex:1}
.fig-tl__hito b{display:block;color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.fig-tl__hito:last-child{text-align:right}
.fig-tl__hito:nth-child(2):not(:last-child){text-align:center}
/* ---------- Barras comparativas ---------- */
.fig-barras{display:grid;gap:12px;margin:0}
.fig-barra{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;gap:12px;align-items:center}
.fig-barra__et{font-size:14.5px;color:var(--soft);line-height:1.3}
.fig-barra__p{background:var(--border-2);border-radius:var(--r-bar);height:22px;overflow:hidden}
.fig-barra__f{height:100%;border-radius:var(--r-bar);background:var(--verde)}
.fig-barra--alt .fig-barra__f{background:var(--ambar)}
.fig-barra__v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);font-size:15.5px}
@media (max-width:560px){.fig-barra{grid-template-columns:1fr auto;grid-template-areas:"et v" "p p"}
.fig-barra__et{grid-area:et}.fig-barra__v{grid-area:v}.fig-barra__p{grid-area:p}}
/* ---------- Rejilla de conceptos (tarjetas cortas dentro de una figura) ---------- */
.fig-rej{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0}
.fig-card{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;
background:var(--surface-alt)}
.fig-card__t{font-weight:800;color:var(--titulo);font-size:15px;margin:0 0 4px}
.fig-card__d{font-size:14px;color:var(--soft);line-height:1.5;margin:0}
.fig-card--ojo{border-color:var(--warn-bd);background:var(--warn-bg)}
.fig-card--ok{border-color:var(--ok-bd);background:var(--ok-bg)}
/* ============================================================================
Flujo de pasos — el patrón de br-cnpj
----------------------------------------------------------------------------
Un stepper es una lista numerada disfrazada. Como infografía, los pasos se ven
a la vez y la relación entre ellos —que es lo que importa— se lee de un
vistazo. En pantalla estrecha vuelve a apilarse, que es lo correcto.
============================================================================ */
.ig{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
padding:20px 22px;margin:0 0 1.4em;box-shadow:var(--sh-1)}
/* ⚠️ EL CONECTOR SE DERIVA DEL HUECO, no de un número a ojo. Antes el hueco era de 14px y el
conector iba a `right:-11px` con 14px de ancho: su borde izquierdo caía 3px DENTRO de la
tarjeta y el derecho 3px antes de la siguiente, así que la línea se veía corrida a la
izquierda en vez de unir las dos cajas. Con la variable, mover el `gap` mueve el conector. */
.ig-flow{--ig-gap:14px;display:grid;gap:var(--ig-gap);
grid-template-columns:repeat(auto-fit,minmax(178px,1fr));counter-reset:igp}
.ig-flow > div{position:relative;background:var(--surface-alt);border:1px solid var(--border-2);
border-radius:var(--r);padding:15px 16px 15px}
.ig-flow > div::after{content:"";position:absolute;
right:calc(var(--ig-gap) * -1);width:var(--ig-gap);top:50%;height:2px;
background:var(--border);transform:translateY(-50%)}
.ig-flow > div:last-child::after{display:none}
/* ⚠️ EL CORTE VA EN 760px, NO EN 600. Con `auto-fit` y cuatro pasos de 178px mínimo, por
debajo de ~754px la rejilla se parte en 2x2 — y entonces la última tarjeta de la primera
fila sigue dibujando su conector HORIZONTAL hacia la derecha, apuntando al vacío. CSS no
sabe si el hermano siguiente está en otra fila, así que en vez de taparlo con JS se elimina
el caso: o caben todas en una fila, o van en una sola columna.
El 850 no es a ojo: es el ancho medido al que cuatro pasos dejan de caber en una fila
(a 840px ya se parten). Si cambia el `minmax` o el `gap`, hay que volver a medirlo. */
@media (max-width:850px){
.ig-flow{grid-template-columns:1fr}
.ig-flow > div::after{right:auto;left:50%;top:auto;
bottom:calc(var(--ig-gap) * -1);height:var(--ig-gap);width:2px;transform:translateX(-50%)}
}
.ig-flow .n{width:26px;height:26px;border-radius:50%;background:var(--verde);color:#fff;
display:grid;place-items:center;font:700 14px/1 var(--font);margin:0 0 9px;font-variant-numeric:tabular-nums}
.ig-flow .t{font-weight:700;color:var(--titulo);font-size:15.5px;line-height:1.3;margin:0 0 4px}
.ig-flow .d{font-size:14px;color:var(--soft);line-height:1.45}
.ig-flow > div.hot{background:var(--ambar-bg);border-color:var(--ambar-bd)}
.ig-flow > div.hot .n{background:var(--ambar-d)}
.ig-cap{font-size:13.5px;color:var(--muted);margin-top:14px;text-align:center}