/* ============================================================================
   LAYOSCAMP · LOGOS DE COLEGIOS REALES — grid página /colegios
   ----------------------------------------------------------------------------
   2026-06-14 · grid de logos del nodo 24 (field_listado_de_logos) en /colegios.
   La MARQUESINA de la home NO se estiliza aquí: la home solo carga la library
   design-system-v2 (no global-styling), así que el marquee vive en
   design-system-v2-extras.css. CERO !important.

   Feedback operador (14-jun): "se ven enormes; lo perfecto sería logos con fondo
   transparente y NO encajados en las cuadrículas." → logos pequeños que FLOTAN
   sin tarjeta + mix-blend para fundir los fondos blancos/grises horneados.

   ⚠️ CAVEAT mix-blend-mode: multiply funde el blanco/gris al FONDO CLARO de la
   sección (crema). Sobre fondo oscuro los logos desaparecerían.
   Los ~11 logos 208×208 sin alfa (british-council, sek, retamar, balder, agora,
   st-george, brains, trinity, santa-maria, las-naciones, runny) deben re-exportarse
   con fondo TRANSPARENTE por el equipo; el blend es el puente hasta entonces.
   ============================================================================ */

.colegios-logos {
  max-width: 1100px;
  margin: 0 auto;
}
.colegios-logos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 36px 28px;
  align-items: center;
  justify-items: center;
  margin-top: 36px;
}
.colegios-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.colegios-logos__item img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (max-width: 600px) {
  .colegios-logos__grid { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
  .colegios-logos__item img { max-height: 38px; }
}