/*======================================
            TRATAMENTOS
======================================*/

.tratamentos{

    padding:120px 0;
    background:#FFFFFF;

}

/*======================================
            TÍTULO
======================================*/

.section-title{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}

.section-title h2{

    font-size:3.4rem;
    line-height:1.15;

    margin-bottom:18px;

}

.section-title span{

    display:block;

    width:58px;
    height:2px;

    margin:22px auto 28px;

    background:var(--primary);

    border-radius:30px;

}

.section-title p{

    max-width:620px;

    margin:auto;

    font-size:1.08rem;

    color:var(--text-light);

}

/*======================================
              GRID
======================================*/

.tratamentos-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:55px;

}

/*======================================
             CARD
======================================*/

.tratamento-card{

    text-align:center;

    padding:10px 20px;

    transition:.35s ease;

}

.tratamento-card:hover{

    transform:translateY(-10px);

}

/*======================================
              ÍCONE
======================================*/

.tratamento-icon{

    width:100px;
    height:100px;

    margin:0 auto 32px;

    border-radius:50%;

    background:#F7F2EB;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.tratamento-icon img{

    width:48px;
    height:48px;

    object-fit:contain;

}

/*======================================
             TÍTULO CARD
======================================*/

.tratamento-card h3{

    font-size:2rem;

    margin-bottom:16px;

}

/*======================================
              TEXTO
======================================*/

.tratamento-card p{

    max-width:290px;

    margin:auto;

    font-size:1rem;

    line-height:1.9;

    color:var(--text-light);

}

/*======================================
           TABLET
======================================*/

@media (max-width:991px){

    .tratamentos-grid{

        grid-template-columns:repeat(2,1fr);

        gap:45px;

    }

}

/*======================================
            MOBILE
======================================*/

@media (max-width:768px){

    .tratamentos{

        padding:90px 0;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:2.4rem;

    }

    .tratamentos-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

    .tratamento-icon{

        width:90px;
        height:90px;

        margin-bottom:25px;

    }

    .tratamento-icon img{

        width:42px;
        height:42px;

    }

    .tratamento-card h3{

        font-size:1.8rem;

    }

    .tratamento-card p{

        max-width:320px;

    }

}