:root{
    --main-font:sans-serif;
    --font-size:16px;
    --primer-color:#ffffff;
    --segundo-color:#525252;
    --tercer-color: #b6a0c4;
    --cuarto-color: #000;
  }
  html{
    box-sizing: border-box;
    font-family: var(--main-font);
    font-size: var(--font-size);
    scroll-behavior: smooth;
  }
  *,*:before,*:after{
    box-sizing:inherit;
  }
  body{
    margin: 0;
    overflow-x: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    min-height: 90vh;
    background-color: var(--primer-color);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  img{
    max-width: 100%;
    height: auto;
  }
  /*----------- estilos del menu----------*/

.inicio{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 80%;
    z-index: 997;
    color: var(--cuarto-color); 
    font-size: 125%;
    padding-top: 5rem;
}
.inicionegro{
  width: 100%;
  height: 100%;
  background-color: var(--cuarto-color);
  color: var(--primer-color);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.inicionegro h2{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inicionegro img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: 50% 0%;
  margin-bottom: 1rem;
}

.moverizq{
  text-align: left;
  justify-content: flex-start;
}
.moverafo{
  text-align: left;

}
.boton{
    position: fixed;
    z-index: 999;
    top: 1%;
    right: 1vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--segundo-color);
    font-size: 200%;
}
.boton.is-active{
  color: var(--primer-color);
}
.boton:focus{
  outline:none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.luz, .proyecto{
  font-size: 200%;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  margin-bottom: 1rem;
}
.tituloProyecto{
  font-size: 100%;
  font-family: 'Lato', sans-serif;
  color:black;
  cursor: pointer;
  margin-bottom: 1rem;
}

.tituloParrafo{
  font-size: 80%;
  font-family: 'Lato', sans-serif;
  color:black;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: justify;
}
.tituloParrafo2{
  font-size: 70%;
  font-family: 'Lato', sans-serif;
  color:rgb(107, 107, 107);
  margin-bottom: 1rem;
  text-align:left;
}

.asbaje{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;

}

.asbaje img{
 width: 24%;
 height: 24%;

}

.asbaje3{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}
.asbaje3 p{
  width: 100%;
}

.asbaje3 img{
 width: 30%;
 height: 30%;

}
.proyecto1{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-evenly;
}
.proyecto1 p{
  width: 100%;
}
.proyecto1 div {
  width: 300px;
  height: 300px;
  margin-bottom: 1rem;

}

.parrafoproyecto{
  text-align: justify;

}
.proyecto1 a img{
  width: 100%;
  height: 100%;
 
 }
 .proyecto1ini {
   width: 80%;
   display: flex;
   align-items: center;
   flex-direction:column;
   justify-content:space-evenly;
 }
.elcuer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;

}


.elcuer img{
  width: 35%;
  height: 35%;
 
 }
.porelojo img{
  width: 50%;
  height: 50%;
 
 }

/*----img grande-----*/
.imgGrande{
  position: fixed;
  z-index: 1000;
  background-color: var(--primer-color);
  top: 0;
  bottom: 0;
  left: 0; 
  right: 0;
  opacity: 0.8;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: translate(0,-100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.is-activeimg{
transform: translate(0,0);
opacity: 1;
}
.imgGrande img{
width: auto;
height: auto;
}
.cerrar{
  position: absolute;
  top: 2vh;
  right: 3vh;
  cursor: pointer;
  font-size: 150%;
  z-index: 1100;
}
.cerrar i{
  color: var(--cuarto-color);
  font-size: 150%;
}
/*-------------------*/


/*modal del boton hamburguesa*/
.panel{
  position: fixed;
  z-index: 1500;
  background-color: var(--segundo-color);
  color: var(--primer-color);
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: .5;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: translate(100%, 0);
  padding-top: 4em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: start;
}
.panel.is-active{
  transform: translate(0,0);
  opacity: 1;
}
.panelNav{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
width: 100%;
min-height: 100%;
}
.imagen{
width: 250px;
height: auto;
position: fixed;
top: 10vh;
left: auto;
}
.imagen img{
width: 100%;
}
.imagen.activo{
  display: none;
}
.navegador{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: start;
position: none;
}
.navegador a{

color: var(--primer-color);
}
.pie{
width: 80%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
position: fixed;
bottom: 3vh;
z-index: 1111;
}
.pie i{
font-size: 200%;
color: var(--segundo-color);
margin-right: 1vh;
z-index: 1111;
}
.pie.activo{
  width: auto;
  position: fixed;
  right: .5vh;
  flex-direction: column;
  align-items: center;
  width: 2rem;
  height: 10rem;
}
/*pantallas escritorio*/
@media screen and (min-width: 1024px){
  .panel{
    position: fixed;
    z-index: 1500;
    background-color: var(--segundo-color);
    color: var(--primer-color);
    width: 25%;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translate(100%, 0);
    padding-top: 4em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
  }
    .panelNav{
    width: 80%;
    min-height: 80%;
    }
    .navegador a{
  
    color: var(--primer-color);
    }
    .imagen{
      width: 400px;
      height: auto;
      display: block;
      position: fixed;
      top: 3vh;
      left: auto;
    }
    .botoninicio{
      display: block;
      position: fixed;
      top: 3rem;
      z-index:1000;
      width: 2rem;
      height: 2rem;
      color: var(--segundo-color);
      right: 1vh;
      font-size: 200%;
    }
    .botoninicio.is-active{
      color: var(--primer-color);
    }
    .imgGrande img{
      width: auto;
      height: 100%;
    }
    .inicionegro{
      width: 100%;
      height: 100%;
      background-color: var(--cuarto-color);
      color: var(--primer-color);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
    }
    .inicionegro img{
      width: 300px;
      height: 300px;
      object-fit: cover;
      object-position: 50% 0%;
      margin-bottom: 1rem;
    }

}
.clicluz{
  cursor: pointer;
}
.clicluz a {
  text-decoration: none;
}
.moverle{
  width: 80%;

 
}
.moverleIntimo{
  width: 100%;

 
}
.moverle2{
  width: 46%;
 
}

.linkobra{
  width: 80%;
  font-size: 15px;
 
}
.moverizq{
  text-align: left;
  justify-content: flex-start;
}
.centrarTexto{
  width: 50%;


}
.centrarTexto img{
  width: 100%;
}

.tituloProyectopan{
  margin-top: 5%;
  font-size: 2rem;
  font-family: 'Lato', sans-serif;
  color:black;
  cursor: pointer;
  margin-bottom: 1rem;
}
.cajaopacidad{
  position: relative;
}
.cajaopacidad2{
  position: relative;
}
.opacidad{
  position: absolute;
  color: rgb(255, 255, 255);
  z-index: 2000;
  width: 100%;
  height: 95%;
  background-color: hsla(0, 0%, 0%, 0.712);
  padding-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
}

.opacidad2{
  position: absolute;
  color: rgb(255, 255, 255);
  z-index: 2000;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.712);
  padding-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
}
.poner{
  opacity: 1;
}