/* Garantía: pasados 800ms cualquier imagen debe ser visible */
.hc-img.img-loaded {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════
   CARRUSEL DE PROMOS — estilo Amazon Prime
   ══════════════════════════════════════════════ */
.home-promos {
  width: 100%;
  padding: 0 14px;
  margin: 14px 0 8px;
}
body:not(.modo-negocio) .home-promos { display: none }

.promos-carousel {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.promos-track {
  display: flex;
  width: 100%;
  height: 110px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.promos-track::-webkit-scrollbar { display: none }

.promo-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.promo-slide::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  pointer-events: none;
}

.promo-icono {
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.promo-textos {
  flex: 1;
  min-width: 0;
  z-index: 1;
}
.promo-titulo {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.promo-sub {
  font-size: 12.5px;
  font-weight: 500;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-cta {
  flex-shrink: 0;
  padding: 7px 14px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.3);
}

/* Dots */
.promos-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.promo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.promo-dot.active {
  width: 22px;
  border-radius: 100px;
  background: rgba(255,255,255,.95);
}
.promo-dot:hover { background: rgba(255,255,255,.75) }

/* Móvil — más compacto */
@media (max-width: 480px) {
  .home-promos { padding: 0 10px; margin: 10px 0 6px }
  .promos-track { height: 96px }
  .promo-slide { padding: 14px 16px; gap: 12px }
  .promo-icono { font-size: 36px }
  .promo-titulo { font-size: 15px }
  .promo-sub { font-size: 11.5px }
  .promo-cta { padding: 5px 11px; font-size: 11px }
}

/* ══════════════════════════════════════════════
   FIX: chip-track overflow garantizado horizontal
   ══════════════════════════════════════════════ */
.chip-track {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* ══════════════════════════════════════════════
   PROGRESSIVE IMAGE LOADING (LQIP)
   El thumb va abajo blureado; el full encima opacity:0 hasta cargar.
   ══════════════════════════════════════════════ */
.hc-img-wrap .hc-img-low {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) saturate(1.1);
  transform: scale(1.06);     /* esconde bordes del blur */
  z-index: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hc-img-wrap .hc-img {
  position: relative;
  z-index: 2;
}

/* También en menu sidebar */
.mc-img-wrap .mc-img-low {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) saturate(1.1);
  transform: scale(1.06);
  z-index: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.mc-img-wrap .mc-img {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════
   QUITAR GLOW de acordeones (ahorra RAM/GPU)
   El badge/pelotita roja del chip queda como único indicador.
   ══════════════════════════════════════════════ */
.home-cat-row.cat-active,
.acc-section.cat-active,
.rail-btn.rail-cat-active {
  animation: none !important;
  box-shadow: none !important;
  background: transparent !important;
}