/* ===========================================================================
   ubicaria — sistema visual 2026-10
   Blanco, azul #0073e1, tarjetas con sombra suave, cabecera y pie azul noche,
   buscador con pestañas montado sobre la foto. Titulares en serif editorial
   (Newsreader) y fondo alterno de sección en crema cálido.
   CSP del sitio: default-src 'self' — fuentes auto-hospedadas, sin CDN.
   =========================================================================== */

/* --- Tipografía (auto-hospedada; Google Fonts por URL lo bloquea la CSP) --- */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Fichas ------------------------------------------------------------- */
:root{
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --bg:#ffffff;
  --surface:#fbf8f1;      /* CREMA: fondo alterno de sección (toque propio) */
  --ink:#222222;
  --ink-soft:#40525c;     /* 8,4:1 sobre blanco */
  --muted:#5c727d;        /* 4,9:1 sobre blanco, 4,7:1 sobre crema */
  --faint:#6a7d87;        /* el "apagado" #8a9aa3 daba 2,8:1: oscurecido a 4,5:1 */
  --accent:#0073e1;       /* 4,6:1 con blanco */
  --accent-h:#005fbb;
  --accent-ink:#fff;
  --accent-tx:#005fbb;    /* el azul para TEXTO sobre crema: 5,9:1 */
  --tint:#f2f8fe;
  --field:#001a33;        /* cabecera oscura / pie */
  --field-2:#002547;
  --field-ink:#eef3f6;
  --line:#e3ebf0;
  --line-soft:#eef3f6;
  --line-in:#c8d5dd;      /* borde de campos: se distingue del fondo */

  --ocre:#f0b43c;         /* "Nuevo" y detalles cálidos */
  --ocre-ink:#2a1d05;

  /* CADA OPERACIÓN, SU COLOR: venta en el azul primario, alquiler en un
     terracota armonizado. Los dos llevan texto blanco por encima de 4,5:1. */
  --venta:#0073e1;   --venta-tx:#005fbb;   --tint-v:#f2f8fe;
  --alq:#b8432c;     --alq-tx:#9c3520;     --tint-a:#fcefea;

  --r-s:4px; --r-m:6px; --r-l:6px; --r-full:4px;

  --sh:0 10px 27px rgba(7,152,255,.08);
  --sh-h:0 16px 34px rgba(7,152,255,.15);

  --m:20px;
  --maxw:1240px;          /* 1200 de contenido + 2 × 20 de margen */

  --wsp:#0f7a3d;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; text-wrap:balance; color:var(--ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--m)}

/* ===========================================================================
   1. HERO — "Small name, open sky"
   La foto ocupa la pantalla. Arriba, donde el cielo está vacío, la tinta va
   oscura; abajo, sobre el acantilado, va crema. Ni cristal ni degradado para
   leer: el texto se coloca donde la fotografía ya le da contraste, y el
   buscador se apoya en un panel opaco de verdad.
   =========================================================================== */
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.12) translate3d(-1.4%,-1%,0)}}

/* Membrete: el nombre pequeño y apilado, como en una hoja de carta. */
.mark{font-family:var(--serif); font-size:16px; line-height:1.25; text-decoration:none; color:var(--ink)}
/* El membrete cae sobre la esquina donde la fotografía tiene ramas: ni la
   tinta oscura ni la crema se leen ahí. Una placa opaca del mismo tono que
   los pies de foto lo resuelve sin recurrir a cristal ni a un degradado. */
/* El hero tiñe de crema todo lo que hay dentro; el panel del buscador es
   claro, así que su texto vuelve a la tinta del sitio. */
.finder{color:var(--ink)}
.mark b{display:block; font-weight:600; font-size:21px; letter-spacing:-.01em}
.mark span{display:block; font-family:var(--sans); font-size:16px; color:var(--ink-soft)}

/* Enlaces en una sola línea separados por comas: sin barra, sin isla, sin
   cristal. Es la navegación completa del sitio. */

.finder{grid-area:finder; align-self:end}

/* ===========================================================================
   2. EL BUSCADOR — pieza real, panel opaco. Controles de 46px.
   =========================================================================== */
.finder{background:var(--bg); padding:clamp(18px,1.9vw,26px); border-radius:var(--r-l)}
.finder h2{font-size:21px; margin:0 0 14px}
.finder-row{display:grid; gap:9px}
.ops{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:3px;
  background:var(--surface); padding:4px; border-radius:var(--r-full);
}
.ops label{position:relative}
.ops input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.ops span{
  display:block; text-align:center; padding:12px 8px; font-size:16px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  border-radius:var(--r-full);
  transition:background .25s ease, color .25s ease;
}
.ops input:checked+span{background:var(--venta); color:var(--accent-ink)}
.ops input[value="alquiler"]:checked+span{background:var(--alq)}
.ops input:focus-visible+span{outline:2px solid var(--accent); outline-offset:3px}

.inp,.sel{
  width:100%; min-height:46px; padding:11px 13px; font:inherit; font-size:16px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); /* taste-skill-ignore: campo de formulario */
  border-radius:var(--r-s); appearance:none;
}
.sel{
  /* Flecha dibujada como data-URI: un SVG no es un degradado y no viaja por red. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231e1812' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:12px;
  padding-right:36px;
}
.inp::placeholder{color:#8a807b}
.two{display:grid; grid-template-columns:1fr 1fr; gap:9px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px; font:inherit; font-size:16px; font-weight:500;
  background:var(--accent); color:var(--accent-ink);
  border:0; border-radius:var(--r-full); cursor:pointer; text-decoration:none;
  transition:transform .25s cubic-bezier(.32,.72,0,1), background .25s ease;
}
.btn:hover{background:#152e72}
.btn:active{transform:translateY(1px)}
.btn-w{width:100%}
.btn-line{background:var(--surface); color:var(--ink)}
.btn-line:hover{background:var(--accent); color:var(--accent-ink)}

/* ===========================================================================
   3. BANDA DE PANELES DESIGUALES — la ciudad, a tamaños distintos
   Son fotografías de arquitectura sin lugar. No son inmuebles del
   catálogo y no se presentan como tales.
   =========================================================================== */

/* ===========================================================================
   4. DECLARACIÓN + TABLA EMPUJADA A LA DERECHA
   =========================================================================== */
.sec{padding:clamp(72px,11vw,190px) 0}
.sec-tight{padding:clamp(54px,7vw,110px) 0}
.say{font-size:clamp(31px,4.1vw,60px); line-height:1.02; max-width:20ch}
.lede{font-size:17px; max-width:42ch; margin:22px 0 0; color:var(--ink)}
.note{font-size:16px; color:var(--ink-soft); margin:16px 0 0; max-width:46ch}

.push{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,96px); align-items:start}

/* --- La pieza viva: presupuesto → qué entra ----------------------------- */
.budget{margin:34px 0 0}
.budget-head{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.ops-sm{flex:none; width:244px; margin:0}
.budget-n{font-family:var(--serif); font-size:clamp(38px,4.6vw,66px); line-height:1; display:block;
  color:var(--venta-tx); transition:color .3s ease}
[data-budget][data-op="alquiler"] .budget-n{color:var(--alq-tx)}
.budget input[type=range]{
  width:100%; margin:20px 0 0; appearance:none; height:46px; background:transparent; cursor:pointer;
}
.budget input[type=range]::-webkit-slider-runnable-track{height:5px; background:var(--line); border-radius:999px}
.budget input[type=range]::-moz-range-track{height:5px; background:var(--line); border-radius:999px}
.budget input[type=range]::-webkit-slider-thumb{
  appearance:none; width:30px; height:30px; margin-top:-12.5px; border:0; border-radius:50%;
  background:var(--venta);
}
[data-budget][data-op="alquiler"] input[type=range]::-webkit-slider-thumb{background:var(--alq)}
.budget input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:var(--venta)}
[data-budget][data-op="alquiler"] input[type=range]::-moz-range-thumb{background:var(--alq)}
.budget-out{font-size:17px; margin:18px 0 0; max-width:40ch; min-height:3.2em}
.budget-out b{font-weight:600}

/* Tabla: el único lugar donde la página usa líneas, porque una tabla sin
   líneas deja de ser legible. */
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:16px; margin-left:-14px; width:calc(100% + 14px)}
.tbl caption{text-align:left; font-size:16px; color:var(--muted); padding:0 0 14px}
.tbl th{
  text-align:left; font-weight:500; font-size:15px; color:var(--muted);
  padding:0 14px 11px 0; border-bottom:1px solid var(--ink); /* taste-skill-ignore: tabla real */
}
.tbl th:last-child,.tbl td:last-child{padding-right:0; text-align:right}
.tbl td{padding:19px 14px 19px 0; border-bottom:1px solid var(--line); vertical-align:top} /* taste-skill-ignore: tabla real */
.tbl th:first-child,.tbl td:first-child{padding-left:14px}
.tbl tbody td:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.tbl tbody td:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.tbl tbody tr{transition:background .3s ease}
.tbl tbody tr:hover{background:var(--tint)}
.tbl a{text-decoration:none; font-family:var(--serif); font-size:21px; letter-spacing:-.01em; display:block; line-height:1.15}
.tbl a:hover{color:var(--accent)}
.tbl .sub{display:block; font-family:var(--sans); font-size:15px; color:var(--muted); margin-top:5px}
.tbl .pr{font-size:17px; white-space:nowrap}
.tbl .m2{display:block; font-size:15px; color:var(--muted); margin-top:4px; white-space:nowrap}
/* Fuera de presupuesto: la fila no desaparece —eso escondería catálogo— solo
   se retira al fondo. Y las que SÍ entran se encienden: mover el deslizador
   tiene que dar algo a cambio, no solo cambiar un tono de gris. */
.tbl tr[data-out="1"]{opacity:.55}
/* La fila que entra se enciende del color de SU operación, no de un azul para
   todo: con el deslizador en alquiler la tabla se pone terracota entera. */
.tbl tr[data-fit="1"]{background:var(--tint-v)}
.tbl tr[data-fit="1"] .pr{color:var(--venta-tx); font-weight:600}
.tbl tr[data-fit="1"] td:first-child{box-shadow:inset 4px 0 0 var(--venta)} /* taste-skill-ignore: marca de fila, no relieve */
.tbl tr[data-fit="1"] td{border-bottom-color:transparent}
.tbl tr[data-op="alquiler"][data-fit="1"]{background:var(--tint-a)}
.tbl tr[data-op="alquiler"][data-fit="1"] .pr{color:var(--alq-tx)}
.tbl tr[data-op="alquiler"][data-fit="1"] td:first-child{box-shadow:inset 4px 0 0 var(--alq)} /* taste-skill-ignore: marca de fila */
.tbl tr[data-fit="1"]:hover{background:#d5e0f6}
.tbl tr[data-op="alquiler"][data-fit="1"]:hover{background:#f6d3ca}

/* ===========================================================================
   5. TÍTULO FIJADO + FOTOGRAFÍAS QUE PASAN (el fundido lento: firma de motion)
   =========================================================================== */
.pinned{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,88px); align-items:start}
.pin-t{position:sticky; top:clamp(28px,6vh,90px)}
.pass{position:relative; aspect-ratio:4/5; background:var(--surface); overflow:hidden; border-radius:var(--r-m)}
.pass img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.9s ease-in-out;
}
.pass img.on{opacity:1}
.pass figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:var(--field); color:var(--field-ink); font-size:16px;
}
.facts{margin:38px 0 0; display:grid; gap:3px}
.facts div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:baseline; padding:15px 18px; background:var(--bg)}
.facts div:first-child{border-radius:var(--r-m) var(--r-m) 0 0}
.facts-row div:first-child,.facts-row div:last-child{border-radius:var(--r-s)}
.facts div:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.facts dt{color:var(--ink); font-size:16px; margin:0}
.facts dd{margin:0; font-family:var(--serif); font-size:25px; white-space:nowrap}

/* ===========================================================================
   6. TRES FOTOGRAFÍAS, LUEGO UN CAMPO
   =========================================================================== */
.closing{
  background:var(--field); color:var(--field-ink); border-radius:var(--r-l);
  padding:clamp(44px,6.4vw,104px) clamp(26px,5vw,88px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,64px); align-items:center;
}
.closing h2{color:var(--field-ink); font-size:clamp(31px,4.1vw,60px); line-height:1.04; max-width:22ch}
.closing p{margin:18px 0 0; max-width:44ch; color:#ccd8f0; font-size:16px}
.closing .btn{background:var(--ocre); color:var(--ocre-ink)}
.closing .btn:hover{background:#efbe5f}

/* ===========================================================================
   7. PIE — columnas arriba, logotipo abajo
   =========================================================================== */
.foot{background:var(--field); color:var(--field-ink); padding:clamp(44px,5.6vw,86px) 0 clamp(26px,3vw,40px); border-radius:var(--r-l) var(--r-l) 0 0}

/* --- Franja viva: la hora de Lima, en marcha ---------------------------- */
/* El pie era un bloque plano donde nada pasaba. Esto es el único dato del pie
   que cambia solo, y es útil de verdad: quien llama desde fuera del Perú ve
   qué hora marca el reloj aquí antes de marcar. Sin JavaScript sale la hora
   del servidor, que también es la de Lima. */
.foot-now{
  display:flex; align-items:baseline; gap:clamp(13px,2vw,32px); flex-wrap:wrap;
  /* Sin raya divisoria: el bloque se separa con aire. Una línea de 1px aquí no
     es una tabla ni un campo de formulario, que es lo único que las justifica. */
  padding-bottom:clamp(46px,6vw,86px); margin-bottom:clamp(14px,1.8vw,24px);
}
.foot-now-k{font-size:15px; color:#c3d1ee; display:inline-flex; align-items:center; white-space:nowrap}
.dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--ocre); margin-right:9px; flex:none;
  animation:pulso 2.4s ease-in-out infinite;
}
@keyframes pulso{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.62)}}
.foot-clock{
  font-family:var(--serif); font-size:clamp(36px,4.6vw,62px); line-height:1;
  color:var(--field-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.foot-now-t{font-size:15px; color:#a8bae0; max-width:42ch}

.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:clamp(26px,3.4vw,54px)}
/* Marca ocre antes de cada rótulo: el pie gana estructura sin una sola línea. */
.foot h3{
  font-family:var(--sans); font-size:16px; font-weight:600; margin:0 0 16px;
  display:flex; align-items:center; gap:11px; color:var(--field-ink);
}
.foot h3::before{content:''; width:15px; height:3px; background:var(--ocre); flex:none}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot p{font-size:16px; color:#c3d1ee; margin:0 0 9px; max-width:40ch}

/* Enlaces del pie: la flecha entra abriéndose sitio y el subrayado se barre
   desde la izquierda. Transform y opacity, nada que fuerce reflow. */
.foot-cols a{
  position:relative; text-decoration:none; font-size:16px; color:#c3d1ee;
  display:inline-flex; align-items:center; transition:color .3s ease;
}
.foot-cols a::before{
  content:'\2192'; width:0; opacity:0; overflow:hidden; flex:none;
  transition:width .42s cubic-bezier(.32,.72,0,1), opacity .3s ease, margin-right .42s cubic-bezier(.32,.72,0,1);
}
.foot-cols a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; /* taste-skill-ignore: subrayado de enlace, no divisoria */
  background:var(--ocre); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.32,.72,0,1);
}
.foot-cols a:hover,.foot-cols a:focus-visible{color:var(--field-ink)}
.foot-cols a:hover::before,.foot-cols a:focus-visible::before{width:1em; opacity:1; margin-right:.34em}
.foot-cols a:hover::after,.foot-cols a:focus-visible::after{transform:scaleX(1)}

/* --- Cierre: una sola línea ------------------------------------------- */
/* El logotipo gigante se quitó: su line-height de .82 metía las letras encima
   del párrafo de créditos y el pie acababa en un amasijo. El pie termina en
   las columnas, y debajo queda una línea fina con el aviso y los créditos
   plegados. */
.foot-end{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px 30px; flex-wrap:wrap;
  margin-top:clamp(52px,6.6vw,96px);
}
.foot-end>p{font-size:15px; color:#a8bae0; margin:0}

/* El crédito de licencia sigue en la página, plegado. El signo gira a aspa al
   abrirse: la única pista de que esto se pulsa. */
.foot-cred{min-width:0}
.foot-cred summary{
  font-size:15px; color:#c3d1ee; cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:9px; transition:color .3s ease;
}
.foot-cred summary::-webkit-details-marker{display:none}
.foot-cred summary::after{
  content:'+'; color:var(--ocre); font-size:17px; line-height:1;
  transition:rotate .35s cubic-bezier(.32,.72,0,1);
}
.foot-cred[open] summary::after{rotate:45deg}
.foot-cred summary:hover,.foot-cred summary:focus-visible{color:var(--field-ink)}

.credits{font-size:15px; color:#a8bae0; margin:16px 0 0; max-width:76ch; line-height:1.6}
.credits a{color:#c3d1ee; text-decoration:underline; text-underline-offset:2px; transition:color .3s ease}
.credits a:hover{color:var(--ocre)}

/* ===========================================================================
   8. BÚSQUEDA Y FICHA
   =========================================================================== */
.head-bar{padding:clamp(18px,2.4vw,30px) 0; background:var(--surface)}
.head-in{display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap}

.lay{display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:clamp(26px,3.6vw,64px); align-items:start; padding-block:clamp(34px,4.6vw,76px)}
.filters{position:sticky; top:24px; display:grid; gap:17px}
.filters h4{font-family:var(--sans); font-size:16px; font-weight:600; margin:0 0 9px}
.fg{display:grid; gap:9px}

.results{display:grid; gap:clamp(22px,2.6vw,38px)}
/* Cabecera del buscador. La pagina de resultados entraba sin jerarquia: el
   titular dice que lista se esta mirando y le da a la primera pantalla algo
   dominante. Cambia de color con la operacion, igual que el resto del sitio. */
.shead{padding:clamp(26px,3.6vw,58px) 0 clamp(18px,2.2vw,30px)}
.shead h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,5.8vw,86px); line-height:1; letter-spacing:-.02em;
  margin:0; max-width:15ch; color:var(--venta-tx);
}
.shead h1[data-op="alquiler"]{color:var(--alq-tx)}
.shead p{margin:18px 0 0; font-size:17px; color:var(--ink-soft); max-width:50ch}
@media (max-width:760px){ .shead h1{max-width:none} }

.res-top{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap}
.res-top p{margin:0; font-size:16px; color:var(--muted)}
.res-top b{font-family:var(--serif); font-size:25px; font-weight:500; color:var(--ink)}

/* Rejilla desigual: las fotografías no son todas del mismo tamaño, que es el
   nombre de la dirección. */
.uneven{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.5vw,22px)}
.it{grid-column:span 3; text-decoration:none; display:block;
     background:#fff; border-radius:var(--r-m); overflow:hidden}
.it:nth-child(6n+1){grid-column:span 4}
.it:nth-child(6n+2){grid-column:span 2}
.it:nth-child(6n+3){grid-column:span 2}
.it:nth-child(6n+4){grid-column:span 4}
/* La foto va al borde de la tarjeta: el radio lo pone la tarjeta. */
.it-pic{position:relative; overflow:hidden; background:var(--surface); aspect-ratio:4/3}
.it:nth-child(6n+1) .it-pic,.it:nth-child(6n+4) .it-pic{aspect-ratio:16/10}
.it-pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.32,.72,0,1)}
/* Las 5 fotos de los avisos DEMO son bloques de color plano con la palabra
   DEMO, en colores de semáforo que chocaban con todo. Antes las mandaba a
   grayscale(1) —y eso era una fuente de gris más—; ahora solo se les baja la
   saturación a la mitad: siguen teniendo color, dejan de gritar. */
.is-demo img{filter:saturate(.5) contrast(.9) brightness(1.05)}
.it:hover .it-pic img{transform:scale(1.045)}
.it-tag{position:absolute; top:12px; left:12px; background:var(--venta); color:var(--accent-ink); font-size:15px; padding:7px 14px; border-radius:var(--r-full)}
.it-tag.is-alq{background:var(--alq)}
.it-b{padding:15px 17px 19px}
.it-pr{font-family:var(--serif); font-size:25px; line-height:1; margin:0}
.it-pr .per{font-family:var(--sans); font-size:15px; color:var(--muted)}
.it-t{font-size:16px; margin:9px 0 0; color:var(--ink)}
.it-m{font-size:15px; color:var(--muted); margin:6px 0 0}

.pager{display:flex; gap:7px; align-items:center; flex-wrap:wrap; padding:14px 0 0}
.pager a,.pager span{min-width:46px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:16px; background:var(--surface); border-radius:var(--r-full)}
.pager .on{background:var(--accent); color:var(--accent-ink)}
.pager a:hover{background:var(--accent); color:var(--accent-ink)}

.crumbs{font-size:15px; color:var(--muted); padding:22px var(--m) 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline; text-underline-offset:3px}
.crumbs i{font-style:normal; padding:0 8px}

.file{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(28px,4vw,72px); align-items:start; padding-block:clamp(28px,3.6vw,60px)}
.stage{background:var(--surface); aspect-ratio:3/2; overflow:hidden; position:relative; border-radius:var(--r-m)}
.stage img{width:100%; height:100%; object-fit:cover}
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:104px; gap:9px; margin:9px 0 0; overflow-x:auto; padding-bottom:4px}
.strip button{padding:0; border:0; background:var(--surface); cursor:pointer; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-s)}
.strip img{width:100%;height:100%;object-fit:cover; transition:opacity .3s ease}
.strip button[aria-current=false] img{opacity:.55}
.strip button:hover img{opacity:1}

.file h1{font-size:clamp(28px,3.4vw,47px); line-height:1.04; margin:0}
.price{font-family:var(--serif); font-size:clamp(34px,4.4vw,60px); line-height:1; margin:24px 0 0}
.price .per{font-family:var(--sans); font-size:16px; color:var(--muted)}
.price .m2{display:block; font-family:var(--sans); font-size:16px; color:var(--muted); margin-top:11px}
.specs{margin:40px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(156px,1fr)); gap:8px}
.specs div{padding:16px 18px; background:var(--surface); border-radius:var(--r-s)}
.specs dt{font-size:15px; color:var(--muted); margin:0}
.specs dd{margin:5px 0 0; font-family:var(--serif); font-size:25px; overflow-wrap:break-word}
.blk{padding:clamp(34px,4.4vw,70px) 0 0}
.blk h2{font-size:clamp(24px,2.7vw,36px); margin:0 0 18px}
.desc{white-space:pre-line; max-width:62ch; font-size:16px}

.side{background:var(--surface); padding:clamp(22px,2.4vw,32px); position:sticky; top:24px; border-radius:var(--r-l)}
.who{display:flex; gap:14px; align-items:center}
.who .av{width:48px; height:48px; flex:none; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--serif); font-size:21px}
.who .nm{font-size:16px; font-weight:600}
.who .rl{font-size:15px; color:var(--muted)}
.seal{font-size:16px; color:var(--ink-soft); margin:20px 0 0; padding:15px; background:var(--bg); border-radius:var(--r-s)}
.dato{font-family:var(--serif); font-size:25px; margin:12px 0 0; padding:15px; background:var(--bg); display:block; border-radius:var(--r-s)}
.cod{font-size:15px; color:var(--muted); margin:18px 0 0}

.empty{padding:clamp(54px,9vw,130px) 0; max-width:46ch}
.empty h2{font-size:clamp(26px,3.2vw,42px)}
.empty p{margin:18px 0 0}

/* ===========================================================================
   8b. SQUIRCLE — la curvatura continua
   Un border-radius normal pega un arco de circunferencia a un lado recto, y el
   empalme se nota: ahí es donde la esquina sigue "cantando". El squircle
   (superelipse) curva de forma continua, que es lo que usan los iconos y las
   carcasas de Apple y lo que el ojo lee como objeto torneado.
   Va dentro de @supports: donde el navegador no lo conozca se queda el
   border-radius de siempre, que ya está puesto. Se aplica solo a cajas y
   fotografías; a las CÁPSULAS no, porque en un radio de 999px la superelipse
   deshace la cápsula y la devuelve a rectángulo redondeado.
   =========================================================================== */
@supports (corner-shape: squircle){
  .finder,.inp,.sel,.sky .mark,
}

/* ===========================================================================
   9. ENTRADAS
   El estado escondido vive tras .js: sin JavaScript la página sale entera.
   =========================================================================== */
.js .up{opacity:0; transform:translateY(26px)}
.js .up.in{opacity:1; transform:none; transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.32,.72,0,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .js .up{opacity:1; transform:none}
  .pass img{transition:none}
}

/* ===========================================================================
   10. TELÉFONO — composición propia, no la de escritorio estrujada
   =========================================================================== */
@media (max-width:1080px){
  .push,.pinned,.file,.lay{grid-template-columns:minmax(0,1fr)}
  .finder{margin-top:28px; max-width:520px}
  .pin-t{position:static}
  .side,.filters{position:static}
  .closing{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  /* Sin la foto detrás, la tinta vuelve a ser la del sitio. */
  .finder{margin-top:24px}
  /* En el telefono el hero pide lo minimo: operacion, texto y buscar. Tipo y
     distrito viven en /v3/buscar, a un toque, y asi el boton entra en la
     primera pantalla en vez de quedar tres scrolls mas abajo. */
  .finder .two{display:none}
  .uneven{grid-template-columns:1fr}
  .it,.it:nth-child(6n+1),.it:nth-child(6n+2),.it:nth-child(6n+3),.it:nth-child(6n+4){grid-column:1/-1}
  .it-pic,.it:nth-child(6n+1) .it-pic,.it:nth-child(6n+4) .it-pic{aspect-ratio:4/3}
  .two{grid-template-columns:1fr}
  /* La tabla se vuelve lista: una tabla de 5 columnas no cabe en 390px. */
  .tbl{margin-left:0; width:100%}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl thead,.tbl .hide-s{display:none}
  .tbl tr{padding:20px 0; border-bottom:1px solid var(--line)}
  .tbl td{border:0; padding:3px 0; border-radius:0}
  .tbl th:first-child,.tbl td:first-child{padding-left:0}
    .tbl tr[data-fit="1"]{border-left:3px solid var(--venta); padding-left:14px; border-radius:var(--r-s)}
  .tbl tr[data-op="alquiler"][data-fit="1"]{border-left-color:var(--alq)}
  .specs{grid-template-columns:1fr 1fr}
}

/* ===========================================================================
   13. ANUNCIANTE: EL MURO DE CONTACTO Y SU PERFIL
   El telefono no se regala: se pide a cambio de los datos del interesado, que
   es lo que convierte una visita en un contacto real para quien publica. Y
   desde la ficha se puede recorrer TODO lo que esa persona tiene publicado.
   =========================================================================== */
a.who{text-decoration:none; color:inherit; display:flex; gap:14px; align-items:center}
a.who:hover .nm{color:var(--accent-tx); text-decoration:underline; text-underline-offset:3px}
.who-mas{
  display:inline-block; margin-top:14px; font-size:16px; color:var(--accent-tx);
  text-decoration:none; border-bottom:2px solid var(--ocre); padding-bottom:2px;
} /* taste-skill-ignore: subrayado de enlace, no filete decorativo */
.who-mas:hover{color:var(--ink)}

.lead{margin-top:22px}
.lead-say{font-size:16px; color:var(--ink-soft); margin:0 0 14px}
.lead .inp{margin-bottom:8px}
.lead-legal{font-size:15px; color:var(--muted); margin:12px 0 0}
.lead-err{
  font-size:16px; color:var(--alq-tx); background:var(--tint-a);
  padding:12px 14px; border-radius:var(--r-s); margin:0 0 12px;
}
.lead.is-done .inp,
.lead.is-done .lead-say,
.lead.is-done .lead-legal,
.lead.is-done .lead-err{display:none}

.dato{display:block}
.dato-tel,.dato-mail,.dato-perfil{display:block; text-decoration:none; color:var(--ink)}
.dato-tel{font-family:var(--serif); font-size:29px; line-height:1.1; letter-spacing:-.01em}
.dato-mail{font-family:var(--sans); font-size:16px; color:var(--ink-soft); margin-top:8px; word-break:break-all}
.dato-perfil{font-family:var(--sans); font-size:16px; color:var(--accent-tx); margin-top:14px}
.dato-tel:hover,.dato-mail:hover,.dato-perfil:hover{text-decoration:underline; text-underline-offset:3px}

/* --- la pagina de perfil --- */
.prof{display:flex; gap:20px; align-items:center}
.prof .av{
  width:clamp(64px,7vw,96px); height:clamp(64px,7vw,96px); flex:none; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  font-family:var(--serif); font-size:clamp(29px,3.2vw,44px);
}
.prof h1{
  font-family:var(--serif); font-weight:500; margin:0;
  font-size:clamp(36px,5vw,76px); line-height:1; letter-spacing:-.02em; max-width:14ch;
}
.prof-rl{margin:8px 0 0; font-size:17px; color:var(--muted)}
.seal-w{max-width:62ch}
.facts-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px; margin:26px 0 0;
}
.facts-row div{
  /* En columna, etiqueta y cifra enfrentadas funcionan. En una fila de cuatro,
     esa misma rejilla empuja el numero al extremo opuesto de la pantalla y deja
     "Avisos publicados ................ 5": se apilan. */
  /* column-reverse: la CIFRA se ve arriba y la etiqueta debajo, que es como se
     lee un dato; el HTML conserva el orden dt->dd que exige una <dl>. Con la
     etiqueta encima quedaba el patron de antetitulo sobre titular, que es
     justo lo que no queremos. */
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  border-radius:var(--r-s); padding:18px 20px;
  background:var(--surface);   /* sobre papel crema, var(--bg) era invisible */
}
.facts-row dt{font-size:15px; color:var(--muted); margin:10px 0 0}
.facts-row dd{
  margin:0; font-family:var(--serif); font-size:clamp(31px,2.8vw,42px);
  line-height:1; color:var(--ink); white-space:nowrap;
}
.prof-note{margin:20px 0 0; font-size:16px; color:var(--muted); max-width:52ch}
.prof-cta{margin:26px 0 0}
#avisos{scroll-margin-top:24px; padding-bottom:clamp(44px,6vw,104px)}
@media (max-width:760px){ .prof{gap:14px} .prof h1{max-width:none} }

/* Migas de pan: el separador necesita aire A LOS DOS LADOS. Sin el, se leia
   "Inicio/ Avisos/ Angelo", con la barra pegada a la palabra anterior. */
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--accent-tx)}

/* ===========================================================================
   14. ACCESO, PANEL Y TEXTOS LEGALES
   Estas paginas vivian con la hoja anterior: fondo oscuro, otra tipografia,
   otro pie. Al pulsar "Entrar" el sitio cambiaba de cara. Aqui se traducen sus
   clases al lenguaje del resto: papel crema, Bodoni en los titulares, capsulas
   y las mismas esquinas. No se toco ni una linea del HTML de esas paginas.
   =========================================================================== */
.skip{position:absolute; left:-9999px}
.skip:focus{
  left:var(--m); top:12px; z-index:20; background:var(--field); color:var(--field-ink);
  padding:12px 18px; border-radius:var(--r-s); font-size:16px;
}
.head-cta{
  display:inline-block; margin-left:16px; padding:9px 18px; border-radius:var(--r-full);
  background:var(--accent); color:var(--accent-ink); font-size:15px; text-decoration:none;
  transition:background .25s ease;
}
.head-cta:hover{background:var(--field)}

.form{width:100%; max-width:560px; margin:clamp(30px,4.4vw,74px) auto clamp(56px,7vw,112px); padding:0 var(--m)}
.form-wide{max-width:1120px}
.card-box{background:var(--surface); border-radius:var(--r-l); padding:clamp(24px,3.2vw,46px)}
.card-box h1,.card-box h2,.panel-head h1,.panel-head h2{
  font-family:var(--serif); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(31px,3.6vw,48px); line-height:1.03; margin:0 0 6px;
}
.card-box > p,.panel-head p{font-size:16px; color:var(--ink-soft); margin:6px 0 0}

/* .field aqui es una FILA de formulario (etiqueta + campo). El bloque azul de
   cierre de la portada, que compartia nombre, pasó a llamarse .closing. */
.field{display:block; margin-top:18px}
.field > label{display:block; font-size:15px; color:var(--muted); margin-bottom:7px}
.field .inp,.field .sel,.field .ta{width:100%}
.ta{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-s); padding:13px 15px; min-height:140px;
  resize:vertical;
} /* taste-skill-ignore: campo de formulario */
.card-box .inp,.card-box .sel,.card-box .ta{background:var(--bg)}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:0 22px}
.span2{grid-column:1/-1}
.check{display:flex; gap:11px; align-items:center; margin-top:16px; font-size:16px}
.check input{width:20px; height:20px; accent-color:var(--accent)}

.err{
  background:var(--tint-a); color:var(--alq-tx); font-size:16px;
  padding:13px 16px; border-radius:var(--r-s); margin:0 0 18px;
}
.hint{font-size:16px; color:var(--muted); margin:22px 0 0}
.hint a,.prose a,.panel-head a.lnk{color:var(--accent-tx)}
.flash{
  max-width:var(--maxw); margin:18px auto 0; padding:13px 16px; border-radius:var(--r-s);
  font-size:16px; background:var(--tint-v); color:var(--venta-tx);
}

.btn-block{width:100%; margin-top:24px}
.btn-sm{min-height:40px; padding:9px 18px; font-size:15px}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)} /* taste-skill-ignore: boton secundario */
.btn-ghost:hover{background:var(--surface); color:var(--ink)}
.btn-danger{background:var(--alq); color:#fff}
.btn-danger:hover{background:var(--alq-tx)}

.panel-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:26px;
  flex-wrap:wrap; padding:clamp(28px,3.8vw,62px) 0 0;
}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; margin:30px 0 0}
/* column-reverse: manda la cifra y la etiqueta la explica debajo. Al reves se
   lee como antetitulo sobre titular, que es lo que no queremos. */
.stat{
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  background:var(--surface); border-radius:var(--r-s); padding:18px 20px;
}
.stat dt{font-size:15px; color:var(--muted); margin:10px 0 0}
.stat dd{margin:0; font-family:var(--serif); font-size:clamp(31px,2.8vw,42px); line-height:1}

.tblwrap{overflow-x:auto; margin:28px 0 clamp(40px,6vw,96px)}
.tbl-acts{white-space:nowrap}
.tbl-acts .btn{margin:0 5px 5px 0}
.badge-est{
  display:inline-block; padding:5px 13px; border-radius:var(--r-full); font-size:15px;
  background:var(--bg); color:var(--ink-soft); white-space:nowrap;
}
.badge-est.is-publicado{background:var(--tint-v); color:var(--venta-tx)}
.badge-est.is-rechazado{background:var(--tint-a); color:var(--alq-tx)}
.badge-est.is-borrador,.badge-est.is-pausado{background:var(--tint); color:var(--ocre-ink)}
.n{text-align:right}
.mono{font-variant-numeric:tabular-nums}

.fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:22px 0 0}
.fotos img{width:100%; display:block; border-radius:var(--r-s)}
.fotos .pri{outline:3px solid var(--ocre); outline-offset:2px; border-radius:var(--r-s)}
.fotos .rm{margin-top:7px}

.prose{
  max-width:68ch; margin:clamp(30px,4vw,66px) auto clamp(56px,7vw,112px);
  padding:0 var(--m); font-size:17px; line-height:1.65; color:var(--ink-soft);
}
.prose h1{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(36px,4.6vw,68px); line-height:1.02; letter-spacing:-.02em; margin:0 0 26px;
}
.prose h2{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(25px,2.6vw,34px); margin:44px 0 12px;
}
@media (max-width:760px){
  .head-cta{margin-left:0; margin-top:10px}
  .panel-head{align-items:flex-start}
}

/* --- Pantalla partida de acceso y registro --------------------------------
   Un formulario solo en medio de una pagina en blanco no tiene nada dominante
   y se lee como un tramite. Con la fotografia al lado, entrar al portal se
   parece al resto del sitio en vez de a una aduana. */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch}
.split-pic{position:relative; min-height:clamp(380px,62svh,760px)}
.pic-full{margin:0; height:100%; position:relative; overflow:hidden}
.pic-full img{width:100%; height:100%; object-fit:cover; display:block}
.pic-full figcaption,.pic-wide figcaption{
  position:absolute; left:0; right:0; bottom:0; background:var(--field); color:var(--field-ink);
  padding:13px clamp(16px,2vw,26px); font-size:15px;
}
.pic-full figcaption b,.pic-wide figcaption b{display:block; font-size:16px; margin-bottom:2px}
.split .form{margin:0; max-width:540px; padding:clamp(34px,4.4vw,72px) clamp(20px,3.4vw,56px); align-self:center}
.split .card-box{background:transparent; padding:0}
.split .card-box .inp,.split .card-box .sel,.split .card-box .ta{background:var(--surface)}

/* --- Banda fotografica de los textos legales --- */
.pic-wide{
  margin:clamp(22px,3vw,46px) 0 0; position:relative; overflow:hidden;
  aspect-ratio:21/6; border-radius:var(--r-m);
}
.pic-wide img{width:100%; height:100%; object-fit:cover; display:block}

@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split-pic{min-height:30svh}
  .split .form{max-width:none; padding:clamp(26px,5vw,44px) var(--m)}
  .pic-wide{aspect-ratio:16/9}
}

/* El registro tiene el doble de campos: su columna necesita mas sitio. */
.split .form-wide{max-width:700px}
@media (max-width:860px){
  /* Apilada, la fotografia se comporta igual que la banda de los textos
     legales: caja redondeada con el pie dentro y abajo, y aire de sobra
     antes del titular (si no, el pie se lee como su antetitulo). */
  .split-pic{
    /* 16/10 recortaba el motivo de una fotografia vertical: 4/3 lo devuelve. */
    min-height:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-m);
    margin:clamp(18px,3vw,28px) var(--m) clamp(76px,10vw,104px);
  }
  .pic-full{border-radius:var(--r-m)}
  .pic-full figcaption{top:auto; bottom:0}
}

/* --- Aire antes de un dato grande --------------------------------------- */
/* Una línea corta justo encima de una cifra enorme se lee como su rótulo,
   no como lo que es. Se separa con aire, no con una raya. */
.wrap > .pic-wide{margin-bottom:clamp(80px,9vw,128px)}

/* --- La tira: tres fotografías y una salida ----------------------------- */
.tira{padding:clamp(76px,9vw,132px) 0 clamp(48px,6vw,80px)}
.tira h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 clamp(22px,2.6vw,36px); max-width:21ch;
}
.tira-g{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px)}
.tira-g figure{margin:0}
.tira-g img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-m); display:block}
.tira-g figcaption{font-size:14px; line-height:1.34; margin-top:10px; opacity:.72}
.tira-g figcaption b{display:block; font-weight:600; opacity:1}
.tira-cta{margin:clamp(24px,2.8vw,36px) 0 0}
/* En el móvil tres columnas dejan fotografías del tamaño de un sello: la
   primera pasa a ser una banda ancha y las otras dos van debajo, a la par. */
@media (max-width:620px){
  .tira-g{grid-template-columns:1fr 1fr}
  .tira-g figure:first-child{grid-column:1/-1}
  .tira-g figure:first-child img{aspect-ratio:16/10}
}
/* La tira de avisos parecidos usa la rejilla de siempre, no las fotografías. */
.tira-avisos .uneven{margin:0}

/* El salto a los avisos va dentro de la frase, no en una pastilla suelta. */
.prof-ir{font-weight:600; white-space:nowrap}

/* --- La navegacion interior, en el telefono ------------------------------ */
/* Era una linea de texto con una pastilla inline-block dentro: su margen
   superior no aparta la linea de encima, asi que "Publicar gratis" caia sobre
   "Entrar". En flex el salto de linea es real y nada se toca. */
@media (max-width:860px){ .head-cta{margin-top:0; margin-left:12px} }

/* --- Las cifras del perfil, en el telefono ------------------------------- */
/* Cuatro cajas apiladas se comian la pantalla entera antes del primer aviso.
   En dos columnas se leen de un vistazo y los avisos suben al pliegue. */
@media (max-width:620px){
  .facts-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px}
  .facts-row div{padding:14px 15px}
  .facts-row dd{font-size:30px}
  .facts-row dt{font-size:14px; margin:7px 0 0}
}

/* --- Móvil: la fotografía a un tamaño que se entienda -------------------- */
@media (max-width:760px){
  /* El hero iba en una caja ancha y baja (30svh). Una fotografía apaisada de
     3/2 metida ahí deja el edificio diminuto en un costado y el resto cielo.
     En vertical el encuadre se cierra sobre el edificio y la foto dice algo. */

  /* Las cuatro fotografías ocupaban una pantalla CADA UNA: se veía un trozo
     enorme y nunca la serie. En dos columnas se ven las cuatro de un vistazo
     y el pie va debajo, no en una franja azul encima de la imagen. */
  /* Con el pie debajo de la foto, el ultimo caia a un palmo del titular
     siguiente y se leia como su antetitulo: la serie necesita cerrar con aire. */
}

@media (max-width:760px){
  /* Las dos columnas del presupuesto (el texto y la tabla) seguían lado a lado
     en el teléfono: el párrafo caía en una columna de una palabra por línea. */
  .push{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,6vw,46px)}
}
/* El pie de la tabla, fuera de la tabla: como <caption> el navegador le daba
   la anchura del contenido y en el teléfono caía a una palabra por línea. */
.tcap{font-size:16px; color:var(--muted); margin:0 0 14px; max-width:62ch}

@media (max-width:760px){
  /* El original es una fotografía minimalista: el edificio vive en el tercio
     inferior izquierdo y el resto es cielo. En una caja grande de teléfono eso
     se lee como una página a medio cargar. Se entra en la fotografía (zoom con
     origen en la esquina de la fachada) para que el edificio llene el cuadro. */
}

/* ===========================================================================
   15. LA TARJETA QUE TRABAJA
   Una fotografía con tres líneas debajo obliga a entrar al aviso para saber si
   sirve. Esta pasa fotos sin salir del listado, se guarda, dice cuántas fotos
   hay y resume los datos que deciden. El color vive aquí: cada operación con
   el suyo, el sello "Nuevo" en ocre y el guardado en terracota.
   =========================================================================== */
.it{position:relative}
.it-go{text-decoration:none; color:inherit}
/* Enlace extendido: la tarjeta entera es pulsable sin anidar botones dentro
   de un <a>, que es marcado inválido y rompe el teclado. */
.it-go{position:absolute; inset:0; z-index:1; border-radius:var(--r-m)}
.it:hover .it-t{text-decoration:underline; text-underline-offset:4px}

.it-pic img.it-x{position:absolute; inset:0; opacity:0; transition:opacity .45s ease}
.it-pic img.it-x.is-on{opacity:1}

.it-sellos{position:absolute; top:12px; left:12px; z-index:2; display:flex; gap:6px; flex-wrap:wrap}
.it-tag{position:static}
.it-new{
  background:var(--ocre); color:var(--ocre-ink); font-size:15px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-full);
}
.it-fav{
  position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; padding:0;
  display:grid; place-items:center; border:0; cursor:pointer; color:var(--ink);
  border-radius:var(--r-full); background:rgba(247,245,241,.92);
  transition:transform .25s cubic-bezier(.32,.72,0,1), background .25s ease, color .25s ease;
}
.it-fav svg{width:22px; height:22px}
.it-fav:hover{transform:scale(1.08)}
.it-fav:active{transform:scale(.93)}
.it-fav.is-on{background:var(--alq); color:#fff}
.it-fav.is-on svg{fill:currentColor}
.it-n{
  position:absolute; left:12px; bottom:12px; z-index:2; font-size:13px;
  background:rgba(30,24,18,.74); color:#fff; padding:5px 11px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:6px;
}
.it-n svg{width:15px; height:15px; flex:none}
.it-nav{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  justify-content:space-between; padding:0 10px; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.it:hover .it-nav,.it-nav:focus-within{opacity:1}
.it-nav button{
  pointer-events:auto; width:38px; height:38px; padding:0; border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  border-radius:var(--r-full); background:rgba(247,245,241,.92);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
}
.it-nav button:hover{transform:scale(1.1)}
.it-nav button:active{transform:scale(.92)}
.it-nav svg{width:20px; height:20px}
.it-dots{position:absolute; right:12px; bottom:14px; z-index:2; display:flex; gap:5px; align-items:center}
.it-dots i{width:6px; height:6px; border-radius:50%; background:rgba(247,245,241,.55); transition:width .3s ease, background .3s ease}
.it-dots i.on{width:17px; border-radius:var(--r-full); background:#fff}
/* En el teléfono no hay "hover": las flechas se quedan puestas. */
@media (hover:none){ .it-nav{opacity:1} }

.it-m2{display:block; font-family:var(--sans); font-size:15px; color:var(--muted); margin-top:5px}
.it-d{font-size:15px; color:var(--muted); margin:5px 0 0}
.it-s{
  list-style:none; display:flex; flex-wrap:wrap; gap:7px 15px;
  margin:12px 0 0; padding:0; font-size:15px; color:var(--ink-soft);
}
.it-s li{display:inline-flex; align-items:center; gap:7px}
.it-s svg{width:18px; height:18px; color:var(--muted); flex:none}
.it-s b{font-weight:600}
/* El enlace extendido cubría también el texto de la tarjeta: el precio quedaba
   literalmente debajo de una capa. El texto sube por encima y deja pasar el
   clic (pointer-events), así la tarjeta entera sigue siendo pulsable. */
.it-b{position:relative; z-index:2; pointer-events:none}
.it-b a{pointer-events:auto}

/* --- El buscador en el teléfono: primero los inmuebles ------------------- */
/* Aterrizar en un formulario de ocho campos es aterrizar en trabajo. Los
   resultados suben, los filtros bajan detrás de un botón. */
.res-ir{display:none}
.sortf{display:flex; gap:9px; align-items:center}
.sortf .sel{min-width:210px}
/* Con JS el orden se aplica al elegir, y el boton sobra. */
.js-sort .sortf button{display:none}
@media (max-width:1080px){
  .lay .results{order:1}
  /* Aire entre el ultimo distrito de la lista y el pie: pegados, el medidor
     leia el nombre del distrito como rotulo del reloj del pie, y de hecho se
     leia asi. */
  .lay .filters{order:2; padding-top:clamp(30px,5vw,48px); padding-bottom:clamp(96px,17vw,156px)}
  .res-top{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
  .res-n{flex:1 1 auto; margin:0}
  .res-ir{display:inline-flex; order:2}
  .sortf{order:3; flex:1 1 100%}
  .sortf .sel{flex:1 1 auto; min-width:0}
}

/* --- La barra de contacto de la ficha, en el teléfono -------------------- */
/* Un aviso se mira con una mano y se contacta con un dedo. El precio no se
   pierde al bajar y la acción vive abajo, donde llega el pulgar. */
.bar-sp,.bar{display:none}
@media (max-width:1080px){
  .bar-sp{display:block; height:76px}
  .bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
       align-items:center; gap:10px;
       padding:11px var(--m) calc(13px + env(safe-area-inset-bottom,0px));
       background:var(--bg); box-shadow:0 -10px 30px rgba(30,24,18,.13)}
  /* Entra cuando el precio de la pagina ya se fue arriba, y se aparta cuando
     el formulario esta en pantalla: nunca tapa lo que estas leyendo.
     Sin JavaScript (sin la clase js-bar) se queda puesta y ya. */
  .js-bar .bar{transform:translateY(118%); transition:transform .34s cubic-bezier(.32,.72,0,1)}
  .js-bar .bar.is-on{transform:none}
  .bar-p{flex:1 1 auto; min-width:0; margin:0; line-height:1.15}
  .bar-p b{display:block; font-size:21px; color:var(--ink);
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .bar-p span{font-size:13px; color:var(--muted)}
  .bar .btn{white-space:nowrap; padding:11px 18px}
  .bar-wsp{background:var(--wsp); border-color:var(--wsp); color:#fff}
  .bar-wsp:hover,.bar-wsp:focus-visible{background:#0b5f30; border-color:#0b5f30}
  .bar-tel{background:transparent; color:var(--accent-tx);
           border:1px solid var(--accent-tx)}
}

@media (prefers-reduced-motion:reduce){ .js-bar .bar{transition:none} }

/* --- Lo último publicado, en la portada --------------------------------- */
.ul-h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
      gap:14px; margin:0 0 clamp(24px,3vw,40px)}
.ul-h h2{margin:0}
@media (max-width:620px){ .ul-h .btn{width:100%; text-align:center} }

/* La cifra de guardados en la cabecera. Vacía no ocupa: el corazón que nadie
   ha pulsado no tiene por qué anunciar un cero. */
.fav-n{display:inline-block; min-width:20px; margin-left:7px; padding:1px 6px;
       font-size:13px; line-height:1.5; text-align:center;
       background:var(--alq); color:#fff; border-radius:var(--r-full)}
.fav-n:empty{display:none}

/* --- La capa de movimiento ---------------------------------------------- */
/* Cada sección entra por partes —titular, texto, fotografía— en vez de
   aparecer de golpe. La clase js-move la pone el JavaScript: si no corre, no
   hay nada escondido que pueda quedarse escondido. */
.js-move [data-rise]{opacity:0; transform:translateY(20px)}
.js-move [data-rise].vino{opacity:1; transform:none;
  transition:opacity .58s cubic-bezier(.32,.72,0,1), transform .58s cubic-bezier(.32,.72,0,1)}

/* La tarjeta responde al dedo y al puntero: se levanta un poco. */
.it{transition:transform .34s cubic-bezier(.32,.72,0,1)}
.it:hover{transform:translateY(-4px)}
.it:active{transform:translateY(-1px)}
.btn{transition:transform .18s cubic-bezier(.32,.72,0,1), background-color .22s ease, color .22s ease}
.btn:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .js-move [data-rise]{opacity:1; transform:none; transition:none}
  .it,.btn{transition:none}
  .it:hover,.it:active,.btn:active{transform:none}
}

/* Las pastillas de lo que decide: estrenar, amoblado, mascotas, piso. Van en
   el campo ocre rebajado, que es el color cálido de la casa, no un gris más. */
.it-chips{display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0}
.it-chips span{font-size:13px; line-height:1.45; padding:4px 11px;
               background:var(--tint); color:var(--ocre-ink); border-radius:var(--r-full)}

/* --- Filtros de seleccion multiple --------------------------------------- */
/* Un desplegable obliga a elegir UNA cosa, y casi ninguna pregunta de quien
   busca casa tiene una sola respuesta: "dos o tres dormitorios", "casa o
   departamento", "Miraflores, Barranco o Surco". Son casillas de HTML con
   aspecto de pastilla: se marcan varias y funcionan sin JavaScript. */
.chipset{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 0}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; justify-content:center;
           min-height:44px; padding:0 17px; font-size:15px; border-radius:var(--r-full);
           background:var(--surface); color:var(--ink);
           transition:background-color .2s ease, color .2s ease, transform .18s cubic-bezier(.32,.72,0,1)}
.chip-n span{min-width:52px; padding:0 13px}
.chip input:hover + span{background:#e0dad0}
.chip input:active + span{transform:scale(.96)}
.chip input:focus-visible + span{outline:2px solid var(--accent-tx); outline-offset:2px}
.chip.on span,.chip:has(input:checked) span{background:var(--accent); color:var(--accent-ink)}
/* Cuantos daria la casilla, antes de marcarla. La que daria cero queda apagada. */
.chip .cn{margin-left:7px; font-size:12px; font-weight:600; opacity:.6; font-variant-numeric:tabular-nums}
.chip.off input{cursor:not-allowed}
.chip.off span{opacity:.42}
.chip.off input:hover + span{background:var(--surface)}
.fg-lbl{display:block; font-size:14px; color:var(--muted); margin:12px 0 6px}

.cuenta{margin:16px 0 0}
.cuenta h5{font-size:15px; font-weight:600; margin:0 0 7px; color:var(--muted)}
.fg-n{display:inline-block; min-width:20px; margin-left:5px; padding:0 6px;
      font-size:13px; line-height:1.6; text-align:center; background:var(--ocre);
      color:var(--ocre-ink); border-radius:var(--r-full); font-weight:600}
.fg-n:empty{display:none}
.fg-ayuda{font-size:14px; color:var(--muted); margin:0 0 9px}

/* La lista de distritos, en un panel que se abre. */
.pickd > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
                 min-height:48px; padding:0 18px; font-size:15px;
                 background:var(--surface); color:var(--ink); border-radius:var(--r-full);
                 transition:background-color .2s ease}
.pickd > summary::-webkit-details-marker{display:none}
.pickd > summary::after{content:''; margin-left:auto; width:9px; height:9px;
                        border-right:2px solid currentColor; border-bottom:2px solid currentColor;
                        transform:rotate(45deg) translateY(-2px); transition:transform .25s ease}
.pickd[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.pickd > summary:hover{background:#e0dad0}
.pickd[open] > summary{margin-bottom:12px}
/* Cerrado, las 50 pastillas se quitan de la pagina del todo. El navegador las
   esconde con content-visibility, que CONSERVA la caja de maquetacion: los
   nombres de distrito seguian teniendo sitio y aparecian pegados al reloj del
   pie. Con display:none no queda caja ninguna. */
.pickd:not([open]) .chipset{display:none}

/* Lo que esta filtrado ahora, encima de los resultados: cada pastilla se quita
   sola, sin volver a abrir el panel. */
.fchips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.fchip{display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
       font-size:14px; text-decoration:none; border-radius:var(--r-full);
       background:var(--tint-v); color:var(--venta-tx);
       transition:background-color .2s ease, color .2s ease}
.fchip i{font-style:normal; font-size:16px; line-height:1; opacity:.6}
.fchip:hover{background:var(--venta); color:var(--accent-ink)}
.fchip:hover i{opacity:1}
.fchip-x{background:transparent; color:var(--muted); text-decoration:underline}
.fchip-x:hover{background:transparent; color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .chip span,.pick-i span,.fchip{transition:none}
  .chip input:active + span{transform:none}
}

/* El corazon de la ficha. */
.fav-f{display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
       padding:10px 18px 10px 15px; font-size:15px; font-family:inherit; cursor:pointer;
       background:var(--surface); color:var(--ink); border:0; border-radius:var(--r-full);
       transition:background-color .2s ease, color .2s ease, transform .18s cubic-bezier(.32,.72,0,1)}
.fav-f svg{width:20px; height:20px}
.fav-f:hover{background:#e0dad0}
.fav-f:active{transform:scale(.97)}
.fav-f.is-on{background:var(--alq); color:#fff}
.fav-f.is-on svg{fill:currentColor}
@media (prefers-reduced-motion:reduce){ .fav-f{transition:none} .fav-f:active{transform:none} }

/* ===========================================================================
   W. CAPA DE ESTILO — manda sobre todo lo anterior
   =========================================================================== */

/* --- Base: escala tipográfica a 16px --------------------------------------- */
.lede{font-size:18px; color:var(--ink-soft); max-width:46ch; margin:16px 0 0}
.note{font-size:15px; color:var(--muted)}
.say{font-size:clamp(28px,3vw,34px); line-height:1.15; max-width:none}
.sec{padding:clamp(56px,7vw,80px) 0}
.sec-tight{padding:clamp(45px,5vw,64px) 0}
.sec-alt{background:var(--surface)}
@supports (corner-shape: squircle){
  .finder,.inp,.sel,.pass,.it-pic,.stage,.strip button,.closing,.side,.seal,.dato,.facts div,.specs div{corner-shape:round}
}

/* --- Botones y campos ------------------------------------------------------ */
.btn{
  min-height:48px; padding:12px 24px; font-size:15px; font-weight:600; letter-spacing:.01em;
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:var(--r-s);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s cubic-bezier(.32,.72,0,1);
}
.btn:hover{background:var(--accent-h); border-color:var(--accent-h)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px; height:18px; flex:none}
.btn-line,.btn-ghost{background:#fff; color:var(--accent-tx); border:1px solid var(--accent)}
.btn-line:hover,.btn-ghost:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-sm{min-height:40px; padding:8px 16px; font-size:14px}
.btn-danger{background:var(--alq); border-color:var(--alq)}
.btn-danger:hover{background:var(--alq-tx); border-color:var(--alq-tx)}

.inp,.sel,.ta{
  min-height:48px; padding:11px 14px; font-family:var(--sans); font-size:15px; color:var(--ink);
  background-color:#fff; border:1px solid var(--line-in); border-radius:var(--r-s);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23222222' stroke-width='1.5'/%3E%3C/svg%3E"); padding-right:36px}
.inp::placeholder,.ta::placeholder{color:var(--faint)}
.inp:hover,.sel:hover,.ta:hover{border-color:#9fb3c0}
.inp:focus,.sel:focus,.ta:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,115,225,.16)}
.inp:focus-visible,.sel:focus-visible,.ta:focus-visible{outline:none}
.card-box .inp,.card-box .sel,.card-box .ta,
.split .card-box .inp,.split .card-box .sel,.split .card-box .ta{background-color:#fff}
.field > label,.fg-lbl{font-size:14px; font-weight:500; color:var(--ink-soft)}
.check{font-size:15px}
.err,.lead-err{font-size:15px}

/* --- Cabecera blanca ------------------------------------------------------- */
.head-bar{background:#fff; padding:0; border-bottom:1px solid var(--line); position:relative; z-index:30}
.head-in{min-height:84px; display:flex; align-items:center; gap:12px 28px; flex-wrap:nowrap}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--field); flex:none; font-family:var(--sans)}
.mark img{width:36px; height:36px; border-radius:8px}
.mark-t b{display:block; font-family:var(--serif); font-weight:600; font-size:25px; line-height:1; letter-spacing:-.015em; color:var(--field)}
.mark-t span{display:block; margin-top:3px; font-size:11px; line-height:1.2; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  position:relative; display:inline-flex; align-items:center; padding:10px 13px;
  font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap;
  border-radius:var(--r-s); transition:color .2s ease;
}
.nav a:hover{color:var(--accent-tx)}
.nav a::after{content:''; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.32,.72,0,1)}
.nav a:hover::after{transform:scaleX(1)}
.fav-n{background:var(--alq); border-radius:999px; font-weight:600; margin-left:6px}
.head-cta{
  flex:none; display:inline-flex; align-items:center; min-height:44px; margin:0; padding:10px 20px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600; text-decoration:none;
  border-radius:var(--r-s); transition:background-color .2s ease;
}
.head-cta:hover{background:var(--accent-h)}
@media (max-width:980px){
  .head-in{flex-wrap:wrap; min-height:0; padding-top:14px; gap:10px 16px}
  .mark{flex:1 1 auto}
  .nav{order:3; flex:1 1 100%; margin:0 calc(-1 * var(--m)); padding:0 calc(var(--m) - 13px) 4px;
       overflow-x:auto; scrollbar-width:none; border-top:1px solid var(--line-soft)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:12px 13px}
}
@media (max-width:420px){
  .mark-t span{display:none}
  .mark-t b{font-size:23px}
  .head-cta{padding:9px 14px; font-size:14px; min-height:42px}
}

/* --- Portada: foto + titular centrado + buscador con pestañas -------------- */
.hero{position:relative; isolation:isolate; color:#fff; text-align:center; overflow:hidden;
  padding:clamp(88px,11vw,150px) 0 clamp(150px,14vw,190px); background:var(--field)}
.hero-pic{position:absolute; inset:0; z-index:-2}
.hero-pic img{width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.03)} to{transform:scale(1.09) translate3d(-1%,-.6%,0)}}
.hero::before{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(0,26,51,.62) 0%,rgba(0,26,51,.48) 45%,rgba(0,26,51,.72) 100%)}
.hero-k{margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#d6e6f5}
.hero-t{font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(40px,5.6vw,68px); line-height:1.04; letter-spacing:-.02em; margin:0 auto; max-width:16ch}
.hero-sub{margin:18px auto 0; max-width:44ch; font-size:clamp(17px,1.6vw,19px); color:#e6eef5}

.finder-wrap{position:relative; z-index:3; margin-top:calc(-1 * clamp(98px,9vw,112px))}
.finder{background:transparent; padding:0; border-radius:0; color:var(--ink)}
.ops.tabs{display:flex; gap:4px; width:auto; margin:0; padding:0; background:transparent; border-radius:0}
.ops.tabs span{
  min-width:128px; padding:13px 26px; font-size:15px; font-weight:600; color:#fff;
  background:rgba(0,37,71,.86); border-radius:var(--r-m) var(--r-m) 0 0; border-top:3px solid transparent;
}
.ops.tabs label:hover span{background:var(--field)}
.ops.tabs input:checked+span{background:#fff; color:var(--ink); border-top-color:var(--venta)}
.ops.tabs input[value="alquiler"]:checked+span{background:#fff; color:var(--ink); border-top-color:var(--alq)}
.ops.tabs input:focus-visible+span{outline:2px solid #fff; outline-offset:-5px; box-shadow:inset 0 0 0 4px var(--accent)}
.finder-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; gap:14px; align-items:end;
  background:#fff; padding:26px 28px 28px; border-radius:0 var(--r-m) var(--r-m) var(--r-m);
  box-shadow:0 -1px 19px rgba(7,152,255,.09), 0 18px 40px rgba(0,26,51,.10);
}
.ff{display:grid; gap:7px; min-width:0}
.ff label{font-size:14px; font-weight:600; color:var(--ink)}
.finder-go{min-width:190px; white-space:nowrap}
@media (max-width:980px){
  .finder-row{grid-template-columns:1fr 1fr}
  .ff-q{grid-column:1/-1}
  .finder-go{grid-column:1/-1}
}
@media (max-width:620px){
  .hero{padding:64px 0 120px}
  .hero-pic img{animation:none; object-position:30% 50%}
  .finder-wrap{margin-top:-82px}
  .ops.tabs span{min-width:0; padding:12px 22px}
  .ops.tabs label{flex:1 1 0}
  .finder-row{grid-template-columns:1fr; padding:20px 18px 20px; gap:12px}
  .finder-go{min-width:0; width:100%}
}

/* --- Encabezado de sección ------------------------------------------------- */
.ul-h{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; margin:0 0 34px}
#ultimos{padding-top:clamp(64px,8vw,96px)}

/* --- Tarjeta de inmueble --------------------------------------------------- */
.uneven{grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px}
.uneven > .it,.uneven > .it:nth-child(6n+1),.uneven > .it:nth-child(6n+2),
.uneven > .it:nth-child(6n+3),.uneven > .it:nth-child(6n+4){grid-column:auto}
.it{background:#fff; border-radius:var(--r-m); overflow:hidden; box-shadow:var(--sh);
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.32,.72,0,1), box-shadow .3s ease}
.it:hover{transform:translateY(-2px); box-shadow:var(--sh-h)}
.it:active{transform:translateY(0)}
.it-go{border-radius:var(--r-m)}
.it-pic,.it:nth-child(6n+1) .it-pic,.it:nth-child(6n+4) .it-pic{aspect-ratio:4/3; border-radius:var(--r-m) var(--r-m) 0 0; background:#e9eef2}
.it:hover .it-pic img{transform:scale(1.035)}
.it-sellos{top:14px; left:14px; gap:6px}
.it-tag,.it-new{font-size:12.5px; font-weight:600; line-height:1; padding:7px 10px; border-radius:var(--r-s); letter-spacing:.02em}
.it-tag{background:var(--venta); color:#fff}
.it-tag.is-alq{background:var(--alq)}
.it-new{background:var(--ocre); color:var(--ocre-ink)}
.it-fav{top:12px; right:12px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 2px 8px rgba(0,26,51,.14)}
.it-fav.is-on{background:var(--alq); color:#fff}
.it-n{border-radius:var(--r-s); background:rgba(0,26,51,.72)}
.it-nav button{border-radius:50%; background:rgba(255,255,255,.94)}
.it-dots i{border-radius:999px}
.it-dots i.on{border-radius:999px}
.it-b{flex:1 1 auto; display:flex; flex-direction:column; padding:20px 22px 18px}
.it-pr{order:1; font-family:var(--sans); font-size:20px; font-weight:600; line-height:1.2; color:var(--accent); letter-spacing:-.01em}
.it-pr .per{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted)}
.it-m2{font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--muted); margin-top:4px; letter-spacing:0}
.it-t{order:2; margin:10px 0 0; font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.25; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.it:hover .it-t{text-decoration:none; color:var(--accent-tx)}
.it-d{order:3; display:flex; align-items:center; gap:6px; margin:8px 0 0; font-size:14px; color:var(--muted)}
.it-d::before{content:''; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.it-chips{order:4; gap:6px; margin:12px 0 0}
.it-chips span{font-size:12.5px; font-weight:500; padding:4px 9px; background:var(--tint); color:var(--accent-tx); border-radius:var(--r-s)}
.it-b::after{content:''; order:4; flex:1 1 auto}
.it-s{order:5; margin:16px -22px -18px; padding:13px 22px 15px; border-top:1px solid var(--line);
  gap:6px 16px; font-size:14px; color:var(--ink-soft)}
.it-s svg{width:17px; height:17px; color:var(--faint)}
.it-s b{color:var(--ink)}
@media (max-width:1080px){ .uneven{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} }
@media (max-width:620px){ .uneven{grid-template-columns:minmax(0,1fr); gap:20px} }

/* --- Presupuesto + tabla --------------------------------------------------- */
.push{gap:clamp(30px,5vw,72px)}
.budget{margin:30px 0 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:26px 28px; box-shadow:var(--sh)}
.budget-n{font-family:var(--serif); font-weight:500; font-size:clamp(34px,3.6vw,46px); color:var(--venta-tx)}
.ops{background:#f1f5f8; border-radius:var(--r-s); padding:4px; gap:4px}
.ops span{font-size:15px; font-weight:500; padding:10px 8px; border-radius:var(--r-s); color:var(--ink-soft)}
.ops input:checked+span{background:var(--venta); color:#fff}
.ops input[value="alquiler"]:checked+span{background:var(--alq)}
.ops-sm{width:230px}
.budget input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--line)}
.budget input[type=range]::-moz-range-track{height:4px; background:var(--line)}
.budget input[type=range]::-webkit-slider-thumb{width:24px; height:24px; margin-top:-10px; box-shadow:0 0 0 5px rgba(0,115,225,.16)}
.budget input[type=range]::-moz-range-thumb{width:24px; height:24px; box-shadow:0 0 0 5px rgba(0,115,225,.16)}
.budget-out{font-size:17px; color:var(--ink)}
.budget .note{font-size:14px}
.tcap{font-size:15px; color:var(--muted)}
.tbl{font-size:15px}
.tbl th{font-family:var(--sans); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding-bottom:10px; border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line-soft)}
.tbl a{font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink)}
.tbl a:hover{color:var(--accent-tx)}
.tbl .sub{font-family:var(--sans); font-size:13.5px; color:var(--muted)}
.tbl .pr{font-size:16px; font-weight:600; color:var(--ink)}
.tbl .m2{font-size:13px}
.tbl tbody tr:hover{background:var(--tint)}
.tbl tr[data-fit="1"]{background:var(--tint-v)}
.tbl tr[data-fit="1"]:hover{background:#e3f0fd}
.tbl tr[data-op="alquiler"][data-fit="1"]:hover{background:#f8e2d9}
.tbl-more{margin-top:20px}
.tbl-more a{color:var(--accent-tx); font-weight:600; text-decoration:none}
.tbl-more a:hover{text-decoration:underline; text-underline-offset:3px}

/* --- Quien publica (crema) ------------------------------------------------- */
.facts{gap:0; background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); overflow:hidden; margin-top:30px}
.facts div,.facts div:first-child,.facts div:last-child{background:#fff; border-radius:0; padding:15px 22px; border-bottom:1px solid var(--line-soft)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:15px; color:var(--ink-soft)}
.facts dd{font-family:var(--sans); font-size:17px; font-weight:600; color:var(--accent-tx)}
.pass{border-radius:var(--r-m); box-shadow:var(--sh)}
.pass figcaption{background:linear-gradient(180deg,transparent,rgba(0,26,51,.82)); color:#fff; font-size:14px; padding:40px 20px 16px}

/* --- Cierre ---------------------------------------------------------------- */
.closing{background:var(--field-2); border-radius:var(--r-m); padding:clamp(36px,5vw,60px) clamp(24px,5vw,64px); color:var(--field-ink);
  background-image:radial-gradient(circle at 100% 0,rgba(0,115,225,.35),transparent 55%)}
.closing h2{color:#fff; font-size:clamp(28px,3vw,36px); line-height:1.12}
.closing p{color:#c6d4df; font-size:16px}
.closing .btn{background:var(--accent); color:#fff; border-color:var(--accent)}
.closing .btn:hover{background:#fff; color:var(--accent-tx); border-color:#fff}

/* --- Pie oscuro ------------------------------------------------------------ */
.foot{background:var(--field); color:var(--field-ink); border-radius:0; padding:clamp(48px,6vw,72px) 0 28px}
.foot-now{padding-bottom:clamp(32px,4vw,48px); margin-bottom:clamp(32px,4vw,44px); border-bottom:1px solid rgba(255,255,255,.1)}
.foot-now-k{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#b9c8d4}
.dot{background:var(--accent)}
.foot-clock{font-family:var(--serif); font-size:clamp(34px,3.6vw,46px); color:#fff}
.foot-now-t{font-size:14px; color:#a9bac7}
.foot h3{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff}
.foot h3::before{background:var(--accent); width:18px; height:2px}
.foot-cols a{font-size:15px; color:#b9c8d4}
.foot-cols a:hover,.foot-cols a:focus-visible{color:#fff}
.foot-end{margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.1)}
.foot-end>p,.foot-cred summary,.credits{font-size:13.5px; color:#a9bac7}
.foot-cred summary::after{color:var(--accent)}
.credits a{color:#c9d6e0}
.credits a:hover{color:#fff}

/* --- Páginas interiores sobre crema --------------------------------------- */
body:has(.lay),body:has(.file),body:has(.card-box),body:has(.panel-head),body:has(.prof){background:var(--surface)}
.crumbs{font-size:13.5px; color:var(--muted); padding:22px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-tx)}

/* Buscador */
.shead{background:#fff; border-bottom:1px solid var(--line); padding:clamp(28px,3.4vw,44px) 0}
.shead h1{font-family:var(--serif); font-size:clamp(30px,3.4vw,38px); line-height:1.12; letter-spacing:-.015em; max-width:none; color:var(--ink)}
.shead h1[data-op="alquiler"]{color:var(--ink)}
.shead p{font-size:16px; color:var(--muted); margin-top:10px}
.lay{grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:30px; padding-block:34px clamp(56px,7vw,80px)}
.filters{background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:24px 22px; gap:20px; top:20px}
.filters h4{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); margin:0 0 9px}
.filters .ops{margin:0}
.fg + .fg{border-top:1px solid var(--line-soft); padding-top:18px}
.fg-ayuda{font-size:13.5px}
.fg-n{border-radius:999px; background:var(--accent); color:#fff}
.chipset{gap:6px}
.chip span{min-height:40px; padding:0 13px; font-size:14px; background:#fff; color:var(--ink); border:1px solid var(--line-in); border-radius:var(--r-s)}
.chip input:hover + span{background:var(--tint); border-color:var(--accent)}
.chip.on span,.chip:has(input:checked) span{background:var(--accent); color:#fff; border-color:var(--accent)}
.chip.off input:hover + span{background:#fff; border-color:var(--line-in)}
.chip .cn{opacity:.75}
.pickd > summary{min-height:44px; background:#fff; border:1px solid var(--line-in); border-radius:var(--r-s); font-size:14px}
.pickd > summary:hover{background:var(--tint); border-color:var(--accent)}
.cuenta h5{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft)}
.filters .btn-line{margin-top:-10px}
.results{gap:24px}
.res-top{background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:14px 18px; align-items:center}
.res-top p{font-size:15px}
.res-top b{font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink)}
.fchips{margin:0}
.fchip{border-radius:var(--r-s); font-size:13.5px; background:#fff; color:var(--accent-tx); border:1px solid var(--line-in); padding:6px 12px}
.fchip:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.fchip-x{border-color:transparent; background:transparent}
.pager a,.pager span{min-width:44px; min-height:44px; background:#fff; border:1px solid var(--line); border-radius:var(--r-s); font-size:15px; font-weight:500}
.pager .on{background:var(--accent); border-color:var(--accent); color:#fff}
.pager a:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.empty h2{font-size:clamp(26px,3vw,34px)}
@media (max-width:1080px){
  .lay .filters{padding:24px 22px; margin-bottom:clamp(56px,10vw,96px)}
}

/* Ficha */
.file{grid-template-columns:minmax(0,1fr) minmax(0,370px); gap:30px; padding-block:22px clamp(56px,7vw,80px)}
.file > div:first-child{display:flex; flex-direction:column; gap:30px; min-width:0}
.file .blk{padding:0}
.file .blk:has(> h1){order:-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 30px; align-items:start}
.file .blk > h1{grid-column:1; font-family:var(--serif); font-size:clamp(28px,3vw,34px); font-weight:500; line-height:1.15; letter-spacing:-.015em}
.file .blk:has(> h1) > .note{grid-column:1; grid-row:2; margin:0!important; font-size:15px; display:flex; gap:6px; align-items:center}
.file .blk:has(> h1) > .note::before{content:''; width:14px; height:14px; flex:none; background:var(--faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.file .price{grid-column:2; grid-row:1; margin:0; text-align:right; font-family:var(--sans); font-size:30px; font-weight:600; line-height:1.1; color:var(--accent); letter-spacing:-.01em; white-space:nowrap}
.file .price .per{font-family:var(--sans); font-size:16px; font-weight:500; color:var(--accent-tx)}
.file .price .m2{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted); margin:6px 0 0 auto; white-space:normal; max-width:26ch}
.file .fav-f{grid-column:2; grid-row:2; justify-self:end; margin:0; background:#fff; border:1px solid var(--line-in); border-radius:var(--r-s); font-size:14px; font-weight:500; padding:8px 14px 8px 12px}
.file .fav-f:hover{background:var(--tint); border-color:var(--accent)}
.file .fav-f.is-on{background:var(--alq); border-color:var(--alq); color:#fff}
.stage{border-radius:var(--r-m); background:#e9eef2; box-shadow:var(--sh)}
.strip{grid-auto-columns:120px; gap:10px; margin-top:12px}
.strip button{border-radius:var(--r-s)}
.strip button[aria-current=true]{outline:2px solid var(--accent); outline-offset:2px}
.specs{margin:0; background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:26px 30px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px 24px}
.specs div{background:transparent; padding:0 0 0 14px; border-radius:0; border-left:2px solid var(--line)}
.specs dt{font-size:13px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.specs dd{font-family:var(--sans); font-size:18px; font-weight:600; color:var(--ink); margin-top:3px}
.file .blk:has(> .desc){background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:30px}
.blk h2{font-family:var(--serif); font-size:clamp(24px,2.4vw,28px); margin:0 0 16px}
.desc{font-size:16px; color:var(--ink-soft); max-width:70ch}
.side{background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:30px; top:20px}
.who .av,.prof .av{background:var(--field-2); font-family:var(--serif)}
.who .nm{font-family:var(--serif); font-size:20px; font-weight:500}
.who .rl{font-size:14px}
.who-mas{font-size:15px; font-weight:600; color:var(--accent-tx); border-bottom:0; text-decoration:underline; text-underline-offset:3px}
.seal{font-size:14.5px; background:var(--tint); color:var(--ink-soft); border-left:3px solid var(--accent); border-radius:var(--r-s)}
.lead{margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft)}
.lead-say{font-size:15px}
.lead .inp{margin-bottom:10px}
.lead-legal{font-size:13px}
.dato{background:var(--surface); border-radius:var(--r-s)}
.dato-tel{font-family:var(--sans); font-weight:600; font-size:24px}
.dato-mail,.dato-perfil{font-size:15px}
.cod{font-size:13.5px}
@media (max-width:1080px){ .side{position:static} }
@media (max-width:620px){
  .file .blk:has(> h1){grid-template-columns:minmax(0,1fr)}
  .file .blk > h1,.file .blk:has(> h1) > .note,.file .price,.file .fav-f{grid-column:1; grid-row:auto}
  .file .price{text-align:left; margin-top:6px}
  .file .fav-f{justify-self:start}
  .strip{grid-auto-columns:92px}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr)); padding:22px 20px}
  .file .blk:has(> .desc),.side{padding:22px 20px}
}
.bar{background:#fff; box-shadow:0 -8px 24px rgba(0,26,51,.12)}
.bar-p b{font-family:var(--sans); font-weight:600; color:var(--accent)}

/* Anunciante */
.prof h1{font-family:var(--serif); font-size:clamp(32px,4vw,44px)}
.facts-row div{background:#fff; box-shadow:var(--sh); border-radius:var(--r-m)}
.facts-row dd{font-family:var(--sans); font-weight:600; font-size:clamp(26px,2.4vw,32px); color:var(--accent-tx)}
.stat{background:#fff; box-shadow:var(--sh); border-radius:var(--r-m)}
.stat dd{font-family:var(--sans); font-weight:600}

/* Formularios, panel, legales */
.card-box{background:#fff; border-radius:var(--r-m); box-shadow:var(--sh); padding:clamp(24px,3vw,40px)}
.card-box h1,.card-box h2,.panel-head h1,.panel-head h2{font-family:var(--serif); font-size:clamp(28px,3vw,34px); line-height:1.12}
.card-box > p,.panel-head p{font-size:15px; color:var(--muted)}
.split{background:#fff}
.split .card-box{box-shadow:none}
.split .card-box .inp,.split .card-box .sel,.split .card-box .ta{background-color:#fff}
.pic-full figcaption,.pic-wide figcaption{background:linear-gradient(180deg,transparent,rgba(0,26,51,.85)); padding-top:36px; font-size:13.5px; color:#e6eef5}
.pic-full figcaption b,.pic-wide figcaption b{font-size:15px; color:#fff}
.hint{font-size:15px}
.flash{font-size:15px; border-radius:var(--r-s); border-left:3px solid var(--accent)}
.badge-est{border-radius:var(--r-s); font-size:13px; font-weight:500}
.prose{font-size:17px; color:var(--ink-soft)}
.prose h1{font-family:var(--serif); font-size:clamp(32px,4vw,44px); line-height:1.1}
.prose h2{font-family:var(--serif); font-size:clamp(22px,2.4vw,28px)}
.tira{padding:clamp(56px,7vw,80px) 0; background:var(--surface)}
.tira h2{font-family:var(--serif); font-size:clamp(28px,3vw,34px); line-height:1.15}
.tira-g img{border-radius:var(--r-m); aspect-ratio:4/3}
.tira-g figcaption{font-size:13.5px; opacity:1; color:var(--muted)}
.tira-g figcaption b{color:var(--ink)}
.fav-f{border-radius:var(--r-s); font-size:14px; font-weight:500}
.skip:focus{background:var(--field); color:#fff; border-radius:var(--r-s)}

@media (prefers-reduced-motion:reduce){
  .hero-pic img{animation:none}
  .it:hover{transform:none}
  .nav a::after{transition:none}
}

/* Con barra lateral, tres tarjetas quedaban a 270px y la fila de datos se
   partía en tres líneas: el listado va a dos columnas, como el tema. */
.results .uneven{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){ .results .uneven{grid-template-columns:minmax(0,1fr)} }

/* La capa redefine las rejillas de ficha y buscador: hay que repetir aquí su
   paso a una columna, o el teléfono hereda las dos columnas de escritorio. */
@media (max-width:1080px){
  .file,.lay{grid-template-columns:minmax(0,1fr)}
}
/* La navegación del teléfono se desliza: el borde derecho se funde para que
   se lea que hay más. */
@media (max-width:980px){
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
@media (max-width:620px){
  .file .price{order:1}
  .file .fav-f{order:2}
  .file .price .m2{margin-left:0; max-width:none}
}
/* Acceso y registro en el teléfono: primero el formulario, que es a lo que
   se viene; la fotografía cierra la página en vez de empujarlo hacia abajo. */
@media (max-width:860px){
  .split .form{order:-1; padding-top:28px}
  .split-pic{aspect-ratio:16/9; margin:8px var(--m) 56px}
}
/* Guardados y perfil: el contenido bajo el encabezado de página respira
   igual que el buscador, y va sobre crema como el resto de interiores. */
body:has([data-guardados]){background:var(--surface)}
.shead + .wrap:not(.lay){padding-top:34px; padding-bottom:clamp(56px,7vw,80px)}

/* ===========================================================================
   BUSCADOR: BARRA DE FILTROS SUPERIOR
   Sustituye a la columna lateral. Mismas piezas de siempre (chip, ops, inp, sel,
   btn, fg-n, pickd) y mismas variables; solo cambia la disposición. Escritorio:
   barra pegajosa con desplegables anclados y "Más filtros" en ventana centrada.
   Teléfono: botón "Filtros" + pastillas deslizables, y una hoja a pantalla
   completa. Sin JavaScript, la plantilla añade (noscript) las reglas que dejan
   todo en línea.
   =========================================================================== */
.fbar{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line)}
.fbar-in{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding-block:12px}
.fb,.fb-row,.fb-sheet,.fb-sh-body{display:contents}
.fb-sh-head,.fb-sh-foot{display:none}

.fb-btn{display:inline-flex; align-items:center; gap:8px; flex:none; min-height:44px; padding:0 14px;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap;
  background:#fff; border:1px solid var(--line-in); border-radius:var(--r-s); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease}
.fb-btn::after{content:''; width:7px; height:7px; margin:0 1px 0 4px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease}
.fb-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.fb-all::after{content:none}
.fb-btn:hover{background:var(--tint); border-color:var(--accent)}
.fb-btn.is-on{background:var(--tint); border-color:var(--accent); color:var(--accent-tx)}
.fb-btn[aria-expanded="true"]{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,115,225,.16)}
.fb-btn:focus-visible{outline:2px solid var(--accent-tx); outline-offset:2px}
.fb-btn .fg-n{margin-left:0}
.fb-btn.fb-all,.fb-btn.fb-t-op{display:none}
.fb-bt{max-width:22ch; overflow:hidden; text-overflow:ellipsis}

/* Operación: el segmento Comprar | Alquilar va en la propia barra. */
.fp-op{order:-1; display:block}
.fp-op .fp-h{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.fp-op .ops{width:224px; margin:0}
.fp-op .ops{padding:4px}
.fp-op .ops span{display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 8px}
.fbar .sortf{order:1; flex:none; margin-left:auto}
.fbar .sortf .sel{min-width:0; width:auto; min-height:44px; font-size:14px}

/* Desplegable anclado (la posición horizontal la pone ubicaria.js). */
.fp{display:none; position:absolute; top:calc(100% - 6px); left:var(--fp-x,0); z-index:5;
  width:min(380px,calc(100vw - 2 * var(--m))); padding:18px 18px 0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-h)}
.fp.fp-op{display:block; position:static; width:auto; padding:0; border:0; box-shadow:none; background:none}
.fp.is-open{display:block; animation:fb-in .16s ease-out}
.fp-dis{width:min(600px,calc(100vw - 2 * var(--m)))}
/* El número de una pastilla marcada, blanco entero sobre el azul (AA). */
.fb .chip.on .cn,.fb .chip:has(input:checked) .cn{opacity:1}
.fp-h{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); margin:0 0 12px}
.fp .fg-ayuda{margin:-4px 0 12px}
.fp-sub{margin:12px 0 8px !important}
.fp-scroll{max-height:min(46vh,330px); overflow-y:auto; overscroll-behavior:contain; padding:2px; margin:0 -2px}
.fp .fg-lbl{margin:12px 0 6px}
.fp .fg-lbl:first-of-type{margin-top:0}
.fp .sel,.fp .inp{width:100%}
.fp .two{grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.fp-mas-in .two{margin-top:0}
.fp-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:18px -18px 0; padding:12px 18px;
  border-top:1px solid var(--line)}
.fp-foot .btn{flex:none}

/* Más filtros: ventana centrada con cabecera y pie fijos. */
.fp.fp-mas{position:fixed; top:50%; left:50%; z-index:60; width:min(760px,calc(100vw - 48px)); max-height:min(86vh,880px);
  padding:0; transform:translate(-50%,-50%); flex-direction:column}
.fp.fp-mas.is-open{display:flex; animation:fb-pop .18s ease-out}
.fp-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 24px; border-bottom:1px solid var(--line)}
.fp-top .fp-h{margin:0; font-size:17px}
.fp-mas-in{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:6px 24px 24px}
.fp-mas-in .cuenta{margin:0; padding:18px 0; border-bottom:1px solid var(--line-soft)}
.fp-mas-in .cuenta:last-child{border-bottom:0}
.fp-mas-in .cuenta > .inp{width:100%}
.fp-mas-in .fg-lbl{margin:0 0 6px}
.fp-more{margin-top:10px}
.fp-more > summary{min-height:44px; width:max-content; gap:10px}
.fp.fp-mas .fp-foot{margin:0; padding:14px 24px}
.fb-x{display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0;
  color:var(--ink); background:transparent; border:0; border-radius:var(--r-s); cursor:pointer; transition:background-color .2s ease}
.fb-x:hover{background:var(--tint)}
.fb-x:focus-visible{outline:2px solid var(--accent-tx); outline-offset:2px}
.fb-veil{position:fixed; inset:0; z-index:50; background:rgba(0,26,51,.42); animation:fb-fade .18s ease-out}
html.fb-lock,html.fb-lock body{overflow:hidden}

@keyframes fb-in{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@keyframes fb-pop{from{opacity:0; transform:translate(-50%,-48%)}to{opacity:1; transform:translate(-50%,-50%)}}
@keyframes fb-fade{from{opacity:0}to{opacity:1}}
@keyframes fb-up{from{opacity:.6; transform:translateY(24px)}to{opacity:1; transform:none}}

@media (min-width:1024px) and (max-width:1279.98px){
  .fp-op .ops{width:168px}
  .fb-btn{padding:0 12px}
  .fb-bt{max-width:13ch}
  .fbar .sortf .sel{max-width:160px}
  .fbar-in{column-gap:8px}
}

/* Resultados a todo el ancho. */
.lay.lay-full{display:block}
.lay-full .results{gap:20px}
.lay-full .res-top{background:none; box-shadow:none; padding:0}
.lay-full .uneven{grid-template-columns:repeat(3,minmax(0,1fr))}

/* --- Teléfono y tableta: botón "Filtros" + pastillas, y hoja completa ----- */
@media (max-width:1023.98px){
  .fbar-in{gap:8px; padding-block:10px}
  .fb-btn.fb-all{display:inline-flex; padding:0 14px}
  .fbar-in{flex-wrap:nowrap}
  .fb-row{display:flex; flex:1 1 auto; min-width:0; gap:8px; overflow-x:auto; padding:3px; margin:-3px;
    scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent); mask-image:linear-gradient(90deg,#000 84%,transparent)}
  .fb-row::-webkit-scrollbar{display:none}
  .fb-row .fb-btn{border-radius:999px; padding:0 14px}
  .fb-row .fb-btn:last-of-type{margin-right:24px}
  .fb-btn.fb-t-op{display:inline-flex; order:1}
  .fb-row > [data-fb-open="fp-tipo"]{order:2}
  .fb-t-precio{order:3}
  .fb-t-dorm{order:4}
  .fb-t-dis{order:5}
  .fb-t-mas{display:none}
  .fp-op .fp-h{position:static; width:auto; height:auto; clip:auto; overflow:visible; white-space:normal}
  .fp-op .ops{width:100%}
  .fp-op .ops span{min-height:44px}

  /* Ordenar: un icono que abre el selector nativo del teléfono. */
  .fbar .sortf .sel{width:44px; height:44px; padding:0; color:transparent; text-indent:-999px;
    background-position:center; background-size:20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 3v14M6 17l-3-3M6 17l3-3M14 17V3M14 3l-3 3M14 3l3 3' fill='none' stroke='%23222222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .fbar .sortf .sel option{color:var(--ink)}

  .fb-sheet{display:none; position:fixed; inset:0; z-index:60; flex-direction:column; background:#fff}
  .fb-sheet.is-open{display:flex; animation:fb-up .2s cubic-bezier(.32,.72,0,1)}
  .fb-sh-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:calc(8px + env(safe-area-inset-top,0px)) calc(var(--m) - 10px) 8px var(--m); border-bottom:1px solid var(--line)}
  .fb-sh-t{margin:0; font-family:var(--sans); font-size:17px; font-weight:600; color:var(--ink)}
  .fb-sh-body{display:flex; flex-direction:column; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--m)}
  .fb-sh-foot{display:flex; gap:10px; padding:12px var(--m) calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff; border-top:1px solid var(--line)}
  .fb-sh-foot .btn-line{flex:none}
  .fb-sh-foot button{flex:1 1 auto}

  .fp,.fp.fp-dis,.fp.fp-mas,.fp.fp-op{display:block; position:static; width:auto; max-height:none; transform:none;
    padding:24px 0; background:none; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; box-shadow:none; animation:none}
  /* El teléfono pide primero lo corto: la lista de 50 distritos va al final. */
  .fp-op{order:1} #fp-tipo{order:2} .fp-precio{order:3} .fp-dorm{order:4} .fp-dis{order:5} .fp-mas{order:6}
  .fp.fp-mas{border-bottom:0}
  .fb-sheet[data-solo] .fp:not(.is-solo){display:none}
  .fb-sheet[data-solo] .fp.is-solo{border-bottom:0}
  .fb-sheet[data-solo] .fp-h{display:none}
  .fp-h{font-size:16px; margin-bottom:14px}
  .fp-foot{display:none}
  .fp-top{padding:0; border:0}
  .fp-top .fb-x{display:none}
  .fp-mas-in{overflow:visible; padding:0}
  .fp-mas-in .cuenta{padding:20px 0}
  .fp-mas-in .cuenta:first-child{padding-top:6px}
  .fp-scroll{max-height:none; overflow:visible}
  .fb-sheet .chip span{min-height:44px}
  .fb-sheet .pickd > summary{min-height:44px}

  .lay-full .uneven{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .lay-full .uneven{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:400px){
  .fbar-in,.fb-row{gap:6px}
  .fb-row .fb-btn,.fb-btn.fb-all{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  .fp.is-open,.fp.fp-mas.is-open,.fb-sheet.is-open,.fb-veil{animation:none}
  .fb-btn,.fb-btn::after,.fb-x{transition:none}
}

/* Aviso sin fotos: img_placeholder() nunca tuvo estilo y su "Sin foto" quedaba
   suelto en la esquina, debajo de las etiquetas. Ahora llena el hueco de la foto
   con el mismo gris del fondo y centra el texto. */
.ph{display:grid; place-items:center; width:100%; height:100%; min-height:64px;
  background:#e9eef2; color:var(--muted); font-size:13px; letter-spacing:.02em}
.it-pic .ph{position:absolute; inset:0}
.it-pic .ph span{margin-top:28px}

/* Bloque "Anunciante" (2026-10-29): etiqueta "Destacado" en la tarjeta, mismo
   patrón que .it-tag/.it-new pero con su propio color (navy del header) para
   no confundirla con "Alquiler" (azul) ni con "Nuevo" (ocre). Reutilizada tal
   cual (con display:inline-block;position:static vía estilo en línea) en
   /cuenta/ y /cuenta/destacar, fuera de la tarjeta de la rejilla. */
.it-dest{font-size:12.5px; font-weight:600; line-height:1; padding:7px 10px; border-radius:var(--r-s);
  letter-spacing:.02em; background:var(--field); color:#fff}

/* cuenta/estadisticas.php (2026-10-29): en mobile la regla sitewide
   ".tbl thead,.tbl .hide-s{display:none}" oculta el encabezado y cada <td>
   se apila como bloque. En las demas tablas del sitio (interesados,
   cuenta/) el resto de la fila (nombre, badges, titulo) deja claro que es
   cada dato; aqui las 3 columnas son numeros sueltos sin contexto
   ("6 / 0 / 0"). .lbl-s repone la etiqueta SOLO en mobile como texto antes
   del valor — .n ya alinea a la derecha, asi que "Vistas: 6" queda igual
   de legible que antes. */
.lbl-s{display:none}
@media (max-width:760px){
  .lbl-s{display:inline; font-weight:600; color:var(--muted)}
}

/* Correccion (2026-10-29): ".tbl a{font-family:serif;font-size:19px;
   display:block;...}" esta pensado para el titulo del aviso en la columna
   "Aviso" de las .tbl (mismo selector en el CSS base, misma intencion), pero
   su especificidad (.tbl a = clase+etiqueta) le gana a ".btn" (una sola
   clase), asi que tambien alcanzaba a los <a class="btn ..."> de
   .tbl-acts (Editar/Fotos/Estadisticas/Destacar mas/Eliminar en /cuenta/ y
   /admin/, WhatsApp/Llamar en /cuenta/interesados): quedaban en serif,
   display:block (por eso se apilaban en vez de ir en una fila) y heredando
   el text-align:right de ".tbl td:last-child" — en el caso de "Eliminar"
   (.btn-danger) ademas con el color de texto por defecto (ink) en vez de
   blanco, ilegible sobre el fondo rojo. Los <button class="btn"> (Pausar,
   Publicar, Subir al inicio) nunca lo sufrieron porque el selector ".tbl a"
   solo matchea <a>. Se restaura el aspecto normal de boton (igual que
   Pausar) con un selector mas especifico que ".tbl a", sin tocar ".tbl a"
   en si (that sigue sirviendo para los titulos) ni ".btn" en si. */
.tbl a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.01em;
  line-height:normal; text-align:center;
}
.tbl a.btn.btn-ghost{color:var(--accent-tx)}
.tbl a.btn.btn-ghost:hover{color:#fff}
.tbl a.btn.btn-danger{color:#fff}

/* cuenta/estadisticas.php (2026-10-29): el grafico de barras es un <svg
   viewBox="0 0 640 220"> con preserveAspectRatio="none" (ver
   ub_svg_barras_30d en anunciante.php). En desktop width:100%;height:auto
   mantiene la proporcion original del viewBox (se ve igual que antes). En
   mobile se fuerza una altura fija: al no coincidir con la proporcion del
   viewBox y con preserveAspectRatio="none", las barras se estiran en
   vertical y se leen mejor en una pantalla angosta. */
.ub-chart{display:block; width:100%; height:auto}
@media (max-width:760px){
  .ub-chart{height:160px}
}

/* cuenta/index.php y admin/index.php (2026-10-29), screenshot movil 390px:
   ".tbl-acts{white-space:nowrap}" (CSS base) esta pensado para desktop, para
   que el grupo de botones no rompa linea de forma rara. Antes del fix de
   ".tbl a.btn" de mas arriba esto no se notaba porque ".tbl a{display:block}"
   forzaba a CADA <a class="btn"> a su propia linea de todos modos (pisando
   el nowrap). Ahora que ".tbl a.btn" es inline-flex (correcto), el nowrap
   hace que varios botones <a> SEGUIDOS sin un <form> de por medio (p.ej.
   Editar+Fotos+Estadisticas+Eliminar en un aviso "en revision", que no
   tiene Pausar/Publicar/Destacar) intenten quedar en una sola linea y no
   quepan en 390px: "Eliminar" terminaba cortado a "Elimin" fuera del
   viewport. En mobile no hace falta esa linea unica (cada boton ya tiene
   su propio margen via ".tbl-acts .btn"), asi que se permite el wrap
   normal; los botones envueltos en <form> (Pausar/Publicar/Subir al
   inicio) siguen en su propia linea igual que antes, sin cambios. */
@media (max-width:760px){
  .tbl-acts{white-space:normal}
}