/*h2 {
     FONT-WEIGHT: 700;
   padding-bottom:2%;
} */       
           .nombre-categoria h3 {
               padding-bottom: 2%;}


 em {font-style: italic;}   

        
 hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 2.5px solid #eee;
}    
        
.titulo-encabezado {
    position: absolute;
    width: 40%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 38px;
    font-weight: 600;
}


.zona-promo{
    padding-top:9%;
    display: flex;
    flex-wrap: nowrap; 
  position: absolute;
  width: 40%;    
}

.promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
}

.promo-2{
    position: absolute;
  margin: auto;
  padding-left: 45%;
  width: 10%;
font-size: 75px;
font-weight: 600;
    text-align: center;
}

.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 25%;
}

.hasta {
    position: absolute;
    font-size: 12px;
    padding-left: 26%;
    padding-bottom: 12%;
    margin: auto;
    width: 50%;
}

.hasta-2{
position: absolute;    
font-size: 12px;    
padding-left:18%;    
margin: auto;
width: 50%;   
}

.numero-porcentaje{
margin: auto;
width: 50%;
font-size: 85px;
font-weight: 600;    
}

.negro-porciento{
margin: auto;
width: 50%;
font-size: 35px;
font-weight: 900; 
}

.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 15px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;
}

.credito{
position: absolute;
    margin: auto;
    width: 50%;
    font-size: 15px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 28.5%; 
}

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 130px;
    padding-left: 14.5%;
    font-size: 18px;
    font-weight: 900;
}
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 675px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;
}

     
        .descripcion-encabezado{
            margin: auto;
            padding-top: 1%;
            padding-bottom: 0.5%;
            width: 85%;
            text-align: center;
            font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
            font-size: 22px;
            color: darkgray;
        }
        
        .negritas{
            font-weight: 600;
        } 
        
        .descripcion{
           font-size: 22px; 
        }


@media (max-width: 2420px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 130px;
    padding-left: 14%;
    font-size: 18px;
    font-weight: 900;
}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 645px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;
} 
}    
    

@media (max-width: 2300px){

.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 600px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
}    

@media (max-width: 2200px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 108px;
    padding-left: 13%;
    font-size: 18px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 575px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
    
}        
    

@media (max-width: 2085px){

.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 535px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
    
}        
    

@media (max-width: 2050px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 108px;
    padding-left: 13%;
    font-size: 18px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
    .zona-promo {
    padding-top: 10%;
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    width: 40%;
}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 515px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
}        


@media (max-width: 1900px){
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 108px;
    padding-left: 12%;
    font-size: 18px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 465px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
    
}

@media (max-width: 1765px){
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 15px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;
}

.credito{
position: absolute;
    margin: auto;
    width: 80%;
    font-size: 15px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 0%;}
    
}


@media (max-width: 1700px){
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 100px;
    padding-left: 12%;
    font-size: 17px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 435px;
    padding-left: 4%;
    font-size: 12px;
    font-weight: 900;} 
    
}        



@media (max-width: 1600px){

.zona-promo{
    padding-top:11%;
    display: flex;
    flex-wrap: nowrap; 
  position: absolute;
  width: 40%;    
}

.promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
}

.promo-2{
    position: absolute;
  margin: auto;
  padding-left: 45%;
  width: 10%;
font-size: 65px;
font-weight: 600;
    text-align: center;
}

.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 25%;
}

.hasta{
font-size: 11px;    
padding-left:26%;    
margin: auto;
width: 50%;   
}

.hasta-2{
font-size: 10px;    
padding-left:17%;    
margin: auto;
width: 50%;   
}

.numero-porcentaje{
margin: auto;
width: 50%;
font-size: 65px;
font-weight: 600;    
}

.negro-porciento{
margin: auto;
width: 50%;
font-size: 28px;
font-weight: 900; 
}

.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 13px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;
}

.credito{
position: absolute;
    margin: auto;
    width: 80%;
    font-size: 13px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 0%;}
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 100px;
    padding-left: 11.5%;
    font-size: 17px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 390px;
    padding-left: 4%;
    font-size: 11px;
    font-weight: 900;}      
    
    }

@media (max-width: 1450px){

.promo-2 {
    position: absolute;
    margin: auto;
    padding-left: 45%;
    width: 10%;
    font-size: 55px;
    font-weight: 600;
    text-align: center;
}

.hasta {
    font-size: 10px;
    padding-left: 26.5%;
    margin: auto;
    width: 50%;
}    
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 100px;
    padding-left: 11.5%;
    font-size: 16px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 350px;
    padding-left: 4%;
    font-size: 10px;
    font-weight: 900;}
    
.credito {
    position: absolute;
    margin: auto;
    width: 80%;
    font-size: 12px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 0%;
}    
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 12px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;}    
    
}

@media (max-width: 1350px){
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 100px;
    padding-left: 11%;
    font-size: 16px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 310px;
    padding-left: 4%;
    font-size: 10px;
    font-weight: 900;}       
    
}

@media (max-width: 1300px){
 .numero-porcentaje {
    padding-top: 1%;
    margin: auto;
    width: 50%;
    font-size: 45px;
    font-weight: 600;
}
    
.hasta {
    position: absolute;
    font-size: 10px;
    padding-left: 26%;
    padding-bottom:1%;
    margin: auto;
    width: 50%;
}

.hasta-2{
position: absolute;    
font-size: 10px;    
padding-left:19%;    
margin: auto;
width: 50%;   
}    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 80px;
    padding-left: 10.5%;
    font-size: 16px;
    font-weight: 900;
    /* padding-bottom: 2%; */}    
    
.titulo-encabezado {
    position: absolute;
    width: 40%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;}
    
.numero-porcentaje{
margin: auto;
width: 50%;
font-size: 50px;
font-weight: 600;    
}

.credito {
    position: absolute;
    margin: auto;
    width: 80%;
    font-size: 11px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 2%;
}    
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 11px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;}

.promo-2{
    position: absolute;
  margin: auto;
  padding-left: 44%;
  width: 10%;
font-size: 50px;
font-weight: 600;
    text-align: center;}
 
  
}


@media (max-width: 1200px){
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 85px;
    padding-left: 10%;
    font-size: 16px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 280px;    
padding-left:4%;    
font-size: 10px;
font-weight: 900; }       
    
}


@media (max-width: 1150px){
    
.titulo-encabezado {
    position: absolute;
    width: 40%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 25px;
    font-weight: 900;
}
    
.numero-porcentaje{
margin: auto;
width: 50%;
font-size: 40px;
font-weight: 600;    
}

.negro-porciento{
margin: auto;
width: 50%;
font-size: 25px;
font-weight: 900; 
}

.promo-2{
    position: absolute;
  margin: auto;
    padding-top: 2%;
  padding-left: 45%;
  width: 10%;
font-size: 40px;
font-weight: 600;
    text-align: center;
}

.hasta {
    position: absolute;
    font-size: 9px;
    padding-left: 26%;
    padding-bottom:1%;
    margin: auto;
    width: 50%;
}

.hasta-2{
position: absolute;    
font-size: 9px;    
padding-left:19%;    
margin: auto;
width: 50%;   
}    
.credito {
    position: absolute;
    margin: auto;
    width: 80%;
    font-size: 10px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 3.5%;
}    
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 10px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;}
    

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 75px;
    padding-left: 11%;
    font-size: 14px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
    
    
}


@media (max-width: 1050px){
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 65px;
    padding-left: 10.5%;
    font-size: 13px;
    font-weight: 900;
    /* padding-bottom: 2%; */}    
    
 
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 242px;    
padding-left:4%;    
font-size: 10px;
font-weight: 900; }         

}


@media (max-width: 900px){
    
.titulo-encabezado {
    position: absolute;
    width: 40%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 25px;
    font-weight: 900;
}
    
.numero-porcentaje{
margin: auto;
width: 50%;
font-size: 35px;
font-weight: 600; 
padding-top: 2%;    
}

.negro-porciento{
margin: auto;
width: 50%;
font-size: 25px;
font-weight: 900; 
}

.promo-2{
    position: absolute;
  margin: auto;
    padding-top: 2%;
  padding-left: 45%;
  width: 10%;
font-size: 28px;
font-weight: 600;
    text-align: center;
}

.hasta {
    position: absolute;
    font-size: 9px;
    padding-left: 26%;
    padding-bottom:1%;
    margin: auto;
    width: 50%;
}

.hasta-2{
position: absolute;    
font-size: 9px;    
padding-left:19%;    
margin: auto;
width: 50%;   
}    
.credito {
    position: absolute;
    margin: auto;
    width: 80%;
    font-size: 9px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 3.5%;
}    
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 9px;
    font-weight: 900;
    margin-top: -1.5%;
    padding-left: 25.5%;}
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 65px;
    padding-left: 9%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */} 
    
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 205px;    
padding-left:4%;    
font-size: 9px;
font-weight: 900; }                 
    
}

@media (max-width: 780px){


.promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-left: 28%;
    padding-top: 10%;
}
.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 35%;
    padding-left: 50%;
    width: 10%;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
}

.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 15%;
    padding-top: 60%;
} 
 
.numero-porcentaje {
    margin: auto;
    width: 50%;
    font-size: 50px;
    font-weight: 600;
    padding-top: 2%;
}    
    
.hasta {
    position: absolute;
    font-size: 11px;
    padding-left: 20%;
    margin: auto;
    width: 50%;
}    

.hasta-2 {
    position: absolute;
    font-size: 11px;
    padding-left: 32%;
    margin: auto;
    width: 50%;
}
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 50%;
    font-size: 11px;
    font-weight: 900;
    padding-left: 18%;
    margin-top: -2%;
}    
 
    
.credito {
    position: absolute;
    margin: auto;
    width: 55%;
    font-size: 11px;
    font-weight: 900;
    padding-left: 30%;
    margin-top: -2%;
}    
    
.titulo-encabezado {
    position: absolute;
    width: 46%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 25px;
    font-weight: 900;
}    
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 65px;
    padding-left: 11.5%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */} 
    
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 400px;    
padding-left:4%;    
font-size: 8px;
font-weight: 900; }             
 }    

@media (max-width: 750px){

.credito {
    position: absolute;
    margin: auto;
    width: 62%;
    font-size: 11px;
    font-weight: 900;
    padding-left: 25%;
    margin-top: -2%;
}       
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 65px;
    padding-left: 11%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 370px;    
padding-left:3%;    
font-size: 8px;
font-weight: 900; }             
 }


@media (max-width: 700px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 60px;
    padding-left: 10%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat{
position: absolute;    
margin: auto;
width: 50%;
padding-top: 340px;    
padding-left:2%;    
font-size: 8px;
font-weight: 900; }             
 }    


@media (max-width: 650px){
    
    .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 55px;
    padding-left: 10%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 325px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}
}

@media (max-width: 625px){
    .descuentos {
    position: absolute;
    margin: auto;
    width: 70%;
    font-size: 11px;
    font-weight: 900;
    padding-left: 18%;
    margin-top: -2%;
}
 .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 310px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}
    
    .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 55px;
    padding-left: 8%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}

.hasta-2 {
    position: absolute;
    font-size: 11px;
    padding-left: 30%;
    margin: auto;
    width: 50%;
} 
    
.promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-left: 24%;
    padding-top: 10%;
}    
    
.credito {
    position: absolute;
    margin: auto;
    width: 65%;
    font-size: 11px;
    font-weight: 900;
    padding-left: 24%;
    margin-top: -2%;}
    
.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 12%;
    padding-top: 60%;}    
   
}

@media (max-width: 600px){
 .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 300px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}

.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 37%;
    padding-left: 50%;
    width: 10%;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
}
    
.hasta {
    position: absolute;
    font-size: 11px;
    padding-left: 21%;
    margin: auto;
    width: 50%;
}    
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 55px;
    padding-left: 7%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
   
}

@media (max-width: 575px){
 .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 285px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 52px;
    padding-left: 6.5%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
       
   
}

@media (max-width: 550px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 50px;
    padding-left: 5.5%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.titulo-encabezado {
    position: absolute;
    width: 47%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 24px;
    font-weight: 900;
} 

.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 40%;
    padding-left: 50%;
    width: 10%;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
} 
 
.hasta-2 {
    position: absolute;
    font-size: 11px;
    padding-left: 23%;
    margin: auto;
    width: 50%;
}
    
.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 18%;
    padding-top: 60%;
}    
 
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 47px;
    padding-left: 5.5%;
    font-size: 11.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}    
    
 .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 273px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}        
 }    


@media (max-width: 515px){
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 50px;
    padding-left: 5.5%;
    font-size: 12px;
    font-weight: 900;
    /* padding-bottom: 2%; */}
    
.titulo-encabezado {
    position: absolute;
    width: 47%;
    margin: auto;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 23.5px;
    font-weight: 900;
} 

.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 40%;
    padding-left: 50%;
    width: 10%;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
} 
 
.hasta-2 {
    position: absolute;
    font-size: 11px;
    padding-left: 23%;
    margin: auto;
    width: 50%;
}
    
.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 18%;
    padding-top: 60%;
}    
 
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 47px;
    padding-left: 5.5%;
    font-size: 11.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}    
    
 .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 264px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}        
 }    

@media (max-width: 500px){
            
          .zona-promo{
    display: flex;
    flex-wrap:wrap; 
  position: absolute;
  width: 45%;    
}
.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 36%;
    padding-left: 3%;
    width: 10%;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
}


    
.hasta {
    position: absolute;
    font-size: 9px;
    padding-left: 22%;
    margin: auto;
    width: 50%;
}   
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 70%;
    font-size: 9.5px;
    font-weight: 900;
    padding-left: 20%;
    margin-top: -2%;
}    
    
.promo-1{
margin: auto;
  width: 100%;   
}

.promo-2{
  margin: auto;
  width: 100%;  
} 
 .promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-left: 18%;
    padding-top: 10%;
}
    
.hasta {
    position: absolute;
    font-size: 9px;
    padding-left: 21%;
    margin: auto;
    width: 50%;
}

.hasta-2 {
    position: absolute;
    font-size: 9px;
    padding-left: 25%;
    margin: auto;
    width: 50%;
}    
    
.numero-porcentaje {
margin: auto;
width: 50%;
font-size: 40px;
font-weight: 600;
padding-top: 3%;
}

.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 9%;
    padding-top: 58%;
}
    
    .hasta-2 {
    position: absolute;
    font-size: 9px;
    padding-left: 33%;
    margin: auto;
    width: 50%;
}
    
.credito {
    position: absolute;
    margin: auto;
    width: 90%;
    font-size: 9.5px;
    font-weight: 900;
    padding-left: 18%;
    margin-top: -2%;
}    
    
               .titulo-encabezado{
            margin: auto;
            width: 85%;
            padding-top: 3%;
            text-align: center;
            font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
            font-size: 20px;
             padding-right: 38%       
        }
        
   .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 47px;
    padding-left: 6.5%;
    font-size: 10.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
} 

.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 249px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;
}    
    
        .descripcion-encabezado{
            margin: auto;
            padding-top: 5%;
            padding-bottom: 4%;
            width: 85%;
            text-align: center;
            font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
            font-size: 18px;
            color: darkgray;}
        }

        
@media (max-width: 485px){
      
   .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 47px;
    padding-left: 6.5%;
    font-size: 10.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
} 
    
.cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 240px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;}
} 
    
    @media (max-width: 475px){
        
   
        .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 230px;
    padding-left: 2%;
    font-size: 6.8px;
    font-weight: 900;
} 
    }
          
        
@media (max-width: 450px){
      
    .promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-left: 18%;
    padding-top: 8%;
}
 
.promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 9%;
    padding-top: 56%;
}    
    
.hasta-2 {
    position: absolute;
    font-size: 9px;
    padding-left: 30%;
    margin: auto;
    width: 50%;
}    
.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 34%;
    padding-left: 45%;
    width: 10%;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
}    
    
     .descripcion{
           font-size: 16px; }
    
 .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 42px;
    padding-left: 5%;
    font-size: 10.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
} 
    
    .cat {
    position: absolute;
    margin: auto;
    width: 50%;
    padding-top: 220px;
    padding-left: 2%;
    font-size: 6.6px;
    font-weight: 900;}
    
    .titulo-encabezado {
    margin: auto;
    width: 85%;
    padding-top: 3%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 18.5px;
    padding-right: 38%;
}
			
		}               
 
        
    @media (max-width: 430px){
        
    .cat {
    position: absolute;
    margin: auto;
    width: 70%;
    padding-top: 212px;
    padding-left: 2%;
    font-size: 6.4px;
    font-weight: 900;}
 
        .recuadro-categorias {
    width: 90%;
}
        
        .marcas-titulo {
    font-size: 2rem;
}
        
              .titulo-encabezado{
            margin: auto;
            width: 90%;
            padding-top: 3%;
            text-align: center;
            font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
            font-size: 18px;
            padding-right: 45%;      
        }
        
    
        
        .descripcion-encabezado{
            margin: auto;
            padding-top: 5%;
            padding-bottom: 4%;
            width: 90%;
            text-align: justify;
            font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
            font-size: 17px;
            color: darkgray;}
        
        .descripcion{
           font-size: 14px; }
        
        
    
        }     
                
        
@media (max-width: 415px){
  
.numero-porcentaje {
    margin: auto;
    width: 50%;
    font-size: 35px;
    font-weight: 600;
    padding-top: 3%;
}
    
.hasta {
    position: absolute;
    font-size: 8px;
    padding-left: 23%;
    margin: auto;
    width: 50%;
}

.hasta-2 {
    position: absolute;
    font-size: 8px;
    padding-left: 33%;
    margin: auto;
    width: 50%;
}    

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 40px;
    padding-left: 3%;
    font-size: 10.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */
} 
    
.descuentos {
    position: absolute;
    margin: auto;
    width: 70%;
    font-size: 8px;
    font-weight: 900;
    padding-left: 20%;
    margin-top: -2%;
}
 
.credito {
    position: absolute;
    margin: auto;
    width: 60%;
    font-size: 8px;
    font-weight: 900;
    padding-left: 26%;
    margin-top: -2%;
}
    
.negro-porciento {
    margin: auto;
    width: 50%;
    font-size: 20px;
    font-weight: 900;
}    
    
.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 40px;
    padding-left: 5%;
    font-size: 10.5px;
    font-weight: 900;
    /* padding-bottom: 2%; */} 
              
 }          

		@media (max-width: 410px){
            
 .titulo-encabezado {
    margin: auto;
    width: 92%;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 18px;
    padding-right: 45%;
}
            
 .vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 35px;
    padding-left: 4%;
    font-size: 10px;
    font-weight: 900;
    /* padding-bottom: 2%; */
} 
.cat {
    position: absolute;
    margin: auto;
    width: 70%;
    padding-top: 200px;
    padding-left: 2%;
    font-size: 6.2px;
    font-weight: 900;}
            
.credito {
    position: absolute;
    margin: auto;
    width: 90%;
    font-size: 7.5px;
    font-weight: 900;
    padding-left: 13%;
    margin-top: -2%;
}
.promo-1 {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-left: 18%;
    padding-top: 7%;
}
            
.promo-2 {
    position: absolute;
    margin: auto;
    padding-top: 33%;
    padding-left: 47%;
    width: 10%;
    font-size: 33px;
    font-weight: 600;
    text-align: center;
}
            
    .promo-3 {
    margin: auto;
    width: 100%;
    /* margin-right: 6px; */
    font-weight: 600;
    text-align: center;
    position: absolute;
    padding-left: 9%;
    padding-top: 52%;}

.cat {
    position: absolute;
    margin: auto;
    width: 60%;
    padding-top: 190px;
    padding-left: 8%;
    font-size: 8px;
    font-weight: 400;
    text-align: left;}            
                        
}
        
@media (max-width: 400px){
.cat {
    position: absolute;
    margin: auto;
    width: 60%;
    padding-top: 185px;
    padding-left: 5.5%;
    font-size: 8px;
    font-weight: 400;
    text-align: left;
}

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 34px;
    padding-left: 3%;
    font-size: 10px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}

.hasta-2 {
    position: absolute;
    font-size: 8px;
    padding-left: 32%;
    margin: auto;
    width: 50%;
}    
	
		}
		
		
@media (max-width: 385px){
 .titulo-encabezado {
    margin: auto;
    width: 92%;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 16px;
    padding-right: 46%;
} 
.cat {
    position: absolute;
    margin: auto;
    width: 60%;
    padding-top: 180px;
    padding-left: 5.5%;
    font-size: 8px;
    font-weight: 400;
    text-align: left;
}

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 34px;
    padding-left: 3%;
    font-size: 9px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}    
		}
        
 
@media (max-width: 370px){
 .titulo-encabezado {
    margin: auto;
    width: 92%;
    padding-top: 2%;
    text-align: center;
    font-family: "Muli", "Roboto", arial, helvetica, sans-serif;
    font-size: 16px;
    padding-right: 46%;
} 
.cat {
    position: absolute;
    margin: auto;
    width: 60%;
    padding-top: 180px;
    padding-left: 5.5%;
    font-size: 8px;
    font-weight: 400;
    text-align: left;
    display: none;
}

.vigencia {
    position: absolute;
    margin: auto;
    width: 100%;
    padding-top: 34px;
    padding-left: 3%;
    font-size: 9px;
    font-weight: 900;
    /* padding-bottom: 2%; */
}    
		}