/* Pero sí dejamos el label del acordeón en color del negocio para que se note */
.home-cat-row.cat-active .home-section-label,
.acc-section.cat-active .acc-name {
  color: var(--red);
  font-weight: 700;
}

/* Y un sutil indicador en el rail: solo dejar color del icono */
.rail-btn.rail-cat-active {
  color: var(--red) !important;
}

/* ══════════════════════════════════════════════
   MODO NEGOCIO — Hero textual oculto, carrusel reemplaza
   ══════════════════════════════════════════════ */
/* Ocultar hero (logo + título + sub) en modo negocio
   El primer slide del carrusel ya muestra esa información */
body.modo-negocio .home-hero {
  display: none !important;
}

/* El hint "Toca ⚡ para volver" — solo modo negocio */
.odin-back-hint.negocio-only { display: none; text-align: center; margin: 6px 0 4px; font-size: 11px; color: var(--text-muted, #888); }
body.modo-negocio .odin-back-hint.negocio-only { display: block; }

/* En modo negocio, las promos van arriba sin margen extra arriba */
body.modo-negocio .home-promos {
  margin-top: 6px;
  display: block;
}

/* ══════════════════════════════════════════════
   WELCOME SLIDE — logo del negocio en círculo
   ══════════════════════════════════════════════ */
.promo-slide.promo-welcome {
  padding: 16px 22px;
}
.promo-welcome .promo-logo-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.promo-welcome .promo-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-welcome .promo-titulo {
  font-size: 19px;
  font-weight: 700;
}
.promo-welcome .promo-sub {
  font-size: 13px;
  opacity: .92;
}

/* Móvil — welcome más compacto */
@media (max-width: 480px) {
  .promo-welcome .promo-logo-wrap { width: 48px; height: 48px }
  .promo-welcome .promo-titulo { font-size: 16px }
  .promo-welcome .promo-sub { font-size: 11.5px }
}

/* ══════════════════════════════════════════════
   FIX: Color del label del acordeón activo
   Antes usaba var(--red) que en negocios oscuros es invisible.
   Ahora usa color CLARO derivado.
   ══════════════════════════════════════════════ */
body.modo-negocio .home-cat-row.cat-active .home-section-label,
body.modo-negocio .acc-section.cat-active .acc-name {
  color: var(--red2, var(--red)) !important;
  font-weight: 700;
}
/* En el portal (claro) sí usa el primario */
body:not(.modo-negocio) .home-cat-row.cat-active .home-section-label,
body:not(.modo-negocio) .acc-section.cat-active .acc-name {
  color: var(--red);
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   CARRUSEL — Drag con mouse en PC
   ══════════════════════════════════════════════ */
.promos-track {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.promos-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;  /* desactivar smooth durante drag */
}

/* Prevenir solo el arrastre NATIVO de imágenes (ghost del navegador),
   pero NO bloquear pointer-events sino los eventos no llegarían al track */
.promos-track img,
.promos-track a {
  -webkit-user-drag: none;
  user-drag: none;
}