/* Faixa deslizante */
.auvp-marquee {
  position: relative;
  padding-block: clamp(0.75rem, 1.4vw, 1.2rem);
  border-block: 1px solid var(--line-soft);
  background: var(--paper-2);
  overflow: hidden;
  user-select: none;
}
.auvp-marquee__track {
  display: flex;
  width: max-content;
  animation: auvp-slide 34s linear infinite;
}
/* O trilho são dois grupos iguais e a animação anda -50%, ou seja, um
   grupo inteiro: quando o primeiro sai, o segundo está exatamente onde
   ele começou e o laço não tem emenda.
   O `min-width: 100vw` é o que faltava. Sem ele, um grupo media só o
   texto que tem dentro (~1870px) e, em tela mais larga que isso, sobrava
   um buraco vazio atravessando a faixa uma vez por volta. Com ele, um
   grupo sozinho sempre cobre a tela, em qualquer monitor. */
.auvp-marquee__grupo {
  display: flex;
  flex: none;
  min-width: 100vw;
  justify-content: space-around;
}
@keyframes auvp-slide { to { transform: translateX(-50%); } }
.auvp-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
}
.auvp-marquee__item::after {
  content: "";
  width: clamp(5px, 0.5vw, 7px);
  height: clamp(5px, 0.5vw, 7px);
  border-radius: 50%;
  background: var(--verde);
  flex: none;
}