@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
body {
	--cor-primaria_01_escura: #2F2E41;
	--cor-primaria_01: #154396;
	--cor-primaria_01_media: #575A89;
	--cor-primaria_01_clara: #6C63FF;

	--borda_destaque: solid 1px #fff0;

	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 300;
	line-height: 1.5;
    width: 100%;
    overflow-x: hidden;
}
.conteiner_firpe {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: max-content;
	grid-column-gap: 20px;
	padding: 0 20px;
}

header {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
    padding-bottom: 40px;
}
#scroll_destaque{
	grid-column: 1 / 7;
    grid-row: 2 / 3;
    height: 100px;
    border: var(--borda_destaque);
}
#destaque{
	grid-column: 1 / 7;
    grid-row: 3 / 4;
}
#atendimento_remoto {
	grid-column: 1 / 7;
    grid-row: 5 / 6;
    padding-top: 202px;
    position: relative;
    border: var(--borda_destaque);
}
#atendimento_presencial {
	border: var(--borda_destaque);
	display: contents;
}

#consulta_atos {
    background: #F2F2F2;
    grid-row: 7 / 8;
    grid-column: 1 / 7;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: max-content;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    position: relative;
}
#consulta_atos::before {
    content: "";
    background: #f2f2f2;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    height: 100%;
    transform: translateX(-20px);
    z-index: -1;
}
#consulta_atos h2 {
    grid-column: 2 / 7;
    grid-row: 1 / 2;
    margin-top: 30px;
}
#consulta_atos p.um {

    grid-column: 2 / 6;
    grid-row: 2 / 3;
    display: block;
    margin-bottom: 273px;
    position: relative;
}
#consulta_atos p.um::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 233px;
    background: url(../img/svg/consulta_atos.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; 
    bottom: 0;
    left: 0;
    transform: translateY(273px);
}






#consulta_atos p.dois {
    grid-column: 2 / 6;
    grid-row: 3 / 4;
}
#consulta_atos p.tres {
    grid-column: 2 / 6;
    grid-row: 4 / 5;
}


#consultaAtos {
    grid-column: 1 / 7;
    grid-row: 5 / 6;
}

/* ARRUMAR ISSO DEPOIS */
.cta2 {
    width: 300px;
    height: 60px;
    background: var(--cor-primaria_01);
    margin-bottom: 20px;
    border-radius: 10px;
    font-weight: 700;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.cta2 a {
    color: #fff;
    font-size: 2em;
    position: relative;
    background: var(--cor-primaria_01_clara);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    position: relative;
}












#atendimento_presencial p {
	grid-column: 2 / 7;
    grid-row: 8 / 9;
    padding: 40px 0;
    border: var(--borda_destaque);
}

#atendimento_presencial .conteiner_img {
	grid-column: 1 / 7;
    grid-row: 9 / 10;
    border: var(--borda_destaque);
    margin-bottom: 40px;
    position: relative;
    padding: 40px 0px;
    position: relative;
}

#atendimento_presencial .conteiner_img::before {
    content: "";
    width: 260px;
    height: 294px;
    background-image: url(../img/bgvertical.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-40% , -54%);
}


footer {
	grid-column: 1 / 7;
    grid-row: 10 / 11;
    height: 50px;
    /*background: var(--cor-primaria_01_escura);*/
    position: relative;
}

h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--cor-primaria_01);
    line-height: 1em;
}
h2 > strong {
    font-weight: 700;
}

 p { font-size: 2em;}
 p strong { font-weight: 700; }
 footer a { color: #fff; font-size: 2em; }
#atendimento_remoto > p {font-weight: 700; color: var(--cor-primaria_01); margin-bottom: 20px;} 

#title {
	position: relative;
    width: 200px;
    height: 160px;
    text-indent: -100000%;
    background-image: url(../img/svg/logo_01.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
}

.centralizar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



.conteiner_ilustracao {
	background: tomato;
	width: 200px;
	height: 150px;
}

#bt_scroll_to {
	display: block;
	width: 50px;
	height: 100px;
	background: url(../img/svg/scroll_to.svg) no-repeat var(--cor-primaria_01);
	background-size: 80%;
	background-position: center;
}

#destaque {
	border: var(--borda_destaque);
	position: relative;
	padding-top: 280px;
}

#destaque::before {
    content: "";position: absolute; top: -50px;
    width: 100%;
    height: 200px;
    background: url(../img/bg.jpg) no-repeat;
    background-size: cover; 
    
    z-index: -1;
}

#destaque::after {
    content: "";position: absolute;
    width: 100%;
    height: 260px;
    top: 20px; left: 0;
    background: url(../img/svg/destaque_ilustracao.svg) no-repeat;
    background-size: contain; 
    background-position: center;
    z-index: 1;
}
.texto_destaque {
    background: var(--cor-primaria_01);
    color: #fff;
    padding: 20px 10vh 40px 10vh;
    position: relative;
}

.texto_destaque::before {
    content: "";
    width: calc(100% + 40px);
    height: calc(100% + 70px);
    top: -70px;
    left: -20px;
    z-index: 6;
    background: var(--cor-primaria_01);
    position: absolute;
    z-index: -4;
}

#atendimento_remoto::before{
	content: "";
	position: absolute;
	height: 100px;
	width: calc(100% + 40px);
	left: -20px;
	top: -3px;
	background: var(--cor-primaria_01);
	z-index: -1
}
#atendimento_remoto::after{
	content: "";
	position: absolute;
	height: 182px;
	width: 100%;
	left: 0;
	top: 0;
    background: url(../img/svg/atendimento_remoto.svg) no-repeat;
    background-size: contain; 
    background-position: center;
	z-index:1
}

.cta {
    width: 300px;
    height: 60px;
    background: var(--cor-primaria_01);
    margin-bottom: 20px;
    border-radius: 10px;
    font-weight: 700;
	margin-left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
.cta a {
    color: #fff;
    font-size: 2em;
    position: relative;
    background: var(--cor-primaria_01_clara);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 0px 20px;
    position: relative;
}

#whatsapp.cta a::before, #fixo.cta a::before, #e-mail.cta a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 65px;
    height: 60%;
    border-right: 1px solid #fff;
}

#whatsapp.cta a::after, #fixo.cta a::after, #e-mail.cta a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
}
#whatsapp.cta a::after {
	background-image: url(../img/svg/icon_whatsapp.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}
#fixo.cta a::after {
	background-image: url(../img/svg/icon_fixo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}
#e-mail.cta a::after {
	background-image: url(../img/svg/icon_email.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}
footer::before {
	content: "";
	width: calc(100% + 40px);
	height: 100%;
	position: absolute;
	left: -20px;
	top: 0px;
    background: var(--cor-primaria_01_escura);
    z-index: -1;
}


@media screen and (min-width: 700px) {

    .conteiner_firpe, #consulta_atos {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-auto-rows: max-content;
        grid-column-gap: 20px;
        padding: 0 20px;
    }

    header { grid-column: 5 / 13; grid-row: 1 / 2; }
    #scroll_destaque { grid-column: 5 / 13; grid-row: 2 / 3; }
    #destaque { grid-column: 5 / 13; grid-row: 3 / 4; }
        .texto_destaque { padding: 20px 5vw 40px 5vw; }
        .texto_destaque::before {
            content: "";
            width: calc(100vw + 40px);
            height: calc(100% + 70px);
            top: -70px;
            left: -20px;
            background: var(--cor-primaria_01);
            position: absolute;
            z-index: -4;
            transform: translateX(-25%);
        }
        .texto_destaque::after {
            content: "";
            width: 240px;
            height: 150px;
            top: 0;
            left: 0;
            background-image: url(../img/svg/frame.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: absolute;
            z-index: -1;
            transform: translate(-47% , -120%);
        }
    #atendimento_remoto { grid-column: 5 / 13; grid-row: 5 / 6;}
        #atendimento_remoto::before {
            content: "";
            position: absolute;
            height: 100px;
            width: calc(100vw + 40px);
            left: -20px;
            top: -3px;
            background: var(--cor-primaria_01);
            z-index: -1;
            transform: translateX(-25%);
        }

    #consulta_atos {
        grid-column: 1 / 17;
        grid-row: 8 / 9;
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-auto-rows: max-content;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    #consulta_atos h2 , #consulta_atos p.um, #consulta_atos p.dois, #consulta_atos p.tres, #consultaAtos  { grid-column: 5 / 13; }

        .cta2 {
            width: 300px;
            height: 60px;
            background: var(--cor-primaria_01);
            margin-bottom: 60px;
            margin-top: 20px;
            border-radius: 10px;
            font-weight: 700;
            margin-left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
        }
        #e-mail { margin-bottom: 60px;}
        #atendimento_presencial .conteiner_img::after {
            content: "";
            width: 149px;
            height: 149px;
            background-image: url(../img/svg/plantas.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -1;
            transform: translate(75%, 15%);
        }
    #atendimento_presencial p { grid-column: 6 / 12; grid-row: 9 / 10; }
    #atendimento_presencial .conteiner_img { grid-column: 5 / 13; grid-row: 10 / 11; }
    footer { grid-column: 1 / 17; grid-row: 11 / 12; }
}

@media screen and (min-width: 1300px) {

    .conteiner_firpe {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    header { 
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-template-rows: 1fr 130px max-content 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        padding: 0 ;
        position: fixed;
        width: 100%;
        height: 100vh;
    }
        header #title {
            grid-column: 4 / 6;
            grid-row: 2 / 3;
            align-self: center;
        }
        header p {
            grid-column: 4 / 6;
            grid-row: 3 / 4;
            align-self: flex-start;  
            padding: 0 15%;
        }
        header::before {
            content: "";
            background-image: url(../img/bgvertical.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            grid-column: 1 / 8;
            grid-row: 1 / 5;
            z-index: -2;
            height: 100%;
        }
        
        header::after {
            content: "";
            background: #fff;
            grid-column: 4 / 6;
            grid-row: 2 / 4;
            z-index: -2;
            height: calc(100% + 250px);
            width: calc(100% + 100px);
            align-self: center;
            justify-self: center;
        }
/*
        header::after {
            content: "";
            background: #fff;
            grid-column: 4 / 6;
            grid-row: 2 / 4;
            z-index: -2;
            height: calc(100% + 250px);
            width: calc(100% + 100px);
            align-self: center;
            justify-self: center;
            border-radius: 50%;
            filter: blur(50px);
            opacity: 85%;
        }
*/
    #scroll_destaque,  {
        display: none;
    }



    #destaque { 
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-template-rows: 1fr 130px max-content 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        padding: 0 ;
        position: relative;
        width: 100%;
        height: 100vh;
        z-index: 3;
    }
        .texto_destaque {
            position: relative;
            grid-column: 7 / 12;
            grid-row: 3 / 5;
        }
        #destaque::before { display: none;}
        #destaque::after {
            content: "";
            position: relative;
            width: 100%;
            height: 237px;
            background: url(../img/svg/destaque_ilustracao.svg) no-repeat ;
            background-size: contain;
            background-position: center;
            z-index: 1;
            grid-column: 7 / 10;
            grid-row: 2 / 3;
            transform: translateY(-119px);
        }
        .texto_destaque::before {
            content: "";
            width: calc(100% + 40px);
            height: calc(100% + 70px);
            top: -70px;
            left: -20px;
            background: var(--cor-primaria_01);
            position: absolute;
            z-index: -4;
            transform: translateX(0%);
        }
    #atendimento_remoto {
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-auto-rows: max-content ;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        padding: 0 ;
        position: relative;
        width: 100%;
        min-height: 50vh;
        z-index: 3;
    }

        #atendimento_remoto::before {
            content: "";
            position: inherit;
            height: 100px;
            width: calc(100% + 40px);
            left: inherit;
            top: inherit;
            background: var(--cor-primaria_01);
            z-index: -1;
            transform: translate(-20px , -5px);
            grid-column: 7 / 12;
            grid-row: 1 / 2;
            display: inline-grid;
        }
        #atendimento_remoto::after {
            content: "";
            position: relative;
            height: 182px;
            width: 100%;
            left: inherit;
            top: inherit;
            background: url(../img/svg/atendimento_remoto.svg) no-repeat;
            background-size: contain;
            background-position: center;
            z-index: 1;
            grid-column: 7 / 12;
            grid-row: 1 / 2;
        }

        #atendimento_remoto > p {
            font-weight: 700;
            color: var(--cor-primaria_01);
            margin-bottom: 20px;
            grid-column: 7 / 12;
            grid-row: 2 / 3;
            padding: 0 5vw;
        }
        #whatsapp {
            grid-column: 7 / 12;
            grid-row: 3 / 4;
        }
        #fixo {
            grid-column: 7 / 12;
            grid-row: 4 / 5;      
        }
        #e-mail {
            grid-column: 7 / 12;
            grid-row: 5 / 6;  
        }
    #consulta_atos {
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-auto-rows: max-content ;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        padding: 0 ;
        position: relative;
        width: 100%;
        min-height: 10px;
        z-index: 2;
        background: #fff0;     
    }
    #consulta_atos::before {
        content: "";
        background: #f2f2f2;
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 40px);
        height: 100%;
        transform: translateX(-20px);
        z-index: -1;
        grid-column: 7 / 12;
    }

    #consulta_atos h2, 
    #consulta_atos p.um, 
    #consulta_atos p.dois, 
    #consulta_atos p.tres { grid-column: 7 / 12; padding: 0px 5vw ;}
    #consultaAtos { grid-column: 7 / 12;}

        #consulta_atos::after {
            content: "";
            grid-column: 7 / 12;
            grid-row: 1 / 5; 
            background: #fff;
            height: 100%;
            width: calc(100% + 40px);
            transform: translate(-20px , -100%);
            z-index: -2;
        }








    #atendimento_presencial {
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-auto-rows: max-content ;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        padding: 0 ;
        position: relative;
        width: 100%;
        min-height: 10px;
        z-index: 2;
    }
        #atendimento_presencial p {
                grid-column: 7 / 12;
                grid-row: 1 / 2;  
                padding: 40px 5vw;
        }
        #atendimento_presencial .conteiner_img {
                grid-column: 7 / 12;
                grid-row: 2 / 3;             
        } 
        #atendimento_presencial::Before {
            content: "";
            grid-column: 7 / 12;
            grid-row: 1 / 3; 
            background: #fff;
            height: 100%;
            width: calc(100% + 40px);
            transform: translateX(-20px);
            z-index: -1;
        }

        /*
        #atendimento_presencial::after {
            content: "";
            grid-column: 7 / 12;
            grid-row: 1 / 3; 
            background: #fff;
            height: 100%;
            width: calc(100% + 40px);
            transform: translate(-20px , -100%);
            z-index: -2;
        }*/

    footer.centralizar  {
        display: grid;
        grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
        grid-auto-rows: max-content ;
        grid-column-gap: 20px;
        padding: 0 ;
        position: relative;
        width: 100%;
        height: 5em;
        z-index: 2;
    }
    footer a { grid-column: 7 / 12; grid-row: 1 / 2; text-align: center; height: 50px; line-height: 2.3em;}

footer::before {
    content: "";
    width: calc(100% + 40px);
    height: 100%;
    left: -20px;
    top: 0px;
    background: var(--cor-primaria_01_escura);
    z-index: -1;
    grid-column: 7 / 12;
    grid-row: 1 / 2;
}
}