/* ====== Sección Miembro ====== */
.miembro-section {
  display: grid;
  place-items: center;
  gap: .8rem;
  padding: 12px 16px;
}

/* Título */
.miembro-title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  color: #d9bd7a; /* dorado del diseño */
  letter-spacing: .5px;
}

/* ====== Fila de logos ====== */
.miembro-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  flex-wrap: wrap;

  /* Control centralizado de tamaños */
  --logo-h: clamp(56px, 6vw + 10px, 96px); /* alto del logo central */
  --badge: clamp(48px, 6.5vw, 72px);        /* diámetro de los círculos laterales */
  --badge-padding: 12%;                     /* margen interno del logo dentro del círculo */
  --badge-ring: 0 0 0 2px rgba(255,255,255,.85); /* anillo blanco sutil */
}

/* Enlaces sin espacios extra */
.miembro-logo-wrapper a {
  display: block;
  line-height: 0;
  flex: 0 0 auto;
}

/* Base para todas las imágenes */
.miembro-logo-wrapper img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0 !important;  /* anulamos redondeos heredados */
  box-shadow: none;
  margin: 0;
}

/* ====== Central (2.º <a>): banda principal ====== */
.miembro-logo-wrapper a:nth-child(2) img {
  height: var(--logo-h);
}

/* ====== Laterales (1.º y 3.º <a>): círculos como los de abajo ====== */
.miembro-logo-wrapper a:first-child,
.miembro-logo-wrapper a:last-child {
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--badge-ring);        /* anillo blanco sutil */
}

/* El logo dentro del círculo: centrado y proporcional */
.miembro-logo-wrapper a:first-child img,
.miembro-logo-wrapper a:last-child img {
  width: calc(100% - var(--badge-padding) * 2);
  height: calc(100% - var(--badge-padding) * 2);
  max-width: 80%;  /* tope por si el logo es muy panorámico */
  max-height: 80%;
  object-fit: contain;
}

/* Ajustes en móviles */
@media (max-width: 600px) {
  .miembro-logo-wrapper {
    --logo-h: clamp(52px, 10vw + 8px, 80px);
    --badge: clamp(44px, 10vw, 64px);
    --badge-padding: 10%;
    gap: clamp(10px, 3vw, 18px);
  }
}

/* (Opcional) neutraliza redondeos globales del tema */
img.rounded,
img.rounded-circle,
.avatar img,
figure.avatar,
figure.rounded {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 🧹 Limpieza recomendada (si aún existen en tu CSS/HTML) */
/* .img-caja { width:200px; height:75px; }          <- QUITAR */
/* .miembro-logo-wrapper img { transform: scaleX(1.12); } <- QUITAR */
/* border-radius: 50% inline en imágenes             <- QUITAR (el CSS ya lo neutraliza igual) */