/* ==========================================================================
   Organizadores - Grid de imagenes/logos (estilo convocatoriacademic)
   ========================================================================== */

.org-section {
  background: #ffffff;
  padding: 4rem 0;
}

.org-header {
  margin-bottom: 2rem;
  text-align: left;
}

.org-overline {
  font-family: 'Epilogue', sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 3px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 0.75rem;
  word-break: break-word;
}

.org-heading {
  font-family: 'Epilogue', sans-serif;
  font-size: 4.4rem;
  line-height: 1.1;
  text-align: left;
  padding-bottom: 0.75rem;
  word-break: break-word;
}

/* Grid de logos */
.org-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.org-logo {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.org-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.org-logo img {
  max-height: 80px;
  width: auto;
  display: block;
}

/* Soporte para campo múltiple renderizado como HTML */
.org-logos > .field {
  display: contents;
}

.org-logos .field__item {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.org-logos .field__item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.org-logos .field__item img {
  max-height: 80px;
  width: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .org-section {
    padding: 2.5rem 0;
  }

  .org-logos {
    gap: 1.5rem;
  }

  .org-logo,
  .org-logos .field__item {
    padding: 1rem 1.5rem;
  }

  .org-logo img,
  .org-logos .field__item img {
    max-height: 60px;
  }

  .org-heading {
    font-size: calc(2.19rem + (4.4 - 2.19) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc(1.3 * (2.19rem + (4.4 - 2.19) * ((100vw - 20rem) / (48 - 20))));
  }
}

@media screen and (max-width: 480px) {
  .org-logo img,
  .org-logos .field__item img {
    max-height: 50px;
  }

  .org-logos {
    gap: 1rem;
  }

  .org-logo,
  .org-logos .field__item {
    padding: 0.75rem 1rem;
  }
}