@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Cardo:ital,wght@0,400;0,700;1,400&family=Questrial&display=swap');

:root {
   --verde-principal: #2E6069;
   --verde-principal-op: #2e6069d0;
   --verde-secundario: #79D799;
   --verde-uru: #00A555;
   --celeste-cuadros: #86C1C4;
   --celeste-cuadros-op: #86C1C4d0;
   --arena: #ECE2C6;
   --azul-uru: #006BA0;
   --azul-uru-op: #006BA0d0;
}

* {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "Questrial", sans-serif;
   /* DIBUJA UN BORDE ROJO ALREDEDOR DE CADA ELEMENTO */
   /* outline: 1px solid red; */
}

/* Basic Styling */
body {
   width: 100%;
   background-color: var(--verde-principal);
   position: relative;
}

header {

   & .fondo {
      position: relative;
      width: 100%;
      max-height: 100vh;
      overflow: hidden;

      & video {
         width: 100%;
         height: auto;
         display: block;
         object-fit: cover;
      }

      & .texto-sobre-img {
         position: absolute;
         top: 31.2vh;
         right: clamp(20px, 15vw, 350px);
         width: fit-content;
         /* height: fit-content; */
         display: flex;
         flex-direction: column;
         text-align: center;
         align-items: end;

         & h1 {
            font-size: 180px;
            color: transparent;
            -webkit-text-stroke-width: 3px;
            -webkit-text-stroke-color: #fff;
            font-family: "Open Sans", sans-serif;
            font-weight: bold;
         }

         & h2 {
            width: fit-content;
            height: fit-content;
            padding: 10px 20px;
            /* background-color: rgba(255, 255, 255, 0.886); */
            background-color: var(--celeste-cuadros-op);
            font-size: 40px;
            color: #fff;
            font-weight: 500;
            border-radius: 35px;
            font-family: "Caveat", cursive;
            margin-top: -20px;
         }
      }
   }
}

/*MENU LATERAL*/
.lateral {
   width: 50px;
   height: 36vh;
   background-color: #fffa;
   position: fixed;
   z-index: 10;
   right: 50px;
   top: 32vh;
   overflow: hidden;
   transition: 0.5s ease-in-out;
   border-radius: 15px;

   & .menu-lateral {
      width: 100%;
      height: 100%;

      & .list-menu {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;

         & li {
            width: 100%;
            height: 6vh;

            & a {
               width: 100%;
               height: 100%;
               display: flex;

               & .icono {
                  width: 50px;
                  min-width: 50px;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  & i {
                     font-size: 30px;
                     color: var(--verde-principal);
                  }
               }

               & .texto {
                  width: 250px;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  padding-left: 10px;


                  & p {
                     width: 300px;
                     font-size: 20px;
                     color: var(--verde-principal);
                     font-weight: 600;
                  }
               }
            }

         }
      }
   }
}

.lateral:hover {
   width: 300px;
}

/* MAIN */
.main {
   width: 100%;
   height: fit-content;

   & .bloque-uno {
      width: 100%;
      height: 100vh;
      background-color: var(--verde-principal);
      display: flex;
      flex-direction: column;

      & .arriba {
         width: 100%;
         height: 45vh;
         background-color: var(--verde-principal);
         display: flex;

         & .arr-izq {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & .sigla,
            & .significado {
               color: #fff;
               font-weight: 100;
            }

            & .sigla {
               font-size: 90px;
            }

            & .significado {
               font-size: 22px;
            }
         }

         & .arr-der {
            width: 60%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 170px;

            & .frase {
               width: 70%;
               color: #fff;
               font-size: 30px;
            }
         }
      }

      & .separador {
         width: 100%;
         height: 10vh;

         & img {
            width: 100%;
            height: 10vh;
         }
      }

      & .abajo {
         width: 100%;
         height: 45vh;
         background-color: var(--verde-secundario);
         display: flex;
         flex-direction: column;

         & .aba-arr {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .frase {
               color: #fff;
               font-size: 35px;
               text-align: center;
               font-style: italic;
            }
         }

         & .aba-aba {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: end;
            align-items: center;

            & a {
               margin: 0 150px 100px 0;
               font-size: 20px;
               color: var(--verde-principal);
               background-color: #fff;
               padding: 40px 30px;
               border-radius: 50px;
            }
         }

      }
   }

   & .separador-bloq-uno-dos {
      width: 100%;
      height: 10vh;
      transform: translateY(-5px);

      & img {
         width: 100%;
         height: 10.1vh;
         transform: rotate(180deg);
      }
   }

   /* BUSCAMOS */
   & .bloque-dos {
      width: 100%;
      height: 140vh;
      background-color: var(--verde-principal);

      & .arriba {
         width: 100%;
         height: 50%;
         position: relative;

         & .arr-arr {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 70%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 40px 40px;
            border-radius: 25px;

            & .titulo {

               & h2 {
                  font-size: 40px;
               }
            }

            & .punto {
               width: 100%;

               display: flex;
               flex-direction: row;
               /* align-items: center; */
               gap: 10px;

               & .item-dot {
                  min-width: 20px;
                  width: 20px;
                  max-width: 20px;
                  min-height: 20px;
                  height: 20px;
                  max-height: 20px;
                  transform: translateY(5px);
                  border-radius: 50%;
                  background-color: var(--verde-principal);
               }

               & .item {
                  font-size: 30px;
                  /* background-color: yellow; */
               }
            }

         }

         & .arr-aba {
            position: relative;
            width: 100%;
            height: 70vh;

            & .imagen-profe {
               width: 100%;
               height: 100%;
               display: flex;
               justify-content: end;
               align-items: end;

               & img {
                  width: 46%;
               }
            }
         }

      }

      & .separador {
         width: 100%;
         height: 8vh;
         background-color: var(--celeste-cuadros);

         & .tortuga-saliendo {
            position: relative;
            left: -100px;
            top: -350px;

            & img {
               width: 40%;
               transform: rotate(25deg);
            }
         }
      }

      & .abajo {
         width: 100%;
         height: 50%;

         & .aba-arr {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .content-aba-arr {
               width: 50%;
               height: fit-content;
               background-color: var(--celeste-cuadros);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 40px 40px;
               border-radius: 25px;
               color: #fff;
               z-index: 1;

               & .titulo {

                  & h2 {
                     font-size: 40px;
                  }
               }

               & .punto {
                  width: 100%;

                  display: flex;
                  flex-direction: row;
                  /* align-items: center; */
                  gap: 10px;

                  & .item-dot {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     transform: translateY(5px);
                     border-radius: 50%;
                     background-color: var(--verde-principal);
                  }

                  & .item {
                     font-size: 30px;
                     /* background-color: yellow; */
                  }
               }
            }
         }

         & .aba-aba {
            width: 100%;
            height: 40%;
            display: flex;
            gap: 5px;
            flex-direction: column;
            align-items: center;
            /* justify-content: center; */
            color: #fff;
            font-size: 60px;
         }

      }

   }

   /* ANIMALES */
   & .bloque-tres {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--verde-principal);

      & .botones {
         width: 80%;
         height: 80%;
         display: flex;
         align-items: center;
         justify-content: space-around;

         & .boton {
            width: 350px;
            height: 500px;
            border-radius: 25px;
            background-color: var(--celeste-cuadros);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            position: relative;

            & .animal {
               position: absolute;
               top: -26.5%;

               & .lobo-marino {
                  height: 300px;
                  transform: translateY(-25px);
               }

               & .tortuga {
                  height: 300px;
                  transform: translateY(-25px);
               }

               & .delfin {
                  height: 300px;
                  transform: translateX(75px) translateY(-55px) rotate(15deg);
               }
            }

            & .signo-mas {
               position: absolute;
               top: 30%;

               & .fa-square-plus {
                  font-size: 180px;
                  color: var(--verde-principal);
               }
            }

            & .nuevo {
               width: 100%;
               height: 100%;
               display: flex;
               justify-content: center;
               /* align-items: center; */

               & img {
                  width: 150px;
                  height: 150px;
               }
            }

            & .texto {
               position: absolute;
               top: 68%;
               text-align: center;
               font-size: 35px;
               color: var(--verde-principal);
            }
         }
      }
   }

   & .bloque-cuatro {
      width: 100%;
      height: 100vh;
      background-color: var(--celeste-cuadros);
      display: flex;
      align-items: center;

      & .bloque-cuatro-izq {
         width: 50%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;

         & img {
            height: 70%;
            transform: translateX(-150px);
         }
      }

      & .bloque-cuatro-der {
         width: 30%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         gap: 30px;
         color: #fff;

         & .titulo {
            font-size: 60px;
         }

         & .texto {
            font-size: 25px;
         }

         & .boton {
            width: 70%;
            height: 100px;
            border-radius: 50px;
            background-color: #fff;


            & a {
               width: 100%;
               height: 100%;
               color: var(--verde-principal);
               font-size: 35px;
               display: flex;
               align-items: center;
               justify-content: center;
            }
         }
      }
   }

   & .bloque-cinco {
      width: 100%;
      height: 85vh;
      background-color: var(--arena);
      display: none;
      flex-direction: column;
      justify-content: center;

      & .galeria {
         width: fit-content;
         height: 80vh;
         padding: 0px 50px;
         /* background-color: red; */

         display: flex;
         flex-wrap: wrap;
         column-gap: 20px;
         justify-content: center;
         align-items: center;

         & .cuadro {
            width: 300px;
            height: 300px;
         }
      }

      & .boton-galeria {
         width: 100%;
         height: 5vh;
         display: flex;
         justify-content: center;

         & a {
            font-size: 25px;
            font-weight: 600;
            color: var(--verde-principal);
            text-decoration: 3px solid underline;
         }
      }
   }

   & .bloque-seis {
      width: 100%;
      height: 35vh;
      background-color: var(--verde-secundario);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      & h1 {
         margin-top: 30px;
         color: #fff;
      }

      & .apoyan {
         width: 95%;
         height: auto;
         margin: auto;
         overflow: hidden;

         & .slider-inf {
            display: flex;
            column-gap: 70px;
            animation: scroll 35s linear infinite;
            -webkit-animation: scroll 50s linear infinite;
            width: calc(250px * 18);

            & .apoyo {
               width: 250px;
               height: 250px;
               display: flex;
               align-items: center;

               & img {
                  width: 100%;
               }
            }
         }
      }
   }
}


@media screen and (max-width: 425px) {

   /* Basic Styling */
   body {
      width: 100%;
      background-color: var(--verde-principal);
   }

   header {
      /* width: 100%;
      min-height: 270px;
      max-height: 300px;
      overflow: hidden; */

      /*VIDEO FONDO*/
      & .videoFondo {
         padding-top: 70px;
         max-height: none;

         & video {
            width: 100%;
            height: auto;
            object-fit: contain;
         }

         & .texto-sobre-img {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 200px;
            display: none;
            flex-direction: column;
            text-align: center;
            align-items: center;

            & h1 {
               font-size: 35px;
               font-weight: 100;
               color: var(--verde-principal);
               margin-top: 18%;
               letter-spacing: 4px;
            }

            & h2 {
               width: fit-content;
               height: fit-content;
               padding: 5px 10px;
               background-color: rgba(255, 255, 255, 0.486);
               font-size: 17px;
               color: #fff;
               font-weight: 100;
               border-radius: 35px;
               margin-top: -5px;

               & strong {
                  font-size: 22px;
               }
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }

   /*MAIN*/
   .main {
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: column;
      background-color: var(--celeste-cuadros);

      & .bloque-uno {
         width: 100%;
         height: fit-content;
         background-color: var(--verde-principal);
         
         display: flex;
         flex-direction: column;

         & .arriba {
            height: fit-content;
            flex-direction: column;

            & .arr-izq {
               width: 100%;
               height: fit-content;

               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               & .sigla,
               & .significado {
                  color: #fff;
                  font-weight: 100;
                  font-family: "Questrial", sans-serif;
               }

               & .sigla {
                  font-size: 65px;
               }

               & .significado {
                  font-size: 13px;
               }
            }

            & .arr-der {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 30px 0 30px 0;

               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
               }
            }
         }

         & .separador {
            display: none;
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .aba-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;


               & .frase {
                  width: 90%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
                  padding: 20px 0;

               }
            }

            & .aba-aba {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 10px 0 20px 0;

               & a {
                  margin: 0;
                  font-size: 16px;
                  color: var(--verde-principal);
                  background-color: #fff;
                  padding: 20px 15px;
                  border-radius: 50px;
               }
            }

         }
      }

      & .separador-bloq-uno-dos {
         width: 100%;
         height: 0vh;

         & img {
            width: 100%;
            height: 0vh;
            transform: rotate(180deg);
         }
      }

      & .bloque-dos {
         /* width: 100%; */
         height: fit-content;
         /* background-color: var(--verde-principal); */
         padding: 0 0 10px 0;

         & .arriba {
            width: 100%;
            height: fit-content;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 0;

            & .arr-arr {
               position: relative;
               top: 0px;
               left: 0px;
               width: 90%;
               height: fit-content;
               background-color: var(--celeste-cuadros);
               color: #fff;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 15px;
               padding: 40px 40px;
               border-radius: 25px;

               & .titulo {
                  text-align: center;
                  z-index: 1;

                  & h2 {
                     font-size: 30px;
                  }
               }

               & .punto {
                  width: 100%;

                  display: flex;
                  flex-direction: row;
                  /* align-items: center; */
                  gap: 10px;

                  & .item-dot {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     transform: translateY(5px);
                     border-radius: 50%;
                     background-color: var(--verde-principal);
                  }

                  & .item {
                     font-size: 20px;
                     /* background-color: yellow; */
                  }
               }
            }

            & .arr-aba {
               display: none;
               position: relative;
               width: 100%;
               height: 70vh;

               & .imagen-profe {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & img {
                     width: 46%;
                  }
               }
            }
         }

         & .separador {
            width: 100%;
            height: 0vh;
            background-color: var(--celeste-cuadros);

            & .tortuga-saliendo {
               display: none;
               position: relative;
               left: -60px;
               top: -420px;

               & img {
                  width: 50%;
               }
            }
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            padding: 0;

            & .aba-arr {
               width: 100%;
               height: 60%;
               display: flex;
               justify-content: center;
               align-items: center;

               & .content-aba-arr {
                  width: 90%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;
                  color: #fff;

                  & .titulo {
                     text-align: center;

                     & h2 {
                        font-size: 30px;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(5px);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 20px;
                        /* background-color: yellow; */
                     }
                  }
               }
            }

            & .aba-aba {
               width: 100%;
               height: 40%;
               display: flex;
               gap: 5px;
               flex-direction: column;
               align-items: center;
               /* justify-content: center; */
               color: #fff;
               font-size: 23px;
               padding-top: 15px;
            }

         }

      }

      & .bloque-tres {
         width: 100%;
         height: fit-content;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: var(--verde-principal);
         padding: 0 0 20px 0;

         & .botones {
            width: 90%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            gap: 20px;

            & .boton {
               width: 200px;
               height: 200px;
               border-radius: 25px;
               background-color: var(--celeste-cuadros);
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               align-items: center;
               padding: 30px 0;
               position: relative;

               & .animal {
                  width: 100%;
                  height: 100%;
                  /* position: static; */
                  top: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  & img {
                     opacity: .2;
                  }

                  & .lobo-marino {
                     height: 90%;
                     transform: translateY(0);
                  }

                  & .tortuga {
                     height: 60%;
                     transform: translateY(0);
                  }

                  & .delfin {
                     height: 50%;
                  transform: translateX(20px) translateY(-20px) rotate(35deg);
                  }
               }

               & .nuevo {
                  & img {
                     width: 50%;
                     height: 50%;
                     transform: translateY(-50px);
                  }
               }

               & .texto {
                  position: absolute;
                  top: 65%;
                  text-align: center;
                  font-size: 17px;
                  font-weight: 600;
                  color: var(--verde-principal);
               }
            }
         }
      }

      & .bloque-cuatro {
         width: 100%;
         height: fit-content;
         background-color: var(--celeste-cuadros);
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px 0;

         & .bloque-cuatro-izq {
            width: 50%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;

            & img {
               height: 70%;
               transform: translateX(-150px);
            }
         }

         & .bloque-cuatro-der {
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: #fff;

            & .titulo {
               font-size: 30px;
               text-align: center;
            }

            & .texto {
               font-size: 18px;
            }

            & .boton {
               width: 60%;
               height: 50px;
               border-radius: 50px;
               background-color: #fff;


               & a {
                  width: 100%;
                  height: 100%;
                  color: var(--verde-principal);
                  font-size: 25px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }
      }

      /* ACTIVIDADES */
      & .bloque-cinco {
         width: 100%;
         height: 40vh;
         background-color: var(--arena);
         display: none;
         flex-direction: column;
         justify-content: center;
         overflow: hidden;

         & .galeria {
            width: 1000%;
            height: 35vh;
            padding: 0;
            /* background-color: red; */

            display: flex;
            flex-wrap: nowrap;
            column-gap: 0px;
            justify-content: center;
            align-items: center;

            position: relative;
            animation: 40s slidy infinite;

            & .cuadro {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 100vw;
               height: fit-content;

               & img {
                  height: 30vh;
               }
            }
         }

         & .boton-galeria {
            width: 100%;
            height: 5vh;
            display: flex;
            justify-content: center;

            & a {
               font-size: 20px;
               font-weight: 600;
               color: var(--verde-principal);
               text-decoration: 3px solid underline;
            }
         }
      }

      & .bloque-seis {
         width: 100%;
         height: 25vh;
         background-color: var(--verde-secundario);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         & h1 {
            margin-top: 10px;
            font-size: 22px;
            color: #fff;
         }

         & .apoyan {
            width: 95%;
            height: auto;
            margin: auto;
            overflow: hidden;

            & .slider-inf {
               display: flex;
               justify-content: center;
               column-gap: 70px;
               animation: scroll 35s linear infinite;
               -webkit-animation: scroll 22s linear infinite;
               width: calc(250px * 18);
               height: 100%;

               & .apoyo {
                  width: 250px;
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     width: 100%;
                  }
               }
            }
         }
      }
   }
}

@media screen and (min-width: 426px) and (max-width: 576px) {

   /* Basic Styling */
   body {
      width: 100%;
      background-color: var(--verde-principal);
   }

   header {
      /* position: relative;
      width: 100%;
      min-height: 320px;
      max-height: 390px;
      overflow: hidden; */

      /*VIDEO FONDO*/
      & .videoFondo {
         padding-top: 70px;
         max-height: none;

         & video {
            width: 100%;
            height: auto;
            object-fit: contain;
         }

         & .texto-sobre-img {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 200px;
            display: none;
            flex-direction: column;
            text-align: center;
            align-items: center;

            & h1 {
               font-size: 35px;
               font-weight: 100;
               color: var(--verde-principal);
               margin-top: 18%;
               letter-spacing: 4px;
            }

            & h2 {
               width: fit-content;
               height: fit-content;
               padding: 5px 10px;
               background-color: rgba(255, 255, 255, 0.486);
               font-size: 17px;
               color: #fff;
               font-weight: 100;
               border-radius: 35px;
               margin-top: -5px;

               & strong {
                  font-size: 22px;
               }
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }

   /*MAIN*/
   .main {
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: column;
      background-color: var(--celeste-cuadros);

      & .bloque-uno {
         width: 100%;
         height: fit-content;
         background-color: var(--verde-principal);
         display: flex;
         flex-direction: column;

         & .arriba {
            height: fit-content;
            flex-direction: column;

            & .arr-izq {
               width: 100%;
               height: fit-content;

               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               & .sigla,
               & .significado {
                  color: #fff;
                  font-weight: 100;
                  font-family: "Questrial", sans-serif;
               }

               & .sigla {
                  font-size: 65px;
               }

               & .significado {
                  font-size: 13px;
               }
            }

            & .arr-der {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 30px 0 30px 0;

               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
               }
            }
         }

         & .separador {
            display: none;
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .aba-arr {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;


               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
                  padding: 20px 0;

               }
            }

            & .aba-aba {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 10px 0 20px 0;

               & a {
                  margin: 0;
                  font-size: 20px;
                  color: var(--verde-principal);
                  background-color: #fff;
                  padding: 20px 15px;
                  border-radius: 50px;
               }
            }

         }
      }

      & .separador-bloq-uno-dos {
         width: 100%;
         height: 0vh;

         & img {
            width: 100%;
            height: 0vh;
            transform: rotate(180deg);
         }
      }

      & .bloque-dos {
         /* width: 100%; */
         height: fit-content;
         /* background-color: var(--verde-principal); */
         padding: 0 0 15px 0;

         & .arriba {
            width: 100%;
            height: fit-content;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 0;

            & .arr-arr {
               position: relative;
               top: 0px;
               left: 0px;
               width: 90%;
               height: fit-content;
               background-color: var(--celeste-cuadros);
               color: #fff;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 15px;
               padding: 40px 40px;
               border-radius: 25px;

               & .titulo {
                  text-align: center;
                  z-index: 1;

                  & h2 {
                     font-size: 40px;
                  }
               }

               & .punto {
                  width: 100%;

                  display: flex;
                  flex-direction: row;
                  /* align-items: center; */
                  gap: 10px;

                  & .item-dot {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     transform: translateY(5px);
                     border-radius: 50%;
                     background-color: var(--verde-principal);
                  }

                  & .item {
                     font-size: 25px;
                     /* background-color: yellow; */
                  }
               }

            }

            & .arr-aba {
               display: none;
               position: relative;
               width: 100%;
               height: 70vh;

               & .imagen-profe {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & img {
                     width: 46%;
                  }
               }
            }

         }

         & .separador {
            width: 100%;
            height: 0vh;
            background-color: var(--celeste-cuadros);

            & .tortuga-saliendo {
               display: none;
               position: relative;
               left: -25px;
               top: -480px;

               & img {
                  width: 45%;
               }
            }
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            padding: 20px 0;

            & .aba-arr {
               width: 100%;
               height: 60%;
               display: flex;
               justify-content: center;
               align-items: center;

               & .content-aba-arr {
                  width: 90%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;
                  color: #fff;

                  & .titulo {
                     text-align: center;

                     & h2 {
                        font-size: 40px;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(5px);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 25px;
                        /* background-color: yellow; */
                     }
                  }
               }
            }

            & .aba-aba {
               width: 100%;
               height: 40%;
               display: flex;
               gap: 5px;
               flex-direction: column;
               align-items: center;
               /* justify-content: center; */
               color: #fff;
               font-size: 30px;
               padding-top: 15px;
            }

         }

      }

      & .bloque-tres {
         width: 100%;
         height: fit-content;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: var(--verde-principal);
         padding: 0 0 20px 0;

         & .botones {
            width: 90%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            gap: 20px;

            & .boton {
               width: 90%;
               height: 300px;
               border-radius: 25px;
               background-color: var(--celeste-cuadros);
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               align-items: center;
               padding: 20px 0;
               position: relative;

               & .animal {
                  width: 100%;
                  height: 100%;
                  position: static;
                  top: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  & img {
                     opacity: .3;
                  }

                  & .lobo-marino {
                     height: 90%;
                     transform: translateY(0);
                  }

                  & .tortuga {
                     height: 90%;
                     transform: translateY(0);
                  }

                  & .delfin {
                     height: 70%;
                     transform: translateX(30px) translateY(-40px) rotate(30deg);
                  }
               }

               & .signo-mas {
                  position: absolute;
                  top: 10%;

                  & .fa-square-plus {
                     font-size: 150px;
                     color: var(--verde-principal);
                  }
               }

               & .texto {
                  position: absolute;
                  top: 65%;
                  text-align: center;
                  font-size: 25px;
                  color: var(--verde-principal);
               }
            }
         }
      }

      & .bloque-cuatro {
         width: 100%;
         height: fit-content;
         background-color: var(--celeste-cuadros);
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;

         & .bloque-cuatro-izq {
            width: 50%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;

            & img {
               height: 70%;
               transform: translateX(-150px);
            }
         }

         & .bloque-cuatro-der {
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: #fff;

            & .titulo {
               font-size: 40px;
               text-align: center;
            }

            & .texto {
               font-size: 25px;
            }

            & .boton {
               width: 70%;
               height: 100px;
               border-radius: 50px;
               background-color: #fff;


               & a {
                  width: 100%;
                  height: 100%;
                  color: var(--verde-principal);
                  font-size: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }
      }

      & .bloque-cinco {
         width: 100%;
         height: 50vh;
         background-color: var(--arena);
         display: none;
         flex-direction: column;
         justify-content: center;
         overflow: hidden;

         & .galeria {
            width: 1000%;
            height: 45vh;
            padding: 0;
            /* background-color: red; */

            display: flex;
            flex-wrap: nowrap;
            column-gap: 0px;
            justify-content: center;
            align-items: center;

            position: relative;
            animation: 40s slidy infinite;

            & .cuadro {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 100vw;
               height: fit-content;
            }
         }

         & .boton-galeria {
            width: 100%;
            height: 5vh;
            display: flex;
            justify-content: center;

            & a {
               font-size: 25px;
               font-weight: 600;
               color: var(--verde-principal);
               text-decoration: 3px solid underline;
            }
         }
      }

      & .bloque-seis {
         width: 100%;
         height: 25vh;
         background-color: var(--verde-secundario);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         & h1 {
            margin-top: 10px;
            font-size: 22px;
            color: #fff;
         }

         & .apoyan {
            width: 95%;
            height: auto;
            margin: auto;
            overflow: hidden;

            & .slider-inf {
               display: flex;
               justify-content: center;
               column-gap: 70px;
               animation: scroll 35s linear infinite;
               -webkit-animation: scroll 22s linear infinite;
               width: calc(250px * 18);
               height: 100%;

               & .apoyo {
                  width: 250px;
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     width: 100%;
                  }
               }
            }
         }
      }
   }
}

@media screen and (min-width: 577px) and (max-width: 768px) {

   /* Basic Styling */
   body {
      width: 100%;
      background-color: var(--verde-principal);
   }

   header {

      & .videoFondo {
         padding-top: 70px;
         max-height: none;

         & video {
            width: 100%;
            height: auto;
            object-fit: contain;
         }

         & .texto-sobre-img {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 200px;
            display: none;
            flex-direction: column;
            text-align: center;
            align-items: center;

            & h1 {
               font-size: 35px;
               font-weight: 100;
               color: var(--verde-principal);
               margin-top: 18%;
               letter-spacing: 4px;
            }

            & h2 {
               width: fit-content;
               height: fit-content;
               padding: 5px 10px;
               background-color: rgba(255, 255, 255, 0.486);
               font-size: 17px;
               color: #fff;
               font-weight: 100;
               border-radius: 35px;
               margin-top: -5px;

               & strong {
                  font-size: 22px;
               }
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }

   /*MAIN*/
   .main {
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: column;
      background-color: var(--celeste-cuadros);

      & .bloque-uno {
         width: 100%;
         height: fit-content;
         background-color: var(--verde-principal);
         display: flex;
         flex-direction: column;

         & .arriba {
            height: fit-content;
            flex-direction: column;

            & .arr-izq {
               width: 100%;
               height: fit-content;

               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               & .sigla,
               & .significado {
                  color: #fff;
                  font-weight: 100;
                  font-family: "Questrial", sans-serif;
               }

               & .sigla {
                  font-size: 65px;
               }

               & .significado {
                  font-size: 13px;
               }
            }

            & .arr-der {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 30px 0 30px 0;

               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
               }
            }
         }

         & .separador {
            display: none;
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .aba-arr {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;


               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
                  padding: 20px 0;

               }
            }

            & .aba-aba {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 10px 0 20px 0;

               & a {
                  margin: 0;
                  font-size: 20px;
                  color: var(--verde-principal);
                  background-color: #fff;
                  padding: 20px 15px;
                  border-radius: 50px;
               }
            }

         }
      }

      & .separador-bloq-uno-dos {
         width: 100%;
         height: 0vh;

         & img {
            width: 100%;
            height: 0vh;
            transform: rotate(180deg);
         }
      }

      & .bloque-dos {
         /* width: 100%; */
         height: fit-content;
         /* background-color: var(--verde-principal); */
         padding: 0 0 15px 0;

         & .arriba {
            width: 100%;
            height: fit-content;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 0;

            & .arr-arr {
               position: relative;
               top: 0px;
               left: 0px;
               width: 90%;
               height: fit-content;
               background-color: var(--celeste-cuadros);
               color: #fff;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 15px;
               padding: 40px 40px;
               border-radius: 25px;

               & .titulo {
                  text-align: center;
                  z-index: 1;

                  & h2 {
                     font-size: 40px;
                  }
               }

               & .punto {
                  width: 100%;
                  z-index: 1;
                  display: flex;
                  flex-direction: row;
                  /* align-items: center; */
                  gap: 10px;

                  & .item-dot {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     transform: translateY(5px);
                     border-radius: 50%;
                     background-color: var(--verde-principal);
                  }

                  & .item {
                     font-size: 25px;
                     /* background-color: yellow; */
                  }
               }

            }

            & .arr-aba {
               display: none;
               position: relative;
               width: 100%;
               height: 70vh;

               & .imagen-profe {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & img {
                     width: 46%;
                  }
               }
            }

         }

         & .separador {
            width: 100%;
            height: 0vh;
            background-color: var(--celeste-cuadros);

            & .tortuga-saliendo {
               display: none;
               position: relative;
               left: -25px;
               top: -445px;

               & img {
                  width: 40%;
               }
            }
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            padding: 20px 0;

            & .aba-arr {
               width: 100%;
               height: 60%;
               display: flex;
               justify-content: center;
               align-items: center;

               & .content-aba-arr {
                  width: 90%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;
                  color: #fff;

                  & .titulo {
                     text-align: center;

                     & h2 {
                        font-size: 40px;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(5px);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 25px;
                        /* background-color: yellow; */
                     }
                  }
               }
            }

            & .aba-aba {
               width: 100%;
               height: 40%;
               display: flex;
               gap: 5px;
               flex-direction: column;
               align-items: center;
               /* justify-content: center; */
               color: #fff;
               font-size: 30px;
               padding-top: 15px;
            }

         }

      }

      & .bloque-tres {
         width: 100%;
         height: fit-content;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: var(--verde-principal);
         padding: 0 0 20px 0;

         & .botones {
            width: 90%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            gap: 20px;

            & .boton {
               width: 60%;
               height: 300px;
               border-radius: 25px;
               background-color: var(--celeste-cuadros);
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               align-items: center;
               padding: 20px 0;
               position: relative;

               & .animal {
                  width: 80%;
                  height: 80%;
                  position: static;
                  top: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  & img {
                     opacity: .3;
                  }

                  & .lobo-marino {
                     height: 100%;
                     transform: translateY(0);
                  }

                  & .tortuga {
                     height: 100%;
                     transform: translateY(20px);
                  }

                  & .delfin {
                     height: 75%;
                     transform: translateX(20px) translateY(0) rotate(30deg);
                  }
               }

               & .signo-mas {
                  position: absolute;
                  top: 10%;

                  & .fa-square-plus {
                     font-size: 150px;
                     color: var(--verde-principal);
                  }
               }

               & .texto {
                  position: absolute;
                  top: 65%;
                  text-align: center;
                  font-size: 25px;
                  color: var(--verde-principal);
               }
            }
         }
      }

      & .bloque-cuatro {
         width: 100%;
         height: fit-content;
         background-color: var(--celeste-cuadros);
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;

         & .bloque-cuatro-izq {
            width: 50%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;

            & img {
               height: 70%;
               transform: translateX(-150px);
            }
         }

         & .bloque-cuatro-der {
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: #fff;

            & .titulo {
               font-size: 40px;
               text-align: center;
            }

            & .texto {
               font-size: 25px;
            }

            & .boton {
               width: 50%;
               height: 80px;
               border-radius: 50px;
               background-color: #fff;


               & a {
                  width: 100%;
                  height: 100%;
                  color: var(--verde-principal);
                  font-size: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }
      }

      & .bloque-cinco {
         width: 100%;
         height: 50vh;
         background-color: var(--arena);
         display: none;
         flex-direction: column;
         justify-content: center;
         overflow: hidden;

         & .galeria {
            width: 1000%;
            height: 45vh;
            padding: 0;
            /* background-color: red; */

            display: flex;
            flex-wrap: nowrap;
            column-gap: 0px;
            justify-content: center;
            align-items: center;

            position: relative;
            animation: 40s slidy infinite;

            & .cuadro {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 100vw;
               height: fit-content;
            }
         }

         & .boton-galeria {
            width: 100%;
            height: 5vh;
            display: flex;
            justify-content: center;

            & a {
               font-size: 25px;
               font-weight: 600;
               color: var(--verde-principal);
               text-decoration: 3px solid underline;
            }
         }
      }

      & .bloque-seis {
         width: 100%;
         height: 25vh;
         background-color: var(--verde-secundario);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         & h1 {
            margin-top: 10px;
            font-size: 22px;
            color: #fff;
         }

         & .apoyan {
            width: 95%;
            height: auto;
            margin: auto;
            overflow: hidden;

            & .slider-inf {
               display: flex;
               justify-content: center;
               column-gap: 70px;
               animation: scroll 35s linear infinite;
               -webkit-animation: scroll 22s linear infinite;
               width: calc(250px * 18);
               height: 100%;

               & .apoyo {
                  width: 250px;
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     width: 100%;
                  }
               }
            }
         }
      }
   }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

   /* Basic Styling */
   body {
      width: 100%;
      background-color: var(--verde-principal);
   }

   header {

      & .videoFondo {
         padding-top: 70px;
         max-height: none;

         & video {
            width: 100%;
            height: auto;
            object-fit: contain;
         }

         & .texto-sobre-img {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 200px;
            display: none;
            flex-direction: column;
            text-align: center;
            align-items: center;

            & h1 {
               font-size: 35px;
               font-weight: 100;
               color: var(--verde-principal);
               margin-top: 18%;
               letter-spacing: 4px;
            }

            & h2 {
               width: fit-content;
               height: fit-content;
               padding: 5px 10px;
               background-color: rgba(255, 255, 255, 0.486);
               font-size: 17px;
               color: #fff;
               font-weight: 100;
               border-radius: 35px;
               margin-top: -5px;

               & strong {
                  font-size: 22px;
               }
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }

   /*MAIN*/
   .main {
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: column;
      background-color: var(--celeste-cuadros);

      & .bloque-uno {
         width: 100%;
         height: fit-content;
         background-color: var(--verde-principal);
         display: flex;
         flex-direction: column;

         & .arriba {
            height: fit-content;
            flex-direction: column;

            & .arr-izq {
               width: 100%;
               height: fit-content;

               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               & .sigla,
               & .significado {
                  color: #fff;
                  font-weight: 100;
                  font-family: "Questrial", sans-serif;
               }

               & .sigla {
                  font-size: 65px;
               }

               & .significado {
                  font-size: 13px;
               }
            }

            & .arr-der {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 30px 0 30px 0;

               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
               }
            }
         }

         & .separador {
            display: none;
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .aba-arr {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;


               & .frase {
                  width: 80%;
                  color: #fff;
                  font-size: var(--fontsize-frases);
                  text-align: justify;
                  padding: 20px 0;

               }
            }

            & .aba-aba {
               width: 100%;
               height: fit-content;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 10px 0 20px 0;

               & a {
                  margin: 0;
                  font-size: 20px;
                  color: var(--verde-principal);
                  background-color: #fff;
                  padding: 20px 15px;
                  border-radius: 50px;
               }
            }

         }
      }

      & .separador-bloq-uno-dos {
         width: 100%;
         height: 0vh;

         & img {
            width: 100%;
            height: 0vh;
            transform: rotate(180deg);
         }
      }

      & .bloque-dos {
         /* width: 100%; */
         height: fit-content;
         /* background-color: var(--verde-principal); */
         padding: 0 0 15px 0;

         & .arriba {
            width: 100%;
            height: fit-content;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 0;

            & .arr-arr {
               position: relative;
               top: 0px;
               left: 0px;
               width: 90%;
               height: fit-content;
               background-color: var(--celeste-cuadros);
               color: #fff;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 15px;
               padding: 40px 40px;
               border-radius: 25px;

               & .titulo {
                  text-align: center;
                  z-index: 1;

                  & h2 {
                     font-size: 40px;
                  }
               }

               & .punto {
                  width: 100%;
                  z-index: 1;
                  display: flex;
                  flex-direction: row;
                  /* align-items: center; */
                  gap: 10px;

                  & .item-dot {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     transform: translateY(5px);
                     border-radius: 50%;
                     background-color: var(--verde-principal);
                  }

                  & .item {
                     font-size: 25px;
                     /* background-color: yellow; */
                  }
               }

            }

            & .arr-aba {
               display: none;
               position: relative;
               width: 100%;
               height: 70vh;

               & .imagen-profe {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & img {
                     width: 46%;
                  }
               }
            }

         }

         & .separador {
            width: 100%;
            height: 0vh;
            background-color: var(--celeste-cuadros);

            & .tortuga-saliendo {
               display: none;
               position: relative;
               left: -25px;
               top: -445px;

               & img {
                  width: 40%;
               }
            }
         }

         & .abajo {
            width: 100%;
            height: fit-content;
            padding: 20px 0;

            & .aba-arr {
               width: 100%;
               height: 60%;
               display: flex;
               justify-content: center;
               align-items: center;

               & .content-aba-arr {
                  width: 90%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;
                  color: #fff;

                  & .titulo {
                     text-align: center;

                     & h2 {
                        font-size: 40px;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(5px);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 25px;
                        /* background-color: yellow; */
                     }
                  }
               }
            }

            & .aba-aba {
               width: 100%;
               height: 40%;
               display: flex;
               gap: 5px;
               flex-direction: column;
               align-items: center;
               /* justify-content: center; */
               color: #fff;
               font-size: 30px;
               padding-top: 15px;
            }

         }

      }

      & .bloque-tres {
         width: 100%;
         height: fit-content;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: var(--verde-principal);
         padding: 0 0 20px 0;

         & .botones {
            width: 90%;
            height: 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            gap: 20px;

            & .boton {
               width: 60%;
               height: 300px;
               border-radius: 25px;
               background-color: var(--celeste-cuadros);
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               align-items: center;
               padding: 20px 0;
               position: relative;

               & .animal {
                  width: 80%;
                  height: 80%;
                  position: static;
                  top: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  & img {
                     opacity: .3;
                  }

                  & .lobo-marino {
                     height: 100%;
                     transform: translateY(0);
                  }

                  & .tortuga {
                     height: 100%;
                     transform: translateY(0);
                  }

                  & .delfin {
                     height: 85%;
                     transform: translateX(15px) translateY(0) rotate(25deg);
                  }
               }

               & .signo-mas {
                  position: absolute;
                  top: 10%;

                  & .fa-square-plus {
                     font-size: 150px;
                     color: var(--verde-principal);
                  }
               }

               & .texto {
                  position: absolute;
                  top: 65%;
                  text-align: center;
                  font-size: 25px;
                  font-weight: 600;
                  color: var(--verde-principal);
               }
            }
         }
      }

      & .bloque-cuatro {
         width: 100%;
         height: fit-content;
         background-color: var(--celeste-cuadros);
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;

         & .bloque-cuatro-izq {
            width: 50%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;

            & img {
               height: 70%;
               transform: translateX(-150px);
            }
         }

         & .bloque-cuatro-der {
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: #fff;

            & .titulo {
               font-size: 40px;
               text-align: center;
            }

            & .texto {
               font-size: 25px;
            }

            & .boton {
               width: 50%;
               height: 80px;
               border-radius: 50px;
               background-color: #fff;


               & a {
                  width: 100%;
                  height: 100%;
                  color: var(--verde-principal);
                  font-size: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }
      }

      & .bloque-cinco {
         width: 100%;
         height: 50vh;
         background-color: var(--arena);
         display: none;
         flex-direction: column;
         justify-content: center;
         overflow: hidden;

         & .galeria {
            width: 1000%;
            height: 45vh;
            padding: 0;
            /* background-color: red; */

            display: flex;
            flex-wrap: nowrap;
            column-gap: 0px;
            justify-content: center;
            align-items: center;

            position: relative;
            animation: 40s slidy infinite;

            & .cuadro {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 100vw;
               height: fit-content;
            }
         }

         & .boton-galeria {
            width: 100%;
            height: 5vh;
            display: flex;
            justify-content: center;

            & a {
               font-size: 25px;
               font-weight: 600;
               color: var(--verde-principal);
               text-decoration: 3px solid underline;
            }
         }
      }

      & .bloque-seis {
         width: 100%;
         height: 25vh;
         background-color: var(--verde-secundario);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         & h1 {
            margin-top: 10px;
            font-size: 22px;
            color: #fff;
         }

         & .apoyan {
            width: 95%;
            height: auto;
            margin: auto;
            overflow: hidden;

            & .slider-inf {
               display: flex;
               justify-content: center;
               column-gap: 70px;
               animation: scroll 35s linear infinite;
               -webkit-animation: scroll 22s linear infinite;
               width: calc(250px * 18);
               height: 100%;

               & .apoyo {
                  width: 250px;
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     width: 100%;
                  }
               }
            }
         }
      }
   }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {

   html {
      width: 100%;
   }

   /* Basic Styling */
   body {
      width: 100%;
      max-width: 100vw;
      background-color: var(--verde-principal);
      position: relative;

      /*MENU LATERAL*/
      & .menuLateral {

         & .lateral {
            width: 50px;
            height: 32vh;
            background-color: #fffa;
            position: fixed;
            z-index: 10;
            right: 50px;
            top: 32vh;
            overflow: hidden;
            transition: 0.5s ease-in-out;
            border-radius: 15px;

            & .menu-lateral {
               width: 100%;
               height: 100%;

               & .list-menu {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;

                  & li {
                     width: 100%;
                     height: 7vh;

                     & a {
                        width: 100%;
                        height: 100%;
                        display: flex;

                        & .icono {
                           width: 50px;
                           min-width: 50px;
                           height: 100%;
                           display: flex;
                           justify-content: center;
                           align-items: center;

                           & i {
                              font-size: 30px;
                              color: var(--verde-principal);
                           }
                        }

                        & .texto {
                           width: 250px;
                           height: 100%;
                           display: flex;
                           align-items: center;
                           padding-left: 10px;


                           & p {
                              width: 300px;
                              font-size: 20px;
                              color: var(--verde-principal);
                              font-weight: 600;
                           }
                        }
                     }

                  }
               }
            }
         }

         & .lateral:hover {
            width: 300px;
         }
      }

      & header {

         & .fondo {
            position: relative;
            width: 100%;
            max-height: 100vh;
            overflow: hidden;

            & video {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
            }

            & .texto-sobre-img {
               position: absolute;
               top: 31.2vh;
               right: 200px;
               /* transform: translateX(-120px); */
               width: fit-content;
               height: fit-content;
               display: flex;
               flex-direction: column;
               text-align: center;
               align-items: end;

               & h1 {
                  /* font-size: 160px; */
                  font-size: clamp(120px, 5vw, 160px);
                  color: transparent;
                  -webkit-text-stroke-width: 3px;
                  -webkit-text-stroke-color: #fff;
                  font-family: "Open Sans", sans-serif;
                  font-weight: bold;
               }

               & h2 {
                  width: fit-content;
                  height: fit-content;
                  padding: 10px 20px;
                  /* background-color: rgba(255, 255, 255, 0.886); */
                  background-color: var(--celeste-cuadros-op);
                  font-size: 40px;
                  color: #fff;
                  font-weight: 500;
                  border-radius: 35px;
                  font-family: "Caveat", cursive;
                  margin-top: -20px;
               }
            }
         }
      }

      /*MAIN*/
      & .main {
         width: 100%;
         height: fit-content;

         /* URUMEPA PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: 60vh;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: column;

            & .arriba {
               width: 100%;
               height: 30vh;
               padding: 0;
               background-color: var(--verde-principal);
               display: flex;

               & .arr-izq {
                  width: 50%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;

                  & .sigla,
                  & .significado {
                     color: #fff;
                     font-weight: 100;
                  }

                  & .sigla {
                     font-size: 85px;
                  }

                  & .significado {
                     text-align: center;
                     font-size: clamp(10px, 5vw, 20px);
                  }
               }

               & .arr-der {
                  width: 40%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-top: 40px;

                  & .frase {
                     width: 72%;
                     color: #fff;
                     font-size: 25px;
                  }
               }
            }

            & .separador {
               width: 100%;
               height: 7vh;

               & img {
                  width: 100%;
                  height: 102%;
               }
            }

            & .abajo {
               width: 100%;
               height: 45vh;
               background-color: var(--verde-secundario);
               display: flex;
               flex-direction: column;

               & .aba-arr {
                  width: 100%;
                  height: 50%;
                  display: flex;
                  justify-content: start;
                  align-items: center;
                  padding: 20px 0 0 30px;

                  & .frase {
                     width: 80%;
                     color: #fff;
                     font-size: 28px;
                     text-align: center;
                     font-style: italic;
                  }
               }

               & .aba-aba {
                  width: 100%;
                  height: 50%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & a {
                     margin: 0 150px 10px 0;
                     font-size: 18px;
                     color: var(--verde-principal);
                     background-color: #fff;
                     padding: 30px 25px;
                     border-radius: 50px;
                  }
               }

            }
         }

         /* SEPARADOR */
         & .separador-bloq-uno-dos {
            width: 100%;
            height: 7vh;
            transform: translateY(-5px);

            & img {
               width: 100%;
               height: 100%;
               transform: rotate(180deg);
            }
         }

         /* BUSCAMOS */
         & .bloque-dos {
            width: 100%;
            height: 90vh;
            background-color: var(--verde-principal);

            & .arriba {
               width: 100%;
               height: 50%;
               position: relative;

               & .arr-arr {
                  position: absolute;
                  top: 50px;
                  left: 50px;
                  width: 70%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;

                  & .titulo {
                     & h2 {
                        font-size: 40px;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(5px);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 30px;
                        /* background-color: yellow; */
                     }
                  }
               }

               & .arr-aba {
                  position: relative;
                  width: 100%;
                  height: 100%;

                  & .imagen-profe {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     justify-content: end;
                     align-items: end;

                     & img {
                        width: 40%;
                     }
                  }
               }
            }

            & .separador {
               width: 100%;
               height: 6vh;
               background-color: var(--celeste-cuadros);

               & .tortuga-saliendo {
                  position: relative;
                  left: -30px;
                  top: -150px;

                  & img {
                     width: 35%;
                  }
               }
            }

            & .abajo {
               width: 100%;
               height: 50%;

               & .aba-arr {
                  width: 100%;
                  height: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-top: 150px;

                  & .content-aba-arr {
                     width: 50%;
                     height: fit-content;
                     background-color: var(--celeste-cuadros);
                     display: flex;
                     flex-direction: column;
                     gap: 10px;
                     padding: 40px 40px;
                     border-radius: 25px;
                     color: #fff;

                     & .titulo {

                        & h2 {
                           font-size: 35px;
                        }
                     }

                     & .punto {
                        width: 100%;

                        display: flex;
                        flex-direction: row;
                        /* align-items: center; */
                        gap: 10px;

                        & .item-dot {
                           min-width: 20px;
                           width: 20px;
                           max-width: 20px;
                           min-height: 20px;
                           height: 20px;
                           max-height: 20px;
                           transform: translateY(3px);
                           border-radius: 50%;
                           background-color: var(--verde-principal);
                        }

                        & .item {
                           font-size: 25px;
                           /* background-color: yellow; */
                        }
                     }
                  }
               }

               & .aba-aba {
                  width: 100%;
                  height: 40%;
                  display: flex;
                  gap: 5px;
                  flex-direction: column;
                  align-items: center;
                  color: #fff;
                  font-size: 40px;
                  padding-top: 145px;
               }
            }
         }

         /* ANIMALES */
         & .bloque-tres {
            width: 100%;
            height: 45vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--verde-principal);
            transform: translateY(75px);

            & .botones {
               width: 90%;
               height: 80%;
               display: flex;
               align-items: end;
               justify-content: center;
               gap: 30px;

               & .boton {
                  width: 300px;
                  height: 350px;
                  border-radius: 25px;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                  padding: 20px 0;
                  position: relative;

                  & .animal {
                     position: absolute;
                     top: 0;

                     & img {
                        width: 80%;
                     }

                     & .lobo-marino {
                        width: 80%;
                        height: auto;
                        transform: translate(20px, -140px);
                     }

                     & .tortuga {
                        width: 100%;
                        height: auto;
                        transform: translate(0, -110px);
                     }

                     & .delfin {
                        width: 100%;
                        height: auto;
                        transform: rotate(20deg) translate(-30px, -110px);
                     }
                  }

                  & .nuevo {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     justify-content: center;
                     /* align-items: center; */

                     & img {
                        width: 100px;
                        height: 100px;
                     }
                  }

                  & .texto {
                     position: absolute;
                     top: 70%;
                     text-align: center;
                     font-size: 20px;
                     font-weight: 100;
                     color: var(--verde-principal);
                  }
               }

            }
         }

         /* CONCIENCIA AMBIENTAL */
         & .bloque-cuatro {
            width: 100%;
            height: 70vh;
            background-color: var(--celeste-cuadros);
            display: flex;
            align-items: center;

            & .bloque-cuatro-izq {
               width: 35%;
               height: 100%;
               display: flex;
               justify-content: center;
               align-items: center;

               & img {
                  height: 70%;
                  transform: translateX(-150px);
               }
            }

            & .bloque-cuatro-der {
               width: 45%;
               height: 90%;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 30px;
               color: #fff;
               transform: translate(25px, 50px);

               & .titulo {
                  font-size: 50px;
               }

               & .texto {
                  font-size: 25px;
               }

               & .boton {
                  width: 60%;
                  height: 60px;
                  border-radius: 50px;
                  background-color: #fff;


                  & a {
                     width: 100%;
                     height: 100%;
                     color: var(--verde-principal);
                     font-size: 30px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                  }
               }
            }
         }

         /* ACTIVIDADES */
         /* POR AHORA NO VA */
         & .bloque-cinco {
            width: 100%;
            height: 85vh;
            background-color: var(--arena);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & .galeria {
               width: 80%;
               height: 80vh;
               padding: 0px 0px;
               display: flex;
               flex-wrap: wrap;
               column-gap: 20px;
               justify-content: center;
               align-items: center;

               & .cuadro {
                  width: 180px;
                  height: 180px;

                  & img {
                     width: 100%;
                  }
               }
            }

            & .boton-galeria {
               width: 100%;
               height: 8vh;
               display: flex;
               justify-content: center;

               & a {
                  font-size: 20px;
                  font-weight: 600;
                  color: var(--verde-principal);
                  text-decoration: 3px solid underline;
               }
            }
         }

         /* NOS APOYAN */
         & .bloque-seis {
            width: 100%;
            height: 30vh;
            background-color: var(--verde-secundario);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & h1 {
               margin-top: 30px;
               color: #fff;
               font-size: 35px;
            }

            & .apoyan {
               width: 95%;
               height: auto;
               margin: auto;
               overflow: hidden;

               & .slider-inf {
                  display: flex;
                  column-gap: 70px;
                  animation: scroll 35s linear infinite;
                  -webkit-animation: scroll 50s linear infinite;
                  width: calc(250px * 18);

                  & .apoyo {
                     width: 180px;
                     height: 180px;
                     display: flex;
                     align-items: center;

                     & img {
                        width: 100%;
                     }
                  }
               }
            }
         }
      }
   }
}

@media screen and (min-width: 1360px) and (max-width: 1370px) {

   html {
      width: 100%;
   }

   /* Basic Styling */
   body {
      width: 100%;
      /* max-width: 100vw; */
      background-color: var(--verde-principal);
      position: relative;

      & header {

         & .fondo {
            position: relative;
            width: 100%;
            max-height: 100vh;
            overflow: hidden;

            & video {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
            }

            & .texto-sobre-img {
               position: absolute;
               top: 31.2vh;
               right: 200px;
               /* transform: translateX(-120px); */
               width: fit-content;
               height: fit-content;
               display: flex;
               flex-direction: column;
               text-align: center;
               align-items: end;

               & h1 {
                  /* font-size: 160px; */
                  font-size: clamp(120px, 5vw, 160px);
                  color: transparent;
                  -webkit-text-stroke-width: 3px;
                  -webkit-text-stroke-color: #fff;
                  font-family: "Open Sans", sans-serif;
                  font-weight: bold;
               }

               & h2 {
                  width: fit-content;
                  height: fit-content;
                  padding: 10px 20px;
                  /* background-color: rgba(255, 255, 255, 0.886); */
                  background-color: var(--celeste-cuadros-op);
                  font-size: 2vw;
                  color: #fff;
                  font-weight: 500;
                  border-radius: 35px;
                  font-family: "Caveat", cursive;
                  margin-top: -10px;
               }
            }
         }
      }

      /*MAIN*/
      & .main {
         width: 100%;
         height: fit-content;

         /* URUMEPA PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: 85vh;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: column;
            
            & .arriba {
               width: 100%;
               height: 40vh;
               padding: 0;
               background-color: var(--verde-principal);
               display: flex;

               & .arr-izq {
                  width: 50%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;

                  & .sigla,
                  & .significado {
                     color: #fff;
                     font-weight: 100;
                  }

                  & .sigla {
                     font-size: 85px;
                  }

                  & .significado {
                     text-align: center;
                     font-size: clamp(10px, 2vw, 20px);
                  }
               }

               & .arr-der {
                  width: 40%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-top: 40px;

                  & .frase {
                     width: 72%;
                     color: #fff;
                     font-size: 18px;
                  }
               }
            }

            & .separador {
               width: 100%;
               height: 7vh;

               & img {
                  width: 100%;
                  height: 102%;
               }
            }

            & .abajo {
               width: 100%;
               height: 45vh;
               background-color: var(--verde-secundario);
               display: flex;
               flex-direction: column;

               & .aba-arr {
                  width: 100%;
                  height: 50%;
                  display: flex;
                  justify-content: start;
                  align-items: center;
                  padding: 20px 0 0 30px;

                  & .frase {
                     width: 80%;
                     color: #fff;
                     font-size: 22px;
                     text-align: center;
                     font-style: italic;
                  }
               }

               & .aba-aba {
                  width: 100%;
                  height: 50%;
                  display: flex;
                  justify-content: end;
                  align-items: end;

                  & a {
                     margin: 0 150px 10px 0;
                     font-size: 18px;
                     color: var(--verde-principal);
                     background-color: #fff;
                     padding: 25px 20px;
                     border-radius: 50px;
                  }
               }

            }
         }

         /* SEPARADOR */
         & .separador-bloq-uno-dos {
            width: 100%;
            height: 7vh;
            transform: translateY(-5px);

            & img {
               width: 100%;
               height: 100%;
               transform: rotate(180deg);
            }
         }

         /* BUSCAMOS */
         & .bloque-dos {
            width: 100%;
            height: 150vh;
            background-color: var(--verde-principal);

            & .arriba {
               width: 100%;
               height: 50%;
               position: relative;

               & .arr-arr {
                  position: absolute;
                  top: 50px;
                  left: 50px;
                  width: 70%;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 40px 40px;
                  border-radius: 25px;

                  & .titulo {
                     & h2 {
                        font-size: 2.2vw;
                     }
                  }

                  & .punto {
                     width: 100%;

                     display: flex;
                     flex-direction: row;
                     /* align-items: center; */
                     gap: 10px;

                     & .item-dot {
                        min-width: 20px;
                        width: 20px;
                        max-width: 20px;
                        min-height: 20px;
                        height: 20px;
                        max-height: 20px;
                        transform: translateY(0);
                        border-radius: 50%;
                        background-color: var(--verde-principal);
                     }

                     & .item {
                        font-size: 1.8vw;
                        /* background-color: yellow; */
                     }
                  }
               }

               & .arr-aba {
                  position: relative;
                  width: 100%;
                  height: 100%;

                  & .imagen-profe {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     justify-content: end;
                     align-items: end;

                     & img {
                        width: 40%;
                     }
                  }
               }
            }

            & .separador {
               width: 100%;
               height: 6vh;
               background-color: var(--celeste-cuadros);

               & .tortuga-saliendo {
                  position: relative;
                  left: -30px;
                  top: -150px;

                  & img {
                     width: 35%;
                  }
               }
            }

            & .abajo {
               width: 100%;
               height: 50%;

               & .aba-arr {
                  width: 100%;
                  height: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-top: 150px;

                  & .content-aba-arr {
                     width: 50%;
                     height: fit-content;
                     background-color: var(--celeste-cuadros);
                     display: flex;
                     flex-direction: column;
                     gap: 10px;
                     padding: 40px 40px;
                     border-radius: 25px;
                     color: #fff;

                     & .titulo {

                        & h2 {
                           font-size: 2.2vw;
                        }
                     }

                     & .punto {
                        width: 100%;

                        display: flex;
                        flex-direction: row;
                        /* align-items: center; */
                        gap: 10px;

                        & .item-dot {
                           min-width: 20px;
                           width: 20px;
                           max-width: 20px;
                           min-height: 20px;
                           height: 20px;
                           max-height: 20px;
                           transform: translateY(0);
                           border-radius: 50%;
                           background-color: var(--verde-principal);
                        }

                        & .item {
                           font-size: 1.8vw;
                           /* background-color: yellow; */
                        }
                     }
                  }
               }

               & .aba-aba {
                  width: 100%;
                  height: 40%;
                  display: flex;
                  gap: 5px;
                  flex-direction: column;
                  align-items: center;
                  color: #fff;
                  font-size: 40px;
                  padding-top: 145px;
               }
            }
         }

         /* ANIMALES */
         & .bloque-tres {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--verde-principal);
            transform: translateY(0);

            & .botones {
               width: 90%;
               height: 80%;
               display: flex;
               align-items: end;
               justify-content: center;
               gap: 30px;

               & .boton {
                  width: 300px;
                  height: 350px;
                  border-radius: 25px;
                  background-color: var(--celeste-cuadros);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                  padding: 20px 0;
                  position: relative;

                  & .animal {
                     position: absolute;
                     top: 0;

                     & img {
                        width: 80%;
                     }

                     & .lobo-marino {
                        width: 70%;
                        height: auto;
                        transform: translate(40px, -140px);
                     }

                     & .tortuga {
                        width: 90%;
                        height: auto;
                        transform: translate(18px, -110px);
                     }

                     & .delfin {
                        width: 120%;
                        height: auto;
                        transform: rotate(20deg) translate(-40px, -110px);
                     }
                  }

                  & .nuevo {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     justify-content: center;
                     /* align-items: center; */

                     & img {
                        width: 100px;
                        height: 100px;
                     }
                  }

                  & .texto {
                     position: absolute;
                     top: 70%;
                     text-align: center;
                     font-size: 20px;
                     font-weight: 100;
                     color: var(--verde-principal);
                  }
               }

            }
         }

         /* CONCIENCIA AMBIENTAL */
         & .bloque-cuatro {
            width: 100%;
            height: 80vh;
            background-color: var(--celeste-cuadros);
            display: flex;
            align-items: center;

            & .bloque-cuatro-izq {
               width: 35%;
               height: 100%;
               display: flex;
               justify-content: center;
               align-items: center;

               & img {
                  height: 70%;
                  transform: translateX(-150px);
               }
            }

            & .bloque-cuatro-der {
               width: 45%;
               height: 100%;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 30px;
               color: #fff;
               transform: translate(25px, 0px);

               & .titulo {
                  font-size: 2.5vw;
               }

               & .texto {
                  font-size: 1.5vw;
               }

               & .boton {
                  width: 50%;
                  height: 50px;
                  border-radius: 50px;
                  background-color: #fff;


                  & a {
                     width: 100%;
                     height: 100%;
                     color: var(--verde-principal);
                     font-size: 2vw;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                  }
               }
            }
         }

         /* ACTIVIDADES */
         /* POR AHORA NO VA */
         & .bloque-cinco {
            width: 100%;
            height: 85vh;
            background-color: var(--arena);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & .galeria {
               width: 80%;
               height: 80vh;
               padding: 0px 0px;
               display: flex;
               flex-wrap: wrap;
               column-gap: 20px;
               justify-content: center;
               align-items: center;

               & .cuadro {
                  width: 180px;
                  height: 180px;

                  & img {
                     width: 100%;
                  }
               }
            }

            & .boton-galeria {
               width: 100%;
               height: 8vh;
               display: flex;
               justify-content: center;

               & a {
                  font-size: 20px;
                  font-weight: 600;
                  color: var(--verde-principal);
                  text-decoration: 3px solid underline;
               }
            }
         }

         /* NOS APOYAN */
         & .bloque-seis {
            width: 100%;
            height: 40vh;
            background-color: var(--verde-secundario);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & h1 {
               margin-top: 30px;
               color: #fff;
               font-size: 2vw;
            }

            & .apoyan {
               width: 95%;
               height: auto;
               margin: auto;
               overflow: hidden;

               & .slider-inf {
                  display: flex;
                  column-gap: 70px;
                  animation: scroll 35s linear infinite;
                  -webkit-animation: scroll 50s linear infinite;
                  width: calc(250px * 18);

                  & .apoyo {
                     width: 180px;
                     height: 180px;
                     display: flex;
                     align-items: center;

                     & img {
                        width: 100%;
                     }
                  }
               }
            }
         }
      }
   }
}






/*esta parte del código define el movimiento de las imágenes a la izquierda*/
@keyframes slidy {
   0% {
      left: 0%;
   }

   10% {
      left: -100%;
   }

   20% {
      left: -200%;
   }

   30% {
      left: -300%;
   }

   40% {
      left: -400%;
   }

   50% {
      left: -500%;
   }

   60% {
      left: -600%;
   }

   70% {
      left: -700%;
   }

   80% {
      left: -800%;
   }

   90% {
      left: -900%;
   }

   100% {
      left: 0%;
   }
}

@keyframes scroll {
   0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }

   100% {
      -webkit-transform: translateX(calc(-200px * 9));
      transform: translateX(calc(-200px * 9));
   }
}