/* Marcas / Clientes (Figma: Home / Sessão marcas clientes, 507:4066).
   Carrossel infinito 100% CSS (duas fileiras, direções opostas, sem JS
   nem plugin), com fallback: sem CSS a lista de logos continua legível
   e acessível, só sem a animação. */

.clientes { padding: 56px 0; text-align: center; overflow-x: clip; }
@media (min-width: 1024px) {
  .clientes { padding: 96px 0; }
}
/* Figma (Home 2548:17055 e Cases 2449:2557, idênticos): título 814px, 24px
   até o texto de apoio (522px) e 58px até a 1ª fileira de logos. */
.clientes h2 { max-width: 814px; margin: 0 auto 24px; }
@media (min-width: 768px) {
  /* Quebra "gulosa" como no Figma ("Quem vende em grande escala, /
     vende com a Mercanet") — o balance global igualaria as linhas. */
  .clientes h2 { text-wrap: wrap; }
}
.clientes .lead { max-width: 522px; margin: 0 auto 32px; }
@media (min-width: 1024px) {
  .clientes .lead { margin-bottom: 58px; }
}

/* Entrada animada (fade + slide-up) ao rolar até a seção. */
.clientes-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.clientes-intro.is-visible { opacity: 1; transform: none; }
html:not(.js) .clientes-intro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .clientes-intro { transition: none; }
}

.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-width:0 evita que o carrossel force a coluna a crescer pra
     caber o conteúdo quando ele é filho de um grid (como na seção de
     Integrações de O Mercanet) — itens de grid/flex, por padrão, não
     encolhem abaixo do tamanho do próprio conteúdo. Na Home (onde o
     .marquee é filho de um bloco comum, não de um grid) isso não fazia
     diferença visível, mas é o fix correto nos dois casos. */
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (min-width: 768px) {
  .marquee { gap: 16px; }
}

/* O vão entre os cards vem de --marquee-gap (Integrações usa 20px, como
   no Figma). O padding-right do trilho repete esse vão no fim do
   segundo grupo de logos: sem ele a conta de "-50%" ficava 0,5×vão
   curta (o trilho tem 12 cards mas só 11 vãos) e a animação dava um
   pulinho de ~8px toda vez que reiniciava o ciclo. */
.marquee { --marquee-gap: 12px; }
@media (min-width: 768px) {
  .marquee { --marquee-gap: 16px; }
}
.marquee-row { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  width: max-content;
}

.marquee-row .logo-card {
  flex: none;
  width: 150px;
}
@media (min-width: 768px) {
  .marquee-row .logo-card { width: 195px; }
}

/* Borda cinza-clara só nesta seção — a de Integrações (que reaproveita
   o mesmo .marquee) usa a azulada padrão do .logo-card (ver Figma:
   Home / Sessão marcas clientes, 507:4066, borda rgba(202,203,205,0.3)
   vs. Home / Sessão integrações, 507:4055, borda rgba(79,96,131,0.2)). */
.clientes .marquee-row .logo-card { border-color: var(--color-border-light); }

.marquee-row--left .marquee-track { animation: marquee-left 34s linear infinite; }
.marquee-row--right .marquee-track { animation: marquee-right 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

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

/* Variante de largura total (Clientes): sai do container e ocupa a tela
   inteira, 20px entre as fileiras e entre os cards (card de 195,377px).
   As bordas esmaecem como no Figma: dois degradês de cor de fundo por
   cima — esquerda 0–700px (cor cheia até 198px, some em 700) e direita
   1187–1920px (cor cheia a partir de 1702, some em 1187), aqui feitos
   como máscara (funciona com qualquer cor de fundo). As fileiras
   começam em x=209 e x=314,4 (a de baixo deslocada ~meio card). */
.marquee--wide {
  gap: 20px;
  mask-image: linear-gradient(90deg, transparent 10.31%, #000 36.46%, #000 61.82%, transparent 88.65%);
  -webkit-mask-image: linear-gradient(90deg, transparent 10.31%, #000 36.46%, #000 61.82%, transparent 88.65%);
}
@media (max-width: 767px) {
  .marquee--wide {
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}
.marquee--wide .marquee-track { gap: 20px; padding-right: 20px; }
@media (max-width: 767px) {
  .marquee--wide .marquee-track { gap: 12px; padding-right: 12px; }
}
.marquee--wide .marquee-row .logo-card { width: 150px; }
@media (min-width: 768px) {
  .marquee--wide .marquee-row .logo-card { width: 195.377px; }
  .marquee--wide .marquee-row--left { padding-left: 10.885vw; }
  .marquee--wide .marquee-row--right { padding-left: 16.374vw; }
}
.marquee--wide .marquee-row--left .marquee-track { animation-name: marquee-left-wide; }
.marquee--wide .marquee-row--right .marquee-track { animation-name: marquee-right-wide; }
@keyframes marquee-left-wide {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}
@keyframes marquee-right-wide {
  from { transform: translateX(-33.3333%); }
  to { transform: translateX(0); }
}