/* ============================================================
   utilities.css — Fundación 20 de Enero · Corazón Sabanero
   Clases de propósito único. No para componentes complejos.
   Requiere: tokens.css
   ============================================================ */

/* ── Display ── */
.d-flex         { display: flex; }
.d-grid         { display: grid; }
.d-block        { display: block; }
.d-none         { display: none; }

/* ── Flexbox helpers ── */
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }
.gap-sm         { gap: var(--space-3); }
.gap-md         { gap: var(--space-4); }
.gap-lg         { gap: var(--space-6); }

/* ── Espaciado ── */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Ancho ── */
.w-full { width: 100%; }
.max-w-prose { max-width: 68ch; }

/* ── Colores de fondo ── */
.bg-crema  { background: var(--c-surface); }
.bg-beige  { background: var(--c-surface-alt); }
.bg-tierra { background: var(--c-text-primary); }
.bg-verde  { background: var(--color-verde-oscuro); }

/* ── Alineación vertical ── */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }

/* ── Texto ── */
.font-display { font-family: var(--font-display); }
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }
.italic       { font-style: italic; }
.uppercase    { text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Bordes redondeados ── */
.rounded      { border-radius: var(--radius); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Sombras ── */
.shadow-soft  { box-shadow: var(--shadow-soft); }
.shadow-card  { box-shadow: var(--shadow-card); }

/* ── Separador ── */
.divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--space-8) 0;
}

/* ── Lista limpia ── */
.list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Lista con checks ── */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.check-list li {
  display:     flex;
  gap:         var(--space-3);
  align-items: flex-start;
  color:       var(--c-text-secondary);
  font-size:   var(--text-base);
  line-height: 1.6;
}
.check-list li svg {
  flex-shrink:  0;
  margin-top:   3px;
  color:        var(--c-brand-secondary);
  width:        20px;
  height:       20px;
}