/* ============================================================
   Técnica 2000 Propiedades — sistema visual

   No es «un estilo»: es el mismo formulario que la inmobiliaria ya usa en tres
   soportes —la placa de Instagram, la vidriera de Av. Belgrano 980 y el cartel
   de chapa—. La web es el cuarto. Por eso cada valor de acá sale de MEDIR su
   material (o de un requisito de contraste), nunca de un gusto.

   LEY DEL SISTEMA, la única que no se negocia:
       el texto va sobre TINTA PLANA o sobre PAPEL. Nunca sobre una foto.
   Motivos, en orden: (1) el rojo sobre foto da 1,7-2,4:1 y sobre tinta 4,44:1;
   (2) las 18 fotos son recortes de sus placas y traen tipografía residual en el
   borde izquierdo, así que cualquier rótulo encima se pisa con la de la placa;
   (3) tinta maciza + foto limpia + hoja blanca es una decisión de imprenta —
   el velo con degradé y el texto encima es lo que hace todo el mundo.
   De esta ley salen sin discutir: cero degradés, cero backdrop-filter,
   cero scrims, y el fin del problema de las 106 propiedades sin foto.
   ============================================================ */

:root {
  /* --- TINTA. El velo de sus placas es NEUTRO y PLANO: los cuatro cuadrantes
     de post_03 miden 64-96/255 de luminancia, sin dirección. No es un degradé. */
  --tinta:    #131416;
  --tinta-2:  #3B3E42;      /* 9,6:1 sobre papel — cuerpo de texto */
  --tinta-3:  #5C6066;      /* 5,7:1 sobre papel — MÍNIMO del sistema, no bajar */
  --sobre-tinta-2: #A8ADB2; /* 8,2:1 sobre tinta — secundario en fondo oscuro */
  --papel:    #F4F2EE;      /* el blanco del vinilo de la vidriera, no #fff */
  --hoja:     #FFFFFF;      /* la ficha blanca que cuelga del vidrio */
  --linea:    #E2DED7;      /* hairline: reemplaza TODAS las sombras */
  --linea-tinta: rgba(255, 255, 255, .16);

  /* --- ROJO. Del logo, contado en píxeles. La barra CONSULTAS medida en sus
     placas da #F02F23: es el mismo rojo corrido por el JPEG de Instagram.

     PRESUPUESTO DEL ROJO — CINCO usos y ninguno más. Si aparece un sexto,
     el sitio dejó de ser una inmobiliaria y pasó a ser un volante de fiambrería:
       1. la palabra de la operación, itálica 900: 20px sobre tinta en la tarjeta
          → 4,44:1 (AA normal), y 26px sobre papel en la ficha → 3,71:1, que pasa
          AA sólo por ser texto grande en negrita. Por eso 26 y no 16.
       2. el lado derecho de la barra CONSULTAS (teléfono blanco 19px/700) → 4,15:1
       3. la chapa OFICINA HABILITADA (blanco ≥19px/800 mayúsculas)
       4. los filetes de 3px: regla del h2, borde de la tarjeta en hover,
          accent-color de los checkbox y el outline de foco.
       5. .btn-primario, y son DOS en todo el sitio (BUSCAR y «Ver propiedades
          aptas»). Es la única acción que se pinta: el botón de teléfono del
          header y el de tasación van en tinta justamente para no gastar rojo.
     NADA por debajo de 19px se apoya nunca sobre el rojo. En la vidriera real
     «FABIAN SOLIMAN» y «COLEGIADO N°47» van adentro del rojo, chiquitos: ahí
     deliberadamente NO los copiamos, porque 15px blanco sobre #EC3138 es 4,15:1
     y no pasa AA para texto normal. La letra chica baja a la tinta. */
  --rojo:       #EC3138;
  --rojo-hondo: #C4232A;    /* 5,8:1 con blanco — único hover del rojo */

  /* --- FORMA. Binaria: o cápsula o filo. El radio del medio no existe, porque
     «un --radio de 14px para las once cosas» es la marca de agua del CSS
     generado. Sus placas son rectas y sus pastillas son cápsulas perfectas. */
  --r-pastilla: 999px;      /* SOLO la pastilla de localidad y los discos */
  --r-filo: 0;              /* absolutamente todo lo demás */
  --riel: 3px;              /* la línea blanca que enhebra los checks: 5px/1080 */
  --corte: 18px;            /* el corte diagonal — SOLO la chapa OFICINA HABILITADA */

  /* --- AIRE. Cinco pasos, no diecisiete gaps inventados. */
  --e1: 8px; --e2: 14px; --e3: 24px; --e4: 40px; --e5: 72px;

  /* --- MOVIMIENTO. Dos duraciones, dos curvas, y se acabó. */
  --sale: 130ms ease-out;
  --entra: 420ms cubic-bezier(.2, .8, .3, 1);

  --ancho: 1200px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* sin scroll-behavior:smooth a propósito: en iOS pelea con la barra fija de
   CONSULTAS y deja el scroll a mitad de camino */
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta-2);
  font-family: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.12; letter-spacing: 0; color: var(--tinta); }
/* las mayúsculas del castellano necesitan aire arriba: con 1.04 el acento de
   TÉCNICA y la eñe de CABAÑAS se comen contra la línea anterior */
.hero h1, .seccion-cabeza h2, .franja h2, .chapa {
  text-transform: uppercase; letter-spacing: .03em; font-stretch: 112%; line-height: 1.1;
}
.rotulo {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0;
}
.rotulo-claro { color: var(--sobre-tinta-2); }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
/* los items de grid traen min-width:auto y el contenido los estira: sin esto,
   en el celular la página se desborda a lo ancho */
.layout-listado > *, .ficha > *, .grilla > *, .franja > *, .footer-grilla > *,
.hero-in > * { min-width: 0; }

/* ---------- controles ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3);
}
/* 16px y no 15: por debajo de 16, iOS hace zoom solo al enfocar el select y
   deja al que busca con la página corrida */
select, input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-filo);
  background: var(--hoja); font: inherit; font-size: 16px; color: var(--tinta);
  appearance: none; cursor: pointer;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235C6066' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--rojo); outline-offset: 1px; border-color: transparent;
}
.filtro-check { display: flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; }
.filtro-check input { width: 17px; height: 17px; accent-color: var(--rojo); cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 0; border-radius: var(--r-filo); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  transition: background var(--sale), color var(--sale);
}
.btn-primario { background: var(--rojo); color: #fff; }
.btn-primario:hover { background: var(--rojo-hondo); }
.btn-navy { background: var(--tinta); color: #fff; }   /* la clase no se renombra: app.js no la toca, pero el HTML sí */
.btn-navy:hover { background: #2A2D31; }
.btn-fantasma { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn-fantasma:hover { background: var(--tinta); color: #fff; }
/* El WhatsApp de la ficha. Verde de WhatsApp —el mismo del botón del encabezado—
   porque acá el color ES la señal: un botón rojo o negro que dice «WhatsApp» se
   lee como un link cualquiera. Ancho completo: vive en la columna del precio. */
.btn-wa {
  background: #1f7a5c; color: #fff; width: 100%; margin: 14px 0 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-wa:hover { background: #196349; }
.btn-wa svg { width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hoja); border-bottom: 1px solid var(--linea);
}
.header-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: flex; align-items: center; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; font-weight: 600; }
.nav a { color: var(--tinta-3); padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--sale); }
.nav a:hover, .nav a.on { color: var(--tinta); border-color: var(--rojo); }
.tel-header {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: var(--r-filo);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background var(--sale);
}
/* tinta y no rojo: a 15px, blanco sobre #EC3138 da 4,15:1 y no pasa AA para
   texto normal. Sobre tinta da 18,4:1 y además no gasta uno de los cuatro rojos. */
.tel-header:hover { background: #2A2D31; }
/* 44x44 y no 22+4 de padding (=30x30): es el ÚNICO acceso al menú en el celular,
   que es por donde entra el 90% del tráfico. El glifo sigue midiendo 22px; lo que
   crece es el área tocable. margin-right negativo para que el ícono siga alineado
   con el borde del contenedor y no parezca que se despegó. */
.burger {
  display: none; margin-left: auto; margin-right: -11px;
  background: none; border: 0; padding: 0;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--tinta); cursor: pointer; line-height: 0;
}

/* ---------- hero: tinta plana, la vidriera al costado ---------- */
/* ═══════════ EL MAPA DE FONDO ═══════════
   Idea de Octavio (7-ago): el contorno de Río Negro con las localidades donde hay
   propiedades encendidas, detrás del hero. No dice «somos de acá»: se ve.
   NO es una imagen generada: es la geometría real de la provincia y cada punto está
   en su coordenada (scripts/mapa_hero.py). Un mapa inventado lo caza el primer
   vecino que lo mira, y esto es una inmobiliaria del lugar.
   Va al 62% de opacidad sobre la tinta y anclado a la derecha, por debajo de la
   foto de la fachada: tiene que insinuarse, no competir con el título. */
.hero { background: var(--tinta); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("mapa-rionegro.svg") no-repeat left 4% center;
  background-size: auto 76%;   /* ENTERA y con aire: tocando los bordes se leía como
                                  rayas sueltas, y centrada la foto le tapaba la costa,
                                  que es justo donde están los puntos */
  opacity: .5; pointer-events: none;
}
.hero > * { position: relative; }
@media (max-width: 980px) {
  /* en el celular el mapa quedaba detrás del texto justo donde se lee: se corre
     abajo y se apaga a la mitad */
  .hero::before { background-position: center bottom -6%; background-size: 128% auto; opacity: .3; }
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  column-gap: var(--e4); align-items: center; padding: var(--e5) 20px var(--e4);
}
.hero-texto { align-self: center; }
.hero h1 {
  font-size: clamp(28px, 3.4vw, 40px); color: #fff; max-width: 20ch;
  margin: 14px 0 var(--e3);
}
/* <em> recupera su significado: itálica de verdad, no un color rosa */
.hero h1 em { font-style: italic; font-weight: 800; color: #fff; }

/* las siete palabras del panel lateral de la marquesina, textuales. Ningún
   generador produce esta lista: la imprimió un cartelista. */
.servicios {
  list-style: none; padding: 0; margin: 0 0 var(--e3);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 15px; font-weight: 600; color: #fff;
}
.servicios li { display: flex; align-items: center; gap: 8px; }
/* su viñeta es un check en disco blanco, nunca un punto ni un guion */
.servicios li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: var(--r-pastilla);
  background: #fff center/18px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath d='M6.6 12.4l3.6 3.6 7.2-7.5' fill='none' stroke='%23131416' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hero-specs {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-weight: 700; font-size: 15px; color: var(--sobre-tinta-2);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* el separador es el GUION de su cartel de esquina. La cruz del logo no entra
   acá: a 10px, con el travesaño en el tercio superior, se lee como una daga */
.hero-specs .sep { opacity: .5; }

.hero-media { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.hero-media img {
  width: 100%; flex: 1; min-height: 0; aspect-ratio: 4 / 3.2;
  object-fit: cover; object-position: center 44%;
}
.hero-media figcaption {
  background: var(--tinta); color: var(--sobre-tinta-2);
  font-size: 13px; line-height: 1.45; padding: 12px 0 0;
}

/* LA CHAPA — el único corte diagonal del sitio. Es el remate real de la banda
   OFICINA HABILITADA pegada en la vidriera. Una vez por página, nunca dos. */
.chapa {
  grid-column: 1 / -1; margin-top: var(--e4);
  background: var(--rojo); color: #fff; border-radius: 0;
  padding: 15px max(24px, calc(var(--corte) + 24px)) 15px 24px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
  font-weight: 800; font-stretch: 106%; font-size: clamp(19px, 2.6vw, 24px);
}
.chapa-pie {
  grid-column: 1 / -1; margin: 0; padding: 10px 24px 0;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sobre-tinta-2);
}

/* ---------- buscador ---------- */
.franja-buscador { background: var(--hoja); border-bottom: 1px solid var(--linea); padding: var(--e3) 0; }
.buscador {
  background: var(--hoja); border: 1px solid var(--linea); border-top: 3px solid var(--tinta);
  border-radius: var(--r-filo); box-shadow: none; padding: 16px;
  display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr) auto; align-items: end;
}

/* ---------- secciones ---------- */
.seccion { padding: var(--e5) 0 0; }
.seccion-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: var(--e3); flex-wrap: wrap;
}
/* la regla roja va PEGADA al h2 y no colgando en left:-18px fuera del
   contenedor, y no depende de que el observador dispare para existir */
.seccion-cabeza h2 {
  font-size: clamp(21px, 2.6vw, 28px);
  border-left: var(--riel) solid var(--rojo); padding-left: 14px;
}
.seccion-cabeza .rotulo { margin-top: 8px; padding-left: 17px; }
.link-mas {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinta); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; border-bottom: 2px solid var(--rojo); padding-bottom: 3px;
}

/* ============================================================
   LA TARJETA = la placa de Instagram apoyada sobre una hoja de papel.
   La placa arriba (tinta), la foto limpia en el medio, la hoja abajo.
   Sin foto NO HAY BANDA DE FOTO: la tarjeta mide la mitad y el listado
   se lee como un catálogo denso, no como 106 agujeros.
   ============================================================ */

/* la grilla es un pliego: fichas cosidas por filetes. Los filetes van en las
   CELDAS y no con gap:1px + fondo, porque con auto-fill eso pinta un bloque
   gris en la última fila incompleta.
   Y van con OUTLINE, no con border: el outline se dibuja FUERA de la caja, así
   que el de una ficha y el de su vecina caen sobre el mismo píxel y el filete
   interior sigue midiendo 1px en vez de 2. Antes el borde de arriba y el de la
   izquierda vivían en el contenedor .grilla, que ocupa TODOS los tracks aunque
   sobren: al filtrar «Valcheta» (2 resultados en una grilla de 3) quedaba un
   hilo gris colgando en el aire sobre la tercera columna vacía. Con el filete en
   la ficha, cada una se cierra sola y no hay hilos sueltos. */
.grilla {
  /* 268 y no 288: en el listado la columna de fichas mide 852px (1160 de
     contenedor − 268 de filtros − 40 de gap). Con 288 el tercer track pide 864 y
     entra por 12px de menos, así que auto-fill caía a DOS columnas de 426px:
     tarjetas gigantes y, sobre todo, el doble de hueco cuando la vecina tiene
     foto. Con 268 entran tres (804 ≤ 852) y la home sigue en cuatro
     (4×268 = 1072 ≤ 1160; la quinta pediría 1340). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px;
}
/* SÓLO en los listados filtrables (#grilla), donde conviven fichas con foto y
   sin foto —106 de 124 no tienen—. Estirando, la ficha sin foto crecía hasta
   igualar a la vecina con foto y quedaba un vacío BLANCO de ~200px entre el
   título y el precio: leía como tarjeta rota, no como ficha corta. Sin estirar,
   cada ficha mide lo suyo y el hueco que queda es el papel del pliego.
   En la home NO va: la vidriera se arma con `con_foto`, son todas iguales de
   alto, y sin estirar se desflecaría por el título de 2 líneas.
   `.grilla-mixta` es la de «Propiedades similares» de la ficha, que sí mezcla. */
#grilla, .grilla-mixta { align-items: start; }
.tarjeta {
  position: relative; background: var(--hoja); border: 0; border-radius: var(--r-filo);
  box-shadow: none; outline: 1px solid var(--linea);
  display: flex; flex-direction: column;
}
.tarjeta > a { display: flex; flex-direction: column; flex: 1; color: inherit; }

/* --- LA PLACA: disco + riel + operación + tipo + pastilla, sobre tinta plana --- */
.placa {
  position: relative; background: var(--tinta); color: #fff; padding: 14px 14px 16px;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 11px;
}
/* EL RIEL: nace del centro del disco de la casa (⌀92/1080 en sus placas) y baja
   enhebrando la pastilla, igual que enhebra los checks en la placa completa */
.placa::before {
  content: ""; position: absolute; width: var(--riel); background: #fff;
  left: calc(14px + 17px - var(--riel) / 2); top: 53px; bottom: 16px;
}
.placa.sin-lugar::before { content: none; }   /* sin pastilla el riel no llega a nada */
.placa-disco { grid-row: 1 / 3; width: 34px; height: 34px; }
.placa-disco svg { display: block; }
.placa-op {
  display: block; font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: uppercase;
  color: var(--rojo); padding-right: 66px;   /* le deja el hueco al código */
}
.placa-tipo {
  display: block; margin-top: 5px; font-weight: 800; font-stretch: 112%;
  font-size: 15px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase;
}
/* LA PASTILLA: cápsula blanca con la localidad en itálica y una sombra corta y
   dura (blur 0), que es como está impresa en la placa */
.placa-lugar {
  grid-column: 2; justify-self: start; margin-top: 12px;
  background: #fff; color: var(--tinta); font-style: italic; font-weight: 700;
  font-size: 13px; line-height: 1; padding: 7px 15px 8px;
  border-radius: var(--r-pastilla); box-shadow: 0 2px 0 rgba(0, 0, 0, .30);
}
.placa-cod {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--sobre-tinta-2); font-variant-numeric: tabular-nums;
}

/* --- LA FOTO: limpia, sin velo, sin texto encima --- */
.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--tinta); overflow: hidden; }
/* ⚠️ PENDIENTE, y NO se arregla acá: 4 de las 18 fotos son recortes de las placas
   y traen tipografía residual pegada al borde izquierdo («…año» en sao-002,
   «00 mts nte», «ente x», «gon»), en algunos casos hasta el 16% del ancho.
   No sirve corregirlo con object-position: los archivos miden 1000x750 (4:3
   exacto) y la caja también es 4:3, así que object-fit:cover NO recorta nada a
   lo ancho y cualquier desplazamiento horizontal es inerte. El arreglo real es
   recortar los archivos en scripts/matchear_fotos.py, que es quien los genera. */
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- LA HOJA --- */
.tarjeta-cuerpo { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* el h3 NO va en mayúsculas ni expandido: «Complejo de 4 cabañas + 2 unidades
   funcionales» revienta a 112% de ancho */
.tarjeta h3 {
  font-size: 17px; font-weight: 700; font-stretch: 100%; line-height: 1.25;
  letter-spacing: 0; text-transform: none;
}
.ubicacion {
  display: flex; align-items: center; gap: 7px;
  font-style: italic; font-weight: 600; font-size: 14px; color: var(--tinta-3);
}
.ubicacion svg { width: 13px; height: 13px; flex: none; }
.etiqueta.credito {
  align-self: start; background: transparent; color: var(--tinta);
  border: 1px solid var(--tinta); border-radius: var(--r-filo); padding: 3px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
/* el precio anclado abajo: como las tarjetas de una fila estiran a la más alta,
   sin esto la hoja corta se lee como un error y no como una ficha */
.tarjeta-pie {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--linea);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
/* no hay un solo precio en sus 25 placas: el precio no va sobre la placa,
   va en la hoja — que es donde la vidriera lo pone */
.precio { font-size: 19px; font-weight: 800; letter-spacing: 0; color: var(--tinta); font-variant-numeric: tabular-nums; }
.precio small { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.precio.consultar { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
/* caja normal a propósito: text-transform:uppercase convertiría m² en M².
   Y sin display:flex: los separadores « · » son nodos de texto sueltos y flex
   los convertiría en items con su propio gap, partiendo la línea en pedazos. */
.datos { font-size: 13px; color: var(--tinta-3); border: 0; padding: 0; margin: 0; text-align: right; }
.datos b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- ÚNICO gesto de interacción de la tarjeta: la chapa cruza el borde --- */
.tarjeta::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: var(--rojo); transform: scaleX(0); transform-origin: left;
  transition: transform var(--entra);
}
.tarjeta:hover::after { transform: none; }
/* el foco pisa el filete (los dos son outline) y sube de plano para que el anillo
   no quede tapado por la ficha de al lado */
.tarjeta:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; z-index: 3; }

/* ---------- zonas: foto arriba limpia, texto abajo sobre tinta ---------- */
.localidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.localidad {
  position: relative; border-radius: var(--r-filo); overflow: hidden;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  display: flex; flex-direction: column; background: var(--tinta); color: #fff;
}
.localidad .foto { aspect-ratio: 16 / 10; background: var(--tinta); overflow: hidden; }
.localidad .foto img { width: 100%; height: 100%; object-fit: cover; }
/* margin-top:auto y no flex:1: la zona que todavía no tiene foto (General
   Conesa) estiraba su bloque de texto hasta arriba y quedaba desalineada con
   las que sí la tienen. Ahora el texto se apoya abajo en las cuatro. */
.localidad .pie { padding: 14px 16px 16px; margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.localidad b { display: block; font-size: 18px; font-weight: 800; font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.localidad span { display: flex; align-items: center; gap: 7px; font-style: italic; font-weight: 600; font-size: 13px; color: var(--sobre-tinta-2); margin-top: 5px; }
.localidad .cuenta { font-size: 22px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.localidad .cuenta small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-tinta-2); margin-top: 5px; }
.creditos { font-size: 11.5px; color: var(--tinta-3); margin: var(--e2) 0 0; }

/* ---------- franjas ---------- */
.franja { background: var(--tinta); color: #fff; border-radius: var(--r-filo); padding: var(--e4);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e3) var(--e4); align-items: center; }
.franja h2 { color: #fff; }
.franja p { color: var(--sobre-tinta-2); margin: 12px 0 0; }
.franja-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.franja .btn-fantasma { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.franja .btn-fantasma:hover { background: #fff; color: var(--tinta); }
/* la variante clara: hoja blanca con filete de tinta, sin rosa de fondo */
.franja.arena { background: var(--hoja); color: var(--tinta-2); border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.franja.arena h2 { color: var(--tinta); }
.franja.arena p { color: var(--tinta-2); }
.franja.arena .btn-fantasma { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.franja.arena .btn-fantasma:hover { background: var(--tinta); color: #fff; }

/* la obra propia: foto limpia arriba, rótulo abajo sobre tinta */
.franja-obra { border-radius: var(--r-filo); overflow: hidden; margin-bottom: var(--e3); background: var(--tinta); }
.franja-obra img { width: 100%; height: 300px; object-fit: cover; display: block; }
.franja-obra-txt { padding: 14px 18px 16px; color: #fff; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.franja-obra-txt b { font-size: 17px; font-weight: 800; font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; }
.franja-obra-txt span { font-style: italic; font-weight: 600; font-size: 14px; color: var(--sobre-tinta-2); }

/* la línea de servicios del cartel de la esquina, con sus guiones */
.linea-cartel { margin: 0; font-size: clamp(15px, 1.9vw, 18px); font-weight: 600; color: var(--tinta); line-height: 1.5; }

/* ============================================================
   LA BARRA CONSULTAS — el pie de sus 25 placas, medido en post_03/04/09/14:
   ocupa de x=101 a x=999 sobre un canvas de 1080; el blanco va de 101 a 451 y
   el rojo de 452 a 999 → 39,0% / 61,0%, sin gap y sin separador. Alto 72/1080.
   ============================================================ */
/* minmax(0,·) y no 39fr/61fr a secas: con el mínimo automático, «CONSULTAS» más
   su glifo miden más del 39% en un celular angosto y la proporción se corría a
   40,1/59,9. Medida contra el render, no contra la hoja de estilo. */
.consultas { display: grid; grid-template-columns: minmax(min-content, 39fr) minmax(0, 61fr);
  border-radius: var(--r-filo); overflow: hidden; }
.consultas > * {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 9px; text-align: center;
  transition: background var(--sale);
}
/* 15px y no 16: en la ficha esta barra vive dentro del panel de 348px, así que
   el lado blanco mide 39% = 136px. A 16px, «CONSULTAS» + el glifo de WhatsApp
   pedían ~153px: el texto se desbordaba por los dos lados y, como la celda roja
   se pinta después, la S final quedaba TAPADA por el rojo (el overflow:hidden
   sólo recortaba el lado izquierdo). A 15px con gap 8 entra dentro del 39%.
   Y el minmax arranca en min-content, no en 0, para que si algún día la barra
   vive en una caja aún más angosta la proporción ceda ANTES que la palabra:
   39,0/61,0 es la medida de sus placas, pero una palabra tapada no es la marca. */
.consultas .lado-blanco {
  background: #fff; color: var(--tinta); font-style: italic; font-weight: 800;
  font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
.consultas .lado-blanco svg { width: 16px; height: 16px; }
/* 19px/700 sobre #EC3138 = 4,15:1, que es AA para texto grande en negrita.
   Por debajo de eso no se apoya nada sobre el rojo. */
.consultas .lado-rojo {
  background: var(--rojo); color: #fff; font-weight: 700; font-size: 19px;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.consultas .lado-blanco:hover { background: var(--papel); }
.consultas .lado-rojo:hover { background: var(--rojo-hondo); }
.consultas svg { width: 18px; height: 18px; flex: none; }
/* fija en el celular: el 90% del tráfico entra desde Instagram y ahí el header
   esconde el teléfono. Es más visible que una burbuja y cubre los dos canales. */
.consultas-fija {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

/* ---------- listado ---------- */
.layout-listado { display: grid; grid-template-columns: 268px 1fr; gap: var(--e4); align-items: start; padding: var(--e3) 0 var(--e5); }
.filtros { background: var(--hoja); border: 1px solid var(--linea); border-top: 3px solid var(--tinta);
  border-radius: var(--r-filo); padding: 20px; position: sticky; top: 88px; display: grid; gap: 16px; }
.filtros h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.barra-resultados { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--e2); flex-wrap: wrap; }
.barra-resultados .rotulo { color: var(--tinta); }
.barra-resultados b { font-variant-numeric: tabular-nums; }
.vacio { background: var(--hoja); border: 1px solid var(--linea); border-top: 3px solid var(--tinta);
  border-radius: var(--r-filo); padding: var(--e4) var(--e3) 0; text-align: center; color: var(--tinta-2); }
.vacio-txt { margin: 0 0 var(--e3); font-weight: 700; color: var(--tinta); }
.vacio .consultas { margin: 0 calc(var(--e3) * -1); }
.abrir-filtros { display: none; }
.cabeza-listado { padding: var(--e3) 0 var(--e2); }
.cabeza-listado h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; }
.cabeza-listado p { color: var(--tinta-2); max-width: 62ch; margin: 10px 0 0; }

/* ---------- ficha ---------- */
.miga { font-size: 13px; color: var(--tinta-3); padding: 20px 0 0; letter-spacing: .02em; }
.miga a:hover { color: var(--tinta); }
.miga-sep { color: var(--tinta-3); padding: 0 4px; }   /* el guion es el separador de SU cartel */
.ficha { display: grid; grid-template-columns: 1fr 348px; gap: var(--e4); align-items: start; padding: var(--e2) 0 var(--e5); }
.galeria { position: relative; border-radius: var(--r-filo); overflow: hidden; background: var(--tinta); aspect-ratio: 16 / 10; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
/* la marca de agua arriba a la derecha, como en todas sus placas */
.galeria::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 17%; aspect-ratio: 500 / 172;
  background: url(logo_claro.png) right top / contain no-repeat; opacity: .6; pointer-events: none;
}
.ficha-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--tinta); margin-top: var(--e3);
}
.ficha-cabecera .placa-op { font-size: 26px; padding-right: 0; }
.ficha h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; font-stretch: 100%; text-transform: none; letter-spacing: 0; margin: 18px 0 8px; }
.ubicacion-ficha { font-size: 16px; }
.ubicacion-ficha svg { width: 15px; height: 15px; }
/* tabla de escritorio y no tarjetas flotando; flex para que la última fila
   estire y no quede un hueco cuando los datos no llenan la grilla */
.especificaciones { display: flex; flex-wrap: wrap; gap: 0; background: none; border: 0;
  border-top: 2px solid var(--tinta); border-radius: 0; margin: var(--e3) 0; }
.especificaciones div { background: none; padding: 13px 18px 13px 0; flex: 1 1 150px; border-bottom: 1px solid var(--linea); }
.especificaciones dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.especificaciones dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; text-transform: none; }
.bloque-texto { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-filo); padding: 22px 24px 24px; }
.bloque-texto h2 { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; }
.bloque-texto p { margin: 0; color: var(--tinta-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--e2); }
.chip { background: transparent; border: 1px solid var(--linea); border-radius: var(--r-filo);
  color: var(--tinta-2); font-size: 13.5px; font-weight: 600; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 7px; }
/* el crédito hipotecario es lo que más se busca: se despega de los amenities
   con el filete de tinta, no con un verde que no existe en su material */
.chip-credito { border-color: var(--tinta); color: var(--tinta); font-weight: 700; }

/* LA LISTA DE AMBIENTES: riel blanco y checks en disco. Es la pieza más
   inconfundiblemente suya y no la tiene ninguna otra inmobiliaria de la zona. */
.bloque-placa { background: var(--tinta); color: #fff; padding: 24px 26px 26px; border-radius: var(--r-filo); margin-top: var(--e3); }
.bloque-placa h2 { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sobre-tinta-2); border: 0; padding: 0; }
.ambientes { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 10px; max-width: 42ch; }
.ambientes::before { content: ""; position: absolute; left: 10px; top: .7em; bottom: .7em; width: var(--riel); background: #fff; }
.ambientes li { position: relative; color: #fff; font-size: 16px; font-weight: 400; line-height: 1.35; }
.ambientes li::before {
  content: ""; position: absolute; left: -34px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border-radius: var(--r-pastilla);
  background: #fff center/22px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath d='M6.6 12.4l3.6 3.6 7.2-7.5' fill='none' stroke='%23131416' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* el panel: hoja blanca con filete de tinta y la barra CONSULTAS a sangre al pie */
.panel-contacto { position: sticky; top: 88px; background: var(--hoja); border: 1px solid var(--tinta);
  border-radius: var(--r-filo); box-shadow: none; padding: 0; display: block; }
.panel-contacto .cuerpo { padding: 20px 20px 18px; display: grid; gap: 8px; border-bottom: 1px solid var(--linea); }
.panel-contacto .precio { font-size: 28px; }
.panel-contacto .precio.consultar { font-size: 14px; }
/* 2-sep-2026, Octavio mirando una ficha en el celular: «esto está horrible, queda
   todo largo, muy feo». Eran ocho datos, uno abajo del otro, con el rótulo arriba
   y el valor abajo: dieciséis renglones para decir «departamento, 1 dormitorio,
   312 m², San Antonio Oeste». En una pantalla de teléfono eso empuja el botón de
   WhatsApp —que es lo único que tiene que hacer el que mira— abajo de todo.
   En dos columnas ocupa la mitad y se lee de un golpe de vista. */
.ficha-datos {
  margin: 0; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 18px;
}
/* Lo que puede ser largo (la ubicación, «apta crédito hipotecario») ocupa el ancho
   entero en vez de cortarse en dos renglones angostos. */
.ficha-datos > div.ancho { grid-column: 1 / -1; }
.ficha-datos dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.ficha-datos dd { margin: 1px 0 0; font-size: 14.5px; color: var(--tinta); }
.aviso-privacidad { font-size: 12.5px; color: var(--tinta-3); line-height: 1.5; margin: 0; padding: 0 20px 18px; }

/* ---------- pie ---------- */
.footer { background: var(--tinta); color: var(--sobre-tinta-2); padding: var(--e5) 0 var(--e3); margin-top: var(--e5); }
.footer-grilla { display: grid; grid-template-columns: 1.35fr 1fr 1.05fr .9fr; gap: var(--e4); align-items: start; }
.footer h4 { color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
.footer-abajo { border-top: 1px solid var(--linea-tinta); margin-top: var(--e4); padding-top: 20px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-marca .logo img { max-width: 190px; height: auto; }
.footer-marca p { margin: 16px 0 0; font-size: 14.5px; max-width: 34ch; }
.footer-horario { color: var(--sobre-tinta-2); font-size: 13.5px; }
.footer-dir { margin: 0; font-size: 14.5px; line-height: 1.65; }
.footer-mat { margin: 14px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border-left: var(--riel) solid var(--rojo); padding-left: 11px; }
/* el WhatsApp es una hoja blanca, no un botón verde: el verde es de WhatsApp,
   no de ellos, y en su material no aparece una sola vez */
.footer-wa { display: inline-flex; align-items: center; gap: 11px; background: #fff; color: var(--tinta);
  padding: 11px 16px; border-radius: var(--r-filo); margin-bottom: 14px; transition: background var(--sale); }
.footer-wa:hover { background: var(--papel); color: var(--tinta); }
.footer-wa b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.footer-wa small { display: block; font-style: italic; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.footer-tels { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.footer-tels li::before { content: "Tel. "; color: var(--tinta-3); font-size: 12px; }
.footer-redes { display: flex; gap: 16px; font-size: 14.5px; }
.footer-redes a { border-bottom: 1px solid var(--linea-tinta); padding-bottom: 2px; }
.footer-redes a:hover { border-color: var(--rojo); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) { .footer-grilla { grid-template-columns: 1fr 1fr; gap: var(--e3); } }
@media (max-width: 980px) {
  .ficha, .layout-listado { grid-template-columns: 1fr; }
  .franja { grid-template-columns: 1fr; padding: var(--e3); }
  .panel-contacto, .filtros { position: static; }
  .buscador { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .hero-in { grid-template-columns: 1fr; row-gap: var(--e3); padding-top: var(--e4); }
  .hero-media img { aspect-ratio: 16 / 10; }
  .franja-obra img { height: 210px; }
  .chapa, .chapa-pie { padding-left: 0; }
  .chapa { padding-left: 20px; margin-left: -20px; }   /* la chapa sale a sangre por la izquierda, como pegada al vidrio */
}
@media (max-width: 720px) {
  .nav, .tel-header { display: none; }
  .burger { display: inline-flex; }
  .nav.abierta {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--hoja); padding: 16px 20px; gap: 4px; border-bottom: 1px solid var(--linea);
  }
  /* 12px arriba y abajo sobre una línea de ~20px = 44px de alto tocable */
  .nav.abierta a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .buscador { grid-template-columns: 1fr; }
  .seccion { padding-top: var(--e4); }
  .footer-grilla { grid-template-columns: 1fr; }
  .abrir-filtros { display: inline-flex; }
  .filtros.oculto { display: none; }
  /* la barra fija se come 56px: sin esto tapa la última tarjeta y el pie */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) { .consultas-fija { display: none; } }
@media (max-width: 620px) { .footer-grilla { grid-template-columns: 1fr; gap: var(--e3); } }
@media (max-width: 520px) { .tarjeta-foto { aspect-ratio: 16 / 9; } }
/* a menos de 400px el corte diagonal se comería una letra de HABILITADA */
@media (max-width: 400px) { .chapa { --corte: 0px; } }

/* ============================================================
   MOVIMIENTO — de catorce animaciones a tres. Sus placas no se mueven:
   el que scrollea Instagram tiene que reconocer la web como el mismo lugar.
   Se activa sólo si el JS corrió (html.anim): sin JS la página se ve entera.
   ============================================================ */
html.anim [data-anim] { opacity: 0; transform: translateY(8px); }
html.anim [data-anim].visible {
  opacity: 1; transform: none;
  transition: opacity var(--entra), transform var(--entra);
  transition-delay: calc(var(--d, 0) * 45ms);
}
.hero h1 .pal { display: inline-block; }
.hero h1 .pal > span { display: inline-block; }
html.anim .hero h1 .pal > span {
  opacity: 0; animation: aparecer .5s ease-out forwards;
  animation-delay: calc(var(--i) * 40ms + 80ms);
}
@keyframes aparecer { to { opacity: 1; } }

/* --- quien pide menos movimiento, no lo recibe --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html.anim [data-anim] { opacity: 1; transform: none; }
  html.anim .hero h1 .pal > span { transform: none; opacity: 1; }
}

/* El JS oculta con el atributo `hidden`, pero `.tarjeta` declara `display:flex`
   y le gana al `display:none` del navegador: el contador decía «2 propiedades»
   y abajo seguían las 124. Esto tiene que ganarle a cualquier display. */
[hidden] { display: none !important; }

/* Las zonas tienen nombres de largo muy distinto («Las Grutas» vs «San Antonio
   Oeste», que ocupa dos renglones) y el contador quedaba a distinta altura en
   cada tarjeta. Se alinean por arriba y el nombre reserva las dos líneas. */
.localidad .pie { align-items: flex-start; }
.localidad .pie > div:first-child { min-height: 3.05em; display: flex; flex-direction: column; }
.localidad .pie > div:first-child span { margin-top: auto; padding-top: 6px; }
.localidad .cuenta { text-align: right; flex: none; }

/* ---------- propiedades sin foto ----------
   Son 106 de 124. Si la tarjeta no dibuja nada, se ve rota y la propiedad
   parece no existir. Un bloque de tinta con el aviso mantiene la placa entera
   y le dice al interesado qué hacer: preguntar. */
.tarjeta-foto.sin-foto, .galeria.sin-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--tinta); color: var(--sobre-tinta-2);
  aspect-ratio: 4 / 3; text-align: center; padding: 20px;
}
.galeria.sin-foto { aspect-ratio: 16 / 10; }
.tarjeta-foto.sin-foto svg, .galeria.sin-foto svg { opacity: .5; }
.tarjeta-foto.sin-foto span, .galeria.sin-foto span {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
}
.tarjeta-foto.sin-foto small, .galeria.sin-foto small {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none; font-style: italic; color: var(--sobre-tinta-2);
}
.galeria.sin-foto span { font-size: 14px; }
.galeria.sin-foto small { font-size: 13.5px; }

/* ---------- alineación de la vidriera ----------
   Las tarjetas de una fila estiran a la más alta. Con el título ocupando 1 ó 2
   líneas según el largo de la calle, y la chapa de crédito sólo en algunas, el
   precio de cada una caía a distinta altura y entre medio quedaba papel en
   blanco. Se resuelve por estructura, no a ojo: el título reserva SIEMPRE dos
   líneas y la chapa de crédito ya no vive en el cuerpo. */
.tarjeta h3 {
  font-size: 18.5px; line-height: 1.28;
  /* SIEMPRE dos renglones: ni uno (que dejaría el precio más arriba que el de
     al lado) ni tres (que empujaría la fila entera). «Casa · 3 dorm. en Bº
     Magisterio San Martin N° 2630» se corta con puntos suspensivos; el nombre
     completo está en la ficha. */
  min-height: calc(2 * 1.28em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* la chapa de crédito va SOBRE la foto y fuera del flujo: dentro de la placa
   estiraba esa cabecera y la tarjeta arrancaba la foto más abajo que las vecinas.
   Es tinta plana sobre la imagen, no texto suelto: la regla se respeta. */
.placa-credito {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--rojo); padding: 5px 11px;
}

/* la placa pesaba casi un tercio de la ficha: se compacta para que el
   protagonismo vuelva a la foto y al título, que es lo que se mira */
.placa { padding: 11px 13px 12px; }
.placa-disco { width: 30px; height: 30px; }
.placa-disco svg { width: 30px; height: 30px; }

/* la franja roja del hero ahora es un llamado, no un dato administrativo:
   se le agrega la bajada y se le baja el cuerpo, que ocupaba de más */
.chapa { display: block; text-decoration: none; }
.chapa span {
  display: block; margin-top: 3px; font-size: 13px; font-weight: 500;
  font-style: italic; letter-spacing: 0; text-transform: none; color: #ffe0e1;
}
.chapa:hover { background: var(--rojo-hondo); }

/* ═══════════ LA TARJETA: la foto primero ═══════════
   La placa negra arriba empujaba la imagen hacia abajo: lo primero que se veía
   era una franja de texto y recién después la casa. En una inmobiliaria lo que
   engancha es la propiedad, no el rótulo. La foto vuelve arriba y el lenguaje
   de sus placas queda como chapas macizas encima: bloques de tinta y rojo, que
   es exactamente lo que hacen en la vidriera. */
.tarjeta > a > .placa { display: none; }          /* la cabecera vieja se retira */
.tarjeta-foto { position: relative; }

.chapa-op, .chapa-cod, .chapa-lugar { position: absolute; z-index: 2; }
.chapa-op {
  top: 0; left: 0; background: var(--rojo); color: #fff;
  font-style: italic; font-weight: 900; font-size: 14px;
  letter-spacing: .02em; text-transform: uppercase; padding: 6px 13px 7px;
}
.chapa-cod {
  top: 0; right: 0; background: rgba(19, 20, 22, .88); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 7px 11px;
}
.chapa-lugar {
  bottom: 10px; right: 10px; background: #fff; color: var(--tinta);
  font-style: italic; font-weight: 700; font-size: 12.5px;
  padding: 5px 13px; border-radius: var(--r-pastilla);
}
.placa-credito { left: 0; bottom: 0; }            /* la de crédito, abajo a la izquierda */

/* el tipo pasa a ser un rótulo chico arriba del título, donde no compite */
.tipo-linea {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tarjeta h3 { margin-top: 2px; }

/* sin foto: las chapas necesitan un lienzo, así que el bloque de tinta lo es */
.tarjeta-foto.sin-foto { position: relative; }

/* ═══════════ TARJETAS DE ZONA ═══════════
   Con «fichas» entraba; con «propiedades» —que es la palabra correcta— el
   número y el nombre peleaban por la misma línea y en Valcheta el contador se
   salía del bloque. El contador sube a la foto como chapa, igual que en las
   tarjetas de propiedad, y abajo queda el nombre solo, con aire. */
.localidades { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.localidad { position: relative; }
.localidad .cuenta {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--rojo); color: #fff; padding: 6px 12px 7px;
  font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.localidad .cuenta small {
  display: inline; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #ffdcdd; margin: 0;
}
.localidad .pie { display: block; padding: 15px 16px 17px; }
.localidad b { font-size: 19px; margin-bottom: 7px; }
.localidad span { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }


/* ═══════════ CONTRASTE Y LIMPIEZA DE LA FICHA ═══════════
   Dos cosas que se veían mal en el listado:
   1. La tarjeta blanca sobre un fondo casi blanco no se despegaba: parecía una
      lista continua y no fichas separadas. El fondo de la página baja un tono
      y la ficha queda en blanco puro, como una hoja apoyada sobre el pliego.
   2. El rótulo repetía lo que ya decía el título («CASA» + «Casa · 3 dorm. en
      Mt de Alvear»), y los dormitorios aparecían arriba y abajo. Ahora el
      título es la dirección sola y cada dato se dice una vez. */
body { background: #EDEAE4; }
.tarjeta { background: #fff; outline-color: #C6BDAE; }   /* el contorno tiene que verse contra el papel del fondo: cada ficha es una propiedad, no una celda de planilla */
.seccion, .franja-buscador { background: transparent; }

/* la dirección sola necesita más presencia: es lo que identifica la propiedad */
.tarjeta h3 { font-size: 19.5px; font-weight: 700; }
.tipo-linea { color: var(--rojo); }      /* el rubro, en el rojo de la casa */

/* el precio, separado del resto por su propia línea */
.tarjeta-pie { border-top-color: #E4DFD7; }

/* los 7 servicios se acomodaban 6+1 y «Campos» quedaba solo abajo. Grid de 4
   columnas: quedan 4 arriba y 3 abajo, dos filas parejas. */
.servicios {
  display: grid; grid-template-columns: repeat(4, max-content);
  gap: 11px 26px;
}
@media (max-width: 940px) { .servicios { grid-template-columns: repeat(3, max-content); } }
@media (max-width: 560px) { .servicios { grid-template-columns: repeat(2, max-content); gap: 9px 18px; } }

/* el título de la ficha ocupa EXACTAMENTE dos renglones, no «al menos»: con
   min-height una dirección corta dejaba menos alto que otra y el precio de cada
   tarjeta caía a distinta altura dentro de la misma fila. */
.tarjeta h3 { height: calc(2 * 1.28em); min-height: 0; }

/* El pie era una sola línea con el precio a un lado y los datos al otro, pero
   cuando los datos eran largos («3 dorm. · 353 m² · Quincho · Cochera») no
   entraban, envolvían, y el precio de ESA tarjeta subía respecto de las vecinas.
   Dos filas fijas: precio arriba, datos abajo. Siempre igual, entren o no. */
.tarjeta-pie {
  display: grid; grid-template-columns: 1fr; gap: 5px;
  align-items: start; flex-wrap: nowrap;
}
.tarjeta-pie .datos { text-align: left; }

/* ═══════════ EL PRECIO SOBRE PAPEL, NO SOBRE BLANCO ═══════════
   La tarjeta entera en #FFF dejaba el dato que la gente busca —el precio—
   flotando sin peso, y la grilla se leía como una hoja en blanco. El pie va
   sobre --papel (#F4F2EE): es el blanco del vinilo de su vidriera, ya está en
   la paleta. No es un gris nuevo ni un bordó: el rojo tiene presupuesto de
   cinco usos y este no es ninguno de ellos.
   Se apoya en los bordes de la tarjeta (márgenes negativos) para que sea una
   banda de verdad y no un recuadro flotando con aire alrededor. */
.tarjeta-pie {
  background: #EFEAE1;            /* --papel quedaba casi blanco sobre blanco */
  margin: 11px -16px -15px;       /* anula el padding del cuerpo: 16 a los lados, 15 abajo */
  padding: 12px 16px 14px;
  border-top: 1px solid #DED7CB;
}
.tarjeta:hover .tarjeta-pie { background: #E8E2D7; }

/* ═══════════ ACCESO A WHATSAPP ═══════════
   El botón del encabezado va en VERDE: ese número es el WhatsApp, no un
   teléfono, y en negro se leía como un dato más. Y el flotante vuelve: en
   escritorio no había ningún acceso permanente (la barra CONSULTAS fija sólo
   sale en celular). Es el canal por donde entra el trabajo. */
.tel-header { background: #1f7a5c !important; color: #fff !important; }
.tel-header:hover { background: #17624a !important; }

.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
  transition: transform .15s;
}
.wa-flotante:hover { transform: scale(1.07); }
/* en celular manda la barra CONSULTAS fija del pie: dos botones flotantes
   encima del contenido serían dos estorbos */
@media (max-width: 720px) { .wa-flotante { display: none; } }

/* La pastilla de localidad quedaba en BLANCO SOBRE BLANCO en las fichas sin
   foto: el `span` del aviso «fotos en camino» está en blanco y su regla
   alcanzaba también a la pastilla, que es blanca por dentro. Se acota el
   selector a los hijos directos del aviso. */
.tarjeta-foto.sin-foto > span, .galeria.sin-foto > span { color: #fff; }
.tarjeta-foto.sin-foto .chapa-lugar { color: var(--tinta); font-size: 12.5px;
  letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 700; }
.tarjeta-foto.sin-foto .chapa-op { font-size: 14px; letter-spacing: .02em; }
.tarjeta-foto.sin-foto .chapa-cod { font-size: 11px; }

/* ═══════════ CAPTACIÓN ═══════════
   Una inmobiliaria no vive sólo de vender: vive de conseguir qué vender. Esta
   sección le habla al DUEÑO, no al comprador, y separada por tipo de propiedad
   porque el que tiene un campo no se siente aludido por «publicá tu casa». */
.captar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0; }
.captar {
  background: var(--hoja); outline: 1px solid var(--linea); padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 9px; transition: background .2s;
}
.captar:hover { background: #fff; }
.captar b { font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--tinta); }
.captar span { font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; flex: 1; }
.captar em {
  font-style: italic; font-weight: 700; font-size: 14.5px; color: var(--rojo);
  display: flex; align-items: center; gap: 7px; transition: gap .2s;
}
.captar:hover em { gap: 12px; }
.captar.destacada { background: var(--tinta); outline-color: var(--tinta); }
.captar.destacada:hover { background: #1d1f22; }
.captar.destacada b { color: #fff; }
.captar.destacada span { color: var(--sobre-tinta-2); }
.captar.destacada em { color: #ff8085; }

/* ═══════════ GALERÍA DE LA FICHA ═══════════
   Las publicaciones son carruseles: detrás de la placa vienen la cocina, los
   dormitorios y el patio. Mostrar sólo la portada era tirar el material que
   ellos ya tenían hecho. */
.tira { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.tira-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); width: 100%; margin-bottom: 2px;
}
.mini { display: block; width: calc(20% - 5px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinta); }
.mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .2s; }
.mini:hover img { transform: scale(1.08); opacity: .88; }

/* Cuál se está viendo. El filo rojo es el de sus placas, no un borde de librería. */
.mini { position: relative; cursor: pointer; }
.mini.activa { outline: 3px solid var(--rojo); outline-offset: -3px; }
.mini.activa img { opacity: 1; }
.mini:not(.activa) img { opacity: .72; }
.mini:not(.activa):hover img { opacity: 1; }

/* Flechas y contador sobre la foto grande. Quedan por encima de la marca de agua (::after). */
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 60px; border: 0; cursor: pointer;
  background: rgba(19, 20, 22, .55); color: #fff;
  font-size: 30px; line-height: 1; padding: 0;
  transition: background .18s, opacity .18s; opacity: 0;
}
.gal-prev { left: 0; }
.gal-sig { right: 0; }
.galeria:hover .gal-nav, .gal-nav:focus-visible { opacity: 1; }
.gal-nav:hover { background: var(--rojo); }
.gal-cuenta {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(19, 20, 22, .62); color: #fff;
  font-size: 13px; font-weight: 600; padding: 4px 10px; letter-spacing: .02em;
}
/* En el celular no hay hover: las flechas se ven siempre y son más cómodas de tocar. */
@media (hover: none) {
  .gal-nav { opacity: 1; width: 40px; height: 68px; }
}
@media (max-width: 620px) { .mini { width: calc(33.333% - 4px); } }

/* ═══════════ OPERACIONES CERRADAS ═══════════
   Una propiedad vendida NO se borra del sitio: 40 años de trayectoria se
   demuestran mostrando lo que se cerró, no escondiéndolo. Pero tiene que
   distinguirse de un metro de distancia, o el que busca comprar se frustra.
   Tres señales, en este orden: la foto pierde color, la chapa deja de ser roja
   y el precio desaparece (cuánto se pagó es del vendedor y del comprador). */
.tarjeta.vendida .tarjeta-foto img { filter: grayscale(1) contrast(.92); opacity: .78; }
.tarjeta.vendida .chapa-op { background: var(--tinta); }
.tarjeta.vendida:hover .tarjeta-foto img { filter: grayscale(.55) contrast(.96); opacity: .9; }
.precio.cerrada {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3);
}
/* el aviso de la ficha: primero en la página, antes de las fotos */
.sello-cerrada {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--tinta); color: #fff; border-radius: var(--r-filo);
  padding: 13px 18px; margin: 0 0 var(--e3);
}
.sello-cerrada b {
  font-size: 15px; font-weight: 800; font-stretch: 112%;
  letter-spacing: .12em; text-transform: uppercase;
}
.sello-cerrada span { font-size: 13.5px; color: var(--sobre-tinta-2); }
.ficha .galeria { position: relative; }
.tarjeta.vendida .placa-op { color: var(--tinta); }
/* En la ficha, «VENDIDA» NO puede ir en el rojo de la operación: en todo el resto
   del sitio ese rojo significa «esto se puede comprar». Va en tinta, y la foto
   pierde color igual que en la tarjeta, para que las dos vistas digan lo mismo. */
.ficha.vendida .placa-op { color: var(--tinta-3); }
.ficha.vendida .galeria img, .ficha.vendida .galeria-principal img {
  filter: grayscale(1) contrast(.94); opacity: .85;
}
.ficha.vendida .panel-contacto .rotulo { color: var(--tinta-3); }

/* ═══════════ QUIÉN ATIENDE CADA LÍNEA ═══════════
   Son tres personas distintas: el que llama quiere saber por quién preguntar.
   Un número suelto obliga a explicar dos veces quién es quién. */
/* Los tres renglones, mismo cuerpo y mismo ritmo. El nombre a la DERECHA del
   número (es un dato del mismo renglón, no una segunda línea) y el WhatsApp
   como chapa blanca del alto del renglón: sobresale sin romper la columna. */
.footer-tels li { display: flex; align-items: center; gap: 9px; min-height: 26px; flex-wrap: wrap; }
/* Un teléfono NUNCA se parte en dos renglones: «2934-» arriba y «520003» abajo no
   es un número, es dos cosas (pasó al sacarle la chapa al de WhatsApp, porque el
   ícono suma ancho en una columna angosta). Si algo tiene que bajar, que baje el
   nombre. */
.footer-tels a, .footer-tels .tel-de { white-space: nowrap; }
/* El rótulo de la izquierda con ancho fijo: si no, el renglón del WhatsApp
   —que no lleva «Tel.»— arranca corrido y los tres números quedan en escalera. */
.footer-tels li::before {
  content: "Tel."; color: var(--tinta-3); font-size: 12px; flex: none;
  min-width: 30px;
}
/* En el de WhatsApp el lugar queda reservado y vacío: lo que lo distingue es el
   ícono, que va adentro del enlace. */
.footer-tels li.es-wa::before { content: ""; min-width: 0; }

/* 🔴 LOS TRES IGUALES (2-sep-2026). El primero era una chapa blanca y los otros
   dos, texto: tres números del mismo negocio con dos pesos distintos, y el
   rectángulo blanco partiendo la columna. Octavio: «que queden los 3 mostrándose
   igual, sin el rectángulo blanco».
   Sigue distinguiéndose —es el WhatsApp— pero por el ÍCONO, que es lo que ya
   significa WhatsApp en cualquier lado, no por un recuadro que grita. */
.footer-tels .wa-chapa {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; color: inherit; font-weight: inherit;
  padding: 0; border-radius: 0;
  transition: color var(--sale);
}
.footer-tels .wa-chapa svg { flex: none; opacity: .9; }
.footer-tels .wa-chapa:hover { background: none; color: #fff; }
.tel-de {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--sobre-tinta-2);
}
.tel-de::before { content: "· "; color: var(--tinta-3); }

/* ═══════════ LA FRANJA EN UNA COLUMNA ═══════════
   Debajo de 980px la franja pasa a una sola columna y .franja-acciones —que es
   flex y arranca desde la izquierda— se quedaba ocupando los 892px de la fila
   con los dos botones apretados a la izquierda y el resto vacío. Se leía como un
   bloque descentrado, no como una decisión.
   Grid de dos celdas iguales: los botones ocupan la fila entera y quedan
   parejos. Abajo de 620px se apilan, que es donde un botón de media fila ya
   queda demasiado angosto para su texto. */
/* En escritorio el problema era el otro: los botones son flex desde la izquierda
   dentro de una columna de 433px, así que «Pedir una tasación» (216px) y «Llamar»
   (236px) quedaban cortos, con 250px de aire a la derecha Y con el borde derecho
   desparejo entre ellos. Se leía torcido, no alineado.
   Grid de UNA columna del ancho del botón más largo, pegada a la derecha del
   bloque: los dos miden lo mismo y cierran contra el mismo borde que el texto. */
.franja-acciones {
  display: grid; grid-template-columns: max-content;
  justify-content: end; justify-items: stretch;
}
@media (max-width: 980px) {
  .franja-acciones { grid-template-columns: 1fr 1fr; justify-content: stretch; align-items: stretch; }
  .franja-acciones .btn { width: 100%; }
}
@media (max-width: 620px) {
  .franja-acciones { grid-template-columns: 1fr; }
}

/* ═══════════ PÁGINAS DE ZONA ═══════════
   «Casas en Las Grutas» es lo que se busca, y hasta ahora eso era
   propiedades.html?localidad=… : una sola URL con el <h1> reescrito por
   JavaScript. Ahora cada localidad tiene su página, y esto es su encabezado.

   No hay ni un valor nuevo acá abajo: la foto se apoya como en la tarjeta de
   zona (limpia, sin texto encima), el H1 usa el mismo registro condensado en
   versalitas de .cabeza-listado y el párrafo del cliente lleva el mismo riel
   rojo de 3px que la regla del h2. El sistema ya estaba; esto lo aplica. */
.cabeza-zona {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--e4);
  align-items: center; padding: var(--e3) 0 var(--e2);
}
.cabeza-zona > * { min-width: 0; }
.zona-foto { margin: 0; }
/* height:auto NO es de adorno: el <img> lleva el atributo height="750" —que está
   para reservar el lugar y que la página no salte— y ese atributo cuenta como
   altura declarada, así que `aspect-ratio` queda ignorado y la foto salía de
   546x750, o sea vertical y recortada al medio. Medido en el navegador, no a ojo. */
.zona-foto img {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--tinta);
}
.zona-foto figcaption { font-size: 11.5px; color: var(--tinta-3); margin-top: 8px; }
.cabeza-zona-txt h1 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800; font-stretch: 112%;
  letter-spacing: .03em; text-transform: uppercase; margin-top: 10px;
}
.zona-bajada { color: var(--tinta-2); max-width: 62ch; margin: 14px 0 0; }
/* lo que dice el cliente sobre su zona se distingue de lo que dicen los datos:
   es la única parte de la página que no es un conteo */
.zona-propio {
  color: var(--tinta-2); max-width: 62ch; margin: var(--e2) 0 0;
  border-left: var(--riel) solid var(--rojo); padding-left: 14px;
}
.zona-conteos {
  list-style: none; margin: var(--e3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.zona-conteos li {
  border: 1px solid var(--linea); background: var(--hoja); padding: 7px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta-2);
}
.zona-conteos b { font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* el salto de una zona a la otra, al pie del listado: el que mira Puerto del
   Este mira también San Antonio, y hasta hoy para pasar había que volver al home */
.chips-zonas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-zona {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--linea); background: var(--hoja); padding: 9px 14px;
  font-size: 14px; font-weight: 600; color: var(--tinta-2);
  transition: border-color var(--sale), color var(--sale);
}
.chip-zona b { font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.chip-zona:hover { border-color: var(--tinta); color: var(--tinta); }

/* En una página de zona el selector de localidad no va: elegir otra dejaba la
   grilla en cero. Queda dicho dónde estás parado, con la salida al lado. */
.campo-fijo .valor-fijo {
  margin: 0; padding: 11px 12px; border: 1px solid var(--linea); background: var(--papel);
  font-size: 16px; font-weight: 700; color: var(--tinta);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.campo-fijo .valor-fijo a {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); border-bottom: 2px solid var(--rojo); padding-bottom: 2px; flex: none;
}
.campo-fijo .valor-fijo a:hover { color: var(--tinta); }

@media (max-width: 900px) {
  .cabeza-zona { grid-template-columns: 1fr; gap: var(--e2); }
  .zona-foto img { aspect-ratio: 16 / 9; }
}

/* ═══════════ EL MENÚ PASÓ DE 7 ÍTEMS A 8 ═══════════
   Con «Zonas» adentro, entre 721 y 790px —la franja donde el burger todavía no
   aparecía (entraba recién a 720) pero ya no había lugar— la barra empujaba la
   página 26px a lo ancho y TODO el sitio se podía scrollear en horizontal.
   Medido en el navegador a dieciocho anchos, no calculado a ojo: el desborde de
   un header es de los errores que en la pantalla del que lo hace no se ven nunca.

   El burger entra ahora a 860 en vez de a 720. Lo que NO se mueve de 720 es el
   resto: la barra fija de CONSULTAS, el botón flotante y los filtros siguen
   cambiando donde cambiaban. Y el teléfono verde del encabezado SIGUE A LA VISTA
   en esta franja —se esconde recién a 720, como siempre—: es por donde entra el
   trabajo y no se saca de la pantalla para acomodar un menú. */
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .nav.abierta {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--hoja); padding: 16px 20px; gap: 4px; border-bottom: 1px solid var(--linea);
    z-index: 60;
  }
  .nav.abierta a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
}
/* SÓLO en la franja de tablet, donde el teléfono verde sigue en pantalla: es él
   el que se apoya contra la derecha y el burger va pegado a su lado. Debajo de
   720 el teléfono desaparece y el burger vuelve a ser el que empuja (margin-left
   auto de su regla base) — por eso este bloque lleva min-width y no se aplica en
   el celular, donde dejaría el botón del menú pegado al logo. */
@media (min-width: 721px) and (max-width: 860px) {
  .tel-header { margin-left: auto; }
  .burger { margin-left: 12px; margin-right: -11px; }
}

/* ---------- formulario de tasación ----------
   Va adentro de la franja arena, debajo de los botones. Dos columnas en
   escritorio y una sola en el teléfono, que es donde se completa de verdad:
   el que quiere tasar su casa está parado en la vereda, no en un escritorio.
   Reusa .campo (el mismo control del buscador) — no hay un segundo lenguaje
   de formularios en el sitio. */
.form-tasacion {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 20px; border-top: 1px solid var(--linea);
}
.form-tasacion .campo:nth-child(3),
.form-tasacion button { grid-column: 1 / -1; }
.form-tasacion button { justify-self: start; }
.form-tasacion .form-nota {
  grid-column: 1 / -1; margin: -4px 0 0;
  font-size: 13px; color: var(--tinta-3);
}
@media (max-width: 640px) {
  .form-tasacion { grid-template-columns: 1fr; }
  .form-tasacion button { justify-self: stretch; text-align: center; }
}

/* ---------- mapa de zona en la ficha ----------
   Marca la LOCALIDAD, no la dirección: la puerta de una casa en venta no se
   publica. Va sobre tinta plana, como todo lo demás del sistema. */
.mapa-zona { margin: 18px 0 0; }
/* El mapa es una referencia, no el contenido: a ancho completo se comía media
   pantalla del celular y dejaba la ficha larguísima (2-sep-2026). */
.mapa-zona img {
  display: block; width: 100%; height: auto;
  max-height: 190px; object-fit: contain;
  border-radius: var(--r-filo);
}
.mapa-zona figcaption {
  margin-top: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
}


/* ---------- la lupa del listado ----------
   El listado tenia cinco selectores y ningun campo de texto: quien entraba
   sabiendo QUE buscaba —«Belgrano», «SAO-041»— no tenia donde escribirlo.
   Va PRIMERA en la columna de filtros, que es donde se la busca. */
/* La barra del listado: ancho completo, arriba de todo y SIEMPRE visible —no
   adentro del panel de filtros, que en el celular esta colapsado. */
.buscador-listado { margin: 0 0 14px; }
.buscador-listado .con-lupa svg { left: 12px; width: 18px; height: 18px; }
.buscador-listado input[type="search"] { padding: 12px 14px 12px 40px; font-size: 15px; }

/* La lupa del encabezado, en todas las paginas. */
.lupa-header {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 4px;
  color: var(--tinta); border-radius: var(--r-filo);
}
.lupa-header:hover { background: var(--papel); }
@media (max-width: 900px) {
  /* En el celular la lupa se queda: es el acceso mas usado y no puede irse con
     el resto del menu adentro del burger. */
  .lupa-header { order: 2; margin-right: 2px; }
}

.campo-buscar { margin-bottom: 14px; }
.con-lupa { position: relative; display: flex; align-items: center; }
.con-lupa svg {
  position: absolute; left: 10px; width: 16px; height: 16px;
  color: var(--tinta-3); pointer-events: none;
}
.con-lupa input[type="search"] {
  width: 100%; padding: 10px 12px 10px 34px;
  font: inherit; font-size: 14px; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-filo);
  -webkit-appearance: none; appearance: none;
}
.con-lupa input[type="search"]:focus {
  outline: none; border-color: var(--rojo);
}
.con-lupa input::placeholder { color: var(--tinta-3); }


/* ---------- la firma del pie ----------
   El nombre, el titular y el rubro estaban quemados dentro del logo, en 492 px y
   con los halos del JPG original: sobre el fondo oscuro se veía sucio (2-sep-2026,
   Octavio: «ese logo quedó feo, hacé que quede bien pro»). Ahora son texto, con la
   tipografía del sitio y la jerarquía que tienen en el logo real: el nombre pesa,
   el titular es el dato chico y el rubro va en la cursiva de la marca. */
.footer-marca .logo img { max-width: 232px; height: auto; }
.marca-firma {
  margin: 12px 0 14px; display: flex; flex-direction: column; gap: 2px;
  line-height: 1.25;
}
.marca-firma strong {
  font-family: var(--titulo, inherit);
  font-size: 17px; font-weight: 700; letter-spacing: .01em; color: #fff;
}
.marca-firma span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo, #EC3138);
}
.marca-firma em {
  font-style: italic; font-size: 14px; color: rgba(255, 255, 255, .82);
}


/* ---------- el teléfono del panel ----------
   Era un botón rojo del mismo peso que el de WhatsApp, en una barra que además
   repetía el WhatsApp: tres puertas para la misma cosa (2-sep-2026). Ahora es lo
   que es —un dato— y la única acción del panel es la verde. */
.panel-tel {
  margin: 10px 20px 4px; text-align: center;
  font-size: 13.5px; color: var(--tinta-3);
}
.panel-tel a {
  color: var(--tinta); font-weight: 700; text-decoration: none;
  border-bottom: 1.5px solid var(--rojo, #EC3138); padding-bottom: 1px;
}
.panel-tel a:hover { color: var(--rojo, #EC3138); }
/* El aviso legal va al final y en cuerpo chico: es una aclaración, no parte de la
   oferta. Antes se metía entre el botón y el mapa, partiendo el bloque. */
.panel-contacto .aviso-privacidad {
  margin: 14px 20px 18px; font-size: 11.5px; line-height: 1.5; color: var(--tinta-3);
}


/* ---------- el panel, como lo resuelve el rubro (2-sep-2026) ----------
   Era una tira: repetía los datos que ya están arriba, y abajo metía el mapa de
   la provincia y el aviso legal. En cualquier portal —Zonaprop, Argenprop— el
   panel es la columna de la DECISIÓN: cuánto sale, cómo consulto y quién publica.
   Los datos van en el cuerpo; el mapa, abajo y ancho. */
.panel-contacto .cuerpo { padding: 22px 20px 18px; }
.panel-firma {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--linea);
  font-size: 11.5px; line-height: 1.5; color: var(--tinta-3);
}
.panel-firma img { width: 96px; height: auto; flex: none; }
.panel-firma b { color: var(--tinta); font-weight: 700; }
/* El mapa, ya en el cuerpo: una referencia discreta al final, no un bloque que
   parta la columna del precio. */
.ficha .mapa-zona { margin: 26px 0 0; max-width: 520px; }
.ficha .aviso-privacidad {
  margin: 18px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--tinta-3);
  max-width: 620px;
}