/* html{font-size: clamp(0.7rem, 1.3vw, 1.4rem)!important;} */
html{background:var(--bk_gral);}
html:has(.no_scroll){overflow:hidden;}
body{margin:0; padding:0;}
*{margin:0; padding:0;}


.it_buy{
  position: relative; display:flex;  justify-content:space-around;  align-items:center;
  height: 4rem; width: 100%; padding: 5px;
  transition: all 0.2s ease-in-out allow-discrete;
  
  .it_qty{
    display:flex;  justify-content:space-evenly;  align-items:center;
    height: 2.5rem; width: 30%;
    border-radius: 20px; -webkit-box-shadow: 0px 0px 2px #7400b8;
    & *{font-size: 1.6rem; padding-top: 3px; cursor: pointer; font-weight: 600; text-align:center;}
    ._qty{
      pointer-events: none;
      text-align: center;
      font-size: 1.2rem;
      font-weight: 400;
      padding-top: 6px;      
    }
  }
  .btns_cpa{
    border-radius: 20px; background:var(--btn_bk); color:var(--btn_fr); cursor:pointer;
    height: 2.5rem; width: 62%; text-align:center; display:flex;  justify-content:center;  align-items:center;
  }
}




.main{ 
  width:100%; 
  background:var(--bk_gral); color:var(--fr_gral);
  padding:20px; padding-top:15px;
  position:relative; 
  transition: all 0.5s ease-in-out allow-discrete;
}

.hide_main{
  /* filter: blur(1px); */
  filter: brightness(20%);
}
.hide_main_full{filter: brightness(10%);}

._load{
  animation: loading 1s linear infinite alternate;
}
@keyframes loading {
  0% { background: #62636D;}
  100% {  background: #181A1E;}
}
.panel_top{
  position:relative; display: flex; float:left;
  width:100%; height:85vh; padding:0 8%; column-gap: 5%;
  overflow:hidden; min-height:590px;
}

.panel_imgs{
  position:relative; display: inline-block; float:left;  border:0px solid #fff;
  width:55%; height:100%; 

  .img_main{
    width:100%;
    max-height:80%; height:80%; border:0px solid blue;
    display:flex; justify-content:center; align-items:center;
    & img{
      max-height:96%; transition: 0.45s; max-width:96%;
      &:hover{transform: perspective(500px) rotateY(5deg);}
    }
  }
  .imgs{
    position:relative; float:left; overflow-x:auto;
    display: flex; justify-content: center; align-items: center; column-gap: 10px;
    width:100%; height:10vh; 
    .img_alt{
      float:left; border:1px solid gray;
      display: flex; justify-content: center; align-items: center;
      width:100%; height:8vh;
      cursor:pointer;

      & img{max-height:80%; transition: 0.45s; max-width:80%;}
    }
  }
}
.panel_prop *{ width:100%;}
.panel_prop{
  position:relative; float:left;
  width:40%; height:100%; border:0px solid #fff;
  
  .title_id{
    font-size:0.8rem; font-weight:400; display: inline-block;
    width:100%;
  }

  .title{
    font-size:1.3rem; font-weight:600; display: inline-block;
    width:100%; padding-bottom: 3%;
  }
  
	.subtitle{display:flex; justify-content:space-between; padding-bottom: 2%;}
	.sub_price{text-align:end; font-size: 1.1rem; color:var(--btn_bk)}
	
	/********************************* pestañas *****************************************************/
	
	/* Contenedor principal */
	.tabs-container {
    display: flex;
    flex-wrap: wrap;
    /* max-width: 600px; */
    /* Ajusta el ancho a tu gusto */
    margin: 20px auto;
    /* font-family: sans-serif; */
	}
	
	/* Ocultamos los radio buttons */
	input[type="radio"] {
    display: none;
	}
	
	/* Estilo de las etiquetas (los botones de las pestañas) */
	.p_title {
    padding: 5px 20px; 
		width: auto; margin-bottom: 8px;
    /* background: #e2e2e2; */
    cursor: pointer;
    /* font-weight: bold; */
    /* border-right: 1px solid #ccc; */
	}

	/* Estilo del contenido */
 	.tab-content {
    order: 1;
    display: none;
		font-size:0.7rem; width:100%;
    height:auto; line-height: 20px;
		padding-top:15px;
    padding-bottom:15px;
    max-height:60vh;
		overflow-y:auto;
		
		.attr{
    display:flex; justify-content:space-between; align-items: center; padding-left:8px;
    
    & section{font-weight:400; font-size:0.7rem; width:60%;}
    & label  {
      font-weight:300; font-size:0.8rem;  width:40%; text-align:right; padding-right:10px;
      & i{cursor:pointer;font-size: 20px;}
    }
  }
	} 
	
	/*
	  
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;

    
    max-height: 300px;
    overflow-y: auto;
	
	*/

/* Lógica de visualización: cuando el radio está seleccionado, muestra el contenido hermano */
	input[type="radio"]:checked+label {
    background: #fff;
    border-bottom: 2px solid var(--fr_strong);
    /* Color de énfasis */
	}

	input[type="radio"]:checked+label+.tab-content {
    display: block;
	}
	
	/********************************* fin pestañas *****************************************************/
	
  .textarea{
    font-size:0.7rem; width:100%;
    height:auto; line-height: 20px;
    padding-bottom:15px;
    max-height:180px; overflow-y:auto;
  }

  /* & article{font-size:0.8rem; width:100%; line-height: 22px; color:rgb(208 95 79);} */
}

.plegable{
  width:100%; float:left; 
  display:block; 
  height:auto; 
  /* background: var(--bg_alt); */
  transition: all 1s ease-in-out allow-discrete;

  & details *{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  & details {
    position: relative;
    overflow-y:auto;
    padding: 0.2rem;

    &::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;
    }

    .d_icon {text-align: center;}

    &[open]::details-content {
      block-size: auto;	 
			block-size: calc-size(auto, size);
      max-height: 12rem; overflow-y: auto;
    }
    &[open] .d_icon {transform: rotate(180deg);}
  }
  .attr{
    display:flex; justify-content:space-between; align-items: center; padding-left:8px; padding-top:15px;
    
    & section{font-weight:400; font-size:0.7rem; width:60%;}
    & label  {
      font-weight:300; font-size:0.8rem;  width:40%; text-align:right; padding-right:10px;
      & i{cursor:pointer;font-size: 20px;}
    }
  }

  & summary{
    position: relative;
    font-weight: 500;font-size:0.8rem;
    cursor: pointer;
    display:flex; justify-content:space-between; align-items: center;
    padding-left:5px;padding-top:0px;padding-bottom:1px;
    
    & section{font-size:0.9rem;width:80%;}
    & i{width:10%!important;}
  }
}
.contenedor {
  float:left;
  display: grid;
  grid-template-columns: 28% 28% 28%;
  column-gap: 3em;
  margin-top: 4rem;
  padding: 20px 8%;
}
/*.caja {
  border-radius: 40px;
  padding: 1.5em;
  background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #62636d 0%, #181a1e 100%);
  box-shadow: 0px 4px 8px 0px #00000080;
  color: #fff;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.caja label {
  font-weight: 700;
  font-size: 1.5em;
}
*/
.titulo {
  display: flex;
  align-items: center;
}

/*
.service{
  float:left;
  display: flex; align-items:center; justify-content: space-around;  column-gap:4%;
  margin-top: 0.5rem;
  padding: 20px 8%;
  
  .caja{
    border-radius: 40px;
    padding: 1.5em;
    background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #62636d 0%, #181a1e 100%);
    box-shadow: 0px 4px 8px 0px #00000080; color: #fff;
    
    & div{
      float:left;
      display: flex; align-items:center; justify-content: space-around; column-gap:4%
      width:100%; height:50%;
      
      & img{width:35%; max-height:70px;}
      
      & label{font-weight: 500; font-size: 1.1em;}
    }
    & p{
      float:left; font-size:0.8rem;
      display: block;
      width:100%; height:50%;
    }
    
  }
}*/

@media only screen and (min-width : 300px) and (max-width : 580px){
  html{overflow-y:auto; }
.panel_top{ display:block!important; padding:0!important; height: auto!important;}
.panel_imgs {
    display:block!important;
    width: 100%!important;
}
.panel_prop {
    display: block!important;
    width: 100%!important;
}
.plegable{
  .attr{
   
    & section{font-size:0.8rem;}
    & label  {
      font-weight:300; font-size:0.8rem;
      & i{cursor:pointer;font-size: 24px;}
    }
  }

  & summary{
    font-weight: 500;font-size:1rem;
    & section{font-size:1.1rem;}

  }
}


}