body { background-color: #F7F6F7; ; } @media only screen and (min-width: 360px) and (max-width: 729px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 180px; height: 120px; margin-left: 0px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 450px; object-fit: contain ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 100%; padding: 1.8rem 2rem; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; justify-content: center; gap: 30px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 180px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; font-size: 14px; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 180px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; font-size: 14px; } section#avulso_propriedades div.codigo_endereco { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:20px; padding: 2rem; margin: 10px 0px 0px 0px; ; } section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { color: #0d475e; font-weight: 700;font-family: "Playfair Display", serif; text-transform: uppercase; font-size: 20px;} section#avulso_propriedades div.codigo_endereco h2, p { color: #0d475e; font-size: 18px; text-align: center; line-height: 28px} section#avulso_propriedades div.codigo_endereco p { color: #0d475e; font-size: 16px; text-align: center; line-height: 28px} section#avulso_propriedades div.codigo_endereco h2 span { font-weight: 600; } /* Estilos para o Modal (overlay e conteúdo) */ .modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal__overlay.active { opacity: 1; visibility: visible; } .modal__content { position: relative; background: #fff; border-radius: 8px; width: 95%; height: 95%; max-width: 1200px; max-height: 800px; box-sizing: border-box; display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .modal__content .modal__close__btn { position: absolute; top: 1rem; right: 1rem; font-weight: 700; color: #0d475e; background: transparent; border: none; cursor: pointer; z-index: 10; } /* Estilos para o Carrossel do Modal */ .modal__carrousel__container { flex-grow: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .modal__carrousel__figure { display: flex; transition: transform 0.5s ease-in-out; margin: 0; padding: 0; height: 100%; } .modal__carrousel__figure img { flex-shrink: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer; } /* Estilos para os botões de navegação */ .modal__btn__prev, .modal__btn__next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; background: rgba(0, 0, 0, 0.5); color: #fff; border: none; padding: 1rem; cursor: pointer; border-radius: 50%; z-index: 5; } .modal__btn__prev { left: 1rem; } .modal__btn__next { right: 1rem; } /* Estilos para o Modal de Mapa */ .modal__mapa__container { width: 100%; height: 100%; } /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 100%; padding: 2rem 1.5rem; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px 30px;; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 16px; color: #0d475e; display: flex; align-items: center; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: auto; justify-content: center; display: flex; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 50px; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 14px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 18px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; align-items: center; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 300; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 20px 0px 10px 0px; text-align: left; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 3rem 0; display: flex; flex-direction: column; gap: 20px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 100%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 10px 0px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 14px; color: #0d475e; line-height: 28px; padding-bottom: 30px; text-align: left; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; height: 250px; object-fit: fill; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 0px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 3rem 1rem; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 100%; padding: 2rem 2.5rem 0; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 100%; padding: 0rem 1rem; height: auto; margin: 10px auto; display: flex; flex-direction: column; gap: 0px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; padding: 0px 10px; border-bottom: 1px solid #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 15px 0px; width: 100%; color: #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 14px; } section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 90px; padding: 20px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; display: none; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 14px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 94%;padding: 15px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; margin-left: 10px; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 2rem 1rem; } section#buscasBoutique div.buscas_boutique_container { max-width: 100%; padding: 0 1rem; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 1.5rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; text-align: left; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter {background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 2rem 1rem; ; width: 100%; height: 100%;} .footer__container { padding: 0px 0px; width: 100%; max-width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; } .footer__contact { display: flex; width: 100%; height: 100%; flex-direction: column; } .contact__info { min-width: 100%; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 10px; } .contact__info p { line-height: 28px; color: #fff; padding: 0px 0px 10px 0px; font-size: 14px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 14px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { min-width: 300px; display: flex; flex-direction: column; gap: 20px; margin-top: 20px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; display: none; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 120px; margin: 10px auto; } .footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px 20px; padding: 20px 0px; } .footer__nav a { color: #9C8758; font-size: 14px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} } @media only screen and (min-width: 730px) and (max-width: 767px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 60px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 120px; margin-left: -20px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 600px; object-fit: fill ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; width: 100%; max-width: 100%; padding: 1.8rem 2rem; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; gap: 20px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 130px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; font-size: 14px; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 130px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; font-size: 14px; } section#avulso_propriedades div.codigo_endereco { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:20px; padding: 2rem; margin: 10px 0px 0px 0px; ; } section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { color: #0d475e; font-weight: 700;font-family: "Playfair Display", serif; text-transform: uppercase; font-size: 20px;} section#avulso_propriedades div.codigo_endereco h2, p { color: #0d475e; font-size: 18px; text-align: center; line-height: 28px} section#avulso_propriedades div.codigo_endereco p { color: #0d475e; font-size: 16px; text-align: center; line-height: 28px} section#avulso_propriedades div.codigo_endereco h2 span { font-weight: 600; } /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 100%; padding: 2rem 3rem; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: flex; gap: 40px; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 16px; color: #0d475e; display: flex; align-items: center; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: auto; justify-content: center; display: flex; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 50px; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 14px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 18px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; align-items: center; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 300; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 20px 0px 10px 0px; text-align: left; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 3rem 0; display: flex; flex-direction: column; gap: 20px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 100%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 10px 80px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 14px; color: #0d475e; line-height: 28px; padding-bottom: 30px; text-align: left; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; height: 250px; object-fit: fill; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 0px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 0 1rem; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 100%; padding: 2rem 2.5rem; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 100%; padding: 2rem 1rem; height: auto; margin: 30px auto; display: flex; flex-direction: column; gap: 20px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; justify-content: space-between; gap: 20px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; padding: 0px 10px; border-bottom: 1px solid #efe4ca;; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 20px 0px; width: 100%; color: #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 120px; padding: 20px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 300px;padding: 20px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; margin-left: 10px; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 3rem 2rem; } section#buscasBoutique div.buscas_boutique_container { max-width: 1100px; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; text-align: left; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 2rem; ; width: 100%; height: 100%;} .footer__container { padding: 60px 0px; width: 100%; max-width: 1000px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; } .contact__info p { line-height: 28px; color: #fff; padding: 0px 50px 10px 0px; font-size: 14px; text-align: left; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 14px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 130px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 30px; margin: 20px 0; font-size: 14px; padding: 0px 0px 20px 0px; } .footer__nav a { color: #9C8758; font-size: 18px; padding:10px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 768px) and (max-width: 1023px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 120px; margin-left: -20px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 580px; object-fit: fill ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; width: 100%; max-width: 100%; padding: 1rem 2rem; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; gap: 20px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.codigo_endereco { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:20px; padding: 2rem; margin: 10px 0px 0px 0px; } section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { color: #0d475e; font-weight: 700;font-family: "Playfair Display", serif; text-transform: uppercase; font-size: 20px;} section#avulso_propriedades div.codigo_endereco h2, p { color: #0d475e; font-size: 18px; } section#avulso_propriedades div.codigo_endereco h2 span { font-weight: 600; } /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 100%; padding: 2rem 3rem; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: flex; gap: 50px; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 16px; color: #0d475e; display: flex; align-items: center; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: auto; justify-content: center; display: flex; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 50px; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 14px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 18px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; flex-direction: column; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 600; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 20px 0px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 3rem 0; display: flex; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 50%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 10px 80px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 14px; color: #0d475e; line-height: 25px; padding-bottom: 30px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 50%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 60px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 40px 0px; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 100%; padding: 2rem 2.5rem; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 100%; padding: 2rem 1rem; height: auto; margin: 30px auto; display: flex; flex-direction: column; gap: 20px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; justify-content: space-between; gap: 20px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; padding: 0px 10px; border-bottom: 1px solid #efe4ca;; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 20px 0px; width: 100%; color: #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 120px; padding: 20px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 300px;padding: 20px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; margin-left: 10px; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 3rem 2rem; } section#buscasBoutique div.buscas_boutique_container { max-width: 1100px; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 2rem 3.5rem; ; width: 100%; height: 100%;} .footer__container { padding: 60px 0px; width: 100%; max-width: 1000px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; } .contact__info p { line-height: 28px; color: #fff; padding: 0px 50px 10px 0px; font-size: 15px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 15px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 12px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 30px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1024px) and (max-width: 1365px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 2rem; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto;margin: 0px auto; position: relative; padding: 0 2rem} header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 60px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 50%; justify-content: center; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 30px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 150px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; /* Escondido por padrão */ position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); /* Fundo escuro */ justify-content: center; align-items: center; } .modal-content { background-color: #fff; margin: auto; padding: 20px; border-radius: 10px; width: 95%; height: 600px; max-width: 500px; position: relative; } .modal-content header.headerMobile figure { width: 100%; height: auto; text-align: center;margin-top: 20px; } .modal-content header.headerMobile figure img { width: 100px; height:auto; } .modal-content header.headerMobile nav.navMobileLinks { margin: 50px 0px; width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileLinks ul { display: flex; flex-direction: column; gap: 30px; } .modal-content header.headerMobile nav.navMobileLinks ul li a { font-size: 16px; font-family: "Playfair Display", serif; font-weight: 400; font-style: italic; color: #0d475e; } .modal-content header.headerMobile nav.navMobileSocial { width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileSocial ul { display: flex; justify-content: center; gap: 30px; padding: 20px 0px; } .modal-content header.headerMobile nav.navMobileSocial ul li { border-bottom: 1px solid #0d475e; padding: 10px; border-radius: 20px; } .modal-content header.headerMobile nav.navMobileSocial ul li:hover { transform: scale(1.5) } .modal-content header.headerMobile nav.navMobileSocial ul li a { color: #0d475e; font-size: 22px; } .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: #0d475e;} .hidden { display: none; } /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 580px; object-fit: contain ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; width: 100%; max-width: 100%; padding: 1rem 2rem; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; gap: 20px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.codigo_endereco { display: flex; justify-content: center; align-items: center; gap:15px; margin: 40px 0px 0px 0px; width: 100%; height: 100%;flex-direction: column;} section#avulso_propriedades div.codigo_endereco h2 { font-size: 16px;color: #0d475e;} section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { font-size: 16px;color: #0d475e; } section#avulso_propriedades div.codigo_endereco p.endereco__avulso { color: #0d475e; padding: 0px; margin-top: -20px; } /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 100%; padding: 2rem 3rem; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: flex; gap: 80px; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 20px; color: #0d475e; display: flex; align-items: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: auto; justify-content: center; display: flex; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 50px; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 16px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 22px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; flex-direction: column; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: flex; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 20px 0px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; width: 100%} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; width: 100%} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 3rem 0; display: flex; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 50%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 10px 80px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 14px; color: #0d475e; line-height: 25px; padding-bottom: 30px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 50%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 60px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 40px 0px; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 900px; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; padding: 10px 0px; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 950px; height: auto; margin: 30px auto; display: flex; flex-direction: column; gap: 20px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; justify-content: space-between; gap: 20px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; border-bottom: 1px solid #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 20px 0px; width: 100%; color: #efe4ca; border: none;} section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 16px; padding: 0px 10px} section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 120px; padding: 0px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 300px;padding: 20px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 3rem 2rem; } section#buscasBoutique div.buscas_boutique_container { max-width: 1100px; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 20px;} .footer__container { padding: 3rem 2rem; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; width: 100%;height: 100%; margin: 0px auto;} .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; } .contact__info p { line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; font-size: 14px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .contact__form input::placeholder { color: #0d475e;font-family: "Playfair Display", serif; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px;} .contact__form textarea::placeholder { color: #0d475e;font-family: "Playfair Display", serif; font-size: 14px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1516px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1366px) and (max-width: 1599px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 30px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 90px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 45%; position: absolute; right: 240px; ;} header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 50px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 200px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; /* Escondido por padrão */ position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); /* Fundo escuro */ justify-content: center; align-items: center; } .modal-content { background-color: #fff; margin: auto; padding: 20px; border-radius: 10px; width: 95%; height: 600px; max-width: 500px; position: relative; } .modal-content header.headerMobile figure { width: 100%; height: auto; text-align: center;margin-top: 20px; } .modal-content header.headerMobile figure img { width: 100px; height:auto; } .modal-content header.headerMobile nav.navMobileLinks { margin: 50px 0px; width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileLinks ul { display: flex; flex-direction: column; gap: 30px; } .modal-content header.headerMobile nav.navMobileLinks ul li a { font-size: 16px; font-family: "Playfair Display", serif; font-weight: 400; font-style: italic; color: #0d475e; } .modal-content header.headerMobile nav.navMobileSocial { width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileSocial ul { display: flex; justify-content: center; gap: 30px; padding: 20px 0px; } .modal-content header.headerMobile nav.navMobileSocial ul li { border-bottom: 1px solid #0d475e; padding: 10px; border-radius: 20px; } .modal-content header.headerMobile nav.navMobileSocial ul li:hover { transform: scale(1.5) } .modal-content header.headerMobile nav.navMobileSocial ul li a { color: #0d475e; font-size: 22px; } .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: #0d475e;} .hidden { display: none; } /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 580px; object-fit: contain ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; width: 100%; max-width: 100%; padding: 30px 20px; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; gap: 20px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.codigo_endereco { display: flex; justify-content: center; align-items: center; gap:15px; margin: 40px 0px 0px 0px; width: 100%; height: 100%; } section#avulso_propriedades div.codigo_endereco h2 { font-size: 16px;color: #0d475e;} section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { font-size: 16px;color: #0d475e; } section#avulso_propriedades div.codigo_endereco p.endereco__avulso { color: #0d475e; padding: 0px; margin-top: -20px; } /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 1100px; padding: 20px 0px; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: flex; gap: 80px; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 20px; color: #0d475e; display: flex; align-items: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: auto; justify-content: center; display: flex; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 50px; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 16px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 22px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; flex-direction: column; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 0px 0px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 120px 0px 0px 0px; display: flex; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 50%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 10px 100px 10px 0px;} section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 16px; color: #0d475e; line-height: 25px; padding-bottom: 30px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 50%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 60px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 40px 0px; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 1100px; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; padding: 10px 0px; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 1100px; height: auto; margin: 30px auto; display: flex; flex-direction: column; gap: 20px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; justify-content: space-between; gap: 20px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; padding: 0px 10px; border-bottom: 1px solid #efe4ca;; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 20px 0px; width: 100%; color: #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 120px; padding: 20px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 300px;padding: 20px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 60px 20px 120px 20px; } section#buscasBoutique div.buscas_boutique_container { max-width: 1100px; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 20px;} .footer__container { padding: 60px 0px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; width: 100%; max-width: 1100px;height: 100%; margin: 0px auto;} .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; } .contact__info p { line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; font-size: 14px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .contact__form input::placeholder { color: #0d475e;font-family: "Playfair Display", serif; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px;} .contact__form textarea::placeholder { color: #0d475e;font-family: "Playfair Display", serif; font-size: 14px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1516px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1600px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 30px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 45%; position: absolute; right: 240px; ;} header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 50px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 200px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; /* Escondido por padrão */ position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); /* Fundo escuro */ justify-content: center; align-items: center; } .modal-content { background-color: #fff; margin: auto; padding: 20px; border-radius: 10px; width: 95%; height: 600px; max-width: 500px; position: relative; } .modal-content header.headerMobile figure { width: 100%; height: auto; text-align: center;margin-top: 20px; } .modal-content header.headerMobile figure img { width: 100px; height:auto; } .modal-content header.headerMobile nav.navMobileLinks { margin: 50px 0px; width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileLinks ul { display: flex; flex-direction: column; gap: 30px; } .modal-content header.headerMobile nav.navMobileLinks ul li a { font-size: 16px; font-family: "Playfair Display", serif; font-weight: 400; font-style: italic; color: #0d475e; } .modal-content header.headerMobile nav.navMobileSocial { width: 100%; height: auto; } .modal-content header.headerMobile nav.navMobileSocial ul { display: flex; justify-content: center; gap: 30px; padding: 20px 0px; } .modal-content header.headerMobile nav.navMobileSocial ul li { border-bottom: 1px solid #0d475e; padding: 10px; border-radius: 20px; } .modal-content header.headerMobile nav.navMobileSocial ul li:hover { transform: scale(1.5) } .modal-content header.headerMobile nav.navMobileSocial ul li a { color: #0d475e; font-size: 22px; } .close-button { position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer; color: #0d475e;} .hidden { display: none; } /* SECTION AVULSO PROPRIEDADES */ .avulsoCarrousel { overflow: hidden; width: 100%; position: relative; background-image: linear-gradient(to bottom, #000000, #160f14, #211a24, #262536, #243349, #25475b, #2a5b69, #376f74, #608d83, #8eaa94, #bfc7ab, #efe4ca);} .avulsoCarrousel figure { display: flex; transition: transform 0.4s ease; width: 100%;} .avulsoCarrousel figure img { width: 100vw; /* ou um valor fixo como 100% do .avulsoCarrousel */ height: 660px; object-fit: contain ; flex-shrink: 0;} section#avulso_propriedades div.avulso_container { position: relative; height: 100%; } section#avulso_propriedades div.avulso_container div.botoes__container { display: flex; width: 100%; max-width: 100%; padding: 30px 20px; justify-content: space-between; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa, div.botao_carrousel { display: flex; gap: 20px; } section#avulso_propriedades div.avulso_container div.botoes__container div.fotos__mapa button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.avulso_container div.botoes__container div.botao_carrousel button { background-color: #0d475e; width: 150px; height: 100%; padding: 10px 0px; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 10px; color: #efe4ca; font-weight: 600; cursor: pointer; } section#avulso_propriedades div.codigo_endereco { display: flex; justify-content: center; align-items: center; gap:15px; margin: 40px 0px 0px 0px; width: 100%; height: 100%; } section#avulso_propriedades div.codigo_endereco h2 { font-size: 16px;color: #0d475e;} section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { font-size: 16px;color: #0d475e; } section#avulso_propriedades div.codigo_endereco p.endereco__avulso { color: #0d475e; padding: 0px; margin-top: -20px; } /*section#avulso_propriedades div.codigo_endereco h2 span.codigoBoutique { color: #0d475e; font-weight: 700;font-family: "Playfair Display", serif; text-transform: uppercase; font-size: 20px; background-color: green; width: 100%; }*/ /*section#avulso_propriedades div.codigo_endereco h2, p { color: #0d475e; font-size: 16px; background-color: chocolate; }*/ /*section#avulso_propriedades div.codigo_endereco p span.cep__avulso {background-color: blue}*/ /* SECTION AVULSO INFORMAÇÕES */ section#avulso__informacoes { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes { width: 100%; max-width: 1200px; padding: 20px 0px; margin: 0px auto; } section#avulso__informacoes div.containerInformacoes article.avulso_price { display: flex; flex-direction: column; align-items: center; gap: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 { font-size: 40px; font-family: "Playfair Display", serif; font-weight: 600; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price h2 span { font-size: 16px;padding: 0px 5px 0px 0px; font-weight: 700; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav { border-top: 1px solid #0d475e; border-bottom: 1px solid #0d475e; padding: 30px 0px; width: 100%; height: 100%; display: flex; justify-content: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul { display: flex; gap: 80px; } section#avulso__informacoes div.containerInformacoes article.avulso_price nav ul li { display: flex; gap: 10px; font-size: 16px; color: #0d475e; display: flex; align-items: center;} section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade { width: 100%; height: 100%; justify-content: center; display: flex; gap:10px; align-items: center; padding: 0px 0px 20px 0px; border-bottom: 1px solid #0d475e; } section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure{ 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso_price div.boutique__exclusividade figure img { width: 100%; height: 30px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe { width: 100%; height: 100%; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe p.descricao_imovel_pequena { font-size: 16px; line-height: 28px; text-align: center; padding: 10px 0px; ;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel { width: 100%; height: 100%; position: relative; padding: 50px 0px;} section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li { display: flex; align-items: center; gap: 10px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li i { color: #0d475e; font-size: 22px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span { width: 100%; display: flex; flex-direction: column; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span h4 { color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe nav.detalhes__imovel ul li span p { color: #0d475e; font-size: 14px; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa h4 { color: #0d475e; font-size: 16px; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.avulso__informe div.descricao_completa div.decricao__completa__avulso__texto { width: 100%; height: 100%; padding: 2rem 0 ; font-size: 14px; line-height: 30px; font-weight: 300; font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares { width: 100%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo h3 { font-size: 16px; font-weight: 700; color: #0d475e;font-family: "Playfair Display", serif; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares div.info__titulo p { padding: 10px 0px; font-size: 16px; color: #0d475e;font-family: "Playfair Display", serif;} section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; padding: 30px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul p { font-size: 16px; color: #0d475e; font-weight: 600; padding: 0px 0px 10px 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li { padding: 10px 0px;display: flex; gap: 5px; } section#avulso__informacoes div.containerInformacoes article.informacoes_complementares nav ul div.container__li li i { color: red; } section#avulso__informacoes div.containerInformacoes article.materia__bairro { width: 100%; height: 100%; padding: 120px 0px 0px 50px; display: flex; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia { width: 50%; height: 100%;display: flex; justify-content: center; align-items: center; padding: 70px 100px 10px 0px;} section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container { width: 100%; height: auto;; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container span { font-weight: 700; color: #0d475e; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container h2 { font-size: 20px; padding: 10px 0px 20px 0px; color: #0d475e; font-weight: 600; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container p { font-size: 16px; color: #0d475e; line-height: 25px; padding-bottom: 30px; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.materia div.materia__container button { width: 150px; background-color:#0d475e; padding: 10px; color: #efe4ca; border-radius: 20px; font-weight: 600; cursor: pointer; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso { width: 50%; height: 100%; } section#avulso__informacoes div.containerInformacoes article.materia__bairro div.figure__bairro__avulso img { width: 100%; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso { width: 100%; height: 100%; position: relative; } section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso { width: 100%; height: auto; margin-top: 60px;} section#avulso__informacoes div.containerInformacoes article.mapa__avulso div.mapa__localizacao__avulso iframe { width: 100%; height: 400px;} section#avulso__informacoes form { background-color: #0d475e; width: 100%; height: 100%; padding: 40px 0px; margin-top: 30px;} section#avulso__informacoes form h2 { width: 100%; max-width: 1200px; height: auto; margin: 0px auto; font-size: 20px; color: #efe4ca; font-weight: 600; padding: 10px 0px; } section#avulso__informacoes form div.formContainer { width: 100%; max-width: 1200px; height: auto; margin: 30px auto; display: flex; flex-direction: column; gap: 20px;} section#avulso__informacoes form div.formContainer div.campo__form { padding: 20px; display: flex; justify-content: space-between; gap: 20px; } section#avulso__informacoes form div.formContainer div.campo__form label { width: 100%; padding: 0px 10px; border-bottom: 1px solid #efe4ca;; } section#avulso__informacoes form div.formContainer div.campo__form input { padding: 20px 0px; width: 100%; color: #efe4ca; } section#avulso__informacoes form div.formContainer div.campo__form input::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer textarea { width: 100%; height: 120px; padding: 20px 0px; border-bottom: 1px solid #efe4ca; max-width: 1516px; margin: 0px auto; color: #efe4ca;} section#avulso__informacoes form div.formContainer div.text__container { padding: 0px 20px; } section#avulso__informacoes form div.formContainer textarea::placeholder { color: #efe4ca; font-size: 20px; } section#avulso__informacoes form div.formContainer button { margin: 20px 0px 0px 0px; border: 2px solid #efe4ca; width: 300px;padding: 20px 0px; border-radius: 20px; font-weight: 600; display: flex; gap: 10px; justify-content: center; align-items: center; color: #efe4ca; cursor: pointer; } /* #modalFotos { background-color: chocolate; } */ /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { padding: 60px 20px 120px 20px; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto;position: relative; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter {background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px;} .footer__container { padding: 60px 30px; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1516px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ }