/* ============================================================================
   Spazio Inmobiliario — shared styles for the Properties pages
   Tokens and chrome mirror index.html; property components extend the same
   "silent luxury" language (gold accent, dark ground, serif display type).
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#B8963E;
  --gold-light:rgba(184,150,62,0.15);
  --dark:#0e151c;
  --dark2:#1C2B3A;
  --teal:#256E7F;
  --off:#F9F7F3;
  --offb:#F2EFE9;
  --mid:#6B7280;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--off);color:var(--dark);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}

/* ── NAV (matches index.html) ── */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 52px;position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s,backdrop-filter .4s}
.nav.scrolled,.nav.solid{background:rgba(14,21,28,0.92);backdrop-filter:blur(16px);border-bottom:0.5px solid rgba(184,150,62,0.12)}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.logo-main{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:0.18em;color:#fff;text-transform:uppercase}
.logo-main span{color:var(--gold)}
.logo-sub{font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-top:3px}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:11px;letter-spacing:0.12em;color:rgba(255,255,255,0.55);text-decoration:none;text-transform:uppercase;transition:color .2s;font-weight:400}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-cta{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:9px 22px;border:0.5px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;transition:all .25s;font-family:var(--sans);text-decoration:none;display:inline-block}
.nav-cta:hover{background:var(--gold);color:#fff}
.lang-btn{font-size:10px;letter-spacing:0.16em;font-weight:500;padding:9px 16px;border:0.5px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.55);background:transparent;cursor:pointer;font-family:var(--sans);transition:all .2s;margin-left:6px}
.lang-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ── Shared type helpers ── */
.eyebrow{font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:0.5px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.sec-title{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1.2;color:var(--dark2)}
.sec-sub{font-size:14px;color:var(--mid);line-height:1.8;font-weight:300}
.btn-gold{padding:14px 32px;background:var(--gold);color:#fff;border:none;cursor:pointer;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;font-family:var(--sans);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:opacity .2s}
.btn-gold:hover{opacity:.85}
.btn-ghost{padding:13px 30px;background:transparent;border:0.5px solid var(--gold);color:var(--gold);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;font-family:var(--sans);text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .25s}
.btn-ghost:hover{background:var(--gold);color:#fff}

/* ── Page hero (dark band beneath the nav) ── */
.page-hero{background:var(--dark);color:#fff;padding:150px 72px 60px}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-size:52px;font-weight:300;line-height:1.05;color:#fff;max-width:740px}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero p{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.85;max-width:520px;margin-top:20px;font-weight:300}
.crumbs{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:26px}
.crumbs a{color:rgba(255,255,255,0.55);text-decoration:none}
.crumbs a:hover{color:var(--gold)}

/* ── Filter / search / sort bar ── */
.controls{background:var(--dark2);padding:26px 72px;position:sticky;top:0;z-index:120}
.controls-inner{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.ctrl{display:flex;flex-direction:column;gap:7px}
.ctrl-label{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);font-weight:500}
.ctrl-search{flex:1 1 240px;min-width:200px}
.ctrl-input,.ctrl-select{width:100%;padding:11px 14px;border:0.5px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.04);color:#fff;font-size:13px;font-family:var(--sans);font-weight:300;outline:none;transition:border-color .2s;border-radius:0}
.ctrl-input::placeholder{color:rgba(255,255,255,0.35)}
.ctrl-input:focus,.ctrl-select:focus{border-color:var(--gold)}
.ctrl-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23B8963E'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;cursor:pointer}
.ctrl-select option{color:#111}
.ctrl-reset{background:none;border:none;color:rgba(255,255,255,0.45);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);padding:11px 4px;transition:color .2s;display:flex;align-items:center;gap:6px}
.ctrl-reset:hover{color:var(--gold)}

/* ── Results meta ── */
.results-meta{display:flex;justify-content:space-between;align-items:baseline;padding:34px 72px 0;flex-wrap:wrap;gap:10px}
.results-count{font-size:12px;letter-spacing:0.06em;color:var(--mid)}
.results-count strong{color:var(--dark2);font-weight:500}

/* ── Listing grid + cards ── */
.prop-section{padding:28px 72px 90px}
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.prop-card{background:#fff;border:0.5px solid rgba(28,43,58,0.1);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s;overflow:hidden}
.prop-card:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(0,0,0,0.11)}
.prop-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--dark2)}
.prop-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prop-card:hover .prop-media img{transform:scale(1.05)}
.prop-tags{position:absolute;top:14px;left:14px;display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:8px;letter-spacing:0.14em;text-transform:uppercase;padding:5px 10px;font-weight:500;color:#fff;background:rgba(14,21,28,0.72);backdrop-filter:blur(4px)}
.tag.sale{background:rgba(184,150,62,0.92)}
.tag.rent{background:rgba(37,110,127,0.92)}
.tag.confotur{background:rgba(14,21,28,0.72);color:var(--gold);border:0.5px solid rgba(184,150,62,0.5)}
.tag.reserved{position:absolute;top:14px;right:14px;left:auto;background:rgba(14,21,28,0.82);color:#fff}
.prop-body{padding:24px;display:flex;flex-direction:column;flex:1}
.prop-ref{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.prop-name{font-family:var(--serif);font-size:23px;font-weight:400;color:var(--dark2);line-height:1.15;margin-bottom:6px}
.prop-loc{font-size:12px;color:var(--mid);display:flex;align-items:center;gap:6px;margin-bottom:18px}
.prop-loc i{color:var(--gold);font-size:14px}
.prop-specs{display:flex;gap:18px;padding:16px 0;border-top:0.5px solid rgba(28,43,58,0.1);margin-top:auto;flex-wrap:wrap}
.prop-specs .spec{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dark2)}
.prop-specs .spec i{color:var(--gold);font-size:15px}
.prop-foot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:0.5px solid rgba(28,43,58,0.1)}
.prop-price{font-family:var(--serif);font-size:24px;color:var(--dark2);font-weight:500}
.prop-price .per{font-family:var(--sans);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mid);font-weight:400}
.prop-view{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:5px}
.prop-card:hover .prop-view{gap:9px}

/* ── Empty state ── */
.no-results{text-align:center;padding:80px 20px;color:var(--mid)}
.no-results i{font-size:40px;color:var(--gold);opacity:.5}
.no-results h3{font-family:var(--serif);font-size:26px;font-weight:300;color:var(--dark2);margin:18px 0 8px}
.no-results p{font-size:13px;font-weight:300}

/* ── Detail page ── */
.detail-wrap{padding:120px 72px 90px;max-width:1280px;margin:0 auto}
.detail-back{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mid);text-decoration:none;margin-bottom:26px;transition:color .2s}
.detail-back:hover{color:var(--gold)}
.detail-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:30px}
.detail-title{font-family:var(--serif);font-size:46px;font-weight:300;color:var(--dark2);line-height:1.05}
.detail-loc{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:7px;margin-top:12px}
.detail-loc i{color:var(--gold)}
.detail-pricebox{text-align:right}
.detail-price{font-family:var(--serif);font-size:40px;color:var(--dark2);font-weight:500;line-height:1}
.detail-price .per{font-family:var(--sans);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mid);font-weight:400}
.detail-badges{display:flex;gap:8px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap}

/* gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:46px}
.gallery-main{aspect-ratio:16/10;overflow:hidden;background:var(--dark2)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-side{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.gallery-side .thumb{overflow:hidden;background:var(--dark2);cursor:pointer;position:relative;aspect-ratio:auto}
.gallery-side .thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.gallery-side .thumb:hover img{opacity:.82}

/* detail layout */
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);border:0.5px solid rgba(28,43,58,0.12);margin-bottom:44px}
.spec-strip .cell{padding:24px;border-right:0.5px solid rgba(28,43,58,0.1);text-align:center}
.spec-strip .cell:last-child{border-right:none}
.spec-strip .cell i{font-size:22px;color:var(--gold)}
.spec-strip .cell .num{font-family:var(--serif);font-size:26px;color:var(--dark2);margin:8px 0 2px}
.spec-strip .cell .lab{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mid)}
.detail-block{margin-bottom:42px}
.detail-block h2{font-family:var(--serif);font-size:26px;font-weight:300;color:var(--dark2);margin-bottom:16px}
.detail-desc{font-size:15px;color:#3c4654;line-height:1.95;font-weight:300}
.amenities{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:6px}
.amenities li{list-style:none;font-size:13px;color:#3c4654;display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid rgba(28,43,58,0.07)}
.amenities li i{color:var(--gold);font-size:16px}
.highlights{display:flex;flex-direction:column;gap:0;margin-top:6px}
.highlights li{list-style:none;font-size:14px;color:var(--dark2);display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:0.5px solid rgba(28,43,58,0.08)}
.highlights li i{color:var(--gold);font-size:18px;margin-top:1px}

/* sidebar contact card */
.detail-aside{position:sticky;top:96px;border:0.5px solid rgba(28,43,58,0.12);border-top:2px solid var(--gold);background:#fff;padding:30px}
.aside-ref{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.aside-title{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--dark2);line-height:1.25;margin-bottom:20px}
.aside-line{display:flex;justify-content:space-between;font-size:12px;color:var(--mid);padding:9px 0;border-bottom:0.5px solid rgba(28,43,58,0.08)}
.aside-line span:last-child{color:var(--dark2)}
.aside-cta{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.aside-cta .btn-gold,.aside-cta .btn-ghost{justify-content:center;width:100%}
.aside-note{font-size:11px;color:var(--mid);line-height:1.7;border-left:2px solid var(--gold);padding-left:13px;margin-top:22px;font-weight:300}
.map-embed{margin-top:14px;border:0.5px solid rgba(28,43,58,0.12);overflow:hidden;aspect-ratio:16/9}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(0.2)}

/* ── FOOTER (matches index.html) ── */
footer{background:var(--dark);padding:48px 72px;border-top:0.5px solid rgba(184,150,62,0.1)}
.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:28px}
.foot-logo{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.foot-logo .logo-main{font-size:22px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:0.5px solid rgba(255,255,255,0.07);padding-top:22px}
.fnote{font-size:10px;letter-spacing:0.06em;color:rgba(255,255,255,0.32)}
.fsocial{display:flex;gap:16px}
.fsocial a{color:rgba(255,255,255,0.4);font-size:19px;display:flex;align-items:center;transition:color .2s}
.fsocial a:hover{color:var(--gold)}

/* ── Responsive ── */
@media(max-width:1024px){
  .prop-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .detail-aside{position:static}
  .gallery{grid-template-columns:1fr}
  .gallery-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav{padding:14px 22px}
  .nav-links{display:none}
  .page-hero{padding:120px 24px 44px}
  .page-hero h1{font-size:36px}
  .controls{padding:20px 24px}
  .results-meta,.prop-section{padding-left:24px;padding-right:24px}
  .prop-grid{grid-template-columns:1fr}
  .detail-wrap{padding:100px 24px 70px}
  .detail-title{font-size:34px}
  .detail-head{align-items:flex-start}
  .detail-pricebox{text-align:left}
  .detail-badges{justify-content:flex-start}
  .spec-strip{grid-template-columns:repeat(2,1fr)}
  .spec-strip .cell:nth-child(2){border-right:none}
  .amenities{grid-template-columns:1fr}
  footer{padding:36px 24px}
}