.header .navegation .navegation-bar label .menu {
  display: none;
  width: 6rem;
  height: 6rem;
  align-self: flex-end;
}

.header .navegation .navegation-bar label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: var(--red-weak);
}

.header .navegation .navegation-bar label .menu .hamburguer {
  position: relative;
  display: block;
  width: 3rem;
  height: 0.2rem;
  left: 2rem;
  transition: 0.5s ease-in-out;
  /* color: var(--red-weak); */
  background-color: var(--red-weak);
}

.header .navegation .navegation-bar label .menu .hamburguer::before,
.header .navegation .navegation-bar label .menu .hamburguer::after {
  background-color: var(--red-weak);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.2s ease-in-out;
}

.header .navegation .navegation-bar label .menu .hamburguer::before {
  top: -1rem;
}

.header .navegation .navegation-bar label .menu .hamburguer::after {
  bottom: -1rem;
}

.header .navegation .navegation-bar input {
  display: none;
}

.header .navegation .navegation-bar input:checked ~ label .menu .hamburguer {
  transform: rotate(45deg);
}

.header
  .navegation
  .navegation-bar
  input:checked
  ~ label
  .menu
  .hamburguer::before {
  transform: rotate(90deg);
  top: 0;
}

.header
  .navegation
  .navegation-bar
  input:checked
  ~ label
  .menu
  .hamburguer::after {
  transform: rotate(90deg);
  bottom: 0;
}