/* CJC Imóveis — estilos do catálogo. Portados de imoveis.html do protótipo. Base compartilhada em cjc.css. */ .page-catalogo{padding-top:var(--header-h-compact)} .cat-head{padding:54px 0 26px} .cat-head .row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap} .cat-head h1{font-size:clamp(40px,5.2vw,74px);letter-spacing:-.056em;line-height:.94;margin-top:10px} .cat-head p{color:var(--muted);margin-top:16px;max-width:58ch;font-size:16px;line-height:1.55} /* Barra de filtros fixa */ .filterbar{position:sticky;top:var(--header-h-compact);z-index:50;background:rgba(245,245,242,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0} .filterbar .inner{display:flex;gap:8px;align-items:center} .fsel{height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 34px 0 16px;font-size:13px;font-weight:600;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;color:var(--ink);flex:0 0 auto;max-width:200px;transition:.2s} .fsel:hover{border-color:var(--line-strong)} .fsel.on{background-color:#111;color:#fff;border-color:#111;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} .fchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px;margin-left:6px} .fchips::-webkit-scrollbar{display:none} .fchips .chip{flex:0 0 auto;padding:10px 14px;font-size:12px} .fright{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto} .view-toggle{display:inline-flex;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;gap:2px} .view-toggle button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:650;color:#5f5e59;display:inline-flex;gap:6px;align-items:center} .view-toggle button.active{background:#111;color:#fff} .results-head{display:flex;justify-content:space-between;align-items:center;padding:28px 0 18px;gap:20px;flex-wrap:wrap} .results-head strong{font-size:16px;letter-spacing:-.02em} .results-head .muted{font-size:13px} .results-head .right{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .active-filters{display:flex;gap:6px;flex-wrap:wrap} .active-filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px 6px 12px;font-size:12px;display:inline-flex;gap:6px;align-items:center;color:#3f3e3a} .active-filters button:hover{background:#111;color:#fff;border-color:#111} .clear{font-size:12px;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0} /* Layout resultados + mapa */ .layout{display:grid;grid-template-columns:1fr;gap:18px;padding-bottom:70px;align-items:start} .layout.split{grid-template-columns:minmax(0,1fr) minmax(360px,42%)} .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px} .layout.split .results-grid{grid-template-columns:repeat(2,1fr)} .layout.split .prop-media{height:clamp(240px,22vw,340px)} .layout.split .prop-title{font-size:19px} /* Três por linha no desktop, duas no tablet, uma no celular. Com três colunas o card fica mais estreito, então baixa de altura e o título encolhe — senão sobra caixa e falta foto. */ .dev-results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .dev-results .dev-card{height:470px} .dev-results .dev-copy h3{font-size:clamp(24px,2.1vw,32px)} .dev-results .dev-copy{left:22px;right:22px;bottom:20px} .dev-results .dev-meta{gap:12px 16px;margin-top:10px} .layout.split .dev-results{grid-template-columns:1fr} .layout.split .dev-results .dev-card{height:460px} .map-col{display:none;position:sticky;isolation:isolate;top:calc(var(--header-h-compact) + 82px);height:calc(100vh - var(--header-h-compact) - 110px);min-height:520px;border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);background:#e8e6e0} .layout.split .map-col{display:block} #catMap{height:100%;width:100%} /* Estava sobre o “+” do zoom, que mora no canto de cima: em todas as larguras só o “−” ficava clicável. */ .map-hint{position:absolute;z-index:500;left:14px;bottom:14px;background:rgba(250,250,248,.94);backdrop-filter:blur(12px);border-radius:14px;padding:10px 14px;font-size:12px;color:#3f3e3a;box-shadow:0 10px 30px rgba(0,0,0,.1)} .prop-card.hot .prop-media{outline:3px solid #111;outline-offset:-3px} .dev-card.hot{outline:3px solid #111;outline-offset:-3px} .load-more{display:flex;justify-content:center;margin-top:44px} .empty{padding:90px 24px;text-align:center;border:1px dashed var(--line-strong);border-radius:28px;grid-column:1/-1} .empty h3{font-size:30px;letter-spacing:-.04em;margin-bottom:10px} .empty p{color:var(--muted);margin-bottom:22px} /* Banda CTA */ .cta-band{margin:30px 0 90px;background:#111;color:#fff;border-radius:32px;padding:clamp(30px,4vw,50px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .cta-band h3{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.045em;line-height:1;max-width:22ch} .cta-band p{color:#a7a7a2;margin-top:10px;max-width:52ch} /* Modal de filtros avançados */ .adv-group{margin-bottom:22px} .adv-group h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px} .adv-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* O mapa empilhado sobre a lista tirava o hover de cena: os cards começavam depois de 520px de mapa, e a dica “passe o mouse nos cards” prometia algo que já tinha saído da tela. Grudado e mais baixo, ele fica visível enquanto a lista rola por baixo. */ @media(max-width:1100px){ .results-grid{grid-template-columns:repeat(2,1fr)} .dev-results{grid-template-columns:repeat(2,1fr)}.dev-results .dev-card{height:500px} .layout.split{grid-template-columns:1fr} .map-col{position:sticky;top:calc(var(--header-h-compact) + 72px);height:min(40vh,340px);min-height:0;order:-1;margin-bottom:18px} } /* As coleções saem cedo: sozinhas elas medem 870px e empurravam o Lista|Mapa para fora da tela num laptop de 13". Elas continuam na página de coleções, que é onde alguém as procura. */ @media(max-width:1300px){.fchips{display:none}} @media(max-width:680px){ .cat-head{padding:34px 0 20px}.cat-head p{font-size:15px} .filterbar .inner{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.filterbar .inner::-webkit-scrollbar{display:none} .fsel{max-width:none}.fright{margin-left:0} .results-grid{grid-template-columns:1fr}.dev-results{grid-template-columns:1fr}.dev-results .dev-card{height:460px} .prop-media{height:clamp(300px,70vw,420px)} .map-col{position:static;height:min(60vh,440px);min-height:0;border-radius:22px;margin-bottom:16px} .cta-band{border-radius:26px} } /* Ajustes de WordPress */ .sem-imagem{position:absolute;inset:0;display:grid;place-items:center;background:var(--sand);color:var(--muted);font-size:13px} .segmented a{border:0;background:transparent;padding:9px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:620;color:#5f5e59;transition:.25s} .segmented a.active{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.08)} .view-toggle a{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:650;color:#5f5e59} .view-toggle a.active{background:#111;color:#fff} .fchips .chip{flex:0 0 auto;padding:10px 14px;font-size:12px} .active-filters a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px 6px 12px;font-size:12px;display:inline-flex;gap:6px;align-items:center;color:#3f3e3a} .active-filters a:hover{background:#111;color:#fff;border-color:#111} .active-filters a.clear{border:0;background:none;text-decoration:underline;color:var(--muted);padding:6px 2px} .active-filters a.clear:hover{background:none;color:var(--ink)} .ordenar-form{margin:0} .cat-pagination{display:flex;justify-content:center;margin-top:44px} .cat-pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .cat-pagination .page-numbers{min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:620;color:#3f3e3a;transition:.2s} .cat-pagination .page-numbers:hover{border-color:var(--ink)} .cat-pagination .page-numbers.current{background:#111;color:#fff;border-color:#111} .cat-pagination .dots{border:0;background:none} .cta-band{color:#fff;text-decoration:none} .cta-band:hover .btn{transform:translateY(-1px)} .map-vazio{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;padding:24px;text-align:center} /* ── Família de produto ─────────────────────────────────────────────── A primeira pergunta do catálogo — o que estou comprando — abre a barra, antes de cidade e de valor: é a única que a pessoa já sabe responder ao chegar. Chip, e não seletor, porque as quatro opções cabem na tela e escolha visível vale mais que escolha escondida. */ .ffam{display:flex;gap:6px;align-items:center;flex:0 0 auto} .ffam .chip{height:44px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;font-size:13px;border-radius:999px} .ffam .chip .n{font-size:11px;font-weight:640;color:var(--muted-2);font-variant-numeric:tabular-nums;transition:.25s} .ffam .chip:hover .n,.ffam .chip.active .n{color:rgba(255,255,255,.6)} /* Zerado pelos outros filtros continua à vista: some da tela e a pessoa deixa de saber que a família existe. Só não é clicável. */ .ffam .chip.off{opacity:.42;pointer-events:none} .ffam::after{content:"";flex:0 0 1px;width:1px;height:26px;background:var(--line);margin:0 3px} /* O carimbo de produto abre o eyebrow do card e vem mais claro que o resto da linha: é o que a pessoa está comprando. */ .dev-copy .eyebrow .carimbo{color:rgba(255,255,255,.94);font-weight:680} /* Mesmo peso do carimbo de produto: onde fica pesa tanto quanto o que é. */ .dev-copy .eyebrow .eb-cidade{color:rgba(255,255,255,.94);font-weight:680} .prop-carimbo{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:640;color:var(--muted);margin-bottom:6px} @media(max-width:680px){ .ffam{gap:5px} .ffam .chip{height:40px;padding:0 13px;font-size:12px;gap:6px} .ffam::after{height:22px} } /* Os recortes secundários — cidade, estágio, valor — numa tira própria, para a família poder ter a dela. */ .fsels{display:flex;gap:8px;align-items:center;min-width:0} /* A barra quebra linha em vez de rolar de lado. Rolar parecia a solução óbvia — e era, enquanto a barra tinha uma linha de chips de 870px. Só que `overflow-x:auto` faz o eixo vertical virar `auto` junto, e o painel do seletor abre *dentro* dessa caixa: no celular sobravam 12px dos 126px da lista de cidades. A barra abria um painel que ela mesma cortava. Com quatro seletores e nada mais, quebrar linha resolve os dois problemas: o que não cabe desce, e nada é cortado. */ @media(max-width:1000px){ .filterbar .inner{flex-wrap:wrap;row-gap:10px} .fright{margin-left:0} } @media(max-width:680px){ /* Duas perguntas, duas linhas. Numa tira só de rolagem, os cinco chips empurravam "Todas as cidades" para 480 px fora da tela: quem quisesse filtrar por cidade teria de arrastar a barra inteira, e "Comercial" nunca apareceria. Aqui a família fica em cima e é ela que gruda no topo — 46 px, em vez dos 72 px da barra inteira. Os recortes secundários rolam para fora da tela com o resto da página, como o conteúdo deles merece. */ .filterbar{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0;border-bottom:0;padding:0} .filterbar .inner{display:block;overflow:visible;padding:0} .filterbar .wrap{-webkit-mask-image:none;mask-image:none} /* Duas colunas: os quatro seletores cabem em duas linhas de duas, e nenhum sai da tela. A grade também dá largura igual a todos, o que alinha melhor que quatro pílulas de larguras diferentes. */ .fsels{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-block:12px;width:100%} .fsels>*{min-width:0} .fsels .fsel-botao{width:100%;max-width:none;text-align:left} } /* ── Seletor desenhado ──────────────────────────────────────────────── O