.page-productos{
  overflow-x: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.page-productos footer{
  scroll-snap-align: start !important;
}

.pr--banner {
  width: 100%;
  height: 100%;
  padding: 2em 1em 3em 1em;
  background-color: #fff;
  scroll-snap-align: start !important;
}

.pr--banner h1 {
  height: 100%;
  padding: 2em;
  font-size: 3em;
  font-weight: 300;
  color: #65194F;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1em;
}

.pr--banner h1 span:nth-child(1) {
  transition: opacity 0.4s, transform 0.4s ease-in;
}
.pr--banner h1 span:nth-child(2) {
  transition: opacity 0.4s, transform 0.6s ease-in;
}
.pr--banner h1 span:nth-child(3) {
  transition: opacity 0.4s, transform 0.8s ease-in;
}

.pr--nav {
  width: 100%;
  height: 100%;
}

.pr--nav ul {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  gap: 10px;
  list-style: none;
}

.pr--nav ul li {
  position: relative;
  color: #85bc21;
  border: solid 1px #85bc21;
  padding: 0.3em 0;
  transition: transform .4s, box-shadow .6s;
}
.pr--nav ul li:hover {
  cursor: pointer;
  color: #f49701;
  transform: translate(1px, -1px);
  box-shadow: 2px 3px 5px #f49701;
}

.pr--nav ul li span {
  height: 100%;
}

.pr--banner-autoservice {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 2em 0;
  margin-top: 2em;
}

.pr--banner-autoservice h3 {
  color: #f49701;
  font-size: 1.5em;
}
.pr--banner-autoservice p {
  color: #626262;
  padding: 2em 0;
}

@media (max-width: 767px) {
    .pr--banner {
      padding: 0 2em;
    }
}

@media (min-width: 425px) {
  .pr--nav ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .pr--banner-autoservice p {
    color: #626262;
    padding: 2em 3.5em;
  }
}

@media (min-width: 1024px) {
  .pr--banner h1 {
    font-size: 3em;
  }
  .pr--nav ul {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1920px) {
  .pr--nav ul li {
    position: relative;
    color: #85bc21;
    font-size: 2em;
  }
  .pr--banner-autoservice h3 {
    color: #f49701;
    font-size: 2em;
    margin-top: 2em;
  }
  .pr--banner-autoservice p {
    color: #626262;
    font-size: 1.5em;
    padding: 2em 0;
  }
}