/* ==========================================================================
   Comisiona · vitrina
   El buscador, la grilla de tarjetas, el listado y la franja de Super destacados
   del home, la web de cada agente y Mi cartera. Escrita desde cero en Showroom 5
   (10 oct 2026); la web de la agente también la carga (sin ui.css), así que los
   colores van con los tokens que su web redefine.
   ========================================================================== */

/* ---------- Buscador ---------- */
.buscador{
  display:grid;
  /* Showroom 5 (1.5): búsqueda, operación, distrito, tipo, habitaciones, estado y el botón.
     Showroom 6: el botón y el selector cajas/listado van juntos al final (`.buscador-acciones`). Los
     selectores toman el ancho de su opción más larga y la búsqueda el resto: a 1366 px todo entra en
     una línea sin cortar ningún texto. */
  grid-template-columns:minmax(0, 1fr) repeat(5, auto) auto;
  align-items:stretch;
  gap:10px;
  margin-bottom:30px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(21,20,44,.06);
  background:var(--superficie);
  box-shadow:var(--sombra);
}
.buscador input,
.buscador select{
  width:100%;
  min-width:0;
  padding:13px 12px;
  border-radius:12px;
  border:1px solid rgba(21,20,44,.085);
  background-color:var(--superficie);
  color:var(--texto);
  font-family:inherit;
  font-size:14px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.buscador input::placeholder{color:#9a9fa6}
/* La flecha de los selectores: un triángulo propio, dibujado en línea. */
.buscador select{
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23575c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.buscador-boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(140deg, var(--marca-texto), var(--marca));
  color:#fff;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
@media (hover: hover){
  .buscador-boton:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,152,158,.34)}
}
/* Showroom 6: «Buscar» y, a su derecha, cajas o listado. Del alto de los campos, sin agrandar la fila.
   El buscador del home y de la web de la agente, más ceñido para que a 1366 px entre en una línea con
   el texto de la búsqueda entero. */
.hero-busqueda .buscador{gap:6px; padding:12px}
.hero-busqueda .buscador select{padding-right:26px; background-position:right 10px center}
.buscador-acciones{display:flex; align-items:stretch; gap:6px; min-width:0}
.buscador-acciones .buscador-boton{flex:1 1 auto; min-height:46px; padding:0 16px}
.buscador .vista-conmutador{flex:none; align-items:stretch; padding:3px; border-radius:12px; box-shadow:none;
  border-color:rgba(21,20,44,.085)}
.buscador .vista-conmutador button{width:36px; height:auto; min-height:0; border-radius:9px}

/* ---------- Grilla y tarjeta ---------- */
.grilla{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.tarjeta{
  display:flex;
  flex-direction:column;
  min-height:420px;
  overflow:hidden;
  border-radius:var(--radio);
  border:1px solid rgba(21,20,44,.05);
  background:var(--superficie);
  box-shadow:var(--sombra);
  transition:transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover){
  .tarjeta:hover{transform:translateY(-8px); box-shadow:var(--sombra-fuerte)}
}
.tarjeta-foto{
  position:relative;
  height:260px;
  overflow:hidden;
  background:#dcdee0;
}
.tarjeta-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
@media (hover: hover){ .tarjeta:hover .tarjeta-foto img{transform:scale(1.06)} }
/* Sin foto: un bloque sobrio con el tipo de inmueble, nunca el ícono de imagen rota. */
.tarjeta-sin-foto{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(140deg, var(--cb-fondo-suave), var(--cb-gris-borde));
  color:var(--texto-suave);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* Distrito y estado, en una píldora de vidrio arriba a la izquierda. */
.tarjeta-lugar{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(21,20,44,.06);
  background:rgba(255,255,255,.93);
  color:#1f2126;
  font-size:12px;
  font-weight:600;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.tarjeta-cuerpo{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:22px;
  padding-bottom:24px;
}
.tarjeta-cabeza{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
.tarjeta-cabeza h3{margin:0; font-family:var(--fuente-ui); font-size:20px; font-weight:700}
.tarjeta-precio{
  white-space:nowrap;
  font-size:18px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--marca-texto);
}
.tarjeta-resumen{
  margin-bottom:16px;
  font-size:14px;
  line-height:1.65;
  color:var(--texto-suave);
}
.tarjeta-datos{display:flex; flex-flow:row wrap; gap:10px}
.tarjeta-datos span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,152,158,.15);
  background:rgba(0,152,158,.075);
  color:#30343a;
  font-size:13px;
}
.tarjeta-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(21,20,44,.08);
  font-weight:600;
}
.tarjeta-pie strong{color:var(--marca-texto)}

.sin-resultados{
  grid-column:1 / -1;
  padding:60px 20px;
  text-align:center;
  font-size:16px;
  color:var(--texto-suave);
}

/* ---------- Anchos ---------- */
/* 7 oct: con el contenedor de hasta 1440 px, cuatro por fila desde 1400 px. */
@media (min-width: 1400px){ .grilla{grid-template-columns:repeat(4, minmax(0, 1fr))} }
/* La web de la agente no filtra por estado: una columna menos. */
.buscador-web{grid-template-columns:minmax(0, 1fr) repeat(4, auto) auto}
/* Showroom 6: bajo 1.340 px la búsqueda no entraría junto a todo lo demás. Dos filas: la búsqueda con
   «Buscar» y el selector arriba; los filtros abajo, a todo el ancho. */
@media (min-width: 1025px) and (max-width: 1339px){
  .buscador{grid-template-columns:repeat(5, minmax(0, 1fr)) auto}
  .buscador-web{grid-template-columns:repeat(4, minmax(0, 1fr)) auto}
  .buscador input{grid-column:1 / -2; grid-row:1}
  .buscador-acciones{grid-column:-2 / -1; grid-row:1}
  .buscador > select:last-of-type{grid-column:span 2}
}
@media (max-width: 1024px){
  .buscador, .buscador-web{grid-template-columns:repeat(3, 1fr)}
  .buscador input, .buscador-boton, .buscador-acciones{grid-column:1 / -1}
  .buscador-boton{padding:14px}
}
@media (max-width: 960px){ .grilla{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 640px){
  /* minmax(0, 1fr) y no 1fr: a 320 px la tarjeta no bajaba de 346 px (Showroom 4). */
  .grilla{grid-template-columns:minmax(0, 1fr)}
  .buscador, .buscador-web{grid-template-columns:1fr 1fr; padding:12px}
  .buscador select{padding-left:12px; padding-right:28px; background-position:right 10px center}
  .buscador input, .buscador-boton, .buscador-acciones{grid-column:1 / -1}
  .buscador-boton{padding:14px}
}
/* Showroom 3: con los campos a 16 px, «Todos los distritos» y «Tipo de propiedad» van a todo el ancho. */
@media (max-width: 480px){
  .buscador select[name=operacion], .buscador select[name=distrito], .buscador select[name=tipo],
  .buscador select[name=habitaciones]:last-of-type{grid-column:1 / -1}
}
/* Showroom 4: a 320 px, todos los filtros a todo el ancho. */
@media (max-width: 360px){ .buscador{grid-template-columns:minmax(0, 1fr)} }

/* ---------- Mi cartera ---------- */
/* Un filtro más que el público (origen y orden): siete columnas. */
.buscador-cartera{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr auto}
@media (max-width: 1200px){ .buscador-cartera{grid-template-columns:1fr 1fr 1fr} }
@media (max-width: 640px){ .buscador-cartera{grid-template-columns:1fr 1fr} }

/* Propio / Red: discreto, abajo a la izquierda de la foto. */
.origen{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.origen .ico{width:13px; height:13px}
.origen.propio{background:rgba(0,152,158,.92); color:#fff}
.origen.red{background:rgba(255,255,255,.92); color:var(--noche); border:1px solid rgba(36,35,74,.12)}

/* Los números de la tarjeta en una fila fina, sin cambiar su alto. */
.stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--linea);
  font-size:12.5px;
  color:var(--texto-suave);
}
.stat{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.stat .ico{flex:none; width:14px; height:14px; color:var(--cb-turquesa-oscuro)}
.stat-comision{font-weight:600; color:var(--noche)}
.stat-comision .ico{color:var(--cb-dorado)}
.stat-dias .ico{color:var(--texto-suave)}

/* El aviso de acceso a la red. */
.aviso-red{display:flex; align-items:flex-start; gap:14px}
.aviso-red .ico{flex:none; width:22px; height:22px; margin-top:2px; color:var(--cb-turquesa)}
.aviso-red strong{display:block; margin-bottom:3px}
.aviso-red span{font-size:13.5px; line-height:1.55; color:var(--texto-suave)}
.aviso-red .btn{flex:none; margin-left:auto; white-space:nowrap}

/* La red que la agente aún no puede usar: se ve, apagada. Ver lo que se pierde convence más que un vacío. */
.grilla-bloqueada{margin-top:26px}
.tarjeta.bloqueada{
  min-height:0;
  cursor:default;
  border:1px solid var(--linea);
  box-shadow:none;
  opacity:.55;
  filter:grayscale(.75);
  transition:opacity .25s ease, filter .25s ease;
}
@media (hover: hover){ .tarjeta.bloqueada:hover{transform:none; opacity:.8; filter:grayscale(.4)} }
.tarjeta.bloqueada .tarjeta-foto{height:170px}
.tarjeta.bloqueada .tarjeta-foto img{transform:none !important}
.tarjeta.bloqueada .tarjeta-cuerpo{padding:16px 18px 20px}
.tarjeta.bloqueada .tarjeta-cabeza h3{font-size:16px}
.tarjeta.bloqueada .tarjeta-precio{font-size:15px}
.candado{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(36,35,74,.82);
  color:#fff;
  transform:translate(-50%, -50%);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.candado .ico{width:20px; height:20px}

/* ---------- Super destacados (Showroom 4; carrusel desde B101) ---------- */
/* B101 (15 oct): un carrusel con flechas de hasta 20 (`.es-carrusel`): 4 a la vista desde 1.024 px, 2 y el
   borde de la tercera en tablet, 1 y el borde de la siguiente en el celular, con el dedo (scroll-snap). Con
   menos de 5, una fila fija sin flechas (`.es-fija`; bajo 1.024 px también se desliza con el dedo: 4 no
   entran). La pista se desplaza por dentro: la página nunca se corre a lo ancho. Borde y chip dorados. */
/* Showroom 6: sin el margen de arriba (con la barra del selector quedaba una franja vacía). */
.destacados-red{margin:0 0 34px}
.destacados-cabeza{display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; margin-bottom:14px}
.destacados-titulo{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; min-width:0}
.destacados-cabeza h2{display:flex; align-items:center; gap:8px; margin:0; font-size:22px; color:var(--noche)}
.destacados-cabeza h2 .destacado-ico{width:20px; height:20px; fill:#D4AF37}
.destacados-cabeza p{margin:0; color:var(--texto-suave); font-size:14px}
.carrusel-flechas{display:flex; gap:8px; flex:none}
.carrusel-flecha{display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%;
  border:1.5px solid rgba(212,175,55,.7); background:var(--superficie); color:var(--noche); cursor:pointer;
  box-shadow:0 4px 14px rgba(212,175,55,.22); transition:background .2s ease, border-color .2s ease, opacity .2s ease}
@media (hover: hover){ .carrusel-flecha:not([aria-disabled="true"]):hover{background:#FBF3DC; border-color:#D4AF37} }
.carrusel-flecha:focus-visible{outline:3px solid #3a2c00; outline-offset:2px}
.carrusel-flecha[aria-disabled="true"]{opacity:.35; cursor:default; box-shadow:none}
.destacados-fila{list-style:none; margin:0; padding:0; display:grid; gap:16px;
  grid-template-columns:repeat(4, minmax(0, 1fr))}
.destacado-item{display:flex; min-width:0}
/* El carrusel: la pista se desplaza a lo ancho; el relleno deja ver el borde y la sombra dorados (el
   margen negativo lo compensa) y `scroll-padding` alinea la primera tarjeta con el borde. */
.destacados-red.es-carrusel .destacados-fila{grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 16px) / 4); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:4px; scroll-behavior:smooth;
  padding:4px 4px 14px; margin:0 -4px -10px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.destacados-red.es-carrusel .destacados-fila::-webkit-scrollbar{display:none}
.destacados-red.es-carrusel .destacado-item{scroll-snap-align:start}
.destacado-card{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#fff;
  color:inherit; text-decoration:none; box-shadow:0 0 0 2px #D4AF37, 0 10px 26px rgba(212,175,55,.20);
  transition:transform .25s ease, box-shadow .25s ease}
@media (hover: hover){ .destacado-card:hover{transform:translateY(-3px); box-shadow:0 0 0 2px #D4AF37, 0 16px 34px rgba(212,175,55,.32)} }
.destacado-card:focus-visible{outline:3px solid #3a2c00; outline-offset:3px}
.destacado-foto{position:relative; aspect-ratio:4 / 3; background:#eee; overflow:hidden}
.destacado-foto img{width:100%; height:100%; object-fit:cover; display:block}
.destacado-foto .destacado-chip{position:absolute; left:10px; bottom:10px; font-size:11px}
.destacado-info{display:flex; flex-direction:column; gap:3px; padding:12px 14px 14px}
.destacado-nivel{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#6e5500; background:rgba(212,175,55,.16); border-radius:999px; padding:2px 8px; margin-bottom:4px}
.destacado-precio{font-size:16px; font-variant-numeric:tabular-nums; color:var(--noche)}
.destacado-titulo{font-size:13.5px; font-weight:600; line-height:1.3; color:#263238;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.destacado-datos{font-size:12.5px; color:var(--texto-suave)}
/* Bajo 1.024 px las dos se deslizan con el dedo; la fija sigue sin flechas. */
@media (max-width: 1023px){
  .destacados-red.es-carrusel .destacados-fila, .destacados-red.es-fija .destacados-fila{grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:calc((100% - 16px) / 2.3); overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-padding-inline:4px; scroll-behavior:smooth;
    padding:4px 4px 14px; margin:0 -4px -10px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
  .destacados-red.es-fija .destacado-item{scroll-snap-align:start}
}
@media (max-width: 640px){
  .destacados-red.es-carrusel .destacados-fila, .destacados-red.es-fija .destacados-fila{grid-auto-columns:84%; gap:12px}
  .destacados-cabeza{align-items:flex-start}
  .destacados-cabeza h2{font-size:19px}
  .destacados-cabeza p{font-size:13px}
  .carrusel-flecha{width:40px; height:40px}
}
/* Sin avance automático; con «reducir movimiento», las flechas saltan sin desplazamiento suave. */
@media (prefers-reduced-motion: reduce){
  .destacados-red.es-carrusel .destacados-fila, .destacados-red.es-fija .destacados-fila{scroll-behavior:auto}
  .destacado-card, .carrusel-flecha{transition:none}
  @media (hover: hover){ .destacado-card:hover{transform:none} }
}

/* B101: «Ordenar por» del home, una línea discreta a la derecha, encima de los resultados. */
.orden-catalogo{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:0 0 16px}
.orden-catalogo-campo{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--texto-suave)}
.orden-catalogo select{min-height:40px; padding:8px 30px 8px 12px; border-radius:12px; border:1px solid rgba(21,20,44,.12);
  background-color:var(--superficie); color:var(--texto); font-family:inherit; font-size:14px; font-weight:600;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23575c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center}
.orden-catalogo select:focus-visible{outline:3px solid var(--cb-turquesa); outline-offset:2px}
.orden-catalogo-boton{min-height:40px; padding:0 14px; border-radius:12px; border:1px solid rgba(21,20,44,.12);
  background:var(--superficie); font-family:inherit; font-weight:700; cursor:pointer}

/* B101: el Súper destacado en la grilla (con filtros o por precio): el chip dorado y un fondo dorado muy
   suave, el tinte del token dorado sobre la superficie (sin `color-mix`, un tono fijo equivalente). El texto
   sigue con sus tokens: contraste de 12:1 o más. */
.tarjeta.tarjeta-super{
  background:#FBF7EA;
  background:color-mix(in srgb, var(--cb-dorado, #D4AF37) 10%, var(--superficie, #fff));
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 1px rgba(212,175,55,.55), 0 10px 28px rgba(212,175,55,.16);
}
.tarjeta.tarjeta-super .tarjeta-pie{border-top-color:rgba(212,175,55,.32)}
.fila-inmueble.fila-super{background:#FBF7EA; background:color-mix(in srgb, var(--cb-dorado, #D4AF37) 10%, var(--superficie, #fff))}

/* ---------- Cajas o listado (Showroom 4) ---------- */
/* Las dos vistas están en la página; [data-vista] dice cuál se ve. Showroom 6: el selector va en el
   buscador (se quitó la barra de arriba de los resultados). */
.vista-conmutador{display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:#fff;
  border:1px solid var(--linea); box-shadow:0 2px 10px rgba(21,20,44,.06)}
.vista-conmutador button{display:inline-grid; place-items:center; width:44px; height:40px; border:0; border-radius:10px;
  background:none; color:#55606b; cursor:pointer; font-family:inherit; transition:background .2s ease, color .2s ease}
@media (hover: hover){ .vista-conmutador button:hover{color:var(--noche); background:#f1f1f6} }
.vista-conmutador button[aria-pressed="true"]{background:var(--cb-morado, #24234A); color:#fff}
.vista-conmutador button:focus-visible{outline:3px solid var(--cb-turquesa); outline-offset:2px}
/* B101: el carrusel de Super destacados va arriba de las dos vistas. */
.vistas[data-vista="lista"] .grilla{display:none}
.vistas[data-vista="cajas"] .listado, .vistas:not([data-vista]) .listado{display:none}

.listado{display:grid; gap:16px}
.fila-inmueble{display:grid; grid-template-columns:minmax(0, 38%) minmax(0, 1fr);
  grid-template-areas:"foto cuerpo" "foto acciones"; grid-template-rows:1fr auto;
  background:#fff; border:1px solid var(--linea); border-radius:18px; overflow:hidden;
  box-shadow:0 2px 12px rgba(21,20,44,.06); transition:box-shadow .25s ease, transform .25s ease}
@media (hover: hover){ .fila-inmueble:hover{box-shadow:0 12px 30px rgba(21,20,44,.12); transform:translateY(-2px)} }
.fila-inmueble.fila-super{border-color:#D4AF37; box-shadow:0 0 0 1px #D4AF37, 0 10px 26px rgba(212,175,55,.18)}
.fila-foto{grid-area:foto; position:relative; display:block; min-height:230px; background:#eceef0; overflow:hidden}
.fila-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.fila-sin-foto{position:absolute; inset:0; display:grid; place-items:center; color:var(--texto-suave); font-size:14px}
.fila-n-fotos, .fila-codigo{position:absolute; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff; background:rgba(21,20,44,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.fila-n-fotos{left:12px; bottom:12px}
.fila-codigo{right:12px; top:12px; letter-spacing:.04em}
.fila-cuerpo{grid-area:cuerpo; display:flex; flex-direction:column; gap:5px; padding:18px 22px 8px; min-width:0}
.fila-precio{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.fila-precio strong{font-size:23px; font-weight:700; color:var(--noche); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.fila-precio span{font-size:15px; color:#55606b; font-variant-numeric:tabular-nums}
.fila-mant{margin:0; font-size:13px; color:#55606b}
.fila-specs{list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px; margin:4px 0 2px; padding:0; font-size:14px; font-weight:600; color:var(--texto)}
.fila-titulo{margin:4px 0 0; font-family:var(--fuente-ui); font-size:17px; font-weight:700; line-height:1.3}
.fila-titulo a{color:inherit; text-decoration:none}
@media (hover: hover){ .fila-titulo a:hover{color:var(--cb-turquesa-oscuro, #007A80)} }
.fila-lugar{margin:0; font-size:13.5px; color:#55606b}
.fila-desc{margin:2px 0 0; font-size:14px; color:#4a5560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fila-pie{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:auto; padding-top:10px}
.fila-anunciante{display:inline-flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; color:var(--texto)}
.fila-logo{display:inline-flex; align-items:center; height:34px; padding:4px 10px; border-radius:9px}
.fila-logo img{height:26px; width:auto; max-width:140px; object-fit:contain; display:block}
.fila-inicial{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; font-weight:800; font-size:14px; flex:none}
.fila-foto{object-fit:cover}
.fila-anunciante-nombre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.fila-acciones{grid-area:acciones; display:flex; justify-content:flex-end; gap:10px; padding:10px 22px 18px}
.fila-acciones .btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:8px 18px;
  font-size:14px; font-weight:700; border-radius:999px; text-decoration:none}
.fila-ver{background:#fff; color:var(--noche); border:1.5px solid var(--linea)}
@media (hover: hover){ .fila-ver:hover{border-color:var(--noche)} }
.fila-contactar{background:#1F7A4D; color:#fff; border:1.5px solid #1F7A4D}
@media (hover: hover){ .fila-contactar:hover{filter:brightness(1.08)} }
.fila-inmueble .sin-resultados, .listado .sin-resultados{padding:40px 20px}
/* En el celular: la tarjeta horizontal compacta (foto ~40 %), los botones a todo el ancho debajo. */
@media (max-width: 640px){
  .fila-inmueble{grid-template-columns:minmax(0, 40%) minmax(0, 1fr); grid-template-areas:"foto cuerpo" "acciones acciones";
    grid-template-rows:auto auto; border-radius:14px}
  .fila-foto{min-height:150px}
  .fila-codigo{display:none}
  .fila-n-fotos{left:8px; bottom:8px; font-size:11px; padding:2px 7px}
  .fila-cuerpo{padding:10px 12px 6px; gap:3px}
  .fila-precio{gap:0 8px}
  .fila-precio strong{font-size:16.5px}
  .fila-precio span{font-size:12.5px}
  .fila-mant, .fila-desc{display:none}
  .fila-specs{font-size:12.5px; gap:2px 10px; margin:2px 0}
  .fila-titulo{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .fila-lugar{font-size:12.5px}
  .fila-pie{padding-top:6px; gap:6px 8px}
  .fila-pie .destacado-chip{font-size:10.5px; padding:3px 8px}
  .fila-logo{height:28px; padding:3px 7px}
  .fila-logo img{height:20px; max-width:96px}
  .fila-anunciante-nombre{display:none}
  .fila-acciones{padding:8px 12px 12px; gap:8px}
  .fila-acciones .btn{flex:1 1 0; min-width:0; padding:8px 10px; font-size:13.5px; min-height:44px}
}

/* ---------- El pie de los resultados (Showroom 5, 1.1 y 1.2) ---------- */
/* El paginador al centro y, a su derecha y a su misma altura, el único total del filtro, sutil. */
.pie-resultados{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px 16px;
  margin-top:34px;
}
.paginador{grid-column:2; display:flex; align-items:center; gap:6px}
.total-resultados{
  grid-column:3;
  justify-self:end;
  margin:0;
  font-size:13.5px;
  color:#7a8088;
  font-variant-numeric:tabular-nums;
}
.paginador-numeros{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none}
.paginador-n, .paginador-paso{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--linea);
  background:#fff;
  color:var(--noche);
  font-size:14.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.paginador-paso{padding:0 14px}
@media (hover: hover){
  a.paginador-n:hover, a.paginador-paso:hover{border-color:var(--noche); background:#f4f4f8}
}
.paginador-n[aria-current="page"]{border-color:var(--cb-morado, #24234A); background:var(--cb-morado, #24234A); color:#fff}
.paginador-paso[aria-disabled="true"]{color:#a9adb4; background:#fafafa; cursor:default}
.paginador a:focus-visible{outline:3px solid var(--cb-turquesa); outline-offset:2px}
.paginador-hueco{min-width:20px; text-align:center; color:#8b9097}
.paginador-donde{display:none; font-size:14px; font-weight:600; color:var(--noche); font-variant-numeric:tabular-nums}
@media (max-width: 760px){
  /* En el celular: «Anterior» y «Siguiente» grandes, con «Página 2 de 3» en medio; el total debajo. */
  .pie-resultados{grid-template-columns:minmax(0, 1fr); justify-items:stretch}
  .paginador{grid-column:1; justify-content:space-between}
  .paginador-numeros{display:none}
  .paginador-donde{display:block}
  .paginador-paso{min-height:48px; padding:0 18px; font-size:15px}
  .total-resultados{grid-column:1; justify-self:end}
}
/* Con una sola página queda solo el total, a la derecha. */
.pie-resultados:not(:has(.paginador)) .total-resultados{grid-column:1 / -1}

/* ---------- El precio de un alquiler: «S/ 3,800 al mes» (Showroom 5, 1.5) ---------- */
.precio-periodo{font-size:.78em; font-weight:600; color:var(--texto-suave); white-space:nowrap}

/* Showroom 5.1: el anunciante del listado con el avatar único (su foto o su inicial, en su color). */
.avatar.fila-av{inline-size:32px; block-size:32px; font-weight:800; font-size:14px; box-shadow:none}