/* Utilities */

.hidden {
  display: none !important;
}

/* Responsive Visibility */
@media (min-width: 768px) {
  .hidden-md {
    display: none !important;
  }

  .flex-md {
    display: flex !important;
  }

  .block-md {
    display: block !important;
  }
}

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

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

/* Spacing Helpers */
.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

/* Flex Helpers */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

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

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-12 {
  gap: 3rem;
}

/* Typography Helpers from Figma */
.font-thin {
  font-weight: 100;
}

.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

/* Shadows */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Material Icons Helper */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
}

/* Sizing */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-10 {
  width: 2.5rem;
}

.h-10 {
  height: 2.5rem;
}

/* Positioning */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Object Fit */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

/* Overflow & Radius */
.overflow-hidden {
  overflow: hidden;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded {
  border-radius: 0.25rem;
}

/* ── Extra utilities ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.animate-pulse { animation: pulse-dot 1.5s ease-in-out infinite; }
.aspect-video { aspect-ratio: 16 / 9; }
.border-t { border-top: 1px solid #E5E7EB; }
.border-b { border-bottom: 1px solid #E5E7EB; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.min-h-screen { min-height: 100vh; }
.backdrop-blur { backdrop-filter: blur(8px); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.max-w-none { max-width: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.transition-all { transition: all 0.3s ease; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

/* Empty states — UI states cuando no hay contenido configurado */
.rh-empty-state {
  display: block;
  font-size: 0.875rem;
  color: var(--rh-gray-muted, #6b7280);
  font-style: italic;
}
.rh-empty-state__text {
  display: block;
}
.rh-empty-state__hint {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}
.rh-empty-state--inline {
  display: inline;
  font-style: normal;
}
.rh-empty-state--mega {
  padding: 1rem;
  text-align: center;
}
.rh-empty-state--mega .rh-empty-state__hint {
  margin-top: 0.5rem;
}
.trending-bar--empty .rh-empty-state {
  font-style: normal;
  font-size: 0.8125rem;
}
.trending-bar--empty .rh-empty-state__hint {
  margin-left: 0.5rem;
  display: inline;
}
.site-footer .rh-empty-state {
  color: rgba(255, 255, 255, 0.7);
}
.site-footer .rh-empty-state__hint {
  color: rgba(255, 255, 255, 0.55);
}

/* Nav/mobile: empty state como ítem de lista */
.nav-item.rh-empty-state,
.mobile-nav-list .rh-empty-state {
  list-style: none;
  padding: 0.5rem 0;
}
.nav-item.rh-empty-state .rh-empty-state__text,
.mobile-nav-list .rh-empty-state .rh-empty-state__text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
}
.mega-menu-footer-links .rh-empty-state--inline {
  font-size: 0.8125rem;
  color: var(--rh-gray-muted, #6b7280);
}