/* =========================================================
   Portada «buscador» (index.html con <body data-portada="buscador">; montar.py: portada: "buscador").
   Banda en el color de marca con su frase y un texto corto, buscador Comprar / Vender, chips de municipio y, debajo,
   la rejilla de casas. Sin foto grande. Lee solo las variables de base.css; el color de marca (--c-acento) es la
   superficie grande, como la banda de valoración. Movimiento: solo opacity y transform.
   ========================================================= */

/* ---------- Cabecera: barra clara desde arriba (no hay foto detrás: el logo normal sobre el papel) ---------- */
html:not(.menu-open) body[data-portada="buscador"] .header { color: var(--c-texto); }
html:not(.menu-open) body[data-portada="buscador"] .header:not(.is-dark)::before { opacity: 1; background: var(--c-fondo); border-color: var(--line); }
body[data-portada="buscador"] .header:not(.is-dark) .brand__logo[data-logo="normal"] { display: block; }
body[data-portada="buscador"] .header:not(.is-dark) .brand__logo[data-logo="claro"] { display: none; }
html:not(.menu-open) body[data-portada="buscador"] .header:not(.is-dark) .header__cta {
  background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto));
}

/* ---------- Banda de marca ---------- */
.busca {
  --b-fondo: var(--c-acento); --b-tinta: var(--c-sobre-acento, var(--c-texto));
  padding: calc(var(--header-h) + clamp(28px, 5vh, 52px)) 0 28px;
  background: var(--b-fondo); color: var(--b-tinta);
}
.busca ::selection { background: var(--b-tinta); color: var(--b-fondo); }
.busca__cab { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.busca__titulo {
  max-width: 16em; font-weight: var(--peso-display, 500); letter-spacing: -.025em; line-height: 1.04;
  font-size: calc(clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem) * var(--escala));
}
.busca__dek { max-width: 40ch; justify-self: end; font-size: 17px; line-height: 1.45; }
.busca__dek:empty { display: none; }

/* ---------- Buscador: papel con campos separados por filetes ---------- */
.bq { --bq-px: 24px; --bq-py: 14px; margin-top: clamp(24px, 4vh, 40px); background: var(--c-fondo); color: var(--c-texto); }
.bq__modos { display: flex; gap: 28px; padding: 0 var(--bq-px); border-bottom: 1px solid var(--line); }
.bq__modos button { position: relative; height: 48px; font-size: 15px; color: var(--mute); }
.bq__modos button[aria-selected="true"] { color: var(--c-texto); }
.bq__modos button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-acento);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out);
}
.bq__modos button[aria-selected="true"]::after { transform: scaleX(1); }

.bq__campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.bq__campos[hidden] { display: none; }
.bq__campo { position: relative; display: block; padding: var(--bq-py) var(--bq-px); border-right: 1px solid var(--line); min-width: 0; }
.bq__campo > span:first-child { display: block; margin-bottom: 2px; font-size: 12px; line-height: 18px; letter-spacing: .02em; color: var(--mute); }
/* El botón del desplegable cubre toda la casilla (etiqueta incluida), para que un clic en cualquier punto lo abra */
.bq__campo .sel { display: block; }
.bq__campo .sel__btn {
  width: calc(100% + 2 * var(--bq-px)); max-width: none; margin: calc(-1 * (var(--bq-py) + 20px)) calc(-1 * var(--bq-px)) calc(-1 * var(--bq-py));
  padding: calc(var(--bq-py) + 20px) calc(var(--bq-px) + 22px) var(--bq-py) var(--bq-px);
  font-size: 17px; line-height: 24px; color: var(--c-texto); border: 0;
}
.bq__campo .sel__btn::after { right: var(--bq-px); top: calc(50% + 10px); }
.bq__campo .sel__btn:focus-visible { outline: 2px solid var(--c-texto); outline-offset: -4px; border-radius: 0; }
.bq__campo .sel__btn:hover { background: var(--c-suave); }
/* Sin el desplegable propio (sin JS): <select> nativo con flecha propia. Misma altura que el botón que lo sustituye (sin salto al montarlo) */
.bq__campo select { display: block; width: 100%; height: 24px; min-height: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 17px; line-height: 24px; color: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; }
.bq__campo:not(.sel-on)::after {
  content: ""; position: absolute; right: var(--bq-px); bottom: 26px; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--c-texto); border-bottom: 1.5px solid var(--c-texto); transform: rotate(45deg);
}
.bq__campos .sel-on::after { display: none; }

.bq__ir {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 72px; padding: 0 36px; font-size: 16px; background: var(--c-texto); color: var(--c-fondo);
}
.bq__ir::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: 0; transition: opacity .6s var(--ease-out); }
.bq__ir:hover::after { opacity: .5; }
.bq__ir:focus-visible { outline: 2px solid var(--c-fondo); outline-offset: -5px; }
.bq__campos--vender { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-left: var(--bq-px); }
.bq__vende { font-size: 17px; }

/* ---------- Chips de municipio: una fila con scroll propio (nunca ensancha la página) ---------- */
.bq__zonas {
  display: flex; gap: 8px; min-height: 46px; margin: 14px calc(var(--pad) * -1) 0; padding: 4px var(--pad);
  overflow-x: auto; scrollbar-width: none;
}
.bq__zonas::-webkit-scrollbar { display: none; }
.bq__chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 8px; height: 38px; padding: 0 16px; line-height: 36px;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent); border-radius: 999px; font-size: 14px;
  transition: opacity .4s var(--ease-out);
}
.bq__chip small { font-size: 12px; font-variant-numeric: tabular-nums; }
.bq__chip:hover { border-color: currentColor; }
.bq__chip[aria-pressed="true"] { background: var(--b-tinta); border-color: var(--b-tinta); color: var(--b-fondo); }
.bq__chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Rejilla de casas: 4 columnas en escritorio; 8 casas, 4 en móvil. Reserva su sitio (sin saltos al pintar) ---------- */
.busca-casas { padding: clamp(28px, 4vw, 44px) 0 var(--section-y); }
.busca-casas__rejilla {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3vw, 44px) var(--gap);
  min-height: 600px;
}
/* «Ver todas» espera a que haya casas: si no, asomaría en la pantalla y las tarjetas lo empujarían (CLS) */
.js .busca-casas:not(.is-pintada) .busca-casas__todas { visibility: hidden; }
.busca-casas__rejilla[hidden] { display: none; }
.busca-casas .card__media { aspect-ratio: 4 / 3; }
.busca-casas .card__body { display: block; }
.busca-casas .card__precio { margin-top: 2px; font-size: 20px; }
.busca-casas .card__title { font-size: 15px; }
/* Las fotos de la primera fila no esperan al load (base.css las retiene hasta entonces para no competir con la portada,
   que aquí no tiene foto): son lo primero que se ve bajo la banda */
.js:not(.is-loaded) .busca-casas__rejilla .card:nth-child(-n + 4) .card__media img { display: block; }
.busca-casas__vacio { padding: 28px 0; }
.busca-casas__todas { display: flex; justify-content: flex-end; margin-top: clamp(28px, 3vw, 44px); }

@media (max-width: 1099px) {
  .busca-casas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 400px; }
}
@media (max-width: 767px) {
  .busca { padding-bottom: 20px; }
  .busca__cab { grid-template-columns: 1fr; gap: 12px; }
  .busca__dek { justify-self: start; font-size: 16px; }
  .bq { --bq-px: 16px; --bq-py: 10px; }
  .bq__modos { gap: 24px; }
  /* Dos campos por fila: el botón «Buscar» cabe en la primera pantalla, por encima de la barra inferior */
  .bq__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bq__campo { border-right: 0; border-bottom: 1px solid var(--line); }
  .bq__campo:nth-child(odd) { border-right: 1px solid var(--line); }
  .bq__ir { grid-column: 1 / -1; }
  .bq__ir { min-height: 56px; }
  .bq__campos--vender { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px 0 0 0; }
  .bq__vende { padding: 0 var(--bq-px) 14px; }
  .busca-casas__rejilla { grid-template-columns: minmax(0, 1fr); min-height: 380px; }
  .busca-casas__rejilla .card:nth-child(n + 5) { display: none; }
  .js:not(.is-loaded) .busca-casas__rejilla .card:nth-child(n + 2) .card__media img { display: none; }
  .busca-casas__todas { justify-content: flex-start; }
}