/* mx-afore — figura "igual vs cambia" del hub de marca (/sura, /banorte, … las diez fichas).
 *
 * Era un SVG de 720x456 con dos columnas de 344px clavadas y renglones de 42px de alto. Para que
 * el texto entrara, la función PHP lo partía a mano en dos líneas de 38 caracteres; de ahí que
 * frases como "Cuánto te toca en un retiro por desempleo, por matrimonio o al pensionarte" se
 * leyeran cortadas en un lugar arbitrario. Y como .fig--wide obliga a min-width:640px, en un
 * teléfono de 412px la figura pedía scroll lateral: la columna derecha —la única que la persona
 * decide— quedaba directamente fuera de la pantalla.
 *
 * En HTML el corte de línea lo hace el navegador con el ancho real, y las dos columnas caen una
 * debajo de la otra cuando no entran. Se reusa .figh__duo de figuras.css: este es exactamente el
 * arquetipo para el que existe.
 *
 * ⚠️ Sobre "la izquierda" / "la derecha" de la bajada y del pie: el texto es contenido YMYL
 * verificado y se conserva palabra por palabra, pero apiladas ya no hay izquierda ni derecha.
 * Por eso el orden del DOM (ley primero) es el mismo que el visual y NO se reordena con CSS:
 * apiladas se leen arriba/abajo en el mismo orden en que el texto las nombra.
 */

/* ---------- Las dos columnas ---------- */

/* --fc es el acento de la columna, la misma convención que .figh__caja--acento en figuras.css.
   Pinta la banda de la cabecera y el glifo de cada renglón, que es lo que hace legible de un
   vistazo cuál columna estás leyendo cuando están apiladas y la otra quedó fuera de cuadro. */
.ivc__col{--fc:var(--brand);border:1.5px solid var(--border);border-radius:13px;overflow:hidden;
  background:var(--surface-alt)}
/* El verde de acción (--accent, #5fa544) da 3,0:1 con blanco y el título de la banda son 14,5px
   en negrita: texto normal para WCAG, que pide 4,5:1. --accent-t es el mismo verde ya oscurecido
   para esto y llega a 5,0:1. El motivo está escrito en app.css:29. */
.ivc__col--marca{--fc:var(--accent-t)}

.ivc__cab{padding:11px 16px 13px;background:var(--fc);color:#fff}
.ivc__kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.3;
  opacity:.85;color:inherit}
/* `h1,h2,h3,h4{color:var(--brand-d)}` (app.css:80) también alcanza acá adentro y pintaba el
   título azul oscuro sobre la banda azul. El selector va con el padre para ganarle en
   especificidad al selector de tipo; el margin de esa misma regla hay que anularlo igual. */
.ivc__cab .ivc__tit{margin:2px 0 0;font-size:14.5px;font-weight:800;line-height:1.3;
  color:inherit;text-wrap:balance}

/* ---------- Los renglones ---------- */

.ivc__lista{list-style:none;margin:0;padding:14px 12px;display:grid;gap:6px}
/* 22px para el glifo y el resto para el texto: la misma medida que .figh__notas y .figh__paso
   usan para su disco, así que los renglones de esta figura alinean con los del resto del sitio.
   align-items:start y no center porque una frase de tres líneas descolgaría el glifo al medio. */
.ivc__fila{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
  padding:9px 11px;border-radius:9px;background:var(--tile)}
/* El glifo es decorativo (va aria-hidden en el HTML) y repite lo que dice la cabecera. Sobre
   --tile, --accent daría 2,7:1 y no se vería; con --fc hereda el tono ya corregido. */
.ivc__ico{color:var(--fc);font-size:15px;font-weight:800;line-height:1.5;text-align:center}
.ivc__txt{font-size:13px;line-height:1.5;color:var(--ink);min-width:0}

@media (max-width:720px){
  .ivc__cab{padding:10px 13px 12px}
  .ivc__cab .ivc__tit{font-size:14px}
  .ivc__lista{padding:12px 10px}
  .ivc__fila{padding:9px 10px;gap:8px}
}