/* ─── Marquee Widget — marquee.css ──────────────────────────────────
   Sin dependencias. Variables CSS para control por instancia.
   ────────────────────────────────────────────────────────────────── */

.mw-wrapper {
  --mw-gap:        40px;
  --mw-fade:       8%;
  --mw-fade-color: #ffffff;

  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Fade en bordes — activado por JS via data-fade="true" */
.mw-wrapper.has-fade {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--mw-fade),
    black calc(100% - var(--mw-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--mw-fade),
    black calc(100% - var(--mw-fade)),
    transparent 100%
  );
}

/* ─── TRACK ─────────────────────────────────────────────────────── */
/*
  Arquitectura del loop seamless:
  .mw-track contiene [original + clon].
  La animación mueve el track al -50% exacto (= ancho del original).
  JS calcula la duración según velocidad real en px/seg.
*/
.mw-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  gap: var(--mw-gap);
}

.mw-track[data-dir="left"] {
  animation: mw-left linear infinite;
}

.mw-track[data-dir="right"] {
  animation: mw-right linear infinite;
}

.mw-track.is-paused {
  animation-play-state: paused !important;
}

/* ─── KEYFRAMES ─────────────────────────────────────────────────── */
/* -50% = exactamente el ancho del set original (la mitad del track total) */
@keyframes mw-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ─── ITEMS ─────────────────────────────────────────────────────── */
.mw-item,
.mw-sep {
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  /* display:block para evitar baseline gap */
  display: inline-flex;
  align-items: center;
}

/* ─── ACCESIBILIDAD ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mw-track {
    animation: none !important;
    /* Muestra el contenido estático sin movimiento */
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}