/* El btn-group dentro del track — mismo estilo que el portal Odín
   Pero con !important porque configs de negocios pueden sobreescribir .btn-group */
.chip-track .chip-btn-group,
.chip-btn-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
}

/* Cada chip — hereda .g-btn del portal, solo añadimos badge */
.chip-btn-group .chip-cat {
  position: relative;
  /* hereda padding, font, transitions de .g-btn ya en el CSS */
}
.chip-btn-group .chip-cat .chip-icon {
  width: 18px;
  height: 18px;
}
.chip-btn-group .chip-cat .chip-emoji {
  font-size: 15px;
  line-height: 1;
}

/* Chip ACTIVO (con productos en carrito) — overlay glow */
.chip-btn-group .chip-cat.chip-active {
  background: var(--surface);
  color: var(--red);
  box-shadow:
    0 0 0 1.5px var(--red),
    0 0 10px 2px color-mix(in srgb, var(--red) 35%, transparent),
    0 1px 4px rgba(0,0,0,.08);
  animation: chipPulse 2.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes chipPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px var(--red),
      0 0 10px 2px color-mix(in srgb, var(--red) 35%, transparent),
      0 1px 4px rgba(0,0,0,.08);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--red),
      0 0 16px 4px color-mix(in srgb, var(--red) 50%, transparent),
      0 1px 4px rgba(0,0,0,.08);
  }
}

/* Badge pelotita roja flotante */
.chip-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  opacity: 0;
  transform: scale(0);
  transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  z-index: 3;
}
.chip-badge.visible {
  opacity: 1;
  transform: scale(1);
  animation: badgePop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop {
  0%   { transform: scale(0) rotate(-20deg) }
  60%  { transform: scale(1.25) rotate(8deg) }
  100% { transform: scale(1) rotate(0) }
}

/* ══════════════════════════════════════════════
   SUBRAYADO de productos seleccionados (grupo continuo)
   El subrayado va debajo del grupo, conectado por una línea
   usando ::after. Usa --red2 (color secundario del negocio).
   ══════════════════════════════════════════════ */
.home-card.is-selected {
  position: relative;
}
.home-card.is-selected::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  background: var(--red2, var(--red));
  box-shadow: 0 1px 6px color-mix(in srgb, var(--red2, var(--red)) 50%, transparent);
  z-index: 1;
}
/* Extremo izquierdo redondeado */
.home-card.is-selected.first-selected::after {
  left: 6px;
  border-radius: 3px 0 0 3px;
}
/* Extremo derecho redondeado */
.home-card.is-selected.last-selected::after {
  right: 6px;
  border-radius: 0 3px 3px 0;
}
/* Si una sola card está seleccionada: ambos extremos redondeados */
.home-card.is-selected.first-selected.last-selected::after {
  left: 6px;
  right: 6px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════════
   TEXTO AUTOADAPTABLE en modo negocio
   El hero del negocio tiene fondo oscuro (banner blureado),
   así que el texto debe ser claro siempre que el negocio no
   sobreescriba explícitamente con !important.
   ══════════════════════════════════════════════ */
body.modo-negocio .home-title {
  color: var(--negocio-text-light, #f5f0e6);
  text-shadow: 0 2px 8px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
}
body.modo-negocio .home-sub {
  color: var(--negocio-text-light, #e8e0d4);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  opacity: .95;
}
body.modo-negocio .odin-back-hint {
  color: var(--negocio-text-muted, #c9beaa);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════
   FIX: cards invisibles en móvil hasta tocar pantalla
   - animation-fill-mode: forwards en vez de both
   - Fallback con IntersectionObserver desde JS
   - Las imágenes no quedan en opacity 0 si onload no dispara
   ══════════════════════════════════════════════ */
.home-card {
  /* Si la animación falla, queda visible por defecto */
  opacity: 1;
}

.hc-img {
  /* Si onload no dispara en móvil con lazy, la imagen igual se muestra */
  transition: opacity .3s ease;
}