/* ==========================================================
   AS LOGOS DOS CLIENTES (página inicial e O escritório)
   A grade é montada por js/logos.js a partir de js/dados.js.
   ========================================================== */
/* Portfólio: parede estática de logotipos. Cada logotipo numa célula de mesmo tamanho, sem linhas;
   a última fileira, incompleta, fica centrada. Em cinza; a cor volta ao passar o mouse. */
.logos-grade { --colunas: 6; display: flex; flex-wrap: wrap; justify-content: center; padding: var(--espaco-4) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.logo-tile { margin: 0; flex: 0 0 calc(100% / var(--colunas)); height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; position: relative; }
/* As logos são silhuetas pretas do mesmo tamanho visual (tools/gerar-logos-clientes.py): a opacidade as
   deixa cinza no fundo claro, e o --logo-filtro as inverte para claras no fundo escuro. */
.logo-tile img { width: min(100%, 200px); height: auto; filter: var(--logo-filtro); opacity: .7; transition: opacity .3s; }
.logo-tile:hover img { opacity: 1; }
@media (max-width: 900px) { .logos-grade { --colunas: 4; } }
@media (max-width: 560px) {
  .logos-grade { --colunas: 3; padding: var(--espaco-3) 0; }
  .logo-tile { height: 84px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) { .logo-tile img { transition: none; } }