/*Style predefinidos */
:root{
    --primario: #f0d527;
    --secundario: rgb(54, 54, 54);
    --terciario: #F9F9F9;
    --blanco: #FFF;
    --negro: #000;
   }

   /* Globals */
   @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,400;1,700&family=Montserrat:wght@300;400;700&family=Staatliches&display=swap');

   body{
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
   }

   html{
    font-size: 16px;
   }
 
  *, *:before, *:after {
    box-sizing: border-box;
  }

/*----------------------------------------------------------------*/

  /* Contenido de la pagina */

  /*----Header-----*/
 .logo{
  width: 10%;
 }

 .flags{
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
 }

 .flags__item{
  width: 30px;
 }

 .flags__img{
  cursor: pointer;
  display: inline-block;
 }

 .thumb{
  display: flex;
  justify-content: center;
  padding: 2rem;
  background-color: #F9F9F9;
 }

 .contenedor{ 
  position: relative;
  text-align: center;
}

.contenedor a:hover img{
  padding: 7px;
  filter: blur(2px);
}
.texto-encima{
  position: absolute;
  top: 75%;
  left: 49%;
}
.centrado{
  padding: 2px;
  background-color: rgba(71, 68, 68, 0.5);
  font-size: 1.5rem;
  color: #F9F9F9;
  font-weight: bold;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 @media (max-width: 470px) {
  .thumb{
    font-size: 4px;
    flex-direction: column;
  }

  .centrado{
    top: 52%;
    left: 32%;

  }
}
  /*--------------*/

  /*----Navar-----*/
    .navbar{
      background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    }
  
    .navbar-brand{
      filter: drop-shadow(5px 4px 3px rgb(32, 32, 32))
    }

  .navbar a{
    font-size: 1rem;
    font-weight: bold;
  }

  .navbar a:hover{
    padding: 5px;
  }
  /*--------------*/


  /*----Carrousel-----*/

  .slider-frame {
    width: 70%;
    height: auto;
    margin:20px auto 0;
    overflow: hidden;
  }
  
  .slider-frame ul {
    display: flex;
    padding: 0;
    width: 400%;
    
    animation: slide 20s infinite alternate ease-in-out;
  }
  
  .slider-frame li {
    width: 100%;
    list-style: none;
  }
  
  .slider-frame img {
    width: 100%;
    image-orientation: inherit;
  }
  
  @keyframes slide {
    0% {margin-left: 0;}
    20% {margin-left: 0;}
    
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    
    50% {margin-left: -200%;}
    70% {margin-left: -200%;}
    
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
  }
  /*--------------*/
  
  .contenido{
    text-align: center;
    margin: 0.5rem 10rem;
  }

  .btn-wsp{
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 45px;
    bottom: 40px;
    right: 30px;
    background-color: rgb(31, 224, 160);
    color: var(--blanco);
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0, 0.3);
    z-index: 100;
  }

  .btn-wsp:hover{
    text-decoration: none;
    background-color: aquamarine;;
  }

   /*Bloques Section*/

 .bloques{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 0.5rem 2rem;
}

@media (min-width: 768px) {
  .bloques{
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 468px) {
  .bloques{
      grid-template-columns: repeat(1, 1fr);
  }
  .bloque__imagen{
    width: 35%;
  }
}

.bloque{
  text-align: center;
}

.bloque__titulo{
  margin: 0%;
}

.bloque__imagen{
  width: 15%;
}


.eco__titulo{
  text-align: center;
}

  /*------Footer--------*/
  footer{
    background-color: var(--primario);
  }
  /*--------------*/

   /*--------------*/ /*--------------*/

    /*------Nosotros--------*/


    .nostros__bg{
      background-image: url(../img/nosotros.jpg);
      background-size: cover;
    }

    .nosotros{
      text-align: center;    
      color: var(--terciario);
    }

    .nosotros__img{
      width: 30%;
      
    }

    .bgnos{
      background-color: rgba(71, 68, 68, 0.9);
      margin: 1rem;
    }

    .nosotros__descripcion{
      margin: 3rem 10rem;
      text-decoration: solid;
      text-shadow: #000;
      border-radius: 0.5rem;     
    }

     /*--------------*/ /*--------------*/

     /*------Proyectos--------*/

     .pdfview{
      margin: 20px auto;
      display: block;
      width: 50%;
      height: 80vh;
     }

     .titulopdf{
      text-align: center;
      margin: 20px;
     }

     /*--------------*/ /*--------------*/

      /*------Contacto--------*/

      .form__input{
        font-family: inherit;
        font-size: 1rem;
        padding: .8em 1em;
        outline: none;
        border: none;
        border: 1px solid #bbb0b0;
        border-radius: 0.2em;
      }

      .form__input--menssage{
        resize: none;
        padding: 1.8em 1em;
        margin-bottom: .5em;
      }

      .form__cta{
        font-family: inherit;
        background-color: var(--primario);
        border: none;
        font-weight: 400;
        font-size: 1rem;
        padding: .7em 1em;
        cursor: pointer;
        
      }

      .form__padding{
        padding: 2rem;
      }

      .form{
        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        width: 90%;
        margin: auto;
        max-width: 400px;
        border-radius: 1em;
        padding: 3.5em 1.em;
      }

      .form__container{
        width: 100%;
        display: grid;
        gap: 1em;
        grid-auto-columns: 100%;
      }

      .form__title{
        text-align: center;
        font-size: 1.9rem;
        margin-bottom: 1.4em;
      }

      .contact__logo{
        display: flex;
        justify-content: center;
        margin: 20px;
      }

      @media (min-width: 450px) {
          .form{
            padding: 3.5em;
          }
       }

       @media (max-width: 468px) {
        .contact__logo{
         text-align: center;  
          margin: 20px;
        }

        .contact__logo img{
           width: 70px;
         }
   
  
      }

        /*--------*/

        /*POSICION FOTOS GALERIA*/
   
        .paragraph{
          font-weight: bold;
          font-size: 20px;
        }
        .galeria{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(450px,1fr));
          width: 100%;
          margin: auto;
          grid-gap: 10px;
          padding: 40px 0;
          overflow: hidden;
          padding: 20px;
        }
        
        .galeria img{
          width: 100%;
          vertical-align: top;
          height: 300px;
          object-fit: fill;
          transition: transform 0.5s;
        }
        
        
        .galeria > a{
          display: block;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 6px rgba(0, 0, 0, .5);
          object-fit: cover;
        }
        
        .galeria a:hover img{
          filter: blur(2px);
          transform: rotate(5deg) scale(1.3);
        }
        
        .light-box{
          position: fixed;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, .5);
          transition:  transform .3s ease-in-out;
          width: 100%;
          height: 100vh;
          z-index: 1000;
          display: flex;
          justify-content: center;
          align-items: center;
          transform: scale(0);
        }
        
        .light-box img{
          width: 100vw;
          max-width: 100vh;
        }
        
        .light-box:target{
          transform: scale(1);
        }
        
        .close{
          display: block;
          position: absolute;
          top: 40px;
          right: 40px;
          background-color: var(--terciario);
          color: #fff;
          text-decoration: none;
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 50%;
          font-weight: bold;
          font-size: 25px;
        }

        .lightbox .close::after {
          right: -1rem;
          top: -1rem;
          width: 2rem;
          height: 2rem;
          position: absolute;
          display: flex;
          z-index: 1;
          align-items: center;
          justify-content: center;
          background-color: black;
          border-radius: 50%;
          color: white;
          content: "X";
          cursor: pointer;
        }
        
      
     .next{
       background-color: var(--blanco);
       color: #fff;
       text-decoration: none;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       width: 50px;
       font-weight: bold;
       font-size: 28px;
      }
        
        
/* MARCA DE AGUA*/
        
        .watermark {
          position:fixed;
          width:950px;
          height: 570px;
          bottom:5px;
          right: 200px;
          opacity:0.3;
          z-index:99;
          color:white;
          user-select: none;
       }
      
     
     /*--------------*/ /*--------------*/