/**
 * Cinta de avisos. Hoja aparte (como en Tiza) porque Safari iOS
 * pierde el translate3d si el keyframe solo viaja en el CSS empaquetado.
 */
@keyframes trio-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.trio-live-banner-track {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation-name: trio-ticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.trio-live-banner:hover .trio-live-banner-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .trio-live-banner-track {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}