/* -------------------------------------------------------------------------- Las variables que necesita ESTE archivo y que styles.css no tiene. Viven aquí y no en buscador-base.css porque la página de búsqueda del sitio carga solo este archivo (su reset, su tipografía y su nav ya vienen de styles.css). Si estuvieran en la base, en esa página `--pfsnav-h` saldría vacía y la barra de filtros se pegaría en top:0, debajo del nav y por tanto invisible en cuanto se scrollea. Las de marca (--midnight, --sand, --ivory…) NO se repiten: en la landing las trae la base y en el buscador del sitio, styles.css. -------------------------------------------------------------------------- */ :root{ /* Alto del nav sticky = 104 de barra + 3 del borde arena. Lo consume la barra de filtros para pegarse DEBAJO y no quedar tapada. Eran 88+3 hasta que la barra con enlaces pasó a ser la del sitio entero (ago-2026); este valor es una COPIA del de styles.css y hay que moverlo con él. */ --pfsnav-h:107px; /* Azul de selección del mapa. NO es color de marca: existe solo para el estado activo de pines y discos, donde el navy se pierde contra el fondo. Fuera del mapa, azul = --midnight. */ --azul-sel:#1668a5; --font-serif:Georgia,'Times New Roman',serif; --font-body:'Montserrat','Helvetica Neue',Arial,sans-serif; } @media (max-width:640px){ /* La barra baja a 80 + 3 del borde. Si esta variable no acompaña, la fila de filtros se pega 16 px más abajo de lo que debe y deja una franja de fondo colándose entre las dos. */ :root{--pfsnav-h:83px;} } /* ---- Barra de búsqueda + filtros (fila 2 de Zillow) ---- top:var(--pfsnav-h) y no top:0. Ahora hay DOS barras pegajosas: el nav del sitio (z-index 60) y ésta (20). Con las dos en top:0 se superponen y el nav, que va por encima, tapa entera la fila de filtros — la landing se queda sin precio, sin habitaciones y sin operación en cuanto se scrollea. Pegándola justo debajo del nav las dos quedan visibles y apiladas. */ .searchbar{background:#fff;border-bottom:1px solid #e3e4e7;position:sticky;top:var(--pfsnav-h);z-index:20;} /* Sin `max-width:1560px;margin:0 auto`: la fila va de lado a lado como la de Zillow, y como ya iban el nav (.pfsnav__inner es width:100%) y el split de abajo. Con el tope puesto, en una pantalla ancha la barra quedaba centrada y más estrecha que el mapa que tiene debajo. */ .searchbar__in{padding:10px 24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;} /* La caja de búsqueda crece con la ventana pero CON TOPE, como la de Zillow. Antes se quedaba con todo el sobrante y a 1440 medía 1.015 px contra los 411 px de Zillow —dos veces y media— para escribir "Brickell": una caja de texto de un metro de ancho leída como el elemento dominante de la página. La referencia sale de medir su página, no a ojo (captura a 1440, ago-2026): su input va de x=90 a x=500, o sea 411 px = 28,5% de la ventana, con la píldora "For sale" pegada detrás a 8 px. El tope de aquí es DELIBERADAMENTE más ancho que el de Zillow: se probó con `min(620px, 30vw)` —427 px a 1440, o sea el de ellos clavado— y Mateo lo pidió un poco más largo (ago-2026). Con `min(680px, 35vw)` son 498 px a 1440 y 672 a 1920: ~21% por encima de la proporción de Zillow, todavía lejos de los 1.015 px de los que venía. El tope duro evita que en un monitor ultraancho vuelva a ser una pista de aterrizaje. El `flex-basis` de 380 px se queda como SUELO: por debajo de ~1270 px de ventana el 30vw sería más estrecho que eso y la caja dejaría de admitir una dirección entera. Cuidado con el hueco de la derecha: el sobrante que la caja ya no se queda se va al final de la fila (~600 px a 1440). En Zillow ese hueco son 72 px, pero porque su barra lleva SEIS controles —For sale, Price, Beds & baths, Property type, Filters, Save search— y esta lleva tres. Si algún día estorba, la salida es añadir controles o estirar las píldoras, no volver a estirar la caja. */ .zsearch{position:relative;display:flex;align-items:center;flex:1 1 380px;min-width:220px;} /* El tope SOLO en escritorio. Suelto se aplicaba también en móvil, donde 35vw de 390px son 136px: el `min-width:220px` ganaba, la caja dejaba de llenar su fila y el placeholder salía cortado ("Buscar zona o dire…") con 140px de hueco muerto al lado. En móvil la caja tiene que ocupar la fila entera — es el control principal y no compite con nada, porque las píldoras van debajo. */ @media (min-width:1025px){ .zsearch{max-width:min(680px,35vw);} } .zsearch input{ width:100%;font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--midnight); border:1px solid #d4d6da;border-radius:8px;padding:10px 66px 10px 14px;background:#fff; } .zsearch input::-webkit-search-cancel-button{display:none;} /* Anillo de foco en azul de marca (--midnight), no en arena: decisión de Mateo (ago-2026). Es lo que se enciende al hacer clic en la caja de búsqueda. La alfa baja de 0.2 a 0.15 porque el navy es bastante más oscuro que el arena y al mismo valor el halo pesaba más que el borde. */ .zsearch input:focus{outline:none;border-color:var(--midnight);box-shadow:0 0 0 3px rgba(7,32,49,0.15);} .zsearch__clear,.zsearch__go{position:absolute;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;} .zsearch__clear{right:38px;color:#9aa0a6;} .zsearch__clear svg{width:16px;height:16px;} .zsearch__go{right:10px;color:var(--midnight);} /* Sugerencias de ZONA bajo el buscador. La caja buscaba solo direcciones dentro de la zona actual, y buscar el nombre de otra zona no llevaba a ninguna parte — ni siquiera decía que esa zona existe. Ahora el nombre de una zona es un destino. */ .zsug{ position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70; background:#fff;border:1px solid #e3e5e8;border-radius:8px; box-shadow:0 14px 34px rgba(7,32,49,0.16); list-style:none;margin:0;padding:5px 0;max-height:60vh;overflow-y:auto; } .zsug[hidden]{display:none;} .zsug__t{padding:6px 13px 4px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#9aa0a6;font-weight:700;} .zsug__i{display:block;} .zsug__b{ display:flex;align-items:center;gap:9px;width:100%;text-align:left; background:none;border:none;cursor:pointer;padding:8px 13px; font-family:var(--font-body);font-size:.88rem;color:var(--midnight); } .zsug__b:hover,.zsug__b.is-on{background:#f2f4f6;} .zsug__b[disabled]{cursor:default;color:#9aa0a6;} .zsug__pin{width:15px;height:15px;flex:none;color:var(--sand);} .zsug__n{margin-left:auto;font-size:.76rem;color:#9aa0a6;font-weight:600;} .zsearch__go svg{width:18px;height:18px;} /* ---- Barra de filtros: una fila de píldoras, como Zillow. ---- Fueron nativos de la barra. El nativo abre la lista del sistema operativo: en Windows sale un cuadro gris pegado, sin aire entre opciones, sin marcar la elegida más que con un resaltado, y no se puede tocar. Con diez escalones de precio eso es una lista ilegible. Este mantiene el teclado y aria (listbox/option), que es lo que de verdad aporta el nativo, y añade lo que faltaba: separación, la opción elegida con su palomita, y ancho suficiente para que no se corte el texto. Se usa para operación, precio, orden, unidades y moneda. */ .zdd{position:relative;display:inline-flex;} /* Rectángulo redondeado de 8 px, NO píldora. Los controles eran border-radius:100px y ése es el detalle que más delataba que la barra no era la de Zillow: la suya usa esquinas de 8 px en la caja de búsqueda y en los cinco filtros, y la píldora completa la reserva para las etiquetas dentro de las tarjetas. Mismo radio en .zpopbtn y .zfilbtn para que la fila se lea como un solo juego de controles. */ .zdd__btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--midnight); background:#fff;border:1px solid #d4d6da;border-radius:8px;white-space:nowrap; padding:10px 16px;cursor:pointer;line-height:1.2; transition:border-color .15s ease, box-shadow .15s ease; } .zdd__btn:hover{border-color:var(--midnight);} .zdd__btn:focus-visible{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(170,150,100,0.2);} .zdd.is-set .zdd__btn,.zdd.is-open .zdd__btn{border-color:var(--midnight);box-shadow:inset 0 0 0 1px var(--midnight);background:rgba(7,32,49,0.04);} .zdd__chev{width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;} .zdd.is-open .zdd__chev{transform:translateY(1px) rotate(-135deg);} .zdd__menu{ position:absolute;top:calc(100% + 8px);left:0;z-index:60; min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 28px)); max-height:min(58vh,380px);overflow-y:auto; background:#fff;border:1px solid #e3e4e7;border-radius:12px; box-shadow:0 16px 40px rgba(7,32,49,0.18); padding:6px;margin:0;list-style:none; } .zdd__menu[hidden]{display:none;} /* Anclado a la derecha para los controles del extremo derecho de la fila (unidades, moneda, orden): con left:0 se salen de la pantalla. */ .zdd--der .zdd__menu{left:auto;right:0;} .zdd__opt{ display:flex;align-items:center;gap:9px;width:100%; font-family:var(--font-body);font-size:.88rem;color:var(--midnight);text-align:left; background:none;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;line-height:1.3; } .zdd__opt:hover{background:rgba(7,32,49,0.06);} .zdd__opt.is-on{font-weight:700;background:rgba(7,32,49,0.04);} /* Hueco de la palomita reservado SIEMPRE, marcado o no: si solo existiera en la opción elegida, todas las demás se correrían al abrir el menú. */ .zdd__tick{width:14px;flex:none;color:var(--sand);font-weight:700;} /* El texto empuja: así la bandera queda pegada al borde derecho de la opción y todas quedan alineadas, en vez de flotar detrás de un texto que cambia de ancho. */ .zdd__txt{flex:1 1 auto;} .zdd__flag{width:18px;height:13.5px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(7,32,49,0.12);} /* En el botón la bandera va detrás del código, con un poco de aire. */ .zdd__val{display:inline-flex;align-items:center;gap:7px;} .zdd__sep{height:1px;background:#eceef0;margin:5px 8px;} .zdd__nota{padding:8px 12px 6px;font-size:.74rem;line-height:1.35;color:#6b7280;} /* Atribución del proveedor de tasas. Discreta —el proveedor lo permite expresamente— pero visible y con contraste suficiente para leerse. */ .zdd__cred{color:#6b7280;text-decoration:underline;white-space:nowrap;} .zdd__cred:hover{color:var(--midnight);} /* ---- Botón y panel de filtros ---- El botón imita la píldora de al lado (mismo alto, mismo radio, mismo borde) para que la barra se lea como una sola fila de controles y no como "los selects, y aparte un botón". El panel es un popover anclado al botón, no una barra lateral como en /propiedades.html: aquí abajo hay un split mapa+grilla y una columna fija le robaría el ancho al mapa, que es la mitad del valor de esta página. */ .zfil{position:relative;display:inline-flex;} .zfilbtn{ display:inline-flex;align-items:center;gap:7px; font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--midnight); background:#fff;border:1px solid #d4d6da;border-radius:8px;white-space:nowrap; padding:10px 16px;cursor:pointer;line-height:1.2; transition:border-color .15s ease, box-shadow .15s ease; } .zfilbtn:hover{border-color:var(--midnight);} .zfilbtn:focus-visible{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(170,150,100,0.2);} .zfilbtn__ico{width:17px;height:17px;flex:none;} /* Mismo tratamiento que .zpill.is-set: filtros puestos = borde marcado. */ .zfil.is-set .zfilbtn,.zfil.is-open .zfilbtn{border-color:var(--midnight);box-shadow:inset 0 0 0 1px var(--midnight);background:rgba(7,32,49,0.04);} .zfilbtn__n{ display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:19px;padding:0 5px;border-radius:100px; background:var(--midnight);color:#fff;font-size:.72rem;font-weight:700;line-height:1; } /* Sin esto el contador se ve como un "0" permanente: el display:inline-flex de la regla de arriba es una clase y gana al [hidden] de la hoja del navegador, que es lo que apaga el elemento cuando no hay filtros puestos. */ .zfilbtn__n[hidden]{display:none;} /* ---- Control con panel propio (.zpop): hoy solo el precio ---- El tercer tipo de control de la barra, y hacía falta uno: el zdd es una LISTA de opciones excluyentes y aquí hay dos valores a la vez (el mínimo y el máximo). Meterlos como dos zdd era lo que había antes con el precio y por eso la barra iba llena. Lo usaba también "Hab. y baños", que volvió al panel de filtros en ago-2026; el mecanismo se queda porque el precio lo sigue necesitando y porque es genérico (montarPop en assets/buscador.js). Comparte caja con .zdd__btn y .zfilbtn —mismo alto, mismo radio, mismo borde— para que la fila se lea como un solo juego de controles. */ .zpop{position:relative;display:inline-flex;} .zpopbtn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--midnight); background:#fff;border:1px solid #d4d6da;border-radius:8px;white-space:nowrap; padding:10px 16px;cursor:pointer;line-height:1.2; transition:border-color .15s ease, box-shadow .15s ease; } .zpopbtn:hover{border-color:var(--midnight);} .zpopbtn:focus-visible{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(170,150,100,0.2);} .zpop.is-set .zpopbtn,.zpop.is-open .zpopbtn{border-color:var(--midnight);box-shadow:inset 0 0 0 1px var(--midnight);background:rgba(7,32,49,0.04);} .zpop__panel{ position:absolute;top:calc(100% + 8px);left:0;z-index:60; width:320px;max-width:calc(100vw - 28px); background:#fff;border:1px solid #e3e4e7;border-radius:12px; box-shadow:0 16px 40px rgba(7,32,49,0.18); } .zpop__panel[hidden]{display:none;} .zpop__body{padding:16px;} /* Los dos grupos de chips (habitaciones y baños) dentro del panel del pop: el último no lleva el margen inferior del .zfil__g o el panel queda descuadrado por abajo. */ .zpop__body .zfil__g:last-child{margin-bottom:0;} /* El panel del precio se sale por la derecha cuando la ventana es justa; anclado a la derecha del botón se queda dentro. Lo pone el JS. */ .zpop--der .zpop__panel{left:auto;right:0;} .zfil__panel{ position:absolute;top:calc(100% + 10px);left:0;z-index:60; width:380px;max-width:calc(100vw - 28px); background:#fff;border:1px solid #e3e4e7;border-radius:14px; box-shadow:0 18px 44px rgba(7,32,49,0.18); display:flex;flex-direction:column;overflow:hidden; } .zfil__panel[hidden]{display:none;} /* La pone filAbrir() cuando el panel se saldría por la derecha, igual que .zpop--der en los controles con panel propio. `left:auto` es obligatorio: sin él ganan las dos anclas a la vez y el panel se estira de borde a borde. DENTRO de una media query de escritorio, y no suelta: por debajo de 720px el panel es una hoja a pantalla completa anclada con `inset:auto 0 0 0`, y este selector (0,2,0) le gana al de allí (0,1,0) por especificidad —la media query no puntúa—, así que suelto le metía `left:auto` a la hoja y la encogía a su ancho de contenido pegada a la derecha. El `matchMedia` de filAbrir() ya evita poner la clase ahí; esto es el cinturón, para que un cambio en el JS no pueda volver a romper el móvil. */ @media (min-width:721px){ .zfil--der .zfil__panel{left:auto;right:0;} } .zfil__head{ display:none;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid #eceef0; font-family:var(--font-head,var(--font-body));font-size:1.05rem;color:var(--midnight); } .zfil__x{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--midnight);cursor:pointer;padding:0 4px;} /* El cuerpo scrollea, no el panel entero: así el pie con "Ver propiedades" queda siempre a la vista y el visitante nunca pierde la salida. El tope de 420px no es estético: el widget de chat de GTM se ancla abajo a la derecha y su burbuja de saludo ocupa los ~160px inferiores de la ventana. Con el panel más alto, el pie caía justo debajo y el botón de "Ver propiedades" quedaba tapado — el mismo choque que ya obligó a mover el CTA flotante a la izquierda (ver memory.md). Medido a 900px de alto: con 420 el panel termina en y=620 y la burbuja empieza en 630. */ .zfil__body{padding:16px;overflow-y:auto;max-height:min(48vh,420px);} .zfil__g{margin-bottom:18px;} .zfil__g:last-child{margin-bottom:0;} .zfil__lab{display:block;font-size:.82rem;font-weight:700;color:var(--midnight);margin-bottom:8px;letter-spacing:.01em;} .zfil__chips{display:flex;gap:6px;flex-wrap:wrap;} .zfil__chip{ flex:1 1 0;min-width:52px; font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--midnight); background:#fff;border:1px solid #d4d6da;border-radius:8px; padding:9px 6px;cursor:pointer;line-height:1.2; transition:border-color .15s ease, background .15s ease; } .zfil__chip:hover{border-color:var(--midnight);} .zfil__chip.is-on{background:var(--midnight);border-color:var(--midnight);color:#fff;font-weight:600;} .zfil__sel{ appearance:none;-webkit-appearance:none;width:100%; font-family:var(--font-body);font-size:.88rem;color:var(--midnight); background:#fff;border:1px solid #d4d6da;border-radius:8px; padding:10px 30px 10px 12px;cursor:pointer;line-height:1.2; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23072031' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:11px; } .zfil__sel:focus{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(170,150,100,0.2);} .zfil__par{display:flex;align-items:center;gap:8px;} .zfil__sep{color:#9aa0a6;flex:none;} .zfil__g--chk{display:flex;flex-direction:column;gap:10px;} .zfil__chk{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--midnight);cursor:pointer;} .zfil__chk input{width:17px;height:17px;accent-color:var(--midnight);cursor:pointer;flex:none;} .zfil__pie{ display:flex;align-items:center;gap:10px; padding:12px 16px;border-top:1px solid #eceef0;background:#fafafa; } .zfil__reset{background:none;border:none;color:var(--midnight);font-family:var(--font-body);font-weight:600;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:8px 2px;} .zfil__ver{ margin-left:auto;font-family:var(--font-body);font-size:.88rem;font-weight:600; background:var(--midnight);color:#fff;border:none;border-radius:8px; padding:11px 18px;cursor:pointer;white-space:nowrap; } .zfil__ver:hover{background:#0d2f47;} /* El velo solo existe en móvil, donde el panel es una hoja a pantalla completa. En escritorio el panel se cierra al hacer clic fuera. */ .zfil__fondo{display:none;} /* ---- Cabecera del listado ---- */ /* scroll-margin-top: al cambiar de página se hace scrollIntoView aquí, y la barra de búsqueda es sticky. Sin este margen la cabecera queda debajo. */ .zhead{padding:2px 2px 14px;scroll-margin-top:78px;} /* 1.35rem y no 1.6: la cabecera vive dentro de la columna del listado, que a 1440 mide ~570 px de contenido. A 1.6rem el título ocupaba dos líneas en cuanto el nombre de la zona era largo (Sunny Isles Beach, Key Biscayne). */ /* Es el H1 de la pagina, no un contador: dice "Buscar Propiedades" en propiedades.html y "Condominios en Brickell" en la landing. O sea es un titulo y va en la titular de marca. Estuvo excluido por error, creyendo que era la linea de "N propiedades en venta" — esa es .zhead__n. */ .zhead__t{margin:0;font-family:var(--font-head,var(--font-body));font-size:1.35rem;font-weight:600;color:var(--midnight);line-height:1.25;letter-spacing:.01em;text-transform:uppercase;} .zhead__fila{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px;} .zhead__n{margin:0;font-family:var(--font-body);font-size:.8rem;font-weight:500;color:#6b7c8c;} .zhead__n b{color:var(--midnight);font-weight:600;} /* Fila de utilidades de la cabecera del listado (unidades · moneda · orden). Van más discretas que las píldoras de la barra —son ajustes de lectura, no de búsqueda— así que el botón es plano, sin borde ni fondo. */ .zutil{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end;} /* El valor va en --midnight, no en arena (decisión de Mateo, ago-2026): azul de PFS es --midnight y punto. El realce sobre la etiqueta lo hace la OPACIDAD, no el tono — .zdd__lab es el mismo navy al 55% —, así que "Pies²", "USD" y "Más recientes" siguen leyéndose como el dato y "Unidades:", "Moneda:" y "Ordenar por:" como su rótulo. */ .zutil .zdd__btn{ border:none;background:none;padding:8px 10px;border-radius:8px; font-size:.82rem;font-weight:600;color:var(--midnight); } /* Los fondos bajan de 0.10/0.14 a 0.06/0.08: el navy es MUCHO más oscuro que el arena, así que a la misma alfa la pastilla pesaba más que el propio texto y el control parecía seleccionado sin estarlo. */ .zutil .zdd__btn:hover{background:rgba(7,32,49,0.06);} .zutil .zdd.is-open .zdd__btn,.zutil .zdd.is-set .zdd__btn{box-shadow:none;background:rgba(7,32,49,0.08);} .zutil .zdd__lab{color:var(--midnight);opacity:.55;font-weight:600;} @media (max-width:720px){ .zutil{gap:0;} .zutil .zdd__btn{padding:8px 7px;font-size:.78rem;} } /* ---- Split mapa / listado ---- Ocupa el hueco EXACTO que dejan las dos barras pegajosas, de borde a borde y sin esquinas redondeadas: en escritorio la página no scrollea, scrollea la columna de la derecha. Es el reparto de Zillow. El alto era min(80vh,820px) dentro de un contenedor centrado con márgenes, y encima llevaba la cabecera del listado, así que a 900 px de ventana el mapa se veía en ~650. Ahora se ve entero. El alto se reparte con flex en la media query de escritorio de más abajo, no aquí: hace falta que el reparto NO exista en móvil, donde el split se deshace y la página vuelve a scrollear con normalidad. 56/44 y no 58/42: la columna del listado tiene barra de desplazamiento propia y esos ~15 px salen del ancho útil. Con 42% la rejilla caía a UNA tarjeta por fila incluso a 1440 —medido—, que es justo lo que el minmax de 272 px estaba puesto para evitar. Con 44% entran dos desde ~1360 px de ventana, igual que antes de tocar nada. */ .zsplit{ display:grid;grid-template-columns:56% 44%; overflow:hidden;background:#fff; } /* ESCRITORIO: nav + barra + split reparten el alto de la ventana con flex, y el split es el único que crece. Se probó antes con `height:calc(100dvh - var(--alto-barras))` midiendo las barras en JS y sobraba 1 px —offsetHeight devuelve enteros y el alto real es fraccionario—: la página se quedaba con 1 px de scroll, que basta para que el navegador pinte su barra de desplazamiento, se coma 15 px de ancho y tire la rejilla de dos tarjetas a una. Con flex no hay nada que redondear. `flex:1 1 0` y no `1 1 auto`: con base `auto` el hijo parte de su alto de CONTENIDO —la columna sin recortar medía 6.811 px— y estira el body en vez de recortarse. Medido también. */ @media (min-width:1025px){ body{display:flex;flex-direction:column;min-height:100dvh;} .zmain{flex:1 1 0;min-height:0;display:flex;flex-direction:column;} .zsplit{flex:1 1 0;min-height:560px;} /* Sangría izquierda de la página, la misma para la barra y para el mapa (ver .zmap más abajo) para que los dos bordes caigan en la misma vertical. */ .searchbar__in{padding-left:40px;} /* Controles un punto más grandes, solo en escritorio (decisión de Mateo, ago-2026). Medido contra la captura de Zillow a 1440: sus píldoras miden 40 px de alto con texto de ~15 px (12 px de altura de mayúscula); las nuestras iban a 39 px con 14,4 px (11 px de mayúscula). O sea el alto ya estaba, lo que faltaba era el TEXTO — de ahí el .95rem de arriba, y estos 2 px de padding para que la caja acompañe a la letra. Va en la media query y NO suelto: en móvil el alto de esta barra es presupuesto de pantalla (--alto-barras ancla el mapa a pantalla completa), y allí las píldoras ya tienen su propio padding más apretado. El padding de la BANDA se deja en los 10px de base: con controles de 42px la barra sale de 63px, que es 2px más que antes. Subirlo a 12px la llevaba a 68px —doce más que los 56px de Zillow— y eso ya no es "un poco más grande", es otra barra. Lo que crece es el control, no el hueco. */ .zsearch input{padding-top:11px;padding-bottom:11px;} .searchbar__in > .zdd .zdd__btn, .searchbar__in > .zpop .zpopbtn, .searchbar__in > .zfil .zfilbtn{padding-top:11px;padding-bottom:11px;} } /* -------------------------------------------------------------------------- VARIANTE DEL BUSCADOR DEL SITIO (propiedades.html + en/pt). La landing ES la aplicación entera: ocupa la ventana y no hay nada debajo. El buscador del sitio no puede ser eso —se indexa, y debajo van las migas, el bloque de contacto y el pie con los enlaces internos que el resto del sitio necesita— pero tampoco puede repartir el alto de la ventana con ellos: el split se quedaría con lo que sobre después del pie. Solución: el reparto flex se muda de a un envoltorio .zapp que contiene nav + barra + split y mide UNA ventana exacta. Lo de después queda fuera y se alcanza scrolleando la página. La columna interior lleva overscroll-behavior:contain, así que llegar a su final no arrastra la página de detrás sin querer. Va bajo body.zbuscador-seo para que la landing no se entere de nada: sin esa clase estas reglas no existen y el reparto sigue siendo el de arriba. -------------------------------------------------------------------------- */ @media (min-width:1025px){ body.zbuscador-seo{display:block;min-height:0;} body.zbuscador-seo .zapp{display:flex;flex-direction:column;height:100dvh;} body.zbuscador-seo .zmain{flex:1 1 0;min-height:0;} /* El pie vive dentro de la columna, que mide ~44% de la ventana, y .site-footer__grid es `1.4fr 1fr 1fr 1fr` que solo cae a dos columnas en un @media de 980px de VENTANA. Aquí la ventana sigue siendo ancha, así que ese @media no dispara nunca y el grid se quedaría en cuatro columnas de ~130px: los

en versalita con letter-spacing se parten y "Miami · Fort Lauderdale" sale en tres líneas. Se fuerzan dos, que es lo que ese mismo @media hace cuando el ancho disponible es este. Va en la media query de escritorio y no fuera: por debajo de 1025px la columna ocupa la ventana entera y manda la regla responsive del sitio. */ body.zbuscador-seo .zcol > .site-footer .site-footer__grid{ grid-template-columns:1fr 1fr;gap:30px; } } /* La columna que scrollea: cabecera del listado + rejilla + paginación + atribución IDX. overscroll-behavior:contain evita que al llegar al final el gesto siga arrastrando la página de detrás. 12 px de lado y no 18: ver el reparto de arriba, cada píxel de padding sale del ancho de las tarjetas. */ /* El padding va por variable porque los dos hijos de abajo (migas y pie) tienen que CANCELARLO para llegar a los bordes de la columna, y la columna lo cambia en tres sitios: aquí, en móvil y en la vía sin mapa. Con el valor escrito a mano en cada negativo, cambiar uno dejaría una franja blanca asimétrica en los otros dos. */ .zcol{--zcol-pad:12px;--zcol-pad-b:30px;overflow-y:auto;overscroll-behavior:contain;padding:16px var(--zcol-pad) var(--zcol-pad-b);background:#fff;} /* ---- Migas y pie DENTRO de la columna que scrollea ---- Solo el buscador del sitio los tiene: la landing deja la ficha PIE_COLUMNA vacía. (Sin llaves a propósito: esta hoja se INCRUSTA en la plantilla de la landing y pasa por el sustituidor de fichas, así que escrita entera se borraría sola y la frase quedaría coja. Ya pasó.) Es la disposición de Zillow —su