@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 {

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

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

      /* MAPA */
      & .bloque-uno {
         width: 70%;
         height: 130vh;
         display: flex;
         flex-direction: column;

         & .bloque-uno-arr {
            width: fit-content;
            height: 10vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            padding: 10px 0;

            & h1 {
               color: #fff;
               font-size: 50px;
               font-weight: 100;
               margin: 0;
            }

            & h3 {
               color: #fff;
               font-size: 15px;
               font-weight: 100;
               color: var(--verde-secundario);
               margin: 0;
            }

         }

         & .bloque-uno-cen {
            width: 100%;
            height: 40vh;
            display: flex;
            align-items: center;

            & p {
               color: #fff;
               font-size: 20px;
            }
         }

         & .bloque-uno-aba {
            width: 100%;
            height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;

            & .mapa-container {
               position: relative;
               width: 100%;
               max-width: 1000px;
               aspect-ratio: 2 / 1;
               /* ancho:alto según tu imagen */

               & img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 12px;
               }
            }

            & .punto {
               position: absolute;
               width: 16px;
               height: 16px;
               background-color: transparent;
               /* opacity: .5;
               background-color: orange; */
               cursor: pointer;
               transform: translate(-50%, -50%);
               transition: transform 0.3s;
               z-index: 10;


            }

            & .punto-namepa {
               position: absolute;
               width: 12%;
               height: 23%;
            }

            & .punto-ukrmepa {
               position: absolute;
               width: 12%;
               height: 24%;
            }

            & .punto-urumepa {
               position: absolute;
               width: 12%;
               height: 26%;
            }

            & .punto-nimepa {
               position: absolute;
               width: 12%;
               height: 27%;
            }

            & .punto-helmepa {
               position: absolute;
               width: 13%;
               height: 33%;
            }

            & .punto-cymepa {
               position: absolute;
               width: 12%;
               height: 23%;
            }

            & .punto-ausmepa {
               position: absolute;
               width: 11%;
               height: 27%;
            }

            & .punto-philmepa {
               position: absolute;
               width: 11%;
               height: 31%;
            }

            & .punto-turmepa {
               position: absolute;
               width: 14%;
               height: 20%;
            }
         }

         & .w3-content {
            display: none;
         }
      }

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

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

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

         & .bloque-dos-arr {
            width: 80%;
            padding: 0 0 15px 0;
            height: fit-content;

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

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

               & .frase {
                  color: var(--verde-principal);
                  font-size: 18px;
                  margin-top: -20px;
               }
            }
         }

         & .bloque-dos-cen {
            width: 80%;
            height: fit-content;
            border-radius: 25px;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 20px;

            & .punto-uno,
            .punto-dos {
               display: flex;
               align-items: center;
               gap: 10px;

               & .punto {
                  min-width: 25px;
                  width: 25px;
                  max-width: 25px;
                  min-height: 25px;
                  height: 25px;
                  max-height: 25px;
                  border-radius: 50%;
                  background-color: var(--celeste-cuadros);
               }

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

            & .listado {
               width: 95%;
               height: fit-content;
               margin: 10px auto;
               padding-bottom: 20px;
               display: flex;

               & li {
                  width: 100%;
                  height: fit-content;
                  display: flex;
                  align-items: start;
                  gap: 20px;
                  row-gap: 30px;
                  padding: 0;

                  & .punto-li {
                     min-width: 15px;
                     width: 15px;
                     max-width: 15px;
                     min-height: 15px;
                     height: 15px;
                     max-height: 15px;
                     background-color: #fff;
                     border-radius: 50%;
                     margin-top: 5px;
                  }

                  & .texto-li {
                     color: #fff;
                     font-size: 18px;
                     /* line-height: 25px; */
                  }
               }
            }
         }

         & .div-boton-ver-mas {
            display: none;
         }

      }

      /* NUESTRO EQUIPO */
      & .bloque-tres {
         width: 100%;
         height: fit-content;
         background-color: var(--verde-principal);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
         padding-bottom: 50px;
         position: relative;

         & .titulo {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 50px 0;

            & p {
               width: fit-content;
               height: fit-content;
               border-radius: 50px;
               background-color: var(--celeste-cuadros);
               color: #fff;
               font-size: 40px;
               padding: 15px 25px;
            }
         }

         & .directiva {
            width: 70%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;

            & .directiva-titulo {
               color: #fff;
               font-size: 35px;
            }

            & .directivos {
               display: flex;
               flex-direction: row;
               justify-content: center;
               flex-wrap: wrap;
               gap: 50px;

               & .directivo {
                  width: 300px;
                  height: fit-content;
                  /* gap: 10px; */
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-between;

                  & .imagen {
                     width: 300px;
                     height: 300px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);

                     & img {
                        width: 100%;
                     }
                  }

                  & .nombre {
                     color: #fff;
                     font-size: 25px;
                     margin-top: 10px;
                  }

                  & .cargo {
                     color: #fff;
                     font-size: 20px;
                  }
               }
            }
         }

         & .colaboran {
            width: 80%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
            margin-top: 50px;

            & .colaboran-titulo {
               color: #fff;
               font-size: 35px;
            }

            & .colaboradores {
               display: flex;
               flex-direction: row;
               justify-content: center;
               flex-wrap: wrap;
               gap: 50px;

               & .colaborador {
                  width: 300px;
                  height: fit-content;
                  /* gap: 10px; */
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-between;

                  & .imagen {
                     width: 300px;
                     height: 300px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);

                     & img {
                        width: 100%;
                     }
                  }
               }

               & .nombre {
                  color: #fff;
                  font-size: 25px;
                  margin-top: 10px;
               }

               & .cargo {
                  color: #fff;
                  font-size: 20px;
               }
            }
         }


         & .firulete-uno {
            position: absolute;
            left: 0;
            top: 100px;
         }

         & .firulete-dos {
            position: absolute;
            right: 0;
            bottom: 60px;
         }

         & .pelota {
            width: 50px;
            height: 50px;
            background-color: var(--verde-secundario);
            border-radius: 50%;
         }

         & .pelota-uno {
            position: absolute;
            left: 30px;
            top: 160px;
         }

         & .pelota-dos {
            position: absolute;
            right: 50px;
            bottom: 0;
         }
      }
   }
}

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

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

      & header {

         /*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: 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;

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: none;
               justify-content: center;
               align-items: center;

               & img {
                  width: 100%;
               }
            }

            & .w3-display-container {
               width: 96%;
               display: flex;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 90%;
               padding: 0 0 15px 0;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;

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

                  & .titulo {
                     color: #fff;
                     font-size: 40px;
                  }

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 15px;
                     margin-top: -12px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 90%;
               /* height: 300px; */
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;
               overflow: hidden;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: start;
                  gap: 10px;

                  & .punto {
                     min-width: 16px;
                     width: 16px;
                     max-width: 16px;
                     min-height: 16px;
                     height: 16px;
                     max-height: 16px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                     margin-top: 2px;
                  }

                  & .texto {
                     color: #fff;
                     font-size: 20px;
                     line-height: 22px;
                  }
               }

               & .listado {
                  width: 95%;
                  height: 0;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  /* Oculta el listado inicialmente en móviles */
                  overflow: hidden;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 10px;
                     padding: 0;
                     margin-top: 5px;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }

               & .listado.expandido {
                  height: fit-content;
               }

               & .div-boton-ver-mas {
                  width: 100%;
                  height: 50px;

                  background-color: var(--verde-principal);
                  display: flex;
                  justify-content: center;
                  padding-bottom: 10px;

                  & .boton-ver-mas {
                     width: 40%;
                     height: 100%;
                     background-color: var(--celeste-cuadros);
                     border: none;
                     border-radius: 25px;
                     color: #fff;
                  }
               }
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;
            border-bottom: 2px solid #fff;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 200px;
                     max-width: 70%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 200px;
                     max-width: 70%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }

      & footer {
         transform: translateY(35px);
      }
   }

}

@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 {
            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: 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;
         /* transform: translateY(35px); */

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: none;
               justify-content: center;
               align-items: center;

               & img {
                  width: 100%;
               }
            }

            & .w3-display-container {
               width: 96%;
               display: flex;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 90%;
               padding: 0 0 15px 0;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;

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

                  & .titulo {
                     color: #fff;
                     font-size: 40px;
                  }

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 15px;
                     margin-top: -12px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 90%;
               /* height: 300px; */
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;
               overflow: hidden;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: start;
                  gap: 10px;

                  & .punto {
                     min-width: 16px;
                     width: 16px;
                     max-width: 16px;
                     min-height: 16px;
                     height: 16px;
                     max-height: 16px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                     margin-top: 2px;
                  }

                  & .texto {
                     color: #fff;
                     font-size: 20px;
                     line-height: 22px;
                  }
               }

               & .listado {
                  width: 95%;
                  height: 0;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  /* Oculta el listado inicialmente en móviles */
                  overflow: hidden;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 10px;
                     padding: 0;
                     margin-top: 5px;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }

               & .listado.expandido {
                  height: fit-content;
               }

               & .div-boton-ver-mas {
                  width: 100%;
                  height: 50px;

                  background-color: var(--verde-principal);
                  display: flex;
                  justify-content: center;
                  padding-bottom: 10px;

                  & .boton-ver-mas {
                     width: 40%;
                     height: 100%;
                     background-color: var(--celeste-cuadros);
                     border: none;
                     border-radius: 25px;
                     color: #fff;
                  }
               }
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;
            border-bottom: 2px solid #fff;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 200px;
                     max-width: 70%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 200px;
                     max-width: 70%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }

      & footer {
         transform: translateY(35px);
      }
   }

}

@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 {
            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: 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;
         /* transform: translateY(35px); */

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: none;
               justify-content: center;
               align-items: center;

               & img {
                  width: 100%;
               }
            }

            & .w3-display-container {
               width: 96%;
               display: flex;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 90%;
               padding: 0 0 15px 0;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;

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

                  & .titulo {
                     color: #fff;
                     font-size: 40px;
                  }

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 15px;
                     margin-top: -12px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 90%;
               /* height: 300px; */
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;
               overflow: hidden;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: start;
                  gap: 10px;

                  & .punto {
                     min-width: 16px;
                     width: 16px;
                     max-width: 16px;
                     min-height: 16px;
                     height: 16px;
                     max-height: 16px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                     margin-top: 2px;
                  }

                  & .texto {
                     color: #fff;
                     font-size: 20px;
                     line-height: 22px;
                  }
               }

               & .listado {
                  width: 95%;
                  height: 0;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  /* Oculta el listado inicialmente en móviles */
                  overflow: hidden;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 10px;
                     padding: 0;
                     margin-top: 5px;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }

               & .listado.expandido {
                  height: fit-content;
               }

               & .div-boton-ver-mas {
                  width: 100%;
                  height: 50px;

                  background-color: var(--verde-principal);
                  display: flex;
                  justify-content: center;
                  padding-bottom: 10px;

                  & .boton-ver-mas {
                     width: 40%;
                     height: 100%;
                     background-color: var(--celeste-cuadros);
                     border: none;
                     border-radius: 25px;
                     color: #fff;
                  }
               }
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;
            border-bottom: 2px solid #fff;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }

      & footer {
         transform: translateY(35px);
      }
   }

}

@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 {
            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: 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;
         /* transform: translateY(35px); */

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: none;
               justify-content: center;
               align-items: center;

               & img {
                  width: 100%;
               }
            }

            & .w3-display-container {
               width: 96%;
               display: flex;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 90%;
               padding: 0 0 15px 0;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;

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

                  & .titulo {
                     color: #fff;
                     font-size: 40px;
                  }

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 15px;
                     margin-top: -12px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 90%;
               /* height: 300px; */
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;
               overflow: hidden;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: start;
                  gap: 10px;

                  & .punto {
                     min-width: 16px;
                     width: 16px;
                     max-width: 16px;
                     min-height: 16px;
                     height: 16px;
                     max-height: 16px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                     margin-top: 2px;
                  }

                  & .texto {
                     color: #fff;
                     font-size: 20px;
                     line-height: 22px;
                  }
               }

               & .listado {
                  width: 95%;
                  height: 0;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  /* Oculta el listado inicialmente en móviles */
                  overflow: hidden;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 10px;
                     padding: 0;
                     margin-top: 5px;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }

               & .listado.expandido {
                  height: fit-content;
               }

               & .div-boton-ver-mas {
                  width: 100%;
                  height: 50px;

                  background-color: var(--verde-principal);
                  display: flex;
                  justify-content: center;
                  padding-bottom: 10px;

                  & .boton-ver-mas {
                     width: 40%;
                     height: 100%;
                     background-color: var(--celeste-cuadros);
                     border: none;
                     border-radius: 25px;
                     color: #fff;
                  }
               }
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }

      & footer {
         transform: translateY(35px);
      }
   }

}

@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 {
            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: 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;
         /* transform: translateY(35px); */

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: flex;
               justify-content: center;
               align-items: center;

               & img {
                  width: 100%;
               }
            }

            & .w3-display-container {
               width: 96%;
               display: none;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 80%;
               padding: 0 0 15px 0;
               height: fit-content;

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

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

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 18px;
                     margin-top: -20px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 80%;
               height: fit-content;
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: center;
                  gap: 10px;

                  & .punto {
                     min-width: 25px;
                     width: 25px;
                     max-width: 25px;
                     min-height: 25px;
                     height: 25px;
                     max-height: 25px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                  }

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

               & .listado {
                  width: 95%;
                  height: fit-content;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  display: flex;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 20px;
                     row-gap: 30px;
                     padding: 0;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }
            }

            & .div-boton-ver-mas {
               display: none;
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;
            border-bottom: 2px solid #fff;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 200px;
                     max-width: 45%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }

      & footer {
         transform: translateY(70px);
      }
   }

}

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

   html {
      width: 100%;
   }

   /* 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: 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;
         /* transform: translateY(35px); */

         /* MAPA */
         & .bloque-uno {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            & .bloque-uno-arr {
               width: 90%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               text-align: center;
               padding: 15px 0;

               & h1 {
                  color: #fff;
                  font-size: 50px;
                  font-weight: 100;
               }

               & h3 {
                  color: #fff;
                  font-size: 15px;
                  font-weight: 100;
                  color: var(--verde-secundario);
               }

            }

            & .bloque-uno-cen {
               width: 90%;
               height: fit-content;
               padding: 15px 0;

               & p {
                  color: #fff;
                  font-size: 17px;
                  text-align: justify;
               }
            }

            & .bloque-uno-aba {
               width: 100%;
               height: 80vh;
               display: flex;
               justify-content: center;
               align-items: center;

               & .mapa-container {
                  position: relative;
                  width: 100%;
                  max-width: 800px;
                  aspect-ratio: 2 / 1;
                  /* ancho:alto según tu imagen */

                  & img {
                     position: absolute;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                     border-radius: 12px;
                  }
               }
            }

            & .w3-display-container {
               width: 96%;
               display: none;
               justify-content: center;

               & .mySlides {
                  width: 70%;

                  & .sigla-mepa {
                     font-size: 26px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }

                  & .nombre-pais {
                     font-size: 22px;
                     text-align: center;
                     color: var(--verde-secundario);
                  }
               }

               & .w3-button {
                  width: 40px;
                  height: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--verde-secundario);
                  color: #fff;
                  border-radius: 5px;
                  font-size: 25px;
                  padding: 0;
               }

               & .w3-button:hover {
                  background-color: #fff !important;
                  color: var(--verde-secundario) !important;
               }
            }
         }

         /* DIVISOR */
         & .divisor {
            width: 100%;
            height: 3vh;

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

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

            & .bloque-dos-arr {
               width: 80%;
               padding: 0 0 15px 0;
               height: fit-content;

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

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

                  & .frase {
                     color: var(--verde-principal);
                     font-size: 18px;
                     margin-top: -20px;
                  }
               }
            }

            & .bloque-dos-cen {
               width: 80%;
               height: fit-content;
               border-radius: 25px;
               background-color: var(--verde-principal);
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 20px;

               & .punto-uno,
               .punto-dos {
                  display: flex;
                  align-items: center;
                  gap: 10px;

                  & .punto {
                     min-width: 20px;
                     width: 20px;
                     max-width: 20px;
                     min-height: 20px;
                     height: 20px;
                     max-height: 20px;
                     border-radius: 50%;
                     background-color: var(--celeste-cuadros);
                     transform: translateY(-2px);
                  }

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

               & .listado {
                  width: 95%;
                  height: fit-content;
                  margin: 10px auto;
                  padding-bottom: 20px;
                  display: flex;

                  & li {
                     width: 100%;
                     height: fit-content;
                     display: flex;
                     align-items: start;
                     gap: 20px;
                     row-gap: 30px;
                     padding: 0;

                     & .punto-li {
                        min-width: 15px;
                        width: 15px;
                        max-width: 15px;
                        min-height: 15px;
                        height: 15px;
                        max-height: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-top: 5px;
                     }

                     & .texto-li {
                        color: #fff;
                        font-size: 18px;
                        /* line-height: 25px; */
                     }
                  }
               }
            }

            & .div-boton-ver-mas {
               display: none;
            }

         }

         /* NUESTRO EQUIPO */
         & .bloque-tres {
            width: 100%;
            height: fit-content;
            background-color: var(--verde-principal);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 25px;
            position: relative;
            border-bottom: none;

            & .titulo {
               width: 100%;
               display: flex;
               justify-content: center;
               margin: 25px 0;
               border-radius: 50px;

               & p {
                  width: fit-content;
                  height: fit-content;
                  background-color: var(--celeste-cuadros);
                  color: #fff;
                  font-size: 22px;
                  padding: 10px 15px;
               }
            }

            & .directiva {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .directiva-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .directivos {
                  width: 80%;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .directivo {
                     min-width: 100px;
                     max-width: 20%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                     }
                  }
               }
            }

            & .colaboran {
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 25px;

               & .colaboran-titulo {
                  color: #fff;
                  font-size: 25px;
               }

               & .colaboradores {
                  width: 80%;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 20px;

                  & .colaborador {
                     min-width: 100px;
                     max-width: 20%;
                     height: fit-content;
                     /* gap: 10px; */
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;

                     & .imagen {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background-color: var(--celeste-cuadros);
                     }

                     & .nombre {
                        color: #fff;
                        font-size: 18px;
                        margin-top: 10px;
                     }

                     & .cargo {
                        color: #fff;
                        font-size: 16px;
                        text-align: center;
                     }
                  }
               }
            }

            & .firulete,
            .pelota {
               display: none;
            }
         }
      }
   }
}

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