.ticker{
  --gap: 0px;                 /* espacio a cada lado del separador */
  --duration: 28s;             /* velocidad del loop */
  overflow: hidden;
  width: 100%;
  user-select: none;
}

.ticker__inner{
  display: flex;               /* dos listas iguales, una tras otra */
  width: max-content;
  animation: ticker-scroll var(--duration) linear infinite;
  will-change: transform;
}

.ticker__list{
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-right: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ítems */
.ticker__list li{
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: .2px;
}

/* Inserta el separador “|” entre elementos (con espacio controlado por --gap) */
.ticker__list li + li{
  position: relative;
  margin-left: calc(var(--gap) + 0px);  /* 10 px espacio antes del | */
}
.ticker__list li + li::before{
  content: "|";
  position: absolute;
  left: calc(-0px - var(--gap));  /* 10px */
  top: 50%;
  transform: translateY(-50%);
}

/* La magia del loop: al tener dos grupos iguales, movemos -50% del ancho total */
@keyframes ticker-scroll{
  to { transform: translateX(-50%); }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .ticker__inner{ animation: none; }
}