/* React puede recrear el UL; este selector cubre el caso data-logo-rail */
ul.chips[data-logo-rail='1'] {
  display: none !important;
}

/* Logo rails — auto carousel for marcas / medios de pago */
.logo-rail {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-rail__track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: logo-rail-scroll 36s linear infinite;
  will-change: transform;
}
.logo-rail:hover .logo-rail__track,
.logo-rail:focus-within .logo-rail__track {
  animation-play-state: paused;
}
.logo-rail__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 56px;
  padding: 10px 18px;
  border-radius: 14px;
  /* Fondo claro: los logos oficiales suelen ser oscuros o a color */
  background: #f5f0e6;
  box-shadow: inset 0 0 0 1px rgba(245, 240, 230, 0.12);
}
.logo-rail__item img {
  display: block;
  max-height: 34px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes logo-rail-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-rail__track { animation: none; flex-wrap: wrap; width: auto; max-width: 100%; }
  .logo-rail { mask-image: none; -webkit-mask-image: none; overflow: visible; }
}