/*
 * Feature 024, T2 — "Enlaces de interés" logo band (above the theme
 * footer). Colors and sizes come ONLY from tokens.css custom properties.
 *
 * The bare list is fully usable WITHOUT JavaScript (horizontal scroll);
 * Slick replaces the layout when enlaces-interes.js runs. Logos keep their
 * aspect ratio via a fixed height + object-fit: contain — never deformed
 * (spec, "Consideraciones técnicas").
 */

.ugel-enlaces-interes {
  padding: 1.5rem 0;
  background: var(--ugel-white);
  border-top: 1px solid var(--ugel-border);
}

.ugel-enlaces-interes__track {
  margin: 0 auto;
  padding: 0;
  max-width: 1160px;
  display: flex;
  align-items: center;
  gap: 2rem;
  overflow-x: auto;
}

/* Once Slick takes over, it manages layout; the fallback flex/gap rules
   must not fight its track. */
.ugel-enlaces-interes__track.slick-initialized {
  display: block;
  overflow: visible;
}

.ugel-enlaces-interes__item {
  flex: 0 0 auto;
}

.ugel-enlaces-interes__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.ugel-enlaces-interes__link:focus-visible {
  outline: 2px solid var(--ugel-blue);
  outline-offset: 3px;
}

.ugel-enlaces-interes__logo {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.ugel-enlaces-interes__link:hover .ugel-enlaces-interes__logo,
.ugel-enlaces-interes__link:focus-visible .ugel-enlaces-interes__logo {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .ugel-enlaces-interes__logo {
    height: 44px;
    max-width: 140px;
  }
}