/*
  Lista de datos clave (Programa: alcance; Cómo funciona: condiciones generales)
  <dl> con término y descripción; en tablet y escritorio, en dos columnas.

  <dl class="facts">
    <div class="facts__item"><dt>…</dt><dd>…</dd></div>
  </dl>
*/

.facts {
  display: grid;
  /* min-width: 0 y minmax evitan que el texto ampliado ensanche la columna (WCAG 1.4.4) */
  min-width: 0;
  margin-top: var(--padding-4);
  border-top: 1px solid var(--rule);
}

.facts__item {
  display: grid;
  gap: var(--gap-1);
  padding-block: var(--padding-4);
  border-bottom: 1px solid var(--rule);
}

.facts__item dt {
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  font-weight: var(--font-weight-semibold);
}

.facts__item dd {
  margin: 0;
  color: var(--text-muted);
}

.facts__item dt,
.facts__item dd {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Columnas proporcionales (1/3 término, 2/3 descripción): escalan con el texto ampliado */
@media (min-width: 768px) {
  .facts__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--gap-6);
  }
}