
/* Concepto: sitio de inmobiliaria campestre. Verde profundo del logo como suelo, curvas de nivel como motivo, crema como papel. */
:root{
  --verde:#113227; --musgo:#2F5E49; --cobre:#A68262; --cobre-osc:#7C5A3C; --crema:#F0EDDE; --papel:#F8F6EC; --tierra:#4A3526; --linea:#D9D2BC;
  --disp:'Montserrat','Segoe UI',system-ui,sans-serif; --txt:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--crema);min-height:100vh;color:var(--tierra);font-family:var(--txt);font-size:16px;line-height:1.6;padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));margin:0}
.wrap{max-width:1120px;margin:0 auto}
h1,h2,h3{font-family:var(--disp);color:var(--verde);line-height:1.15;margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;font:600 15px var(--txt);cursor:pointer}
.btn-cobre{background:var(--cobre);color:#fff;border-color:var(--cobre-osc)}
.btn-cobre:hover{background:var(--cobre-osc)}
.btn-linea{border-color:var(--cobre);color:var(--cobre);background:transparent}
.btn-verde{background:var(--verde);color:var(--crema)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cobre);outline-offset:2px}
.etiqueta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--cobre-osc)}

/* encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(240,237,222,.94);backdrop-filter:blur(6px);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--linea)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--crema)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px}
.top img{height:56px;width:auto;display:block}
.top nav{display:flex;gap:24px;align-items:center;font-weight:500;font-size:15px;flex-wrap:wrap}
.top nav a{text-decoration:none}
.top nav a:not(.btn):hover{color:var(--cobre-osc)}
@media(max-width:760px){.top nav a:not(.btn){display:none}}

/* hero */
.hero{position:relative;background:var(--verde);color:var(--crema);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));overflow:hidden}
.hero svg.curvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hero .wrap{position:relative;padding-block:84px 0}
.hero h1{color:var(--crema);font-size:clamp(2rem,5vw,3.4rem);max-width:15ch;font-weight:600}
.hero h1 em{font-style:normal;color:#D2B08C;font-weight:700}
.hero p.sub{max-width:52ch;font-size:1.1rem;color:#D9D6C4;margin:22px 0 30px}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-linea{color:var(--crema);border-color:#8aa596}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid rgba(240,237,222,.22)}
.cifras div{padding:22px 0 26px;padding-right:12px}
.cifras b{display:block;font-family:var(--disp);font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:600;color:var(--crema);font-variant-numeric:tabular-nums}
.cifras span{font-size:13px;color:#BFC7B8;letter-spacing:.04em}
.marca-agua{position:absolute;right:max(16px,4%);top:56px;width:190px;opacity:.16}
@media(max-width:760px){.marca-agua{width:110px;top:40px}}

section.bloque{padding-block:84px}
.cab{max-width:62ch;margin-bottom:36px;display:flex;flex-direction:column;gap:12px}
.cab h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.cab p{margin:0;font-size:1.05rem}

/* proyectos */
.proys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.proy{background:var(--papel);border:1px solid var(--linea);border-radius:6px 6px 36px 6px;overflow:hidden;display:flex;flex-direction:column}
.proy .foto{height:170px;background:var(--musgo);position:relative}
.proy .foto svg{position:absolute;inset:0;width:100%;height:100%}
.proy .cuerpo{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.proy h3{font-size:1.4rem}
.proy .dato{display:flex;justify-content:space-between;font-size:14px;border-top:1px dashed var(--linea);padding-top:8px}
.proy .dato b{font-variant-numeric:tabular-nums;color:var(--verde)}
.proy .btn{margin-top:auto;align-self:flex-start}
.nota-ej{font-size:12px;color:var(--cobre-osc);margin-top:14px}

/* mapa */
.mapa-sec{background:var(--papel);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));border-block:1px solid var(--linea)}
.mapa-caja{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:860px){.mapa-caja{grid-template-columns:minmax(0,1fr)}}
.lienzo{background:#DDE3CF;border:1px solid var(--linea);border-radius:6px;position:relative;overflow:hidden}
.lienzo svg{display:block;width:100%;height:auto}
.lote{cursor:pointer;stroke:#fff;stroke-width:1.5;transition:filter .15s}
.lote:hover,.lote:focus-visible{filter:brightness(1.12);outline:none}
.lote.sel{stroke:var(--verde);stroke-width:3}
.lote.disponible{fill:#3E7A5C}.lote.separado{fill:#C99A55}.lote.vendido{fill:#9A8F7C}
.lote.off{opacity:.18;pointer-events:none}
.etq{font:600 9px var(--txt);fill:#fff;pointer-events:none;text-anchor:middle}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1.5px solid var(--cobre);background:transparent;color:var(--tierra);border-radius:999px;padding:6px 14px;font:500 14px var(--txt);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.chip[aria-pressed=true]{background:var(--verde);color:var(--crema);border-color:var(--verde)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.ficha{background:var(--crema);border:1px solid var(--linea);border-radius:6px;padding:22px;position:sticky;top:90px}
.ficha h3{font-size:1.7rem;margin:6px 0 14px}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}
.ficha dt{color:var(--cobre-osc)}.ficha dd{margin:0;text-align:right;font-weight:600;color:var(--verde);font-variant-numeric:tabular-nums}
.estado{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#fff}
.estado.disponible{background:#3E7A5C}.estado.separado{background:#B07F37}.estado.vendido{background:#7F7565}
.ficha .btn{margin-top:20px;width:100%;justify-content:center}
.ficha .num{font-size:13px;margin-top:10px;color:var(--cobre-osc);text-align:center}
.pie-mapa{font-size:13px;color:var(--cobre-osc);margin-top:12px}

/* por qué */
.porque{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;border-top:2px solid var(--verde)}
.porque div{padding:24px 24px 8px 0}
.porque h3{font-size:1.25rem;margin-bottom:8px}
.porque p{margin:0;font-size:15px}

/* cómo comprar */
.pasos{counter-reset:p;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px;padding:0;list-style:none;margin:0}
.pasos li{counter-increment:p;background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:22px}
.pasos li::before{content:counter(p);font-family:var(--disp);font-size:2.2rem;color:var(--cobre);display:block;line-height:1;margin-bottom:10px}
.pasos b{display:block;color:var(--verde);font-family:var(--disp);font-size:1.15rem;margin-bottom:4px}
.pasos p{margin:0;font-size:15px}
.portal{margin-top:22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--verde);color:var(--crema);border-radius:6px;padding:22px 26px}
.portal p{margin:0;max-width:56ch}
.portal b{font-family:var(--disp);font-size:1.25rem;display:block}

/* contacto */
.contacto{background:var(--verde);color:var(--crema);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.contacto .caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media(max-width:800px){.contacto .caja{grid-template-columns:minmax(0,1fr)}}
.contacto h2{color:var(--crema);font-size:clamp(1.8rem,4vw,2.8rem)}
.contacto p{color:#D9D6C4}
.contacto .etiqueta{color:#D2B08C}
form{display:grid;gap:12px}
label{font-size:13px;color:#D9D6C4;display:grid;gap:5px}
input,select,textarea{font:400 16px var(--txt);padding:12px 14px;border-radius:6px;border:1px solid #4b6a5b;background:#0C261D;color:var(--crema);width:100%}
textarea{min-height:88px;resize:vertical}
.ok{background:#1d4a39;border-radius:6px;padding:12px 14px;font-size:14px}
footer{padding-block:28px;font-size:13px;color:var(--cobre-osc);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lote{transition:none}}

/* buscador tipo portal */
.hero .wrap{padding-block:64px 0}
.hero h1{max-width:18ch;font-size:clamp(2.1rem,5.2vw,3.6rem)}
.buscador{margin-top:30px;background:var(--papel);color:var(--tierra);border-radius:10px;padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.buscador label{font-size:12px;font-weight:600;color:var(--cobre-osc);letter-spacing:.04em;text-transform:uppercase}
.buscador select{background:#fff;color:var(--tierra);border:1px solid var(--linea);margin-top:4px;padding:12px}
.buscador .btn{padding:13px 26px;justify-content:center}
@media(max-width:900px){.buscador{grid-template-columns:repeat(2,minmax(0,1fr))}.buscador .btn{grid-column:1/-1}}
.cifras{margin-top:40px}
/* resultados */
.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.barra .cuenta{font-size:15px}.barra select{width:auto;background:#fff;color:var(--tierra);border:1px solid var(--linea);padding:9px 12px;font-size:14px}
.res{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));gap:18px}
.tarj{background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.tarj .img{height:130px;background:var(--musgo);position:relative}
.tarj .img svg{position:absolute;inset:0;width:100%;height:100%}
.tarj .ins{position:absolute;left:10px;top:10px;background:var(--cobre);color:#fff;font:600 11px var(--txt);letter-spacing:.06em;padding:4px 10px;border-radius:4px;text-transform:uppercase}
.tarj .ins.n{background:var(--verde)}
.tarj .cu{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.tarj .pr{font:700 1.25rem var(--disp);color:var(--verde);font-variant-numeric:tabular-nums}
.tarj .meta{font-size:14px;display:flex;gap:14px;flex-wrap:wrap}
.tarj .lug{font-size:13px;color:var(--cobre-osc)}
.tarj .acc{display:flex;gap:8px;margin-top:10px}
.tarj .acc .btn{padding:9px 14px;font-size:14px;flex:1;justify-content:center}
.mas{display:flex;justify-content:center;margin-top:22px}
.vacio{padding:30px;text-align:center;background:var(--papel);border:1px dashed var(--linea);border-radius:8px}

/* ---- mapa real dentro del sitio ---- */
.mapa-real{height:560px;border-radius:6px;overflow:hidden;border:1px solid var(--linea);background:#DDE3CF}
@media(max-width:860px){.mapa-real{height:420px}}
.proy-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.aviso{font-size:13px;color:var(--cobre-osc);background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:12px 14px;margin-top:16px;line-height:1.5}
.top .wrap img{height:56px}
.pie-sitio{border-top:1px solid var(--linea);padding-block:28px;font-size:13px;color:var(--cobre-osc)}
.pie-sitio .wrap{display:grid;gap:10px}
.pie-sitio a{text-decoration:underline}
.flash{padding:12px 14px;border-radius:6px;font-size:14px;margin-bottom:14px}
.flash.ok{background:#E3EFE6;color:#1d4a39}.flash.err{background:#F6E3DC;color:#7a2d1a}
.foto-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.foto-gal img{width:100%;height:150px;object-fit:cover;border-radius:6px;display:block}
.cuadro{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:22px}
.cuadro label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--cobre-osc);margin-bottom:12px;letter-spacing:.03em}
.cuadro input,.cuadro select,.cuadro textarea{background:#fff;color:var(--tierra);border:1px solid var(--linea);font-weight:400;letter-spacing:0;font-size:16px}
.cuadro .dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.cuadro small{font-weight:400;color:var(--cobre-osc);letter-spacing:0}
.ck{display:flex!important;grid-template-columns:none!important;gap:10px!important;align-items:flex-start;font-weight:400!important;letter-spacing:0!important;color:var(--tierra)!important;font-size:14px!important}
.ck input{width:auto;margin-top:4px}
.tabla-prop{width:100%;border-collapse:collapse;font-size:14px}
.tabla-prop th,.tabla-prop td{text-align:left;padding:10px;border-bottom:1px solid var(--linea)}
.est{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#E7E1CC}
.est.publicado{background:#CFE5D6;color:#14402d}.est.en_revision{background:#F1E2B8}.est.rechazado{background:#F2CFC5}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Cabecera en móvil: logo y botones en una sola fila */
@media(max-width:760px){
  .top .wrap{flex-wrap:nowrap;gap:8px}
  .top img{height:44px}
  .top nav{gap:6px;flex-wrap:nowrap}
  .top nav .btn{padding:9px 12px;font-size:13px;white-space:nowrap}
}

/* ---- Imágenes de las secciones ---- */
.hero{background-image:linear-gradient(100deg,rgba(11,40,29,.9) 0%,rgba(11,40,29,.72) 45%,rgba(11,40,29,.45) 100%),url(../img/sitio/hero.jpg);background-size:cover;background-position:center 60%}
.hero svg.curvas{opacity:.28}
.contacto{background-image:linear-gradient(rgba(11,40,29,.86),rgba(11,40,29,.9)),url(../img/sitio/contacto.jpg);background-size:cover;background-position:center}
.portal-foto{background:linear-gradient(90deg,rgba(11,40,29,.88) 0%,rgba(11,40,29,.6) 60%,rgba(11,40,29,.35) 100%),url(../img/sitio/publica.jpg) center/cover;color:var(--crema);min-height:150px}
.portal-foto b{color:var(--crema)}
.proy .foto{background-size:cover;background-position:center}
.proy .foto svg{display:none}
.tarj .img img.stock{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ilus{position:absolute;left:8px;bottom:8px;background:rgba(11,40,29,.72);color:var(--crema);font:500 11px var(--txt);padding:2px 8px;border-radius:999px;z-index:2}
.foto-gal-stock{position:relative;max-width:640px;margin:0 0 20px}
.foto-gal-stock img{width:100%;height:auto;border-radius:6px;display:block}
.contacto .ck,.contacto .ck a{color:var(--crema)!important}
