*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
 --tinta:#14342B; --fondo:#F2EDE3; --panel:#E6DED0; --acento:#8E1B2E;
 --tercero:#A98B4F; --claro:#F2EDE3; --oscuro:#14342B;
 --texto:#14342B; --texto2:#4A5F55; --borde:#D6C9B6;
 --agua:#4A7C8C;
 --r:2px; --rb:100px;
 --disp:'Zodiak',Georgia,serif; --body:'Satoshi',system-ui,sans-serif;
 --max:1180px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--fondo);color:var(--texto);
 font-size:17px;line-height:1.62;font-weight:400;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.disp{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:1.04}
h1{font-family:var(--disp);font-weight:500;font-size:clamp(2.3rem,6vw,4.1rem);line-height:.98;letter-spacing:-.02em}
h2{font-family:var(--disp);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.25rem);line-height:1.1;letter-spacing:-.015em}
h3{font-weight:600;font-size:1.16rem;line-height:1.3}
p{max-width:64ch}
.kick{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--texto2)}
.lead{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.55;color:var(--texto2);max-width:60ch}
.sm{font-size:.9rem;color:var(--texto2)}
.xs{font-size:.78rem;color:var(--texto2);line-height:1.45}

/* nav */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px) saturate(140%);
 background:color-mix(in srgb,var(--fondo) 82%,transparent);border-bottom:1px solid var(--borde)}
nav{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.marca img{width:46px;height:46px;flex:none}
.marca b{font-family:var(--disp);font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;display:block;line-height:1}
.marca span{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--texto2);display:block;margin-top:3px}
.menu{display:flex;gap:16px;margin-left:auto;align-items:center}
/* que una etiqueta NUNCA se parta en dos líneas: si no cabe, que salte al burger */
.menu a{text-decoration:none;font-size:.85rem;font-weight:500;color:var(--texto2);padding:6px 0;
 border-bottom:1.5px solid transparent;white-space:nowrap}
.menu a:hover{color:var(--texto)}
.menu a[aria-current=page]{color:var(--texto);border-bottom-color:var(--acento)}
/* `.menu a` (0,1,1) le gana a `.btn` (0,1,0) y le comía el padding al botón:
   el texto quedaba tocando el borde de la píldora */
.menu a.btn{padding:11px 21px;border-bottom:0;font-size:.83rem;margin-left:4px}
.menu a.btn:hover{border-bottom:0}
.menu a.btn[aria-current=page]{border-bottom:0}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--borde);border-radius:var(--r);
 padding:9px 11px;cursor:pointer;color:var(--texto)}
.burger svg{display:block}
@media(max-width:1120px){
 .menu{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;
  background:var(--fondo);border-bottom:1px solid var(--borde);padding:8px 24px 22px;
  transform:translateY(-120%);transition:transform .42s cubic-bezier(.22,1,.36,1);margin:0}
 .menu.abierto{transform:none}
 .menu a{padding:13px 0;border-bottom:1px solid var(--borde);font-size:1rem}
 .burger{display:block}
}

/* botones */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--rb);
 text-decoration:none;font-weight:700;font-size:.92rem;border:1.5px solid transparent;
 transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--acento);color:#F2EDE3}
.btn-s{border-color:var(--borde);color:var(--texto)}

/* hero */
.hero{position:relative;min-height:clamp(520px,84vh,860px);display:flex;align-items:flex-end;
 overflow:hidden;background:var(--oscuro)}
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .velo{position:absolute;inset:0}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,8vh,96px);padding-top:80px}
.hero h1,.hero .lead{color:var(--claro)}
.hero .kick{color:var(--claro);font-size:.83rem;letter-spacing:.2em;
 display:inline-flex;align-items:center;gap:12px;
 text-shadow:0 1px 10px color-mix(in srgb,var(--oscuro) 80%,transparent)}
.hero .kick::before{content:'';width:34px;height:2px;background:var(--acento);flex:none}
@media(max-width:640px){.hero .kick{font-size:.75rem;letter-spacing:.16em}
 .hero .kick::before{width:22px}}
.hero .lead{max-width:52ch;margin-top:20px;color:color-mix(in srgb,var(--claro) 86%,transparent)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* secciones */
section{padding:clamp(56px,9vw,110px) 0}
.oscura{background:var(--oscuro);color:var(--claro)}
.oscura .lead,.oscura .sm,.oscura .kick,.oscura .xs{color:color-mix(in srgb,var(--claro) 72%,transparent)}
.panelbg{background:var(--panel)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* En grid los items traen min-width:auto y NO se encogen por debajo de su
   contenido: un precio como $160.000.000 empujaba la fila fuera de la pantalla. */
.grid2>*,.grid3>*,.grid4>*{min-width:0}

/* tarjetas de las cuatro líneas de precio: el valor manda el ancho */
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.lineas>*{min-width:0}
.lineas .dato{font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.01em;
 font-variant-numeric:tabular-nums;white-space:nowrap}
.lineas .tarjeta{padding:22px}
/* tabla de lotes: en pantalla angosta se desplaza sola, no rompe la página */
.tabla-lotes{width:100%}
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-lotes tr.agotado{opacity:.55}
.tabla-lotes tr.agotado td:last-child{font-style:italic}
@media(max-width:560px){.tabla-lotes{min-width:520px}}
@media(max-width:880px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
@media(max-width:880px){.grid4{grid-template-columns:1fr 1fr}}
figure img{border-radius:var(--r)}
figcaption{font-size:.76rem;color:var(--texto2);margin-top:9px;line-height:1.4}

.tarjeta{background:var(--panel);border-radius:var(--r);padding:26px;border:1px solid var(--borde)}
.oscura .tarjeta{background:var(--panel);border-color:var(--borde)}
.dato{font-family:var(--disp);font-size:clamp(2.4rem,5vw,3.4rem);line-height:.9;color:var(--acento);font-weight:500}
.filete{border-left:3px solid var(--acento);padding-left:22px}

table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:13px 10px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto2);font-weight:700}
td strong{font-weight:700}

/* faq */
details{border-bottom:1px solid var(--borde);padding:20px 0}
details summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;
 justify-content:space-between;gap:18px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';font-family:var(--disp);font-size:1.5rem;line-height:1;color:var(--acento);flex:none}
details[open] summary::after{content:'–'}
details .r{margin-top:14px;color:var(--texto2);max-width:72ch}

/* form */
form{display:grid;gap:15px;max-width:520px}
label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto2)}
input,textarea,select{width:100%;padding:13px 15px;border:1.5px solid var(--borde);border-radius:var(--r);
 font-family:inherit;font-size:1rem;background:var(--fondo);color:var(--texto)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}
textarea{min-height:110px;resize:vertical}

/* plano interactivo */
.plano{position:relative;border-radius:var(--r);overflow:hidden;background:var(--oscuro);
 border:1px solid var(--borde);touch-action:pan-y}
.plano .capas{position:relative;width:100%}
.plano .capas img{width:100%;display:block}
.plano .capa-lotes{position:absolute;inset:0;transition:opacity .5s}
.plano svg.zonas{position:absolute;inset:0;width:100%;height:100%}
.plano svg.zonas a,.plano svg.zonas g{cursor:pointer}
/* el viewBox es 0 0 100 100 con preserveAspectRatio=none, o sea 1 unidad = 1% del
   ancho: sin non-scaling-stroke el trazo sale de ~34px y se desborda del deslinde */
/* El deslinde va en blanco y sin relleno: sobre la ortofoto deja ver la pradera y
   el bosque, que es justo lo que se está vendiendo. La capa de color queda como
   alternativa detrás del botón, no como estado por defecto. */
.plano polygon{fill:transparent;stroke:rgba(255,255,255,.92);stroke-width:2.2;
 vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
 filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));transition:fill .24s,stroke-width .24s}
/* relleno bajo y trazo más grueso: el lote se marca sin tapar el terreno */
.plano g:hover polygon{fill:color-mix(in srgb,var(--acento) 15%,transparent);
 stroke:#fff;stroke-width:3.4}
.plano g.on polygon{fill:color-mix(in srgb,var(--acento) 22%,transparent);
 stroke:#fff;stroke-width:3.8}
.plano svg.zonas g:focus{outline:none}
.plano svg.zonas g:focus-visible polygon{fill:color-mix(in srgb,var(--acento) 22%,transparent);
 stroke:#fff;stroke-opacity:.9;stroke-width:3.5;stroke-dasharray:7 4}
.plano .etiquetas{position:absolute;inset:0;pointer-events:none}
.plano .etiquetas span{position:absolute;transform:translate(-50%,-50%);
 font-family:var(--body);font-size:clamp(11px,1.15vw,15px);font-weight:800;color:#fff;
 background:rgba(0,0,0,.46);border:1px solid rgba(255,255,255,.34);
 border-radius:100px;padding:3px 9px;line-height:1;letter-spacing:.02em;
 text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap}
.plano .etiquetas .et-com{background:rgba(0,0,0,.3);font-size:clamp(9px,.9vw,12px);opacity:.9}
.plano-ui{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.chip{border:1.5px solid var(--borde);background:none;color:var(--texto);border-radius:var(--rb);
 padding:8px 15px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.chip[aria-pressed=true]{background:var(--acento);border-color:var(--acento);color:#F2EDE3}
.ficha{margin-top:18px;background:var(--panel);border:1px solid var(--borde);
 border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ficha[hidden]{display:none}
.ficha .fimg{position:relative;background:var(--oscuro);min-height:100%}
.ficha .fimg img{width:100%;height:100%;object-fit:cover;display:block}
/* miniaturas: sólo aparecen si el lote tiene más de una vista */
.ficha .fmini{position:absolute;left:10px;bottom:44px;display:flex;gap:6px;z-index:2}
.ficha .fmini button{width:44px;height:34px;padding:0;border:2px solid transparent;
 border-radius:3px;overflow:hidden;cursor:pointer;background:none;opacity:.62;
 transition:opacity .18s,border-color .18s}
.ficha .fmini button img{width:100%;height:100%;object-fit:cover;display:block}
.ficha .fmini button.on,.ficha .fmini button:hover{opacity:1;border-color:var(--claro)}
.ficha .fimg figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;
 font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#fff;
 background:linear-gradient(transparent,rgba(0,0,0,.72));font-weight:600}
.ficha .ftxt{padding:24px 26px;position:relative}
.ficha .cerrar{position:absolute;top:13px;right:14px;width:30px;height:30px;border-radius:50%;
 border:1.5px solid var(--borde);background:none;color:var(--texto2);cursor:pointer;
 font-size:1rem;line-height:1;padding:0}
.ficha .cerrar:hover{border-color:var(--acento);color:var(--acento)}
.ficha .fprecio{font-family:var(--disp);font-size:1.75rem;line-height:1;color:var(--acento);
 margin-top:12px;font-variant-numeric:tabular-nums}
.ficha .fprecio span{display:block;font-family:var(--body);font-size:.66rem;
 letter-spacing:.14em;text-transform:uppercase;color:var(--texto2);margin-top:6px;font-weight:700}
.ficha .fprecio.agotado{color:var(--texto2);font-size:1.3rem}
.ficha .fmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;
 padding-top:16px;border-top:1px solid var(--borde)}
.ficha .fmeta b{display:block;font-size:.9rem;line-height:1.25}
.ficha .fmeta span{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--texto2);margin-top:4px}
@media(max-width:520px){.ficha .fmeta{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.ficha{grid-template-columns:1fr}
 .ficha .fimg{aspect-ratio:4/3;min-height:0}.ficha .ftxt{padding:20px}}

/* video del pitch */
.pitch{position:relative;border-radius:var(--r);overflow:hidden;background:var(--oscuro);
 border:1px solid var(--borde)}
.pitch video{width:100%;display:block;background:var(--oscuro)}
.pitch-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.8rem;color:var(--texto2)}

/* cta fijo movil */
.fija{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:none;
 background:var(--acento);color:#F2EDE3;border-radius:var(--rb);padding:15px;
 text-align:center;font-weight:700;text-decoration:none;box-shadow:0 8px 26px rgba(0,0,0,.22)}
@media(max-width:880px){.fija{display:block}body{padding-bottom:82px}}

footer{background:var(--oscuro);color:var(--claro);padding:clamp(48px,7vw,80px) 0 34px;margin-top:0}
/* mismo problema que .oscura: sobre fondo oscuro, .sm hereda texto2 pensado para fondo claro y casi desaparece. El pie nunca llevó la clase .oscura. */
footer .sm,footer .kick,footer .xs{color:color-mix(in srgb,var(--claro) 72%,transparent)}
footer a{color:color-mix(in srgb,var(--claro) 80%,transparent);text-decoration:none}
footer a:hover{color:var(--claro)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.fgrid.f4{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:980px){.fgrid.f4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fgrid.f4{grid-template-columns:1fr}}
@media(max-width:880px){.fgrid{grid-template-columns:1fr;gap:26px}}
.legal{border-top:1px solid color-mix(in srgb,var(--claro) 16%,transparent);margin-top:38px;
 padding-top:22px;font-size:.76rem;color:color-mix(in srgb,var(--claro) 60%,transparent);line-height:1.6}

/* animaciones */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.bl{opacity:0;filter:blur(11px);transform:translateY(10px);
 transition:opacity .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.bl.in{opacity:1;filter:none;transform:none}
.ln{position:relative}
.ln::after{content:'';position:absolute;left:0;bottom:-10px;height:2px;width:0;background:var(--acento);
 transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.ln.in::after{width:64px}
@media(prefers-reduced-motion:reduce){
 .rv,.bl{opacity:1;transform:none;filter:none;transition:none}
 .ln::after{width:64px;transition:none}
 html{scroll-behavior:auto}
}

/* ── visor de fotos (lightbox) ──────────────────────────────── */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;background:color-mix(in srgb,var(--oscuro) 94%,#000)}
.lb.abierto{display:grid;grid-template-rows:1fr auto}
.lb-marco{position:relative;display:grid;place-items:center;padding:56px 76px 10px;min-height:0}
.lb-marco img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
 border-radius:var(--r);opacity:0;transition:opacity .3s}
.lb-marco img.lista{opacity:1}
.lb-pie{padding:14px 76px 26px;display:flex;gap:20px;align-items:baseline;justify-content:space-between}
.lb-pie p{color:color-mix(in srgb,var(--claro) 82%,transparent);font-size:.9rem;max-width:70ch;margin:0}
.lb-cnt{color:color-mix(in srgb,var(--claro) 55%,transparent);font-size:.78rem;letter-spacing:.14em;
 font-variant-numeric:tabular-nums;white-space:nowrap}
.lb button{position:absolute;background:color-mix(in srgb,var(--oscuro) 55%,transparent);
 border:1.5px solid color-mix(in srgb,var(--claro) 26%,transparent);color:var(--claro);
 width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
 font-size:1.15rem;line-height:1;padding:0;transition:background .2s,border-color .2s}
.lb button:hover{background:var(--acento);border-color:var(--acento)}
.lb .lb-x{top:18px;right:20px;position:fixed}
.lb .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb .lb-carga{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid transparent;
 border-top-color:var(--acento);animation:lbgira .8s linear infinite;pointer-events:none;opacity:0}
.lb.cargando .lb-carga{opacity:1}
@keyframes lbgira{to{transform:rotate(360deg)}}
@media(max-width:720px){
 .lb-marco{padding:52px 12px 8px}.lb-pie{padding:10px 16px 20px;flex-direction:column;gap:7px}
 .lb button{width:40px;height:40px}.lb .lb-prev{left:8px}.lb .lb-next{right:8px}
}
@media(prefers-reduced-motion:reduce){.lb-marco img{transition:none}.lb .lb-carga{animation:none}}

/* -- mapa del entorno (geometria real de OSM) --------------- */
.mapa{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:22px;
 align-items:start;grid-template-areas:'barra barra' 'lienzo ficha'}
.mapa-barra{grid-area:barra;display:flex;justify-content:space-between;align-items:center;
 gap:16px;flex-wrap:wrap;margin-bottom:2px}
.mapa-lienzo{grid-area:lienzo;cursor:grab;touch-action:none}
.mapa-lienzo.arrastrando{cursor:grabbing}
.mapa-lienzo:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mapa-ficha{grid-area:ficha}
.mapa-lienzo{position:relative;background:var(--panel);border:1px solid var(--borde);
 border-radius:var(--r);overflow:hidden;aspect-ratio:1.62/1;transition:aspect-ratio .55s}
.mapa-svg{position:absolute;inset:0;width:100%;height:100%;display:block;
 transition:none}
.m-parque path{fill:color-mix(in srgb,#4A7A4E 16%,transparent);
 stroke:color-mix(in srgb,#4A7A4E 34%,transparent);stroke-width:1;
 vector-effect:non-scaling-stroke;fill-rule:evenodd}
.m-agua path{fill:color-mix(in srgb,var(--agua) 52%,transparent);
 stroke:color-mix(in srgb,var(--agua) 82%,transparent);stroke-width:1;
 vector-effect:non-scaling-stroke;fill-rule:evenodd}
.m-palmar path{fill:var(--acento);stroke:var(--acento);stroke-width:5;
 stroke-opacity:.28;vector-effect:non-scaling-stroke;paint-order:stroke}
.m-ruta path{fill:none;stroke-linecap:round;stroke-linejoin:round;
 vector-effect:non-scaling-stroke}
.m-ruta1 path{stroke:color-mix(in srgb,var(--texto) 42%,transparent);stroke-width:1.8}
.m-ruta2 path{stroke:color-mix(in srgb,var(--texto) 20%,transparent);stroke-width:1}
.hito{cursor:pointer}
.hito .halo{fill:var(--acento);opacity:0;transition:opacity .3s;pointer-events:none}
.hito .pt{fill:var(--panel);stroke:var(--acento);stroke-width:2.2;
 vector-effect:non-scaling-stroke;transition:fill .25s}
.hito:hover .halo,.hito.on .halo,.hito:focus-visible .halo{opacity:.24}
.hito:hover .pt,.hito.on .pt,.hito:focus-visible .pt{fill:var(--acento)}
.hito:focus{outline:none}
.hito-pp .pt{fill:var(--acento);stroke:var(--claro);stroke-width:2.8}
.hito-pp .halo{opacity:.2}
.hito.fuera{opacity:0;pointer-events:none;transition:opacity .3s}

.mapa-etiquetas{position:absolute;inset:0;pointer-events:none}
/* Halo en vez de caja: una caja opaca tapaba ~10% del mapa. El halo se consigue
   con varios text-shadow del color del lienzo — se lee igual y deja ver el fondo. */
.mapa-etiquetas .eh{position:absolute;transform:translateY(-50%);
 font-size:clamp(9px,.86vw,11.5px);line-height:1.2;font-weight:700;color:var(--texto);
 white-space:nowrap;padding:2px 3px;border-radius:3px;background:none;
 text-shadow:0 0 3px var(--panel),0 0 3px var(--panel),0 0 6px var(--panel),
             1px 1px 2px var(--panel),-1px -1px 2px var(--panel);
 transition:color .2s,opacity .35s,left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1)}
/* el tiempo solo aparece en el punto señalado: así cada etiqueta ocupa una línea */
.mapa-etiquetas .eh b{display:none;font-weight:700;font-size:.92em;margin-top:1px;
 color:color-mix(in srgb,var(--acento) 68%,var(--texto))}
.mapa-etiquetas .eh.on b{display:block}
.mapa-etiquetas .eh-der{margin-left:12px}
.mapa-etiquetas .eh-izq{margin-left:-12px;transform:translate(-100%,-50%)}
.mapa-etiquetas .eh-pp{font-size:clamp(10.5px,1.08vw,14px);font-weight:800}
.mapa-etiquetas .eh.on{color:var(--acento);background:var(--panel);text-shadow:none;
 padding:5px 9px;box-shadow:0 3px 14px rgba(0,0,0,.18);z-index:3}
.mapa-etiquetas .eh.fuera{opacity:0}
.mapa-etiquetas .eh.oculta{opacity:0}
.mapa-etiquetas .eh.oculta.on{opacity:1;z-index:4}

.mapa-norte{position:absolute;top:12px;right:14px;display:flex;flex-direction:column;
 align-items:center;gap:1px;color:color-mix(in srgb,var(--texto) 52%,transparent)}
.mapa-norte svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round}
.mapa-norte span{font-size:9px;font-weight:700;letter-spacing:.1em}
.mapa-escala{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:7px;
 color:color-mix(in srgb,var(--texto) 62%,transparent)}
.mapa-escala i{display:block;height:5px;border:1px solid currentColor;border-top:0;
 transition:width .5s cubic-bezier(.4,0,.2,1)}
.mapa-escala span{font-size:9.5px;font-weight:700;letter-spacing:.06em;
 font-variant-numeric:tabular-nums}
.mapa-vistas{display:flex;gap:6px;flex-wrap:wrap}
.mapa-vistas .chip{padding:7px 14px;font-size:.76rem}
.mapa-zoom{display:flex;gap:6px;align-items:center}
.mapa-zoom button{width:34px;height:34px;border-radius:var(--r);border:1.5px solid var(--borde);
 background:none;color:var(--texto);cursor:pointer;font:inherit;font-size:1.05rem;
 line-height:1;display:grid;place-items:center;transition:border-color .2s}
.mapa-zoom button:last-child{width:auto;padding:0 14px;font-size:.74rem;letter-spacing:.04em}
.mapa-zoom button:hover{border-color:var(--acento)}
.mapa-pista{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
 font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
 color:color-mix(in srgb,var(--texto) 46%,transparent);pointer-events:none;
 background:color-mix(in srgb,var(--panel) 82%,transparent);padding:5px 12px;
 border-radius:100px;transition:opacity .4s}
.mapa-lienzo.tocado .mapa-pista{opacity:0}
.mapa-vistas .chip.on{background:var(--acento);border-color:var(--acento);color:#F2EDE3}

.mapa-ficha{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
 overflow:hidden;display:flex;flex-direction:column}
.mapa-ficha .mf-img{aspect-ratio:4/3;background:var(--oscuro);overflow:hidden}
.mapa-ficha .mf-img img{width:100%;height:100%;object-fit:cover}
.mapa-ficha .mf-txt{padding:20px 22px}
.mapa-ficha .mf-t{font-family:var(--disp);font-size:1.3rem;line-height:1.15;margin-bottom:4px}
.mapa-ficha .mf-d{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
 font-weight:700;color:color-mix(in srgb,var(--acento) 78%,var(--texto))}
.mapa-ficha .mf-cred{margin-top:10px;font-size:.66rem;line-height:1.4;color:var(--texto2);
 border-top:1px solid var(--borde);padding-top:8px}
.mapa-ficha .mf-falta{margin-top:12px;font-size:.72rem;color:var(--texto2);
 border-top:1px solid var(--borde);padding-top:10px}
.mapa-ficha .mf-coord{margin-top:10px;font-size:.68rem;color:var(--texto2);
 font-variant-numeric:tabular-nums;letter-spacing:.03em}
.mapa-lista{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.mapa-lista .ml-t{width:100%;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
 color:var(--texto2);font-weight:700;margin-bottom:3px}
.mapa-lista button{font:inherit;font-size:.78rem;padding:7px 13px;cursor:pointer;
 background:none;color:var(--texto);border:1.5px solid var(--borde);border-radius:var(--rb);
 display:inline-flex;align-items:baseline;gap:7px;transition:border-color .2s,background .2s}
.mapa-lista button b{font-size:.86em;color:var(--texto2);font-weight:600}
.mapa-lista button:hover{border-color:var(--acento)}
.mapa-lista button.on{background:var(--acento);border-color:var(--acento);color:#F2EDE3}
.mapa-lista button.on b{color:inherit;opacity:.8}
@media(max-width:880px){.mapa{grid-template-columns:1fr;
  grid-template-areas:'barra' 'lienzo' 'ficha'}
 .mapa-lienzo{aspect-ratio:1.3/1}
 .mapa-barra{flex-direction:column;align-items:stretch}
 .mapa-etiquetas .eh{font-size:10px;padding:2px 3px}
 .mapa-etiquetas .eh-pp{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){
 .mapa-etiquetas .eh,.mapa-escala i{transition:none}}

/* -- atributos y cifras del proyecto ----------------------- */
.attr{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:2px;
 background:var(--borde);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
.attr .at{background:var(--panel);padding:24px 20px;text-align:center;
 opacity:0;transform:translateY(14px);
 transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.attr.visto .at{opacity:1;transform:none}
.attr .at svg{width:34px;height:34px;margin:0 auto 12px;display:block;
 stroke:var(--acento);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.attr .at b{display:block;font-size:.9rem;line-height:1.25}
.attr .at span{display:block;font-size:.72rem;color:var(--texto2);margin-top:4px;line-height:1.35}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:26px}
.cifras .cf{border-top:2px solid var(--acento);padding-top:16px}
.cifras .cf .n{font-family:var(--disp);font-size:clamp(2rem,4.2vw,3rem);line-height:.95;
 color:var(--acento);font-weight:500;font-variant-numeric:tabular-nums;min-height:1em}
.cifras .cf .r{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--texto2);margin-top:8px;font-weight:600}
@media(prefers-reduced-motion:reduce){.attr .at{opacity:1;transform:none;transition:none}}

/* -- media que se expande al hacer scroll ------------------- */
.expand{position:relative;height:230vh}
.expand-pega{position:sticky;top:0;height:100vh;overflow:hidden;
 display:grid;place-items:center;background:var(--oscuro)}
.expand-fondo{position:absolute;inset:0}
.expand-fondo img{width:100%;height:100%;object-fit:cover}
.expand-fondo::after{content:'';position:absolute;inset:0;
 background:color-mix(in srgb,var(--oscuro) 62%,transparent)}
.expand-media{position:relative;z-index:2;overflow:hidden;border-radius:var(--r);
 box-shadow:0 30px 80px rgba(0,0,0,.45);will-change:width,height}
.expand-media video,.expand-media img{width:100%;height:100%;object-fit:cover;display:block}
.expand-rot{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
 pointer-events:none;text-align:center;padding:0 24px}
.expand-rot h2{color:var(--claro);text-shadow:0 2px 30px rgba(0,0,0,.5);
 font-size:clamp(2rem,6.5vw,5rem);line-height:.98}
.expand-rot .sub{color:color-mix(in srgb,var(--claro) 84%,transparent);
 margin-top:18px;font-size:clamp(.9rem,1.7vw,1.2rem);letter-spacing:.2em;
 text-transform:uppercase;font-weight:700}
.expand-rot .pista{position:absolute;left:0;right:0;bottom:6vh;font-size:.76rem;
 letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--claro) 66%,transparent);
 font-weight:700;display:flex;flex-direction:column;align-items:center;gap:10px}
.expand-rot .pista i{display:block;width:1px;height:34px;
 background:linear-gradient(color-mix(in srgb,var(--claro) 70%,transparent),transparent)}
.expand-cuerpo{position:relative;z-index:4;background:var(--fondo);
 padding:clamp(48px,8vw,96px) 0}
@media(prefers-reduced-motion:reduce){
 .expand{height:auto}
 .expand-pega{position:static;height:auto;padding:0}
 .expand-media{width:100%!important;height:auto!important;aspect-ratio:16/9}
 .expand-rot{position:static;padding:32px 24px 0}
}

/* -- carrusel ---------------------------------------------- */
.carr{position:relative}
.carr-marco{position:relative;overflow:hidden;border-radius:var(--r);
 background:var(--oscuro);touch-action:pan-y}
.carr-pista{display:flex;will-change:transform}
.carr-pista figure{flex:0 0 100%;position:relative}
.carr-pista img{width:100%;height:clamp(280px,52vh,560px);object-fit:cover;display:block;
 user-select:none;-webkit-user-drag:none}
.carr-pista figcaption{position:absolute;left:0;right:0;bottom:0;
 padding:44px 26px 18px;color:#fff;font-size:.86rem;line-height:1.4;
 background:linear-gradient(transparent,rgba(0,0,0,.72))}
.carr-b{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
 border-radius:50%;border:0;background:color-mix(in srgb,var(--fondo) 88%,transparent);
 color:var(--texto);cursor:pointer;display:grid;place-items:center;z-index:2;
 box-shadow:0 4px 18px rgba(0,0,0,.2);transition:transform .25s,opacity .25s}
.carr-b:hover:not(:disabled){transform:translateY(-50%) scale(1.09)}
.carr-b:disabled{opacity:.34;cursor:not-allowed}
.carr-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
.carr-prev{left:14px}.carr-next{right:14px}
.carr-pt{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
 display:flex;gap:7px;padding:8px 11px;border-radius:100px;
 background:rgba(0,0,0,.34);backdrop-filter:blur(8px)}
.carr-pt button{height:6px;width:6px;border:0;border-radius:100px;cursor:pointer;padding:0;
 background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.carr-pt button[aria-current=true]{width:24px;background:#fff}
.carr-info{display:flex;justify-content:space-between;align-items:baseline;
 gap:20px;margin-top:14px;font-size:.8rem;color:var(--texto2)}
.carr-info .n{font-variant-numeric:tabular-nums;letter-spacing:.1em;white-space:nowrap}
@media(max-width:600px){.carr-b{width:38px;height:38px}.carr-prev{left:8px}.carr-next{right:8px}}
@media(prefers-reduced-motion:reduce){.carr-pista{transition:none!important}}