/* ==========================================================================
   Cheoga.com.py — Buscador de inmuebles del Paraguay
   Paleta inspirada en la bandera paraguaya: rojo, blanco y azul.
   ========================================================================== */

:root {
  --rojo: #d52b1e;
  --rojo-oscuro: #a81f15;
  --azul: #0038a8;
  --azul-oscuro: #002a7d;

  --texto: #1a1d21;
  --texto-suave: #5c6670;
  --texto-tenue: #8b949e;

  --fundo: #ffffff;
  --fundo-alt: #f6f7f9;
  --fundo-card: #ffffff;
  --borda: #e3e6ea;
  --borda-forte: #cfd4da;

  --verde: #0f9d58;
  --raio: 10px;
  --raio-g: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --sombra-g: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --container: 1240px;
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

/* ---------------------------------------------------------------- Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--raio); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: var(--rojo-oscuro); }
.btn-ghost { background: #fff; color: var(--texto); border-color: var(--borda-forte); }
.btn-ghost:hover { border-color: var(--texto-suave); background: var(--fundo-alt); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- Header */
.site-header {
  background: #fff; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.logo { display: flex; align-items: center; gap: .55rem; color: var(--rojo); font-weight: 800; }
.logo:hover { text-decoration: none; }
.logo-texto { font-size: 1.25rem; letter-spacing: -.02em; color: var(--texto); }
.logo-texto small { color: var(--texto-tenue); font-weight: 600; font-size: .8rem; }

.nav-principal { display: flex; gap: 1.35rem; margin-left: auto; }
.nav-principal a { color: var(--texto); font-size: .95rem; font-weight: 500; }
.nav-principal a:hover { color: var(--rojo); text-decoration: none; }

.header-acciones { display: flex; gap: .5rem; }

.menu-toggle {
  display: none; flex-direction: column; gap: 4px; background: none;
  border: 0; cursor: pointer; padding: .5rem; margin-left: auto;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--texto); border-radius: 2px; }

/* ------------------------------------------------------------------ Hero */
.hero {
  background: linear-gradient(160deg, #fff 0%, var(--fundo-alt) 100%);
  padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--borda);
}
.hero h1 { max-width: 20ch; }
.hero-sub { color: var(--texto-suave); font-size: 1.05rem; max-width: 62ch; margin: 0 0 1.75rem; }

.hero-form { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1rem; box-shadow: var(--sombra-g); }
.hero-form-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; align-items: end; }
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.campo > span { font-size: .78rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.campo select, .campo input,
.filtro-grupo select,
.filtro-grupo input:not([type="radio"]):not([type="checkbox"]),
.busca-simples input,
.precio-campos input {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio); font-size: .95rem; font-family: inherit;
  background: #fff; color: var(--texto);
}
.campo select:focus, .campo input:focus,
.filtro-grupo select:focus,
.filtro-grupo input:not([type="radio"]):not([type="checkbox"]):focus,
.busca-simples input:focus,
.precio-campos input:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}

/* Los radio y checkbox del panel conservan su tamaño natural. */
.filtro-grupo input[type="radio"],
.filtro-grupo input[type="checkbox"] {
  width: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--rojo);
}
.hero-form-fila .btn { height: 42px; }

/* ------------------------------------------------------- Selector de moneda
   Antes este campo era un <select> con max-width:110px, que dejaba un hueco
   raro en la fila del buscador. Ahora es un conmutador de dos posiciones que
   ocupa el ancho completo de su celda.

   Usa la misma estructura que los demás campos (.campo > span + control), así
   que la etiqueta y el control caen exactamente a la misma altura. El
   conmutador mide lo mismo que un <select> de la fila (41,8 px) para que su
   borde inferior también coincida. */
.campo-moneda { min-width: 0; }
.moneda-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  background: var(--fundo-alt); border: 1px solid var(--borda-forte);
  border-radius: var(--raio); padding: 0; height: 41.8px;
}
.moneda-opcion { position: relative; display: flex; }
.moneda-opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.moneda-opcion span {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: 100%; padding: 0 .5rem; border-radius: calc(var(--raio) - 1px);
  font-weight: 700; font-size: .92rem; color: var(--texto-suave); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.moneda-opcion input:checked + span { background: var(--rojo); color: #fff; }
.moneda-opcion input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

/* --------------------------------------------------- Presupuesto (deslizador) */
.hero-presupuesto { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.hero-presupuesto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.hero-presupuesto-titulo { font-size: .78rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.hero-presupuesto-valor { font-size: .98rem; color: var(--texto); display: inline-flex; align-items: baseline; gap: .5rem; }
.hero-presupuesto-valor strong { font-weight: 700; }
.hero-presupuesto-valor em { font-style: normal; color: var(--texto-tenue); font-size: .85rem; }

.rango { position: relative; height: 34px; margin: .2rem 0 0; }
/* La pista y el relleno son decorativos: no deben recibir el puntero. Están
   pintados encima de los <input>, así que sin `pointer-events: none` se
   quedaban con todos los clics del recorrido y los pulgares nunca se podían
   arrastrar (el deslizador se veía pero no respondía). */
.rango-pista {
  position: absolute; top: 50%; left: 0; right: 0; height: 5px;
  transform: translateY(-50%); background: var(--fundo-alt);
  border: 1px solid var(--borda); border-radius: 999px;
  pointer-events: none;
}
.rango-preenchido {
  position: absolute; top: 0; bottom: 0; background: var(--rojo);
  border-radius: 999px; pointer-events: none;
}
.rango-input {
  position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.rango-input:focus { outline: none; }
.rango-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--rojo); box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: grab;
}
.rango-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.06); }
.rango-input::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--rojo); box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: grab;
}
.rango-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--azul); outline-offset: 2px; }
.rango-input:focus-visible::-moz-range-thumb { outline: 2px solid var(--azul); outline-offset: 2px; }
/* El pulgar del mínimo no debe tapar al del máximo cuando están juntos. */
.rango-input-min { z-index: 2; }
.rango-input-max { z-index: 3; }

.rango-marcas { display: flex; justify-content: space-between; font-size: .78rem; color: var(--texto-tenue); margin-top: -.15rem; }
.rango-nota { margin: .6rem 0 0; font-size: .82rem; color: var(--texto-suave); }

.hero-form-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.btn-lg { padding: .72rem 1.6rem; font-size: 1rem; height: auto; }
.hero-form-link { font-size: .9rem; color: var(--texto-suave); }
.hero-form-link:hover { color: var(--rojo); }

.hero-stats { display: flex; gap: 2.5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.4rem; color: var(--texto); }
.hero-stats span { font-size: .82rem; color: var(--texto-tenue); }

/* --------------------------------------------------------------- Bloques */
.seccion { padding: 2.5rem 0; }
.seccion-alt { background: var(--fundo-alt); }
.seccion-titulo { margin-bottom: 1.25rem; }
.seccion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.seccion-head .seccion-titulo { margin: 0; }
.seccion-link { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.subtitulo { font-size: 1rem; color: var(--texto-suave); margin: 1.25rem 0 .6rem; }

/* ----------------------------------------------------------------- Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; background: #fff; border: 1px solid var(--borda-forte);
  border-radius: 999px; font-size: .9rem; color: var(--texto); font-weight: 500;
}
.chip:hover { border-color: var(--rojo); color: var(--rojo); text-decoration: none; }
.chip-n { font-size: .78rem; color: var(--texto-tenue); font-weight: 600; }

/* ----------------------------------------------------------------- Cards */
/* auto-fill + minmax: la cantidad de columnas se adapta al ancho REAL
   disponible. Con `repeat(4, 1fr)` los cards quedaban aplastados dentro de
   la búsqueda, donde el panel de filtros deja menos espacio. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio-g); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--sombra-g); transform: translateY(-2px); border-color: var(--borda-forte); }

.card-media { position: relative; display: block; aspect-ratio: 384 / 275; background: var(--fundo-alt); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-sem-foto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--borda-forte); }

.badge {
  position: absolute; top: .6rem; left: .6rem;
  padding: .25rem .55rem; border-radius: 6px; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff;
}
.badge-operacion { background: var(--azul); }
.badge-destaque { left: auto; right: .6rem; background: var(--rojo); }
.badge-verificado { left: auto; right: .6rem; background: var(--verde); }
.badge-tipo { position: static; background: var(--fundo-alt); color: var(--texto-suave); }

.card-cuerpo { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }

/* Card vertical (home y grillas): precio debajo del título, no al lado. */
.grid-cards:not(.busca-resultados .grid-cards) .card-topo { display: block; }
.card-topo .card-precio { margin: 0; }
.grid-cards .card-topo { display: flex; flex-direction: column; gap: .2rem; }

.card-precio { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--texto); letter-spacing: -.01em; }
/* Aviso de importe implausible: discreto, pero visible al lado de la cifra. */
.precio-duvidoso {
  display: inline-block; margin-left: .4rem; padding: .1rem .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #8a5a00; background: #fff4d6; border: 1px solid #f0d48a;
  border-radius: 999px; vertical-align: middle; cursor: help;
}

.card-titulo { margin: .2rem 0 0; font-size: .98rem; font-weight: 600; line-height: 1.35; }
.card-titulo a { color: var(--texto); }
.card-titulo a:hover { color: var(--rojo); text-decoration: none; }

.card-lugar { margin: 0; font-size: .85rem; color: var(--texto-suave); }

.card-datos { display: flex; flex-wrap: wrap; gap: .3rem .7rem; list-style: none; margin: .35rem 0 0; padding: 0; font-size: .84rem; color: var(--texto-suave); }
.card-datos li::before { content: '·'; margin-right: .35rem; color: var(--borda-forte); }
.card-datos li:first-child::before { content: ''; margin: 0; }

.card-publisher { display: flex; align-items: center; gap: .4rem; margin: auto 0 0; padding-top: .6rem; font-size: .8rem; color: var(--texto-tenue); border-top: 1px solid var(--borda); }
.card-publisher img { border-radius: 4px; object-fit: cover; }

/* ------------------------------------------------------------------ Geo */
.grid-geo { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
.grid-geo-grande { grid-template-columns: repeat(4, 1fr); }
.geo-card {
  display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); transition: border-color .15s, box-shadow .15s;
}
.geo-card:hover { border-color: var(--rojo); box-shadow: var(--sombra); text-decoration: none; }
.geo-card strong { font-size: .98rem; }
.geo-card span { font-size: .82rem; color: var(--texto-tenue); }

/* ===================================================== Portada: variedad
   La portada alterna tres formatos para no ser una grilla repetida. */

.seccion-compacta { padding: 1.5rem 0 2rem; }
.seccion-sub { margin: .25rem 0 0; font-size: .9rem; color: var(--texto-tenue); }

/* --------------------------------------------------------------- Carrusel
   Scroll-snap nativo: anda con teclado, rueda y gesto táctil sin JS. Los
   botones solo desplazan. El ancho fijo por tarjeta es lo que permite que el
   carrusel "asome" la siguiente y se entienda que hay más. */
.carrusel-controles { display: flex; align-items: center; gap: .5rem; }
.carrusel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--borda-forte); color: var(--texto);
  transition: border-color .15s, color .15s, background .15s;
}
.carrusel-btn:hover { border-color: var(--rojo); color: var(--rojo); }
.carrusel-btn:disabled { opacity: .35; cursor: default; border-color: var(--borda); color: var(--texto-tenue); }

.carrusel {
  display: flex; gap: 1rem; list-style: none; margin: 0;
  padding: .25rem .25rem .85rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.carrusel::-webkit-scrollbar { height: 8px; }
.carrusel::-webkit-scrollbar-track { background: var(--fundo-alt); border-radius: 999px; }
.carrusel::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 999px; }
.carrusel:hover::-webkit-scrollbar-thumb { background: var(--texto-tenue); }
.carrusel-item { flex: 0 0 300px; scroll-snap-align: start; }
.carrusel-item .card { height: 100%; }

/* --------------------------------------------------------------- Destaque */
.destaque {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
  overflow: hidden; box-shadow: var(--sombra);
}
.destaque-foto { position: relative; display: block; background: var(--fundo-alt); min-height: 340px; }
.destaque-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destaque-foto .badge { position: absolute; top: .85rem; left: .85rem; }
.destaque-corpo { padding: 2rem; display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.destaque-etiqueta {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rojo);
}
.destaque-titulo { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.destaque-titulo a { color: var(--texto); }
.destaque-titulo a:hover { color: var(--rojo); text-decoration: none; }
.destaque-ubicacion { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.destaque-preco { margin: .3rem 0 0; font-size: 1.7rem; font-weight: 800; color: var(--rojo); }
.destaque-ficha {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem; list-style: none;
  margin: .35rem 0 1rem; padding: 0; font-size: .9rem; color: var(--texto-suave);
}
.destaque-ficha li { display: flex; gap: .25rem; }
.destaque-ficha strong { color: var(--texto); }
.destaque-corpo .btn { align-self: flex-start; }

/* ------------------------------------------------- Lista compacta (alquiler) */
.lista-fichas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem; list-style: none; margin: 0; padding: 0;
}
.ficha-item {
  display: flex; gap: .9rem; padding: .7rem; background: #fff;
  border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
.ficha-item:hover { border-color: var(--rojo); box-shadow: var(--sombra); }
.ficha-thumb { flex: 0 0 120px; display: block; border-radius: var(--raio); overflow: hidden; background: var(--fundo-alt); }
.ficha-thumb img { width: 120px; height: 90px; object-fit: cover; display: block; }
.ficha-dados { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ficha-titulo { margin: 0; font-size: .98rem; line-height: 1.3; }
.ficha-titulo a { color: var(--texto); }
.ficha-titulo a:hover { color: var(--rojo); text-decoration: none; }
.ficha-ubicacion { margin: 0; font-size: .84rem; color: var(--texto-tenue); }
.ficha-preco { margin: .15rem 0 0; font-size: 1.08rem; font-weight: 700; color: var(--rojo); }
.ficha-meta { margin: 0; font-size: .84rem; color: var(--texto-suave); }

@media (max-width: 900px) {
  .destaque { grid-template-columns: 1fr; }
  .destaque-foto { min-height: 240px; }
  .destaque-corpo { padding: 1.5rem; }
  .lista-fichas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .carrusel-item { flex: 0 0 260px; }
  .destaque-titulo { font-size: 1.25rem; }
  .destaque-preco { font-size: 1.4rem; }
}

/* ---------------------------------------------------------- Página busca */
.page-busca { padding-top: 1.25rem; padding-bottom: 3rem; }
.busca-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.75rem; align-items: start; }

/* En la búsqueda se muestra UN aviso por fila, en formato horizontal:
   la foto a la izquierda y los datos a la derecha. Se usa flexbox en lugar
   de grid-areas porque el reparto es más predecible cuando los textos
   tienen largos muy distintos. */
.busca-resultados .grid-cards { grid-template-columns: 1fr; gap: .9rem; }

.busca-resultados .card { flex-direction: row; align-items: stretch; }

/* Ancho fijo y ALTO FIJO. Antes la foto mandaba: con `min-height` y sin
   alto definido, la imagen estiraba el card de 204px a 373px según su
   proporción original, y la lista quedaba despareja. */
.busca-resultados .card-media {
  flex: 0 0 280px;
  height: 210px;
  min-height: 0;
  aspect-ratio: auto;
}
.busca-resultados .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorta sin deformar */
}

/* Cabecera del cuerpo: precio a la derecha, título y lugar a la izquierda.
   `min-width: 0` permite que el título largo se ajuste sin empujar el precio. */
.busca-resultados .card-cuerpo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1.25rem;
  min-width: 0;
  height: 210px;              /* misma altura que la foto */
  overflow: hidden;
}
.busca-resultados .card-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.busca-resultados .card-info { min-width: 0; flex: 1 1 auto; }
/* La listagem necesita ritmo: un título de 250 caracteres ocupaba 4 líneas
   y estiraba el card (hasta 375px de alto frente a 206px de los normales).
   Con `line-clamp` se recorta a 2 líneas y se marca con "…". El título
   completo sigue estando en la ficha y en el atributo title. */
.busca-resultados .card-titulo {
  font-size: 1.08rem;
  margin: 0 0 .3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.busca-resultados .card-precio {
  flex: 0 0 auto;
  margin: 0;
  text-align: right;
  font-size: 1.35rem;
  white-space: nowrap;
}
.busca-resultados .card-datos { margin: 0; }
/* El anunciante se ancla al pie: así todas las filas cierran a la misma
   altura y la lista se ve alineada. */
.busca-resultados .card-publisher {
  margin-top: auto;
  padding-top: .45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px) {
  .busca-resultados .card { flex-direction: column; }
  .busca-resultados .card-media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .busca-resultados .card-topo { flex-direction: column-reverse; gap: .35rem; }
  .busca-resultados .card-precio { text-align: left; }
}
}

.migas { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--texto-tenue); margin-bottom: 1rem; }
.migas a { color: var(--texto-suave); }
.migas span { color: var(--texto-tenue); }

.busca-head { margin-bottom: 1rem; }
.busca-conteo { color: var(--texto-suave); margin: 0; font-size: .95rem; }

.busca-orden { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.busca-orden label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--texto-suave); }
.busca-orden select { padding: .4rem .6rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); font-family: inherit; font-size: .88rem; }

/* --------------------------------------------------------------- Filtros */
/* Cabeçalho do painel e fundo: só aparecem no modo gaveta (móvel). */
.filtros-topo { display: none; }
.filtros-fundo { display: none; }
.filtros-flutuante { display: none; }

/* Panel de filtros.
   Con `position: sticky` y sin alto máximo, el panel (1078px) quedaba más
   alto que la pantalla (900px) y su parte de abajo —Cocheras, Superficie—
   era inalcanzable: había que bajar toda la página para poder verla.
   Ahora el panel tiene su PROPIO scroll y nunca supera la altura visible.

   El borde se deja muy suave y los grupos se separan con una línea fina en
   vez de con recuadros: antes cada <fieldset> traía su borde por defecto y se
   veía un recuadro dentro del otro. */
.filtros {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.25rem 1.15rem;
  position: sticky;
  top: 84px;                       /* debajo del header fijo */
  max-height: calc(100vh - 100px); /* 84px del header + margen */
  overflow-y: auto;
  overscroll-behavior: contain;    /* al llegar al final no arrastra la página */
  /* Barra discreta, que aparece al pasar el mouse (Firefox). */
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
}

/* Barra de scroll propia y discreta (WebKit: Chrome, Safari, Edge). */
.filtros::-webkit-scrollbar { width: 8px; }
.filtros::-webkit-scrollbar-track { background: transparent; }
.filtros::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: 4px;
}
.filtros:hover::-webkit-scrollbar-thumb { background: var(--texto-tenue); }

/* El formulario no debe generar una segunda zona de scroll. */
.filtros form { display: contents; }
/* ------------------------------------------------------- Panel de filtros */
.filtro-grupo { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--borda); }
.filtro-grupo:last-of-type { border-bottom: 0; margin-bottom: .5rem; }
.filtro-grupo h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); margin-bottom: .6rem; font-weight: 700;
}

/* Los grupos son <fieldset> por semántica (agrupan radios con su etiqueta),
   pero sin esto el navegador les dibuja su borde por defecto: quedaba un
   recuadro dentro del recuadro del panel. Se quita el borde y el padding, y
   el <legend> pasa a verse como el título del grupo. */
.filtro-grupo {
  border: 0; border-bottom: 1px solid var(--borda);
  padding: 0 0 .9rem; margin: 0 0 .9rem; min-width: 0;
}
.filtro-grupo:last-of-type { border-bottom: 0; margin-bottom: .5rem; }
.filtro-grupo > legend {
  display: block; float: none; width: auto; height: auto;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); margin: 0 0 .6rem; padding: 0;
  font-weight: 700; line-height: 1.3;
}

/* --- Opciones tipo lista (operación) --- */
.opciones { display: flex; flex-direction: column; gap: .15rem; }
.opcion {
  position: relative;              /* contém o input absoluto */
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: 7px; cursor: pointer;
  font-size: .9rem; transition: background .12s;
}
.opcion:hover { background: var(--fundo-alt); }
.opcion input { margin: 0; flex: 0 0 auto; }
.opcion:has(input:checked) { background: #eef2fb; font-weight: 600; }

/* --- Píldoras (dormitorios, baños, cocheras) --- */
.opciones-inline { flex-direction: row; flex-wrap: wrap; gap: .35rem; }
.pildora { position: relative; cursor: pointer; }
.pildora input {
  position: absolute; opacity: 0; width: 0; height: 0;
  pointer-events: none;            /* no roba el clic al rótulo */
}
.pildora span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: .35rem .6rem;
  border: 1px solid var(--borda-forte); border-radius: 999px;
  font-size: .85rem; color: var(--texto); transition: all .12s;
}
.pildora:hover span { border-color: var(--rojo); color: var(--rojo); }
.pildora input:checked + span {
  background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 600;
}
.pildora input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

/* --- Selector de moneda --- */
.monedas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.moneda {
  position: relative;              /* contém o input absoluto */
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .55rem .3rem; border: 1px solid var(--borda-forte);
  border-radius: 9px; cursor: pointer; text-align: center; transition: all .12s;
}
.moneda:hover { border-color: var(--rojo); }
.moneda input { position: absolute; opacity: 0; width: 0; height: 0; }
.moneda strong { font-size: .95rem; }
.moneda span { font-size: .68rem; color: var(--texto-tenue); line-height: 1.2; }
.moneda.ativa, .moneda:has(input:checked) {
  border-color: var(--rojo); background: #fdf0ef;
}
.moneda:has(input:checked) strong { color: var(--rojo); }

/* --- Campos de rango (precio, superficie) --- */
.precio-campos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .35rem; }
.precio-campos input {
  width: 100%; padding: .5rem .55rem; border: 1px solid var(--borda-forte);
  border-radius: 8px; font-size: .9rem; font-family: inherit; min-width: 0;
}
.precio-campos input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.precio-sep { color: var(--texto-tenue); font-size: .85rem; }

.filtro-nota { font-size: .76rem; color: var(--texto-tenue); margin: .5rem 0 0; line-height: 1.4; }
.filtro-aviso {
  font-size: .78rem; color: var(--texto-suave); background: var(--fundo-alt);
  border-left: 3px solid var(--azul); padding: .5rem .6rem;
  border-radius: 0 6px 6px 0; margin: 0; line-height: 1.45;
}
/* La barra de acciones queda fija al pie del PANEL (no de la página), así
   "Aplicar filtros" siempre está a la vista mientras se recorre el panel.
   El padding inferior del panel reserva la altura de la barra: sin eso el
   último grupo (Superficie) pasa por debajo al desplazarse. */
.filtros { padding-bottom: 4.5rem; }
.filtro-acoes {
  position: sticky;
  /* Los offsets laterales y el inferior compensan el padding del panel
     (1.25rem 1.15rem): si no coinciden, la barra queda desalineada respecto
     al borde y tapa el último campo. */
  bottom: -1.25rem;
  margin: 0 -1.15rem -1.25rem;
  padding: .75rem 1.15rem 1.1rem;
  background: #fff;
  border-top: 1px solid var(--borda);
}
.busca-aviso {
  font-size: .86rem; color: var(--texto-suave); background: var(--fundo-alt);
  border-left: 3px solid var(--azul); padding: .6rem .8rem; border-radius: 6px;
  margin: 0 0 1rem;
}
.filtro-limpar { display: block; text-align: center; margin-top: .75rem; font-size: .85rem; color: var(--texto-suave); }

/* ----------------------------------------------------------- Paginación */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pag-btn { padding: .55rem 1rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); font-size: .9rem; font-weight: 600; color: var(--texto); }
.pag-btn:hover { border-color: var(--rojo); color: var(--rojo); text-decoration: none; }
.pag-off { color: var(--texto-tenue); border-color: var(--borda); }
.pag-info { font-size: .88rem; color: var(--texto-suave); }

/* ------------------------------------------------------------- Inmueble */
.page-imovel { padding-top: 1.25rem; padding-bottom: 3rem; }
.imovel-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }

.galeria { margin-bottom: 1.5rem; }
.galeria-principal { margin: 0; border-radius: var(--raio-g); overflow: hidden; background: var(--fundo-alt); aspect-ratio: 3 / 2; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; padding-bottom: .3rem; }
.miniatura { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; flex: 0 0 auto; }
.miniatura.ativo { border-color: var(--rojo); }
.miniatura img { width: 110px; height: 80px; object-fit: cover; }
.galeria-vazia { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--fundo-alt); border-radius: var(--raio-g); color: var(--texto-tenue); }

.imovel-head-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; align-items: center; }
.imovel-head-tags .badge { position: static; }
.imovel-head h1 { margin-bottom: .5rem; }

.imovel-lugar { display: flex; align-items: center; gap: .4rem; color: var(--texto-suave); font-size: .95rem; margin: 0 0 1rem; }
.imovel-lugar svg { flex: 0 0 auto; color: var(--rojo); }

.imovel-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; padding: .9rem 1.1rem; background: var(--fundo-alt); border-radius: var(--raio); margin-bottom: 1.5rem; }
.precio-valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.precio-equiv { color: var(--texto-suave); font-size: 1rem; }
.precio-m2 { margin-left: auto; font-size: .85rem; color: var(--texto-tenue); }

.bloco { margin-bottom: 2rem; }
.bloco h2 { font-size: 1.15rem; padding-bottom: .5rem; border-bottom: 1px solid var(--borda); margin-bottom: 1rem; }

.ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.ficha li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas: "ico rotulo" "ico valor";
  align-items: center;
  column-gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--borda);
}
.ficha li .ico { grid-area: ico; width: 19px; height: 19px; }
.ficha li > span { grid-area: rotulo; }
.ficha li > strong { grid-area: valor; }
.ficha span { font-size: .78rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .03em; }
.ficha strong { font-size: .98rem; font-weight: 600; }

.descripcion { color: var(--texto-suave); line-height: 1.7; }

/* ------------------------------------------------------------------ Mapa */
.mapa {
  aspect-ratio: 16 / 9;
  min-height: 320px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo-alt);
  z-index: 0;                 /* mantiene el mapa bajo el header fijo */
}
.mapa .leaflet-container { font-family: var(--fonte); }
.mapa-nota { font-size: .82rem; color: var(--texto-tenue); margin: .6rem 0 0; }

/* --------------------------------------------------------------- Íconos */
.ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--rojo); }

/* -------------------------------------------------------------- Galería */
.galeria { margin-bottom: 1.5rem; }

.galeria-principal {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: var(--fundo-alt); cursor: zoom-in;
  border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 3 / 2;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria-principal:hover img { transform: scale(1.02); }

.galeria-zoom {
  position: absolute; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .75rem; border-radius: 999px;
  background: rgba(0, 0, 0, .68); color: #fff;
  font-size: .82rem; font-weight: 600; backdrop-filter: blur(4px);
}
.galeria-zoom .ico { width: 15px; height: 15px; color: #fff; }

.galeria-mais {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 58px; border-radius: 8px;
  background: var(--fundo-alt); color: var(--texto-suave);
  font-size: .85rem; font-weight: 700;
}

/* ------------------------------------------------------------- Lightbox */
.sem-scroll { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12, 14, 17, .94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }

.lightbox-barra {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; z-index: 2;
}
.lightbox-contador { color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.lightbox-contador b { font-weight: 800; }

.lightbox-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  transition: background .15s, transform .15s;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.lightbox-btn .ico { width: 22px; height: 22px; color: #fff; }

.lightbox-figura {
  margin: 0; max-width: min(1400px, 94vw); max-height: 78vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-figura img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background .15s, transform .15s; z-index: 2;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox-nav .ico { width: 26px; height: 26px; color: #fff; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

.lightbox-tiras {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: .4rem; padding: .7rem 1rem 1rem;
  overflow-x: auto; scrollbar-width: thin;
}
.lightbox-tira {
  flex: 0 0 auto; padding: 0; border: 2px solid transparent;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  background: none; opacity: .55; transition: opacity .15s, border-color .15s;
}
.lightbox-tira:hover { opacity: .85; }
.lightbox-tira.ativa { border-color: var(--rojo); opacity: 1; }
.lightbox-tira img { width: 78px; height: 56px; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-prev { left: .4rem; }
  .lightbox-next { right: .4rem; }
  .lightbox-figura { max-height: 66vh; }
  .lightbox-figura img { max-height: 66vh; }
  .lightbox-tira img { width: 58px; height: 42px; }
}

.imovel-lateral { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 84px; }
.contato-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1.25rem; box-shadow: var(--sombra); }
.contato-card h2 { font-size: 1.05rem; }
.contato-card h3 { font-size: .95rem; }
.contato-card .btn { margin-top: .5rem; }
.contato-pub { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.contato-pub img { border-radius: 8px; object-fit: cover; }
.contato-pub strong { display: block; }
.selo { display: inline-block; font-size: .74rem; color: var(--verde); font-weight: 600; }
.contato-nota, .contato-aviso p { font-size: .88rem; color: var(--texto-suave); margin: .5rem 0 0; }
.contato-origem { display: block; margin-top: .75rem; font-size: .85rem; color: var(--texto-suave); }

/* -------------------------------------------------------- Inmobiliarias */
.busca-simples { display: flex; gap: .5rem; max-width: 520px; margin-bottom: 1.5rem; }
.grid-publishers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.publisher-card { display: flex; align-items: center; gap: .9rem; padding: 1rem; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); }
.publisher-card:hover { border-color: var(--rojo); text-decoration: none; }
.publisher-card img { border-radius: 10px; object-fit: cover; }
.publisher-card strong { display: block; font-size: .98rem; }
.publisher-card span { font-size: .84rem; color: var(--texto-tenue); }
.publisher-inicial { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 10px; background: var(--fundo-alt); font-size: 1.4rem; font-weight: 700; color: var(--texto-suave); flex: 0 0 auto; }
.publisher-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.publisher-head img { border-radius: 12px; object-fit: cover; }

/* ------------------------------------------------------------------ Blog */
.grid-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; transition: box-shadow .18s; }
.post-card:hover { box-shadow: var(--sombra-g); }
.post-card a { display: block; padding: 0 0 1rem; color: var(--texto); }
.post-card a:hover { text-decoration: none; }
.post-card img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.post-card h2 { font-size: 1.05rem; padding: 0 1rem; margin-top: .9rem; }
.post-card p { padding: 0 1rem; margin: 0; font-size: .9rem; color: var(--texto-suave); }
.post-card time { display: block; padding: .5rem 1rem 0; font-size: .8rem; color: var(--texto-tenue); }

.page-post { max-width: 760px; padding-top: 1.25rem; padding-bottom: 3rem; }
.post-meta { color: var(--texto-tenue); font-size: .88rem; }
.post-imagem { border-radius: var(--raio-g); margin: 1.25rem 0; }
.post-conteudo { color: var(--texto-suave); line-height: 1.75; }
.post-conteudo h2, .post-conteudo h3 { color: var(--texto); margin-top: 1.75rem; }
.post-voltar { margin-top: 2rem; }

/* ----------------------------------------------------------------- Legal */
.page-legal { max-width: 780px; padding-top: 2rem; padding-bottom: 3rem; }
.legal-conteudo { color: var(--texto-suave); line-height: 1.75; }
.page-hub { padding-top: 2rem; padding-bottom: 3rem; }
.page-sub { color: var(--texto-suave); max-width: 70ch; margin: 0 0 1.5rem; }

.vazio { color: var(--texto-tenue); padding: 2rem 0; }
.vazio-box { text-align: center; padding: 3.5rem 1rem; background: var(--fundo-alt); border-radius: var(--raio-g); }
.vazio-box h2 { font-size: 1.2rem; }
.vazio-box p { color: var(--texto-suave); margin-bottom: 1.25rem; }

.page-erro { text-align: center; padding: 4rem 1rem; }
.erro-codigo { font-size: 4rem; font-weight: 800; color: var(--borda-forte); margin: 0; line-height: 1; }
.erro-acoes { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: #16191d; color: #c8ced6; margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 2rem; }
.footer-grid > * { min-width: 0; }
.footer-marca .logo-texto { color: #fff; }
.footer-marca p { font-size: .88rem; color: #98a1ad; max-width: 38ch; margin-top: .5rem; }
.footer-col h3, .footer-col-titulo { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin: 0 0 .75rem; font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.footer-col a { color: #c8ced6; font-size: .9rem; }
.footer-col a:hover { color: #fff; }
.footer-base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #2a2f36; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-base p { margin: 0; font-size: .82rem; color: #8b949e; }
.footer-nota { max-width: 62ch; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1100px) {
  .grid-geo, .grid-geo-grande { grid-template-columns: repeat(3, 1fr); }
  .grid-posts, .grid-publishers { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-form-fila { grid-template-columns: repeat(2, 1fr); }
  .busca-layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .imovel-layout { grid-template-columns: 1fr; }
  .imovel-lateral { position: static; }
  .ficha { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav-principal {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--borda); padding: .5rem 1rem 1rem;
  }
  .nav-principal.aberto { display: flex; }
  .nav-principal a { padding: .7rem 0; border-bottom: 1px solid var(--borda); }
  .menu-toggle { display: flex; }
  .header-acciones { display: none; }

  .grid-geo, .grid-geo-grande { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 480px) {
  .hero-form-fila { grid-template-columns: 1fr; }
  .campo-moneda { max-width: none; }
  .ficha { grid-template-columns: 1fr; }
  .precio-m2 { margin-left: 0; }
}

/* ==========================================================================
   BUSCA NO CELULAR — filtro como gaveta deslizante
   ==========================================================================
   Antes o painel de filtros vinha no topo, com 760px de altura. Numa tela
   de 860px o primeiro imóvel aparecia em 1060px: quem abria a busca não
   via nenhuma propriedade, só o formulário.

   Agora o painel sai do fluxo (position: fixed) e vira uma gaveta que sobe
   desde o rodapé, aberta por um botão flutuante. Fecha no X, no fundo
   escuro, com Esc, ou arrastando para baixo.
   ========================================================================== */

/* Botão flutuante: fixo no canto, acima do conteúdo. */
.filtros-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(213, 43, 30, .38);
  transition: transform .15s, box-shadow .15s;
}
.filtros-flutuante:active { transform: scale(.96); }
.filtros-flutuante svg { flex: 0 0 auto; }

/* Contador de filtros ativos. */
.filtros-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #fff;
  color: var(--rojo);
  font-size: .75rem;
  font-weight: 800;
}

/* Fundo escurecido atrás da gaveta. */
.filtros-fundo {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(12, 14, 17, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}
.filtros-fundo.visivel { opacity: 1; }

@media (max-width: 820px) {
  /* A coluna do painel sai do grid: os resultados ocupam a largura toda. */
  .busca-layout { grid-template-columns: 1fr; }
  .filtros { display: none; }

  .filtros-flutuante { display: inline-flex; }

  /* Gaveta. */
  .filtros.aberta {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 96;
    /* Altura concreta: con sólo `max-height` el flex colapsaba al
       encabezado (64px) y el contenido no se veía. */
    height: min(88vh, 760px);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
    animation: gaveta-sobe .26s cubic-bezier(.22, .8, .3, 1);
    overflow: hidden;
  }

  /* Cabeçalho com o título e o botão de fechar, sempre visível. */
  .filtros-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--borda);
    flex: 0 0 auto;
  }
  .filtros-titulo { margin: 0; font-size: 1.05rem; }
  .filtros-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    background: #fff;
    color: var(--texto);
    cursor: pointer;
  }
  .filtros-fechar .ico { width: 18px; height: 18px; color: currentColor; }

  /* O formulário rola por dentro; o cabeçalho e o botão ficam fixos. */
  .filtros form {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.1rem 0;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }

  .filtro-acoes {
    position: sticky;
    bottom: 0;
    margin: 0 -1.1rem;
    padding: .8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .04);
  }

  /* Alvos de toque cómodos. */
  .opcion { padding: .6rem .5rem; font-size: .95rem; }
  .pildora span { min-width: 46px; padding: .45rem .7rem; }
  .moneda { padding: .7rem .3rem; }
  .filtros button[type="submit"] { padding: .85rem 1.25rem; font-size: 1rem; }

  /* Sem scroll do body enquanto a gaveta está aberta. */
  body.gaveta-aberta { overflow: hidden; }
}

@keyframes gaveta-sobe {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Sin animación (o si el navegador la ignora) la gaveta igual se ve:
   el estado final no depende de la animación. */
.filtros.aberta { transform: translateY(0); }

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  .filtros.aberta { animation: none; transform: translateY(0); }
  .filtros-fundo { transition: none; }
}

/* ==========================================================================
   CARDS NO CELULAR — formato compacto
   ==========================================================================
   Em 430px os cards herdavam o layout horizontal e ficavam com 391px de
   altura: só cabiam 2 na tela. No celular a foto vai em cima, menor, e os
   dados ficam enxutos para caber mais oferta por rolagem.
   ========================================================================== */
@media (max-width: 600px) {
  .busca-resultados .grid-cards { gap: .75rem; }

  .busca-resultados .card { flex-direction: column; }

  .busca-resultados .card-media {
    flex: none;
    width: 100%;
    height: 170px;         /* antes: 210px del formato horizontal */
  }

  .busca-resultados .card-cuerpo {
    height: auto;          /* deja de estar atado a la altura de la foto */
    padding: .75rem .9rem .85rem;
    gap: .3rem;
  }

  /* En el celular el precio va primero: es lo que más se compara. */
  .busca-resultados .card-topo {
    flex-direction: column-reverse;
    gap: .25rem;
  }
  .busca-resultados .card-precio {
    text-align: left;
    font-size: 1.25rem;
  }
  .busca-resultados .card-titulo { font-size: .98rem; margin: 0; }
  .busca-resultados .card-lugar  { font-size: .82rem; }
  .busca-resultados .card-datos  { font-size: .8rem; gap: .25rem .6rem; }
  .busca-resultados .card-publisher {
    margin-top: .3rem;
    padding-top: .4rem;
    font-size: .76rem;
  }

  /* El botón flotante no debe tapar el último card. */
  .busca-resultados { padding-bottom: 4.5rem; }

  /* Título y contador más compactos. */
  .busca-head h1 { font-size: 1.25rem; line-height: 1.25; }
  .busca-conteo { font-size: .88rem; }
  .busca-orden { margin-bottom: .75rem; }
}

/* ------------------------------------------------ Panel informativo ciudad */
/* Peso visual deliberadamente bajo: es informacion de apoyo, no el foco.
   El foco de la pagina son los avisos, que van debajo. */
.panel-ciudad {
  margin: 1.75rem 0 2.5rem;
  padding: 1.25rem 1.35rem 1.35rem;
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}
.panel-ciudad-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .3rem;
  color: var(--texto);
  letter-spacing: -.01em;
}
.panel-ciudad-nota {
  font-size: .82rem;
  color: var(--texto-tenue);
  margin: 0 0 1.1rem;
  max-width: 80ch;
}
.panel-ciudad-aviso {
  font-size: .88rem;
  color: var(--texto-suave);
  background: #fff;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  margin: 0 0 1rem;
}
.panel-ciudad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.dado {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .85rem 1rem;
}
.dado-titulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
  margin: 0 0 .55rem;
  font-weight: 700;
}
.dado-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .32rem; }
.dado-lista li { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; }
.dado-lista span { color: var(--texto-suave); }
.dado-lista strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Grafico */
.grafico { margin: .25rem 0 .5rem; }
.grafico-titulo { font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; }
.grafico-sub { font-size: .8rem; color: var(--texto-tenue); margin: 0 0 .9rem; max-width: 80ch; }
.grafico-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.grafico-fila {
  display: grid;
  grid-template-columns: 232px 1fr auto;
  align-items: center;
  gap: .75rem;
}
.grafico-rotulo { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.grafico-op {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .4rem;
  border-radius: 4px;
  white-space: nowrap;
}
.grafico-op-venta { background: #e8f0fe; color: var(--azul-oscuro); }
.grafico-op-alquiler, .grafico-op-alquiler_temporal { background: #e6f4ea; color: #0b6b3d; }
.grafico-cat { font-size: .82rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-barra-area { background: #e9ecef; border-radius: 5px; height: 22px; overflow: hidden; }
.grafico-barra { height: 100%; border-radius: 5px; min-width: 3px; transition: width .3s ease; }
/* Cada moneda tiene su color: deja claro que no se comparan entre si. */
.grafico-barra-usd { background: linear-gradient(90deg, #1a56db, #3b82f6); }
.grafico-barra-pyg { background: linear-gradient(90deg, #0f9d58, #34c07a); }
.grafico-valor { text-align: right; min-width: 130px; }
.grafico-valor strong { display: block; font-size: .9rem; font-variant-numeric: tabular-nums; }
.grafico-uniq { font-size: .72rem; color: var(--texto-tenue); }
.grafico-pie { font-size: .76rem; color: var(--texto-tenue); margin: .9rem 0 0; max-width: 90ch; line-height: 1.5; }

@media (max-width: 640px) {
  .panel-ciudad { padding: 1rem; }
  /* En celular la barra pasa arriba y el valor abajo: la regla de 158px
     de rotulo no entra y aplastaba la barra a casi cero. */
  .grafico-fila { grid-template-columns: 1fr auto; grid-template-areas: 'rotulo valor' 'barra barra'; gap: .35rem .6rem; }
  .grafico-rotulo { grid-area: rotulo; }
  .grafico-valor { grid-area: valor; min-width: 0; }
  .grafico-barra-area { grid-area: barra; }
  .grafico-valor strong { font-size: .85rem; }
}
/* Chip de moneda en el grafico. Gs. y U$S pueden repetir la misma
   operacion y categoria, asi que la moneda se muestra explicita. */
.grafico-moneda {
  font-size: .66rem;
  font-weight: 700;
  padding: .12rem .35rem;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.grafico-moneda-usd { background: #e8f0fe; color: #1a56db; border-color: #c7dbfc; }
.grafico-moneda-pyg { background: #e6f4ea; color: #0b6b3d; border-color: #c3e6d0; }

/* ------------------------------------------------------------------ FAQ */
/* <details>/<summary> nativo: funciona sin JavaScript, es accesible por
   teclado y el contenido sigue en el HTML para los buscadores. */
.faq-lista { display: flex; flex-direction: column; gap: .5rem; max-width: 900px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--borda-forte); }
.faq-pregunta {
  cursor: pointer;
  padding: .8rem 1rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--texto);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Se oculta el triangulito nativo y se dibuja uno propio. */
.faq-pregunta::-webkit-details-marker { display: none; }
.faq-pregunta::after {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -3px;
}
.faq-item[open] .faq-pregunta::after { transform: rotate(-135deg); margin-top: 3px; }
.faq-pregunta:hover { background: var(--fundo-alt); }
.faq-resposta { padding: 0 1rem 1rem; color: var(--texto-suave); line-height: 1.65; font-size: .92rem; }
.faq-resposta p { margin: 0; }

/* ------------------------------------------------- Formularios públicos */
.page-form { padding-top: 2rem; padding-bottom: 3rem; }
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}
.form-card {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.5rem;
}
.form-seccion {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  margin: 1.5rem 0 .85rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--borda);
}
.form-seccion:first-of-type { margin-top: 0; }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; }
.campo label small { font-weight: 400; color: var(--texto-tenue); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo input[type="url"], .campo input[type="number"], .campo select, .campo textarea {
  width: 100%;
  padding: .62rem .75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--texto);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}
.campo .tem-erro { border-color: var(--rojo); background: #fff8f7; }
.campo-erro { color: var(--rojo); font-size: .82rem; margin: .35rem 0 0; font-weight: 600; }
.campo-ajuda { color: var(--texto-tenue); font-size: .8rem; margin: .35rem 0 0; line-height: 1.45; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.obrig { color: var(--rojo); }

/* Casillas de consentimiento. Alineadas arriba porque el texto puede
   ocupar dos líneas y el check no debe quedar centrado. */
.campo-check { margin: 1.1rem 0; }
.check-linha {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--texto-suave);
  cursor: pointer;
}
.check-linha input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: .15rem;
  accent-color: var(--azul);
  cursor: pointer;
}
.check-linha a { color: var(--azul); text-decoration: underline; }

.form-nota {
  font-size: .82rem;
  color: var(--texto-tenue);
  margin: 1rem 0 0;
  line-height: 1.5;
  text-align: center;
}

/* Honeypot: fuera de pantalla y oculto a lectores de pantalla.
   No se usa display:none porque algunos bots lo detectan. */
.hp-campo {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Avisos de resultado */
.aviso {
  border-radius: var(--raio);
  padding: .9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: .92rem;
  line-height: 1.55;
  border: 1px solid;
}
.aviso-ok { background: #e6f4ea; border-color: #b7dfc5; color: #0b5d34; }
.aviso-erro { background: #fdecea; border-color: #f5c2bd; color: #8c1d13; }
.aviso strong { display: block; margin-bottom: .2rem; }

/* Columna lateral informativa */
.form-lateral { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 90px; }
.form-info {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.1rem 1.2rem;
}
.form-info-titulo { font-size: .95rem; margin: 0 0 .7rem; }
.form-info-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.form-info-lista li { font-size: .86rem; color: var(--texto-suave); line-height: 1.5; }
.form-info-lista strong { color: var(--texto); }
.form-pasos { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.form-pasos li { font-size: .86rem; color: var(--texto-suave); line-height: 1.5; }
.form-pasos strong { color: var(--texto); }
.form-info-destaque { background: #fff8e6; border-color: #f0dfae; }
.form-info-destaque p { font-size: .86rem; color: var(--texto-suave); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-lateral { position: static; }
  .campo-fila { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Contenido legal (páginas) */
.legal-conteudo h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--borda);
}
.legal-conteudo h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.legal-conteudo p { line-height: 1.72; margin: 0 0 .9rem; }
.legal-conteudo ul, .legal-conteudo ol { line-height: 1.72; padding-left: 1.35rem; margin: 0 0 1rem; }
.legal-conteudo li { margin-bottom: .4rem; }
.legal-conteudo a { color: var(--azul); text-decoration: underline; }

/* Destacado de apertura: resume lo esencial antes del texto largo. */
.legal-destaque {
  background: var(--fundo-alt);
  border-left: 4px solid var(--azul);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 1rem 1.15rem;
  font-size: .95rem;
  line-height: 1.65;
}
.legal-aviso {
  background: #fff8e6;
  border-left: 4px solid #d9a406;
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: .9rem 1.1rem;
  font-size: .92rem;
  line-height: 1.6;
}
/* Marca los datos que el titular debe completar antes de publicar. */
.legal-completar {
  background: #fdecea;
  border: 1px dashed var(--rojo);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  font-size: .88rem;
  line-height: 1.6;
}
.legal-normas { list-style: none; padding-left: 0; }
.legal-normas li {
  font-size: .86rem;
  color: var(--texto-suave);
  padding-left: 1.1rem;
  position: relative;
}
.legal-normas li::before {
  content: '§';
  position: absolute;
  left: 0;
  color: var(--texto-tenue);
}
.legal-pasos { padding-left: 1.3rem; }
.legal-nota {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
  font-size: .85rem;
  color: var(--texto-tenue);
}

/* Tablas de datos (política de privacidad y cookies) */
.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  font-size: .88rem;
}
.legal-tabla th, .legal-tabla td {
  border: 1px solid var(--borda);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.legal-tabla thead th {
  background: var(--fundo-alt);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
}
.legal-tabla tbody tr:nth-child(even) { background: #fafbfc; }

@media (max-width: 640px) {
  /* En celular las tablas de 3 columnas no entran: se apilan como bloques
     con la etiqueta de columna delante, en vez de forzar scroll lateral. */
  .legal-tabla, .legal-tabla thead, .legal-tabla tbody,
  .legal-tabla tr, .legal-tabla th, .legal-tabla td { display: block; width: 100%; }
  .legal-tabla thead { display: none; }
  .legal-tabla tr { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: .75rem; }
  .legal-tabla td { border: 0; border-bottom: 1px solid var(--borda); }
  .legal-tabla td:last-child { border-bottom: 0; }
}