/*--------------------------------------------------------------
# Bancos credenciados sobre a cidade (#clients) — v.1.0 · 25/10/2026
  (revisão de 26/10, antes da 1ª publicação: a v.1.0 nunca foi servida)
  Carregado SÓ pelo index.html, depois do style.css. Todo seletor começa
  por #clients: nada vaza para outras seções, e o ID vence as regras antigas
  `.clients img` do style.css (que ficam lá para não mexer nas 8 páginas).

  Camadas, de trás para a frente:
    céu (fundo da seção) → .bc-cidade--fundo (prédios claros e médios)
    → .container (título e logos) → .bc-cidade--frente (prédios escuros)

  O efeito: com .bc-armado (posta pelo bancos-cidade.js) os logos esperam
  ESCONDIDOS atrás da camada da frente; com .bc-surgiu eles sobem, um depois
  do outro. Só transform e opacity: o layout não se mexe (CLS 0). Sem JS, sem
  IntersectionObserver ou com "reduzir movimento" a classe nunca entra e os
  logos ficam parados e visíveis.
--------------------------------------------------------------*/

#clients {
  --bc-escala: 1;            /* a cidade inteira: 1 = fundo de 300 px de altura */
  --bc-logo: 116px;          /* lado do quadrado de cada logo */
  --bc-vao: 36px;            /* entre logos da mesma fileira */
  --bc-vao-fila: 22px;       /* entre fileiras */
  --bc-por-fila: 7;
  --bc-cidade-h: calc(300px * var(--bc-escala));
  --bc-frente-h: calc(120px * var(--bc-escala));
  --bc-folga: calc(14px * var(--bc-escala));   /* da base dos logos ao topo da frente */
  position: relative;
  isolation: isolate;
  overflow: hidden;          /* os logos partem abaixo da borda: nada vaza para a seção de baixo */
  padding: 100px 0 0;
  background: linear-gradient(180deg, #F8F9F9 0%, #F3F8FD 40%, #E5EEF9 100%);
}

/* A cidade: dois SVG inline com o mesmo viewBox de largura e a mesma escala
   (altura do CSS ÷ altura do viewBox), então as camadas casam em qualquer
   largura. "slice" + base alinhada: cresce por igual e corta só as laterais. */
#clients .bc-cidade {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  pointer-events: none;
}

#clients .bc-cidade--fundo {
  height: var(--bc-cidade-h);
  z-index: 0;
}

#clients .bc-cidade--frente {
  height: var(--bc-frente-h);
  z-index: 2;
}

#clients .container {
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--bc-frente-h) + var(--bc-folga));
}

#clients .section-title {
  padding-bottom: 34px;
}

/* no celular o subtítulo quebra em duas linhas parecidas, sem "país." sozinho */
#clients .section-title h3,
#clients .section-title p {
  text-wrap: balance;
}

/* Fileiras equilibradas: a largura máxima cabe exatamente N logos, então a
   última fileira fica centralizada (7 numa linha; 4 + 3 abaixo de 992 px). */
#clients .bc-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bc-vao-fila) var(--bc-vao);
  max-width: calc(var(--bc-por-fila) * var(--bc-logo) + (var(--bc-por-fila) - 1) * var(--bc-vao) + 1px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#clients .bc-logo {
  /* de onde cada logo parte: com o topo 40% para dentro da camada da frente
     (a fileira de cima ainda percorre a altura de uma fileira a mais) */
  --bc-sobe: calc(var(--bc-logo) + var(--bc-folga) + var(--bc-frente-h) * .4 + var(--bc-fila, 0) * (var(--bc-logo) + var(--bc-vao-fila)));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--bc-logo);
  height: var(--bc-logo);
}

#clients .bc-logo img {
  display: block;
  width: calc(100% * var(--bc-k, 1));
  max-width: none;
  height: auto;
  padding: 0;
  filter: drop-shadow(0 8px 14px rgba(13, 44, 100, .16));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

/* O ladrilho de cada PNG ocupa ~80% da imagem; o da CashMe ocupa 97% e o da
   Creditas 84% — o ajuste deixa os sete do mesmo tamanho na tela. */
#clients .bc-logo--creditas { --bc-k: .96; }
#clients .bc-logo--cashme { --bc-k: .82; }

/* O ladrilho da CashMe tem cantos de ~6% do lado; os outros, de 10% a 23%.
   O raio no <img> arredonda o próprio ladrilho (ele ocupa 97% do PNG) e o
   drop-shadow segue o recorte: fica da mesma família dos vizinhos. */
#clients .bc-logo--cashme img {
  border-radius: 21%;
}

/* Hover: o scale(1.15) do style.css sai (no toque ele "grudava"); quem tem
   mouse ganha o logo subindo um pouco, coerente com o efeito. */
#clients .bc-logo img:hover {
  transform: none;
}

@media (hover: hover) {
  #clients .bc-logo img:hover {
    transform: translateY(-6px) scale(1.08);
    filter: drop-shadow(0 14px 18px rgba(13, 44, 100, .24));
  }
}

/* Escalonamento: cada logo sai 110 ms depois do anterior */
#clients .bc-logo:nth-child(2) { --bc-i: 1; }
#clients .bc-logo:nth-child(3) { --bc-i: 2; }
#clients .bc-logo:nth-child(4) { --bc-i: 3; }
#clients .bc-logo:nth-child(5) { --bc-i: 4; }
#clients .bc-logo:nth-child(6) { --bc-i: 5; }
#clients .bc-logo:nth-child(7) { --bc-i: 6; }

#clients.bc-armado .bc-logo {
  opacity: 0;
  transform: translate3d(0, var(--bc-sobe), 0);
}

/* A opacidade é curta (.25 s): o logo "acende" enquanto ainda está atrás da
   frente e atravessa os prédios claros e médios já sólido, não translúcido. */
#clients.bc-armado.bc-surgiu .bc-logo {
  opacity: 1;
  transform: none;
  transition:
    transform 1s cubic-bezier(.22, .61, .36, 1) calc(var(--bc-i, 0) * 110ms),
    opacity .25s linear calc(var(--bc-i, 0) * 110ms);
}

/* ---------- larguras ---------- */

@media (min-width: 1400px) {
  #clients {
    --bc-logo: 124px;
    --bc-vao: 40px;
  }
}

/* Acima de 2560 px (a largura do viewBox) a cidade cresce com a tela: sem
   isso o "slice" escalaria pela largura e cortaria o topo dos prédios numa
   linha reta. A folga e o ponto de partida dos logos derivam destas duas. */
@media (min-width: 2561px) {
  #clients {
    --bc-cidade-h: 11.71875vw;   /* 300/2560 */
    --bc-frente-h: 4.6875vw;     /* 120/2560 */
  }

  /* O título guarda da cidade a mesma distância que tem a 2560: o vão até os
     logos cresce o quanto a cidade subiu além do que a frente já levantou. */
  #clients .section-title {
    padding-bottom: calc(34px + (var(--bc-cidade-h) - 300px) - (var(--bc-frente-h) - 120px));
  }
}

@media (max-width: 1199.98px) {
  #clients {
    --bc-escala: .9;
    --bc-logo: 100px;
    --bc-vao: 26px;
  }
}

@media (max-width: 991.98px) {
  #clients {
    --bc-escala: .8;
    --bc-logo: clamp(88px, 13vw, 112px);
    --bc-vao: clamp(18px, 3.4vw, 32px);
    --bc-vao-fila: 24px;
    --bc-por-fila: 4;
    padding-top: 84px;
  }

  #clients .bc-logo:nth-child(-n+4) { --bc-fila: 1; }

  /* Duas fileiras: a camada de trás sobe uma fileira para a de cima também
     ficar na cidade. O "slice" amplia os prédios por igual com a base presa;
     a frente, a folga e o ponto de partida dos logos não mudam. */
  #clients .bc-cidade--fundo {
    height: calc(var(--bc-cidade-h) + var(--bc-logo) + var(--bc-vao-fila));
  }

  /* ...e o título guarda distância dela: o vão até os logos cresce o que for
     preciso para a CAIXA da camada de trás começar 8 px abaixo do subtítulo
     (nunca menos que os 34 px). Conta: topo da caixa = cidade + logo + vão;
     fim do subtítulo = frente + folga + 2 logos + vão + este padding. */
  #clients .section-title {
    padding-bottom: max(34px, calc(var(--bc-cidade-h) - var(--bc-frente-h) - var(--bc-folga) - var(--bc-logo) + 8px));
  }
}

@media (max-width: 575.98px) {
  #clients {
    --bc-escala: .64;
    /* pisos baixos: 4 por fileira cabem até ~250 px (Galaxy Fold dobrado, zoom
       de acessibilidade); acima de ~346 px nada muda */
    --bc-logo: clamp(48px, 18.5vw, 80px);
    --bc-vao: clamp(8px, 3.6vw, 20px);
    --bc-vao-fila: 14px;
    padding-top: 72px;
  }
}

/* "Reduzir movimento" (se a preferência mudar depois de armado) e impressão:
   tudo visível e parado. */
@media (prefers-reduced-motion: reduce) {
  #clients.bc-armado .bc-logo,
  #clients.bc-armado.bc-surgiu .bc-logo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #clients .bc-logo img {
    transition: none;
  }

  /* O título também fica parado: o AOS não lê esta preferência (o style.css
     só neutraliza o #cc-hero). (1,1,0) vence os [data-aos] do aos.css. */
  #clients [data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  #clients.bc-armado .bc-logo {
    opacity: 1;
    transform: none;
  }
}