/* apartamentosenrd.com. Linea de la casa (linen-style): sin radio, sin sombra de libreria,
   sin gradiente, sin cursiva de adorno, sin barra de color a la izquierda. Filete de 1px para
   separar. Serif de sistema para titulares y cifras, sans de sistema para UI y cuerpo. */
:root{
  --papel:#F6F2EA;
  --papel-2:#EFE9DE;
  --tinta:#1B1A17;
  --gris:#6B665E;
  --linea:#D9D2C5;
  --marca:#12463A;
  --marca-h:#1B5C4C;
  --sobre-marca:#F3EEE4;
  --cta:#12463A;
  --cta-h:#1B5C4C;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --medida:72ch;
  --ancho:960px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#171613;
    --papel-2:#1F1E1A;
    --tinta:#EDE8DF;
    --gris:#A39C90;
    --linea:#3A3730;
    --marca:#0F3A30;
    --marca-h:#164D40;
    --sobre-marca:#EDE8DF;
    --cta:#7FBFA5;
    --cta-h:#9AD0BA;
  }
  .btn{color:#0F1F1A}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:var(--marca);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--marca-h)}
@media (prefers-color-scheme:dark){a{color:var(--cta)}a:hover{color:var(--cta-h)}}
.env{max-width:var(--ancho);margin:0 auto;padding:0 20px}
main.env{padding-bottom:64px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.2;margin:0}
h1{font-size:clamp(28px,4.5vw,40px);margin:24px 0 12px;max-width:var(--medida)}
h2{font-size:clamp(22px,3vw,28px);margin:40px 0 12px;padding-top:16px;border-top:1px solid var(--linea)}
h3{font-size:19px;margin:22px 0 6px}
p,ul,ol{max-width:var(--medida);margin:0 0 14px}
ul,ol{padding-left:22px}
li{margin:0 0 6px}
small{font-size:13px;color:var(--gris)}
.lead{font-size:18px;color:var(--gris)}
.mudo{color:var(--gris)}
.nota{font-size:13px;color:var(--gris)}

/* Etiqueta en versalitas: la pieza del sistema. Mayuscula siempre con tracking. */
.rot{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 6px}

/* Cabecera y pie */
.cab{border-bottom:1px solid var(--linea);background:var(--papel)}
.cab .env{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding-top:14px;padding-bottom:14px}
.logo{font-family:var(--display);font-size:20px;color:var(--tinta);text-decoration:none}
.cab nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.cab nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--tinta)}
.cab nav a:hover{color:var(--marca)}
.miga{font-size:13px;color:var(--gris);padding-top:12px;padding-bottom:4px}
.miga a{color:var(--gris)}
.miga .sep{margin:0 8px}
.pie{border-top:1px solid var(--linea);margin-top:24px;padding:28px 0 40px;font-size:13px;color:var(--gris)}
.pie p{margin-bottom:8px}
.pie a{color:var(--gris);margin-right:16px}

/* Respuesta rapida y resumen: separados con filetes arriba y abajo, nunca con barra lateral. */
.qa{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:16px 0;margin:20px 0}
.qa p{margin:0;max-width:var(--medida)}
.qa p:last-child{font-family:var(--display);font-size:19px;line-height:1.4}
.tldr ul{margin-bottom:0}
.meto p{font-size:15px;color:var(--gris)}

/* Directorio: una fila por sector, nombre a la izquierda y dato a la derecha. */
.dir{list-style:none;padding:0;margin:0 0 16px;max-width:var(--ancho)}
.dir li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--linea);margin:0}
.dir li a{flex:1 1 200px;text-decoration:none;font-weight:600}
.dir li a:hover{text-decoration:underline}
.dir .dato{font-family:var(--display);font-size:18px;white-space:nowrap}
.dir .dato small{font-family:var(--sans);margin-left:6px}
.dir .n{font-size:12px;color:var(--gris);letter-spacing:.06em;min-width:3.5em}
.ficha{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;font-size:14px;color:var(--gris);padding-bottom:12px;border-bottom:1px solid var(--linea);max-width:var(--ancho)}
.ficha .dato{font-family:var(--display);font-size:20px;color:var(--tinta)}
.ficha .dato small{font-family:var(--sans);margin-left:6px}

/* Tablas: scroll horizontal en movil dentro de su contenedor. */
.tabla-wrap{overflow-x:auto;max-width:var(--ancho);margin:0 0 20px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
th,td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:400}
tbody th{font-weight:600}
td{font-variant-numeric:tabular-nums}
tr.actual th,tr.actual td{background:var(--papel-2)}

/* Prosa */
.prosa p{max-width:var(--medida)}
.firma{font-size:13px;color:var(--gris);border-top:1px solid var(--linea);padding-top:14px;margin-top:40px}

/* FAQ: acordeon nativo, el texto vive en el DOM. */
.faq details{border-bottom:1px solid var(--linea);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:8px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--display);font-size:20px;color:var(--gris);flex:0 0 1em}
.faq details[open] summary::before{content:"\2013"}
.faq summary h3{margin:0;font-size:18px}
.faq details p{margin:0 0 12px 1.75em}

/* Agentes */
.lista-agentes{list-style:none;padding:0;margin:0 0 16px;max-width:var(--ancho)}
.agente{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea);margin:0}
.agente.destacado{border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta)}
.agente .rot{margin:0}
.agente .acciones{margin-left:auto;display:flex;gap:14px}
.cta p{font-size:17px}

/* Botones: sin radio, sin sombra, sin degradado. */
.btn,.btn-l{display:inline-block;padding:13px 26px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s ease;line-height:1.2}
.btn{background:var(--cta);color:var(--sobre-marca);border:1px solid var(--cta)}
.btn:hover,.btn:focus-visible{background:var(--cta-h);border-color:var(--cta-h)}
.btn-l{background:transparent;color:var(--cta);border:1px solid var(--cta)}
.btn-l:hover,.btn-l:focus-visible{background:var(--papel-2)}
:focus-visible{outline:2px solid var(--cta);outline-offset:2px}

/* Modal de lead: overlay + tarjeta con filete. La unica sombra del sitio es funcional. */
.modal{position:fixed;inset:0;z-index:50}
.modal[hidden]{display:none}
.modal-fondo{position:absolute;inset:0;background:rgba(20,18,14,.55)}
.modal-caja{position:relative;margin:6vh auto 0;max-width:480px;width:calc(100% - 32px);max-height:88vh;overflow:auto;background:var(--papel);border:1px solid var(--linea);padding:24px 24px 16px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.modal-caja h2{margin:0 0 16px;padding:0;border:0;font-size:24px}
.modal label{display:block;font-size:13px;color:var(--gris);margin:0 0 12px}
.modal input,.modal select,.modal textarea{display:block;width:100%;margin-top:4px;padding:9px 10px;font:inherit;font-size:16px;color:var(--tinta);background:var(--papel);border:1px solid var(--linea);border-radius:0}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--cta);outline:none}
.modal-acciones{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
.modal .nota{margin:0}

/* Toast */
.toast{position:fixed;left:16px;right:16px;bottom:16px;max-width:420px;margin:0 auto;padding:14px 18px;background:var(--tinta);color:var(--papel);font-size:14px;z-index:60;border:1px solid var(--linea)}
.toast[hidden]{display:none}

@media (min-width:720px){
  .env{padding:0 32px}
  .cab .env{padding-top:18px;padding-bottom:18px}
  .cab nav{margin-left:auto}
  table{font-size:16px}
}

/* Autora, byline y fuentes del pie */
.byline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.byline img{border-radius:50%;flex:none}
.byline .btn{margin-left:auto}
.autora-cab{display:flex;gap:1.25rem;align-items:flex-start;margin:0 0 1.5rem}
.autora-cab img{flex:none;border-radius:50%;width:120px;height:120px}
.autora-cab h1{margin:0 0 .4rem}
@media (max-width:600px){.autora-cab{flex-direction:column}}
.pie .fuentes{font-size:.85rem}
.pie .fuentes .eti{font-variant:all-small-caps;letter-spacing:.12em;margin-right:.5rem}
.pie .fuentes a{margin-right:.6rem}
.pie .fx{font-size:.85rem}

/* ---------- Patrones Zillow sobre datos (UX_ZILLOW.md). Misma linea: filete, sin radio, sin sombra. ---------- */
.vis-oculta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buscador: en la cabecera compacto, en el hero grande. La lista cuelga del input, sin scroll interno. */
.busca{position:relative;margin:0}
.busca-campo{display:flex;border:1px solid var(--linea);background:var(--papel)}
.busca-campo:focus-within{border-color:var(--tinta)}
.busca input{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:transparent;color:var(--tinta);font:inherit;font-size:16px;padding:10px 12px;-webkit-appearance:none;appearance:none}
.busca input::-webkit-search-cancel-button{-webkit-appearance:none}
.busca input:focus{outline:none}
.busca .btn{padding:0 16px;border:0;border-left:1px solid var(--linea)}
.busca-cab{flex:1 1 240px;max-width:360px;order:3}
.busca-cab input{padding:7px 10px;font-size:15px}
.busca-cab .btn{font-size:10px;padding:0 12px}
.busca-lista{position:absolute;left:0;right:0;top:100%;z-index:40;list-style:none;margin:0;padding:0;background:var(--papel);border:1px solid var(--tinta);border-top:0;max-width:none}
.busca-lista[hidden]{display:none}
.busca-lista li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--linea);cursor:pointer;margin:0}
.busca-lista li:last-child{border-bottom:0}
.busca-lista li[aria-selected="true"],.busca-lista li:hover{background:var(--papel-2)}
.busca-lista .nom{font-weight:600;flex:1 1 140px}
.busca-lista .nom b{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.busca-lista .tipo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.busca-lista .dato{font-family:var(--display);font-size:17px;margin-left:auto;white-space:nowrap}
.busca-lista .dato small{font-family:var(--sans);color:var(--gris);margin-left:6px}
.busca-lista .nada{cursor:default;color:var(--gris)}
.busca-tabs{display:flex;gap:0;margin:0 0 -1px}
.busca-tabs button{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:var(--gris);border:1px solid transparent;border-bottom:0;padding:10px 16px;cursor:pointer}
.busca-tabs button[aria-selected="true"]{color:var(--tinta);background:var(--papel);border-color:var(--linea)}

/* Hero: buscador grande, tres cifras en tarjetas y accesos por municipio. Todo en la columna. */
.hero{margin:20px 0 8px}
.busca-hero input{font-size:18px;padding:16px 14px}
.busca-hero .btn{padding:0 22px}
.cifras{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr;gap:12px;max-width:none}
.cifras li{margin:0;border:1px solid var(--linea)}
.cifras a{display:block;padding:16px 18px;text-decoration:none;color:var(--tinta)}
.cifras a:hover{border-color:var(--tinta);background:var(--papel-2)}
.eti{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.cifras .precio{display:block;font-family:var(--display);font-size:clamp(30px,5vw,40px);line-height:1.1;margin:6px 0 4px}
.cifras .meta{display:block;font-size:13px;color:var(--gris)}
.explorar{margin:18px 0 0;max-width:none;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.explorar .eti{display:inline;margin-right:6px}
.explorar a{display:inline-block;padding:5px 10px;border:1px solid var(--linea);text-decoration:none;font-size:14px;color:var(--tinta)}
.explorar a:hover{border-color:var(--tinta)}

/* Toggle Tarjetas / Lista y las dos vistas. */
.vista-toggle{display:inline-flex;border:1px solid var(--linea);margin:0 0 16px}
.vista-toggle button{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:var(--gris);border:0;padding:8px 14px;cursor:pointer}
.vista-toggle button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.vistas[data-vistas="lista"] .tarjetas{display:none}
.vistas[data-vistas="tarjetas"] .dir{display:none}
.h-muni{margin-top:28px}
.h-muni a{text-decoration:none}

/* Tarjetas de precio: rejilla dentro de la columna, 1 columna en movil, 2 o 3 en escritorio. */
.tarjetas{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr;gap:12px;max-width:none}
.tarjeta{margin:0;border:1px solid var(--linea);padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px}
.tarjeta h3{margin:0 0 6px;font-size:19px}
.tarjeta h3 a{text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0}
.tarjeta{position:relative}
.tarjeta:hover{border-color:var(--tinta)}
.tarjeta .precio{font-family:var(--display);font-size:28px;line-height:1.1;margin:0}
.tarjeta .precio small{font-family:var(--sans);font-size:12px;color:var(--gris);margin-left:8px}
.tarjeta .rango{font-size:14px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.tarjeta .rango small{display:block;font-size:12px}
.tarjeta .meta{font-size:12px;color:var(--gris);letter-spacing:.06em;margin:4px 0 0}
.tarjeta .meta .sep{margin:0 6px}
.tarjeta .chips{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--linea);padding:3px 7px;color:var(--gris)}
.tarjeta .hab{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--linea);font-size:13px;color:var(--gris);display:flex;flex-wrap:wrap;gap:4px 14px}
.tarjeta .hab b{font-weight:600;color:var(--tinta)}
.tarjeta .hab span{position:relative;z-index:1}

/* Mapa de precios: bloque de la columna, no media pantalla. Popups sin radio ni sombra de libreria. */
.mapa{height:360px;border:1px solid var(--linea);background:var(--papel-2);margin:0 0 10px}
.mapa>p{padding:16px}
.leyenda{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--gris);max-width:none}
.leyenda li{margin:0;display:flex;align-items:center;gap:6px}
.leyenda i{display:inline-block;width:14px;height:14px;border:1px solid rgba(0,0,0,.2)}
.mapa .leaflet-popup-content-wrapper,.mapa .leaflet-popup-tip{border-radius:0;box-shadow:none;border:1px solid var(--tinta);background:var(--papel);color:var(--tinta)}
.mapa .leaflet-popup-content{margin:12px 14px;font:14px/1.45 var(--sans)}
.mapa .leaflet-popup-content .precio{font-family:var(--display);font-size:20px;display:block}
.mapa .leaflet-popup-content a{color:var(--marca)}
.mapa .leaflet-container a.leaflet-popup-close-button{color:var(--gris)}
.mapa .leaflet-bar,.mapa .leaflet-bar a{border-radius:0}
.mapa .leaflet-control-attribution{font-size:10px}

/* Barra de filtros pegajosa: enlaces a paginas de modificador, activo marcado con filete. */
.filtros{position:sticky;top:0;z-index:30;display:flex;gap:0;overflow-x:auto;background:var(--papel);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:0 -20px 16px;padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros a{flex:none;padding:12px 14px 11px;font-size:13px;text-decoration:none;color:var(--tinta);border-bottom:1px solid transparent;white-space:nowrap}
.filtros a small{color:var(--gris);margin-left:4px;font-size:12px}
.filtros a[aria-current="page"]{font-weight:600;border-bottom-color:var(--tinta)}
.filtros a:hover{background:var(--papel-2)}

@media (min-width:600px){
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .cifras{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:720px){
  .cab .env{align-items:center}
  .busca-cab{order:0;margin-left:auto}
  .cab nav{margin-left:0;flex-basis:100%}
  .filtros{margin-left:-32px;margin-right:-32px;padding:0 32px}
  .mapa{height:420px}
}
@media (min-width:900px){
  .tarjetas{grid-template-columns:repeat(3,1fr)}
  .cab nav{flex-basis:auto}
}