/* =========================
   UTILIDADES DE COLOR
========================= */
.text-crema   { color: var(--crema); }
.text-negro   { color: var(--negro); }
.text-naranja { color: var(--naranja); }

.bg-crema     { background-color: var(--crema); }
.bg-negro     { background-color: var(--negro); }
.bg-naranja   { background-color: var(--naranja); }
.bg-blanco   { background-color: var(--blanco); }

/* =========================
   BOTONES
========================= */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 9999px;
}

.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-family: 'BauBau', sans-serif;
  font-size: var(--font-size-p);
  font-weight: var(--fw-bold);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.btn-full { width: 100%; }

.btn-naranja {
  background: var(--naranja);
  color: var(--crema);
}
.btn-naranja:hover {
  background: var(--negro);
  color: var(--crema);
}

.btn-negro {
  background: var(--negro);
  color: var(--crema);
}
.btn-negro:hover {
  background: var(--naranja);
  color: var(--crema);
}

.btn-outline {
  background: transparent;
  color: var(--negro);
  border: 2px solid var(--negro);
}
.btn-outline:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* =========================
   SPACING (márgenes y padding rápidos)
========================= */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }

@media (max-width: 767px) {
.mb-6 { margin-bottom: var(--space-4) !important; }
.mb-7 { margin-bottom: var(--space-5) !important; }
.mb-8 { margin-bottom: var(--space-6) !important; }
}

.p-1  { padding: var(--space-1) !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-7  { padding: var(--space-7) !important; }
.p-8  { padding: var(--space-8) !important; }

/* =========================
   GRID SYSTEM
========================= */
.grid {
  display: grid;
  gap: var(--gap-grid);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-center {
  display: grid;
  place-items: center;
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =========================
   FLEX SYSTEM
========================= */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-wrap { flex-wrap: wrap; }

/* =========================
   ALIGN / JUSTIFY
========================= */
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }

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

/* =========================
   WIDTH HELPERS
========================= */
.w-100 { width: 100%; }
.w-50  { width: 50%; }
.max-w-1200 { max-width: 1200px; margin:0 auto;}

/* =========================
   TIPOGRAFÍA HELPERS
========================= */
.text-h1 { font-size: var(--font-size-h1); font-weight: var(--fw-bold); }
.text-h2 { font-size: var(--font-size-h2); font-weight: var(--fw-bold); }
.text-h3 { font-size: var(--font-size-h3); font-weight: var(--fw-bold); }
.text-p  { font-size: var(--font-size-p); font-weight: var(--fw-regular); }
.text-small { font-size: var(--font-size-small); }

.fw-regular { font-weight: var(--fw-regular); }
.fw-bold    { font-weight: var(--fw-bold); }