/* ══════════════════════════════════════════════════════════════════
   HaciendaX Portal — design system (tokens + componentes)
   Dirección: "joyería dorada sobre navy editorial".
   - Serif (Fraunces) para titulares · Sans (Manrope) para UI ·
     Mono (Spline Sans Mono) para CIFRAS (precio, m², códigos).
   - Un solo acento: oro #C19A5B. CTAs navy en reposo → oro al hover.
   - Antes vivía inline en index.html; los colores dinámicos de app.js
     usan var(--cta) para heredar hover/transiciones desde acá.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FAF7F2;            /* crema base */
  --bg2:#F4F0E9;           /* crema hundida */
  --navy:#1B2A4A;          /* navy marca */
  --navy-deep:#15223D;     /* navy fondo (footer/banners) */
  --mut:#736E66;           /* texto secundario */
  --mut2:#A39B90;          /* texto terciario / labels */
  --line:#EAE3D8;          /* hairlines */
  --acc:#C19A5B;           /* ORO HaciendaX (acento único) */
  --acc-deep:#A87F3D;      /* oro profundo (hover, texto sobre claro) */
  --acc-soft:#D8B97E;      /* oro claro (eyebrows sobre navy) */
  --acc-ink:#231A0C;       /* tinta sobre oro */
  --cta:var(--navy);       /* fondo de CTA primario (hover lo pisa) */
  --serif:'Fraunces',serif;
  --sans:'Manrope',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);overflow-x:hidden}
body{font-family:var(--sans);color:var(--navy)}
img{display:block}
button{font-family:inherit}
::selection{background:var(--navy);color:#fff}
a{color:inherit}
.hx-scroll::-webkit-scrollbar{height:8px;width:8px}
.hx-scroll::-webkit-scrollbar-thumb{background:#E0D9CE;border-radius:8px}

/* ── Cifras: precios, m², códigos ── */
.hx-mono{font-family:var(--mono);font-weight:600;letter-spacing:-0.01em;font-feature-settings:"tnum"}

/* ── Animaciones base ── */
@keyframes hxshimmer{0%{background-position:-680px 0}100%{background-position:680px 0}}
@keyframes hxfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hxspin{to{transform:rotate(360deg)}}
.hx-sk{background:linear-gradient(90deg,#EFEAE1 0%,#F6F2EB 40%,#EFEAE1 80%);background-size:680px 100%;animation:hxshimmer 1.5s infinite linear}
.hx-fade{animation:hxfade .7s ease both}
/* reveal escalonado de cards en grillas */
.hx-grid-3 .hx-fade:nth-child(2),.hx-splitcards .hx-fade:nth-child(2){animation-delay:.07s}
.hx-grid-3 .hx-fade:nth-child(3),.hx-splitcards .hx-fade:nth-child(3){animation-delay:.14s}
.hx-grid-3 .hx-fade:nth-child(4),.hx-splitcards .hx-fade:nth-child(4){animation-delay:.21s}
.hx-grid-3 .hx-fade:nth-child(5),.hx-splitcards .hx-fade:nth-child(5){animation-delay:.28s}
.hx-grid-3 .hx-fade:nth-child(6),.hx-splitcards .hx-fade:nth-child(6){animation-delay:.35s}
@media (prefers-reduced-motion:reduce){.hx-fade{animation:none}.hx-sk{animation:none}}

/* ── CTA primario: navy en reposo → ORO profundo al hover ──
   app.js pinta los CTAs con style="background:var(--cta);…"; este selector
   por atributo les da transición y hover sin tocar cada string inline. */
[style*="var(--cta"]{transition:background .25s ease,color .25s ease,transform .12s ease,box-shadow .25s ease}
[style*="var(--cta"]:hover{background:var(--acc-deep)!important}
[style*="var(--cta"]:active{transform:scale(.985)}
[data-act]:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── Links con subrayado animado (oro) ── */
.hx-link{position:relative}
.hx-link::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--acc-deep);transition:right .3s ease}
.hx-link:hover::after{right:0}

/* ── Layout ── */
.hx-wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.hx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hx-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hx-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.hx-searchgrid{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr auto;gap:12px;align-items:end}
.hx-projgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.hx-detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:52px;align-items:start}
.hx-amengrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hx-listlayout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:42px;align-items:start}
.hx-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

/* ── Logo wordmark ── */
.hx-logo{height:26px;width:auto;display:block}
.hx-logo-foot{height:30px;width:auto;display:block;filter:brightness(0) invert(1)}
@media(max-width:560px){.hx-logo{height:22px}}

/* ── Toggle de moneda USD/Bs (header) ── */
.hx-cur{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.hx-cur button{border:none;cursor:pointer;font-family:var(--mono);font-size:11.5px;font-weight:600;border-radius:999px;padding:6px 11px;background:transparent;color:var(--mut);transition:background .2s,color .2s;letter-spacing:.02em}
.hx-cur button.on{background:var(--navy);color:#fff}

/* ── Tabs de operación ── */
.hx-tabs{display:inline-flex;flex-wrap:wrap;background:#F1ECE3;border-radius:999px;padding:4px;gap:2px}
.hx-tab{border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:9px 17px;background:transparent;color:#56514A;transition:background .2s,color .2s}
.hx-tab.on{background:var(--navy);color:#fff}

/* ── Toolbar del listado ── */
.hx-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hx-toolbar-spacer{flex:1}

/* ── Hero de barrio (zona seleccionada) ── */
.hx-zonehero{position:relative;border-radius:18px;overflow:hidden;min-height:172px;display:flex;align-items:flex-end;margin-bottom:24px;background:var(--navy)}
.hx-zonehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-zonehero .hx-zonehero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,40,0.15) 30%,rgba(15,22,40,0.82) 100%)}

/* ── Subheader de sección por zona ── */
.hx-zonesec{display:flex;align-items:baseline;gap:12px;margin:38px 0 20px}
.hx-zonesec:first-child{margin-top:6px}

/* ── Half-map: lista + mapa lado a lado (desktop) ── */
.hx-splitlayout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,1fr);gap:26px;align-items:start}
.hx-splitmap{position:sticky;top:88px;height:calc(100vh - 116px);min-height:420px;border-radius:18px;overflow:hidden;border:1px solid #E2E6EC}
.hx-splitmap .hx-map{height:100%;aspect-ratio:auto;border:none;border-radius:0}
.hx-splitcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:640px){.hx-splitcards{grid-template-columns:1fr}}
/* chip "área del mapa" (aparece al mover el mapa) */
.hx-mapareachip{display:none;align-items:center;gap:10px;margin:0 0 14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--navy)}
.hx-mapareachip button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--acc-deep);padding:0}
.hx-maphint{margin:0 0 12px;font-size:12.5px;color:var(--mut2);display:flex;align-items:center;gap:7px}
.hx-mapnone{background:#fff;border:1px dashed #D8D0C4;border-radius:14px;padding:38px 24px;text-align:center;color:var(--mut);font-size:14px;line-height:1.6;grid-column:1/-1}

/* ── CTA sticky (mobile) ── */
.hx-stickycta{display:none}

/* ── Drawer de filtros (panel izquierdo en desktop, bottom-sheet en mobile) ── */
.hx-sidebar{position:fixed;top:0;left:0;bottom:0;width:344px;max-width:88vw;z-index:210;overflow-y:auto;background:var(--bg);transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 70px -24px rgba(15,22,40,0.45);padding:14px 0 24px}
body.hx-drawer-open .hx-sidebar{transform:translateX(0)}
.hx-card{cursor:pointer;width:100%;background:#fff;border:1px solid #ECE7DF;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease;box-shadow:0 1px 2px rgba(27,42,74,0.04)}
.hx-card:hover{box-shadow:0 26px 50px -26px rgba(27,42,74,0.30);transform:translateY(-4px);border-color:#E2D5BE}
.hx-card:hover .hx-cardimg{transform:scale(1.06)}
.hx-card:hover .hx-cardimg2{opacity:1}
.hx-ver:hover{color:var(--acc-deep)!important}
.hx-zonecard:hover img{transform:scale(1.07)}
.hx-projcard:hover img{transform:scale(1.05)}

/* ── Hero split: buscador + card glass de la propiedad destacada ── */
.hx-hero{min-height:90vh}
.hx-herosplit{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:end}
.hx-herocard{cursor:pointer;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(21,34,61,0.66);backdrop-filter:blur(12px);border:1px solid rgba(216,185,126,0.4);box-shadow:0 40px 80px -40px rgba(0,0,0,0.55);transition:transform .35s ease,border-color .35s ease}
.hx-herocard:hover{transform:translateY(-4px);border-color:var(--acc)}
.hx-herocard:hover .hx-herocard-img img{transform:scale(1.05)}
.hx-herocard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-deep);flex-shrink:0}
.hx-herocard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hx-herocard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hx-herocard-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-herocard-specs svg{stroke:#AEB6C9}
@media(max-width:1100px){.hx-herosplit{grid-template-columns:1fr;gap:0}.hx-herocard{margin-top:26px;max-width:560px}}
@media(max-width:640px){.hx-hero-feat{min-height:0}.hx-herocard{flex-direction:row;max-width:none;border-radius:14px}.hx-herocard-img{aspect-ratio:auto;width:118px}.hx-herocard-specs{display:none!important}.hx-herocard-body{padding:12px 14px;gap:5px}.hx-herocard-price{font-size:16px!important}.hx-herocard-cta{display:none!important}}

[data-hx-burger]{display:none}
@media(max-width:1100px){.hx-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.hx-grid-3{grid-template-columns:repeat(2,1fr)}.hx-zones{grid-template-columns:repeat(2,1fr)}.hx-amengrid{grid-template-columns:repeat(2,1fr)}.hx-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){.hx-detail{grid-template-columns:1fr;gap:32px}.hx-projgrid{grid-template-columns:1fr}.hx-sidebar-detail{position:static!important}}
@media(max-width:900px){[data-hx-desktopnav]{display:none!important}[data-hx-burger]{display:flex!important}.hx-listlayout{grid-template-columns:1fr}}
@media(max-width:760px){.hx-searchgrid{grid-template-columns:1fr 1fr}[data-hx-footgrid]{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){.hx-wrap{padding:0 20px}.hx-grid-3{grid-template-columns:1fr}.hx-grid-4{grid-template-columns:1fr}.hx-zones{grid-template-columns:1fr}.hx-searchgrid{grid-template-columns:1fr}.hx-amengrid{grid-template-columns:1fr 1fr}.hx-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){[data-hx-footgrid]{grid-template-columns:1fr!important}}

/* ── Mapa Leaflet (tiles teñidos a la paleta + pins de ORO) ── */
.hx-map{width:100%;aspect-ratio:16/11;border-radius:18px;overflow:hidden;border:1px solid #E2E6EC;background:#EAEEF2}
.hx-map.hx-map-detail{aspect-ratio:16/9}
.leaflet-container{font-family:var(--sans);background:#EFEBE3}
.hx-map .leaflet-tile-pane{filter:saturate(.8) sepia(.14) contrast(1.02)}
.leaflet-container a{color:var(--navy)}
.leaflet-bar a{color:var(--navy)!important}
.leaflet-div-icon{background:transparent;border:none}
.hx-pin .hx-pricepin{position:absolute;left:0;bottom:3px;transform:translateX(-50%);background:var(--acc);color:var(--acc-ink);border:1.5px solid #fff;border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;box-shadow:0 6px 16px -4px rgba(27,42,74,0.45);cursor:pointer;transition:background .2s ease,color .2s ease}
.hx-pin .hx-pricepin:hover{background:var(--navy);color:#fff}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(193,154,91,0.28)!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--navy)!important;color:#fff!important;font-family:var(--mono)!important;font-weight:700!important}
.hx-mapempty{width:100%;border-radius:18px;border:1px dashed #D8D0C4;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:56px 32px;color:var(--mut)}

/* ── Capa de confianza: badge Verificado ── */
.hx-verif{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:5px;background:rgba(21,34,61,0.78);backdrop-filter:blur(5px);color:#fff;border:1px solid rgba(216,185,126,0.55);border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.hx-verif svg{flex-shrink:0}
.hx-verifline{display:inline-flex;align-items:center;gap:7px;color:var(--acc-deep);font-size:12.5px;font-weight:600}

/* ── Asesor: PERFIL del dueño de la publicación (ficha de propiedad y de proyecto) ── */
.hx-advisor{margin-top:20px;padding-top:18px;border-top:1px solid #F0EBE3}
.hx-advisor-solo{margin-top:0;padding-top:0;border-top:none}
.hx-advisor-top{display:flex;align-items:center;gap:13px;min-width:0}
.hx-advisor-avatar{width:54px;height:54px;border-radius:50%;background:var(--navy-deep);color:var(--acc-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:23px;font-weight:600;flex-shrink:0;border:1.5px solid var(--acc)}
/* fila de meta: logo chico de la inmobiliaria + nombre + edad; wrap para el sidebar angosto */
.hx-advisor-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:12px;color:var(--mut);font-weight:500;min-width:0}
.hx-advisor-agencylogo{height:17px;width:auto;max-width:88px;object-fit:contain;filter:grayscale(.35);opacity:.85;flex-shrink:0}
.hx-advisor-dot{color:#C7BFB2}
.hx-advisor-bio{margin-top:10px;font-size:12.5px;color:#736E66;line-height:1.55}

/* ── Filtros: chips activos ── */
.hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.hx-chip{border:1.5px solid #DCD5C9;background:#fff;border-radius:999px;padding:6px 13px;font-family:inherit;font-size:13px;color:var(--navy);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.hx-chip:hover{background:var(--bg2);border-color:var(--acc)}
.hx-chip-clear{background:none;border:none;font-size:13px;color:var(--acc-deep);font-weight:600;cursor:pointer;font-family:inherit;padding:4px 0}

/* ── Filtros: botón mobile + drawer ── */
.hx-filter-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #E7E0D5;background:#fff;border-radius:10px;padding:9px 14px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:background .15s;white-space:nowrap}
.hx-filter-btn:hover{background:var(--bg2)}
.hx-filter-count{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;background:var(--acc);color:var(--acc-ink);border-radius:50%;font-size:11px;font-weight:700;flex-shrink:0}
.hx-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,22,40,0.45);z-index:200;backdrop-filter:blur(2px)}
body.hx-drawer-open .hx-sidebar-overlay{display:block}
.hx-drawer-handle-bar{display:none;justify-content:center;padding:10px 0 4px;background:var(--bg);border-radius:20px 20px 0 0}
.hx-drawer-handle{width:38px;height:4px;background:#D8D0C4;border-radius:4px}
.hx-drawer-close{display:block;background:none;border:none;cursor:pointer;color:#56514A;font-size:20px;line-height:1;padding:2px 6px;border-radius:6px}

/* half-map → stack en tablet/mobile: el mapa pasa a relación de aspecto y la lista full width */
@media(max-width:980px){
  .hx-splitlayout{grid-template-columns:1fr;gap:20px}
  .hx-splitmap{position:static;height:auto;aspect-ratio:16/12;order:-1}
  .hx-splitmap .hx-map{aspect-ratio:16/12}
}
@media(max-width:900px){
  .hx-drawer-handle-bar{display:flex}
  /* drawer pasa a bottom-sheet en mobile */
  .hx-sidebar{position:fixed;top:auto;left:0;right:0;width:auto;max-width:none;border-radius:20px 20px 0 0;max-height:88vh;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom,16px)}
  body.hx-drawer-open .hx-sidebar{transform:translateY(0)}
}

/* CTA sticky en mobile (detalle de propiedad) */
@media(max-width:768px){
  .hx-stickycta{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  body.hx-has-stickycta .hx-fab{display:none}
  body.hx-has-stickycta{padding-bottom:78px}
}