:root {
  --rc-brand: var(--brand, #21a607);
  --rc-elev: var(--elev, #0f1115);
  --rc-stroke: var(--stroke, #1f2430);
  --rc-text: var(--text, #e6ebf5);
  --rc-bg: var(--bg, #0f1115);
  --rc-gradient-brand: linear-gradient(135deg, var(--rc-brand), color-mix(in srgb, var(--rc-brand) 35%, white));
  /* --- VELOCIDAD AJUSTADA --- */
  --rc-marquee-speed: 18s;
}

.rc-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc-brand) 8%, var(--rc-elev)), color-mix(in srgb, var(--rc-brand) 6%, var(--rc-elev)));
  border: 1px solid color-mix(in srgb, var(--rc-brand) 20%, var(--rc-stroke));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(33, 166, 7, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
  margin: clamp(16px, 3vw, 28px) 0;
  color: var(--rc-text);
}

.rc-marquee::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc-brand) 40%, transparent) 50%, transparent);
  z-index: 1;
}

.rc-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc-brand) 8%, var(--rc-elev)));
  pointer-events: none;
  z-index: 2;
}

.rc-marquee__fade-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--rc-brand) 8%, var(--rc-elev)));
  pointer-events: none;
  z-index: 2;
}

/* --- CAMBIO CRÍTICO AQUÍ --- */
/* La animación solo se aplica si la marquesina NO tiene la clase --loading */
.rc-marquee:not(.rc-marquee--loading) .rc-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  white-space: nowrap;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px);
  animation: rc-scroll-left var(--rc-marquee-speed) linear infinite;
  will-change: transform;
}

/* Estilo base para el track (sin animación) */
.rc-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  white-space: nowrap;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px);
}

.rc-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: clamp(.95rem, 1vw + .5rem, 1.1rem);
  min-width: max-content;
  color: var(--rc-text);
}

.rc-marquee__icon {
  font-family: 'Material Icons';
  font-size: 1.4rem;
  line-height: 1;
  color: var(--rc-brand);
  background: color-mix(in srgb, var(--rc-brand) 15%, transparent);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--rc-brand) 25%, transparent);
}

.rc-marquee__highlight {
  color: var(--rc-brand);
  font-weight: 800;
  text-shadow: 0 0 8px color-mix(in srgb, var(--rc-brand) 40%, transparent);
}

.rc-marquee__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rc-gradient-brand);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(33, 166, 7, .3);
}

/* Pausar al pasar el mouse solo si la animación está activa */
.rc-marquee:not(.rc-marquee--loading):hover .rc-marquee__track {
  animation-play-state: paused;
}

@keyframes rc-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .rc-marquee__track {
    gap: 18px;
  }
  .rc-marquee::after,
  .rc-marquee__fade-left {
    width: 36px;
  }
  .rc-marquee {
    border-radius: 12px;
  }
}

html[data-theme="light"] .rc-marquee {
  --rc-elev: #fff;
  --rc-stroke: #e6e9ef;
  --rc-text: #0c111d;
  --rc-bg: #f7f8fb;
}