, por tag) recebe margin-top:-75px em design-v2.css — pensado só pro overlap do hero da home. Sem seletor mais específico aqui essa margem negativa "vaza" pra cá também e puxa o conteúdo por baixo do header (mesmo problema, descoberto agora, também existe hoje em property-details.html — ver .pd-main lá). */ .site-main > main.imv-main { margin-top: 0; background: var(--dv2-bg); /* styles.css também dá main{position:relative;z-index:1} — isso cria um contexto de empilhamento novo aqui dentro, o que prende o z-index:3000 da gaveta de filtros (mobile) DENTRO desse contexto e impede que ela vença o .filters-overlay (que vive direto em , fora daqui). Sem necessidade de position:relative neste layout — nada dentro depende disso — então tira o contexto de vez. */ position: static; } /* Fase 3: o painel lateral de filtros saiu (virou barra no topo + modal), liberando a coluna esquerda pro padrão Airbnb/Booking -- lista à esquerda, mapa fixo à direita. grid-template-areas em vez de "order"/ flex: deixa explícito onde cada bloco (barra de filtros, lista, mapa) vai em cada breakpoint sem depender da ordem das 3 divs no HTML -- .imv-quickbar é a primeira só por acaso (é onde fez sentido no documento), o CSS que decide a posição visual de cada um. */ .imv-layout { display: grid; grid-template-columns: 1fr; grid-template-areas: "quickbar" "map" "content"; } .imv-quickbar { grid-area: quickbar; } .main-content { grid-area: content; } .imv-map-panel { grid-area: map; } @media (min-width: 1101px) { .imv-layout { grid-template-columns: minmax(0, 1fr) 42%; grid-template-areas: "quickbar quickbar" "content map"; gap: 28px; align-items: start; } } /* Desktop: mapa fixo (sticky) ao lado da lista, igual Airbnb/Booking. Mobile/tablet (<=1100px): as duas tentativas anteriores (sticky dentro de painel alto; depois mapa fixo + lista com margin-top pra "alcançar") erravam a experiência real -- o usuário mandou print do Google Maps/Airbnb mostrando o padrão certo: barra de filtros fixa no topo, MAPA OCUPANDO O RESTO DA TELA (não "atrás" de nada, visível o tempo todo), e a lista de imóveis num painel arrastável ("bottom sheet") que começa recolhido (só a contagem) e o usuário puxa pra cima pra ver os cards -- com o dedo, tempo real, não um toque que já abre direto (ver handleSheetDrag em js/imoveis-page-inline.js). Nessa versão a página em si não rola no mobile (tudo cabe numa tela: header + barra + mapa) -- só o painel arrastável e, dentro dele, a lista têm rolagem própria. O botão flutuante antigo "Ver mapa"/tela cheia não faz mais sentido (o mapa já está sempre visível) -- retirado. */ .imv-map-panel { border: 1px solid var(--dv2-line); background: var(--dv2-surface); overflow: hidden; } @media (min-width: 1101px) { .imv-map-panel { position: sticky; top: 24px; height: calc(100vh - 48px); } } @media (max-width: 1100px) { /* Nada rola por trás do painel arrastável -- só o próprio painel (ver .properties-container) tem overflow. Sem isso, um "elastic bounce" do body por baixo do painel fixo ficaria estranho. */ .site-main:has(> main.imv-main) { height: 100vh; overflow: hidden; } .imv-quickbar { position: fixed; top: var(--imv-header-h, 88px); left: 0; right: 0; z-index: 50; /* Empilha o botão "Filtros" em cima e os pills embaixo (pedido: "o filtro só o ícone em cima, filtros mais buscados abaixo") só invertendo a direção do flex -- .imv-quickbar já é flex, não precisa mexer no HTML nem no #quickbarPills por dentro (que continua com seu próprio wrap horizontal de sempre). */ flex-direction: column-reverse; align-items: stretch; margin-bottom: 0; } #quickbarPills { flex: none; /* Uma linha só, rolando na horizontal -- igual a fileira de chips do print de referência (Hotel/Wifi/Aparcamiento...). Sem isso os pills quebrariam em várias linhas (flex-wrap:wrap de sempre) e comeriam altura do mapa à toa. */ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .imv-filters-btn { align-self: center; } .imv-map-panel { position: fixed; /* Logo abaixo do header + barra de filtros (ambos medidos via JS, mesma técnica de --imv-header-h já usada) -- preenche o resto da tela até embaixo. */ top: calc(var(--imv-header-h, 88px) + var(--imv-quickbar-h, 96px)); left: 0; right: 0; bottom: 0; z-index: 1; border: none; } /* Painel arrastável (bottom sheet) com a lista -- ver js/imoveis-page-inline.js pro arrasto com o dedo em tempo real. Recolhido: só a alça (.imv-sheet-handle) visível, resto do painel (mesma altura de sempre, 85vh) fica deslocado pra baixo da tela via transform. --imv-sheet-y é setado no arrasto (tempo real) e pela classe .imv-sheet-expanded (aberto) no soltar/toque. */ /* .imv-layout .main-content (2 classes) em vez de .main-content puro -- a regra incondicional de .main-content mais abaixo neste arquivo (margin-left/padding/background) tem a mesma especificidade (1 classe) e vem DEPOIS no arquivo, então venceria o padding:0 e position:fixed daqui num empate por ordem. Com 2 classes, ganha sempre, não importa a ordem. */ .imv-layout .main-content { position: fixed; left: 0; right: 0; bottom: 0; height: 85vh; z-index: 10; display: flex; flex-direction: column; padding: 0 !important; background: var(--dv2-bg) !important; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.3); /* --imv-sheet-handle-h é medido via JS (altura real da alça, varia com fonte/zoom do aparelho) -- 74px é só o chute inicial antes do JS rodar. */ transform: translateY(var(--imv-sheet-y, calc(100% - var(--imv-sheet-handle-h, 74px)))); transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .imv-layout .main-content.imv-sheet-dragging { transition: none; } .imv-layout .main-content.imv-sheet-expanded { --imv-sheet-y: 0px; } .properties-container { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 24px; } /* Alça do painel arrastável -- é um