@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*========== RESET ==========*/
* {margin: 0; padding: 0; box-sizing: border-box; border: none;}
body {font-family: Inter, sans-serif; color: #222; font-family: "Nunito Sans", sans-serif; background: linear-gradient(to bottom, #f8f9fa, #ffffff);}
html {scroll-behavior: smooth;}
.negrito {font-weight: 800;}
.italico {font-style: italic;}
.link-rodape {text-decoration: none; color: #fff;}
.link-rodape:hover {text-decoration: underline;}
.linha-botao {position: relative; float: left; width: 100%;}

/*========== TOPO ==========*/
.topo-fora-a-fora {position: fixed; width: 100%; height: 90px; background-color: rgba(30,30,55,0.9); z-index: 9999;}
.topo {position: relative; float: left; width: 90%; margin-left: 5%;}
.logo img {position: relative; float: left; width: 134px; height: 69px; margin-top: 10px;}
.botao-whatsapp {position: relative; float: right; width: 205px; margin-top: 19px; padding: 15px 5px; border-radius: 10px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: linear-gradient(90deg, #9e7448 0%, #d3a86b 100%); transition: 0.2s ease-out;}
.botao-whatsapp:hover {transform: scale(1.04);}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 240px 30px 150px 30px; background: url(../img/banner.jpg); background-size: cover; background-position: center;}
.banner {position: relative; float: left; width: 100%;}
.textos-banner {position: relative; float: left; width: 100%;}
.titulo-banner {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.subtitulo-banner {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-size: 20px; font-weight: 700; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-fora-a-fora {position: relative; float: left; width: 100%;}
.botao-banner {position: relative; float: left; width: 240px; left: 50%; margin-left: -120px; padding: 15px 5px; border-radius: 10px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: linear-gradient(90deg, #9e7448 0%, #d3a86b 100%); transition: 0.2s ease-out;}
.botao-banner:hover {transform: scale(1.04);}

/*========== REGULARIZAR ==========*/
.regularizar-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.regularizar {position: relative; float: left; width: 100%;}
.titulo-regularizar {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #191a46;}
.regularizar-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.regularizacao {position: relative; float: left; width: 100%; margin-bottom: 30px; padding: 40px 25px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); background: #fff;}
.imagem-regularizacao {position: relative; float: left; width: 90%; margin-left: 5%;}
.imagem-regularizacao img {position: relative; float: left; width: 90%; margin-left: 5%; margin-bottom: 15px; border-radius: 10px; border: 3px solid #d3a86b;}
.titulo-regularizacao {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 800; color: #191a46;}
.descricao-regularizacao {position: relative; float: left; width: 100%; text-align: center; font-size: 16px;}
.botao-regularizacao {position: relative; float: left; width: 240px; left: 50%; margin-left: -120px; margin-top: 30px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: linear-gradient(90deg, #141416 0%, #18183a 100%); transition: 0.2s ease-out;}
.botao-regularizacao:hover {transform: scale(1.04);}

/*========== CTA ==========*/
.cta-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: url(../img/cta.jpg); background-size: cover; background-position: center;}
.cta {position: relative; float: left; width: 100%;}
.titulo-cta {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #d3a86b;}
.descricao-cta {position: relative; float: left; width: 100%; text-align: center; font-size: 18px; color: #fff;}
.botao-cta {position: relative; float: left; width: 260px; left: 50%; margin-left: -130px; margin-top: 30px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: linear-gradient(90deg, #9e7448 0%, #d3a86b 100%); transition: 0.2s ease-out;}
.botao-cta:hover {transform: scale(1.04);}
.botao-banner:hover {transform: scale(1.04);}

/*========== SERVIÇOS ==========*/
.servicos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.servicos {position: relative; float: left; width: 100%;}
.titulo-servicos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #191a46;}
.servicos-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.servico {position: relative; float: left; width: 100%; margin-bottom: 30px; padding: 60px 25px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); background: #fff;}
.imagem-servico {position: relative; float: left; width: 50px; height: 50px; left: 50%; margin-left: -25px; margin-bottom: 10px;}
.titulo-servico {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 800; color: #191a46;}
.descricao-servico {position: relative; float: left; width: 100%; text-align: center; font-size: 16px;}

/*========== CAMINHOS ==========*/
.caminhos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: url(../img/caminhos.jpg); background-size: cover; background-position: center;}
.caminhos {position: relative; float: left; width: 100%;}
.titulo-caminhos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #d3a86b;}
.caminhos-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.caminho {position: relative; float: left; width: 100%; margin-bottom: 30px; padding: 60px 25px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); background: linear-gradient(90deg, #141416 0%, #18183a 100%);}
.titulo-caminho {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 800; color: #d3a86b;}
.descricao-caminho {position: relative; float: left; width: 100%; text-align: center; font-size: 16px; color: #fff;}

/*========== SOBRE NÓS ==========*/
.sobre-nos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff}
.sobre-nos, .nosso-escritorio, .apresentacao, .nosso-escritorio-textos, .apresentacao-textos {position: relative; float: left; width: 100%;}
.nosso-escritorio {margin-bottom: 50px;}
.titulo-nosso-escritorio {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #191a46;}
.titulo-apresentacao {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #d3a86b;}
.descricao-nosso-escritorio, .descricao-apresentacao {position: relative; float: left; width: 100%; text-align: center; font-size: 16px;}
.nosso-escritorio-imagem {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; margin-bottom: 30px;}
.nosso-escritorio-imagem img {border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);}
.apresentacao-imagem {position: relative; float: left; width: 220px; left: 50%; margin-left: -110px; margin-bottom: 30px;}

/*========== PERGUNTAS ==========*/
.perguntas-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f8f8f8;}
.perguntas {position: relative; float: left; width: 100%;}
.titulo-perguntas {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 800; color: #191a46;}
.perguntas-caixa {position: relative; float: left; width: 100%; margin-top: 20px;}
.pergunta {position: relative; float: left; width: 100%; padding: 25px 20px; cursor: pointer; font-size: 18px; font-weight: 600; color: #fff; border-bottom: 1px solid #232447; background: #191a46;}
.pergunta::before {content: "▸"; position: relative; margin-right: 10px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
.pergunta.aberta::before {content: "▴";}
.resposta {max-height: 0; overflow: hidden; transition: max-height 0.4s ease; position: relative; width: 100%; border: 2px solid #232447; border-top: none; background: #f8f8f8;}
.resposta-conteudo {padding: 20px; font-size: 16px;}
.resposta.ativa {max-height: 500px; padding: 25px 20px;}

/*========== RODAPÉ ==========*/
.rodape-fora-a-fora {position: relative; float: left; width: 100%; padding: 50px 30px; background: linear-gradient(90deg, #141416 0%, #18183a 100%);}
.rodape {position: relative; float: left; width: 100%;}
.logo-rodape {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.logo-rodape img {position: relative; float: left; width: 230px; height: 118px; left: 50%; margin-left: -115px;}
.textos-rodape {position: relative; float: left; width: 100%; margin-top: 20px; text-align: center; font-size: 16px; color: #fff;}
.desenvolvimento-rodape {position: relative; float: left; width: 100%; margin-top: 20px; text-align: center; font-size: 16px; color: #fff;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo, .banner, .cta, .regularizar, .regularizar-caixa, .servicos-caixa, .caminhos-caixa, .sobre-nos, .perguntas-caixa, .rodape {width: 700px; left: 50%; margin-left: -350px;}
.titulo-regularizar, .titulo-cta, .titulo-servicos, .titulo-caminhos, .titulo-perguntas {font-size: 36px;}

.botao-whatsapp {width: 240px; font-size: 17px;}
.titulo-banner {font-size: 42px;}
.subtitulo-banner {font-size: 24px;}
.botao-banner, .botao-regularizacao {width: 240px; margin-left: -120px; padding: 20px 10px; font-size: 17px;}

.regularizacao:nth-child(-n+2) {width: 320px; height: 338px; margin: 10px;}
.regularizacao:nth-child(n+3):nth-child(-n+5) {width: 206px; height: 384px; margin: 10px;}

.botao-cta {width: 240px; margin-left: -120px; padding: 20px 10px; font-size: 17px;}

.servico {width: 206px; height: 564px; margin: 10px;}

.nosso-escritorio-imagem {height: 326px; left: 0; margin-left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap;}
.apresentacao-imagem {height: 341px; float: right; left: 0; margin-left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap;}
.nosso-escritorio-textos {width: 340px; margin-left: 40px;}
.apresentacao-textos {width: 440px; margin-right: 40px;}
.titulo-nosso-escritorio, .titulo-apresentacao {text-align: left;}
.descricao-nosso-escritorio, .descricao-apresentacao {text-align: left;}

.logo-rodape {position: relative; float: left; width: 40%; margin-bottom: 0;}
.logo-rodape img {left: 0; margin-left: 0;}
.textos-rodape {width: 60%; margin-top: 15px; text-align: right;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
body {font-size: 17px;}
.topo, .banner, .cta, .regularizar, .regularizar-caixa, .servicos-caixa, .caminhos-caixa, .sobre-nos, .perguntas-caixa, .rodape {width: 900px; margin-left: -450px;}
.titulo-regularizar, .titulo-servicos, .titulo-caminhos, .titulo-perguntas {margin-bottom: 20px; line-height: 48px;}

.banner-fora-a-fora {overflow: hidden;}
.textos-banner {width: 800px; left: 50%; margin-left: -400px;}
.titulo-banner {margin-bottom: 30px; font-size: 44px; line-height: 58px;}
.subtitulo-banner {margin-bottom: 30px; font-size: 18px;}

.regularizacao:nth-child(-n+2) {width: 420px; height: 355px;}
.regularizacao:nth-child(n+3):nth-child(-n+5) {width: 273px; height: 342px;}

.servico {width: 273px; height: 450px;}

.sobre-nos-fora-a-fora {padding-top: 100px; padding-bottom: 15px;}
.nosso-escritorio {margin-bottom: 80px;}
.nosso-escritorio-imagem {width: 400px; height: 288px;}
.apresentacao-imagem {width: 300px; height: 288px;}
.nosso-escritorio-textos {width: 460px;}
.apresentacao-textos {width: 560px; margin-right: 40px;}
.titulo-nosso-escritorio, .titulo-apresentacao {font-size: 36px;}

.caminho {width: 273px; height: 322px; margin: 10px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.banner, .cta, .regularizar, .regularizar-caixa, .servicos-caixa {width: 1200px; margin-left: -600px;}
.titulo-regularizar, .titulo-cta, .titulo-servicos, .titulo-caminhos, .titulo-perguntas {margin-bottom: 30px; font-size: 42px;}
.descricao-cta {font-size: 22px;}

.titulo-banner {font-size: 52px; line-height: 60px;}
.subtitulo-banner, .subtitulo-vantagens {font-size: 20px;}

.regularizacao:nth-child(-n+2) {width: 570px; height: 394px;}
.regularizacao:nth-child(n+3):nth-child(-n+5) {width: 373px; height: 360px;}

.servico {width: 216px;}
.servico:nth-child(-n+5) {height: 464px;}
.servico:nth-child(n+6):nth-child(-n+10) {height: 564px;}
.servico:nth-child(n+11):nth-child(-n+12) {height: 408px;}
}