.category-title-sec{
    width: 100%;
    background-color:#e5f5f5;
    display: flex;
    justify-content: center;
    padding: 80px 0px;

}
.category-title-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
h1{
    color:var(--main-color);
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
}
p{
    margin: 0px;
}
.category-description{
    font-size:17px;
    color:var(--tpm-gray);
    max-width: 700px;
    text-align: center;
}
.category-breadcrumb{
    text-transform: uppercase;
    color:var(--red-point);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
    
}

.category-main{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 100px 0px;
}
.category-main-container{
    max-width: 1250px;
    width: 100%;
    display: flex;
    gap:50px;
    padding: 0px 15px;
}
.category-sidebar{
    width: 100%;
    max-width: 375px;
}


.categories-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:25px;
}
.categories-menu-title{
    font-size: 36px;
    font-weight: 700;
    color: var(--main-color);
    align-self: flex-start;
}
.category-btn{
    border:1px solid #C1C1C3;
    padding: 24px;
    width: 100%;
    display: flex;
    gap:20px;
    justify-content: flex-start;
    align-items: center;
}
.category-btn:hover{
    color:#fff;
    background-color: var(--red-point);
    .category-name{
        color:#fff;
    }
}
.category-icon{
    background-color: #e5f5f5;
    padding: 7px;
    border-radius: 5px;
}
.category-name{
    color:var(--main-color);
    font-size: 28px;
    font-weight: 700;
    text-transform: capitalize;

}
.tags-menu{
    margin-top: 40px;
}
.tags-menu-content{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    
    
}
.tag {
    
    color: var(--tpm-gray);
    border: 1px solid var(--tpm-gray);
    padding: 6px 12px;
    border-radius: 20px; /* Para esquinas redondeadas tipo píldora */
    white-space: nowrap; /* Evita que el texto del tag se rompa en varias líneas */
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tag:hover {
    background-color: #d0d0d0;
}
.post-list-img{
	max-width:300px;
}
.main-post-img{
	max-width:490px;
}
@media (max-width:767px) {
    .category-main-container{
        flex-direction: column;
        gap: 50px;
    }
    .category-title-cont{
        padding: 0px 20px;
    }
    
}