.h_cata{
  position:absolute; z-index:2;
  width:100%; 
  top: var(--header_height);
  border:0px solid #fff;
  height:0vh;
  padding-left:5%; padding-right:5%;
  display: flex; justify-content:space-around;  align-items:start; gap:10px;
  transition: height 300ms linear;
  overflow:hidden;
  background:var(--bk_degrade); /* linear-gradient(360deg, #673674 0%, #2b0a37 100%); */
  color:var(--fr_degrade);
  .h_list {
    display:inline-grid; justify-content:unset;  align-items:center; grid-auto-rows: 30px;
    width:12%; height:auto; margin:0; padding:0; float:left;
    font-size:0.7rem; padding-top:2rem;
    & div{font-size:1rem; font-weight:bold;}
    & label{font-size:0.8rem; padding:5px;}
    & label:hover{cursor:pointer;font-weight:400; }
     
  }

  .h_mnu_main{
    display:inline-grid; justify-content:unset;  align-items:center; grid-auto-rows: 30px;
    width:25%; height:auto; margin:0; padding:0; float:left;
    font-size:0.9rem; padding-top:2rem;
    & div{font-size:1rem; padding:5px;}
    & div:hover{cursor:pointer;font-weight:600; }
     
  }
  .h_mnu_sub{
    display:inline-grid; justify-content:unset;  align-items:center; grid-auto-rows: 30px;
    width:25%; height:auto; margin:0; padding:0; float:left;
    font-size:0.9rem; padding-top:2rem;
    max-height: 20rem;  overflow-y: auto;
    & div{font-size:1rem; padding:5px;}
    & div:hover{cursor:pointer;font-weight:600; }
     
  }
  .h_cards{
    display:inline-grid; position:relative; grid-template-columns:1fr 1fr 1fr;
    justify-content:space-around;  align-items:center; 
    width:40%; height:auto; margin:0; padding:0; float:left; padding-right:20px;
    font-size:0.7rem; padding-top:2rem;
    gap:15px 30px;
    .h_card{
      padding:0.1rem;margin:0; cursor:pointer;padding-top: 8px;
      /* display:flex; justify-content: center; align-items:center;  flex-direction:column; */
      display: flex; flex-direction: column;
      background:var(--bk_middle); color:var(--fr_middle); overflow: hidden;
      display:block; float:left;
      border: 0px solid #625c5c;  border-radius: 20px;
      height:8rem;
      & article{width: 96%;max-height: 70%; height: 70%; display: flex; justify-content: center; align-items: center;
        & img{height: -webkit-fill-available;}
      }
      & label{display:block; width: 100%; float:left; text-align:center; padding:4%; font-weight:400;}
    }
  }
}


@media only screen and (min-width : 300px) and (max-width : 580px){
  .h_cata{display:block!important;}
  .h_mnu_main{
    display:block!important; width:100%!important;     
  }
  details *{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  details {
    position: relative;
    max-inline-size: 40rem;
    padding: 0.2rem;
    margin-inline: auto;
  } 

  summary{
    position: relative;
    font-weight: 500;font-size:1rem; height:2rem;
    cursor: pointer;
    align-items: center;
    display:flex; justify-content:space-between;
    padding-left:5px;padding-top:0px;padding-bottom:1px;
  }
  summary section{font-size:1.2rem;}
  .details::details-content {
    display: block; width:100%; 
    block-size: 0;
    overflow: hidden;
    transition-property: block-size, content-visibility;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
  }

  .details[open]::details-content {
    block-size: auto;
    block-size: calc-size(auto, size);
  }
  .details[open] .d_icon {transform: rotate(180deg);}
  .menu_opc{
    display:flex; justify-content:space-between; align-items: center;
    cursor: pointer;
    color:var(--fr_degrade);
    padding-left:10%;padding-top:4px;padding-bottom:4px;
    font-size:1rem;
    height:2rem;
  }
  .menu_opc *{transition: all 0.3s ease-in-out;}
  .menu_opc section{text-wrap-mode: nowrap; overflow: hidden; width: 95%;}
  .menu_opc section:hover{scale:1.1; font-weight:500;color:var(--btn_hover);}




}