/*General comercios*/
body,
header {
  background-color: var(--base-comercios) !important;
}

.comercios-main p,
.comercios-main li {
  font-family: "KievitOT" !important;
}

.main-wrapper {
  padding-top: 6rem;
}
.btn-comercios {
  padding: 0.5rem 1.5rem;
  border-radius: 1.5rem;
  border: 3px solid var(--base-comercios);
  color: var(--base-comercios);
  font-family: "KievitOT";
  font-weight: 500;
}
.btn-comercios:hover {
  color: var(--azul-comercios);
  background-color: var(--base-comercios);
}

/*1. Intro comercios*/
.salpicadura-img {
  width: 25%;
}
.intro-comercios {
  background-color: var(--azul-comercios);
}
.intro-comercios h1 {
  color: var(--base-comercios);
}
@media (max-width: 600px) {
  .salpicadura-img {
    width: 40%;
  }
}

/*Que es ballenas*/
.que-es-ballenas {
  border-radius: 0px 0px 3.5rem 3.5rem;
  background-color: var(--turquesa-comercios);
  overflow: hidden;
}
.que-es-ballenas .padding-global {
  padding-right: 0px !important;
}
.que-es-ballenas .padding-section {
  padding-bottom: 0px !important;
}
.que-es_component > * {
  color: var(--rojo-comercios);
}
.que-es_component {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  place-items: center end;
}
.que-es_component .content-left {
  padding-bottom: 5rem;
  max-width: 40rem;
}
.que-es_component .content-right {
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
  inset: auto 0% 0% auto;
  height: 100%;
}
.que-es_component .content-right img {
  width: 100%;
}
@media (max-width: 900px) {
  .que-es_component {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
  }
  .que-es_component .content-left {
    padding-bottom: 0px;
    padding-right: 2rem;
  }
}

/*3. proteger*/
.proteger-ballenas_component .intro > * {
  color: var(--azul-comercios);
}
.proteger-ballenas_component .intro {
  position: relative;
}
.proteger-ballenas_component p.max-small {
  max-width: 25rem;
}
.proteger-grid {
  grid-column-gap: 3rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: stretch center;
  display: grid;
}
.proteger-item {
  border: 4px solid var(--azul-comercios);
  text-align: center;
  border-radius: 2rem;
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.proteger-item:first-child p {
  max-width: 18rem;
}
.proteger-item a {
  text-decoration: underline;
  color: var(--rojo-comercios);
  font-family: "KievitOT";
}
.proteger-icon {
  height: 7rem;
}
.proteger-icon > * {
  color: var(--dark-comercios);
}
.sol-icono {
  width: 7%;
  position: absolute;
  inset: 0% auto auto 0%;
  left: 5%;
}
.pajaros-icono {
  width: 10%;
  position: absolute;
  inset: auto 0% 0% auto;
}
@media (max-width: 900px) {
  .proteger-grid {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
  }
  .pajaros-icono {
    bottom: 0%;
    width: 12%;
  }
  .sol-icono {
    width: 9%;
  }
  .proteger-ballenas_component .intro {
    padding: 4rem 0rem 2rem 0rem;
  }
}
@media (max-width: 500px) {
  .proteger-item {
    padding: 1.5rem 1.5rem;
    border: 3px solid var(--azul-comercios);
  }
  .pajaros-icono {
    width: 20%;
    bottom: -5%;
  }
  .sol-icono {
    width: 12%;
    left: 0%;
  }
}

/*Red defensora*/
.red-defensora {
  border-radius: 3rem;
  background-color: var(--rojo-comercios);
  position: relative;
  margin-top: 5%;
}
.red-defensora h2 {
  max-width: 28rem;
}
.red-defensora h2,
.red-defensora p {
  color: white;
}
.red-defensora_component {
  width: 50%;
  padding-left: 10%;
}
.red-defensora_component p {
  max-width: 27rem;
}
.red-comercios-img {
  height: 140%;
  position: absolute;
  inset: auto 20% -20% auto;
}
@media (max-width: 1100px) {
  .red-defensora_component {
    width: 40%;
    padding-left: 0%;
  }
  .red-comercios-img {
    height: 120%;
    position: absolute;
    inset: auto 10% -10% auto;
  }
}

@media (max-width: 700px) {
  .red-defensora .padding-section {
    padding-bottom: 1.5rem !important;
  }
  .red-comercios-img {
    width: 50%;
    height: auto;
    position: relative;
    bottom: -2rem;
    left: 25%;
    right: auto;
  }
  .red-defensora {
    margin-top: 0%;
    margin-bottom: 2.5rem;
  }
  .red-defensora_component {
    width: 100%;
    text-align: center;
  }
}

/*comercios*/
.comercio_component {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  place-items: end stretch;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}
.comercio_component > * {
  color: var(--azul-comercios);
}
.comercio_component ol {
  padding-left: 5%;
}
.comercio_component img {
  max-width: 25rem;
}
.comercio_component li {
  margin-bottom: 0.5rem;
}
.comercio_component .content-right {
  padding-bottom: 2rem;
}
.comercio_component .content-left {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
@media (max-width: 900px) {
  .comercio_component {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .comercio_component .content-right {
    padding-bottom: 0rem;
  }
}
@media (max-width: 500px) {
  .comercio_component img {
    max-width: 15rem;
  }
}

/*footer comercios*/
.footer-comercio {
  background-color: var(--turquesa-comercios);
  border-radius: 3.5rem;
}
.footer-comercio_component {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.footer-comercio_component img {
  width: 7rem;
}
.footer-comercio_component .full-row a {
  color: var(--rojo-comercios);
  font-family: "KievitOT";
}
.footer-comercio_component .full-row {
  max-width: 38rem;
}
@media screen and (max-width: 600px) {
  .footer-comercio_component {
    text-align: center;
    flex-flow: column;
  }
}