/* Busca de imóveis (busca.js): cartão claro sobre a foto do Diego na capa, e o mesmo cartão no topo da página de imóveis */
.bk { --bk-line: color-mix(in srgb, var(--ink) 11%, transparent); --bk-tint: color-mix(in srgb, var(--accent) 7%, #fff); color: var(--ink); text-align: left; font-family: var(--f-body); }
.bk-f { position: relative; }
.bk-corpo { background: var(--card); border-radius: 22px; padding: 8px; box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
.bk-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.bk-c { position: relative; grid-column: span 2; min-width: 0; display: grid; gap: 3px; padding: 11px 14px 10px; border-radius: 15px; transition: background .2s ease; }
.bk-c + .bk-c::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--bk-line); }
.bk-c:hover, .bk-c.on { background: var(--bk-tint); }
.bk-c.on::before, .bk-c:hover::before, .bk-c.on + .bk-c::before, .bk-c:hover + .bk-c::before { opacity: 0; }
.bk-c label { display: flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--f-body); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.bk-c label svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.bk-in { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.bk-in input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 3px 0 2px; font: 600 16px/1.25 var(--f-body); color: var(--ink); text-overflow: ellipsis; }
.bk-in input::placeholder { color: color-mix(in srgb, var(--ink) 48%, transparent); font-weight: 500; }
.bk-rs { font-style: normal; font-weight: 600; font-size: 14px; color: var(--muted); }
.bk-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.bk-x[hidden] { display: none; }
.bk-sa { flex: none; width: 20px; height: 20px; color: var(--muted); cursor: pointer; transition: transform .2s ease; }
.bk-sa svg { width: 100%; height: 100%; }
.bk-c.on .bk-sa { transform: rotate(180deg); color: var(--accent); }
.bk-c.tem .bk-sa { display: none; }
.bk-c:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* lista que abre embaixo do campo */
.bk-l { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: max(100%, 290px); max-height: min(340px, 52vh); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .5), 0 0 0 1px var(--bk-line); animation: bkAbre .18s ease; }
.bk-l[hidden] { display: none; }
@keyframes bkAbre { from { opacity: 0; transform: translateY(-6px); } }
.bk-l li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 9px 12px; border-radius: 11px; font-size: 15px; cursor: pointer; color: var(--ink); }
.bk-l li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-l li b { color: var(--accent); font-weight: 700; }
.bk-l li em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; min-width: 26px; text-align: center; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.bk-l li:hover, .bk-l li.at { background: var(--bk-tint); }
.bk-l li[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.bk-l li[aria-selected="true"] em { background: var(--accent); color: var(--accent-ink); }
.bk-l li.bk-todos { color: var(--muted); border-bottom: 1px solid var(--bk-line); border-radius: 11px 11px 0 0; margin-bottom: 4px; }
.bk-l li.bk-nada { cursor: default; color: var(--muted); font-size: 13.5px; white-space: normal; }

/* botão com a quantidade */
.bk-ir { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px; min-height: 56px; border: 0; border-radius: 15px; background: var(--accent); color: var(--accent-ink); font: 600 15.5px/1.1 var(--f-body); letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 28px -16px var(--accent); transition: transform .2s ease, filter .2s ease; }
.bk-ir:hover { filter: brightness(1.08); }
.bk-ir:active { transform: scale(.98); }
.bk-ir svg { width: 20px; height: 20px; flex: none; }
.bk-ir b { font-size: 18px; font-weight: 800; }

/* mais filtros */
.bk-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 2px; }
.bk-mais { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 4px; font: 600 13.5px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.bk-mais svg { width: 18px; height: 18px; color: var(--accent); }
.bk-mais small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.bk-mais[aria-expanded="true"] span { color: var(--accent); }
.bk-limpa { border: 0; background: none; font: 600 13px/1 var(--f-body); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
.bk-x2 { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: end; padding: 10px 12px 10px; margin-top: 6px; border-top: 1px solid var(--bk-line); }
.bk-x2[hidden] { display: none; }
.bk-gr { display: grid; gap: 8px; }
.bk-gr > span, .bk-gr > label { font: 600 10.5px/1 var(--f-body); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.bk-gr > div { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-p { min-height: 38px; min-width: 44px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--bk-line); background: #fff; font: 600 14px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.bk-p[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-cod input { width: 150px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bk-line); font: 600 15px/1 var(--f-body); color: var(--ink); background: #fff; outline: 0; }
.bk-cod input:focus { border-color: var(--accent); }

/* capa: o cartão sobre a foto */
.hero-busca .hero-txt { padding-bottom: 10px; }
#buscaCapa { width: 100%; margin-top: 18px; }
@media (min-width: 900px) {
  .hero-pessoa.hero-busca .hero-txt { max-width: min(760px, 62vw); padding-top: 16vh; }
  .hero-pessoa.hero-busca .hero-txt h1, .hero-pessoa.hero-busca .hero-txt p.sub { max-width: 560px; }
  .hero-busca .bk-pe .bk-mais, .hero-busca .bk-pe .bk-mais small { color: var(--ink); }
}
@media (max-width: 899px) {
  .bk-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-c { grid-column: span 1; padding: 10px 12px 9px; border-radius: 13px; }
  .bk-c.bk-tipo { grid-column: span 2; }
  .bk-c + .bk-c::before { display: none; }
  .bk-c { box-shadow: inset 0 -1px 0 var(--bk-line); }
  .bk-c.bk-cidade, .bk-c.bk-min { box-shadow: inset 0 -1px 0 var(--bk-line), inset -1px 0 0 var(--bk-line); }
  .bk-c.on, .bk-c:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
  .bk-ir { grid-column: span 2; margin: 8px 2px 2px; }
  .bk-in input { font-size: 16px; }
  .bk-c.bk-bairro .bk-l, .bk-c.bk-max .bk-l { left: auto; right: 0; }
  .bk-l { width: max(100%, min(300px, calc(100vw - 48px))); }
  .bk-pe { padding: 6px 4px 0; }
  .bk-mais small { display: none; }
  .bk-x2 { gap: 14px; padding: 12px 6px 8px; }
  .bk-cod input { width: 100%; }
  .bk-cod { flex: 1 1 100%; }
  .hero-pessoa.hero-busca .hero-txt { padding-top: 6px; }
  #buscaCapa { margin-top: 14px; }
  .hero-busca .bk-c { scroll-margin-top: 84px; }
}

/* página de imóveis: o mesmo cartão no topo, com o botão "Filtrar" no celular */
.bk-lista { margin: 0 0 8px; }
.bk-lista .bk-corpo { box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .45), 0 0 0 1px var(--bk-line); }
.bk-abre { display: none; }
@media (max-width: 899px) {
  .bk-lista .bk-abre { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--bk-line); border-radius: 16px; background: var(--card); font: 600 15px/1 var(--f-body); color: var(--ink); cursor: pointer; }
  .bk-lista .bk-abre svg { width: 20px; height: 20px; color: var(--accent); }
  .bk-lista .bk-abre .bk-nf:not(:empty) { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; display: grid; place-items: center; }
  .bk-lista .bk-corpo { display: none; margin-top: 10px; }
  .bk-lista.aberta .bk-corpo { display: block; }
}
.mais-im { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0 6px; }
.mais-im small { color: var(--muted); font-size: 13px; }
.bk-c.on { z-index: 41; }

/* capa só com "O que você busca?" e a busca já na primeira tela, no celular e no computador (Luiz 10/11) */
.hero-busca h1 { font-size: clamp(34px, 4.6vw, 66px); }
@media (min-width: 900px) {
  .hero-pessoa.hero-busca .hero-txt { padding-top: clamp(84px, 13vh, 140px); gap: 8px; }
  #buscaCapa { margin-top: 10px; }
}
@media (max-width: 899px) {
  .hero-pessoa.hero-busca .hero-fotos { aspect-ratio: auto; height: 46svh; max-height: none; }
  .hero-pessoa.hero-busca .hero-fotos .sl .fg { object-position: 50% 6%; }
  .hero-pessoa.hero-busca::after { height: calc(46svh + 2px); background: linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 62%, var(--dark) 100%); }
  .hero-pessoa.hero-busca .hero-txt { position: relative; margin-top: -54px; padding-top: 0; gap: 6px; }
  .hero-busca h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .hero-busca .hero-txt .olho { display: none; }
  #buscaCapa { margin-top: 8px; }
}

/* computador: a busca da capa em coluna (um campo embaixo do outro), mais fácil de entender, como a da MR (Luiz 10/11) */
@media (min-width: 900px) {
  .hero-pessoa.hero-busca .hero-txt { max-width: 430px; }
  .hero-pessoa.hero-busca .hero-txt h1 { max-width: none; white-space: nowrap; font-size: clamp(34px, 3.5vw, 54px); }
  .bk-hero .bk-corpo { padding: 10px; border-radius: 22px; }
  .bk-hero .bk-g { grid-template-columns: minmax(0, 1fr); }
  .bk-hero .bk-c { grid-column: 1 / -1; padding: 10px 14px 9px; gap: 4px; }
  .bk-hero .bk-c + .bk-c::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .bk-hero .bk-in input { font-size: 16.5px; }
  .bk-hero .bk-ir { grid-column: 1 / -1; margin: 8px 0 2px; min-height: 56px; font-size: 16px; }
  .bk-hero .bk-l { width: 100%; }
  .bk-hero .bk-pe { padding: 8px 6px 2px; }
  .bk-hero .bk-mais small { display: none; }
}

/* cada campo num retângulo próprio (Luiz 10/11: "tem que ter os retângulos nas pesquisas"); lista abre sem animação */
.bk-corpo { padding: 10px; }
.bk-g { gap: 8px; }
.bk-c { border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: #faf8f7; border-radius: 12px; box-shadow: none !important; }
.bk-c + .bk-c::before { display: none !important; }
.bk-c:hover { background: #fff; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bk-c.on, .bk-c:focus-within { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important; }
.bk-ir { margin: 2px 0 0 !important; }
.bk-l { animation: none; top: calc(100% + 6px); }
.bk-in input[readonly] { cursor: pointer; caret-color: transparent; }
@media (min-width: 900px) {
  .bk-hero .bk-g { gap: 7px; }
  .bk-hero .bk-c { padding: 8px 13px 7px; }
}
@media (max-width: 899px) {
  .bk-c { padding: 9px 11px 8px; }
}
/* o retângulo inteiro é clicável */
.bk-c, .bk-c label, .bk-c .bk-in, .bk-c input { cursor: pointer; }
.bk-in input:not([readonly]):focus { cursor: text; }
/* características em "Mais filtros" */
.bk-car { flex: 1 1 100%; }
.bk-cars { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-cp em { font-style: normal; font-size: 12px; opacity: .65; margin-left: 2px; }
.bk-cp[disabled] { opacity: .4; cursor: default; }
.mais-im[hidden] { display: none !important; }