/* ============================================================ Páginas institucionais (Sobre Nós, Contato, Cadastre seu Imóvel, Políticas de Privacidade) — banner de título + conteúdo Valores extraídos do CSS real (post-92.css e afins) ============================================================ */ .pagina-titulo { background: var(--cor-primaria); padding: 50px; text-align: center; } .pagina-titulo h2 { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; color: var(--cor-branco); margin: 0; } /* ---------- Sobre Nós ---------- */ /* Este bloco é o ÚNICO da página que não tem `max-width: 1200px`: ele ocupa a largura toda da tela pra foto poder encostar na borda direita. O texto não fica solto por causa disso — o `padding-left` do `.sobre-texto` calcula sozinho onde ficaria a margem esquerda dos 1200px e se alinha com o resto do site. Em tela menor que 1200 o `max()` cai pro espaçamento normal. */ .sobre-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; } .sobre-texto { align-self: center; padding: var(--espaco-secao) 60px var(--espaco-secao) max(var(--espaco-lateral), (100vw - 1200px) / 2 + var(--espaco-lateral)); } /* ⚠️ A cor destes dois é AZUL (`--cor-primaria`), não o quase-preto padrão. Estava errado: eu tinha deixado `--cor-secundaria` e a regra global de h1..h6 do base.css também pinta de escuro. No site atual os três títulos desta coluna são azuis — post-92.css, elementos 46679fb / 82a246c / 6577e9f. Entrelinha 36px no principal e 34px nos dois de seção, também do CSS real. */ .sobre-texto__titulo { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 800; line-height: 36px; color: var(--cor-primaria); margin: 0 0 20px; } .sobre-texto h2 { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; line-height: 34px; color: var(--cor-primaria); margin: 20px 0 10px; } .sobre-texto p { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 400; color: var(--cor-texto); line-height: 1.6; margin: 0 0 12px; } /* A foto sangra: ocupa a metade direita inteira, encostando no topo, na base e na borda da tela. Sem canto arredondado, sem moldura, sem sombra — é o arranjo que imobiliária de alto padrão usa, e o recorte orgânico de "gota" que estava aqui é justamente o que datava a página (02/08/2026). ⚠️ O `Pagina-Sobre-Nos-1000x1000-1.png` tem a GOTA GRAVADA DENTRO DELE, com os cantos transparentes — não é efeito de CSS. Não existe versão retangular nem no WordPress nem na pasta do cliente. Por isso a foto é ampliada e sobra pra fora da moldura: o que aparece é só o miolo, e a borda ondulada fica escondida do lado de fora. Se escapar alguma fresta vazada na lateral, é só aumentar o `--corte-gota`. Quando chegar o original retangular, zerar esse valor. */ .sobre-imagem { position: relative; overflow: hidden; min-height: 480px; --corte-gota: 8%; } .sobre-imagem img { position: absolute; top: calc(var(--corte-gota) * -1); left: calc(var(--corte-gota) * -1); width: calc(100% + var(--corte-gota) * 2); height: calc(100% + var(--corte-gota) * 2); max-width: none; object-fit: cover; display: block; } .btn-whatsapp-pill { display: inline-flex; align-items: center; gap: 8px; background: #117D09; color: var(--cor-branco); padding: 12px 28px; border-radius: 30px; font-family: var(--fonte-titulo); font-weight: 500; font-size: 15px; text-decoration: none; margin-top: 10px; } .btn-whatsapp-pill svg { width: 18px; height: 18px; fill: currentColor; } /* No celular vira uma coluna só, com a foto EM CIMA e ainda sangrando de ponta a ponta — é o que dá o ar de revista. A altura fixa mantém a foto deitada; quadrada ela comeria meia tela antes do texto começar. */ @media (max-width: 768px) { .sobre-layout { grid-template-columns: 1fr; } .sobre-texto { order: 2; padding: var(--espaco-secao) var(--espaco-lateral); } .sobre-imagem { order: 1; min-height: 0; height: 300px; } } @media (max-width: 480px) { .sobre-texto__titulo { font-size: 25px; line-height: 1.2; } .sobre-imagem { height: 240px; } } /* ---------- Sobre Nós · Nossos Diferenciais ---------- Mesmo widget (image-box) dos cards "Alugue/Compre/Anuncie" da home, com os valores desta página: post-92.css, elementos 0091849 (linha) e 846f05b / a35daa3 / 5523a46 (cards). Largura 32% com gap de 2%, padding 30px, raio 10px, ícone a 30%. O card do MEIO é laranja `#E48B05` — igual à home, não é engano. */ .diferenciais { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); } .diferenciais__lista { display: flex; flex-direction: row; justify-content: center; gap: 2%; } .diferenciais__card { width: 32%; background: var(--cor-primaria); padding: 30px; border-radius: 10px; text-align: center; } .diferenciais__card--destaque { background: #E48B05; } .diferenciais__icone { width: 30%; margin: 0 auto 15px; transition: transform .3s; } .diferenciais__card:hover .diferenciais__icone { transform: scale(1.1); } /* 28px/600 e 16px/400 não estão no post-92.css: são o `h3` (1.75rem) e o `p` (1rem) do tema, que o widget não sobrescreve. Mesmos valores já usados e aprovados nos cards da home. */ .diferenciais__titulo { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--cor-branco); margin: 0 0 10px; transition: color .3s; } /* Hover amarelo só nos dois azuis — o laranja do meio não tem essa regra no site atual, e amarelo sobre laranja não teria contraste nenhum. */ .diferenciais__card:not(.diferenciais__card--destaque):hover .diferenciais__titulo { color: var(--cor-destaque); } .diferenciais__desc { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--cor-branco); margin: 0; } /* Três cards de 32% com 30px de padding espremem o texto demais antes disso. No site atual eles empilham só a partir de 480px, mas lá o conteúdo é idêntico ao da home, que já empilha em 768 — mantido igual à home pra não ter duas réguas diferentes pro mesmo card. */ @media (max-width: 768px) { .diferenciais__lista { flex-direction: column; align-items: stretch; gap: 15px; } .diferenciais__card { width: 100%; } .diferenciais__icone { width: 25%; } .diferenciais__titulo { font-size: 24px; } } /* ---------- Sobre Nós · Venha Nos Visitar ---------- Não é um mapa incorporado do Google: no site atual são duas IMAGENS (print do mapa) dentro de um link pro Google Maps — uma versão larga pro desktop e uma mais alta pro celular, trocadas por `elementor-hidden-*`. Mantido igual: é mais leve e não carrega script de terceiro. */ .mapa { max-width: 1200px; margin: 0 auto; padding: 0 var(--espaco-lateral) var(--espaco-secao); } .mapa__link { display: block; } .mapa__img { width: 100%; height: auto; border-radius: 10px; } .mapa__img--celular { display: none; } @media (max-width: 480px) { .mapa__img--desktop { display: none; } .mapa__img--celular { display: block; } } /* ---------- Contato ---------- */ .contato-layout { max-width: 1200px; margin: 0 auto; padding: 50px; display: flex; gap: 40px; } .contato-info, .contato-form-col { width: 50%; flex: 0 0 50%; } /* 32px, não 28px. É o que faz ele parecer "Black": mesmo peso 800, mas quatro pixels maiores — o tamanho vem da regra `h2{font-size:32px}` do kit, porque o elemento (3d4e525) não declara tamanho nenhum. ⚠️ Isto NÃO é o `.bloco-titulo` do base.css. Aquele é o título de seção, centralizado, das faixas da home. Este é título de coluna de página interna, alinhado à esquerda — no site atual os dois têm tamanhos diferentes mesmo. */ .contato-info__titulo { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 800; line-height: 36px; color: var(--cor-primaria); margin: 0 0 20px; } .contato-info__lista { list-style: none; margin: 0 0 24px; padding: 0; } .contato-info__lista li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 500; color: var(--cor-texto); } /* Ícones AMARELOS e grandes (30px) — estavam cinza e com 18px. O amarelo é o que dá cor à coluna inteira; sem ele a página fica só azul e cinza. Valores do post-94.css, elemento 97b2875. */ .contato-info__lista .icon { width: 30px; height: 30px; fill: var(--cor-destaque); flex-shrink: 0; } .contato-info__lista a { color: inherit; } .contato-redes-titulo { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600; color: var(--cor-primaria); margin: 0 0 10px; } .contato-redes { display: flex; gap: 10px; margin-bottom: 24px; } /* Bolinha AMARELA com o glifo branco — estava ao contrário (azul com branco). No hover inverte: fundo branco, glifo amarelo. Elemento 3d149b3. */ .contato-redes a { width: 36px; height: 36px; border-radius: 50%; background: var(--cor-destaque); display: flex; align-items: center; justify-content: center; transition: background .3s; } .contato-redes svg { width: 16px; height: 16px; fill: var(--cor-branco); transition: fill .3s; } .contato-redes a:hover { background: var(--cor-branco); } .contato-redes a:hover svg { fill: var(--cor-destaque); } @media (max-width: 480px) { .contato-info__titulo { font-size: 30px; line-height: 1.2; } .contato-redes-titulo { font-size: 17px; } } /* ---------- Formulário (Contato e Cadastre seu Imóvel) ---------- As duas páginas usam EXATAMENTE o mesmo CSS no site atual — conferido no post-94 (`d241819`/`36c0fa9`) e no post-5190 (`79e1330`/`b364420`), campo por campo. Por isso as regras são compartilhadas em vez de duplicadas: mexeu aqui, as duas páginas andam juntas, como no original. */ /* O cartão não tem cor de fundo própria — o que o destaca do branco da página é só o raio de 10px e a sombra. Era o que faltava: sem eles o formulário ficava solto, sem separação nenhuma do resto (02/08/2026). */ .form-cartao { border-radius: 10px; box-shadow: 0 7px 10px rgba(0, 0, 0, .19); padding: 40px; } .form-subtitulo { text-align: center; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 500; color: #8D8989; margin: 0 0 16px; } .form-campo { margin-bottom: 15px; } /* CAIXA ALTA vem do CSS, não do texto digitado: assim o `