/* ============================================================
   6-utilities.css — Clases de utilidad
   Método 5L — Sanación Energética Práctica
   ============================================================ */

/* Display */
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-flex    { display: flex !important; }
.d-grid    { display: grid !important; }
.d-inline  { display: inline !important; }

/* Flexbox */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Margin utilities */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.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-inline: auto; }

/* Padding utilities */
.py-4  { padding-block: var(--space-4); }
.py-8  { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.px-4  { padding-inline: var(--space-4); }
.px-8  { padding-inline: var(--space-8); }

/* Font weight */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Font size */
.fs-sm   { font-size: var(--size-sm); }
.fs-base { font-size: var(--size-base); }
.fs-lg   { font-size: var(--size-lg); }
.fs-xl   { font-size: var(--size-xl); }

/* Colors */
.text-gold    { color: var(--color-gold); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-gray-1); }
.text-dark    { color: var(--color-dark-1); }
.bg-dark      { background-color: var(--color-dark-1); }
.bg-light     { background-color: var(--color-light-1); }
.bg-gold      { background-color: var(--color-gold); }

/* Width */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.max-w-narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.overflow-hidden { overflow: hidden; }

/* Border radius */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-gold { box-shadow: var(--shadow-gold); }

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

/* Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Animaciones de carga */
.fade-in {
  animation: fadeInUtil 0.5s ease;
}

@keyframes fadeInUtil {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.slide-up {
  animation: slideUpUtil 0.5s ease;
}

@keyframes slideUpUtil {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Gold gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Divider */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.2), transparent);
  margin-block: var(--space-8);
}

/* Print utilities */
@media print {
  .no-print { display: none !important; }
  .premium-ticker { display: none !important; }
  .cookie-banner { display: none !important; }
  .navbar { position: relative; }
}