/*NAVBAR*/



/*hamburgueso rojo*/
.checkbox {
  display: none;
  border: 2px solid #A8A8A8;
  margin: auto;
}


header {
  position: fixed;
  width: 100%;
  z-index: 2000;
}


.header-container {
  width: 90%;
  position: relative;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

@media screen and (max-width:1200px){
  .header-container{
    display: none;
  }
}

.btn-label {
  width: 2rem;
  height: 3rem; /*antes 1.4rem*/
  
}

.header-button { /*primera línea*/
  width: 2rem;
  height: 0.3rem;
  background: red;
  position: absolute;
  top: 1.9rem;  
  transition: all 0.2s;
  cursor: pointer;
  transform: translate(50px, 0);
  
  border-radius: 4px;

}

.header-button::before,
    .header-button::after { /*2 línea*/
      content: "";
      width: 2rem;
      height: 0.3rem;
      background: red;
      position: absolute;
      top: -0.6rem;
      transition: all 0.2s;      
      border-radius: 4px;      
    }

    .header-button::after { /*3 línea*/
      top: 0.6rem;
      border-radius: 4px;
    }


    .menu {
      background-color: transparent;
      width: 100%;
      height: 10rem;
      z-index: 3000;
      top: -12rem;
      right: 6%; /*reemplaza a tranform de abajo*/
      display: flex;
      flex-direction: column; /*CAMBIA EL SENTIDO POR DEFECTO / ROW A COLUMN*/
      justify-content: space-around;
      text-align: center;
      padding: 0.5rem;   
      cursor: pointer;
      /*transform: translatex(-50%); transform: translatex(-100%);*/

      /* Para conseguir el efecto de desplazamiento lateral posicionamos de manera absoluta el elemento. También le asignamos las transiciones deseadas. 
      Al activar el disparador como se ha descrito, las propiedades se aplican en función de la transición definida  */

      position: fixed;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -mos-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
      animation-name: slidein;
    }

    /*RUPTURA DE MENU*/

     @media screen and (max-width:768px){
       .menu {      
         flex-direction: row; /*CAMBIA EL SENTIDO POR DEFECTO / ROW A COLUMN*/
       }
     }    

  /*fondo menú*/
  .toggle-menu {
    background-color: rgba(0, 0, 0, 0.2);
  }

   /* Para hacer un efecto "slide" en lugar de ocultar el elemento con display:none, lo sacamos de la vista por un lateral */
   .menu:not(:checked) ~ .menu {
     right:-1000px;
 }

    /*logo derecha principal*/
    #header-logo{
      background: rgb(247, 246, 246);
      padding: 10px 20px;
      align-content: flex-end;
    }
    
        /*los buts/ botones del menú*/
  .but{
    background: rgb(247, 246, 246);
    padding: 45px 0;
    margin-left: unset;
    width: 10%;
    color: gray;
  }

      /* rupturas del menú / botones */

      @media screen and (max-width:1700px){
        .but {      
          width: 12%; 
        }
      } 
    
      @media screen and (max-width:1450px){
        .but {      
          width: 15%; 
        }
      } 
    
      @media screen and (max-width:1100px){
        .but {      
          width: 17%; 
        }
      } 

  .button1{
    background: orange;
  }

  /*boton inicio menú*/
  #white-black{
    padding: 25px 0;
  }

  #white-black:hover{
    content: url('../img/logo\ 2.2_Mesa\ de\ trabajo\ 1.webp');
  }

    /*menú*/
    ul {
      list-style: none;
      padding: 0;
    }
  
    li {
      margin: 0rem;
    }
  
    ul li a {
      color: rgb(97, 97, 97);
      text-decoration: none;
      padding: 48px 56px;
      font-weight: lighter;
    }  
  
    ul li a:hover{
      font-weight: 900;
      color: #AF0000;
      background: white;
      width: 10%;
      padding: 48px 54px;
    }
  
    .logo{
      padding: 45px 0;
    }
  
    .logo:hover{
      background: orange;
      padding: 45px 0;
    }
          
    ul li{
      display: block;
      float: right;
      padding: 0 10px;
      direction: left;    
      } 
  
    .header-logo:hover{
      content: url('../img/logo\ 2.2_Mesa\ de\ trabajo\ 1.webp');
    }

    @media screen and (max-width:1024px){
      .header-logo{
        display: none;
      }
    }


/*MENÚ OCULTO*/
@media screen and (max-width:1200px){
  .menu{
    display: none;
  }
}

  /*X del menú CLOSE*/

  .checkbox:checked ~ .menu {
    
  background: transparent;
    top: 0rem;
  }
  .checkbox:checked + header .header-container label .header-button {
    background: none;
  }
  .checkbox:checked + header .header-container label .header-button::before {
    transform: rotate(45deg);
    top: 0;
  }
  .checkbox:checked + header .header-container label .header-button::after {
    transform: rotate(-45deg);
    top: 0;
  }