.title-planos{
    width: 95%;
    margin: auto;
    padding: 50px 0;
    font-size: 35px;
    font-family: 'Staatliches', cursive;
    text-align: center;
}
.area_plans{
    width: 100%;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 20px;
}
.item-plans{
    width: 250px;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.24);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.24);
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    background-color: #fff;
    margin: 10px;
    margin-bottom: 35px;
}
.title-plan{
    width: 90%;
    padding: 10px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #505050;
    margin-top: -30px;
    border-radius: 5px;
}
.on{
    background-color: #ffc107;
}
.title-plan p{
    margin: 0;
}
.time{
    font-size: 20px;
    font-family: 'Staatliches', cursive;
    color: #fff;
    letter-spacing: 1px;
}
.frequencia{
    margin-top: 15px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}
.content-vantagem{
    max-width: 95%;
    padding: 20px;
    font-size: 11px;
    text-transform: uppercase;
    color: rgb(131, 131, 131);
    margin-bottom: 5px;
}
.area-price{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 15px;
}
.area-price span{
    font-size: 20px;
    font-weight: 600;
    color: #3d3d3d;
}
.area-price .price{
    font-size: 40px;
    margin-bottom: -5px;
}
.desc{
    padding: 5px 10px;
    background-color: #7cbc77;
    color: #fff;
    font-size: 13px;
    border-radius: 5px;
    margin-bottom: -18px;
    margin-top: 10px;
}

.btn-adquirir{
    margin-bottom: 30px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #0d6bf5;
    border: 1px solid #0d6bf5;
    border-radius: 5px;
    text-decoration: none;
    transition: all linear .2s;
}
.btn-adquirir:hover{
    background-color: #fff;
    color: #0d6bf5; 
}

.area-grade{
    width: 90%;
    margin: auto;
    padding: 20px 0;
    color: #fff;
    font-family: sans-serif;
}

.grade{
    width: 100%;
    background:#0d0d0d;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.grade-head, .grade-row{
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
}

.grade-head{
    background:#c10016;
    font-weight: 700;
    text-align:center;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.col{
    padding:12px 10px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.grade-row:nth-child(odd){
    background:#131313;
}

.col.hora{
    background:#1a1a1a;
    color:#c10016;
    font-weight:600;
    border-right:1px solid rgba(255,255,255,0.08);
}

/* ✅ MOBILE: vira cartões */
@media(max-width: 760px){
    .grade{
        display:block;
        background:none;
        border:none;
    }

    .grade-head{
        display:none;
    }

    .grade-row{
        display:block;
        margin-bottom:14px;
        background:#111;
        border-radius:10px;
        border:1px solid rgba(255,255,255,0.12);
        overflow:hidden;
    }

    .col{
        display:flex;
        justify-content:center; /* centraliza */
        align-items:center;
        padding:12px 14px;
        border-bottom:1px solid rgba(255,255,255,0.10);
        position: relative;
    }

    /* Mantém o título do dia do lado esquerdo */
    .col::before{
        content: attr(data-label);
        position:absolute;
        left:14px;
        font-weight:600;
        color:#c10016;
        text-transform:uppercase;
        font-size:12px;
    }

    .col:last-child{
        border-bottom:none;
    }

    .col.hora{
        background:#c10016;
        color:#fff;
        font-size:17px;
        border:none;
        justify-content:center;
        font-weight:700;
    }

    

    /* Adiciona automaticamente o nome do dia */
    .grade-row .col:nth-child(2)::before{content:"SEG";}
    .grade-row .col:nth-child(3)::before{content:"TER";}
    .grade-row .col:nth-child(4)::before{content:"QUA";}
    .grade-row .col:nth-child(5)::before{content:"QUI";}
    .grade-row .col:nth-child(6)::before{content:"SEX";}
}