/* Logos-01 — Ticker infinito de logos de clientes */

.logos-ticker-section {
  padding: 48px 0;
  background: var(--backgroundAlt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.ticker-label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--textSecondary);
  font-weight: 700;
  margin-bottom: 32px;
}

.ticker-wrap {
  width: 100%;
  display: flex;
  overflow: hidden;
  /* Fade suave en los bordes */
  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%);
}

.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
  gap: 56px;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* ── Item con imagen ─────────────────────────────────────────── */
.ticker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  flex-shrink: 0;
  transition: opacity 0.3s, filter 0.3s;
  cursor: pointer;
}

.ticker-item img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  /* Logos en escala de grises para uniformidad */
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.3s ease, transform 0.3s ease;
  display: block;
}

.ticker-item:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* ── Fallback: texto si no hay imagen ────────────────────────── */
.ticker-item span {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.5px;
  color: color-mix(in srgb, var(--text) 40%, var(--backgroundAlt));
  transition: color 0.3s;
  white-space: nowrap;
}

.ticker-item:hover span {
  color: var(--primary);
}

/* ── Separador decorativo entre logos ────────────────────────── */
.ticker-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Animación ───────────────────────────────────────────────── */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ticker-track { gap: 40px; animation-duration: 40s; }
  .ticker-item img { height: 32px; max-width: 110px; }
}

@media (max-width: 480px) {
  .logos-ticker-section { padding: 36px 0; }
  .ticker-track { gap: 32px; animation-duration: 30s; }
  .ticker-item img { height: 28px; max-width: 90px; }
}