/* LA PALETA SALE DEL LOGO DE VJMAS REALTY, NO DE MI GUSTO.
 *
 * Muestreada del logo: grafito #253640, gris medio #58676E y naranja #FF8245.
 * El verde #1F5F4A que habia antes me lo invente yo sin haber visto el logo.
 *
 * POR QUE EL NARANJA DE LA MARCA NO ES EL COLOR DE LOS ENLACES.
 * #FF8245 sobre el fondo claro da 2,28:1 de contraste. El minimo para texto
 * son 4,5:1. Puesto en botones o enlaces el sitio queda bonito e ilegible, y
 * en una web de bienes raices eso deja gente fuera. Asi que en modo claro los
 * enlaces van con el mismo naranja oscurecido (#B3441A, 5,17:1) y el naranja
 * de verdad queda para lo decorativo, que no lleva texto.
 * En modo OSCURO pasa lo contrario: sobre fondo grafito el naranja de la marca
 * da 7,27:1, asi que ahi si se usa tal cual.
 *
 * Medido, no estimado. Cada par comprobado:
 *   claro   texto 11,56  ·  texto2 5,42  ·  acento 5,17  ·  boton 5,59
 *   oscuro  texto 15,56  ·  texto2 7,99  ·  acento 7,27  ·  boton 7,27
 */
:root{--bg:#f7f6f2;--card:#fff;--tx:#253640;--tx2:#58676e;--line:#e3e0d8;
      --acc:#b3441a;--acc2:#fbede4;--marca:#ff8245;--btntx:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#12181c;--card:#1a2227;--tx:#eaf0f3;--tx2:#9fb0b8;
      --line:#2a363c;--acc:#ff8245;--acc2:#2a1b12;--marca:#ff8245;--btntx:#12181c}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--acc)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);background:var(--card)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.marca{font-weight:700;letter-spacing:.5px;text-decoration:none;color:var(--tx);font-size:18px}
.marca small{display:block;font-weight:400;font-size:12px;color:var(--tx2);letter-spacing:0}
.idioma{display:flex;gap:4px}
.idioma button{font:inherit;font-size:14px;border:1px solid var(--line);background:none;color:var(--tx2);padding:5px 10px;border-radius:7px;cursor:pointer}
/* OJO CON EL TEXTO DE LOS BOTONES RELLENOS.
   En modo claro el acento es el naranja oscurecido y el blanco encima da
   5,59:1. En modo OSCURO el acento es el naranja de la marca, y blanco sobre
   naranja da 2,46:1: ilegible. Por eso el color del texto es su propia
   variable, no un #fff a pelo. */
.idioma button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--btntx)}
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(30px,5vw,44px);line-height:1.15;margin:0 0 16px;max-width:760px}
.hero p{font-size:19px;color:var(--tx2);max-width:680px;margin:0 0 26px}
.btn{display:inline-block;background:var(--acc);color:var(--btntx);text-decoration:none;padding:12px 20px;border-radius:9px;font-weight:600}
.btn.sec{background:none;color:var(--acc);border:1px solid var(--acc);margin-left:8px}
section{padding:36px 0}
h2{font-size:26px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--tx2);font-size:16px}
ol.pasos{padding-left:22px;margin:0}
ol.pasos li{margin:0 0 10px}
.contacto{background:var(--acc2);border-radius:14px;padding:26px}
.contacto p{margin:4px 0}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--tx2);font-size:14px}
footer a{color:var(--tx2)}
.legal h1{font-size:32px;margin:40px 0 6px}
.legal h2{font-size:21px;margin:28px 0 8px}
.legal .fecha{color:var(--tx2);margin:0 0 24px}
.legal li{margin:0 0 6px}
/* Las reglas de idioma se mudaron AL FINAL del archivo. Ver el bloque
   "EL IDIOMA SE ESCONDE AL REVES". */
@media (max-width:520px){.btn.sec{margin:10px 0 0}.hero{padding:40px 0 24px}}

/* ---------- v2: sitio con listados ---------- */
.wrap{max-width:1140px}
.nav{border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:10}
.navin{display:flex;align-items:center;gap:18px;min-height:64px}
.menu{display:flex;gap:6px;margin-left:auto}
.menu a{color:var(--tx2);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px}
.menu a:hover{background:var(--acc2);color:var(--acc)}
.hero{padding:70px 0 44px}
.hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;margin:0 0 16px;max-width:19ch}
.hero p{font-size:18px;color:var(--tx2);max-width:64ch;margin:0 0 24px}
.heroacc{display:flex;gap:10px;flex-wrap:wrap}
.rev{padding:34px 0 10px;border-top:1px solid var(--line)}
.rev h2,.dos h2,.contacto h2{font-size:24px;margin:0 0 6px}
.sub{color:var(--tx2);font-size:15px;margin:0 0 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}
.bloque{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px;text-decoration:none;color:inherit}
.bloque:hover{border-color:var(--acc)}
.bloque .mas{color:var(--acc);font-weight:600;font-size:14px}
.dos{padding:30px 0}
.contacto{padding:34px 0 56px;border-top:1px solid var(--line)}
.pie{border-top:1px solid var(--line);background:var(--card);padding:26px 0 40px;color:var(--tx2);font-size:13px}
.pie p{margin:5px 0}
.pie a{color:var(--tx2)}
.pie .idx{color:var(--tx2);font-size:12px;max-width:80ch;margin-top:12px}

/* listados */
.lsttop{padding:30px 0 6px}
.lsttop h1{font-size:clamp(24px,3.6vw,34px);margin:0 0 6px}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.filtros select,.filtros input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--tx);min-width:160px}
.lstwrap{padding:18px 0 50px}
.lstgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.lst{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.lstfoto{aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center}
.lstfoto img{width:100%;height:100%;object-fit:cover;display:block}
/* `.lstfoto.vacia` colapsaba aqui a una tira de 8px y desalineaba la fila
   entera. La regla buena esta abajo, en el bloque v2.6: 4:3 siempre. */
.lstcuerpo{padding:14px 15px 15px}
.lstprecio{font-size:19px;font-weight:700;color:var(--tx)}
.lstdir{font-size:14px;margin-top:3px}
.lstciu{color:var(--tx2);font-size:12.5px;margin-top:2px}
.lstdatos{color:var(--tx2);font-size:12.5px;margin-top:8px}
.lstml{color:var(--tx2);font-size:12px;margin-top:6px}
/* La atribucion NO se encoge: politica IDX 7.58, letra no menor que la
   mediana del resto de la ficha. */
/* ATRIBUCION DE LA FIRMA QUE LISTA — NO BAJAR DE AQUI.
   NAR 7.58(12) exige tipografia "not smaller than the median used in the
   display of listing data". En esta tarjeta los datos del listado son
   19 / 14 / 12.5 / 12.5 / 11.5 px, o sea mediana 12,5. Se pone 14 para tener
   margen; a 12,5 estabamos justo en el limite y cualquier retoque lo rompia.
   Hay una prueba que lo vigila: pruebas/publico-idx.js. */
.lstfirma{font-size:14px;color:var(--tx);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.lstvacio{color:var(--tx2);font-size:14px;padding:20px 0}
.lstpie{color:var(--tx2);font-size:12px;margin-top:18px;max-width:80ch;line-height:1.6}
.lstpie p{margin:0 0 8px}
#lstmas{margin:18px auto 0;display:block}
.legalwrap{padding-top:10px}
/* En telefono la barra se envuelve: marca arriba, menu e idioma abajo. Antes
   el bloque de idioma se salia de la pantalla y arrastraba un scroll
   horizontal en todas las paginas. */
@media (max-width:640px){
  .navin{flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
  .marca{flex:1 1 100%}
  .marca small{display:none}
  .menu{margin-left:0;flex:1 1 auto;flex-wrap:wrap}
  .menu a{padding:7px 9px;font-size:13px}
  .idioma{margin-left:auto;flex:0 0 auto}
  .hero{padding:44px 0 30px}
  .filtros select,.filtros input{min-width:0;flex:1 1 45%}
}

/* Sello de version en el pie. Discreto, pero visible en todas las paginas:
   asi, si algo no cuadra, se sabe de una que version esta desplegada. */
.pie .ver{opacity:.55;font-variant-numeric:tabular-nums}

/* ============================================================================
   v2.6 · PRESENCIA DE CORREDORA DE ALTO NIVEL
   ============================================================================
   Lo que cambia y por que. No es maquillaje suelto: son cuatro decisiones.

   1. MENOS COLOR, MAS AIRE. Lo que lee como caro no es un color mas fuerte:
      es espacio en blanco, una retícula tranquila y filetes finos. El naranja
      de la marca baja de "color de todo" a acento: filetes, subrayados y un
      solo boton por pantalla. Se usa menos y por eso se nota mas.

   2. UNA SERIF PARA LOS TITULARES. La diferencia entre "web de anuncios" y
      "corredora" esta casi toda ahi. Se usa la serif del sistema, NO Google
      Fonts: una fuente externa añade una peticion a un tercero que bloquea el
      pintado y obligaria a declararlo en la pagina de privacidad. En Mac y
      iPhone `ui-serif` da New York; en Windows, Palatino Linotype; y Georgia
      cubre el resto. Las tres aguantan bien a tamaño grande.

   3. BANDA GRAFITO. El fondo oscuro #1b262c da profundidad sin recurrir a una
      foto de archivo. Contraste MEDIDO sobre ese fondo, no estimado:
        blanco            15,43:1
        gris claro #b8c4ca 8,66:1
        naranja  #ff8245   6,27:1
      Los tres pasan de sobra el minimo de 4,5:1 para texto.

   4. LAS FOTOS, TODAS DEL MISMO TAMAÑO. Antes una tarjeta sin foto colapsaba
      el hueco a 8px y la fila quedaba desalineada; y mientras la foto estaba
      en la cola se veia el texto alternativo en gris, que parece roto. Ahora
      el recuadro es 4:3 SIEMPRE, con o sin foto, y la <img> nace con un pixel
      transparente para que nunca se pinte el texto alternativo.
============================================================================ */

:root{
  --grafito:#1b262c;      /* banda oscura */
  --sobre:#eef1f2;        /* texto sobre grafito */
  --sobre2:#b8c4ca;       /* secundario sobre grafito */
  --marfil:#faf9f6;       /* fondo calido de seccion */
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root{--marfil:#161d21}}

body{font-size:17px;letter-spacing:.005em}
.wrap{max-width:1200px;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* --- etiqueta de seccion: versalita ancha, el recurso mas barato que hay
       para que algo lea como caro --- */
.ojo{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2);
  font-weight:600;margin:0 0 14px;display:block}
.ojo.sobre{color:var(--sobre2)}
.regla{height:1px;background:var(--line);border:0;margin:0}

/* --- cabecera --- */
.nav{background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px)}
@media (prefers-color-scheme:dark){.nav{background:rgba(26,34,39,.88)}}
.navin{min-height:76px}
.marca{font-family:var(--serif);font-size:21px;letter-spacing:.14em;font-weight:600}
.marca small{letter-spacing:.16em;text-transform:uppercase;font-size:10px;margin-top:3px}
.menu a{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}

/* --- portada --- */
.hero{background:var(--grafito);color:var(--sobre);padding:104px 0 96px;
  border-bottom:3px solid var(--marca)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,62px);
  line-height:1.08;letter-spacing:-.015em;max-width:17ch;margin:0 0 22px;color:var(--sobre)}
.hero p{color:var(--sobre2);font-size:18px;max-width:58ch;margin:0 0 34px}
.hero .btn{background:var(--marca);color:var(--grafito);padding:15px 30px;border-radius:2px;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.hero .btn.sec{background:none;color:var(--sobre);border:1px solid rgba(238,241,242,.45)}
.hero .btn.sec:hover{border-color:var(--marca);color:var(--marca)}
/* A 1100px la portada se abre en dos columnas. A pantalla completa el titular
   solo ocupaba el tercio izquierdo y el resto quedaba vacio, que no lee como
   sobrio sino como a medio hacer. La columna de la derecha lleva contenido
   real —lo que entregamos— no un adorno. */
.heroin{display:grid;grid-template-columns:1.25fr .85fr;gap:70px;align-items:end}
.herolista{margin:0;padding:0;list-style:none;border-top:1px solid rgba(238,241,242,.22)}
.herolista li{border-bottom:1px solid rgba(238,241,242,.22);padding:15px 0;color:var(--sobre);
  font-size:15px;display:flex;gap:14px;align-items:baseline}
.herolista li i{font-style:normal;color:var(--marca);font-size:12px;letter-spacing:.14em;
  font-weight:700;min-width:26px}
@media (max-width:1000px){.heroin{grid-template-columns:1fr;gap:44px;align-items:start}}
@media (max-width:640px){.hero{padding:64px 0 60px}}

/* --- banda de credenciales, justo bajo la portada --- */
.cred{background:var(--card);border-bottom:1px solid var(--line);padding:0}
.credin{display:flex;flex-wrap:wrap;gap:0}
.credin div{flex:1 1 200px;padding:24px 26px;border-right:1px solid var(--line)}
.credin div:last-child{border-right:0}
.credin b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.01em}
.credin span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx2);margin-top:5px}
@media (max-width:640px){.credin div{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--line);padding:18px}}

/* --- secciones --- */
section{padding:84px 0}
.marfil{background:var(--marfil)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,40px);
  letter-spacing:-.01em;line-height:1.15;margin:0 0 12px}
.rev,.dos,.contacto{border-top:0}
.rev h2,.dos h2,.contacto h2,.nues h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 12px}
.sub{font-size:16px;max-width:62ch;margin:0 0 42px}

/* --- "lo que revisamos": lista editorial con filete, no cajas --- */
.rev .grid{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:0 42px}
.rev .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:26px 26px 30px 0;position:relative}
.rev .card::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--marca)}
.rev .card h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 8px}
.rev .card p{font-size:15.5px;line-height:1.65}

/* --- los dos bloques grandes --- */
.grid2{gap:0}
.bloque{border:0;border-top:1px solid var(--line);border-radius:0;padding:40px 40px 44px 0;
  background:none;transition:padding-left .25s ease}
.bloque:hover{border-color:var(--line);padding-left:14px}
.bloque h2{font-size:30px;margin:0 0 10px}
.bloque p{color:var(--tx2);margin:0 0 18px;max-width:44ch}
.bloque .mas{font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* --- nuestros listados en el home --- */
.nues{background:var(--marfil)}
.nuesgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:26px}
.nues .lst{border:0;background:none;border-radius:0}
.nues .lstfoto{border-radius:3px;overflow:hidden}
.nues .lstcuerpo{padding:16px 0 0}
.nues .lstprecio{font-family:var(--serif);font-size:24px;font-weight:600}
.nues .lstdir{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);margin-top:6px}
.nuespie{margin-top:34px}
.nuesvacio{color:var(--tx2);font-size:15px}

/* --- contacto --- */
.contacto{background:var(--grafito);color:var(--sobre);border-radius:0;padding:84px 0}
.contacto h2{color:var(--sobre)}
.contacto p{color:var(--sobre2);margin:6px 0}
.contacto strong{color:var(--sobre)}
.contacto .btn{background:var(--marca);color:var(--grafito);border-radius:2px;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;padding:15px 28px}
.contacto .btn.sec{background:none;color:var(--sobre);border:1px solid rgba(238,241,242,.45);text-transform:none;letter-spacing:.02em}
.contacto .sub{color:var(--sobre2);margin:22px 0 0}
.contacto a{color:var(--marca)}

/* --- pie --- */
.pie{padding:44px 0 56px}
.pie .marcapie{font-family:var(--serif);font-size:17px;letter-spacing:.14em;color:var(--tx);
  display:block;margin-bottom:14px}

/* --- listados: el recuadro de la foto es SIEMPRE el mismo --- */
/* Sin esto, una tarjeta sin foto colapsaba a 8px y rompia la fila entera. */
.lstfoto{aspect-ratio:4/3;background:var(--line);border-radius:3px;overflow:hidden;position:relative}
.lstfoto.vacia{aspect-ratio:4/3;height:auto;background:var(--line)}
/* Marca de agua discreta para el hueco sin foto: un recuadro liso se lee como
   fallo de carga; una linea que dice que no hay foto, no. */
.lstfoto.vacia::after{content:"Sin foto en el MLS";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx2)}
.lstfoto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.lst:hover .lstfoto img{transform:scale(1.04)}
.lstgrid{gap:22px}
/* LA ATRIBUCION SE ALINEA ABAJO EN TODAS LAS TARJETAS.
   Un terreno trae dos lineas de datos y una casa cuatro; sin esto, la linea
   "Listado por ..." queda a distinta altura en cada tarjeta de la misma fila y
   la reticula se ve descuadrada. La tarjeta ya era flex en columna; solo
   faltaba que el cuerpo creciera y la firma se empujara al fondo. */
.lstcuerpo{display:flex;flex-direction:column;flex:1 1 auto}
.lstfirma{margin-top:auto}
.lst{border-radius:4px}
.lstprecio{font-family:var(--serif);font-size:22px}

@media (max-width:640px){
  section{padding:54px 0}
  .rev .card{padding:22px 0 26px}
  .bloque{padding:30px 0 34px}
  .contacto{padding:56px 0}
}


/* ============================================================================
   EL IDIOMA SE ESCONDE AL REVES. VA AL FINAL A PROPOSITO.
   ============================================================================
   Antes era: esconder TODO lo que lleve [lang-only] y volver a enseñar el
   idioma bueno con `display:revert`. Eso tenia dos fallos, y el 23/09/2026 los
   dos salieron a la vez en la portada nueva: se leian las dos versiones
   pegadas ("CORREDORA DE BIENES RAICES..." y debajo "REAL ESTATE BROKERAGE...").

     1. `[lang-only]{display:none}` pesa lo mismo que una clase. En cuanto una
        clase declarada MAS ABAJO en el archivo decia `display:block` —como
        `.ojo` o `.credin span`— ganaba la clase y se enseñaban los dos idiomas.
     2. Aunque eso se arreglara subiendo la especificidad, `display:revert`
        devuelve el valor del navegador (`inline` en un <span>), o sea que se
        cargaba el `display:block` de la clase.

   Al reves no tiene ninguno de los dos problemas: solo se esconde el idioma
   que NO toca, y el que toca se queda exactamente con el `display` que le dio
   su clase. No hace falta `revert` ni `!important`.

   `idioma.js` siempre pone `es` o `en` en <html lang>, y el HTML ya nace con
   lang="es", asi que no hay un instante en que no aplique ninguna de las dos.
============================================================================ */
html[lang="es"] [lang-only="en"],
html[lang="en"] [lang-only="es"]{display:none}

/* ============================================================================
   v2.7 · UN SOLO LISTADO PROPIO NO PUEDE VERSE COMO UN HUECO
   ============================================================================
   Comprobado en vivo el 24/09/2026: VJMAS REALTY tiene UN listado activo en
   la copia del MLS. En una retícula de tres columnas eso deja una tarjeta
   pequeña arriba a la izquierda y dos huecos, que no se lee como sobrio sino
   como que la página no terminó de cargar.

   Con uno, la ficha se presenta en grande —foto a la izquierda, datos a la
   derecha— que es como enseña una propiedad una corredora, no como rellena un
   hueco. Con dos, la retícula se limita a dos columnas y se centra. De tres en
   adelante manda la retícula de siempre.

   La clase la pone listados.js segun cuantos vengan; el CSS solo reacciona.
============================================================================ */
.nuesgrid.uno{grid-template-columns:1fr}
.nuesgrid.uno .lst{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;
  align-items:center;max-width:940px}
.nuesgrid.uno .lstfoto{border-radius:4px}
.nuesgrid.uno .lstcuerpo{padding:0}
.nuesgrid.uno .lstprecio{font-size:36px;line-height:1.1}
.nuesgrid.uno .lstdir{font-size:14px;margin-top:10px}
.nuesgrid.uno .lstdatos,.nuesgrid.uno .lstml{margin-top:12px}
.nuesgrid.uno .lstfirma{margin-top:20px}
.nuesgrid.dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media (max-width:720px){
  .nuesgrid.uno .lst{grid-template-columns:1fr;gap:18px}
  .nuesgrid.uno .lstprecio{font-size:28px}
}

/* ============================================================================
   v2.8 · QUE FUNCIONE EN CUALQUIER PANTALLA, Y QUE LOS FILTROS NO MIENTAN
   ============================================================================
   Medido el 24/09/2026 con el sitio real a 320, 360, 390, 414, 600, 768,
   1024, 1280 y 1440 px. Lo que salió mal y se arregla aquí:

   1. A 320 px (iPhone SE, Androids chicos) la portada se salía 6 px por el
      lado. La culpa era `minmax(310px, 1fr)`: 310 + 16 de canalón + 32 de
      márgenes no caben en 320, y la retícula NO encoge por debajo del mínimo
      — empuja. Con `min(310px, 100%)` el mínimo cede cuando la pantalla es
      más angosta que la columna. Se aplica a TODAS las retículas, no solo a
      la que falló, porque el fallo es el mismo patrón en las cinco.

   2. Objetivos táctiles. En el móvil los enlaces del menú medían 34 px de
      alto y los del pie 15. Con el dedo eso se falla. Se suben a 44 SOLO
      donde el puntero es grueso (`pointer: coarse`), para no inflar el diseño
      en escritorio, donde 34 px con ratón está perfecto.

   3. Texto por debajo de 12 px. El subtítulo de la marca estaba a 10.
      Cuidado al tocar `.lstml`: entra en la mediana que vigila NAR 7.58(12).
      Con 12 px la mediana de la tarjeta sigue en 12,5 y `.lstfirma` a 14
      sigue por encima. Hay prueba que lo recalcula.
============================================================================ */

/* --- 1. NINGUNA RETICULA EMPUJA LA PANTALLA ---
   Los `minmax(...)` de arriba se corrigieron EN SU SITIO, no aquí: dejar la
   regla vieja viva y taparla con otra más abajo es como vuelven estos fallos.
   Lo único que queda aquí es el banco de credenciales, que es flex. */
.credin div{flex:1 1 min(200px,100%)}
/* Una dirección larga sin espacios no puede estirar la tarjeta. */
.lstdir,.lstciu,.lstdatos,.lstml,.lstfirma{overflow-wrap:anywhere}

/* --- 2. TEXTO MINIMO 12 px ---
   `.ojo` y `.lstml` también se corrigieron en su sitio. Ojo con `.lstml`: entra
   en la mediana que vigila NAR 7.58(12). Con 12 px la mediana de la tarjeta
   sigue en 12,5 y `.lstfirma` a 14 sigue por encima; hay prueba que lo
   recalcula en vez de confiar en que sigue valiendo. */
.marca small{font-size:11px}
.pie .idx{font-size:12px}

/* --- 3. OBJETIVOS TACTILES, SOLO EN PANTALLA TACTIL --- */
@media (pointer:coarse){
  .menu a{padding:12px 12px;min-height:44px;display:flex;align-items:center}
  .idioma button{min-height:44px;min-width:48px}
  .marca{display:inline-block;padding:6px 0}
  /* El pie es una fila de navegación, aunque viva dentro de un <p>: teléfono,
     correo, Privacidad y Términos se tocan, no se leen de corrido. Van a 44. */
  .pie a,.contacto a:not(.btn){display:inline-block;padding:11px 0;min-height:44px}
  .bloque .mas{display:inline-block;padding:8px 0;min-height:32px}
  .filtros select,.filtros input{min-height:46px}
  #lstmas{min-height:48px}
  /* LOS ENLACES DENTRO DE LA PROSA LEGAL SE QUEDAN COMO ESTAN, A PROPOSITO.
     En privacidad.html y terminos.html hay correos y teléfonos incrustados en
     mitad de una frase. WCAG 2.5.8 exceptúa expresamente el enlace en línea
     dentro de un bloque de texto: agrandarlo rompería el renglón y haría el
     párrafo más difícil de leer, que es lo contrario de lo que se busca.
     Los del pie NO son ese caso —son una fila de navegación— y por eso suben. */
  .legal p a{padding:0;min-height:0;display:inline}
}

/* --- 4. "VER MAS" TIENE QUE OBEDECER A `hidden` ---
   `#lstmas{display:block}` le ganaba al atributo `hidden`, que el navegador
   aplica con `display:none` desde su hoja de estilo: la de autor pesa más.
   Resultado: en ubicatucasa.com, con el feed IDX apagado y CERO listados, el
   botón "Ver más" salía igual. Verificado en vivo el 24/09/2026:
   `hidden = true` y `display = block` a la vez. */
#lstmas[hidden]{display:none}

/* --- 5. SI NO HAY NADA QUE FILTRAR, LOS FILTROS NO SE ENSEÑAN ---
   Primero los dejé deshabilitados con medio punto de opacidad. Mal: un
   <select disabled> con opacidad encima queda lavado, y en Safari se lee
   peor que en Chrome — Victor reportó el 24/09/2026 que "no muestra la lista
   de ciudades" en Safari y sí en Chrome. Los dos estaban igual de muertos;
   solo se veía distinto.
   Un control que NUNCA va a funcionar mientras el feed esté apagado no
   aporta nada: se esconde entero y se deja el aviso, que es lo único que
   informa. Cuando el feed se encienda vuelven solos. */
.filtros[data-apagado]{display:none}
.filtrosnota{color:var(--tx2);font-size:15px;margin:6px 0 0;max-width:62ch}

/* --- 6. RESPIRO EN PANTALLA ANGOSTA --- */
@media (max-width:420px){
  .wrap{padding:0 14px}
  .hero{padding:52px 0 48px}
  .hero .btn,.contacto .btn{display:block;text-align:center}
  .hero .btn.sec,.contacto .btn.sec{margin-left:0}
  .heroacc{display:grid;gap:10px}
  .credin div{padding:16px 14px}
  .filtros select,.filtros input{flex:1 1 100%}
}

/* ============================================================================
   v3.0 · EL LOGO DE VJMAS REALTY
   ============================================================================
   Vectorizado del .ai original. Es un SVG de 18 KB con 17 trazos y dos
   colores; los relieves 3D de los mockups eran un efecto de Photoshop y no
   estaban en el vector — mejor así, un logo plano aguanta 28 px de alto y uno
   biselado se convierte en barro.

   EL COLOR LO RESUELVE EL PROPIO ARCHIVO, NO ESTA HOJA.
   El logo entra con <img>, así que el CSS de la página no puede recolorearlo.
   La consulta `prefers-color-scheme` vive DENTRO del SVG. Consecuencia que hay
   que tener presente: el logo se pinta navy cuando el SISTEMA está en claro,
   así que NO puede ir sobre las bandas grafito (.hero, .contacto), que son
   oscuras incluso en modo claro. Por eso está en la cabecera y en el pie, que
   siguen el fondo del tema, y en ningún otro sitio.

   Se declara width/height en el HTML para que el navegador reserve el hueco
   antes de descargar el archivo y la cabecera no dé un salto al cargar.
============================================================================ */
.marca{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
/* 30 px dejaba el logo (131 px de ancho) más angosto que el lema de debajo
   (330 px con el interletrado que tenía). El logo tiene que MANDAR, no
   competir: sube a 36 y el lema baja de tamaño y de interletrado hasta caber
   por debajo. Medido a 1440, 768 y 390 px. */
.marca img{height:36px;width:auto;display:block}
.marca small{margin-top:0;font-size:10.5px;letter-spacing:.07em}
.pie .marcapie{display:block;height:34px;width:auto;margin-bottom:18px;opacity:.9}

@media (max-width:640px){
  .marca img{height:30px}
  .pie .marcapie{height:30px}
}
@media (max-width:360px){
  .marca img{height:26px}
}
/* Con puntero grueso la marca ya tenía relleno para llegar a 44 px de alto;
   con el logo dentro hay que mantener la caja, no el texto. */
@media (pointer:coarse){
  /* Con el logo dentro, el alto lo manda la imagen (23-30 px según pantalla) y
     el relleno no llegaba a 44. Se fija la caja, no el relleno. */
  .marca{min-height:44px;justify-content:center;padding:4px 0}
}

/* ============================================================================
   v3.2 · LA RETICULA DE LISTADOS USA LA PANTALLA ANCHA
   ============================================================================
   `.wrap` esta topado a 1200 px, que es lo correcto para TEXTO: una linea mas
   larga que eso se lee peor, hay que mover la cabeza. Pero una reticula de
   fichas no es texto. En un monitor de 1920 px, 1200 de contenido dejaban
   360 px muertos a cada lado y solo tres columnas.

   Asi que se separan las dos cosas: la prosa sigue topada, y las paginas de
   listados suben a 1680 px, que en 1920 da CUATRO columnas y en 2560 da CINCO
   sin que la ficha crezca tanto que la foto se vea estirada.

   La cabecera y el pie suben con ellas: si el contenido llega a 1680 y el
   menu se queda en 1200, la pagina se ve descuadrada.
============================================================================ */
/* El corte va en 1600, no en 1360: a 1440 —un MacBook— el ancho de 1200 con
   sus margenes se ve bien y tres columnas respiran. Subirlo ahi hacia que el
   contenido tocara los bordes de la pantalla, que es el problema contrario. */
@media (min-width:1600px){
  .lsttop .wrap,.lstwrap .wrap,.nues .wrap,.nav .wrap,.pie .wrap{max-width:1680px}
  /* El texto de dentro NO se estira con ella: la descripcion de la seccion y
     los avisos legales siguen en columna de lectura. */
  .lsttop .sub,.lsttop p{max-width:70ch}
}

/* ============================================================================
   v3.3 · FICHA INDIVIDUAL, FORMULARIO DE CONTACTO Y EL ESPACIO PERDIDO
   ============================================================================ */

/* ---- 1. EL BOTON DE LA TARJETA -------------------------------------------
   Va DESPUES de la atribucion a proposito: lo ultimo que se lee antes de
   decidir tiene que ser de quien es el listado, no la llamada a la accion.
   Es secundario (contorno, no relleno): el protagonista de la tarjeta es la
   propiedad. El boton grande y solido esta dentro de la ficha, que es donde
   la persona ya decidio que le interesa. */
.lstmas{margin-top:10px;width:100%;font:inherit;font-size:14px;font-weight:600;
  padding:9px 12px;border:1px solid var(--acc);border-radius:9px;
  background:transparent;color:var(--acc);cursor:pointer}
.lstmas:hover{background:var(--acc2)}
.lstmas:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---- 2. LA VENTANA ------------------------------------------------------- */
body.sinscroll{overflow:hidden}
.fichafondo{position:fixed;inset:0;z-index:90;background:rgba(15,22,26,.62);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow:auto;-webkit-overflow-scrolling:touch}
.fichacaja{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:16px;width:100%;max-width:1060px;margin:auto}
/* LA × VA FIJA A LA PANTALLA, NO A LA TARJETA.
   Con `position:absolute` se quedaba pegada arriba de la ficha: en una casa
   con muchos datos, bastaba bajar 150 px para perderla de vista. En ordenador
   quedaba Escape y el clic en el fondo; en telefono no hay Escape y el fondo
   no se ve. Se queda sin salida visible, que es de los peores fallos que
   puede tener una ventana modal.

   El `right` calculado la mantiene pegada al borde derecho de la TARJETA en
   vez de irse al borde de la pantalla: la tarjeta mide como mucho 1060 y va
   centrada, asi que su borde esta a `50vw - 530`. En pantalla estrecha ese
   numero se vuelve negativo y `max()` cae a los 16 px del margen, que es
   justo el borde de la tarjeta tambien. Una sola linea sirve para las dos. */
.fcerrar{position:fixed;top:18px;right:max(16px, calc(50vw - 520px));z-index:2;width:40px;height:40px;
  border:0;border-radius:50%;background:var(--card);color:var(--tx);
  font-size:26px;line-height:1;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.22)}
.fcerrar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* DOS COLUMNAS EN PANTALLA GRANDE: la propiedad a la izquierda, el formulario
   a la derecha y pegado al hacer scroll, que es como lo resuelve Zillow. En
   telefono se apilan y el formulario queda debajo de la atribucion, no encima:
   primero se mira la casa, despues se pregunta. */
.fichain{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0}
.fizq{padding:22px 24px 26px;min-width:0}
.fder{padding:22px 24px 26px;border-left:1px solid var(--line);min-width:0;
  background:var(--bg);border-radius:0 16px 16px 0}
@media (max-width:820px){
  .fichain{grid-template-columns:1fr}
  .fder{border-left:0;border-top:1px solid var(--line);border-radius:0 0 16px 16px}
  .fizq{padding:18px 18px 20px}
  .fder{padding:18px}
}

.ffoto{aspect-ratio:4/3;background:var(--bg);border-radius:12px;overflow:hidden;margin-bottom:16px}
.ffoto img{width:100%;height:100%;object-fit:cover;display:block}
.ffoto.vacia{display:none}
.fprecio{font-size:30px;font-weight:700;line-height:1.1}
.ftit{font-size:17px;font-weight:500;color:var(--tx2);margin:6px 0 18px}

/* Los datos en dos columnas de etiqueta/valor. En una lista de once renglones
   a una columna hay que recorrer toda la ventana para encontrar los baños. */
.fdatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:0 24px;margin:0 0 18px;border-top:1px solid var(--line)}
.fdato{display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.fdato dt{color:var(--tx2)}
.fdato dd{margin:0;font-weight:600;text-align:right}

.factual{font-size:14px;color:var(--tx2);margin:0 0 14px}
/* LA ATRIBUCION DE LA FICHA — NO BAJAR DE 16 px NI QUITARLE EL TELEFONO.
   Es la contrapartida de haberlo quitado de la tarjeta. La mediana de los
   datos de esta ficha es 15 px (.fdato); 16 queda por encima, que es lo que
   pide NAR 7.58. Vigilado por pruebas/publico-idx.js. */
.ffirma{font-size:16px;color:var(--tx);font-weight:600;margin:0 0 12px;
  padding:12px 0 0;border-top:1px solid var(--line)}
.fidx{font-size:12.5px;color:var(--tx2);line-height:1.6;margin:0}

/* ---- 3. EL FORMULARIO ---------------------------------------------------- */
.flead h3{font-size:20px;margin:0 0 6px}
.flead .fsub{font-size:14.5px;color:var(--tx2);margin:0 0 16px}
.flead label{display:block;font-size:13.5px;font-weight:600;margin:12px 0 5px}
.flead input,.flead textarea{width:100%;font:inherit;font-size:16px;
  padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--tx)}
/* 16 px en los campos NO es un capricho de diseño: por debajo de eso Safari en
   iPhone hace zoom al enfocar el campo y deja la ventana descuadrada. */
.flead textarea{resize:vertical;line-height:1.5}
.flead input:focus-visible,.flead textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.flead .btn{width:100%;margin-top:16px;font-size:16px}
/* LA TRAMPA PARA ROBOTS. Fuera de pantalla, no `display:none`: hay robots que
   ya descartan lo que esta oculto con display. Asi lo llenan igual. */
.ftrampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{font-size:14px;margin:10px 0 0;min-height:1px}
.fmsg.mal{color:var(--acc);font-weight:600}
.flegal{font-size:12px;color:var(--tx2);line-height:1.55;margin:14px 0 0}
.flegal a{color:var(--tx2)}

/* ---- 4. EL ESPACIO PERDIDO EN LOS AVISOS LEGALES Y EL PIE -----------------
   El problema que Victor señaló con capturas el 24/09/2026: en pantalla ancha
   el descargo del MLS y el pie se quedaban en una columna de 80ch a la
   izquierda y la mitad derecha de la pantalla quedaba en blanco.

   La tentacion es quitar el tope y dejar que el parrafo cruce los 1680 px.
   Eso arregla el hueco y estropea la lectura: una linea de 200 caracteres
   obliga a mover la cabeza y se pierde el renglon al volver.

   La salida es `columns`: el bloque ocupa TODO el ancho y el texto se reparte
   en columnas de ancho de lectura. El navegador decide cuantas caben. Se pide
   `columns:34em` (no un numero fijo) para que a 1200 salgan 2, a 1680 salgan 3
   y en telefono siga siendo 1 sin ninguna regla extra.

   `break-inside:avoid` en los parrafos evita que un aviso legal se parta a la
   mitad entre dos columnas, que es como se pierde la frase de §26. */
@media (min-width:1000px){
  .lstpie,.nuespie{max-width:none;columns:34em;column-gap:44px}
  .lstpie p,.nuespie p{break-inside:avoid}
  /* EL CONTEO CRUZA LAS COLUMNAS. Sin esto, "226 activos." se quedaba solo en
     la primera columna —es corto y `break-inside:avoid` empuja el descargo
     entero a la siguiente— y dejaba un hueco del ancho de una columna justo
     en la esquina que Victor señaló. `column-span:all` lo saca del reparto y
     lo pone de titulo a las tres. */
  .lstcuenta{column-span:all;margin:0 0 12px}
  /* EL PARRAFO DEL PIE NO VA EN COLUMNAS, y es a proposito: es UNO solo. Un
     parrafo unico partido en dos columnas obliga a leer media frase, bajar la
     vista y volver a subir. Columnas solo sirven cuando hay varios parrafos
     que se puedan repartir enteros, como en .lstpie. Aqui el hueco ya lo
     resuelve la retícula del pie: el texto ocupa la columna izquierda y los
     enlaces la derecha. */
  .pie .idx{max-width:78ch}
}

/* El pie: la identificacion de la corredora a la izquierda y los enlaces a la
   derecha, en vez de todo apilado contra el borde izquierdo. */
@media (min-width:800px){
  .piein{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:20px 48px;align-items:start}
  .piemarca{min-width:0}
  /* Los enlaces legales y el sello de version se van al lado derecho, donde
     antes no habia nada. */
  .pielinks{text-align:right;white-space:nowrap}
  .pielinks p{margin:0 0 6px}
}

/* Retoques medidos sobre la ventana ya montada (24/09/2026):
   · la × se posa sobre la columna del formulario y pisaba el titulo; se le
     deja sitio en vez de mover el boton, que en la esquina es donde la gente
     lo busca;
   · el formulario acompaña al hacer scroll — la ficha de una casa con muchos
     datos es larga y obligaba a subir otra vez para escribir. Es lo que hace
     Zillow con su bloque de contacto. `align-self:start` es imprescindible:
     sin el, la celda de la retícula se estira a la altura de la fila y
     `sticky` no tiene contra que pegarse. */
@media (min-width:821px){
  .flead h3{padding-right:46px}
  .fder{align-self:start;position:sticky;top:24px}
}

/* Los controles nuevos entran en la misma regla de 44 px que el resto del
   sitio. Medidos en el navegador antes de esto: "Más información" 42,4 y la ×
   40 — por debajo del mínimo, y los dos son de los que más se tocan.
   El enlace a la política dentro del consentimiento NO sube: es un enlace en
   mitad de una frase, que es la excepción que WCAG 2.5.8 hace expresamente y
   la misma que ya se aplica en las páginas legales. */
@media (pointer:coarse){
  .lstmas{min-height:46px}
  .fcerrar{width:46px;height:46px}
  .flead input{min-height:48px}
  .flead .btn{min-height:48px}
  .flegal a{padding:0;min-height:0;display:inline}
}