/* ==========================================================
   A EXPERIÊNCIA NA PRÁTICA (#experiencia): a ADIT, os números e os clientes
   ========================================================== */
.adit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: var(--espaco-7); padding-top: var(--espaco-6); border-top: 1px solid var(--linha); }
.adit-foto { margin: 0; border-radius: var(--raio); overflow: hidden; aspect-ratio: 3 / 2; background: var(--fundo-foto); }
.adit-foto img { width: 100%; height: 100%; object-fit: cover; }
.adit-texto { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 46ch; }
.adit-texto .rotulo { color: var(--texto-suave); }
.adit-destaque { font-family: var(--font-titulo); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; }
.adit-destaque strong { display: block; font-weight: 400; font-size: clamp(44px, 5vw, 68px); line-height: 1.05; letter-spacing: -.01em; }
.adit-texto p:not(.rotulo):not(.adit-destaque) { color: var(--texto-suave); font-size: 17px; }

.numeros { margin-top: var(--espaco-7); text-align: center; }
.numeros-frase { font-family: var(--font-titulo); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.4; }
.numeros .numero strong { font-weight: 500; }

.clientes { margin-top: var(--espaco-6); text-align: center; }
.clientes-titulo { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; }
.logos { --colunas: 6; --vao: clamp(20px, 3vw, 48px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 40px) var(--vao); list-style: none; margin-top: var(--espaco-5); }
.logos li { flex: 0 0 calc((100% - (var(--colunas) - 1) * var(--vao)) / var(--colunas)); display: flex; align-items: center; justify-content: center; }
.logos img { width: 100%; max-width: 150px; height: auto; opacity: .62; filter: var(--logo-filtro); transition: opacity .25s; }
.logos li:hover img { opacity: .95; }

/* De 761 a 1240 px, 3 colunas, como no celular: com as 33 logos, as linhas ficam cheias (com 4, sobrava uma sozinha) */
@media (max-width: 1240px) {
  .logos { --colunas: 3; }
}
@media (max-width: 760px) {
  .adit { grid-template-columns: minmax(0, 1fr); margin-top: var(--espaco-6); }
  .adit-foto { aspect-ratio: 4 / 3; }
  .logos { --colunas: 3; --vao: 18px; row-gap: 20px; }
  .logos img { opacity: .7; }
}