/* Integrações (Figma: Home v1 / Integrações, 2513:14892 — reconstruído:
   não é mais um grid de 2 colunas texto+logos lado a lado; agora é uma
   coluna só, texto CENTRALIZADO, com o carrossel de logos embaixo,
   ocupando a largura inteira do container. Fundo #EEF1F6, pedido do
   cliente (antes era um azulado translúcido, depois #EDEEF0). */

.integracoes {
  background: var(--color-bg);
  padding: 56px 0;
}
.integracoes--carousel { background: var(--color-bg-band); }
@media (min-width: 1024px) {
  .integracoes { padding: 96px 0; }
}

.integracoes-inner {
  display: grid;
  gap: 32px;
  text-align: center;
}
@media (min-width: 900px) {
  .integracoes-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; text-align: left; }
}

.integracoes-texto h2 { max-width: 546px; margin: 0 auto 16px; }
.integracoes-texto .lead { max-width: 630px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .integracoes-texto h2 { margin-left: 0; margin-right: 0; }
  .integracoes-texto .lead { margin-left: 0; margin-right: 0; }
}

/* Variante centralizada (Figma: Home v1) — texto numa coluna só,
   centralizado, carrossel de logos abaixo em largura cheia. */
.integracoes--carousel .integracoes-inner {
  display: block;
  text-align: center;
}
.integracoes--carousel .integracoes-texto { max-width: 815px; margin: 0 auto 40px; }
.integracoes--carousel .integracoes-texto h2,
.integracoes--carousel .integracoes-texto .lead { margin-left: auto; margin-right: auto; }
/* 24px entre o título e o texto de apoio (Figma: título 3057+114 →
   texto 3195, e igual na Home). */
.integracoes--carousel .integracoes-texto h2 { margin-bottom: 24px; }

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

.integracoes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 500px) {
  .integracoes-grid { gap: 20px; }
}

/* Carrossel de logos (Figma: O Mercanet 2448:1841 / Home 2513:14898):
   20px entre os cards e cada logo no tamanho exato do Figma — a largura
   (--logo-w, em px no card de 195,377px) vira % do card, então escala
   junto no mobile (cards de 150px), sempre centralizada. */
@media (min-width: 768px) {
  .integracoes--carousel .marquee { --marquee-gap: 20px; }
}
.integracoes--carousel .marquee-row .logo-card { padding: 0; }
.integracoes--carousel .marquee-row .logo-card img {
  width: calc(var(--logo-w) / 195.377 * 100%);
  height: auto;
  max-width: none;
  max-height: none;
}