.menu-movil {
    z-index: 200;
    width: 100%;
    min-width:100%;
    height: 104vh;
    position:fixed;
    top:-2rem;
    left: 100%;
   
    /*background-color: rgb(218, 213, 213);*/
    background-image:url("https://caparroz.es/img/metal.jpg");
    
    background-position:50% 30%;
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction:column;
    transition: left .5s ease-in-out;
    -webkit-transition: left .5s ease-in-out;
    -moz-transition: left .5s ease-in-out;
    -ms-transition: left .5s ease-in-out;
    -o-transition: left .5s ease-in-out;
  }
  
  
  
  /* corresponde al menu de iconos */
  .menu-movil .movil-contacto {
      position: absolute;
      right: 1rem;
      top: calc(40% - 50px);
      width: 70px;
      font-size: 3em;
      cursor: pointer;
  
      display: flex;
      flex-direction: column;
      gap: 7rem;
  }
  .menu-movil .logo-lateral{
      text-align: center;
      
  }
  .menu-movil .logo-lateral img{
      width: 40%;
      max-width: 600px;
      margin-top: 3rem;
      animation: scale-lateral 15.5s infinite;
      -webkit-animation: scale-lateral 15.5s infinite;
  }
  
  @keyframes scale-lateral {
      0%,100%{ scale: 1; box-shadow: 0px 0px 18px rgb(255, 255, 255);}
      23%{ scale: 1.1; box-shadow: 0px 0px 0px transparent;}
      43%{ scale: 1; box-shadow: 0px 0px 18px rgb(255, 255, 255);}
      83%{ scale: 1.1; box-shadow: 0px 0px 0px transparent;}
  }
  
  .menu-movil .nav-movil{
      text-align: left;
      position: absolute;
      left: 6rem;
      top: 18%;
      
  }



  /* menu del lateral */
  .menu-movil .nav-movil nav ul{
      font-size: 1.5em;
      list-style: none;
     background-color: rgba(255, 255, 255, 0.204);
     padding: 4rem;
  }
  .menu-movil .nav-movil nav ul li{
     padding: 0.5rem 0rem 0.5rem 0rem;
     border-bottom: 2px solid rgb(255, 255, 255);
     transition: transform .6s step-end;
     -webkit-transition: transform .6s step-end;
     -moz-transition: transform .6s step-end;
     -ms-transition: transform .6s step-end;
     -o-transition: transform .6s step-end;
  }
  .menu-movil .nav-movil nav ul li:hover{
      border-bottom: 2px solid var(--amarillo);
      color: black;
      transform:translateX(3rem) scale(1.3) ;
      -webkit-transform:translateX(3rem) scale(1.3) ;
      -moz-transform:translateX(3rem) scale(1.3) ;
      -ms-transform:translateX(3rem) scale(1.3) ;
      -o-transform:translateX(3rem) scale(1.3) ;
  }
  .menu-movil .nav-movil nav ul li a{
      color:var(--azul);
      text-decoration: none;
      font-family: "Roboto", sans-serif;
        font-weight: 400;
      
  }
  .menu-movil .nav-movil nav ul li a:hover{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
      color:var(--amarillo);
  }
  
  


  /* icono de cierre del menu x */
.menu-movil i:nth-last-child(4){
    position: absolute;
    left: calc(95vw - 3rem);
    top: 3rem;
    width: 50px;
    font-size: 3em;
    color: white;
    cursor: pointer;
    border: 2px solid rgb(255, 255, 255);
    box-shadow: 0px 0px 30px 8px rgb(255, 255, 255);
    text-align: center;
}
.menu-movil i:nth-last-child(4):hover{
   color: var(--amarillo);
   border:2px solid var(--azul);
   box-shadow: 0px 0px 30px 8px var(--azul);
}
  /* .movil-contacto{
     position: relative;
     top: calc(50vh - 200px);
  
      display: flex;
      gap: 7rem;
      flex-direction:column;
  } */
   .movil-contacto i{
      
      color: var(--azul);
      text-shadow: 1px 1px 1px 1px rgb(128, 0, 126);
      transition: transform .5s ease-in-out;
      -webkit-transition: transform .5s ease-in-out;
      -moz-transition: transform .5s ease-in-out;
      -ms-transition: transform .5s ease-in-out;
      -o-transition: transform .5s ease-in-out;
  }
   .movil-contacto i:hover{
      transform: translateX(-1rem) scale(1.3);
      -webkit-transform: translateX(-1rem) scale(1.3);
      -moz-transform: translateX(-1rem) scale(1.3);
      -ms-transform: translateX(-1rem) scale(1.3);
      -o-transform: translateX(-1rem) scale(1.3);
  }
  
  
  
  
  
  
  
  
   /* 
    */
  
  
  @media(max-width:650px) {
      .nav-movil ul li{
          font-size:1.4rem;
      }
  
      .menu-movil .movil-contacto {
          width: 100%;
          top: calc(100% - 50px);
          flex-direction: row;
          left: 0;
         font-size: 1.7rem;
         padding: .3rem 0;
         justify-content: center;
         background-color: white;
      }
  
      .menu-movil .nav-movil nav ul{
          position: absolute;
          left: -2.5rem;
         
           min-width: 80vw;
      }
  }