/*==================================================
        PAULA KATIENE SOARES CARVALHO
        ESCRITÓRIO DIGITAL DE ADVOCACIA

        STYLE.CSS - P1
==================================================*/


/*==================================================
                    FONTES
==================================================*/

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



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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

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

    background:#ffffff;

    color:#334155;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



button,
input,
textarea,
select{

    font-family:inherit;

}




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


:root{


    --navy:#0F172A;


    --navy-2:#111827;


    --gold:#C8A75D;


    --gold-light:#D7B978;


    --white:#ffffff;


    --gray:#64748B;


    --light:#F8FAFC;


    --border:#E2E8F0;


    --shadow:

    0 25px 60px rgba(15,23,42,.12);


    --transition:.35s;


}





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


html{

scrollbar-width:thin;

scrollbar-color:

var(--gold)

var(--navy);

}



::-webkit-scrollbar{

width:12px;

}



::-webkit-scrollbar-track{

background:var(--navy);

}



::-webkit-scrollbar-thumb{


background:

linear-gradient(

180deg,

#D7B978,

#A8863F

);


border-radius:50px;


border:3px solid var(--navy);


}




::-webkit-scrollbar-thumb:hover{


background:

linear-gradient(

180deg,

#E5C987,

#C8A75D

);


}




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


.container{


width:90%;


max-width:1280px;


margin:auto;


}




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


.btn-primary{


display:inline-flex;


align-items:center;


justify-content:center;


gap:10px;


padding:15px 32px;


background:var(--gold);


color:white;


border-radius:12px;


font-weight:600;


transition:var(--transition);


box-shadow:

0 15px 35px rgba(200,167,93,.25);


}



.btn-primary:hover{


background:var(--gold-light);


transform:translateY(-4px);


}




.btn-outline{


display:inline-flex;


align-items:center;


justify-content:center;


gap:10px;


padding:15px 32px;


border:1px solid var(--gold);


color:var(--gold);


border-radius:12px;


font-weight:600;


transition:var(--transition);


}



.btn-outline:hover{


background:var(--gold);


color:white;


transform:translateY(-4px);


}





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


header{


position:fixed;


top:0;


left:0;


width:100%;


height:90px;


z-index:1000;


background:

rgba(15,23,42,.95);


backdrop-filter:blur(15px);


border-bottom:

1px solid rgba(255,255,255,.08);


}



header .container{


height:100%;


display:flex;


align-items:center;


justify-content:space-between;


}



/*==================================================
                    LOGO
==================================================*/


.logo{


display:flex;


align-items:center;


gap:15px;


}



.logo img{


width:65px;


}



.logo-text{


display:flex;


flex-direction:column;


}



.logo-text strong{


font-family:

'Cormorant Garamond',serif;


font-size:32px;


color:white;


line-height:1;


}



.logo-text span{


margin-top:5px;


font-size:11px;


letter-spacing:2px;


color:var(--gold);


text-transform:uppercase;


}




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


#navbar{


display:flex;


align-items:center;


gap:35px;


}



#navbar a{


position:relative;


font-size:15px;


font-weight:500;


color:white;


transition:.3s;


}



#navbar a:hover{


color:var(--gold);


}



#navbar a::after{


content:"";


position:absolute;


bottom:-8px;


left:0;


height:2px;


width:0;


background:var(--gold);


transition:.3s;


}



#navbar a:hover::after{


width:100%;


}





.header-buttons{


display:flex;


align-items:center;


gap:15px;


}




#menuBtn{


display:none;


width:45px;


height:45px;


border:none;


border-radius:10px;


background:var(--gold);


color:var(--navy);


cursor:pointer;


font-size:20px;


}



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


.hero{


min-height:100vh;


padding-top:120px;


display:flex;


align-items:center;


background:


linear-gradient(

120deg,

#ffffff,

#F8FAFC

);


}



.hero-content{


display:grid;


grid-template-columns:

1fr 450px;


gap:80px;


align-items:center;


}




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


.tag{


display:inline-block;


padding:8px 18px;


border-radius:50px;


background:

rgba(200,167,93,.15);


color:var(--gold);


font-size:12px;


font-weight:700;


letter-spacing:2px;


margin-bottom:25px;


}



.hero h1{


font-family:

'Cormorant Garamond',serif;


font-size:78px;


line-height:.95;


color:var(--navy);


}



.hero h1 span{


display:block;


color:var(--gold);


font-size:62px;


}




.hero p{


max-width:620px;


margin:30px 0;


font-size:18px;


line-height:1.8;


color:var(--gray);


}





.hero-buttons{


display:flex;


gap:20px;


margin-top:35px;


}




.hero-buttons a{


min-height:52px;


}





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


.hero-image{


display:flex;


justify-content:center;


}



.hero-image img{


width:420px;


border-radius:30px;


box-shadow:var(--shadow);


}




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


@media(max-width:1000px){


.hero-content{


grid-template-columns:1fr;


text-align:center;


}


.hero-image{


order:-1;


}


.hero p{


margin-left:auto;


margin-right:auto;


}


.hero-buttons{


flex-direction:column;


}


.hero-buttons a{


width:100%;


}


}



@media(max-width:850px){


#navbar{


display:none;


}


#menuBtn{


display:flex;


align-items:center;


justify-content:center;


}



.hero h1{


font-size:55px;


}



.hero h1 span{


font-size:45px;


}



}



@media(max-width:600px){


.hero h1{


font-size:42px;


}


.hero h1 span{


font-size:35px;


}



.hero-image img{


width:300px;


}



.btn-primary,
.btn-outline{


width:100%;


}



}

/*==================================================
        STYLE.CSS - P2

        SOBRE + ÁREAS DE ATUAÇÃO
==================================================*/


/*==================================================
                    SEÇÕES
==================================================*/


.section{


    padding:110px 0;


}



.section-header{


    text-align:center;


    max-width:800px;


    margin:0 auto 70px;


}



.section-tag{


    display:inline-block;


    padding:8px 20px;


    border-radius:50px;


    background:

    rgba(200,167,93,.15);


    color:var(--gold);


    font-size:12px;


    font-weight:700;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:20px;


}



.section-header h2{


    font-family:

    'Cormorant Garamond',serif;


    font-size:60px;


    line-height:1.1;


    color:var(--navy);


    margin-bottom:20px;


}



.section-header p{


    color:var(--gray);


    font-size:17px;


    line-height:1.8;


}





/*==================================================
                SOBRE O ESCRITÓRIO
==================================================*/


.about{


    background:#F8FAFC;


}



.about-content{


    display:grid;


    grid-template-columns:420px 1fr;


    gap:80px;


    align-items:center;


}




/* IMAGEM */


.about-image{


    position:relative;


}



.about-image img{


    width:100%;


    border-radius:28px;


    position:relative;


    z-index:2;


    box-shadow:

    0 25px 60px rgba(15,23,42,.18);


}



.about-image::before{


    content:"";


    position:absolute;


    inset:25px -25px -25px 25px;


    border:3px solid var(--gold);


    border-radius:28px;


    z-index:1;


}





/* TEXTO */


.about-text{


    position:relative;


}



.about-text h2{


    font-family:

    'Cormorant Garamond',serif;


    font-size:52px;


    color:var(--navy);


    margin-bottom:25px;


}



.about-text h2 span{


    color:var(--gold);


}



.about-text p{


    color:var(--gray);


    font-size:17px;


    line-height:1.9;


    margin-bottom:22px;


    text-align:justify;


}





/* LISTA */


.about-list{


    display:grid;


    gap:18px;


    margin-top:35px;


    list-style:none;


}



.about-list li{


    display:flex;


    align-items:center;


    gap:15px;


    color:var(--navy);


    font-weight:500;


}



.about-list i{


    width:42px;


    height:42px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(200,167,93,.15);


    color:var(--gold);


}





/*==================================================
                ÁREAS DE ATUAÇÃO
==================================================*/


.areas{


    background:white;


}



.areas-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}





/* CARD */


.area-card{


    background:white;


    padding:35px;


    border-radius:24px;


    border:1px solid var(--border);


    position:relative;


    overflow:hidden;


    transition:.35s;


}





.area-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:4px;


    background:var(--gold);


    transform:scaleX(0);


    transition:.35s;


}




.area-card:hover::before{


    transform:scaleX(1);


}



.area-card:hover{


    transform:translateY(-12px);


    border-color:

    rgba(200,167,93,.5);


    box-shadow:

    0 25px 60px rgba(15,23,42,.12);


}





/* ÍCONE */


.area-icon{


    width:75px;


    height:75px;


    border-radius:20px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(200,167,93,.12);


    margin-bottom:25px;


}



.area-icon i{


    font-size:32px;


    color:var(--gold);


}





/* TEXTO */


.area-card h3{


    font-family:

    'Cormorant Garamond',serif;


    font-size:34px;


    color:var(--navy);


    margin-bottom:15px;


}



.area-card p{


    color:var(--gray);


    line-height:1.8;


    font-size:15px;


}





/*==================================================
                    ANIMAÇÃO
==================================================*/


.about-image,
.about-text,
.area-card{


    animation:

    fadeUp .8s ease;


}



@keyframes fadeUp{


from{


opacity:0;


transform:translateY(40px);


}



to{


opacity:1;


transform:translateY(0);


}



}





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


@media(max-width:1100px){


.areas-grid{


grid-template-columns:

repeat(2,1fr);


}



.about-content{


grid-template-columns:1fr;


}



.about-image{


max-width:450px;


margin:auto;


}



}





@media(max-width:700px){


.section{


padding:80px 0;


}



.section-header h2{


font-size:42px;


}



.about-text h2{


font-size:40px;


}



.about-text p{


text-align:center;


}



.areas-grid{


grid-template-columns:1fr;


}



.area-card{


padding:30px;


}



}

/*==================================================
        STYLE.CSS - P3

        CONTATO + FORMULÁRIO
==================================================*/



/*==================================================
                    CONTATO
==================================================*/


.contact{


    background:var(--navy);


    color:white;


    position:relative;


    overflow:hidden;


}



.contact::before{


    content:"";


    position:absolute;


    width:550px;


    height:550px;


    right:-250px;


    top:-200px;


    background:

    rgba(200,167,93,.08);


    border-radius:50%;


}




.contact .section-header h2{


    color:white;


}



.contact .section-header p{


    color:#CBD5E1;


}





/*==================================================
                CONTEÚDO CONTATO
==================================================*/


.contact-content{


    display:grid;


    grid-template-columns:

    1fr 480px;


    gap:80px;


    align-items:center;


}





/*==================================================
                INFORMAÇÕES
==================================================*/


.contact-info{


    display:grid;


    gap:30px;


}



.contact-item{


    display:flex;


    align-items:center;


    gap:20px;


}



.contact-icon{


    width:65px;


    height:65px;


    flex-shrink:0;


    border-radius:20px;


    background:

    rgba(200,167,93,.15);


    display:flex;


    align-items:center;


    justify-content:center;


    color:var(--gold);


    font-size:25px;


}



.contact-item h3{


    color:white;


    font-size:20px;


    margin-bottom:5px;


}



.contact-item p{


    color:#CBD5E1;


    line-height:1.6;


}





/*==================================================
                CARD FORMULÁRIO
==================================================*/


.contact-card{


    background:white;


    padding:45px;


    border-radius:28px;


    box-shadow:

    0 30px 70px rgba(0,0,0,.3);


}



.contact-card h3{


    font-family:

    'Cormorant Garamond',serif;


    color:var(--navy);


    font-size:40px;


    margin-bottom:15px;


}



.contact-card>p{


    color:var(--gray);


    margin-bottom:30px;


    line-height:1.7;


}





/*==================================================
                GRUPOS DO FORM
==================================================*/


.form-group{


    margin-bottom:20px;


}



.form-group label{


    display:block;


    color:#334155;


    font-size:14px;


    font-weight:600;


    margin-bottom:8px;


}





/*==================================================
                INPUTS
==================================================*/


.contact-card input,
.contact-card select,
.contact-card textarea{


    width:100%;


    padding:15px 18px;


    border-radius:12px;


    border:1px solid #E2E8F0;


    background:#ffffff;


    color:var(--navy);


    font-size:15px;


    outline:none;


    transition:.3s;


}



.contact-card input::placeholder,
.contact-card textarea::placeholder{


    color:#94A3B8;


}





.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus{


    border-color:var(--gold);


    box-shadow:

    0 0 15px rgba(200,167,93,.25);


}




.contact-card textarea{


    min-height:140px;


    resize:vertical;


}





/*==================================================
                ESCOLHER ARQUIVO
==================================================*/


.file-upload{


    margin-bottom:22px;


}



.file-upload label{


    display:block;


    color:#334155;


    font-weight:600;


    font-size:14px;


    margin-bottom:10px;


}



.file-upload input[type="file"]{


    width:100%;


    padding:14px;


    border-radius:14px;


    border:1px dashed var(--gold);


    background:#F8FAFC;


    color:#475569;


    cursor:pointer;


    transition:.3s;


}




.file-upload input[type="file"]:hover{


    background:#FFFDF8;


    border-color:#A8863F;


}




.file-upload input[type="file"]::file-selector-button{


    background:var(--gold);


    color:var(--navy);


    border:none;


    padding:10px 18px;


    border-radius:10px;


    font-weight:700;


    cursor:pointer;


    margin-right:12px;


    transition:.3s;


}




.file-upload input[type="file"]::file-selector-button:hover{


    background:var(--gold-light);


}





.file-upload small{


    display:block;


    color:#64748B;


    font-size:13px;


    margin-top:8px;


}





/*==================================================
                CHECKBOX LGPD
==================================================*/


.form-check{


    display:flex;


    align-items:flex-start;


    gap:12px;


    margin:25px 0;


}



.form-check input[type="checkbox"]{


    appearance:none;


    -webkit-appearance:none;


    width:22px;


    height:22px;


    min-width:22px;


    margin-top:2px;


    background:white;


    border:2px solid var(--gold);


    border-radius:6px;


    cursor:pointer;


    position:relative;


    transition:.3s;


}



.form-check input[type="checkbox"]:checked{


    background:var(--gold);


}



.form-check input[type="checkbox"]:checked::before{


    content:"✓";


    position:absolute;


    left:50%;


    top:50%;


    transform:

    translate(-50%,-55%);


    font-size:16px;


    font-weight:900;


    color:var(--navy);


}



.form-check label{


    color:#475569;


    font-size:14px;


    line-height:1.5;


    cursor:pointer;


}





/*==================================================
                BOTÃO FORM
==================================================*/


.contact-card button{


    width:100%;


    border:none;


    cursor:pointer;


}





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


.whatsapp{


    position:fixed;


    right:30px;


    bottom:100px;


    width:65px;


    height:65px;


    border-radius:50%;


    background:#25D366;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:32px;


    z-index:999;


    box-shadow:

    0 15px 35px rgba(0,0,0,.3);


    transition:.35s;


}



.whatsapp:hover{


    transform:

    translateY(-8px)

    scale(1.05);


}




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


@media(max-width:1050px){


.contact-content{


grid-template-columns:1fr;


}



.contact-info{


max-width:600px;


margin:auto;


}



}





@media(max-width:600px){


.contact-card{


padding:30px;


}



.contact-item{


flex-direction:column;


text-align:center;


}



.whatsapp{


width:55px;


height:55px;


right:20px;


font-size:26px;


}



}

/*==================================================
        STYLE.CSS - P4

        FOOTER + BOTÕES + FINALIZAÇÃO
==================================================*/


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


footer{


    background:#080F1D;


    color:white;


    padding:80px 0 30px;


    position:relative;


}



footer::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:3px;


    background:var(--gold);


}





.footer-content{


    display:grid;


    grid-template-columns:

    1.4fr 1fr 1fr;


    gap:60px;


    margin-bottom:50px;


}





/* LOGO FOOTER */


.footer-logo img{


    width:80px;


    margin-bottom:20px;


}



.footer-logo h2{


    font-family:

    'Cormorant Garamond',serif;


    font-size:38px;


    margin-bottom:10px;


}



.footer-logo span{


    color:var(--gold);


    letter-spacing:2px;


    font-size:12px;


    text-transform:uppercase;


}



.footer-logo p{


    margin-top:20px;


    color:#CBD5E1;


    line-height:1.8;


    max-width:350px;


}





/* LINKS */


.footer-links h3,
.footer-contact h3{


    color:white;


    font-size:20px;


    margin-bottom:25px;


}



.footer-links a{


    display:block;


    color:#CBD5E1;


    margin-bottom:15px;


    transition:.3s;


}



.footer-links a:hover{


    color:var(--gold);


    padding-left:8px;


}





/* CONTATO FOOTER */


.footer-contact p{


    color:#CBD5E1;


    margin-bottom:18px;


    display:flex;


    align-items:center;


    gap:10px;


}



.footer-contact i{


    color:var(--gold);


    width:20px;


}





/*==================================================
                COPYRIGHT
==================================================*/


.footer-bottom{


    padding-top:25px;


    border-top:

    1px solid rgba(255,255,255,.1);


    text-align:center;


    color:#94A3B8;


    font-size:14px;


}






/*==================================================
            VOLTAR AO TOPO
==================================================*/


#backToTop{


    position:fixed;


    right:30px;


    bottom:30px;


    width:58px;


    height:58px;


    border:none;


    border-radius:50%;


    background:


    linear-gradient(

    135deg,

    var(--gold),

    #A8863F

    );


    color:var(--navy);


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:20px;


    cursor:pointer;


    opacity:0;


    visibility:hidden;


    transform:translateY(20px);


    transition:.35s;


    z-index:1000;


    box-shadow:


    0 15px 35px rgba(0,0,0,.3);


}





#backToTop.show{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}





#backToTop:hover{


    transform:


    translateY(-6px);


}





/*==================================================
                SELEÇÃO DE TEXTO
==================================================*/


::selection{


    background:var(--gold);


    color:var(--navy);


}






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


.fade{


    animation:fade .8s ease;


}



@keyframes fade{


from{


opacity:0;


transform:translateY(30px);


}



to{


opacity:1;


transform:translateY(0);


}



}






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


@media(max-width:1100px){



.footer-content{


grid-template-columns:

1fr 1fr;


}



.hero-content{


gap:40px;


}



.contact-content{


gap:40px;


}



}





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


@media(max-width:700px){



.container{


width:92%;


}



.footer-content{


grid-template-columns:1fr;


text-align:center;


}



.footer-logo p{


margin:auto;


}



.footer-contact p{


justify-content:center;


}



#backToTop{


width:50px;


height:50px;


right:20px;


bottom:25px;


}



}






/*==================================================
            AJUSTES FINAIS FORMULÁRIO
==================================================*/


.contact-card .btn-primary{


color:white;


}



.contact-card .btn-primary i{


font-size:18px;


}



input,
textarea,
select{


appearance:none;


}





/* Remove bordas estranhas */

input:focus,
textarea:focus,
select:focus{


outline:none;


}





/*==================================================
            FINAL PREMIUM
==================================================*/