/* ===========================================================================
   ECOCASA — FRENTE "PROVA SOCIAL" (Home / index.html)
   Seção "Quem confia e aprova" — grade tipográfica de marcas de clientes.
   Escopo total no prefixo .ps-  (NÃO colide com style.css nem com a seção
   .confia de logos já existente). Paleta VERDE padrão da Home.
   Semântica: realce em verde/lima (engenharia) no hover.
   =========================================================================== */

.ps{background:var(--pale);position:relative;overflow:hidden}
.ps .head{max-width:740px;margin:0 auto 12px}

/* selo discreto "Atendemos em todo o Brasil" */
.ps-seal{display:inline-flex;align-items:center;gap:9px;margin:18px auto 0;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.3px;
  color:var(--lima-ink);background:rgba(114,159,40,.10);
  border:1px solid rgba(114,159,40,.22);border-radius:100px;padding:8px 18px}
.ps-seal i{font-size:13px;color:var(--lima-ink)}

/* grupos de categoria */
.ps-groups{margin-top:42px;display:flex;flex-direction:column;gap:34px}
.ps-group{position:relative}
.ps-group-h{display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--muted)}
.ps-group-h::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--lima);flex:none}
.ps-group-h::after{content:"";flex:1 1 auto;height:1px;background:rgba(11,61,44,.10)}

/* grade de cartões/chips uniformes — várias colunas no desktop, 2-3 no mobile */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}

/* cada cliente: cartão tipográfico uniforme (fácil trocar por <img> da logo) */
.ps-item{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:74px;padding:16px 14px;border-radius:14px;
  background:var(--paper);border:1px solid rgba(11,61,44,.08);
  box-shadow:0 6px 18px -14px rgba(11,61,44,.18);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;letter-spacing:.2px;line-height:1.2;
  color:#7C8C82; /* cinza-esverdeado, tom único */
  transition:color .32s var(--ease),border-color .32s var(--ease),
             box-shadow .32s var(--ease),transform .32s var(--ease),background .32s var(--ease)}
.ps-item:hover{color:var(--verde);border-color:rgba(114,159,40,.45);
  background:#fff;transform:translateY(-4px);
  box-shadow:0 20px 38px -22px rgba(11,61,44,.34)}

/* linha-resumo discreta */
.ps-note{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:40px auto 0;max-width:640px;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.ps-note i{color:var(--lima-ink);font-size:14px;flex:none}

/* responsivo: 3 colunas em tablets menores, 2 no mobile estreito */
@media(max-width:640px){
  .ps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  .ps-item{min-height:64px;font-size:13.5px;padding:13px 8px}
}
@media(max-width:400px){
  .ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===========================================================================
   Conserto 26/06 — seção .confia (Home): grade TIPOGRÁFICA de clientes.
   Substitui as <img> de logos (arquivos inexistentes em img/clientes/*) por
   cartões com o nome. Mesma estética dos .ps-item. ⚠️ Logos reais e a própria
   lista de clientes a VALIDAR com o cliente antes de publicar (ver gate).
   =========================================================================== */
.confia .logos-typo{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;max-width:1060px;margin:36px auto 0}
.confia .lg-logo{display:flex;align-items:center;justify-content:center;
  min-height:104px;padding:20px 22px;border-radius:14px;
  background:#fff;border:1px solid rgba(11,61,44,.08);
  box-shadow:0 6px 18px -14px rgba(11,61,44,.18);
  transition:transform .34s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease)}
.confia .lg-logo img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  /* verde monocromático esmaecido por padrão → cor real da marca no hover */
  filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(2.2) brightness(.9) opacity(.6);
  transition:filter .4s var(--ease)}
.confia .lg-logo:hover{transform:translateY(-4px);border-color:rgba(114,159,40,.45);
  box-shadow:0 20px 40px -22px rgba(11,61,44,.34)}
.confia .lg-logo:hover img{filter:none}
@media(max-width:640px){
  .confia .logos-typo{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .confia .lg-logo{min-height:84px;padding:16px}
  .confia .lg-logo img{max-height:44px}
}
@media(max-width:400px){
  .confia .logos-typo{grid-template-columns:repeat(2,minmax(0,1fr))}
}