/* ============================================
   CONTENEDOR PRINCIPAL (opcional, para aislar)
   ============================================ */


/* ============================================
   UTILIDADES DE DISPLAY / FLEX / GRID
   ============================================ */
.eq-flex { display: flex; }
.eq-inline-flex { display: inline-flex; }
.eq-grid { display: grid; }
.eq-flex-wrap { flex-wrap: wrap; }
.eq-items-center { align-items: center; }
.eq-justify-center { justify-content: center; }
.eq-absolute { position: absolute; }
.eq-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.eq-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.eq-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eq-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eq-gap-0 { gap: 0; }
.eq-gap-1 { gap: 0.25rem; }
.eq-gap-2 { gap: 0.5rem; }
.eq-gap-3 { gap: 0.75rem; }

.eq-lg-col-span-3 { grid-column: span 3 / span 3; }
.eq-lg-col-span-2 { grid-column: span 2 / span 2; }

/* ============================================
   DIMENSIONES Y ASPECTO
   ============================================ */
.eq-w-full { width: 100%; }
.eq-aspect-3-2 { aspect-ratio: 3 / 2; }
.eq-object-cover { object-fit: cover; }

/* ============================================
   ESPACIADO (padding, margin)
   ============================================ */
.eq-py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.eq-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.eq-px-4 { padding-left: 1rem; padding-right: 1rem; }
.eq-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.eq-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.eq-py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }

.eq-mx-auto { margin-left: auto; margin-right: auto; }
.eq-mb-8 { margin-bottom: 2rem; }
.eq-mt-6 { margin-top: 1.5rem; }
.eq-ml-auto { margin-left: auto; }
.eq-ml-0\.5 { margin-left: 0.125rem; }

/* ============================================
   BORDES
   ============================================ */
.eq-border { border: 1px solid #e4e4e7; }
.eq-border-zinc-200 { border-color: #e4e4e7; }
.eq-border-l { border-left: 1px solid #e4e4e7; }
.eq-border-b { border-bottom: 1px solid #e4e4e7; }
.eq-border-dotted { border-bottom-style: dotted; }
.eq-rounded-lg { border-radius: 0.5rem; }

.eq-border-collapse { border-collapse: collapse; }

/* ============================================
   COLORES DE TEXTO Y FONDO
   ============================================ */
.eq-text-white { color: #ffffff; }
.eq-text-zinc-300 { color: #d4d4d8; }
.eq-text-zinc-400 { color: #a1a1aa; }
.eq-text-zinc-700 { color: #3f3f46; }
.eq-text-red { color: #dc2626; }    /* o el rojo que uses */
.eq-text-center { text-align: center; }
.eq-text-right { text-align: right; }

.eq-color-858585 { color: #858585; }  /* tu clase personalizada */

.eq-bg-black-30 { background-color: rgba(0,0,0,0.3); }
.eq-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.eq-transition-colors {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
.eq-text-sm { font-size: 0.875rem; line-height: 1.25; }
.eq-text-xs { font-size: 0.75rem; line-height: 1; }
.eq-text-lg { font-size: 1.125rem; line-height: 1.75; }
.eq-font-medium { font-weight: 500; }
.eq-font-bold { font-weight: 700; }
.eq-font-extrabold { font-weight: 800; }
.eq-uppercase { text-transform: uppercase; }
.eq-tracking-wider { letter-spacing: 0.05em; }
.eq-leading-tight { line-height: 1.25; }

.eq-text-16 { font-size: 16px; }

/* ============================================
   CLASES PERSONALIZADAS (thumbnails, botones, etc.)
   ============================================ */
.eq-action-btn {
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.eq-action-btn:hover { opacity: 0.85; }

.eq-thumb {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.eq-thumb.active { border-color: #007bff; }
.eq-thumb:hover { border-color: #007bff; }

.eq-vid-thumb-sm {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.eq-vid-thumb-sm:hover { border-color: #007bff; }



/* ============================================
   RESPONSIVE (breakpoints que usas)
   ============================================ */
@media (min-width: 640px) {
  .eq-sm-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .eq-lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .eq-lg-px-8 { padding-left: 2rem; padding-right: 2rem; }
}