*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body{
  font-family: 'Roboto', sans-serif;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.tlf1{
  text-align: left;
  color: rgb(6, 55, 109);
  font-size: clamp(0.9rem, 1.6vw, 1.6rem) ;
}

.centrar{
margin-left: 25%;
}

.corre{
  text-align: center;
  color: rgb(6, 55, 109);
  font-size: clamp(0.9rem, 1.6vw, 1.6rem) ;
}

img{
  width:80%;
  padding: 4%;
}

.img1{
  width: 20%;
  margin: 0px auto;
}

.img2{
  width:150%; 
  margin: 0px auto;
  padding: 0%;
}

.img3{
  width:16%; 
  height:87%;
  margin: 1%;
}

.img4{
  width:60%; 
  height:60%;
}

.contenedorcuadro {
  width: 80%;
  margin: 0px auto;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
  height: 0px auto;
  width: 95%;
  padding: 8%;
  margin-top: 8%;
  overflow-wrap: break-word;
  text-align: justify;
  color: rgb(6, 55, 109);
}

.titulo2 {
  margin-top: 5%;
  font-size: clamp(1rem, 2.5vw, 6rem) ;
  font-family: 'Lulo Clean One Bold';
  color: rgb(6, 55, 109);
}

.titulo {
  margin-top: 5%;
  font-size: clamp(1.6rem, 2.5vw, 6rem) ;
  font-family: 'Lulo Clean One Bold';
  color: rgb(6, 55, 109);
}


nav {
  background: #ffffff;
  height: 80px;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.enlace {
  display: flex;
  align-items: center;
}

.logo {
  width: auto;
  max-height: 140px; /* Ajusta la altura máxima para el logo */
}

nav ul {
  display: flex;
  align-items: center;
  margin: 0;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: rgb(6, 55, 109);
  font-size: 18px;
  padding: 10px 2px;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: "Nunito Sans", sans-serif;
}

li a.active, li a:hover {
  background: #cfcfd8;
  transition: .5s;
}

.checkbtn {
  font-size: 25px;
  color: rgb(6, 55, 109);
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}



.translate-btns {
  display: flex;
  align-items: center;
}

.translate-btns form {
  margin: 0;
}

.translate-btns button {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

.translate-btns button.active {
  font-weight: bold;
}

.translate-btns button img {
  width: 24px; /* Ajusta el tamaño de las imágenes según sea necesario */
  vertical-align: middle;
}





@media (max-width: 952px) {
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }
  nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #b5c6d6;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
    flex-direction: column;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    font-size: 20px;
  }
  li a:hover, li a.active {
    background: none;
    color: rgb(255, 255, 255);
  }
  #check:checked ~ ul {
    left: 0;
  }
}




.grid-container>* {

  text-align: center;
  
}

.grid-container {
  display: grid;
  grid-template:
      "header" auto
      "navbar" auto
      "section1" auto
      "section2" auto
      "section4" auto
      "section8" 130px
      "section5" auto
      "section6" auto
      "section7" auto
      "section3" auto
      "footer";

  .header {
      grid-area: header;
      background-color: rgb(255, 255, 255);
  }

  .navbar {
      grid-area: navbar;
      background-color: rgb(255, 255, 255);
  }

  .section1 {
      grid-area: section1;
      background: url("../img/principal.jpg");
      background-attachment: fixed;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      padding-bottom: 5%;
      padding-left:  9%;
      padding-right: 9%;
      font-size: clamp(0.8rem, 1.6vw, 1.6rem) ;
  }

  .section2 {
      grid-area: section2;
      background-color: #ffffff;
      text-align: center;
      padding: 5%;
      font-size: clamp(2.4rem, 5vw, 8rem) ;
      font-family: 'Lulo Clean One Bold';
      color: rgb(6, 55, 109);
  }

  .section3 {
    grid-area: section3;
    background-color: rgb(255, 255, 255);
 }

 .section4 {
    grid-area: section4;
    background-color: #ffffff;
    padding-bottom: 4%;
 }

 .section5 {
  grid-area: section5;
  padding-top: 4%;
  background-color: rgb(255, 255, 255);
 }

 .section6 {
grid-area: section6;
background-color: rgb(255, 255, 255);
 }

 .section7 {
grid-area: section7;
background-color: rgb(255, 255, 255);
padding-bottom: 4%;
 }

 .section8 {
  grid-area: section8;
  background-color: #f5f5f5;
  background: url("../img/imagen2contacto.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  margin: 0px auto;
 }

 .footer {
  grid-area: footer;
 background-color: rgb(255, 255, 255);
}





  @media (min-width:720px) {
      grid-template:
       
          "navbar navbar navbar" auto
          "section1 section1 section1" auto
          "section2 section2 section2" auto
          "section4 section4 section4" auto
          "section8 section8 section8" 150px
          "section5 section6 section7" auto
          "section3 section3 section3" auto
          "footer footer footer" 
  }

  @media (min-width:1024px) {
    grid-template:
        "header header header" auto
        "navbar navbar navbar" auto
        "section1 section1 section1" auto
        "section2 section2 section2" auto
        "section4 section4 section4" auto
        "section8 section8 section8" 340px
        "section5 section6 section7" auto
        "section3 section3 section3" auto
        "footer footer footer" 
}

}


@media (min-width: 428px) {  
  .img1{
    width:18%; 
  }
  
  

  .img2{
    width:80%; 
    margin: 0px auto;
    padding: 0%;
  }


  .titulo {
    margin-top: 5%;
    font-size: 2.4rem ;
    font-family: 'Lulo Clean One Bold';
    color: rgb(6, 55, 109);
  }

  }

  @media (min-width: 522px) {
 
    .enlace{
      top: -1%;
    }

  
    }

    @media (min-width: 616px) {
      body{background: rgb(255, 255, 255);}
      
      .identifica{
        background: rgb(255, 255, 255);
      }
    
   

      }



  @media (min-width: 720px) {
    body{background: rgb(255, 255, 255);}
    
    .identifica{
      background: rgb(255, 255, 255);
    }
    
    .centrar{
      margin-left: 0%;
      padding-top: 8%;
      }
      
    .corre{
      font-size: clamp(0.8rem, 1.6vw, 1.6rem) ;
      }
    
    .img2{
      width:150%; 
      margin: 0px auto;
      padding: 0%;
    }
    
    .img1{
      width:25%; 
    }

    .img3{
      width:23%; 
      height:83%;
      margin: 1%;
    }


    }


  @media (min-width: 768px) {
    body{background: rgb(255, 255, 255);}
    
    .identifica{
      background: rgb(255, 255, 255);
    }

   

    .corre{
      text-align: center;
      color: rgb(6, 55, 109);
      font-size: 0.8rem
    }


      
    }

    @media (min-width: 992px) {
      body{background: rgb(255, 255, 255);}
      
      .identifica{
        background: rgb(255, 255, 255);
      }
        
      .img2{
        width:110%; 
        margin: 0px auto;
        padding: 0%;
      }

 
      }

      
    @media (min-width: 1024px) {
      body{background: rgb(255, 255, 255);}
      
      .identifica{
        background: rgb(255, 255, 255);
      }
        
      .bg-faded {
        background-color: rgba(255, 255, 255, 0.85);
        height: 0px auto;
        width: 75%;
        padding: 4%;
        margin-top: 8%;
        overflow-wrap: break-word;
        font-size: 20px;
      }

      .tlf1{
        text-align: left;
        color: rgb(6, 55, 109);
        font-size: 1.1rem
      }

      .corre{
        text-align: center;
        color: rgb(6, 55, 109);
        font-size: 1.1rem
      }
  

      .titulo{
        font-size: 50px;
      }

      .img2{
        width:100%; 
        margin: 0px auto;
        padding: 0%;
      }

      .img3{
        width:18%; 
        height:83%;
        margin: 1%;
      }
  
      .img1{
        width:20%; 
      }

  

      }

      @media (min-width: 1200px) {
 
      
        }

        @media (min-width: 1299px) {


          .img4{
            width:38%; 
            margin: 0px auto;
          }

          .img2{
            width:75%; 
       
            padding: 0%;
            
          }



          .titulo2 {
            margin-top: 11%;
            font-size: clamp(1rem, 2.5vw, 6rem) ;
            font-family: 'Lulo Clean One Bold';
            color: rgb(6, 55, 109);
          }

          .corre{
            text-align: center;
            color: rgb(6, 55, 109);
            font-size: 1.3rem
          }

          .tlf1{
            text-align: left;
            color: rgb(6, 55, 109);
            font-size: 1.3rem
          }
    


          }
        
          @media (min-width: 1372px) {
 
          
            }