/* ═══════════════════════════════════════════════════════════════════════════
   TANAH · sistema de diseño "arena y océano"
   Sin dependencias, sin framework.

   La lima de marca tiene DOS papeles y no hay que mezclarlos:
     --marca  rellena   (botones, chapas, el pin del mapa)  → sobre ella escribe --sobre-lima
     --lima   escribe   (el dinero, los enlaces)            → en claro es un verde legible

   Un solo acento (lima) reservado al dinero. Agua para los datos de obra.
   Todo sale de tokens: ninguna regla de más abajo lleva un color a mano.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Paleta "media luz" (elegida el 8-ago) ────────────────────────────────
     Clara pero con cuerpo: el fondo NO es blanco, así las tarjetas se
     despegan solas sin necesidad de sombras. Los tonos son familia de la
     tierra del mapa (beige) para que el mapa no parezca una ventana pegada
     sino parte de la página.

     Los nombres se quedan como estaban a propósito (--noche, --roca, --lima):
     cambiarlos obligaría a tocar las 900 reglas de abajo, que es justo lo que
     este bloque existe para evitar. Léelos como PAPELES, no como colores:
       --noche = el fondo de la página     --roca = la tarjeta
       --marca = rellena (botones, pines)  --lima = escribe (dinero, enlaces)
     ─────────────────────────────────────────────────────────────────────── */
  --noche:#E9E5DC; --roca:#F9F7F2; --roca2:#F1EDE4; --roca3:#E2DCD0;
  --linea:rgba(31,29,24,.14); --linea2:rgba(31,29,24,.26);
  /* Sobre claro, el gris flojo deja de leerse: los tres tonos de texto están
     medidos para pasar 4,5:1 sobre el fondo (--tenue daba 2,6 y era ilegible). */
  --tinta:#1F1D18; --mudo:#5A5449; --tenue:#6A6255;
  --marca:#3F6F1E; --marca2:#4F8A26; --sobre-lima:#FFFFFF;
  --lima:#3F6F1E; --lima2:#2E5313;
  --agua:#0E7C8C; --agua2:#0B6B79; --brasa:#944C0B;

  /* semáforo legal — sobre claro tienen que ser OSCUROS para poder leerse */
  --verde:#1E7A45; --ambar:#8A6100; --rojo:#C0271F; --rojo-txt:#8E1D17;

  /* lavados y velos */
  --lav1:rgba(63,111,30,.07); --lav2:rgba(63,111,30,.13);
  --agua-lav:rgba(14,124,140,.10); --agua-bor:rgba(14,124,140,.34);
  --brasa-lav:rgba(168,87,14,.10); --brasa-bor:rgba(168,87,14,.40);
  --verde-lav:rgba(30,122,69,.11); --verde-bor:rgba(30,122,69,.38);
  --ambar-lav:rgba(138,97,0,.11);  --ambar-bor:rgba(138,97,0,.38);
  --rojo-lav:rgba(192,39,31,.09);  --rojo-bor:rgba(192,39,31,.34);
  --neutro-lav:rgba(31,29,24,.06);
  /* Los velos van por encima del mapa: ahora aclaran en vez de oscurecer. */
  --velo:rgba(249,247,242,.86); --velo-nav:rgba(233,229,220,.94);
  --velo-barra:rgba(233,229,220,.55); --velo-suave:rgba(233,229,220,.20);
  /* Es un COLOR, no una sombra entera: se usa como `0 30px 80px var(--sombra-f)`.
     Estaba definido como sombra completa y esas reglas eran CSS inválido, así
     que el navegador las tiraba y no había sombra en ningún sitio. */
  --sombra-f:rgba(31,29,24,.16);
  --relieve:none;

  --d:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --m:"Consolas",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1280px; --e:cubic-bezier(.19,1,.22,1); --r:14px;
  /* Las teselas de OSM se dejan con sus colores: tierra beige, mar azul,
     carreteras rojas. Solo se les baja un punto la saturación para que no
     compitan con los pines. */
  --filtro-mapa:saturate(.94);
  /* Un color por tipo. Cantan sobre el beige, el verde y el azul del mapa,
     pero además ESCRIBEN el precio dentro de la chapa blanca del pin, así que
     están bajados hasta pasar 4,5:1 sobre blanco. Los de antes se veían bien
     de lejos y no se leían de cerca (2,96 el verde). */
  --t-tierra:#4A8209; --t-villa:#00758C; --t-hotel:#B4530A;
  --t-comercial:#6435C4; --t-complejo:#B01254;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noche);color:var(--tinta);font-family:var(--d);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1}
.h-xl{font-size:clamp(40px,6.6vw,92px)}
.h-l{font-size:clamp(30px,4.2vw,54px)}
.h-m{font-size:clamp(22px,2.4vw,32px)}
.kicker{font-family:var(--m);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lima);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:1px;background:var(--marca)}
.lead{color:var(--mudo);font-size:clamp(15px,1.3vw,18px);max-width:62ch}

/* El contenido se ve entero sin JavaScript: solo se oculta si hay JS. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e)}
.js .rv.on{opacity:1;transform:none}

/* ── navegación ───────────────────────────────────────────────────────── */
nav{position:fixed;inset:0 0 auto;z-index:90;backdrop-filter:blur(18px);
  background:var(--velo-barra);border-bottom:1px solid transparent;transition:.4s var(--e)}
nav.solid{background:var(--velo-nav);border-bottom-color:var(--linea)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:32px}
.logo{font-weight:800;font-size:21px;letter-spacing:-.05em;display:flex;align-items:center;gap:9px}
/* El símbolo de la marca: dos parcelas y una linde. Va como máscara para que
   herede el color y no haya que mantener un fichero por cada fondo. */
.logo i{width:23px;height:23px;display:block;flex:none;background:var(--marca);
  -webkit-mask:url("/estatico/marca/simbolo.svg") center/contain no-repeat;
          mask:url("/estatico/marca/simbolo.svg") center/contain no-repeat}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--mudo)}
.nav-links a:hover{color:var(--tinta)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-size:14px;font-weight:650;cursor:pointer;
  border:1px solid var(--linea2);color:var(--tinta);background:transparent;
  transition:.3s var(--e);white-space:nowrap;font-family:inherit}
.btn:hover{background:var(--lav2);border-color:var(--lima)}
.btn-p{background:var(--marca);color:var(--sobre-lima);border-color:var(--lima)}
.btn-p:hover{background:var(--marca2);box-shadow:0 0 0 6px var(--lav2)}
.btn-plano{border-color:transparent;color:var(--tenue);padding-left:10px;padding-right:10px}
.btn-plano:hover{background:transparent;color:var(--tinta);border-color:transparent}

/* conmutador de idioma: el activo en tinta, el otro apagado */
.lang{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--linea);font-family:var(--m);font-size:11px;letter-spacing:.06em;
  transition:.25s var(--e);flex:none}
.lang:hover{border-color:var(--lima)}
.lang b{color:var(--tinta);font-weight:700}
.lang span{color:var(--tenue)}
.lang:hover span{color:var(--lima)}

/* ── mapa ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
#mapa{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 45%,var(--velo-nav),var(--velo) 42%,var(--velo-suave) 72%),
             linear-gradient(to top,var(--noche) 2%,transparent 32%)}
.hero-in{position:relative;z-index:3;width:100%}
.hero h1{margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--lima)}
.capas{position:absolute;right:28px;bottom:110px;z-index:4;display:flex;flex-direction:column;gap:6px}
.capa{padding:8px 14px;font-size:12px;font-weight:600;border-radius:10px;cursor:pointer;
  background:var(--velo-nav);border:1px solid var(--linea);backdrop-filter:blur(14px);
  color:var(--mudo);transition:.25s;text-align:left;font-family:inherit}
.capa:hover{color:var(--tinta);border-color:var(--linea2)}
.capa.on{background:var(--marca);color:var(--sobre-lima);border-color:var(--lima)}

.buscador{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;padding:8px;max-width:860px;
  background:var(--velo-nav);border:1px solid var(--linea);border-radius:18px;
  backdrop-filter:blur(22px);box-shadow:0 30px 80px var(--sombra-f)}
.campo{flex:1 1 150px;padding:9px 15px;border-radius:12px;transition:.25s}
.campo:hover{background:var(--lav1)}
.campo label{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:3px}
.campo select,.campo input{background:transparent;border:0;color:var(--tinta);font-size:14.5px;
  font-weight:600;width:100%;outline:none;font-family:inherit;cursor:pointer}
.campo option{background:var(--roca);color:var(--tinta)}

.tiras{margin-top:24px;display:flex;flex-wrap:wrap;gap:26px}
.tira b{display:block;font-family:var(--m);font-size:26px;font-weight:700;color:var(--lima);
  font-variant-numeric:tabular-nums}
.tira span{font-size:12px;color:var(--mudo)}

section{padding:100px 0;position:relative}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  flex-wrap:wrap;margin-bottom:40px}

/* ── tarjeta-ticker ───────────────────────────────────────────────────── */
/* Cuatro por fila. `auto-fill` con un mínimo bajaría solo a 3 o 2 según el
   ancho; aquí se fija el número y se baja a mano en cada corte, que es lo que
   mantiene las filas completas. */
.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1180px){.rejilla{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px) {.rejilla{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:560px) {.rejilla{grid-template-columns:1fr}}
.card{background:var(--roca);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;position:relative;transition:.45s var(--e);display:block}
.card:hover{border-color:var(--linea2);transform:translateY(-7px);
  box-shadow:0 26px 60px var(--sombra-f)}
.card-img{aspect-ratio:16/10.5;position:relative;overflow:hidden;background:var(--roca2)}
.card-img .sim{position:absolute;inset:0;transition:transform .8s var(--e)}
.card:hover .card-img .sim{transform:scale(1.07)}
.chips{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.chip{font-family:var(--m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;font-weight:700;backdrop-filter:blur(10px);
  background:var(--velo);border:1px solid var(--linea)}
.chip.verde{color:var(--verde);border-color:var(--verde-bor);background:var(--verde-lav)}
.chip.ambar{color:var(--ambar);border-color:var(--ambar-bor);background:var(--ambar-lav)}
.chip.rojo{color:var(--rojo);border-color:var(--rojo-bor);background:var(--rojo-lav)}
.chip.dest{color:var(--sobre-lima);background:var(--marca);border-color:var(--lima)}

.card-b{padding:16px 17px 17px}
.card-zona{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);display:flex;justify-content:space-between}
.card h3{font-size:16.5px;margin:7px 0 12px;letter-spacing:-.02em;line-height:1.25}
.datos{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;
  padding:12px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.precio{font-family:var(--m);font-size:22px;font-weight:700;letter-spacing:-.035em}
.precio small{font-size:11px;color:var(--tenue);font-weight:400;display:block;letter-spacing:0}
.roi{text-align:right}
.roi b{font-family:var(--m);font-size:24px;font-weight:800;color:var(--lima);
  letter-spacing:-.04em;display:block;line-height:1}
.roi span{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.roi.na b{color:var(--tenue);font-size:17px}

.rail{margin-top:13px}
.rail-l{display:flex;justify-content:space-between;font-family:var(--m);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin-bottom:6px}
.rail-l b{color:var(--lima);font-weight:700}
.rail-b{height:3px;background:var(--roca3);border-radius:3px;overflow:hidden}
.rail-f{height:100%;background:linear-gradient(90deg,var(--agua),var(--marca));border-radius:3px;
  width:0;transition:width 1.5s var(--e)}
.meta{display:flex;gap:14px;margin-top:12px;font-size:11.5px;color:var(--mudo);flex-wrap:wrap}
.meta i{font-style:normal;color:var(--tinta);font-weight:650}

/* ── ficha ────────────────────────────────────────────────────────────── */
.ficha{background:var(--roca);border:1px solid var(--linea);border-radius:20px;overflow:hidden}
.ficha-top{padding:28px 30px;border-bottom:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.ficha-cols{display:grid;grid-template-columns:1.35fr 1fr}
.ficha-l{padding:28px 30px;border-right:1px solid var(--linea)}
.ficha-r{padding:28px 30px;background:var(--roca2)}
.bloque-t{font-family:var(--m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.bloque-t::after{content:"";flex:1;height:1px;background:var(--linea)}

.legal{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:11px;overflow:hidden}
.legal-f{background:var(--roca);padding:11px 14px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-size:13.5px}
.legal-f span{color:var(--mudo);font-size:12px}
.legal-f b{font-weight:650;display:flex;align-items:center;gap:7px;text-align:right}
.pt{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:0 0 0 3px currentColor}
.ok{color:var(--verde)}.wr{color:var(--ambar)}.no{color:var(--rojo)}

.aviso-b{margin-top:10px;padding:12px 14px;border-radius:11px;font-size:12.5px;
  display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.aviso-b.roja{background:var(--rojo-lav);border:1px solid var(--rojo-bor);color:var(--rojo)}
.aviso-b.ambar{background:var(--ambar-lav);border:1px solid var(--ambar-bor);color:var(--ambar)}
.aviso-b.verde{background:var(--verde-lav);border:1px solid var(--verde-bor);color:var(--verde)}
.aviso-b p{color:var(--mudo)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:var(--roca3);border-radius:3px;outline:none;margin:0 0 16px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--marca);cursor:pointer;border:3px solid var(--roca2);
  box-shadow:0 0 0 1px var(--lima)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--marca);cursor:pointer;border:3px solid var(--roca2)}
.calc-fila{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;margin-bottom:5px;color:var(--mudo)}
.calc-fila b{font-family:var(--m);color:var(--tinta);font-size:13px;font-weight:650}
.resultado{margin-top:16px;padding:18px;border-radius:13px;
  background:linear-gradient(150deg,var(--lav1),var(--agua-lav));
  border:1px solid var(--linea2)}
.res-g{display:flex;align-items:baseline;gap:9px}
.res-g b{font-family:var(--m);font-size:46px;font-weight:800;color:var(--lima);
  letter-spacing:-.05em;line-height:1}
.res-g span{font-size:12px;color:var(--mudo)}
.res-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:15px;
  padding-top:15px;border-top:1px solid var(--linea)}
.res-mini span{display:block;font-family:var(--m);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue)}
.res-mini b{font-family:var(--m);font-size:17px;font-weight:700}
.esc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.esc div{text-align:center;padding:10px 6px;border-radius:9px;background:var(--roca);
  border:1px solid var(--linea)}
.esc span{display:block;font-size:10px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.1em;font-family:var(--m)}
.esc b{font-family:var(--m);font-size:18px;font-weight:700}
.esc .base{border-color:var(--linea2);background:var(--lav1)}
.nota{margin-top:12px;font-size:11px;color:var(--tenue);line-height:1.5}

/* ═══════════════ MAPA DE LA PORTADA ═══════════════ */
.mapa-hero{position:relative;height:78vh;min-height:520px;margin-top:58px;
  border-bottom:1px solid var(--linea);background:var(--roca)}
#mapa{position:absolute;inset:0;background:var(--roca)}
#mapa::after{content:attr(data-cargando);position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;font-family:var(--m);font-size:12px;color:var(--tenue);
  background:var(--roca);transition:opacity .5s}
#mapa.listo::after{opacity:0;pointer-events:none}
#mapa.error::after{content:attr(data-error);opacity:1}
/* El precio en rupias: debajo del dólar y más callado. Es orientación para el
   propietario local, no el precio que se pacta. */
.rp{display:block;color:var(--agua2);font-family:var(--m);font-size:12.5px;
  letter-spacing:0;margin-top:2px}
.precio .rp + small{margin-top:1px}
.mini-rp{font-size:11.5px;color:var(--agua2);margin-top:-4px}

/* El aviso de cómo se hace zoom: sale al mover la rueda y se va solo. */
.mapa-pista{position:absolute;inset:0;z-index:900;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .25s;
  background:rgba(249,247,242,.88);color:var(--tinta);font-size:15px;
  letter-spacing:-.01em;text-align:center;padding:0 30px}
.mapa-pista.vista{opacity:1}

/* Teselas claras de OSM oscurecidas para que el mapa sea parte del diseño. */
.teselas{filter:var(--filtro-mapa)}
.leaflet-container{background:#AAD3DF;font-family:var(--d)}
.leaflet-control-attribution{background:var(--velo)!important;color:var(--tenue)!important;
  font-size:9px!important}
.leaflet-control-attribution a{color:var(--tenue)!important}
.leaflet-bar a{background:var(--roca)!important;color:var(--tinta)!important;
  border-color:var(--linea)!important}
.leaflet-bar a:hover{background:var(--roca3)!important}

.mapa-intro{position:absolute;left:0;top:0;bottom:0;z-index:400;width:min(430px,44vw);
  padding:44px 34px;display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;background:linear-gradient(90deg,var(--velo-nav) 46%,transparent)}
.mapa-intro h1{margin:16px 0 14px}
.mapa-intro .tiras{margin-top:20px}
.mapa-leyenda{position:absolute;right:14px;bottom:26px;z-index:400;display:flex;gap:14px;
  flex-wrap:wrap;padding:9px 14px;border-radius:11px;font-size:11.5px;color:var(--tinta);
  background:var(--velo-nav);border:1px solid var(--linea2);backdrop-filter:blur(12px)}
.mapa-leyenda span{display:flex;align-items:center;gap:6px}
.pt-l{width:8px;height:8px;border-radius:50%;display:block}
.pt-l.tierra{background:var(--t-tierra)}.pt-l.villa{background:var(--t-villa)}
.pt-l.hotel{background:var(--t-hotel)}.pt-l.comercial{background:var(--t-comercial)}

/* pin */
.pin{display:flex;align-items:center;gap:5px;transform:translate(-9px,-13px);
  white-space:nowrap;cursor:pointer;transition:transform .2s var(--e)}
/* Sobre el mapa claro el pin va en blanco con el color del tipo: es lo que se
   lee igual sobre arena, sobre verde y sobre agua. */
.pin i{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px var(--c),0 1px 4px rgba(0,0,0,.3)}
.pin b{font-size:12px;font-weight:700;color:var(--c);padding:3px 8px;border-radius:7px;
  background:#fff;border:1.5px solid var(--c);box-shadow:0 1px 5px rgba(0,0,0,.25)}
.pin-envoltorio:hover .pin,.pin-envoltorio.activo .pin{transform:translate(-9px,-17px) scale(1.11);z-index:600}
.pin-envoltorio.activo .pin b{background:var(--c);color:var(--sobre-lima)}
/* El pin del plan Premium. Se distingue por PESO, no por otro color: los
   colores ya significan el tipo de activo y meter uno más los rompería. */
.pin.alto i{width:14px;height:14px;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--c),0 2px 7px rgba(0,0,0,.35)}
.pin.alto b{font-size:13px;padding:4px 10px;border-width:2px;
  box-shadow:0 2px 9px rgba(0,0,0,.30)}

/* minificha del pin */
.mini-pop .leaflet-popup-content-wrapper{background:var(--roca);border:1px solid var(--linea2);
  border-radius:13px;padding:0;overflow:hidden;box-shadow:0 24px 60px var(--sombra-f)}
.mini-pop .leaflet-popup-content{margin:0;width:254px!important}
.mini-pop .leaflet-popup-tip{background:var(--roca);border:1px solid var(--linea2)}
.mini-pop .leaflet-popup-close-button{color:var(--mudo)!important;font-size:20px!important;
  padding:6px 8px 0 0!important}
.mini-foto{height:118px;background:var(--roca2) center/cover no-repeat}
.mini-foto.sin{background:linear-gradient(160deg,var(--roca3),var(--roca2))}
.mini-b{padding:13px 14px 14px}
.mini-zona{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tenue)}
.mini h4{font-size:14.5px;margin:6px 0 9px;line-height:1.3;font-weight:700;
  letter-spacing:-.02em;color:var(--tinta)}
.mini-datos{display:flex;align-items:baseline;gap:8px;padding-bottom:9px;
  border-bottom:1px solid var(--linea)}
.mini-datos b{font-size:19px;color:var(--lima);font-weight:700;letter-spacing:-.03em}
.mini-datos span{font-size:11.5px;color:var(--mudo)}
.mini-chips{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 12px}
.mini-obra,.mini-rent{font-family:var(--m);font-size:9.5px;letter-spacing:.06em;padding:4px 8px;
  border-radius:6px;background:var(--agua-lav);color:var(--agua2);
  border:1px solid var(--agua-bor)}
.mini-rent{background:var(--lav1);color:var(--lima);border-color:var(--linea2)}
.mini-cta{width:100%;padding:9px}
.mapa-reset{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:400}

/* ═══════════════ FILTROS ═══════════════ */
.proyectos{padding:52px 0 90px}
.barra-filtros{background:var(--roca);border:1px solid var(--linea);border-radius:16px;
  padding:16px 18px;margin-bottom:28px;position:sticky;top:58px;z-index:40;
  backdrop-filter:blur(20px)}
.fila-1{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.f-campo{display:flex;flex-direction:column;gap:4px;min-width:132px}
.f-campo.crece{flex:1 1 240px}
.f-campo label{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tenue)}
.f-campo input,.f-campo select{background:var(--roca2);border:1px solid var(--linea);
  border-radius:10px;padding:10px 12px;color:var(--tinta);font-size:14px;
  font-family:inherit;outline:none;width:100%;transition:border-color .25s}
.f-campo input:focus,.f-campo select:focus{border-color:var(--lima)}
.f-campo option{background:var(--roca)}
.fila-2{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--linea)}
.f-etiq{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tenue);margin-right:2px}
.f-sep{width:1px;height:20px;background:var(--linea);margin:0 6px}
.pastilla input{position:absolute;opacity:0;pointer-events:none}
.pastilla span{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:999px;border:1px solid var(--linea);background:var(--roca2);
  font-size:12.5px;color:var(--mudo);cursor:pointer;transition:.25s var(--e)}
.pastilla span b{font-family:var(--m);font-size:10px;color:var(--tenue);font-weight:700}
.pastilla span:hover{border-color:var(--linea2);color:var(--tinta)}
.pastilla input:checked + span{background:var(--lav2);border-color:var(--lima);
  color:var(--tinta)}
.pastilla input:checked + span b{color:var(--lima)}
.pastilla input:focus-visible + span{outline:2px solid var(--lima);outline-offset:2px}
.limpiar{margin-left:auto;font-size:12px;color:var(--brasa)}
.cab-resultados{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap}
/* Cuántas fichas ver de golpe */
.cuantos{display:flex;align-items:center;gap:6px;flex:none}
.cuantos-t{font-family:var(--m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);margin-right:2px}
.cuantos .pag{padding:7px 12px;font-size:12px}
.vacio{text-align:center;padding:70px 20px;border:1px dashed var(--linea);border-radius:16px}
.vacio .lead{margin:12px auto 20px}
/* Seguir viendo: primero el botón grande, los números debajo y en pequeño */
.mas{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px}
.btn-mas{padding:14px 30px;font-size:15px}
.paginacion{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pag{padding:9px 15px;border-radius:10px;border:1px solid var(--linea);
  font-family:var(--m);font-size:13px;color:var(--mudo)}
.pag:hover{border-color:var(--linea2);color:var(--tinta)}
.pag.on{background:var(--marca);color:var(--sobre-lima);border-color:var(--lima)}

.card.resaltada{border-color:var(--lima);box-shadow:0 0 0 1px var(--lima)}
.card-img img.sim{width:100%;height:100%;object-fit:cover}
.sin-foto{background:linear-gradient(160deg,var(--roca3),var(--roca2) 62%);display:grid;place-items:center}
.sin-foto svg{width:100%;height:100%;opacity:.5}
.n-fotos{position:absolute;bottom:10px;right:10px;font-size:10px;padding:4px 8px;
  border-radius:6px;background:var(--velo);color:var(--mudo);z-index:2}
.chip.fase{color:var(--agua2);border-color:var(--agua-bor);background:var(--agua-lav)}

/* ═══════════════ LAS TRES VÍAS ═══════════════ */
.tres-vias{background:var(--roca);border-top:1px solid var(--linea)}
.vias{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px}
.via{background:var(--noche);border:1px solid var(--linea);border-radius:var(--r);
  padding:28px 24px;transition:.4s var(--e);display:block;position:relative;overflow:hidden}
.via:hover{transform:translateY(-6px);border-color:var(--linea2)}
.via b{font-size:28px;color:var(--lima);opacity:.32;letter-spacing:-.05em;display:block}
.via h3{font-size:20px;margin:12px 0 10px}
.via p{font-size:13.5px;color:var(--mudo);line-height:1.6}
.via-cta{display:inline-block;margin-top:16px;font-size:13px;font-weight:650;color:var(--lima)}
.via.destacada{border-color:var(--lima);
  background:linear-gradient(170deg,var(--lav2),var(--noche) 58%)}

footer{padding:52px 0 32px;border-top:1px solid var(--linea);color:var(--tenue);font-size:12.5px}
.f-cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;margin-bottom:34px}
.f-cols h5{font-family:var(--m);font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mudo);margin-bottom:13px}
.f-cols a{display:block;margin-bottom:8px}
.f-cols a:hover{color:var(--lima)}

@media(max-width:900px){
  .ficha-cols{grid-template-columns:1fr}
  .ficha-l{border-right:0;border-bottom:1px solid var(--linea)}
  .buscar-cols{grid-template-columns:1fr}
  .buscar-mapa{position:relative;height:52vh;order:-1}
}
@media(max-width:760px){.f-cols{grid-template-columns:1fr 1fr}}
/* Aquí había un `.nav-links{display:none}` a 820 px que dejaba el menú del
   móvil VACÍO: la hamburguesa se abría y dentro no había un solo enlace, solo
   los botones de entrar y publicar. Sobraba, además: por debajo de 1000 px los
   enlaces ya están dentro de `.nav-panel`, que está oculto hasta que se abre
   (ver paginas.css). Esconderlos dos veces solo servía para esconderlos
   también cuando tocaba enseñarlos. */
@media(max-width:820px){.capas{display:none}}

/* Vídeo de la ficha: mismo marco que las fotos, sin desbordar en móvil. */
.video-ficha{width:100%;max-width:100%;border-radius:var(--r);background:var(--roca3);
  border:1px solid var(--linea);display:block}
/* El chip de destacado en el panel, para que no parezca un botón más. */
.mio-acc .chip.dest{align-self:center}

/* ── Avisos de búsqueda ───────────────────────────────────────────────────
   Discreto al final de los resultados; con marco cuando la búsqueda no ha
   devuelto nada, que es cuando de verdad hace falta.
   Los colores y el campo salen de la paleta de siempre (--roca, --roca2,
   --lima): un formulario nuevo no puede inventarse su propio estilo. */
.aviso-alerta{margin:34px auto 0;max-width:640px;text-align:center;
  padding:22px 20px;border-radius:var(--r)}
.aviso-alerta.fuerte{border:1px solid var(--linea);background:var(--roca)}
.aviso-alerta b{display:block;font-size:19px;letter-spacing:-.01em;color:var(--tinta)}
.aviso-alerta p{color:var(--mudo);font-size:14px;margin:6px 0 0;line-height:1.6}
.aviso-fila{display:flex;gap:10px;margin:16px auto 0;max-width:440px}
.aviso-fila input{flex:1;min-width:0;background:var(--roca2);border:1px solid var(--linea);
  border-radius:10px;padding:11px 13px;color:var(--tinta);font-size:14px;
  font-family:inherit;outline:none;transition:border-color .25s}
.aviso-fila input:focus{border-color:var(--lima)}
.aviso-fila .btn{white-space:nowrap}
.aviso-msg{margin-top:12px;font-weight:600;color:var(--lima)}
.aviso-msg.mal{color:var(--rojo-txt)}
.aviso-alerta .nota{margin-top:10px;font-size:12px}
@media (max-width:520px){.aviso-fila{flex-direction:column}}

/* ── Guardar un proyecto ──────────────────────────────────────────────────
   El corazón vive dentro de la foto de la tarjeta, arriba a la derecha.
   Apagado casi no se ve; encendido, del color de la marca. */
.card-img .guardar{position:absolute;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--velo);color:var(--tenue);
  backdrop-filter:blur(4px);transition:color .18s,transform .18s,background .18s}
.card-img .guardar:hover{transform:scale(1.12);background:var(--roca)}
.card-img .guardar.on{color:var(--lima)}
.card-img .guardar:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.btn-guardados{white-space:nowrap}
.btn-guardados.on{border-color:var(--lima);color:var(--lima)}
.btn-guardados b{font-variant-numeric:tabular-nums}
/* En el móvil el corazón crece: la tarjeta entera es un enlace y un blanco de
   34 px al lado del borde se falla, abriendo el proyecto en vez de guardarlo. */
@media (hover:none){.card-img .guardar{width:42px;height:42px;font-size:17px}}