:root{
  --m-azul:#0b2459; /* igual a tu header/footer */
  --m-chip:#e7e7e9; /* gris claro del chip */
}

.brands-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 14px 90px; /* deja espacio al footer fijo */
}

.brands-title{
  font-size: 38px;
  font-weight: 800;
  color: #000;            /* negro */
  letter-spacing: .2px;
  margin: 12px 0 20px;
  text-align:center;      /* centrado */
}

.brands-empty{
  color:#6b7280;
  text-align:center;
  padding: 24px 8px;
}

/* lista */
.brand-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* item estilo “chip grande” como tu mock */
/* item estilo chip grande */
.brand-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  row-gap:14px;           /* fallback para navegadores sin gap en flex */
}

.brand-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;               /* si tu editor se queja del gap, deja también: */
  column-gap:10px;
  background:#ffffff;
  border-radius:14px;
  padding:16px 16px 16px 20px;
  text-decoration:none;
  border:2px solid #d9d9dd;
}

.brand-name{
  font-weight:800;
  font-size:24px;
  color:#0b2459;
  text-transform:lowercase;
}

.brand-img{
  width:96px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 0px 0px rgba(0,0,0,.00));
}

@media (min-width:780px){
  .brands-title{ font-size:42px; }
  .brand-link{ padding:18px 20px; }
  .brand-img{ width:120px; height:78px; }
}