#proyectos-herreria{
  display: flex;
  flex-wrap: wrap;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  background-color: var(--Bg-Tertiary);
  gap: 2rem;
  background: linear-gradient(125deg, rgba(197, 84, 84, 0.550), rgba(99, 22, 73, 0.3), rgba(197, 84, 84, 0.550));
}

#proyectos-herreria .menu{
  align-self: center;
  padding: 0 1rem;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#proyectos-herreria h2{
  font-size: clamp(2rem, 4.5vh, 3rem);
  text-shadow: 0 0 3px black;
  text-transform: capitalize;
  text-align: center;
}


#proyectos-herreria ul{
  padding: 1rem 2rem;
  list-style: none;
  margin: 2rem 0;
}

#proyectos-herreria li{
  margin-bottom: 3rem;
}

#proyectos-herreria .categoria{
  background-color: var(--Button-Primary);
  border-radius: 20px 0; 
  width: 8rem;
  height: 3rem;
  transition: all .2s ease;
}

#proyectos-herreria .categoria-activa{
  background-color: var(--Buton-Secondary);
  box-shadow: 0 0 5px #000;
  text-shadow: 1px 1px 1px gray;
}

#proyectos-herreria button:hover {
  transform: scale(1.15); 
  box-shadow: 0 0 10px black;
  border: 1px solid black;
  font-weight: bold;
}

#proyectos-herreria button:active {
  transform: scale(1.15); 
  box-shadow: inset 0 0 10px black;
  border: 3px solid black;
}


#proyectos-herreria .galeria-proyectos{
  background: radial-gradient(#fffa, #ffb7);
  margin: 3rem 0;
  flex: 1;
  border: 3px solid #3b0d0dde;
  border-right: none;
  border-radius: 40px 0 0 40px;
  box-shadow: -5px 0 10px #7668;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2rem;
  padding: 2rem;
}
.galeria-proyectos div{
  border-radius: 20px;
  box-shadow: 0 0 10px black;
  transition: all .3s ease; 
}
.galeria-proyectos div:hover{
  transform: scale(1.05); 
  box-shadow: 0 0 15px rgb(0, 0, 0);
  border: 1px solid black;
}

.img1{
  background-image: url("../../imgFolder/Galeria/decoraciones/decoracion3.webp");
  background-size: cover;
  background-position: center;
}
.img2{
  background-image: url("../../imgFolder/Galeria/escaleras/escalera1.webp");
  background-size: cover;
  background-position: center;
}
.img3{
  background-image: url("../../imgFolder/Galeria/mobiliarios/mobiliario2.webp");
  background-size: cover;
  background-position: center;
}
.img4{
  background-image: url("../../imgFolder/Galeria/puertasYportones/porton2.webp");
  background-size: cover;
  background-position: center;
}
.img5{
  background-image: url("../../imgFolder/Galeria/techos/techo1.webp");
  background-size: cover;
  background-position: center;
}
.img6{
  background-image: url("../../imgFolder/Galeria/ventanas/ventana1.webp");
  background-size: cover;
  background-position: center;
}

@media(max-width:1023px){
  #proyectos-herreria{
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    gap: 0;
    background: linear-gradient(125deg, rgba(200, 84, 84, 0.2), rgba(110, 110, 73, 0.1));
  }
  #proyectos-herreria .menu{
    padding: 0;
    margin-bottom: 0;
    flex: 0;
  }
  #proyectos-herreria ul{
    padding: 1rem 0;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;
  }
  #proyectos-herreria ul .esp{
    margin-bottom: 0.2rem;
    grid-column: 1 / -1;
    justify-self: center;
  }
  #proyectos-herreria li{
    margin-bottom: 0;
    border-radius: 0;
  }
  #proyectos-herreria .categoria{
    border-radius: 10px; 
    width: 7rem;
    height: 3rem;
  }
  #proyectos-herreria .categoria-activa{ 
    width: 7rem;
    height: 3rem;
  }
  #proyectos-herreria button:hover {
    transform: none;
  }
  #proyectos-herreria button:active {
    transform: none; 
  }

  #proyectos-herreria .galeria-proyectos{
    margin: 2rem 1rem;
    margin-top: 0;
    border: 3px solid #3b0d0dde;
    border-radius: 40px;
    box-shadow: -5px 0 10px #7668;
    gap: 1rem;
    padding: 1rem;
  }
}