.body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero hero"
    "section1 section1"
    "section2 section2"
    "section3 section3"
    "section4 section4"
    "section7 section7"
    "section5 section5"
    "section6 section6"
    "footer footer";
  background-color: var(--primario);
}
.h1,
.h2 {
  width: 100%;
  font-family: "Catamaran", sans-serif;
  font-style: oblique;
  color: var(--secundario);
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.p {
  color: var(--blanco);
  margin-bottom: 1rem;
}
.button__book {
  display: inline-block;
  max-width: fit-content;
  color: var(--primario);
  background-color: var(--secundario);
  margin: 20px;
  padding: 8px 5px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
}
.button__info {
  display: inline-block;
  max-width: fit-content;
  color: var(--primario);
  background-color: var(--secundario);
  margin: 10px 0 0 4rem;
  padding: 5px 3px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
}
.button__book-icon {
  display: inline-block;
  width: 1.5rem;
}

/* HERO */
.hero {
  width: 100%;
  grid-area: hero;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}
.hero__logo {
  width: 100px;
  position: fixed;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  animation: sombra 3s infinite alternate;
  z-index: 1;
}
.hero_contenido {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url(/images/catamaran_hero_sin.webp);
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0rem 0rem 2rem 2rem rgba(0, 68, 240, 0.188);
}
.hero__offroad1 {
  font-family: "Catamaran", sans-serif;
  font-style: oblique;
  color: rgba(1, 0, 83, 0.674);
  position: absolute;
  top: 35%;
  left: 5%;
  font-size: 3rem;
  animation: texto 2.5s infinite alternate;
  z-index: -1;
}
.hero__offroad2 {
  font-family: "Catamaran", sans-serif;
  font-style: oblique;
  color: rgba(1, 0, 83, 0.674);
  position: absolute;
  top: 60%;
  right: 5%;
  font-size: 3rem;
  animation: texto 2.5s infinite alternate;
  z-index: 2;
}
.hero__imagen {
  display: none;
  width: 70%;
  z-index: 1;
}
.hero__imagen-movil {
  display: block;
  width: 80%;
  z-index: 1;
}
.coche-fijo {
  display: none;
  position: fixed;
  width: 70vw;
  height: 70vh;
  top: calc((100% - 70vw) / 2);
  left: calc((100% - 70vw) / 2);
  z-index: -2;
}
.coche-fijo2 {
  display: block;
  position: fixed;
  width: 80vw;
  height: 80vh;
  top: calc((100% - 80vw) / 2);
  left: calc((100% - 80vw) / 2);
  z-index: -2;
}

/* SECTION 1 */
.section__presentacion {
  width: 100%;
  padding: 10px 10%;
  grid-area: section1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SECTION 2 */
.section__video {
  width: 100%;
  padding: 0 10px;
  height: auto;
  grid-area: section2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    0deg,
    rgba(31, 71, 96, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  position: relative;
}
.section__video-img {
  width: 100%;
  position: absolute;
  bottom: 50%;
  z-index: -1;
}
.section__video-iframe {
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
  height: 40vh;
  margin: 5rem 0;
  padding: 5px;
  animation: sombra 3s infinite alternate;
}

/* SECTION 3 */
.section3__info {
  width: 100%;
  grid-area: section3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(31, 71, 96, 1) 0%,
    rgba(204, 214, 35, 1) 100%
  );
  z-index: 1;
}
.section3__info-cont {
  padding: 10%;
}

/* SECTION 4 */
.section4 {
  width: 100%;
  height: auto;
  padding: 10px;
  grid-area: section4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(204, 214, 35, 1) 0%,
    rgba(31, 71, 96, 1) 100%
  );
}
.section4__img {
  width: 100%;
  border-radius: 20px;
  margin: 60px 0;
  padding: 5px;
  animation: sombra 3s infinite alternate;
}

/* SECTION 5 GRID */
.section5__grid {
  width: 100vw;
  grid-area: section5;
  background: linear-gradient(
    0deg,
    rgba(31, 71, 96, 1) 0%,
    rgba(204, 214, 35, 1) 100%
  );
}
/* GRID IMAGENES  GRID IMAGENES  GRID IMAGENES */
section.grid {
  background-color: #1f4760;
  padding: 5rem 5%;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 15rem 15rem 15rem;
  grid-template-areas:
    "producto1 producto2 producto2"
    "producto3 producto3 producto6"
    "producto5 producto4 producto7";
}
@media only screen and (max-width: 720px) {
  section.grid {
    grid-template-areas:
      "producto1 producto1 producto1"
      "producto2 producto2 producto2"
      "producto3 producto3 producto3"
      "producto4 producto4 producto4"
      "producto5 producto5 producto5"
      "producto6 producto6 producto6"
      "producto7 producto7 producto7";
    grid-template-rows: 15rem 15rem 15rem 15rem 15rem 15rem 15rem;
  }
}
.producto1 {
  grid-area: producto1;
}
.producto2 {
  grid-area: producto2;
}
.producto3 {
  grid-area: producto3;
}
.producto4 {
  grid-area: producto4;
}
.producto5 {
  grid-area: producto5;
}
.producto6 {
  grid-area: producto6;
}
.producto7 {
  grid-area: producto7;
}

.producto {
  position: relative;
  overflow: hidden;
}
.more_info {
  width: 2rem;
  position: absolute;
  bottom: 8px;
  left: 10px;
  z-index: 1;
}

.img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  transition: all 1s ease;
  transform: scale(1);
}
.img:hover {
  transform: scale(1.3);
}
.titulo {
  width: 100%;
  font-family: "Catamaran", sans-serif;
  font-style: oblique;
  position: absolute;
  bottom: 0px;
  padding: 10px 10px 10px 45px;
  color: #cddd53;
  background: linear-gradient(0deg, #1f4760 0%, rgba(0, 212, 255, 0) 100%);
  font-size: 2rem;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #111111e6;
  z-index: 3;
  opacity: 0;
  transform: scale(0);
  transition: all 0.7s ease-in;
  pointer-events: none;
}
.lightbox.activo {
  display: flex;
  flex-flow: column;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}
.lightbox .cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
  width: 40px;
}
.lightbox .imagen_grande {
  margin-top: 10vh;
  width: 90%;
  height: 50%;
  padding: 5px;
  border-radius: 20px;
  object-fit: cover;
  animation: sombra 3s infinite alternate;
}
.texto_light {
  width: 90%;
  color: var(--blanco);
}
.h3 {
  color: var(--secundario);
  font-family: "Catamaran", sans-serif;
  font-style: oblique;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .lightbox .imagen_grande {
    width: 60%;
    height: 50%;
  }
  .texto_light {
    width: 60%;
  }
}

/* SECTION 6 CONTACTO*/
.section6__google {
  width: 100vw;
  grid-area: section6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--primario);
}
.section6__contacto {
  text-align: center;
  padding: 5rem 0 10rem;
  z-index: 1;
}
.section6__iframe-google {
  min-width: 100vw;
  height: 60vh;
}
/* SECTION7 PARALLAX */
.section7__parallax {
  width: 100%;
  text-align: center;
  padding: 20vh 20px;
  grid-area: section7;
}

/* FOOTER */
.footer {
  width: 100%;
  padding: 5rem 0 10rem;
  text-align: center;
  grid-area: footer;
  background: linear-gradient(
    180deg,
    rgba(31, 71, 96, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 1;
}
.footer__logo {
  width: 150px;
  margin: 3rem auto;
  border-radius: 50%;
  animation: sombra 3s infinite alternate;
}
.footer__icons {
  display: flex;
  justify-content: center;
}
.icons {
  display: inline-block;
  width: 30px;
  margin: 15px;
}
.heart {
  display: inline-block;
  width: 30px;
}
.footer__firma {
  text-align: center;
}
.footer__button-book {
  position: fixed;
  bottom: 20px;
  left: 30px;
  display: inline-block;
  max-width: fit-content;
  color: var(--primario);
  background-color: var(--secundario);
  padding: 8px 5px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
}
.footer__button-whatsapp {
  position: fixed;
  bottom: 10px;
  right: 30px;
  z-index: 2;
}
.footer__phone {
  width: 80px;
}

/* ANIMACIONES colores */
@keyframes sombra {
  0%,
  10%,
  15%,
  20%,
  30%,
  35%,
  40%,
  50%,
  55%,
  60%,
  70%,
  75%,
  80%,
  85%,
  90%,
  100% {
    box-shadow: 7px 5px 6px #ffffff, 7px 7px 7px #89dd68, 7px 7px 5px #214254,
      7px 5px 9px #2a88ed;
  }
  10%,
  60%,
  80%,
  85% {
    box-shadow: none;
  }
}
@keyframes texto {
  0%,
  10%,
  15%,
  20%,
  30%,
  35%,
  40%,
  50%,
  55%,
  60%,
  70%,
  75%,
  80%,
  85%,
  90%,
  100% {
    text-shadow: 7px 5px 6px #ffffff, 7px 7px 7px #89dd68, 12px 12px 5px #000000,
      7px 5px 9px #2a88ed;
  }
  10%,
  15%,
  80%,
  85% {
    text-shadow: none;
  }
}

/* MEDIA QUERYS */
@media screen and (min-width: 480px) {
  .hero__offroad1 {
    font-size: 4rem;
    top: 30%;
    left: 10%;
  }
  .hero__offroad2 {
    font-size: 4rem;
    top: 60%;
    right: 10%;
  }
  .section__video-iframe {
    height: 50vh;
  }
}
@media screen and (min-width: 768px) {
  .body {
    grid-template-areas:
      "hero hero"
      "section1 section1"
      "section2 section2"
      "section3 section4"
      "section7 section7"
      "section5 section5"
      "section6 section6"
      "footer footer";
  }
  .hero__offroad1 {
    font-size: 5rem;
    top: 30%;
    left: 15%;
  }
  .hero__offroad2 {
    font-size: 5rem;
    top: 60%;
    right: 15%;
  }
  .section__video-img {
    bottom: 20%;
  }
  .section__video-iframe {
    height: 60vh;
  }
  .section4 {
    padding: 0 10%;
    background: linear-gradient(
      180deg,
      rgba(31, 71, 96, 1) 0%,
      rgba(204, 214, 35, 1) 100%
    );
  }
}
@media screen and (min-width: 960px) {
  .hero__imagen {
    display: block;
  }
  .hero__imagen-movil {
    display: none;
  }
  .section__video-img {
    width: 80%;
    bottom: 0;
  }
  .section4 {
    min-height: 450px;
  }
}
@media screen and (min-width: 1024px) {
  .coche-fijo {
    display: block;
  }
  .coche-fijo2 {
    display: none;
  }
  .coche-fijo {
    width: 70vw;
    height: 70vw;
    top: calc((100% - 70vw) / 2);
    left: calc((100% - 70vw) / 2);
  }
  .hero__offroad1 {
    font-size: 7rem;
    top: 30%;
    left: 15%;
  }
  .hero__offroad2 {
    font-size: 7rem;
    top: 60%;
    right: 15%;
  }
}