@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');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

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

* {
   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; */
}

body {
   width: 100%;
   position: relative;

   & header {

      & .videoFondo {
         position: relative;

         & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateY(-250px);
         }

         & .texto-sobre-img {
            position: absolute;
            top: 22.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: 9.5vw;
               color: transparent;
               -webkit-text-stroke-width: 3px;
               -webkit-text-stroke-color: #fff;
               font-family: "Open Sans", sans-serif;
               font-weight: bold;
               line-height: 10vw;
            }

            & .mobile {
               display: none;
            }

            & 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: 2.5vw;
               color: #fff;
               font-weight: 500;
               border-radius: 35px;
               font-family: "Caveat", cursive;
               margin-top: -20px;
            }
         }
      }
   }

   & .main {
      width: 100%;
      height: 200vh;
      height: fit-content;
      background-color: var(--verde-principal);
      display: flex;
      flex-direction: column;
      align-items: center;

      /* PRESENTACION */
      & .bloque-uno {
         width: 100%;
         height: fit-content;
         position: relative;

         & .bloque-uno-arr {
            width: 100%;
            height: 25vh;
            background-color: var(--verde-principal);
            display: flex;
            justify-content: end;
            align-items: end;
            padding-right: 250px;

            & .textos {
               width: 42%;
               text-align: left;

               & .texto {
                  color: #fff;
                  font-size: 30px;
               }
            }
         }

         & .imagen-ballena {
            width: 50%;
            position: absolute;
            top: 10%;

            & img {
               width: 80%;
               transform: rotate(15deg);
            }
         }

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

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

         & .bloque-uno-aba {
            width: 100%;
            height: 20vh;
            background-color: var(--celeste-cuadros);
            display: flex;
            justify-content: end;
            align-items: center;
            padding-right: 300px;

            & .boton-plasticos {
               & a {
                  font-size: 35px;
                  color: #fff;
                  border-radius: 25px;
                  padding: 15px 30px;
                  background-color: var(--verde-principal);
               }
            }
         }
      }

      /* INFORMACION */
      & .bloque-dos {
         width: 100%;
         height: fit-content;
         background-color: var(--celeste-cuadros);
         padding: 150px 0 100px 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;

         /* DOCUMENTOS - VIDEOS*/
         & .documentos,
         .videos,
         .sitios,
         .redes {

            & .documentos-vineta,
            .videos-vineta,
            .sitios-vineta,
            .redes-vineta {
               width: 150%;
               transform: rotate(-2deg);

               & .linea-sup,
               .linea-inf {
                  width: 100%;
                  height: 2px;
                  background-color: #fff;
               }

               & .texto {
                  font-size: 25px;
                  color: #fff;
                  padding: 5px 0;
                  transform: translateX(-15px);
               }
            }

            & .documentos-content {
               width: 100%;
               padding: 80px 0 50px 0;
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               gap: 40px;

               & .documento-content-item {
                  width: 300px;
                  height: 300px;
                  border-radius: 25%;
                  background-color: var(--azul-uru);
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  & .icono {
                     width: 100%;
                     height: 70%;
                     font-size: 160px;
                     color: #fff;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                  }

                  & .titulo {
                     width: 100%;
                     height: 30%;
                     display: flex;
                     justify-content: center;

                     & p {
                        width: 80%;
                        text-align: center;
                        font-size: 22px;
                        color: #fff;
                     }
                  }
               }
            }

            & .videos-content {
               width: 100%;
               padding: 80px 0 50px 0;
               display: flex;
               flex-wrap: wrap;
               gap: 20px;
               justify-content: center;

               & .videos-content-item {
                  flex: 1 1 400px;
                  max-width: 600px;
                  aspect-ratio: 16 / 9;
                  /* todos idénticos */
                  overflow: hidden;

                  & iframe {
                     width: 100%;
                     height: 100%;
                     border: none;
                  }
               }
            }

            & .sitios-content {
               display: flex;
               flex-direction: column;
               align-items: center;
               padding: 80px 0 50px 0;

               & .sitios-texto {
                  width: 50%;
                  color: #fff;
                  font-size: 20px;
                  font-weight: lighter;
                  display: flex;
               }

               & .sitios-content-lista {
                  width: 70%;
                  margin-top: 30px;

                  /* & .sitios-content-item {
                     width: 200px;
                     height: 200px;
                     background-color: var(--azul-uru);
                  } */

                  & .webs-amigas {
                     display: flex;
                     flex-wrap: wrap;
                     justify-content: center;
                     gap: 20px;

                     & .web-card {
                        height: 170px;
                        padding: 20px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        overflow: hidden;
                        text-align: center;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

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

                        & h3 {
                           margin: 10px 0;
                           font-size: 1rem;
                           color: #fff;
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }

            & .redes-content {
               display: flex;
               justify-content: center;
               padding: 80px 0 0 0;

               & .instagram-lista {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;
                  width: 70%;

                  & .web-card {
                     height: 300px;
                     width: 200px;
                     padding: 10px;
                     border: 1px solid #ccc;
                     border-radius: 12px;
                     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                     transition: transform 0.2s;

                     & .perfil-ig {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        & img {
                           width: auto;
                           height: 180px;
                        }

                        & .texto {
                           width: 100%;
                           display: flex;
                           flex-direction: column;
                           align-items: center;


                           & h2 {
                              width: 90%;
                              font-size: 18px;
                              color: #fff;
                              text-align: center;
                           }

                           & h3 {
                              width: 90%;
                              font-size: 14px;
                              color: #fff;
                              text-align: center;
                              margin-top: -7px;
                           }
                        }
                     }
                  }

                  .web-card:hover {
                     transform: scale(1.02);
                  }
               }
            }
         }
      }
   }
}








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

   /* Basic Styling */
   body {
      width: 100%;
      position: absolute;

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            padding-top: 70px;
            position: relative;

            & img {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
               transform: translateY(0);
            }

            & .texto-sobre-img {
               position: absolute;
               top: 70px;
               left: 0;
               width: 100%;
               height: 200px;
               display: flex;
               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;
                  }
               }
            }
         }
      }

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

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 15vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: justify;
                  z-index: 1;

                  & .texto {
                     color: #fff;
                     font-size: 3vw;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {
               overflow: hidden;

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-20px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  gap: 40px;

                  & .documento-content-item {
                     width: 250px;
                     height: 250px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 60%;
                        font-size: 100px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 40%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 4vw;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 350px;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 80px 0 0 0;

                  & .sitios-texto {
                     width: 90%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 90%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        margin: auto;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: 40%;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: 90%;
                              height: auto;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 1rem;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 80px 0 20px 0;

                  & .instagram-lista {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;
                     width: 90%;

                     & .web-card {
                        height: 250px;
                        width: 45%;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 18px;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 14px;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}

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

   /* Basic Styling */
   body {
      width: 100%;
      height: fit-content;

      background-color: var(--verde-principal);

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            padding-top: 70px;
            position: relative;

            & img {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
               transform: translateY(0);
            }

            & .texto-sobre-img {
               position: absolute;
               top: 70px;
               left: 0;
               width: 100%;
               height: 200px;
               display: flex;
               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;
                  }
               }
            }
         }
      }

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

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 25vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: justify;
                  z-index: 1;

                  & .texto {
                     color: #fff;
                     font-size: 2vh;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-20px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  gap: 40px;

                  & .documento-content-item {
                     width: 250px;
                     height: 250px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 60%;
                        font-size: 100px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 40%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 3vw;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 100%;
                  padding: 130px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 90%;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 80px 0 0 0;

                  & .sitios-texto {
                     width: 90%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 90%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        margin: auto;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: 40%;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: 90%;
                              height: auto;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 1rem;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 120px 0 50px 0;

                  & .instagram-lista {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;
                     width: 90%;

                     & .web-card {
                        height: 250px;
                        width: 45%;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 18px;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 14px;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}

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

   /* Basic Styling */
   body {
      width: 100%;
      height: fit-content;

      background-color: var(--verde-principal);

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            padding-top: 70px;
            position: relative;

            & img {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
               transform: translateY(0);
            }

            & .texto-sobre-img {
               position: absolute;
               top: 70px;
               left: 0;
               width: 100%;
               height: 200px;
               display: flex;
               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;
                  }
               }
            }
         }
      }

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

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 25vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: justify;
                  z-index: 1;
                  display: flex;
                  justify-content: center;

                  & .texto {
                     width: 90%;
                     color: #fff;
                     font-size: 2.5vh;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-70px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  gap: 40px;

                  & .documento-content-item {
                     width: 300px;
                     height: 300px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 70%;
                        font-size: 160px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 30%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 22px;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 100%;
                  padding: 80px 0 20px 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 90%;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 80px 0 0 0;

                  & .sitios-texto {
                     width: 90%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: 90%;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: 90%;
                              height: auto;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 3.5vw;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 150px 0 50px 0;

                  & .instagram-lista {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;
                     width: 90%;

                     & .web-card {
                        height: 400px;
                        width: 45%;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 3vw;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 2.5vw;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}

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

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

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            padding-top: 70px;
            position: relative;

            & img {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
               transform: translateY(0);
            }

            & .texto-sobre-img {
               position: absolute;
               top: 70px;
               left: 0;
               width: 100%;
               height: 200px;
               display: flex;
               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;
                  }
               }
            }
         }
      }

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

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 25vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: justify;
                  z-index: 1;
                  display: flex;
                  justify-content: center;

                  & .texto {
                     width: 90%;
                     color: #fff;
                     font-size: 2.5vh;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-120px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  gap: 30px;

                  & .documento-content-item {
                     width: 300px;
                     height: 300px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 70%;
                        font-size: 160px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 30%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 22px;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 100%;
                  padding: 80px 0 20px 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 90%;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 80px 0 0 0;

                  & .sitios-texto {
                     width: 90%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: 90%;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: 90%;
                              height: auto;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 3.5vw;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 150px 0 50px 0;

                  & .instagram-lista {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;
                     width: 90%;

                     & .web-card {
                        height: 470px;
                        width: 45%;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 3vw;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 2.5vw;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}

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

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

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            padding-top: 70px;
            position: relative;

            & img {
               width: 100%;
               height: auto;
               display: block;
               object-fit: cover;
               transform: translateY(0);
            }

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

               & h1 {
                  /* font-size: 35px; */
                  font-weight: 100;
                  color: var(--verde-principal);
                  color: #fff;
                  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;
                  }
               }
            }
         }
      }

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

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 25vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: justify;
                  z-index: 1;
                  display: flex;
                  justify-content: center;

                  & .texto {
                     width: 90%;
                     color: #fff;
                     font-size: 2.5vh;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-120px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 80px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  gap: 30px;

                  & .documento-content-item {
                     width: 300px;
                     height: 300px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 70%;
                        font-size: 160px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 30%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 22px;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 100%;
                  padding: 80px 0 20px 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 90%;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 80px 0 0 0;

                  & .sitios-texto {
                     width: 90%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: 90%;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: 90%;
                              height: auto;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 3.5vw;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 150px 0 50px 0;

                  & .instagram-lista {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;
                     width: 90%;

                     & .web-card {
                        height: 470px;
                        width: 45%;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 3vw;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 2.5vw;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}

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

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

      & header {

         /*VIDEO FONDO*/
         & .videoFondo {
            position: relative;
            width: 100%;
            max-height: 100vh;
            overflow: hidden;

            & img {
               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;
         display: flex;
         flex-direction: column;

         /* PRESENTACION */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            position: relative;

            & .bloque-uno-arr {
               width: 100%;
               height: 15vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;

               & .textos {
                  width: 90%;
                  text-align: center;
                  z-index: 1;
                  display: flex;
                  justify-content: center;

                  & .texto {
                     width: 90%;
                     color: #fff;
                     font-size: 2.5vh;
                     line-height: 2vw;
                  }
               }
            }

            & .imagen-ballena {
               display: none;
               width: 100%;
               position: absolute;
               top: 10%;

               & img {
                  opacity: .4;
                  width: 80%;
                  transform: rotate(15deg);
               }
            }

            & .divisor {
               width: 100%;
               height: 10vh;
               display: none;

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

            & .bloque-uno-aba {
               width: 100%;
               height: 10vh;
               background-color: var(--verde-principal);
               display: flex;
               justify-content: center;
               align-items: center;
               padding-right: 0;
               padding-bottom: 10px;

               & .boton-plasticos {
                  & a {
                     font-size: 35px;
                     color: #fff;
                     border-radius: 25px;
                     padding: 15px 30px;
                     background-color: var(--celeste-cuadros);
                  }
               }
            }
         }

         /* INFORMACION */
         & .bloque-dos {
            width: 100%;
            height: fit-content;
            background-color: var(--celeste-cuadros);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* DOCUMENTOS - VIDEOS*/
            & .documentos,
            .videos,
            .sitios,
            .redes {

               & .redes-vineta,
               .videos-vineta,
               .sitios-vineta,
               .documentos-vineta {
                  width: 1000%;
                  transform: rotate(-2deg) translateY(-160px);

                  & .linea-sup,
                  .linea-inf {
                     width: 100%;
                     height: 2px;
                     background-color: #fff;
                  }

                  & .texto {
                     font-size: 25px;
                     color: #fff;
                     padding: 5px 0;
                     transform: translateX(-15px);
                     overflow: hidden;
                  }
               }

               & .documentos-content {
                  width: 100%;
                  padding: 100px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  gap: 30px;

                  & .documento-content-item {
                     width: 300px;
                     height: 300px;
                     border-radius: 25%;
                     background-color: var(--azul-uru);
                     display: flex;
                     flex-direction: column;
                     align-items: center;

                     & .icono {
                        width: 100%;
                        height: 70%;
                        font-size: 160px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }

                     & .titulo {
                        width: 100%;
                        height: 30%;
                        display: flex;
                        justify-content: center;

                        & p {
                           width: 80%;
                           text-align: center;
                           font-size: 22px;
                           color: #fff;
                        }
                     }
                  }
               }

               & .videos-content {
                  width: 80%;
                  padding: 100px 0 0 0;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 20px;
                  justify-content: center;
                  margin: auto;

                  & .videos-content-item {
                     flex: 1 1 300px;
                     max-width: 50%;
                     aspect-ratio: 16 / 9;
                     /* todos idénticos */
                     overflow: hidden;

                     & iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                     }
                  }
               }

               & .sitios-content {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 100px 0 0 0;

                  & .sitios-texto {
                     width: 70%;
                     color: #fff;
                     font-size: 20px;
                     font-weight: lighter;
                     display: flex;

                     & p {
                        text-align: justify;
                     }
                  }

                  & .sitios-content-lista {
                     width: 90%;
                     margin-top: 30px;

                     & .webs-amigas {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 20px;

                        & .web-card {
                           height: auto;
                           width: auto;
                           padding: 20px;
                           border: 1px solid #ccc;
                           border-radius: 12px;
                           overflow: hidden;
                           text-align: center;
                           box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                           transition: transform 0.2s;

                           & img {
                              width: auto;
                              height: 80px;
                           }

                           & h3 {
                              margin: 10px 0;
                              font-size: 1vw;
                              color: #fff;
                           }
                        }

                        .web-card:hover {
                           transform: scale(1.02);
                        }
                     }
                  }
               }

               & .redes-content {
                  display: flex;
                  justify-content: center;
                  padding: 150px 0 50px 0;

                  & .instagram-lista {
                     width: 80%;
                     display: flex;
                     flex-wrap: wrap;
                     gap: 20px;
                     justify-content: center;

                     & .web-card {
                        width: 15%;
                        height: 210px;
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 12px;
                        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.2s;

                        & .perfil-ig {
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           & img {
                              width: 90%;
                              height: auto;
                              aspect-ratio: 1 / 1;
                           }

                           & .texto {
                              width: 100%;
                              display: flex;
                              flex-direction: column;
                              align-items: center;


                              & h2 {
                                 width: 90%;
                                 font-size: 1vw;
                                 color: #fff;
                                 text-align: center;
                              }

                              & h3 {
                                 width: 90%;
                                 font-size: 0.7vw;
                                 color: #fff;
                                 text-align: center;
                                 margin-top: -7px;
                              }
                           }
                        }
                     }

                     .web-card:hover {
                        transform: scale(1.02);
                     }
                  }
               }
            }
         }
      }
   }
}


/*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%;
   }
}

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

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