/* ============================================
   BROUKIT — Design tokens
   Navy:      #0E1B2E (primary), #14263F (secondary)
   Gold:      #C89B5C (accent), #E4C594 (accent light)
   Cream:     #F6F2EA (section bg), #FBFAF7 (off-white)
   Charcoal:  #23262B (text), #6B6F76 (muted text)
   Display:   'Cormorant Garamond' — serif, editorial
   Body:      'Jost' — clean geometric sans
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --navy: #0B0B0B;
  --navy-2: #1A1A1A;
  --gold: #B8863E;
  --gold-light: #D9A94A;
  --cream: #F5F5F3;
  --off-white: #FFFFFF;
  --ink: #141414;
  --muted: #6B6B6B;
  --line: rgba(0,0,0,0.10);
  --radius: 2px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  color:var(--ink);
  background:var(--off-white);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  line-height:1.15;
  color:var(--navy);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:700;
  text-transform:uppercase;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold);
}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--navy);
  position:sticky; top:0; z-index:100;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1240px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:56px; width:auto;}
.brand-text{color:#fff; line-height:1.05;}
.brand-text .name{font-family:'Jost', sans-serif; font-size:1.2rem; letter-spacing:.14em; font-weight:400; text-transform:uppercase;}
.brand-text .name .it{color:var(--gold);}
.brand-text .tag{display:block; font-family:'Jost',sans-serif; font-size:.55rem; letter-spacing:.16em; color:var(--gold-light); text-transform:uppercase; margin-top:4px;}

.nav-links{display:flex; gap:2.1rem;}
.nav-links a{
  color:#EDEDED; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; padding:6px 0; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active{color:var(--gold-light); border-color:var(--gold);}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1.5rem;}

@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{max-height:400px; padding:8px 0 18px;}
  .nav-links a{padding:10px 32px; display:block; border-bottom:none;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:14px 26px;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  border:1px solid transparent;
}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--gold-light); transform:translateY(-1px);}
.btn-outline{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-light);}
.btn-outline-navy{border-color:var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#cfd4db;}
.footer-contact{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:34px 0;
}
.footer-contact .container{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between;
}
.fc-item{display:flex; align-items:center; gap:12px; font-size:.85rem;}
.fc-item .ic{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; color:var(--gold-light); flex-shrink:0;
}
.fc-item .lbl{color:#8A93A0; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;}
.fc-item .val{color:#fff;}

.footer-main{padding:44px 0 24px;}
.footer-main .container{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;
}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand .brand img{height:64px;}
.footer-brand p{font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:#fff; max-width:280px;}
.footer-col h4{color:#fff; font-family:'Jost',sans-serif; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; font-weight:600;}
.footer-col a{display:block; color:#B8BFC9; font-size:.85rem; margin-bottom:10px;}
.footer-col a:hover{color:var(--gold-light);}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{border-color:var(--gold); color:var(--gold-light);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px 0; font-size:.72rem; color:#7C8492;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

@media (max-width:800px){
  .footer-main .container{grid-template-columns:1fr;}
}

/* ============================================
   PROPIEDADES — mini site
   ============================================ */
.prop-hero{
  background:var(--navy);
  color:#fff;
  padding:64px 0 48px;
  text-align:center;
}
.prop-hero .eyebrow{justify-content:center;}
.prop-hero h1{color:#fff; font-size:2.6rem; margin-top:10px;}
.prop-hero p{color:#C7CDD7; max-width:560px; margin:14px auto 0; font-size:.95rem;}

.filters{
  background:var(--off-white);
  border-bottom:1px solid var(--line);
  position:sticky; top:74px; z-index:90;
}
.filters .container{
  padding:18px 32px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.filter-field{display:flex; flex-direction:column; gap:5px;}
.filter-field label{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.filter-field select, .filter-field input{
  border:1px solid var(--line);
  background:#fff;
  padding:9px 12px;
  font-family:'Jost',sans-serif;
  font-size:.85rem;
  color:var(--ink);
  border-radius:var(--radius);
  min-width:150px;
}
.filter-field select:focus, .filter-field input:focus{outline:2px solid var(--gold); outline-offset:1px;}
.filter-reset{
  margin-left:auto; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--muted); padding-bottom:2px; align-self:flex-end;
  height:fit-content;
}
.filter-reset:hover{color:var(--navy); border-color:var(--navy);}

.results-bar{
  max-width:1240px; margin:0 auto; padding:26px 32px 0;
  display:flex; justify-content:space-between; align-items:baseline;
}
.results-bar .count{font-size:.82rem; color:var(--muted);}
.results-bar .count strong{color:var(--ink);}

.prop-grid{
  max-width:1240px; margin:0 auto; padding:22px 32px 70px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width:980px){.prop-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.prop-grid{grid-template-columns:1fr;}}

.prop-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.prop-card:hover{box-shadow:0 16px 32px rgba(14,27,46,.12); transform:translateY(-3px);}
.prop-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:#e9e5db;}
.prop-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.prop-card:hover .prop-media img{transform:scale(1.05);}
.badge{
  position:absolute; top:14px; left:14px;
  background:var(--navy); color:var(--gold-light);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:6px 12px; border-radius:2px;
}
.badge.sold{background:#6B6F76; color:#fff;}
.badge.rent{background:var(--gold); color:var(--navy);}
.prop-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.prop-loc{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.prop-name{font-size:1.3rem; color:var(--navy);}
.prop-price{font-family:'Jost',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink);}
.prop-price span{font-weight:400; color:var(--muted); font-size:.78rem;}
.prop-specs{display:flex; gap:14px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line);}
.prop-specs .spec{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted);}

.empty-state{
  text-align:center; padding:70px 20px; color:var(--muted);
  grid-column:1/-1;
}
.empty-state h3{color:var(--navy); margin-bottom:8px;}

/* ---------- Modal detail ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(14,27,46,.55);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:200;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; max-width:920px; width:100%; max-height:88vh; overflow-y:auto;
  border-radius:var(--radius); position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.modal-close:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.modal-gallery{aspect-ratio:16/8; overflow:hidden; background:#e9e5db;}
.modal-gallery img{width:100%; height:100%; object-fit:cover;}
.modal-body{padding:32px 36px 36px;}
.modal-body .prop-loc{margin-bottom:6px;}
.modal-body h2{font-size:2rem; margin-bottom:10px;}
.modal-price{font-size:1.3rem; font-weight:600; color:var(--navy); margin-bottom:20px;}
.modal-specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  background:var(--cream); padding:18px; border-radius:var(--radius); margin-bottom:22px;
}
.modal-specs .spec{text-align:center;}
.modal-specs .spec .num{font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--navy); display:block;}
.modal-specs .spec .lbl{font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.modal-desc{color:var(--ink); font-size:.95rem; line-height:1.7; margin-bottom:26px;}
.modal-actions{display:flex; gap:14px; flex-wrap:wrap;}

@media (max-width:640px){
  .modal-specs{grid-template-columns:repeat(2,1fr);}
  .modal-body{padding:24px 20px 28px;}
}