/* =========================================================================
   Barra de anuncios (marquesina) del catálogo.
   Autónoma: sirve igual en el catálogo y en la vista previa del panel.
   Los colores y la tipografía llegan como variables desde el HTML:
   --ann-bg, --ann-fg, --ann-font, --ann-style.
   ========================================================================= */
.announcement {
  background: var(--ann-bg, #eab2fd);
  color: var(--ann-fg, #2c2c2c);
  font-family: var(--ann-font, system-ui, sans-serif);
  font-style: var(--ann-style, normal);
  font-size: .92rem; font-weight: 500; letter-spacing: .02em; line-height: 1;
  padding: 9px 0; overflow: hidden;
}
.announcement .ann-track {
  display: flex; width: max-content; will-change: transform;
  animation: ann-scroll 20s linear infinite;
}
.announcement .ann-group { display: flex; flex: 0 0 auto; white-space: nowrap; }
.announcement .ann-item { padding-right: 3rem; }

@keyframes ann-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Al pasar el mouse se frena, para poder leer tranquilo. */
.announcement:hover .ann-track { animation-play-state: paused; }

/* La barra tiene que desplazarse siempre: si queda quieta solo se lee el
   primer anuncio. Por eso se sostiene el movimiento aunque el sistema pida
   menos animaciones (client.css apaga todas las animaciones del sitio con
   !important en ese caso, y esa regla también alcanzaría a la barra). */
@media (prefers-reduced-motion: reduce) {
  .announcement .ann-track { animation-duration: 20s !important; }
}