/* ═══════════════════════════════════════════════════════════════════
   LS DOMÓTICA — marquee.css
   ------------------------------------------------------------------
   Tira horizontal de integraciones.

   Piezas:
     · .marquee            → wrapper con padding vertical
     · .marquee-header     → eyebrow + H2 (centrado)
     · .marquee-viewport   → ventana con mask-image degradado a los
                             costados (fade-out bonito en los bordes)
     · .marquee-track      → tira que se traslada con @keyframes
     · .marquee-group      → <ul> de items (hay DOS idénticos, ver HTML)
     · .marquee-item       → cada "logo" (texto por ahora)

   Accesibilidad:
     · La segunda copia tiene aria-hidden="true" (no se lee dos veces).
     · Si el usuario tiene prefers-reduced-motion, detenemos la animación.
═══════════════════════════════════════════════════════════════════ */

/* ─── WRAPPER ─────────────────────────────────────────────────── */
.marquee {
  position: relative;
  padding: 64px 0 72px;
  background:
    radial-gradient(1200px 200px at 50% 0%, rgba(0, 149, 255, 0.08), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ─── HEADER (opcional, arriba del marquee) ───────────────────── */
.marquee-header {
  text-align: center;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.marquee-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.marquee-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

/* ─── VIEWPORT (ventana con fade a los costados) ──────────────── */
.marquee-viewport {
  overflow: hidden;
  position: relative;
  /* Máscara: transparente en los bordes, opaca al medio */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ─── TRACK (tira que se mueve) ───────────────────────────────── */
.marquee-track {
  display: flex;
  width: max-content;         /* se expande al contenido real */
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* Un grupo son 12 items; al duplicar, el keyframe recorre -50% */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0);    }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── GROUP + ITEMS ───────────────────────────────────────────── */
.marquee-group {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;       /* el spacing lo da .marquee-item */
  flex-shrink: 0;
}

.marquee-item {
  flex-shrink: 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-right: 1px solid var(--border);
}
.marquee-item:last-child {
  /* El último del segundo grupo queda en el borde; no pasa nada si tiene borde */
}

.mq-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(220, 228, 255, 0.55);
  white-space: nowrap;
  transition: color var(--t-fast), transform var(--t-fast);
}
.marquee-item:hover .mq-logo {
  color: var(--text);
  transform: scale(1.04);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .marquee { padding: 48px 0 56px; }
  .marquee-track { animation-duration: 28s; }
  .marquee-item  { padding: 0 22px; min-height: 48px; }
  .mq-logo       { font-size: 0.85rem; }
}

/* Reduce motion: freezeamos el marquee en su estado inicial */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}