/* ============================================================
   Brouo LP Marketing — S5 Banda de logos (panel--dark)
   Prueba social institucional. Header centrado: isotipo verde
   64px + título + intro. Banda horizontal monocromo (logos en
   blanco con opacity reducida sobre dark). Espaciado equitativo.
   ============================================================ */

.logos__head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.logos__head-icon {
  display: block;
  width: 64px;
  height: auto;
  margin-bottom: calc(-1 * var(--space-2));
}

.logos__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
  margin: 0;
  text-wrap: balance;
}

.logos__intro {
  font-size: 1.0625rem;
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
  margin: 0;
  text-wrap: pretty;
}

.logos__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logos__band li {
  display: inline-flex;
  align-items: center;
}

.logos__band img {
  max-height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity var(--duration-base) var(--ease-out);
}

.logos__band img:hover {
  opacity: 1;
}

@media (min-width: 1024px) {
  .logos__intro {
    font-size: 1.125rem;
  }

  .logos__band {
    gap: var(--space-7) var(--space-9);
  }

  .logos__band img {
    max-height: 36px;
  }
}