/* =====================================================================
   value-props.css — Docokids value propositions grid.

   A borderless grid item: title + short body, no card, no number. The title
   sets its own size token (--fs-h3) so it is independent of the global h3
   rule. Every value is a var(--token).
   ===================================================================== */
.value-props-grid {
  display: grid;
  grid-template-columns: 1fr;       /* móvil: 1 columna, apilado */
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .value-props-grid { grid-template-columns: repeat(2, 1fr); }
  /* Subgrid: cada prop comparte las dos filas (título / cuerpo) de la grilla
     padre, así los títulos se alinean entre columnas y los cuerpos también —
     por contenido, sin reservar espacio cuando el título es de una sola línea. */
  /* row-gap: 0 porque el gap del padre (space-5) se hereda en el subgrid; el
     espacio título→cuerpo lo da el margin-bottom del título (space-3). */
  .value-prop { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
}
@media (min-width: 992px) {
  .value-props-grid { grid-template-columns: repeat(3, 1fr); }
}
.value-prop__title {
  /* size token only; line-height (1.15) and letter-spacing (-0.01em) come from
     the global h3 rule in base.css. */
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}
.value-prop__body {
  color: var(--gris-secundario);
  max-width: 36ch;
}