.map-section {
  display: flex;
  width: 100%;
  min-width: var(--360-575-page-width, 360px);
  padding: var(--size-space-40, 40px) 0;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  gap: var(--size-space-32, 32px);
  overflow: visible;
}
.map-section__header {
  display: flex;
  padding: var(--size-space-0, 0) var(--size-space-16, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
  box-sizing: border-box;
}

.map-section__header-title {
  margin: 0;
  text-align: center;
}

.map-section__header-subtitle {
  margin: 0;
  align-self: flex-start;
}

.map-section__container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.map-section__back-mobile {
  display: none;
}

.map-section__container.mobile {
  width: 100%;
  height: 100dvh;
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 200;
}

.map-section__container.mobile .map-section__back-mobile {
  display: flex;
  width: 100%;
  padding-top: var(--size-space-12, 12px);
  padding-bottom: var(--size-space-24, 24px);
  padding-inline: var(--360-575-page-margin, 16px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--size-space-24, 24px);
}

.map-section__mobile-back-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}

.map-section__feature-list {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size-space-12, 12px);
  box-sizing: border-box;
}

.map-section__feature-item {
  margin: 0;
}

.map-section__map-content {
  position: relative;
  width: 100%;
  height: 640px;
  border: 1px solid var(--color-border, #eee);
  border-radius: var(--border-radius, 8px);
  overflow: visible;
}

.map-section__map-controllers {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 500;
  padding: 16px;
  box-sizing: border-box;
  pointer-events: none;
}

.map-section__map {
  width: 100%;
  height: 100%;
  box-sizing: initial;
}

.map-section__container.mobile .map-section__map-content {
  height: 100dvh;
}


#map img {
  max-width: none;
}

/*
* Panel Controls
*/
.map-section__panel-controls {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
}

.map-section__panel-zoom,
.map-section__panel-map-controls {
  display: flex;
  width: 40px;
  padding: var(--size-space-200, 16px) var(--size-space-100, 8px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-l, 100px);
  background: var(--Color-Surface-General-1, #FFF);
  box-sizing: border-box;
  /* Shadow-Floating */
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.16);
  gap: var(--size-space-200, 16px);
  pointer-events: all;
}

.map-section__panel-zoom {
  display: none;
}

.map-section__panel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 9999px;
  overflow: hidden;
}

.map-section__panel-button:focus {
  border: none;
  outline: none;
}

.map-section__panel-button span {
  width: var(--Size-icons-s, 24px);
  height: var(--Size-icons-s, 24px);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: #2F6852;
}

.map-section__panel-button span:active {
  background-color: #00A443;
}

.map-section__panel-button:active {
  transform: scale(0.85);
  transition: transform 0.1s;
}

.map-section__panel-button-location {
  mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/geolocation.svg");
  -webkit-mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/geolocation.svg");
}

.map-section__panel-button-layer {
  mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/layers.svg");
  -webkit-mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/layers.svg");
}

.map-section__panel-button-question {
  mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Question.svg");
  -webkit-mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Question.svg");
}

.map-section__panel-button-plus {
  mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/plus.svg");
  -webkit-mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/plus.svg");
}

.map-section__panel-button-minus {
  mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/minus.svg");
  -webkit-mask-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Controllers/minus.svg");
}


@media(min-width: 576px) {
  .map-section__header {
    padding: var(--size-space-0, 0) var(--576-767-page-margin, 42px);
  }

}

@media(min-width: 768px) {
  .map-section__header {
    display: flex;
    padding: var(--size-space-0, 0) var(--768-991-page-margin, 48px);
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    box-sizing: border-box;
  }

  .map-section__header-subtitle {
    padding-left: 25px;
  }

}

@media(min-width: 992px) {

  .map-section {
    min-width: var(--992-1199-page-width, 992px);
    width: 100%;
    padding: var(--size-space-40, 40px);
    box-sizing: border-box;
  }

  .map-section__header {
    display: flex;
    padding: var(--size-space-0, 0) var(--768-991-page-margin, 48px);
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    box-sizing: border-box;
  }

  .map-section__header-subtitle {
    align-self: center;
  }

  .map-section__feature-list {
    display: none;
  }

  .map-section__panel-zoom {
    display: flex;
  }
}

@media(min-width: 1200px) {
  .map-section {
    min-width: var(--1200-1399-page-width, 1200px);
    width: 100%;
    padding: var(--size-space-40, 40px) var(--1200-1399-page-margin, 102px);
    box-sizing: border-box;
  }

  .map-section__header {
    display: flex;
    padding: var(--size-space-0, 0) var(--1200-plus-page-margin, 96px);
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    box-sizing: border-box;
  }
}