/* ============================================================
   HOME — seção "Clientes" (grade de logos)
   Logos em images/clientes/<id>.webp, gerados por
   ../_logos-clientes/preparar.py (cor única, sem fundo).
   --w em cada <img> = largura de tela que equilibra logos
   largos e quadrados; --s reduz tudo nas telas menores.
   ============================================================ */
.cli{background:var(--paper);padding:clamp(70px,12vh,150px) var(--pad)}
.cli__grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(28px,5vh,56px);border-top:1px solid var(--hair);border-left:1px solid var(--hair);--s:1}
.cli__grid li{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cli__grid a{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:12px;transition:background-color .5s var(--ease)}
.cli__grid img{display:block;width:calc(var(--w) * var(--s) * 1px);max-width:80%;height:auto;opacity:.6;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cli__grid a:hover{background:var(--paper-2)}
.cli__grid a:hover img,.cli__grid a:focus-visible img{opacity:1;transform:scale(1.05)}
.cli__grid a:focus-visible{outline:2px solid var(--plum);outline-offset:-2px}
.cli__nota{display:block;margin-top:18px;text-align:right}

@media (max-width:1100px){.cli__grid{grid-template-columns:repeat(3,minmax(0,1fr));--s:.92}}
@media (max-width:560px){
  .cli__grid{grid-template-columns:repeat(2,minmax(0,1fr));--s:.78}
  .cli__grid a{aspect-ratio:16/9}
  .cli__nota{text-align:left}
}
@media (hover:none){.cli__grid img{opacity:.78}}
@media (prefers-reduced-motion:reduce){.cli__grid a,.cli__grid img{transition:none}.cli__grid a:hover img{transform:none}}