/* ======================================================= Filtros de propiedades — panel lateral, orden y grilla Lo cargan la home (#disponibles) y la página de venta. Las reglas .hero--venta son solo de esa página; el resto sirve a las dos. ======================================================= */ :root { --header-alto: 56px; /* alto de .site-header.scrolled */ --titulo-alto: 102px; /* alto de la banda sticky del título */ } /* Páginas sin banda de título pegada (la home): los filtros y la cabecera de resultados se pegan directo abajo del header. La clase va en y no en porque scroll-padding-top se resuelve en el elemento raíz, que no hereda de body. Gana a los :root de las media queries por especificidad. */ html.sin-titulo-sticky { --titulo-alto: 0px; } /* Pisa el scroll-padding-top global (56px en styles.css): los saltos a #id tienen que caer debajo del header Y de la banda del título. */ html { scroll-padding-top: calc(var(--header-alto) + var(--titulo-alto)); } /* ======================================================= 1. Hero — buscador El .search-form de styles.css está pensado para el index, que tiene un control más (Operación). Acá redefinimos la grilla para los 6 controles + botón de esta página. ======================================================= */ /* .hero es un grid y .hero-content su item: con el min-width:auto que trae por defecto, el item no puede achicarse por debajo del ancho intrínseco del campo más largo ("Solo apto crédito") y empuja la página a scrollear en horizontal en pantallas de 360px o menos. Con min-width:0 el item respeta el ancho del .container y los campos se achican con él. */ .hero--venta .hero-content { min-width: 0; } .hero--venta .search-form input, .hero--venta .search-form select { min-width: 0; } /* El subtítulo del hero de venta es largo ("Propiedades en Venta", con letter-spacing y white-space:nowrap) y las líneas decorativas miden 56px fijos con flex-shrink:0 a cada lado: en teléfonos el conjunto no entra y arrastra scroll horizontal. Se ocultan las líneas y queda solo el texto. Tiene que ser display:none y no width: la animación line-draw de styles.css termina en width:56px con forwards y pisaría cualquier ancho que pongamos. */ @media (max-width: 560px) { .hero--venta .hero-line-left, .hero--venta .hero-line-right { display: none; } } /* Solo a partir de 1601px, que es donde styles.css usa su grilla base de 8 columnas. Más abajo mandan sus media queries (4 → 3 → 2 → 1 columna): si esta regla no estuviera encerrada, ganaría por especificidad (0,2,0 contra 0,1,0) y el formulario desbordaría la pantalla en mobile. */ @media (min-width: 1601px) { .hero--venta .search-form { grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr 0.8fr 0.8fr auto; } .hero--venta .search-form .btn { padding: 1.3rem 2.2rem; } } /* ======================================================= 1 bis. Banda sticky del título "Propiedades en venta" Va fuera del .container para que el fondo llegue a los bordes de la pantalla. Su contenedor de posición es la .section entera, así queda pegada todo el listado. ======================================================= */ .props-titulo-sticky { position: sticky; top: var(--header-alto); z-index: 900; /* debajo del header (1200) y del cajón de filtros */ background: #fff; border-bottom: 1px solid var(--border); padding: 0.75rem 0 1.9rem; } /* El aire de abajo lo pone el padding de la banda: así el blanco llega hasta donde arrancan los filtros y las tarjetas no asoman por el medio. */ .props-titulo-sticky .section-head { margin-bottom: 0; } /* Título más chico que el h2 general: la banda no debe comer pantalla. Tamaño fijo por tramo y no clamp(): el alto de la banda tiene que coincidir con --titulo-alto, y con clamp() variaba con el ancho de la ventana. */ .props-titulo-sticky h2 { font-size: 2rem; margin: 0; } /* ======================================================= 2. Layout de dos columnas ======================================================= */ .props-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; } /* ======================================================= 3. Panel de filtros ======================================================= */ .filtros { position: sticky; /* justo debajo de la banda del título */ top: calc(var(--header-alto) + var(--titulo-alto)); max-height: calc(100vh - var(--header-alto) - var(--titulo-alto) - 1rem); overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .filtros-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .filtros-titulo { margin: 0; font-size: 1.25rem; } .filtros-limpiar { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 0; } .filtros-limpiar:hover { opacity: 0.7; } /* Grupo colapsable: usamos

nativo, se abre y cierra sin JS */ .filtro-grupo { border-top: 1px solid var(--border); padding: 0.25rem 0; } .filtro-grupo-titulo { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-brand); font-weight: 700; font-size: 1rem; color: var(--accent); cursor: pointer; list-style: none; /* saca el triangulito por defecto */ padding: 0.7rem 0; } .filtro-grupo-titulo::-webkit-details-marker { display: none; } .filtro-chevron { font-size: 0.75rem; transition: transform 0.2s; } .filtro-grupo[open] .filtro-chevron { transform: rotate(180deg); } .filtro-opciones { padding-bottom: 0.6rem; } /* --- Checkbox personalizado --- appearance:none deja el real (accesible y navegable con teclado) pero nos permite dibujar la caja nosotros. */ .filtro-opcion { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; cursor: pointer; font-size: 0.95rem; } .filtro-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; margin: 0; border: 2px solid #c9ccd1; border-radius: 5px; background: #fff; display: grid; place-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .filtro-check:checked { background: var(--accent); /* verde sólido: --primary es translúcido */ border-color: var(--accent); } /* El tilde es un borde rotado 45°, sin imágenes ni icon font */ .filtro-check:checked::after { content: ""; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .filtro-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filtro-texto { flex: 1; } .filtro-cantidad { font-size: 0.78rem; color: #6b7280; background: #f1f3f5; border-radius: 999px; padding: 0.05rem 0.5rem; } /* Opción que no da resultados con los filtros actuales */ .filtro-opcion--vacia { opacity: 0.4; cursor: not-allowed; } .filtro-opcion--vacia .filtro-check { cursor: not-allowed; } /* Botón "Ver N más" dentro de un grupo largo (barrios) */ .filtro-ver-mas { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 0.3rem 0 0; } /* Rango de precio escrito a mano */ .filtro-precio-libre { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0 0.2rem; } .filtro-precio-libre input { width: 100%; min-width: 0; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.9rem; } .filtro-precio-libre .btn-aplicar { flex-shrink: 0; padding: 0.5rem 0.75rem; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.85rem; cursor: pointer; } /* ======================================================= 4. Cabecera de resultados (contador + ordenar por) ======================================================= */ .resultados-head { /* Se pega a la misma altura que el panel de filtros, así quedan alineados */ position: sticky; top: calc(var(--header-alto) + var(--titulo-alto)); z-index: 800; /* debajo de la banda del título (900) */ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; padding: 0.6rem 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .resultados-contador { margin: 0; color: #667085; /* NO var(--muted): en styles.css vale #fff */ font-weight: 600; } .orden-wrap { display: flex; align-items: center; gap: 0.5rem; } .orden-label { color: #667085; font-size: 0.9rem; white-space: nowrap; } .orden-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-family: inherit; font-size: 0.9rem; color: var(--text); cursor: pointer; } /* ======================================================= 5. Chips de filtros activos ======================================================= */ .chips-activos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .chips-activos:empty { margin-bottom: 0; } .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 1px solid var(--accent); border-radius: 999px; background: #eef4fb; color: var(--accent); font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } .chip:hover { background: #dce8f5; } .chip--limpiar { border-style: dashed; background: transparent; } /* Texto solo para lectores de pantalla */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ======================================================= 6. Grilla de resultados Pisa el repeat(3) fijo de styles.css. La especificidad de .props-resultados .grid-cards (0,2,0) gana también sobre los media queries de ahí (0,1,0). ======================================================= */ .props-resultados .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1200px) { .props-resultados .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1700px) { .props-resultados .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* La home se queda en 3 por fila también en monitores anchos: tarjetas más grandes y 3 filas justas con data-por-pagina="9". Venta sigue en 4. Va DESPUÉS de la regla de arriba a propósito: misma especificidad (0,2,0), así que acá gana el orden. */ .props-resultados .grid-cards--amplia { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .props-resultados .grid-cards { grid-template-columns: 1fr; } } .sin-resultados { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: #667085; } /* ======================================================= 6 bis. Tablets y teléfonos — el título esquiva el logo Abajo de 1024px el header centra el logo, que mide 96px dentro de una barra de 56 y cuelga hasta unos 25px por debajo. El título arranca más abajo para no quedar tapado. El header no se toca: es de todo el sitio. ======================================================= */ @media (max-width: 1023px) { :root { --titulo-alto: 96px; } /* Sin banda de título (la home) igual hay que despejar el logo colgante, o la cabecera de resultados queda pegada debajo de él. */ html.sin-titulo-sticky { --titulo-alto: 26px; } .props-titulo-sticky { padding: 1.9rem 0 1.2rem; /* el padding-top es el que esquiva el logo */ } .props-titulo-sticky h2 { font-size: 1.5rem; } } /* ======================================================= 7. Responsive — el panel pasa a ser un cajón deslizable ======================================================= */ .filtros-abrir, .filtros-cerrar, .filtros-overlay { display: none; } @media (max-width: 960px) { .props-layout { grid-template-columns: 1fr; } .resultados-head { padding: 0.5rem 0.7rem; gap: 0.5rem; } .resultados-contador { font-size: 0.85rem; } .filtros-abrir { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--accent); border-radius: 10px; background: #fff; color: var(--accent); font-family: var(--font-brand); font-weight: 700; font-size: 1rem; cursor: pointer; } .filtros-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.5rem; } /* Cajón que entra desde la izquierda */ .filtros { position: fixed; top: 0; left: 0; bottom: 0; width: min(88%, 340px); max-height: none; border-radius: 0; z-index: 1200; transform: translateX(-100%); transition: transform 0.28s ease; } .filtros.abierto { transform: translateX(0); } .filtros-cerrar { display: block; width: 100%; margin-top: 1rem; } .filtros-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; } .filtros-overlay[hidden] { display: none; } } /* Mientras el cajón está abierto, el fondo no scrollea */ body.sin-scroll { overflow: hidden; } /* ======================================================= 7 bis. Pantallas angostas — la cabecera en dos filas De 700 para abajo no entran contador + botón + orden en una sola línea: el contador se va a su propia fila y el select se encoge en vez de empujar una tercera. ======================================================= */ @media (max-width: 700px) { .resultados-contador { width: 100%; order: -1; } .orden-label { display: none; /* el select se explica solo */ } .orden-wrap { flex: 1; min-width: 0; } /* Sin esto el select impone su ancho intrínseco ("Precio: menor a mayor") y en pantallas de 320px se va a una tercera fila. */ .orden-select { width: 100%; min-width: 0; } } /* ======================================================= 8. Teléfonos — lo pegado, al mínimo Entre header, banda del título y cabecera de resultados se van ~190px: en una pantalla de 640 es casi un tercio. Va después de la media de 960 a propósito: misma especificidad, así que acá gana el orden. ======================================================= */ @media (max-width: 560px) { :root { --titulo-alto: 82px; } .props-titulo-sticky { padding: 1.9rem 0 0.8rem; } .props-titulo-sticky h2 { font-size: 1.15rem; } .resultados-head { padding: 0.4rem 0.6rem; gap: 0.35rem; } .resultados-contador { font-size: 0.78rem; } .orden-select, .filtros-abrir { font-size: 0.85rem; padding: 0.45rem 0.8rem; } }