.advertisement{
  width: 100%;
  background: linear-gradient(90deg, #048d98, #6639c5);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  height: 30px;
  padding: 4px 0;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

.adv_contain {
  display: inline-flex;
  gap: 60px;
  align-items: center;
  /* la animación se configurará desde JS con la variable --move y la duración */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.adv_contain span {
  padding-right: 0; /* ya usamos gap */
  font-size: 16px;
  line-height: 1;
  color: #ffffff !important;
}

/* keyframes usan la variable --move, que el script define en px */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--move))); }
}

/* ajustes responsive */
@media (max-width: 650px) {
  .advertisement {
    padding: 0;
    height: 24px;
  }
  .adv_contain span {
    font-size: 13px;
  }
}