/* COLORS */
:root {
    --color-primary: #00264B;
    --color-black:#212121;
    --color-brown: #965E04;
    --color-secondary: #7CD6D7;
    --color-crema: #F8B133;
    --color-white: #FFFFFF;
    --color-white2: #F9F6F0;
    --color-gray:#8D8D8D;
  }
  


  .precio{
    font-size: 21px;font-family: 'SegoeBold';
  }


  .addB{
    width: 50%;
  }



  .title_1{
    font-size: 18px;
    font-family: 'NunitoRegular';
  }

  .btnAdd1 > input{
    color: #8D8D8D;
  }

  .btnAdd1{
    border:1px solid #D4D4D4; width: 40%;
  }

  .changeValueBtn:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  }

  .changeValueBtn:active{
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  }


  .colCesta{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
  }

  .ingredMod{
    border:20px solid #965E04;
  }


  /* FONTS */
  .subTextH1{
    color: #00264B;
    font-size: 18px;
    font-family: 'NunitoLight'
  }

  .subTextStrong{
    font-style: italic;
    color: #00264B;
    font-size: 18px;
    font-family: 'NunitoBold';
  }

  .typeTxtTor{
    color: var(--color-gray);
    font-size: 14px;
    font-family: 'NunitoRegular';
  }


  .card-client{
    width: 100%;    height: 280px !important;
  }

  .client-name{
    font-size: 20px;    
    font-family: Arial, Helvetica, sans-serif;    

  }


  .btn-buy {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  }

  .client-text{
    font-size: 16px;
    width: 85%;
    font-family: 'RobotoLigth';
  }

  .colBtns{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
    height: auto;
    width: 48% ;
  }

  .rowParts{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }



  
  .colIngr{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cestaBtn{
    width: 30%;
    font-family: 'SegoeBold';
  }


  .id_detail1{
    font-size: 22px;
    font-family: 'SegoeBold';
  }

  .resTxt{
    font-size: 30px;
  }

 .dotActive{
  height: 16px;
  width: 16px;
  background-color: #04d071;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .modal_col1, .modal_col2{
  display: grid;
  justify-content: start;
  align-items: start;
 
 }

 .modal_col2 > ul{
  text-align: left;
 }

 .modal_col1 > p {
  text-align: start;
  width: 75%;
 }

 .rowAddTors{
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 5%;
  padding-left: 0;
 }

 .section-detail1 > p:nth-child(2){
  width: 100%;
  font-size: 19px;
}

 .dotIngred{
  height: 75px;
  width: 75px;
  background-color: #FFE19B;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .row-modal{
  display: flex;
  justify-content: space-between;
  align-items: center;
 }


 .colIngr{
  padding: 0;
 }


 body{
	overflow-x: hidden;
  }

 .ingredientesBtn:hover{
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
 }



@media (min-width: 480px) and (max-width: 2500px) {
  .padContainer{
    
    padding: 3% 0 3% 0;
  }
}
@media (min-width:320px) and (max-width:1199px) {
  .headerTienda{
    margin: auto;
    text-align: center;
    padding: 2% 0% 2% 0%;
  } 

  .resTxt{font-size: 24px;}
}
    
@media (min-width:320px) and (max-width:768px) {
  .headerTienda{
    
    margin: auto;
    text-align: center;
  }
  .imgSection2{
    width: 100%;
    height: auto;
    margin-top: 2%;
    object-fit: cover;
  }
  

  
.boxPart{
  margin: 3% 8% 3% 8%;
  font-size: 18px;
  color: #6A6A6A;
  font-family: 'NunitoLight';
}


  
  
}

@media (min-width: 769px) {
  .imgSection2{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
}

 
.row2{
  padding: 4%;
  margin: 5%;
  display: flex;
  gap: 20%;
  }

 


/* RESPONSIVE PART */

/* MOVIL xs */

@media only screen and (min-width:320px) and (max-width:385px) {
  .colIngr{
    display: grid;
    justify-content: space-around;
    align-items: center;
  }


}

@media only screen and (min-width:385px) and (max-width:480px) {
  .dotIngred{
    height: 72px;
    width: 72px;
   } 
  
   .dotIngred > img{
    width: 40%;
    height: 39px;
   }
    
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

  .row-modal{
    display: grid;
    justify-content: center;
    align-items: center;
   }

  .modal_col1, .modal_col2{
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
   }

   
 .modal_col2 > ul{
  padding-left: 0;
  text-align: center;
  list-style: none;
 }
 
 


   .modal_col1 > p {
    text-align: center;
    width:100%;
   }

  .ingredMod{
    max-width: 100%;
  }

  .title_2{
    font-size: 22px;
  }

  
  .section-detail1{
    text-align: center;
  }

  .section-detail1 > p:nth-child(2){
    width: 100%; 
    font-size: 17px;
  }

  .cestaBtn{
    width: 100%;
  }

  .rowParts{
    gap: 12px;
    display: grid;
    justify-content: center;
    align-items: center;
  }

  .colCesta{
    display: grid;
    text-align: center;
    justify-content:center;
    align-items: center;
    gap: 15px;
  }
 
  
  .addB{
    width: 100%;
  }

  .btnAdd1{
    border:1px solid #D4D4D4; width: 100%;
  }

 
  .resumTor{
    width: 90%;
    font-size: 19px;
  }

  .img-select{
    width: 100%;height:220px;object-fit: cover;
  }


  .colBtns{
    margin: 2%;
    display: grid;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }

  .rowAddTors{
    display: grid;
    gap: 10px;
    justify-content: center;
    align-items: center;
   }
 


  .row2{
    margin:4% 0 0 0;
    display: flex;
    }
    .row-modal > div > img{
      margin: auto;
    }
  .resum_detail{
    margin: auto;

    width: 100%;font-size: 18px;
  }

  .subTextH1{
    margin: auto;
    width: 90%;
    margin-bottom: 2%;
    font-size: 20px;
  }
}

/*iPads, Tablets  [ sm ] */
@media (min-width: 481px) and (max-width: 767px) {



  .subTextH1{
    margin: auto;
    width: 88%;
    margin-bottom: 2%;
    font-size: 20px;
  }

    .colOp{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal_col1, .modal_col2{
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
   }

   
 .modal_col2 > ul{
  padding-left: 0;
  text-align: center;
  list-style: none;
 }
 
 


   .modal_col1 > p {
    text-align: center;
    width:100%;
   }

  .ingredMod{
    max-width: 100%;
  }


  .img-select{
    width: 100%;height:420px;object-fit: cover;
  }
  .row2{
    width: 100%;
  }
  .resum_detail{
    width: 100%;font-size: 19px;
  }

 



  .title_2{
    font-size: 22px;
  }

  
  .section-detail1{
    text-align: center;
  }

  .section-detail1 > p:nth-child(2){
    width: 100%; 
    font-size: 17px;
  }

  .cestaBtn{
    width: 100%;
  }

  .rowParts{
    gap: 12px;
    display: grid;
    justify-content: center;
    align-items: center;
  }

  .colCesta{
    display: grid;
    text-align: center;
    justify-content:center;
    align-items: center;
    gap: 15px;
  }
 
  
  .addB{
    width: 100%;
  }

  .btnAdd1{
    border:1px solid #D4D4D4; width: 100%;
  }

 
  .resumTor{
    width: 90%;
    font-size: 19px;
  }

  .img-select{
    width: 100%;height:220px;object-fit: cover;
  }


  .colBtns{
    margin: 2%;
    display: grid;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }

  .rowAddTors{
    display: grid;
    gap: 10px;
    justify-content: center;
    align-items: center;
   }
 


  .row2{
    margin:4% 0 0 0;
    display: flex;
    }

 


}

/*Small screens, laptops   [ md ] */
@media (min-width: 768px) and (max-width: 991px) {
 
  .subTextStrong{
    margin: auto;
    width: 80%;
  }

  .subTextH1{
    margin: auto;
    width: 80%;
    margin-bottom: 2%;
    font-size: 20px;
  }

  .section-detail1 > p:nth-child(2){
    width: 95%; 
    font-size: 17px;
  }
 
  .colBtns{
    margin: 2%;
    display: grid;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }
  .modal_col1, .modal_col2{
    display: grid;
    text-align: center;
    justify-content: start;
    align-items: center;
   }

   
 .modal_col2 > ul{
  text-align: start;
 }
 
 


   .modal_col1 > p {
    text-align: start;
    width:100%;
   }

  .ingredMod{
    max-width: 90%;
  }



  .rowAddTors{
    display: grid;
    gap: 10px;
    justify-content: center;
    align-items: center;
   }
 

   .addB{
    width: 100%;
  }

  .btnAdd1{
    border:1px solid #D4D4D4; width: 100%;
  }


  .rowParts{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


 
    .colOp{
      display: flex;
      justify-content: center;
      align-items: center;
    }

 
    .resumTor{
      width: 90%;
      font-size: 19px;
    }

    .img-select{
      width: 100%;height:420px;object-fit: cover;
    }

    .row2{
      width: 100%;
    }

    .resum_detail{
      width: 100%;font-size: 19px;
    }
}

/*Desktops, large screens   [ lg ] */
@media (min-width: 992px) and (max-width: 1199px) {
 
  .subTextH1{
    width: 90%;
    font-size: 22px;
  }
   
  .colBtns{
    margin: 2%;
    display: grid;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }
  .modal_col1, .modal_col2{
    display: grid;
    text-align: center;
    justify-content: start;
    align-items: center;
   }

   
 .modal_col2 > ul{
  text-align: start;
 }
 
 


   .modal_col1 > p {
    text-align: start;
    width:100%;
   }

  .ingredMod{
    max-width: 90%;
  }



    .colOp{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
 
    .resumTor{
      width: 90%;
      font-size: 17px;
    }

    .img-select{
      width: 100%;height:1400px;object-fit: cover;
    }

    .row2{
      width: 100%;
    }

  




    .title_2{
    font-size: 22px;
  }

  
  .section-detail1{
    text-align: start;
  }

  .section-detail1 > p:nth-child(2){
    width: 100%; 
    font-size: 17px;
  }

  .cestaBtn{
    width: 100%;
  }



  .colCesta{
    display: grid;
    text-align: center;
    justify-content:center;
    align-items: center;
    gap: 15px;
  }
 
  
  .addB{
    width: 100%;
  }

  .btnAdd1{
    border:1px solid #D4D4D4; width: 100%;
  }

 
  .resumTor{
    width: 90%;
    font-size: 19px;
  }

  .img-select{
    width: 100%;height:1500px;object-fit: cover;
  }


  .colBtns{
    margin: 2%;
    padding: 0;
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }

  .rowAddTors{
    display: flex;
    gap: 10px;
    justify-content: start;
    align-items: center;
   }
 


  .row2{
    margin:4% 0 0 0;
    display: flex;
    }

  .resum_detail{
    margin: auto;
    width: 100%;font-size: 16px;
  }



}

/* TAMAÑO ORIGINAL PDF */
/*Extra large screens, TV  [ xl ] */
@media (min-width: 1200px) and (max-width: 1598px) { 
  .row2{
    width: 100%;
  }

  .addB{
    margin-top: 4%;
    width: 100%;
  }

 
  .colBtns{
    margin: 2%;
    display: grid;
    justify-content:center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12%;
    height: auto;
    width: 100% ;
  }
  .modal_col1, .modal_col2{
    display: grid;
    text-align: center;
    justify-content: start;
    align-items: center;
   }

   
 .modal_col2 > ul{
  text-align: start;
 }
 
 


   .modal_col1 > p {
    text-align: start;
    width:100%;
   }

  .ingredMod{
    max-width: 90%;
  }



   
    .colOp{
      display: flex;
      justify-content: start;
      align-items: center;
    }

    .resumTor{
      width: 80%;
      font-size: 19px;
    }

    .img-select{
      width: 100%;
      height:900px;
      object-fit: cover;
    }
    .resum_detail{
      width: 90%;font-size: 19px;
    }

    .colBtns{
      margin: 2%;
      display: block;
      justify-content: center;
      align-items: center;
      height: auto;
      width:48%;
  
    }

    .btnAdd1 {
      border: 1px solid #D4D4D4;
      width:100%;
  }

}



 
/* PANTALLAS TV */
@media (min-width: 1599px) and (max-width: 2500px) {
  .row2{
    width: 80%;
  }
  .img-select{
    width: 100%;height:1220px;object-fit: cover;
  }
  .colBtns{
    gap: 8px;
    padding: 0;
    margin: 2%;
  }

  
  .btnAdd1 {
    border: 1px solid #D4D4D4;
    width:64%;
}

.addB{
  width: 36%;
}
  .colOp{
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .resumTor{
    width: 67%;
    font-size: 19px;
  }

    
    .resum_detail{
      width: 60%;font-size: 19px;
    }

}