/* ---------------------------------------------------------------------------
   modelo-negocio-cards.css — piezas compartidas por las dos preguntas de
   modelo de negocio: las tarjetas ilustradas de "¿a quién le vende?" y los
   subgrupos de "¿cómo entrega el valor y cobra?".

   COMPARTIDO por los dos triages: el del financiador declara a quién quiere
   vender el portafolio, el del proyecto a quién le vende de verdad. Mismas
   opciones, mismos data-alias, mismo dibujo — ahí está el matching.

   Los <symbol> del sprite van inline en cada HTML (g-tienda, g-empresa,
   g-persona, g-alcaldia, g-ong, g-productor, g-flecha).

   La regla .mb.req es inerte del lado del proyecto: solo el financiador
   distingue preferencia de requisito.
--------------------------------------------------------------------------- */

/* ── Subgrupos de "cómo entrega el valor y cobra" ──────────────────────
   Son varios .mo dentro del mismo .qg: el colector los junta igual, porque
   busca todos los .mb.sel del grupo. */
.mo-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--triage-muted);
  margin: 15px 0 8px;
}
.mo-sub:first-of-type { margin-top: 2px; }

/* Aclaración dentro de un chip ("agrícola, pecuaria, forestal…"): baja de peso
   para que no compita con la etiqueta. */
.mo .mb i { font-style: normal; opacity: .62; font-size: 12.5px; }
.mo .mb.sel i { opacity: .8; }

/* ── Tarjetas ilustradas (Q09) ─────────────────────────────────────────
   Siguen siendo .mb dentro de .mo: heredan el ciclo de 3 estados y el
   conteo de required-gate. Solo cambia la forma, de píldora a tarjeta. */
.mo-ill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 10px;
}
.mo-ill .mb {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 11px;
  padding: 18px 14px 15px;
  border-radius: 18px;
  text-align: center;
  line-height: 1.35;
}
.mo-ill .mb b { font-weight: 700; }

.mo-ill .ill {
  height: 40px; width: auto; max-width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* El dibujo pesa menos que el texto hasta que la opción se elige. */
  opacity: .55;
  transition: opacity .15s ease;
}
.mo-ill .mb:hover .ill,
.mo-ill .mb.sel  .ill { opacity: 1; }

/* La flecha va más tenue que los dos extremos: es conector, no sujeto. */
.mo-ill .ill use[href="#g-flecha"] { opacity: .6; }

/* En tarjeta, el sufijo " · requisito" de la píldora no cabe: se reemplaza
   por una etiqueta en la esquina. */
.mo-ill .mb.req::after { content: none; }
.mo-ill .mb.req::before {
  content: 'requisito';
  position: absolute; top: 9px; right: 11px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .75;
}