/*V 1.0 Shared Footer Brands - bloque de marcas del footer. Sin la seccion en el HTML no pinta nada, asi que es inerte en las paginas que no lo usan.*/

/* Misma linea superior que separaba el bloque de Carrier al que sustituye */
.footer-brands {display:flex; flex-direction:column; align-items:flex-start; margin-top:20px; gap:16px; width:100%; padding-top:20px; border-top:1px solid rgba(255, 255, 255, 0.1);}
.footer-brands-title {font-size:18px; font-weight:800; color:var(--primary-white); letter-spacing:0.5px; text-transform:uppercase; line-height:1.3;}
.footer-brands-logos {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(12px, 1.3vw, 16px); width:100%; max-width:376px; margin:0; padding:0; list-style:none;}

/* Placa blanca: varios logos traen el blanco quemado en el archivo, transparentar no es opcion */
/* Todas del mismo alto y con sombra: sobre el negro plano se leen como piezas, no como recortes pegados */
/* El alto manda sobre los logos cuadrados; los apaisados los limita el ancho, asi que no se desbordan */
.footer-brands-logos li {display:flex; align-items:center; justify-content:center; background-color:var(--primary-white); height:clamp(120px, 11vw, 128px); padding:10px 16px; margin:0; border-radius:12px; box-shadow:0 8px 20px rgba(0, 0, 0, 0.55);}

/* width/height al 100%, no max-*: con max-* el navegador parte de los atributos del HTML y el logo nunca llena la placa */
.footer-brands-logos img {width:100%; height:100%; object-fit:contain; display:block;}

@media (max-width:576px) {
  .footer-brands {align-items:center; text-align:center;}
  .footer-brands-logos {margin:0 auto;}
}