/* ============================================
   utilities.css — helpers de layout y display
   ============================================ */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.flex   { display: flex; }
.iflex  { display: inline-flex; }
.grid   { display: grid; }
.hidden { display: none; }

.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-7 { gap: var(--sp-7); }

.wrap { flex-wrap: wrap; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.t-blue  { color: var(--c-blue); }
.t-terra { color: var(--c-terracotta); }
.t-mustard { color: var(--c-mustard); }
.t-sage  { color: var(--c-sage); }
.t-ink   { color: var(--c-ink); }
.t-cream { color: var(--c-cream); }

.bg-cream { background: var(--c-cream); }
.bg-bone  { background: var(--c-bone); }
.bg-blue  { background: var(--c-blue); }

.no-cursor { cursor: default !important; }

/* Visibilidad por breakpoint */
@media (max-width: 767.98px) {
  .sm\:hidden { display: none; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
}
@media (max-width: 1023.98px) {
  .lg\:show { display: none !important; }
}