/* =====================
   GALLERY — Imagen principal + swiper de miniaturas
   ===================== */
.gallery {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.gallery__inner {
  display: flex;
  flex-direction: column;
  gap: 23px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.gallery__main {
  height: 725px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-navy);
}

.gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumbs {
  width: 100%;
}

.gallery__thumbs .swiper-slide {
  aspect-ratio: 1 / 1;
}

.gallery__thumb {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.gallery__thumb:hover {
  border-color: rgba(254, 80, 0, 0.4);
}

.gallery__thumb.is-active {
  border-color: var(--color-orange);
}

/* =====================
   RESPONSIVE — SOLFIUM ONE
   ===================== */
@media (max-width: 991.98px) {
  .gallery__main {
    height: 420px;
  }
}

@media (max-width: 575.98px) {
  .gallery__main {
    height: 240px;
    border-radius: 16px;
  }
}

/* ---- Reset mobile: el padding alineado al navbar (calc(2rem + 30px)) solo aplica en desktop; en mobile se usa el gutter estándar ---- */
@media (max-width: 991.98px) {
  .gallery__inner {
    padding-inline: var(--container-pad);
  }
}