function Marquee() {
  const items = ['Patria', 'Superación', 'Orden', 'Disciplina', 'Excelencia', 'Liderazgo'];

  const renderRun = (i) => (
    <span className="cmgs-mq-item" key={i}>
      {items.map((w, j) => (
        <React.Fragment key={j}>
          <span className={j % 2 === 1 ? 'gold' : ''}>{w}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
    </span>
  );

  return (
    <div className="cmgs-mq">
      <div className="cmgs-mq-track">
        {renderRun(0)}{renderRun(1)}{renderRun(2)}{renderRun(3)}
      </div>
      <style>{`
        .cmgs-mq {
          background: var(--navy-900);
          color: #fff;
          overflow: hidden;
          border-top: 1px solid rgba(212,160,42,0.28);
          border-bottom: 1px solid rgba(212,160,42,0.28);
          padding: 18px 0;
          position: relative;
        }
        .cmgs-mq::before, .cmgs-mq::after {
          content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
        }
        .cmgs-mq::before { left: 0; background: linear-gradient(90deg, var(--navy-900), transparent); }
        .cmgs-mq::after  { right: 0; background: linear-gradient(-90deg, var(--navy-900), transparent); }
        .cmgs-mq-track {
          display: flex; gap: 56px;
          animation: cmgs-mq-scroll 28s linear infinite;
          width: max-content;
          will-change: transform;
        }
        .cmgs-mq-item {
          display: flex; align-items: center; gap: 56px;
          font: 700 clamp(20px, 2.2vw, 28px)/1 var(--font-display);
          letter-spacing: 0.06em; text-transform: uppercase;
          white-space: nowrap;
        }
        .cmgs-mq-item .gold { color: var(--gold-400); }
        .cmgs-mq-item .dot {
          display: inline-block; width: 8px; height: 8px;
          background: var(--gold-500); border-radius: 1px; transform: rotate(45deg);
        }
        @keyframes cmgs-mq-scroll {
          to { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .cmgs-mq-track { animation: none !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Marquee });