/* ===========================
   MARQUEE - CSS
   Usa --primary-color da tua root.
   Ajustes possíveis: --marquee-tilt, --marquee-height, --marquee-gap
=========================== */
:root {
  /* garante que exista uma cor padrão caso não tenha no teu CSS */
  --marquee-tilt: -4deg; /* ângulo da faixa */
  --marquee-height: 84px; /* altura da faixa */
  --marquee-gap: 36px; /* espaço entre logos */
  --marquee-bg-alpha: 0.06; /* intensidade do fundo */
}

.marquee-strip {
  width: 110%;
  left: -1%;
  position: relative;
  transform: rotate(var(--marquee-tilt));
  transform-origin: left center;
  margin: 24px 0; /* ajusta distância do restante do layout */
  pointer-events: none; /* deixa cliques passarem (se quiser) */
  background-color: #ffedb3;
}

.marquee-track {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  /* cria uma faixa com leve fundo usando --primary-color */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 6%,
    rgba(0, 0, 0, 0) 94%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 6px 0;
  border-radius: 12px;
  /* efeito sutil atrás dos logos (usar cor primária com alpha) */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  background-color: rgba(0, 0, 0, 0); /* fallback */
  position: relative;
  height: var(--marquee-height);
  display: flex;
  align-items: center;
}

/* overlay com a cor primária (sutil) — mantém o tom do tema */
.marquee-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
  opacity: var(--marquee-bg-alpha);
  border-radius: 12px;
  pointer-events: none;
}

/* o conteúdo que desliza em loop */
.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  white-space: nowrap;
  will-change: transform;
  /* centraliza verticalmente (se precisar) */
  padding-left: 16px;
  padding-right: 16px;
}

.marquee-content img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

/* cada item (logo, img) */
.marquee-item {
  height: calc(var(--marquee-height) * 0.7); /* escala das logos */
  min-height: 32px;
  max-height: 96px;
  display: inline-block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(0) brightness(1.05); /* opcional: deixa logos neutras */
  transition: transform 0.25s ease;
  pointer-events: auto; /* se quiser clicar numa logo, remove pointer-events none */
}

/* hover opcional: destaca o item se o usuário passar o mouse */
.marquee-item:hover {
  transform: scale(1.06);
  filter: none;
}

/* responsividade: reduz o gap em telas menores */
@media (max-width: 700px) {
  :root {
    --marquee-gap: 18px;
    --marquee-height: 64px;
  }
  .marquee-item {
    height: calc(var(--marquee-height) * 0.75);
  }
}