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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;
    font-size:16px;
    line-height:1.7;

    color:#202020;
    background:#ffffff;

    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;
    transition:.3s;

}

ul{

    list-style:none;

}

button,
input,
textarea{

    font-family:inherit;

}

section{

    padding:100px 0;

}

iframe{

    border:0;
    width:100%;

}

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

:root{

    --primaria:#0d1f3b;
    --primaria-hover:#132a4f;

    --dourado:#c7a35b;
    --dourado-hover:#b89243;

    --cinza:#f5f6f8;
    --texto:#202020;
    --texto-claro:#666;

    --branco:#fff;

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

    --radius:18px;

    --container:1200px;

}

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

.container{

    width:min(92%,var(--container));
    margin:auto;

}

/* ===========================================================
   TÍTULOS
=========================================================== */

.titulo-secao{

    max-width:760px;
    margin:0 auto 60px;
    text-align:center;

}

.titulo-secao span{

    display:inline-block;

    color:var(--dourado);

    text-transform:uppercase;
    letter-spacing:2px;

    font-size:.85rem;
    font-weight:700;

    margin-bottom:12px;

}

.titulo-secao h2{

    font-size:2.4rem;
    line-height:1.25;

    color:var(--primaria);

    margin-bottom:18px;

}

.titulo-secao p{

    color:var(--texto-claro);

}

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

.btn-principal{

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

    padding:16px 34px;

    border-radius:999px;

    background:var(--dourado);
    color:#fff;

    font-weight:700;

}

.btn-principal:hover{

    background:var(--dourado-hover);
    transform:translateY(-3px);

}

.btn-secundario{

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

    padding:16px 34px;

    border-radius:999px;

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

    color:var(--primaria);

    font-weight:700;

}

.btn-secundario:hover{

    background:var(--primaria);
    color:#fff;

}

/* ===========================================================
   TOPBAR
=========================================================== */

.topbar{

    background:var(--primaria);
    color:#fff;

    font-size:.9rem;

}

.topbar-container{

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

    min-height:48px;

}

.topbar-left,
.topbar-right{

    display:flex;
    align-items:center;
    gap:20px;

}

.topbar a{

    display:flex;
    align-items:center;
    gap:8px;

}

.topbar i{

    color:var(--dourado);

}

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

.header{

    position:sticky;
    top:0;
    z-index:999;

    background:#fff;

    box-shadow:0 2px 20px rgba(0,0,0,.05);

}

.header .container{

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

    min-height:90px;

}

.logo img{

    height:70px;

}

.header nav ul{

    display:flex;
    align-items:center;
    gap:34px;

}

.header nav a{

    font-weight:600;

}

.header nav a:hover{

    color:var(--dourado);

}

.menu-cta{

    padding:14px 28px;

    background:var(--primaria);
    color:#fff;

    border-radius:999px;

}

.menu-cta:hover{

    background:var(--primaria-hover);

}

.btn-whatsapp{

    display:none;

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

.hero{

    background:
    linear-gradient(rgba(13,31,59,.92),rgba(13,31,59,.88)),
    url("../img/bg-hero.jpg") center/cover;

    color:#fff;

    padding:120px 0;

}

.hero-grid{

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:70px;
    align-items:center;

}

.tag{

    display:inline-flex;

    padding:8px 18px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:999px;

    font-size:.85rem;
    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

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

    margin-bottom:28px;

}

.hero p{

    max-width:640px;

    color:rgba(255,255,255,.85);

    margin-bottom:40px;

}

.hero-botoes{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

    margin-bottom:60px;

}

.hero .btn-secundario{

    color:#fff;
    border-color:#fff;

}

.hero .btn-secundario:hover{

    background:#fff;
    color:var(--primaria);

}

.hero-info{

    display:flex;
    gap:50px;
    flex-wrap:wrap;

}

.hero-info div{

    display:flex;
    flex-direction:column;

}

.hero-info strong{

    font-size:1.25rem;
    color:var(--dourado);

}

.hero-info span{

    color:rgba(255,255,255,.75);

}

.hero-foto{

    display:flex;
    justify-content:center;

}

.hero-foto img{

    max-width:470px;
    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--sombra);

}

/* ===========================================================
   CREDIBILIDADE
=========================================================== */

.credibilidade{

    background:#fff;

}

.credibilidade-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.card-credibilidade{

    padding:40px 30px;

    border-radius:var(--radius);

    background:#fff;

    box-shadow:var(--sombra);

    transition:.3s;

}

.card-credibilidade:hover{

    transform:translateY(-8px);

}

.card-credibilidade i{

    font-size:2rem;

    color:var(--dourado);

    margin-bottom:20px;

}

.card-credibilidade h3{

    color:var(--primaria);

    margin-bottom:15px;

}

.card-credibilidade p{

    color:var(--texto-claro);

}

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

.sobre{

    background:var(--cinza);

}

.sobre-grid{

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

}

.sobre-imagem img{

    border-radius:var(--radius);

    box-shadow:var(--sombra);

}

.subtitulo{

    display:inline-block;

    color:var(--dourado);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:18px;

}

.sobre h2{

    font-size:2.5rem;

    color:var(--primaria);

    line-height:1.25;

    margin-bottom:28px;

}

.sobre p{

    color:var(--texto-claro);

    margin-bottom:20px;

}

.sobre-lista{

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

    gap:18px;

    margin-top:35px;

}

.sobre-lista li{

    display:flex;
    align-items:center;
    gap:10px;

    font-weight:600;

}

.sobre-lista i{

    color:var(--dourado);

}
/* ===========================================================
   ÁREAS
=========================================================== */

.areas{

    background:#fff;

}

.areas-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

}

.area-card{

    background:#fff;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--sombra);

    transition:.3s;

}

.area-card:hover{

    transform:translateY(-8px);

}

.area-card i{

    font-size:2.3rem;

    color:var(--dourado);

    margin-bottom:22px;

}

.area-card h3{

    color:var(--primaria);

    margin-bottom:18px;

    font-size:1.45rem;

}

.area-card p{

    color:var(--texto-claro);

}

/* ===========================================================
   PROCESSO
=========================================================== */

.processo{

    background:var(--cinza);

}

.processo-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.processo article{

    position:relative;

    padding:45px 35px;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--sombra);

}

.processo article span{

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

    width:60px;
    height:60px;

    border-radius:50%;

    background:var(--dourado);

    color:#fff;

    font-size:1.4rem;
    font-weight:700;

    margin-bottom:25px;

}

.processo article h3{

    color:var(--primaria);

    margin-bottom:15px;

}

.processo article p{

    color:var(--texto-claro);

}

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

.cta{

    background:linear-gradient(135deg,var(--primaria),#1a3158);

    color:#fff;

}

.cta-container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;

}

.cta-texto{

    flex:1;

}

.cta-texto span{

    color:var(--dourado);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

}

.cta-texto h2{

    font-size:2.6rem;

    line-height:1.25;

    margin:20px 0;

}

.cta-texto p{

    color:rgba(255,255,255,.8);

}

.cta-botoes{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}

.cta .btn-secundario{

    border-color:#fff;

    color:#fff;

}

.cta .btn-secundario:hover{

    background:#fff;

    color:var(--primaria);

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

.faq{

    background:#fff;

}

.faq-lista{

    max-width:900px;

    margin:0 auto;

}

.faq details{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--sombra);

    margin-bottom:20px;

    overflow:hidden;

}

.faq summary{

    cursor:pointer;

    padding:28px 35px;

    list-style:none;

    font-size:1.1rem;
    font-weight:700;

    color:var(--primaria);

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq details p{

    padding:0 35px 30px;

    color:var(--texto-claro);

}

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

.contato{

    background:var(--cinza);

}

.contato-grid{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.contato-texto span{

    color:var(--dourado);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

}

.contato-texto h2{

    font-size:2.6rem;

    line-height:1.25;

    color:var(--primaria);

    margin:20px 0;

}

.contato-texto>p{

    color:var(--texto-claro);

    margin-bottom:40px;

}

.contato-infos{

    display:flex;
    flex-direction:column;

    gap:28px;

    margin-bottom:40px;

}

.contato-infos>div{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contato-infos i{

    width:56px;
    height:56px;

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

    border-radius:50%;

    background:var(--primaria);

    color:#fff;

    font-size:1.2rem;

}

.contato-infos strong{

    display:block;

    color:var(--primaria);

    margin-bottom:6px;

}

.contato-infos p,
.contato-infos a{

    color:var(--texto-claro);

}

.contato-mapa iframe{

    min-height:520px;

    border-radius:var(--radius);

    box-shadow:var(--sombra);

}

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

.footer{

    background:var(--primaria);

    color:#fff;

    text-align:center;

    padding:70px 0 35px;

}

.footer-logo img{

    margin:auto;

    height:90px;

    width:auto;

}

.footer>div>p{

    max-width:700px;

    margin:30px auto;

    color:rgba(255,255,255,.8);

}

.footer-social{

    display:flex;
    justify-content:center;

    gap:20px;

    margin-bottom:35px;

}

.footer-social a{

    width:50px;
    height:50px;

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

    border-radius:50%;

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

    font-size:1.2rem;

}

.footer-social a:hover{

    background:var(--dourado);

}

.footer-copy{

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

    padding-top:30px;

    color:rgba(255,255,255,.7);

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

.whatsapp-float{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

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

    border-radius:50%;

    background:#25d366;

    color:#fff;

    font-size:2rem;

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

    z-index:999;

}

.whatsapp-float:hover{

    transform:scale(1.08);

}

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

.topo{

    position:fixed;

    right:25px;
    bottom:105px;

    width:52px;
    height:52px;

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

    border-radius:50%;

    background:var(--primaria);

    color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    z-index:998;

}

.topo:hover{

    background:var(--dourado);

}

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

@media (max-width:1100px){

    .hero-grid,
    .sobre-grid,
    .contato-grid,
    .cta-container{

        grid-template-columns:1fr;

    }

    .hero-foto{

        order:-1;

    }

    .credibilidade-grid{

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

    }

    .areas-grid{

        grid-template-columns:1fr;

    }

    .processo-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:900px){

    .topbar{

        display:none;

    }

    .header nav{

        display:none;

    }

    .btn-whatsapp{

        display:flex;

        align-items:center;
        gap:10px;

        background:var(--primaria);

        color:#fff;

        padding:14px 22px;

        border-radius:999px;

    }

    .hero{

        padding:90px 0;

    }

    .hero h1{

        font-size:2.6rem;

    }

    .sobre h2,
    .cta-texto h2,
    .contato-texto h2,
    .titulo-secao h2{

        font-size:2rem;

    }

}

@media (max-width:600px){

    section{

        padding:70px 0;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero-info{

        flex-direction:column;

        gap:20px;

    }

    .credibilidade-grid{

        grid-template-columns:1fr;

    }

    .sobre-lista{

        grid-template-columns:1fr;

    }

    .hero-botoes,
    .cta-botoes{

        flex-direction:column;

    }

    .btn-principal,
    .btn-secundario{

        width:100%;

    }

    .contato-mapa iframe{

        min-height:350px;

    }

    .logo img{

        height:58px;

    }

}
/* ===========================================================
   ANIMAÇÕES JS
=========================================================== */

.header.scrolled{

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

}

.hidden{

    opacity:0;

    transform:translateY(35px);

    transition:.8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

.btn-principal,
.btn-secundario{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

img{

    opacity:0;

    transition:opacity .4s ease;

}

img.loaded{

    opacity:1;

}

.topo{

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

body.loaded{

    opacity:1;

}