html:has(.no_scroll){overflow:hidden;}

header{
  position:fixed; top:0px; left:0px;
  height:var(--header_height); width:100%;
  padding-left:4%; padding-right:4%;
  background:var(--bk_strong);
  background-size: cover; background-repeat: no-repeat; transition: .5s;
  display: flex; align-items: center; justify-content: space-between;
  .h_img{
    max-height:2.78rem; width:30%;
    & img{max-height:1.8rem;}
  }
  .h_links{
    width:35%; height:2.78rem; padding-left:1%; padding-right:1%;
    display: flex; justify-content: space-between; align-items: center;
    font-size:0.9rem;
    border:1px solid var(--fr_strong); color:var(--fr_strong);
    border-radius: 16px 16px;
    & *{cursor:pointer;color:var(--fr_strong);}
    & i{font-size:1.8rem;}
    .seek{width:40%; background-color:inherit; border:0; font-size:0.9rem;}
    .seek::placeholder{color:var(--fr_strong);}
    /* .seek:focus::placeholder{color:var(--header_back);} */
    .seek:focus::placeholder{color:#c0c0c0;}
    .h_vl{ border-left: 1px solid var(--fr_strong); height: 3.5vh;}
    & span{width:40%; background-color:inherit; text-align:center; }
  }
  .h_opc{display:flex; width:35.5%; justify-content: space-between; align-items: center; padding-left:10%;}
}
.show_float_t{height: 50vh!important;}
/*
.h_find{
  position:absolute; z-index:2;
  width:100%; top:8vh; border:0px solid #fff; height:0vh;
  padding-left:6%; padding-right:6%;
  background-color: #000;
  display: block; 
  transition: height 300ms linear;
  overflow:hidden;
}
.h_find .find_content{
  align-items: center; margin-top:3vh; margin-left:20%;
  padding-left:20px;padding-right:20px;
  display: flex; 
  justify-content: space-around;
  position:relative; float:left;
  width:60%; height:4rem; border:0px solid #fff;
  background: linear-gradient(90deg, #1F2125 0%, #3E4049 100%);
  border-radius: 40px;
}

.h_find .find_content label{font-size:1rem;width:40%; text-align:right; padding-right:5px;}
.h_find .find_content input{
  border:0; font-size:1.1rem; padding-left:12px;
  height:2.5rem; width:40%; color:#fff;
  border-radius: 15px; color:#000;
}
.h_find .find_content i{font-size:36px;cursor:pointer;}
*/
/* .show_cata{height: 50vh!important;} */

/*.hide_main{
  filter: blur(1px);
  filter: brightness(20%);
}*/
.hide_main{
  animation: loading1 1s linear infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  /* filter: brightness(20%); */
}
._load{
  animation: loading 1s linear infinite alternate;
  animation-fill-mode: both;
  animation-direction: alternate;
}
@keyframes loading1{
  0% { filter: brightness(90%);}
  100% { filter: brightness(80%);} 
}
@keyframes loading {
  0% { background: #62636D;}
  100% {  background: #181A1E;}
}


/* CANASTO FLOTANTE R*/

.h_cnt{
  position:absolute; top:var(--header_height); left:100%; width:30%;
  height:calc(100dvh - var(--header_height));
  z-index:9999;
  border:0px solid red; background:var(--bk_middle); color:var(--fr_middle);
  overflow:auto; display:none;
  padding:15px;

  .hcnt_title{
    position:relative;
    height:2rem; max-height:2rem; overflow:hidden;
    width:100%; padding:5px;
    display:flex;width:100%; justify-content: space-between;
    & label{font-size:1.2rem; font-weight:500;}
    & i{cursor:pointer;}
  }
}
.h_cnt .skin_cnt:hover{
  /* max-height:25rem;  */
}
.h_cnt .skin_cnt{
  position:relative; background:var(--bk_gral);
  height:7rem; max-height:7rem; overflow:hidden;
  display:block; margin-top:1rem;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
  .cnt_img{
    position:absolute; top:0.5rem; left:1%;
    width:25%; height:6rem; cursor:pointer; 
    display: flex; justify-content: center;  align-items: center;
    border: 0px solid green;
    & img{max-width:95%; max-height:95%;}
  }
  .cnt_title{
    position:absolute; top:0.2rem; left:26%; width:67%;
    font-size:0.75rem; 
    display: -webkit-box; height:4rem; text-align:left; text-overflow: ellipsis; overflow:hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical;
    padding:8px; font-weight:500;
  }
  ._delete{
    position:absolute; top:2.5rem; left:90%; width:10%;
    font-size:1.8rem; color: #c0c0c0;
    text-align:center; cursor:pointer; 
  }
  .it_qty{
    position:absolute; top:4.2rem; left:35%;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
    border: 1px solid #000;
    text-align:center; width:25%;
    display: flex; justify-content: space-around; align-items: center; column-gap: 2px;
    ._less{font-size:1.4em; cursor:pointer;font-weight:300;border-right: 1px solid #000; width:30%;}
    ._qty{pointer-events: none; text-align:center;font-size:1em; font-weight:300; padding-top:0px width:30%;}
    ._more{ font-size:1.4em; cursor:pointer;font-weight:300;border-left: 1px solid #000; width:30%;}
  }
  .cnt_precio{
    position:absolute; top:4.3rem; left:60%; width:38%;
    font-size:1.1rem; padding:5px; font-weight:500;
    text-align:right; 
  }

}



.h_cnt .balance{
  position:relative; display:flex; justify-content: space-between;
  height:2rem; max-height:2rem; overflow:hidden;
  width:100%; padding:5px;  margin-top:1rem;
  & label:nth-child(1){font-size:1rem; font-weight:400;}
  & label:nth-child(2){font-size:1.1rem; font-weight:500; text-align:right;}
}

._cnt_qty{font-size:1rem; color:#f1f1f1;}

.btn_cx{
  position:relative;
  width:44%; height:2.2rem; 
  display: flex; justify-content: space-between; align-items: center;
  font-size:0.9rem;
  /* color:var(--font_color);  background-color: #99189b; */
  border-radius: 20px 20px;
  cursor:pointer; 
  padding-left:3%; padding-right:3%;
  transition: all 1300ms linear;
}
.btn_cx i{font-size:1.6rem;}
/* .btn_cx:hover{background-color:var(--main_color); } */

/*
.btn_fig{
  margin-top:1rem;  height:3rem;
  display:flex; width:100%;
  justify-content:center; align-items:center;
  font-family: 'Roboto'; font-size:1.1rem;
}
.btn_fig *{cursor:pointer;}

.btn_fig button{
  width:90%; background-color:var(--back_obj);
  border-style:none;
  display:flex; 
  justify-content:center; align-items:center;
  font-size:1.1rem; font-weight:500;
  color:#fff;
  border-radius: 30px;
  height: -webkit-fill-available;
  transition: 0.25s
}
.btn_fig button span{padding-left:5px; font-size:1.6rem;}
.btn_fig button:hover{transform: scale(1.05);}

.btn_fig_sec{background:var(--btn_fig_back_sec)!important; color:var(--btn_fig_fore_sec);}
.btn_fig_ter{background:var(--btn_fig_back_ter)!important; color:var(--btn_fig_fore_ter);}
*/


.h_login{
  z-index:0;
  width:50%; min-width:400px;
  /* height:78vh;  max-height:570px; */
	min-height:300px;
  background:var(--bk_strong); background-size: cover; background-repeat: no-repeat;
  color:var(--fr_strong);
  border-radius: 20px;
  border:1px solid #f1f1f1;
  display:block; 
  opacity:0;
  position:absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out allow-discrete;
  padding:35px;

  .hlogin_title{
    position:relative;
    height:2rem; max-height:2rem; overflow:hidden;
    width:100%; padding:5px;
    display:flex;width:100%; justify-content: space-between;
    
    & label{font-size:1.2rem; font-weight:500;}
    & i{cursor:pointer;}
  }
  .lg_detail{font-size:0.8rem;margin-top:1.7rem;}
  & input{
    height:3rem; width:100%; color:#ff6517;
    margin-top:2.2rem;
    background-color:transparent; border:1px solid #ff6517;
    font-size:1.1rem; padding-left:34px;
    border-radius: 25px; text-align:center;
  }
  .lg_olvido{height:3rem; margin-top:2rem; width:100%; text-align:center; font-size:1.1rem;cursor: pointer;}
}
.h_login_show{opacity:1!important;z-index:9; }

.mnu_user{
  position:absolute; top:var(--header_height); left:100%; width:30%;
  height:calc(100dvh - var(--header_height));
  z-index:9999;
  overflow:auto; display:none;
  padding:15px; 
  background: var(--bk_strong); color:var(--fr_strong);
  background-size: cover; background-repeat: no-repeat; background-position: right;
  .title{
    position:relative; color:var(--fr_strong); border-bottom: 1px solid var(--fr_strong);
    height:3rem; overflow:hidden;
    width:100%; padding:5px; margin-bottom: 0.5rem;
    display:flex; justify-content: space-between; align-items: center;
    & label{font-size:1.2rem; font-weight:500;}
    & i{cursor:pointer;}
  }
  .opciones{
    position:relative;
    height:auto; overflow:hidden;
    width:100%; padding:10px;
    & article{
      font-size:1.2rem; font-weight:400; 
      display:block; justify-content: flex-start; align-items: center;
      width: 100%; height: 3.5rem; padding:5px 15px;
      cursor:pointer;
      background: var(--bk_middle); color:var(--edit_caption);
      margin-top: 0.8rem;
      border-radius: 12px;

      &:hover{font-weight:500; transform: scale(1.05);}
      & div{width:100%; height:1.7rem; color:var(--edit_caption);}
      & label{width:100%; height:1.2rem; font-size:0.7em;display:block; text-align:right;}
    }
    ._close_sesion{text-align:center; background-color:transparent; color:var(--fr_strong); margin-top:2rem;}
  }  
}
/*
.h_user .huser_title{
  position:relative;
  height:2rem; max-height:2rem; overflow:hidden;
  width:100%; padding:5px;
  display:flex;width:100%; justify-content: space-between;
}

.h_user .huser_title label{font-size:1.2rem; font-weight:500;}
.h_user .huser_title i{cursor:pointer;}

.h_user .skin_cnt{
  position:relative; background:var(--cnt_main);
  height:7rem; max-height:30rem; overflow:hidden;
  display:block; margin-top:1rem;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}

.h_user .skin_cnt:hover{
  /* max-height:25rem;  */
}

.h_user .skin_cnt .cnt_img{
  position:absolute; top:0.5rem; left:1%;
  width:30%; height:5rem; cursor:pointer; 
  display: flex; justify-content: center;  align-items: center;
  border: 0px solid green;
}

.h_user .balance{
  position:relative;
  height:2rem; max-height:2rem; overflow:hidden;
  width:100%; padding:5px;
  display:flex; justify-content: space-between;
  margin-top:1rem;
}
.h_user .balance label:nth-child(1){font-size:1rem; font-weight:400;}
.h_user .balance label:nth-child(2){font-size:1.1rem; font-weight:500; text-align:right;}
*/




@media only screen and (min-width : 300px) and (max-width : 580px){
}