/*==================================================
                HERO SERVIÇOS
==================================================*/

.servicos-hero{

    position:relative;

    width:100%;

    min-height:660px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

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

.servicos-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

/*==================================================
                OVERLAY
==================================================*/

.servicos-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,28,50,.92) 0%,
        rgba(7,28,50,.84) 30%,
        rgba(7,28,50,.55) 58%,
        rgba(7,28,50,.18) 82%,
        rgba(7,28,50,.05) 100%
    );

    z-index:2;

}

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

.servicos-hero .container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 35px;

}

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

.servicos-content{

    display:flex;

    align-items:center;

    min-height:720px;

}

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

.servicos-text{

    width:700px;

}

.servicos-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#caa14d;

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

    font-size:17px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.servicos-tag i{

    font-size:24px;

}

.gold-line{

    width:95px;

    height:3px;

    background:#caa14d;

    margin-bottom:35px;

}

.servicos-text h1{

    margin:0 0 28px;

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    line-height:1;

    font-weight:500;

    color:#ffffff;

}

.servicos-text p{

    max-width:620px;

    margin:0;

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

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

    font-size:19px;

    line-height:1.8;

}
/*==================================================
            FAIXA 24 HORAS
==================================================*/

.servicos-info{

    position:relative;

    margin-top:-38px;

    z-index:20;

}

.info-box{

    width:100%;

    max-width:1120px;

    margin:auto;

    background:#ffffff;

    border-radius:40px;

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

    padding:5px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

}

.info-icon{

    width:62px;

    height:62px;

    border-radius:50%;

    background:#f6f2e8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#caa14d;

    font-size:26px;

}

.info-box p{

    margin:0;

    color:#334155;

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

    font-size:19px;

    line-height:1.6;

}

.info-box strong{

    color:#071c32;

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

.servicos-text{

    animation:fadeLeft .9s ease;

}

.servicos-image{

    animation:fadeRight .9s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
                HOVER
==================================================*/

.info-box{

    transition:.35s;

}

.info-box:hover{

    transform:translateY(-4px);

    box-shadow:0 22px 55px rgba(0,0,0,.12);

}

.info-icon{

    transition:.35s;

}

.info-box:hover .info-icon{

    background:#caa14d;

    color:#071c32;

}







/*==================================================
                ÁREAS DE SERVIÇOS
==================================================*/

.areas-servicos{

    padding:100px 0;

    background:#f7f5f2;

}

.areas-servicos .container{

    width:100%;

    max-width:1450px;

    margin:auto;

    padding:0 35px;

}

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

.areas-grid{

    display:grid;

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

    gap:38px;

}

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

.area-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    min-height:760px;

    transition:.35s;

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

}

.area-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 55px rgba(0,0,0,.14);

}

/*==================================================
            CORES
==================================================*/

.area-card.dark{

    background:#071c32;

    color:#ffffff;

}

.area-card.light{

    background:#ffffff;

    color:#071c32;

}

/*==================================================
                NÚMERO
==================================================*/

.numero{

    position:absolute;

    top:0;

    left:0;

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#caa14d;

    color:#ffffff;

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:600;

}

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

.area-icon{

    width:84px;

    height:84px;

    margin:90px auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

}

.area-card.dark .area-icon{

    color:#caa14d;

}

.area-card.light .area-icon{

    color:#3b6f43;

}

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

.area-card h2{

    margin:0;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

    font-weight:500;

    line-height:1.2;

}

.area-card h4{

    margin:8px 0 22px;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:20px;

    font-weight:500;

    color:#caa14d;

}

.area-card.light h4{

    color:#3b6f43;

}

/*==================================================
                LINHA
==================================================*/

.gold-divider{

    width:80px;

    height:2px;

    background:#caa14d;

    margin:0 auto 28px;

}

.area-card.light .gold-divider{

    background:#3b6f43;

}

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

.area-card>p{

    width:82%;

    margin:0 auto 35px;

    text-align:center;

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

    font-size:16px;

    line-height:1.8;

}

.area-card.dark>p{

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

}

.area-card.light>p{

    color:#5d6670;

}

/*==================================================
                COLUNAS
==================================================*/

.area-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    padding:0 45px;

    margin-bottom:40px;

    flex:1;

}

.area-columns>div{

    display:flex;

    flex-direction:column;

}

.area-columns>div:first-child{

    border-right:1px solid rgba(255,255,255,.15);

    padding-right:28px;

}

.area-card.light .area-columns>div:first-child{

    border-right:1px solid #e8e8e8;

}

/*==================================================
                SUBTÍTULOS
==================================================*/

.area-columns h5{

    margin:0 0 18px;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.area-card.dark .area-columns h5{

    color:#caa14d;

}

.area-card.light .area-columns h5{

    color:#3b6f43;

}

/*==================================================
                LISTAS
==================================================*/

.area-columns ul{

    margin:0;

    padding:0;

    list-style:none;

}

.area-columns li{

    position:relative;

    padding-left:18px;

    margin-bottom:13px;

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

    font-size:15px;

    line-height:1.8;

}

.area-card.dark li{

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

}

.area-card.light li{

    color:#5d6670;

}

.area-columns li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#caa14d;

}

.area-card.light li::before{

    background:#3b6f43;

}

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

.area-btn{

    margin-top:auto;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    text-decoration:none;

    text-transform:uppercase;

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

    font-size:15px;

    font-weight:700;

    letter-spacing:.8px;

    transition:.35s;

}

.area-btn::after{

    content:"→";

    font-size:22px;

    transition:.35s;

}

.area-btn:hover::after{

    transform:translateX(8px);

}

.area-btn.gold{

    background:#caa14d;

    color:#ffffff;

}

.area-btn.gold:hover{

    background:#b88f34;

}

.area-btn.green{

    background:#3b6f43;

    color:#ffffff;

}

.area-btn.green:hover{

    background:#315f38;

}


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

.servicos-cta{

    background:#071c32;

    padding:38px 0;

}

.cta-container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:45px;

}

.cta-icon{

    width:62px;

    height:62px;

    flex-shrink:0;

    border-radius:50%;

    background:#caa14d;

    display:flex;

    align-items:center;

    justify-content:center;

}

.cta-icon i{

    color:#ffffff;

    font-size:25px;

}

.cta-text{

    flex:1;

}

.cta-text h2{

    margin:0 0 12px;

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

    font-weight:500;

    color:#ffffff;

    line-height:1.1;

}

.cta-text p{

    margin:0;

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

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

    font-size:18px;

    line-height:1.8;

}
/*==================================================
                BOTÃO
==================================================*/

.cta-button{

    flex-shrink:0;

}

.cta-button a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    min-width:280px;

    height:44px;

    padding:0 34px;

    border:2px solid #caa14d;

    color:#caa14d;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:1.5px;

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

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.cta-button a i{

    font-size:15px;

    transition:.35s;

}

.cta-button a:hover{

    background:#caa14d;

    color:#071c32;

}

.cta-button a:hover i{

    transform:translateX(8px);

}



/*=========================================
        RISCOS QUE AJUDAMOS A MITIGAR
==========================================*/

.risk-section{

    position:relative;

    padding:120px 0;

    background:#071c32;

    overflow:hidden;

}

.risk-section::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:
    radial-gradient(circle at top right,
    rgba(202,161,77,.08),
    transparent 35%);

    pointer-events:none;

}

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

.risk-header{

    position:relative;

    z-index:2;

    max-width:820px;

    margin:0 auto 80px;

    text-align:center;

}

.risk-header span{

    display:block;

    margin-bottom:18px;

    color:#caa14d;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

}

.risk-header h2{

    margin:0;

    font-family:'Marcellus',serif;

    font-size:32px;

    font-weight:400;

    line-height:1.2;

    color:#ffffff;

}

.risk-divider{

    width:90px;

    height:3px;

    margin:28px auto;

    border-radius:20px;

    background:#caa14d;

}

.risk-header p{

    max-width:760px;

    margin:auto;

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

    font-size:16px;

    line-height:1.8;

}

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

.risk-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:34px;

    margin-top:70px;

}

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

.risk-card{

    position:relative;

    overflow:hidden;

    background:#fbfaf8;

    border-radius:16px;

    padding:45px;

    border:1px solid rgba(202,161,77,.18);

    transition:.4s;

}

.risk-card:hover{

    transform:translateY(-10px);

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

}

/*=========================================
        MARCA DE ÁGUA
==========================================*/

.risk-watermark{

    position:absolute;

    right:25px;

    bottom:18px;

    font-size:90px;

    color:rgba(202,161,77,.08);

    pointer-events:none;

}

/*=========================================
        TOPO DO CARD
==========================================*/

.risk-card-header{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:38px;

}

.risk-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#071c32;

    color:#caa14d;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    flex-shrink:0;

}

.risk-card-header h3{

    margin:0;

    color:#071c32;

    font-family:'Marcellus',serif;

    font-size:22px;

    font-weight:400;

}

.risk-line{

    width:80px;

    height:3px;

    margin-top:16px;

    background:#caa14d;

    border-radius:20px;

}

/*=========================================
            LISTA
==========================================*/

.risk-list{

    margin:0;

    padding:0;

    list-style:none;

}

.risk-list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 0;

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

    font-size:17px;

    line-height:1.7;

    color:#47515d;

    border-bottom:1px solid rgba(7,28,50,.08);

}

.risk-list li:last-child{

    border-bottom:none;

}

.risk-list i{

    color:#caa14d;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}

/*=========================================
            BARRA INFERIOR
==========================================*/

.risk-footer{

    margin-top:55px;

    padding:35px 40px;

    background:rgba(4,18,36,.95);

    border:1px solid rgba(202,161,77,.15);

    border-radius:14px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

/*=========================================
            NOTA
==========================================*/

.risk-note{

    display:flex;

    align-items:flex-start;

    gap:22px;

    flex:1;

}

.risk-note-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    border:2px solid rgba(202,161,77,.30);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#caa14d;

    font-size:30px;

    flex-shrink:0;

}

.risk-note strong{

    display:block;

    margin-bottom:8px;

    color:#ffffff;

    font-family:'Marcellus',serif;

    font-size:22px;

    font-weight:400;

}

.risk-note div{

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

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

    font-size:16px;

    line-height:1.8;

}

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

.risk-button{

    flex-shrink:0;

}

.risk-button a{

    display:inline-flex;

    align-items:center;

    gap:15px;

    padding:18px 38px;

    background:#caa14d;

    color:#071c32;

    text-decoration:none;

    border-radius:6px;

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

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.35s;

}

.risk-button a i{

    transition:.35s;

}

.risk-button a:hover{

    background:#ddb761;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(202,161,77,.30);

}

.risk-button a:hover i{

    transform:translateX(6px);

}

/*==================================================
        HERO SERVIÇOS MOBILE (768px)
==================================================*/

@media (max-width:768px){

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

.servicos-hero{

    position:relative;

    height:370px;

    min-height:370px;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

    padding:0;

}

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

.servicos-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:72% center;

    z-index:1;

}

/*=========================================
                OVERLAY
=========================================*/

.servicos-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:linear-gradient(

        90deg,

        rgba(7,28,50,.92) 0%,

        rgba(7,28,50,.82) 38%,

        rgba(7,28,50,.45) 72%,

        rgba(7,28,50,.12) 100%

    );

}

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

.servicos-hero .container{

    position:relative;

    z-index:3;

    width:90%;

    margin:auto;

    padding:0 0 65px; /* antes era 24px */

}

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

.servicos-content{

    width:100%;
 transform:translateY(-165px);
}

.servicos-text{

    max-width:240px;

    margin:0;

}

/*=========================================
                TAG
=========================================*/

.servicos-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin:0;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.servicos-tag i{

    font-size:12px;

}

/*=========================================
                LINHA
=========================================*/

.gold-line{

    width:40px;

    height:2px;

    margin:12px 0 16px;

}

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

.servicos-text h1{

    margin:0 0 14px;

    font-size:22px;

    line-height:1.2;

    font-weight:500;

}

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

.servicos-text p{

    margin:0;

    max-width:240px;

    font-size:12px;

    line-height:1.75;

}

/*=========================================
            RESPOSTA 24 HORAS
=========================================*/

.servicos-info{

    margin-top:-18px;

    position:relative;

    z-index:20;

    padding:0;

}

.info-box{

    width:90%;

    margin:auto;

    padding:14px 16px;

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:10px;

}

.info-icon{

    width:38px;

    height:38px;

    flex-shrink:0;

    font-size:15px;

}

.info-box p{

    margin:0;

    font-size:12px;

    line-height:1.6;

}


/*=========================================
        RESPOSTA 24 HORAS
=========================================*/

.servicos-info{

    margin-top:-18px;

    position:relative;

    z-index:20;

}

.info-box{

    width:90%;

    margin:auto;

    padding:14px 16px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:12px;

}

.info-icon{

    width:38px;

    height:38px;

    flex-shrink:0;

    font-size:15px;

}

.info-box p{

    font-size:12px;

    line-height:1.6;

    margin:0;

}

}

/*==================================================
        ÁREAS DE SERVIÇOS MOBILE (768px)
==================================================*/

@media (max-width:768px){

/*=========================================
            SECÇÃO
=========================================*/

.areas-servicos{

    padding:40px 0;

}

.areas-servicos .container{

    width:96%;

    max-width:none;

    margin:auto;

}

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

.areas-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}

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

.area-card{

    position:relative;

    width:100%;

    padding:22px 18px;

    border-radius:10px;

    overflow:hidden;

    box-sizing:border-box;

}

.area-card.dark,
.area-card.light{

    min-height:auto;

}

/*=========================================
            NÚMERO
=========================================*/

.numero{

    position:absolute;

    top:16px;

    right:16px;

    font-size:28px;

    font-weight:700;

    opacity:.08;

    line-height:1;

}

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

.area-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:16px;

    margin-bottom:14px;

}

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

.area-card h2{

    margin:0;

    font-size:18px;

    line-height:1.3;

}

.area-card h4{

    margin:4px 0 12px;

    font-size:11px;

    letter-spacing:1px;

}

.gold-divider{

    width:42px;

    margin:14px 0 18px;

}

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

.area-card>p{

    margin:0 0 20px;

    font-size:12px;

    line-height:1.75;

}

/*=========================================
        PESSOAS / ORGANIZAÇÕES
=========================================*/

.area-columns{

    display:block;

}

.area-columns>div{

    width:100%;

    padding:0;

    margin:0;

    border:none;

}

.area-columns>div:first-child{

    margin-bottom:18px;

}

.area-columns>div:last-child{

    padding-top:18px;

}

.area-card.light .area-columns>div:last-child{

    border-top:1px solid rgba(7,28,50,.10);

}

.area-card.dark .area-columns>div:last-child{

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

}

/*=========================================
            SUBTÍTULOS
=========================================*/

.area-columns h5{

    margin-bottom:10px;

    font-size:12px;

    letter-spacing:.8px;

}

/*=========================================
            LISTA
=========================================*/

.area-columns ul{

    margin:0;

    padding:0;

    list-style:none;

}

.area-columns li{

    position:relative;

    padding-left:18px;

    margin-bottom:8px;

    font-size:12px;

    line-height:1.7;

}

.area-columns li::before{

    content:"•";

    position:absolute;

    left:0;

    color:#caa14d;

}

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

.area-btn{

    width:100%;

    height:46px;

    margin-top:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}

}

/*==================================================
        RISCOS MOBILE (768px)
==================================================*/

@media (max-width:768px){

/*=========================================
            SECÇÃO
=========================================*/

.risk-section{

    padding:55px 0;

}

.risk-section .container{

    width:94%;

    margin:auto;

}

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

.risk-header{

    margin-bottom:32px;

    text-align:left;

}

.risk-header span{

    font-size:10px;

    letter-spacing:2px;

}

.risk-header h2{

    margin-top:10px;

    font-size:24px;

    line-height:1.3;

}

.risk-divider{

    width:48px;

    margin-top:14px;

}

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

.risk-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}

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

.risk-card{

    position:relative;

    width:100%;

    padding:22px 18px;

    border-radius:12px;

    overflow:hidden;

}

/*=========================================
        WATERMARK
=========================================*/

.risk-watermark{

    position:absolute;

    right:18px;

    top:18px;

    font-size:46px;

    opacity:.05;

}

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

.risk-card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.risk-icon{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

}

.risk-card h3{

    margin:0;

    font-size:17px;

    line-height:1.3;

}

.risk-line{

    width:42px;

    margin-top:8px;

}

/*=========================================
            LISTA
=========================================*/

.risk-list{

    margin:0;

    padding:0;

    list-style:none;

}

.risk-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:12px;

    font-size:12px;

    line-height:1.75;

}

.risk-list i{

    margin-top:3px;

    font-size:12px;

    flex-shrink:0;

}

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

.risk-footer{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*=========================
        NOTA
=========================*/

.risk-note{

    padding:16px;

    border-radius:10px;

}

.risk-note-icon{

    width:38px;

    height:38px;

    font-size:15px;

}

.risk-note strong{

    font-size:13px;

}

.risk-note div{

    font-size:12px;

    line-height:1.7;

}

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

.risk-button a{

    width:100%;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:700;

}

}