@media(min-width:1300px){
    .article-title{
        font-size:1.2rem;
    }
}
@media(min-width:1520px){
    .filter-title{
        font-size:1.7rem;
    }
    .levels{
        gap:3rem;
    }
   #aa, #bb, #cc{
        font-size:2.5rem;
        width:3.5rem;
        height:3.5rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        width:2.8rem;
        height:2.8rem;
        bottom:-3rem;
    }
    .topic-row{
        gap:5px;
    }
    .topic-btn, .skill-btn{
        width:4.5rem;
        height:4.5rem;
    }
    .topic-svg{
        width:4rem;
        height:4rem;
    }
    .reading-row{
        gap:2rem;
    }
    .reading-btn{
        font-size:2rem;
        width:4.5rem;
        height:4.5rem;
    }
    .article-img{
        height:15rem;
    }
    .article-title {
        padding-top:1.5rem;
        font-size: 1.3rem;
    }
    .article-categ{
        padding-top:0.5rem;
        padding-bottom:1.5rem;
    }
    .article-categ-mini{
        width:3rem;
        height:3rem;
        font-size:1.4rem;
    }
    .article-categ-mini svg{
        width:40px;
        height:40px;
    }
    .article_menu{
        padding-bottom:3rem;
    }
}
@media(min-width:1700px){
    .filter-title{
        font-size:1.7rem;
    }
    #restart{
        width:5rem;
        height:5rem;
        font-size:1.6rem;
        top:-2.5rem;
    }
    .left-menu{
        width:33%;
    }
    .levels{
        gap:3rem;
    }
   #aa, #bb, #cc{
        font-size:2.5rem;
        width:3.5rem;
        height:3.5rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        width:2.8rem;
        height:2.8rem;
        bottom:-3rem;
    }
    .topic-row{
        gap:5px;
    }
    .topic-btn, .skill-btn{
        width:4.8rem;
        height:4.8rem;
    }
    .skill-row{
        gap:1.5rem;
        row-gap:1rem;
    }
    .topic-svg{
        width:4rem;
        height:4rem;
    }
    .reading-row{
        gap:2rem;
    }
    .reading-btn{
        font-size:2rem;
        width:4.5rem;
        height:4.5rem;
    }
    .article-img{
        height:18rem;
    }
    .article-title {
        padding-top:1.7rem;
        font-size: 1.6rem;
    }
    .article-categ{
        padding-top:0.5rem;
        padding-bottom:2rem;
    }
    .article-categ-mini{
        width:3.5rem;
        height:3.5rem;
        font-size:1.5rem;
    }
    .article-categ-mini svg{
        width:50px;
        height:50px;
    }
    .article_menu{
        padding-bottom:3rem;
    }
}
@media(min-width:1820px){
    .filter-title{
        font-size:2rem;
    }
    #restart{
        width:5.3rem;
        height:5.3rem;
        font-size:1.7rem;
        top:-3rem;
    }
    .left-menu{
        width:33%;
    }
    .levels{
        gap:5rem;
    }
   #aa, #bb, #cc{
        font-size:2.8rem;
        width:4rem;
        height:4rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        font-size:1.5rem;
        width:3rem;
        height:3rem;
        bottom:-3.3rem;
    }
    .level-b button{
        left:-1.5rem;
    }
    .level-b-2 button{
        left:2.5rem;
    }
    .topic-row{
        gap:10px;
    }
    .topic-btn, .skill-btn{
        width:5rem;
        height:5rem;
    }
    .skill-btn{
        width:5.5rem;
        height:5.5rem;
    }
    .topic-svg{
        width:4.8rem;
        height:4.8rem;
    }
    .skill-svg{
        width:3.8rem;
        height:3.8rem;
    }
    .reading-row{
        gap:2rem;
    }
    .reading-btn{
        font-size:2.2rem;
        width:5rem;
        height:5rem;
    }
    .left-menu{
        padding-bottom:3rem;
    }
    .article-img{
        height:20rem;
    }
    .article-title {
        padding-top:1.7rem;
        font-size: 1.8rem;
    }
    .article-categ{
        padding-top:0.5rem;
        padding-bottom:2rem;
    }
    .article-categ-mini{
        width:4rem;
        height:4rem;
        font-size:1.7rem;
    }
    .article-categ-mini svg{
        width:60px;
        height:60px;
    }
    .article_menu{
        padding-bottom:3rem;
    }
}
@media(max-width:1150px){
/*El left menu mas pequeño*/
.left-menu{
    width:30%;
    margin-bottom:5rem;
}
.article_menu{
    gap:1rem;
}
 .filter-title{
        font-size:1.3rem;
    }
    .levels{
        gap:2.7rem;
    }
   #aa, #bb, #cc{
        font-size:1.5rem;
        width:3rem;
        height:3rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        width:2.2rem;
        height:2.2rem;
        bottom:-2.3rem;
    }
    .level-b-2 button{
        left:2rem;
    }
    .topic-row{
        gap:5px;
    }
    .topic-btn, .skill-btn{
        width:3.5rem;
        height:3.5rem;
    }
    .skill-row{
        gap:0.75rem;
        row-gap:0.5rem;
        margin-bottom:2.5rem;
    }
    .topic-svg{
        width:3rem;
        height:3rem;
    }
    .skill-svg{
        width:2.5rem;
        height:2.5rem;
    }
    .reading-row{
        gap:1rem;
        padding-bottom:0;
        margin-bottom:0;
    }
    .reading-btn{
        font-size:1.6rem;
        width:3.5rem;
        height:3.5rem;
    }
    #restart{
        width:3.7rem;
        height:3.7rem;
        font-size:1.1rem;
        top:-1rem;
    }
    .article-img{
        height:11rem;
    }
    .article-title{
        font-size:0.9rem;
    }
    .article-categ-mini{
        width:2rem;
        height:2rem;
        font-size:0.8rem;
    }
    .article-categ-mini svg{
        width:20px;
        height:20px;
    }
}
@media(max-width:1024px){
    .levels{
        gap:2.5rem;
    }
   #aa, #bb, #cc{
        font-size:1.3rem;
        width:2.5rem;
        height:2.5rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        font-size:1rem;
        width:2rem;
        height:2rem;
        bottom:-2rem;
    }
    .level-b-2 button{
        left:1.5rem;
    }
    .content{
        height:38rem;
    }
    .left-menu{
        width:28%;
        margin-bottom:5rem;
    }
    .article_menu{
        gap:1rem;
    }
    .filter-title{
        font-size:1.1rem;
    }
    .topic-row{
        gap:5px;
    }
    .levels{
        margin-bottom:4rem;
    }
    .topics{
        margin-bottom:2rem;
    }
    .topic-btn, .skill-btn{
        width:3rem;
        height:3rem;
    }
    .skill-row{
        margin-bottom:1.5rem;
    }
    .topic-svg{
        width:2.2rem;
        height:2.2rem;
    }
    .skill-svg{
        width:2rem;
        height:2rem;
    }
    .reading-row{
        gap:1rem;
        padding-bottom:0;
        margin-bottom:0;
    }
    .reading-btn{
        font-size:1.4rem;
        width:3rem;
        height:3rem;
    }
    #restart{
        width:3.2rem;
        height:3.2rem;
        font-size:0.9rem;
        top:-1.5rem;
    }
    .article-img{
        height:10rem;
    }
    .article-title{
        font-size:0.85rem;
    }
    .article-categ-mini{
        width:1.8rem;
        height:1.8rem;
        font-size:0.8rem;
    }
    .article-categ-mini svg{
        width:18px;
        height:18px;
    }
}
@media(max-width:915px){
    #health svg {
        margin-top: 0;
    }
     .levels{
        gap:2rem;
    }
   #aa, #bb, #cc{
        font-size:1rem;
        width:2rem;
        height:2rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        font-size:0.8rem;
        width:1.5rem;
        height:1.5rem;
        bottom:-1.5rem;
    }
     .level-b button{
        left:-0.6rem;
     }
    .level-b-2 button{
        left:1.2rem;
    }
    .content{
        height:30rem;
    }
    .left-menu{
        width:28%;
        margin-bottom:3rem;
    }
    .article_menu{
        gap:0.8rem;
        padding-top:1rem;
        padding-left:1rem;
    }
    .filter-title{
        font-size:1rem;
        margin-bottom:1rem;
    }
    .topic-row{
        gap:5px;
    }
    .levels{
        margin-bottom:3rem;
    }
    .topics{
        margin-bottom:1.5rem;
        gap:1rem;
    }
    .topic-btn, .skill-btn{
        width:2.7rem;
        height:2.7rem;
    }
    .skill-row{
        gap:0.4rem;
    }
    .topic-svg{
        width:2rem;
        height:2rem;
    }
    .skill-svg{
        width:1.8rem;
        height:1.8rem;
    }
    .reading-row{
        gap:1rem;
        padding-bottom:0;
        margin-bottom:0;
    }
    .reading-btn{
        font-size:1.2rem;
        width:2.6rem;
        height:2.6rem;
    }
    #restart{
        width:3rem;
        height:3rem;
        font-size:0.9rem;
        top:-1.5rem;
    }
    .article-img{
        height:8rem;
    }
    .article-title{
        font-size:0.75rem;
    }
    .article-categ-mini{
        width:1.6rem;
        height:1.6rem;
        font-size:0.7rem;
    }
    .article-categ-mini svg{
        width:16px;
        height:16px;
    }
}
@media(max-width:825px){
#culture svg, #education svg {
  margin-top: -1px;
}
}
@media(max-width:870px){
    .topics{
        margin-bottom:1.5rem;
        gap:0.5rem;
    }
    .topic-btn{
        width:2.2rem;
        height:2.2rem;
    }
    .topic-svg{
        width:1.6rem;
        height:1.6rem;
    }
}
@media(max-width:768px){
    .levels{
        gap:1.2rem;
    }
   #aa, #bb, #cc{
        font-size:0.9rem;
        width:1.8rem;
        height:1.8rem;
        border-radius: 50%;
    }
    .level-b button, .level-b-2 button{
        font-size:0.7rem;
        width:1.3rem;
        height:1.3rem;
        bottom:-1.3rem;
    }
     .level-b button{
        left:-0.5rem;
     }
    .level-b-2 button{
        left:1rem;
    }
    .content{
        height:22rem;
        padding-top:0;
    }
    .left-menu{
        margin-top:1rem;
        width:28%;
        margin-bottom:3rem;
        padding:1rem;
    }
    .filter-title{
        font-size:0.8rem;
        padding-bottom:0.25rem;
        margin-bottom:0.6rem;
    }
    .topic-row{
        gap:3px;
    }
    .levels{
        margin-bottom:3rem;
    }
    .topics{
        margin-bottom:1.5rem;
        gap:0.5rem;
    }
    .topic-btn, .skill-btn{
        width:2rem;
        height:2rem;
    }
    .topic-svg{
        width:1.4rem;
        height:1.4rem;
    }
    .skill-svg{
        width:1.2rem;
        height:1.2rem;
    }
    .reading-row{
        gap:0.6rem;
        padding-bottom:0;
        margin-bottom:0;
    }
    .reading-btn{
        font-size:1rem;
        width:2.3rem;
        height:2.3rem;
    }
    #restart{
        width:2.4rem;
        height:2.4rem;
        font-size:0.7rem;
        right:-1rem;
        top:-1.3rem;
    }
    .article-img{
        height:6rem;
    }
    .article-title{
        padding-top:0.5rem;
        font-size:0.6rem;
    }
    .article-categ-mini{
        width:1.4rem;
        height:1.4rem;
        font-size:0.6rem;
    }
    .article-categ-mini svg{
        width:14px;
        height:14px;
    }
    #education svg{
        margin-top:-2px;
    }
}
@media(max-width:620px){
    .levels{
        gap:0.8rem;
    }
   #aa, #bb, #cc{
        font-size:0.8rem;
        width:1.5rem;
        height:1.5rem;
    }
    .level-b button, .level-b-2 button{
        font-size:0.5rem;
        width:1rem;
        height:1rem;
        bottom:-1rem;
    }
     .level-b button{
        left:-0.3rem;
     }
    .level-b-2 button{
        left:0.8rem;
    }
    .content{
        height:17rem;
        padding-top:0;
        margin-top:1rem;
        padding-left:3px;
    }
    .left-menu{
        margin-top:0.7rem;
        width:25%;
        margin-bottom:3rem;
        padding:1rem;
        padding-left:0.3rem;
        padding-right:0.3rem;
    }
    .filter-title{
        font-size:0.65rem;
        padding-bottom:0.2rem;
        margin-bottom:0.4rem;
    }
    .topic-row{
        gap:3px;
    }
    .levels{
        margin-bottom:2rem;
    }
    .topics{
        margin-bottom:1.3rem;
        gap:0.3rem;
    }
    .topic-btn{
        width:1.45rem;
        height:1.45rem;
    }
    .skill-btn{
        width:1.6rem;
        height:1.6rem;
    }
    .skill-row{
        margin-bottom:1rem;
    }
    .topic-svg{
        width:1rem;
        height:1rem;
    }
    .skill-svg{
        width:1rem;
        height:1rem;
    }
    #health svg {
        margin-top: 0;
    }
    .reading-row{
        gap:0.4rem;
    }
    .reading-btn{
        font-size:0.8rem;
        width:1.8rem;
        height:1.8rem;
    }
    #restart{
        width:1.8rem;
        height:1.8rem;
        font-size:0.5rem;
        right:-0.5rem;
        top:-0.7rem;
    }
    .article-img{
        height:5rem;
    }
    .article-title{
        padding-top:0.5rem;
        font-size:0.5rem;
    }
    .article-categ-mini{
        width:1.2rem;
        height:1.2rem;
        font-size:0.5rem;
    }
    .article-categ{
        padding-bottom:0.5rem;
    }
    .article-categ-mini svg{
        width:12px;
        height:12px;
    }
    #education svg{
        margin-top:-2px;
    }
    .article_menu{
        padding-bottom:0.5rem;
    }
}
@media(max-width:500px){
    .article_menu{
        padding-top:2rem;
        flex-direction: column;
        gap:1rem;
        padding-bottom:2rem;
    }
    .left-menu{
        margin: 0 auto;
        padding:1rem;
        width:auto;
        height:auto;
        display:flex;
        flex-direction: column;
        gap:0.5rem;
    }
    .filter-flex{
        margin: 0 auto;
        display:flex;
        gap:2rem;
    }
    .filter-title{
        font-size:0.85rem;
        margin:0 auto;
        margin-bottom:0.5rem;
        text-align: center;
        width:fit-content;
    }
    .levels{
        gap:2rem;
    }
    #aa, #bb, #cc {
        font-size: 1.2rem;
        width: 2.2rem;
        height: 2.2rem;
    }
    .level-b button, .level-b-2 button {
        font-size: 0.8rem;
        width: 1.7rem;
        height: 1.7rem;
        top: 2.2rem;
    }
    .level-b button {
       left: -0.7rem;
    }
    .level-b-2 button {
        left: 1.3rem;
    }
    .topics{
        margin-bottom:0;
    }
    .skill-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        row-gap: 0.1rem;
  /* El ancho de 3 botones (4.5rem * 3) + 2 gaps (2rem * 2) = 17.5rem */
  /* Le damos un max-width que permita exactamente 3 elementos por línea */
        max-width:10rem;
        margin-inline: auto;
    }
    .topic-btn {
        width: 2.3rem;
        height: 2.3rem;
    }
    .skill-btn{
        width:2.6rem;
        height:2.6rem;
    }
    .topic-svg{
        width:1.7rem;
        height:1.7rem;
    }
    .skill-svg{
        width:1.6rem;
        height:1.6rem;
    }
    .reading-btn {
        font-size: 1rem;
        width: 2.3rem;
        height: 2.3rem;
    }
    #restart{
        width:2.5rem;
        height:2.5rem;
        font-size:0.7rem;
        top:-1rem;
    }
    .article-img {
        height: 7rem;
    }
    .article-title {
        padding-top: 0.5rem;
        font-size: 0.6rem;
    }
    .article-categ-mini {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.7rem;
    }
    .article-categ-mini svg {
        width: 18px;
        height: 18px;
    }
    .article-categ{
        padding-bottom:1rem;
    }
}
@media(max-width:425px){
    .article_menu{
        padding-top:1.5rem;
        flex-direction: column;
        gap:1rem;
    }
    .left-menu{
        padding:0.7rem;
        gap:0.5rem;
    }
    .filter-flex{
        gap:2rem;
    }
    .filter-title{
        font-size:0.7rem;
        margin-bottom:0.5rem;
    }
    .levels{
        gap:2rem;
    }
    #aa, #bb, #cc {
        font-size: 1rem;
        width: 2rem;
        height: 2rem;
    }
    .level-b button, .level-b-2 button {
        font-size: 0.7rem;
        width: 1.5rem;
        height: 1.5rem;
        top: 2rem;
    }
    .level-b button {
       left: -0.6rem;
    }
    .level-b-2 button {
        left: 1.2rem;
    }
    .topics{
        margin-bottom:0;
    }
    .topic-btn {
        width: 2rem;
        height: 2rem;
    }
    .topic-svg{
        width:1.2rem;
        height:1.2rem;
    }
    .skill-row {
        gap: 0.3rem;
        row-gap: 0.1rem;
        max-width:8rem;
        margin-inline: auto;
    }
    .skill-btn{
        width:2.1rem;
        height:2.1rem;
    }
    .skill-svg{
        width:1.2rem;
        height:1.2rem;
    }
    .reading-btn {
        font-size: 0.8rem;
        width: 2rem;
        height: 2rem;
    }
    #restart{
        width:2.2rem;
        height:2.2rem;
        font-size:0.6rem;
        top:-1rem;
    }
    .article-img {
        height: 6rem;
    }
    .article-title {
        font-size: 0.5rem;
    }
    .article-categ-mini {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
    }
    .article-categ-mini svg {
        width: 15px;
        height: 15px;
    }
    .article-categ{
        padding-bottom:0.6rem;
    }
}
@media(max-width:350px){
    .article_menu{
        padding-top:1.5rem;
        flex-direction: column;
        gap:1rem;
    }
    .left-menu{
        padding:0.7rem;
        gap:0;
    }
    .filter-flex{
        gap:1.5rem;
    }
    .filter-title{
        font-size:0.6rem;
        margin-bottom:0.5rem;
    }
    .levels{
        gap:1.7rem;
    }
    #aa, #bb, #cc {
        font-size: 0.8rem;
        width: 1.7rem;
        height: 1.7rem;
    }
    .level-b button, .level-b-2 button {
        font-size: 0.6rem;
        width: 1.3rem;
        height: 1.3rem;
        top: 1.7rem;
    }
    .level-b button {
       left: -0.5rem;
    }
    .level-b-2 button {
        left: 1rem;
    }
    .topic-btn {
        width: 1.8rem;
        height: 1.8rem;
    }
    .skill-row {
        gap: 0.3rem;
        row-gap: 0.1rem;
        max-width:7rem;
        margin-inline: auto;
    }
    .skill-btn{
        width:1.9rem;
        height:1.9rem;
    }
    .skill-svg{
        width:1rem;
        height:1rem;
    }
    .topic-svg{
        width:1.2rem;
        height:1.2rem;
    }
    .reading-btn {
        font-size: 0.7rem;
        width: 1.8rem;
        height: 1.8rem;
    }
    #restart{
        width:1.8rem;
        height:1.8rem;
        font-size:0.5rem;
        top:-0.6rem;
    }
    .article-img {
        height: 5rem;
    }
    .article-title {
        font-size: 0.4rem;
    }
    .article-categ-mini {
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0.5rem;
    }
    .article-categ-mini svg {
        width: 13px;
        height: 13px;
    }
    .article-categ{
        padding-bottom:0.6rem;
    }
}