/*=========================================
TABLETS E CELULARES (ATÉ 991px)
=========================================*/
@media (max-width: 991px) {

    /*==============================
    GERAL
    ==============================*/

    html,
    body{
        overflow-x:hidden;
    }

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .section-padding{
        padding:60px 0;
    }

    /*==============================
    TIPOGRAFIA
    ==============================*/

    h1{
        font-size:clamp(2.3rem,8vw,3.5rem);
        line-height:1.15;
    }

    h2{
        font-size:clamp(2rem,6vw,2.6rem);
        line-height:1.2;
        margin-bottom:20px;
    }

    h3{
        font-size:1.7rem;
    }

    h4{
        font-size:1.35rem;
    }

    p{
        font-size:1rem;
        line-height:1.75;
    }

    .section-tag,
    .hero-subtitle{
        font-size:.78rem;
        letter-spacing:2px;
    }

    /*==============================
    NAVBAR
    ==============================*/

    .navbar{
        padding:15px 0;
    }

    .navbar-brand{
        font-size:1.45rem;
        letter-spacing:1px;
    }

    .navbar-collapse{

        background:#fff;

        margin-top:15px;

        padding:20px;

        border-radius:18px;

        box-shadow:0 20px 45px rgba(0,0,0,.08);

    }

    .nav-link{

        margin-left:0;

        padding:14px 0;

        border-bottom:1px solid rgba(0,0,0,.06);

    }

    .nav-item:last-child .nav-link{

        border-bottom:none;

    }

    /*==============================
    HERO
    ==============================*/

    .hero{

        min-height:auto;

        padding:110px 0 60px;

        text-align:center;

        overflow:hidden;

    }

    .hero::before{

        width:300px;

        height:300px;

        top:-80px;

        right:-120px;

    }

    .hero h1{

        max-width:100%;

        margin:auto;

        margin-bottom:25px;

    }

    .hero p{

        max-width:95%;

        margin:0 auto 35px;

    }

    .hero-buttons{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons .btn-primary-custom,
    .hero-buttons .btn-outline-custom{

        width:100%;

        justify-content:center;

    }

    .hero-image{

        margin-top:40px;

        padding:0;

    }

    .hero-image img{

        border-radius:24px;

    }

    /*==============================
    BOTÕES
    ==============================*/

    .btn-primary-custom,
    .btn-outline-custom{

        padding:16px 28px;

        font-size:.95rem;

    }

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

    .service-card{

        border-radius:24px;

    }

    .service-card img{

        height:210px;

    }

    .service-content{

        padding:24px;

    }

    .service-content h4{

        margin-bottom:15px;

    }

    .service-content p{

        margin-bottom:18px;

    }

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

    .feature-card{

        padding:30px 24px;

        border-radius:24px;

    }

    .feature-card h5{

        margin-top:18px;

    }

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

    .package-card{

        padding:30px 24px;

        border-radius:24px;

    }

    .package-card h3{

        margin:18px 0;

    }

    .package-note{

        margin-top:20px;

    }

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

    .procedure-card{

        border-radius:24px;

    }

    .procedure-image img{

        height:210px;

    }

    .procedure-body{

        padding:24px;

    }

    .procedure-body h3{

        margin:12px 0;

    }

    .procedure-price{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        margin:22px 0;

        padding:14px 0;

    }

    .procedure-price strong{

        font-size:1.25rem;

    }

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

    .small-procedure-card{

        padding:24px;

        border-radius:22px;

    }

    .small-price{

        font-size:1.6rem;

        margin-top:18px;

    }

}
/*=========================================
RESPONSIVE.CSS
PARTE 2
=========================================*/

/*=========================================
TABLETS E CELULARES (ATÉ 991px)
=========================================*/
@media (max-width: 991px) {

    /*==============================
    MENU EDITORIAL
    ==============================*/

    .editorial-menu-container{
        padding:50px 0;
    }

    .sticky-image-wrapper{
        position:relative;
        top:auto;
        margin-bottom:40px;
    }

    .sticky-image-wrapper img{
        height:320px;
        border-radius:20px;
        object-fit:cover;
    }

    .menu-item{
        padding:30px 0;
    }

    .menu-header{
        margin-bottom:20px;
    }

    .menu-title{
        font-size:1.8rem;
        line-height:1.2;
    }

    .menu-subtitle{
        font-size:.9rem;
    }

    .menu-desc{
        font-size:.95rem;
        line-height:1.7;
        margin-top:12px;
    }

    /*==============================
    LINHAS DE PREÇO
    ==============================*/

    .price-line{
        flex-wrap:wrap;
        gap:6px;
        margin-bottom:18px;
    }

    .price-dots{
        display:none;
    }

    .price-name{
        width:100%;
        font-size:1rem;
    }

    .price-value{
        width:100%;
        margin-left:26px;
        font-size:1.1rem;
    }

    .extra-price{
        font-size:.9rem;
        line-height:1.6;
    }

    .btn-link-custom{
        margin-top:18px;
        font-size:.8rem;
    }

    /*==============================
    BODY PIERCING
    ==============================*/

    .piercing-info-section{
        padding:60px 0;
    }

    .biosseguranca-item{
        gap:12px;
        margin-bottom:18px;
    }

    .biosseguranca-item i{
        margin-top:4px;
        flex-shrink:0;
    }

    /*==============================
    SPA LIST
    ==============================*/

    .spa-list{
        margin:25px 0;
    }

    .spa-list li{
        margin-bottom:12px;
        font-size:1rem;
    }

    /*==============================
    CTA
    ==============================*/

    .cta-section{
        padding:70px 20px;
    }

    .cta-section h2{
        margin-bottom:20px;
    }

    .cta-section p{
        margin-bottom:30px;
    }

    /*==============================
    FOOTER
    ==============================*/

    footer{
        padding:55px 0 25px;
        text-align:center;
    }

    footer .row>div{
        margin-bottom:35px;
    }

    footer h4,
    footer h5{
        margin-bottom:15px;
    }

    footer p{
        margin-bottom:10px;
    }

    /*==============================
    WHATSAPP
    ==============================*/

    .whatsapp-button{
        width:56px;
        height:56px;
        right:18px;
        bottom:18px;
        font-size:25px;
    }

    /*==============================
    IMAGENS
    ==============================*/

    img{
        max-width:100%;
        height:auto;
    }

}


@media (max-width:576px){

    .container{
        padding-left:16px;
        padding-right:16px;
    }

    h1{
        font-size:2.1rem;
    }

    h2{
        font-size:1.7rem;
    }

    h3{
        font-size:1.45rem;
    }

    h4{
        font-size:1.2rem;
    }

    p{
        font-size:.96rem;
    }

    .section-padding{
        padding:50px 0;
    }

    /* Hero */

    .hero{
        padding:100px 0 50px;
    }

    .hero::before{
        width:220px;
        height:220px;
        top:-60px;
        right:-90px;
    }

    .hero-image{
        margin-top:30px;
    }

    .hero-image img{
        border-radius:18px;
    }

    /* Botões */

    .btn-primary-custom,
    .btn-outline-custom{
        width:100%;
        padding:15px 20px;
        font-size:.92rem;
    }

    /* Cards */

    .service-card img,
    .procedure-image img{
        height:190px;
    }

    .service-content,
    .procedure-body,
    .feature-card,
    .package-card,
    .small-procedure-card{
        padding:20px;
    }

    .procedure-price strong{
        font-size:1.15rem;
    }

    .small-price{
        font-size:1.45rem;
    }

    /* Editorial */

    .sticky-image-wrapper img{
        height:260px;
    }

    .menu-title{
        font-size:1.6rem;
    }

    .price-value{
        margin-left:0;
    }

    /* CTA */

    .cta-section{
        padding:60px 16px;
    }

    /* Footer */

    footer{
        padding:45px 0 20px;
    }

    /* WhatsApp */

    .whatsapp-button{
        width:52px;
        height:52px;
        right:15px;
        bottom:15px;
        font-size:22px;
    }

}

/*=========================================
DESKTOP (A PARTIR DE 992px)
=========================================*/
@media (min-width:992px){

    .dropdown:hover .dropdown-menu{
        display:block;
        margin-top:0;
        animation:fadeDropdown .25s ease;
    }

}