/*======================================
            GOOGLE FONTS
======================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/*======================================
            RESET
======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#FCFBFC;
    color:#444;
    overflow-x:hidden;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/*======================================
            VARIÁVEIS
======================================*/

:root{

    --primary:#D8A8AE;
    --secondary:#F5E9EC;
    --light:#FFFFFF;
    --background:#FCFBFC;
    --text:#4D4D4D;
    --title:#3A3131;

    --radius:22px;

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

    --transition:.4s ease;

}

/*======================================
            CONTAINER
======================================*/

.container{

    width:90%;
    max-width:1280px;
    margin:auto;

}

/*======================================
            HEADER
======================================*/

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

    padding:28px 0;

}

header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    width:165px;

}

nav ul{

    display:flex;

    gap:42px;

}

nav a{

    color:#5b5555;

    font-size:15px;

    position:relative;

    transition:.3s;

}




nav a:hover{

    color:var(--primary);

}

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

.btn,
.btn-header{

    background:var(--primary);

    color:#fff;

    padding:16px 36px;

    border-radius:999px;

    transition:.4s;

    font-size:15px;

    font-weight:500;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 12px 35px rgba(216,168,174,.35);

}

.btn:hover,
.btn-header:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 45px rgba(216,168,174,.45);

}

.btn-outline{

    border:1px solid #dcb3b8;

    color:var(--title);

    padding:16px 34px;

    border-radius:999px;

    transition:.4s;

}

.btn-outline:hover{

    background:var(--secondary);

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}



.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.hero-text span{

    color:var(--primary);

    letter-spacing:4px;

    font-size:13px;

    font-weight:600;

}

.hero-text h1{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    line-height:1;

    color:var(--title);

    margin:25px 0;

    font-weight:600;

}

.hero-text p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    max-width:540px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:520px;

    position:relative;

    z-index:2;

    animation:flutuar 6s ease infinite;

}

/* cartão flutuante */



/*======================================
            ANIMAÇÕES
======================================*/

@keyframes flutuar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*======================================
        TITULOS PADRÃO
======================================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

}

.section-title h2{

    font-family:'Cormorant Garamond';

    font-size:54px;

    color:var(--title);

    margin-top:15px;

}

/*======================================
        RESPONSIVO
======================================*/

@media(max-width:992px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-text{

order:2;

}

.hero-image{

order:1;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-text h1{

font-size:54px;

}

#menu{

display:block;

}

}
/*======================================
            SOBRE
======================================*/

.sobre{

    padding:140px 0;
    position:relative;

}



.sobre .container{

    display:grid;
    grid-template-columns:480px 1fr;
    gap:90px;
    align-items:center;

}

.sobre-image{

    position:relative;

}

.sobre-image img{

    width:100%;
    border-radius:35px;
    box-shadow:var(--shadow);

}

/* cartão decorativo */




.sobre-text span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

}

.sobre-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:var(--title);

    margin:18px 0 30px;

    line-height:1;

}

.sobre-text p{

    font-size:17px;

    line-height:2;

    color:#666;

    margin-bottom:22px;

}

.numeros{

    margin-top:55px;

    display:grid;

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

    gap:25px;

}

.numeros div{

    background:#fff;

    padding:35px;

    text-align:center;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:var(--transition);

}

.numeros div:hover{

    transform:translateY(-10px);

}

.numeros h3{

    font-family:'Cormorant Garamond';

    font-size:48px;

    color:var(--primary);

}

.numeros p{

    margin-top:8px;

    margin-bottom:0;

}

/*======================================
        PROCEDIMENTOS
======================================*/

.procedimentos{

    padding:140px 0;

    background:#FFF8F9;

}

.cards{

    display:grid;

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

    gap:35px;

}

.card{

    background:#fff;

    border-radius:35px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    transition:.45s;

}

.card:hover{

    transform:translateY(-12px);

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

}

.card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.card:hover img{

    transform:scale(1.08);

}

.card-content{

    padding:35px;

}

.card h3{

    font-family:'Cormorant Garamond';

    font-size:34px;

    color:var(--title);

    margin-bottom:18px;

}

.card p{

    color:#777;

    line-height:1.8;

    margin-bottom:28px;

}

.card a{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.card a:hover{

    letter-spacing:1px;

}

/*======================================
        DIFERENCIAIS
======================================*/

.diferenciais{

    padding:140px 0;

}

.diferenciais-grid{

    display:grid;

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

    gap:28px;

}

.diferencial-card{

    background:#fff;

    border-radius:30px;

    padding:45px 30px;

    text-align:center;

    transition:.45s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.diferencial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.08);

}

.icone{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:#F9EEF1;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    margin-bottom:28px;

}

.diferencial-card h3{

    font-family:'Cormorant Garamond';

    font-size:28px;

    color:var(--title);

    margin-bottom:15px;

}

.diferencial-card p{

    color:#777;

    line-height:1.8;

}

/*======================================
        RESULTADOS
======================================*/

.resultados{

    padding:140px 0;

    background:#FFF8F9;

}

.galeria{

    display:grid;

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

    gap:25px;

}

.foto{

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.foto img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:.7s;

}

.foto:hover img{

    transform:scale(1.08);

}

/*======================================
      RESPONSIVO
======================================*/

@media(max-width:992px){

.sobre .container{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

.diferenciais-grid{

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

}

.galeria{

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

}

}

@media(max-width:768px){

.sobre{

padding:90px 0;

}

.sobre-text h2{

font-size:42px;

}

.section-title h2{

font-size:42px;

}

.hero-text h1{

font-size:46px;

}

.numeros{

grid-template-columns:1fr;

}

.diferenciais-grid{

grid-template-columns:1fr;

}

.galeria{

grid-template-columns:1fr;

}

.foto img{

height:320px;

}

}
/*=====================================
        SCROLL REVEAL
=====================================*/

.hero-text,
.hero-image,
.sobre-image,
.sobre-text,
.card,
.diferencial-card,
.foto,
.depoimento,
.faq-item,
.cta,
.contato{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.active{

    opacity:1;

    transform:translateY(0);

}

/*======================================
            FAQ
======================================*/

.faq{

    padding:140px 0;

    background:#FFF8F9;

}


.faq-box{

    max-width:900px;

    margin:auto;

}


.faq-item{

    background:#fff;

    border-radius:25px;

    margin-bottom:25px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s;

}


.faq-item:hover{

    transform:translateY(-5px);

}



.faq-question{

    width:100%;

    padding:30px 35px;

    border:none;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

}



.faq-question span{

    font-family:'Poppins',sans-serif;

    font-size:17px;

    font-weight:500;

    color:var(--title);

}



.faq-question i{

    font-style:normal;

    font-size:28px;

    color:var(--primary);

    transition:.3s;

}



.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

}



.faq-answer p{

    padding:0 35px 30px;

    color:#777;

    line-height:1.8;

    font-size:15px;

}



/* FAQ ABERTO */

.faq-item.active .faq-answer{

    max-height:200px;

}


.faq-item.active .faq-question i{

    transform:rotate(45deg);

}



/* TÍTULO DO FAQ */

.faq .section-title p{

    margin-top:20px;

    color:#777;

    font-size:16px;

}



/* RESPONSIVO */

@media(max-width:768px){


.faq{

    padding:90px 0;

}


.faq-question{

    padding:22px;

}


.faq-question span{

    font-size:15px;

}


.faq-answer p{

    padding:0 22px 25px;

}


}


/*=====================================
        BOTÃO TOPO
=====================================*/

.back-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:22px;

    opacity:0;

    transform:translateY(30px);

    transition:.4s;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    z-index:999;

}

.back-top.show{

    opacity:1;

    transform:translateY(0);

}

.back-top:hover{

    transform:translateY(-5px);

}

/*=====================================
        MENU ATIVO
=====================================*/

nav a.active{

    color:var(--primary);

}



/*=====================================
        SCROLLBAR
=====================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#d9adb2;

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#fafafa;

}
/*======================================
        DEPOIMENTOS
======================================*/

.depoimentos{

    padding:140px 0;

}

.depoimentos-grid{

    display:grid;

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

    gap:35px;

}


.depoimento{

    background:#fff;

    padding:40px;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s;

}


.depoimento:hover{

    transform:translateY(-10px);

}


.depoimento p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}


.depoimento h3{

    margin-top:25px;

    font-family:'Cormorant Garamond';

    font-size:28px;

    color:var(--title);

}


.depoimento span{

    color:var(--primary);

    font-size:14px;

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

.footer {

    background: #D8A8AE;

    color: #fff;

    padding: 60px 20px 35px;

    margin-top: 60px;

    text-align:center;

    border-top-left-radius:40px;

    border-top-right-radius:40px;

}


/* CONTAINER */

.footer-container{

    max-width:1100px;

    margin:auto;

}



/* MARCA */

.footer-brand{

    margin-bottom:45px;

}


.footer-brand h3{

    font-family:'Poppins', sans-serif;

    font-size:28px;

    font-weight:600;

    margin-bottom:12px;

}


.footer-brand p{

    font-size:15px;

    opacity:.9;

    line-height:1.6;

}



/* INFORMAÇÕES DE CONTATO */

.footer-info{

    display:grid;

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

    gap:25px;

    margin-bottom:45px;

}



.footer-item{

    background:rgba(255,255,255,.15);

    padding:25px 15px;

    border-radius:22px;

    transition:.3s;

}



.footer-item:hover{

    transform:translateY(-5px);

}



.footer-item h4{

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

}



.footer-item p{

    font-size:14px;

    line-height:1.7;

    opacity:.95;

    margin:0;

}



/* ICONE (caso use futuramente) */

.footer-icon {

    width:38px;

    height:38px;

    background:#d30c37;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



/* PARTE INFERIOR */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.35);

    padding-top:30px;

}



.footer-bottom p{

    font-size:13px;

    line-height:1.8;

    margin-bottom:30px;

}



/* COPYRIGHT */

.copyright p{

    margin-bottom:30px;

    line-height:1.8;

    font-size:13px;

}



/* MP TECH */

.desenvolvido-por{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    text-decoration:none;

    color:#fff;

}



.logo-mp{

    width:50px;

    height:50px;

    object-fit:cover;

    border-radius:50%;

}



.desenvolvido-por span{

    font-size:14px;

    line-height:1.8;

}



.desenvolvido-por strong{

    color:#fff;

}



/* TEXTOS EXTRAS */

.footer-label{

    font-size:13px;

    opacity:.85;

}



.footer-text a{

    text-decoration:none;

    color:#ffd28f;

    font-weight:600;

}



/* RESPONSIVO */

@media(max-width:768px){


.footer{

    padding:50px 20px 30px;

    border-top-left-radius:30px;

    border-top-right-radius:30px;

}



.footer-info{

    grid-template-columns:1fr;

}



.footer-brand h3{

    font-size:24px;

}



.logo-mp{

    width:45px;

    height:45px;

}



}/* ================= RESPONSIVO MOBILE ================= */

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

@media(max-width:768px){


body{
    overflow-x:hidden;
}


.container{

    width:90%;

}


/* HEADER MOBILE */

header{

    padding:20px 0;

}


.logo img{

    width:130px;

}



/* HERO */

.hero{

    min-height:auto;

    padding:130px 0 80px;

}






.hero-content{

    grid-template-columns:1fr;

    gap:40px;

    text-align:center;

}


.hero-text h1{

    font-size:42px;

    line-height:1.1;

}


.hero-text p{

    font-size:15px;

}


.hero-buttons{

    justify-content:center;

}



.hero-image img{

    width:290px;

}





/* SOBRE */





/* TITULOS */

.section-title h2{

    font-size:38px;

}



/* FOOTER */

.footer-info{

    grid-template-columns:1fr;

}


}
/* MENU MOBILE */

.menu-mobile{

display:none;

background:none;

border:0;

font-size:30px;

color:var(--title);

cursor:pointer;

}


@media(max-width:768px){


.menu-mobile{

display:block;

}



nav ul{

flex-direction:column;

gap:25px;

text-align:center;

}


}
@media(max-width:768px){

.hero-content{

    display:flex;
    flex-direction:column;

}


.hero-text{

    width:100%;

}


.hero-text h1{

    font-size:42px;
    word-break:normal;

}


.hero-image{

    width:100%;

}


.hero-image img{

    width:280px;
    margin:auto;

}

}
/* BOTÃO MOBILE */

.menu-mobile{
    display:none;
    background:none;
    border:0;
    font-size:30px;
    cursor:pointer;
}


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

/*=====================================
        MENU MOBILE FINAL
=====================================*/

.menu-mobile{

    display:none;
    background:none;
    border:0;
    font-size:30px;
    color:var(--title);
    cursor:pointer;

}


@media(max-width:768px){


    header{

        z-index:9999;

    }


    header .container{

        position:relative;

        display:flex;

        align-items:center;

        justify-content:space-between;

    }



    .logo{

        z-index:10001;

    }



    .menu-mobile{

        display:block;

        position:relative;

        z-index:10001;

    }



    .btn-header{

        display:none;

    }



    #menu{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#fff;

        max-height:0;

        overflow:hidden;

        transition:.4s ease;

        box-shadow:0 20px 40px rgba(0,0,0,.1);

    }



    #menu.active{

        max-height:500px;

        padding:30px 0;

    }



    #menu ul{

        display:flex;

        flex-direction:column;

        gap:25px;

        text-align:center;

    }



}/* CORREÇÃO FINAL HEADER MOBILE */

@media(max-width:768px){

    header{
        height:80px;
        background:#fff;
        z-index:9999;
    }


    header .container{

        height:80px;
        display:flex;
        align-items:center;
        justify-content:space-between;

    }


    .logo img{

        width:130px;

    }


    .menu-mobile{

        display:block;
        position:relative;
        z-index:10002;

    }


    #menu{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#fff;

        z-index:9998;

        max-height:0;

        overflow:hidden;

        transition:.4s ease;

    }


    #menu.active{

        max-height:400px;

        padding:25px 0;

    }

}
/* AJUSTE LOGO MOBILE */

@media(max-width:768px){

    .logo img{

        width:100px;

    }

    header{

        padding:15px 0;

    }

}
.footer-item a{

    color:inherit;
    text-decoration:none;

}

.footer-item a:hover{

    color:#ffd28f;

}