/* ==========================================================
   UTILITIES — helpers responsive, animaciones, a11y
   ========================================================== */

/* ============================
   DISPLAY
   ============================ */

.hidden          { display: none !important; }
.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;
}
.flex            { display: flex; }
.flex-center     { display: flex; align-items: center; justify-content: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-col        { display: flex; flex-direction: column; }
.grid            { display: grid; }

/* ============================
   TEXTO
   ============================ */

.text-center     { text-align: center; }
.text-left       { text-align: left; }
.text-right      { text-align: right; }
.text-balance    { text-wrap: balance; }

.color-violeta   { color: var(--violeta); }
.color-dorado    { color: var(--dorado); }
.color-tierra    { color: var(--tierra); }
.color-crema     { color: var(--crema-calido); }
.color-arena     { color: var(--arena); }

/* ============================
   ESPACIADO
   ============================ */

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ============================
   ANIMACIONES DE ENTRADA (fade-up)
   ============================ */

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays para stagger */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }

/* Fade-in simple */
.fade-in {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.fade-in.visible {
  opacity: 1;
}

/* Scale-up */
.scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}

.scale-up.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================
   IMAGEN RESPONSIVE HELPERS
   ============================ */

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aspect-16-9    { aspect-ratio: 16/9; }
.aspect-4-3     { aspect-ratio: 4/3; }
.aspect-3-4     { aspect-ratio: 3/4; }
.aspect-square  { aspect-ratio: 1/1; }

/* ============================
   RESPONSIVE HELPERS
   ============================ */

/* Ocultar en mobile */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* Ocultar en desktop */
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ============================
   SEPARADORES
   ============================ */

.divider {
  width: 60px;
  height: 2px;
  background: var(--violeta);
  border-radius: 2px;
  margin-block: var(--sp-6);
}

.divider--center {
  margin-inline: auto;
}

.divider--gold {
  background: var(--dorado);
}

/* ============================
   MAX-WIDTH HELPERS
   ============================ */

.max-60  { max-width: 60ch; }
.max-50  { max-width: 50ch; }
.max-40  { max-width: 40ch; }
.mx-auto { margin-inline: auto; }

/* ============================
   CURSOR CUSTOM DESKTOP
   ============================ */

@media (hover: hover) and (pointer: fine) {
  .cursor-custom {
    cursor: none;
  }

  #custom-cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity var(--duration-fast);
    transform: translate(-50%, -50%);
    animation: cursor-spin 8s linear infinite;
  }

  #custom-cursor.visible {
    opacity: 0.6;
  }

  @keyframes cursor-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }
}

/* ============================
   PRINT
   ============================ */

@media print {
  .site-header,
  .sticky-wa,
  .site-footer { display: none; }
}