/* =========================================================
   Listado de casas en venta (casas.html). Lee solo las variables de base.css; las tarjetas son las .card de la
   portada, con el estilo de cada personalidad. Movimiento: solo transform y opacity.
   ========================================================= */

.casas { padding-top: calc(var(--header-h) + clamp(12px, 2vw, 28px)); }
.casas__cabeza { padding-bottom: var(--section-y); }
.casas__titulo { margin-top: 8px; }
/* Filtros: <select> nativos en una fila que se parte; 44 px de alto (objetivo táctil) */
.casas__filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(20px, 3vw, 36px); }
.casas__campo { display: grid; gap: 6px; flex: 1 1 160px; min-width: 0; font-size: 13px; color: var(--mute); }
.casas__campo select {
  min-height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 0;
  background: var(--c-fondo, transparent); color: var(--c-texto); font: inherit; font-size: 15px;
}
/* Flecha propia dentro del recuadro (sin la del sistema); con selector-ui.js la sustituye el botón propio */
.casas__campo select { -webkit-appearance: none; appearance: none; padding-right: 38px; text-overflow: ellipsis; cursor: pointer; border-radius: var(--sel-radio); }
.casas__campo:not(.sel-on)::after {
  content: ""; position: absolute; right: 16px; bottom: 19px; 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);
}
.casas__campo { position: relative; }
.casas__campo select:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.casas__n { margin-top: 20px; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
/* Rejilla: 1 columna en el móvil, 2 en tableta, 3 en escritorio. Reserva su sitio (sin saltos al pintar) */
.casas__lista { display: grid; gap: clamp(28px, 3vw, 44px) var(--gap); margin-top: 20px; min-height: 60svh; }
.casas__lista[hidden] { display: none; }
@media (min-width: 640px) { .casas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .casas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* La 1.ª tarjeta es el LCP: su foto no espera al load (las demás sí, base.css) */
.js:not(.is-loaded) .casas__lista .card:first-child .card__media img { display: block; }
.casas__vacio { margin-top: 28px; }
.casas__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; }
.casas__mas { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.casas__mas .pill { min-height: 44px; border: 1px solid currentColor; }