* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg-deep:#0B0A08;
  --bg-panel:#15130F;
  --bg-panel-2:#1C1912;
  --gold:#C7A45E;
  --gold-bright:#E8C97A;
  --cream:#F3EEE2;
  --cream-dim:#CFC9BB;
  --wine:#6E2A3B;
  --forest:#2C4636;
  --line: rgba(199,164,94,0.28);
  --radius: 2px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  background:var(--bg-deep);
  color:var(--cream);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; }
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.9rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.85rem 1.6rem;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  border-radius:var(--radius);
}
.btn:hover{ transform:translateY(-1px); }
.btn .ico{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn-gold{ background:var(--gold); color:#1a1509; }
.btn-gold:hover{ background:var(--gold-bright); }
.btn-outline{ border-color:var(--cream); color:var(--bg-deep); background:var(--cream); }
.btn-outline:hover{ border-color:var(--cream); background:var(--cream); color:var(--bg-deep); }
.btn-whatsapp{ background:#1f2f22; color:#DCEEDF; border:1px solid #33513a; }
.btn-whatsapp:hover{ background:#274430; }
.btn-lg{ padding:1.05rem 2.1rem; font-size:1rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,10,8,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:0.55rem 1.5rem;
}
.brand{ display:flex; align-items:center; gap:0.6rem; margin-right:auto; }
.brand-logo{
  display:block;
  width:auto;
  height:34px;
  max-width:52px;
  object-fit:contain;
}
.brand-logo-footer{ height:42px; max-width:64px; }
.brand-word{
  height:34px;
  display:flex;
  align-items:center;
  padding-top:1px;
  font-family:var(--mono); font-size:0.74rem; line-height:1;
  letter-spacing:0.16em; color:var(--cream);
}
.main-nav{ display:flex; gap:1.7rem; }
.main-nav a{ font-size:0.84rem; color:var(--cream-dim); transition:color .2s ease; }
.main-nav a:hover{ color:var(--gold-bright); }
.nav-toggle{ display:none; position:relative; z-index:62; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:rgba(199,164,94,.08); border:1px solid var(--line); border-radius:50%; cursor:pointer; padding:6px; width:38px; height:38px; }
.nav-toggle span{
  width:22px; height:2px; background:var(--gold); display:block;
  transition:transform .3s ease, opacity .2s ease, background .2s ease;
  transform-origin:center;
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-toggle.is-active{ background:var(--gold); border-color:var(--gold); }
.nav-toggle.is-active span{ background:#17140f; }
.nav-backdrop{ display:none; }
.whatsapp-float{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:35;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#1f2f22; color:var(--gold-bright);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.04); background:#274430; box-shadow:0 16px 36px rgba(0,0,0,.42); }
.whatsapp-float .ico{ width:28px; height:28px; fill:currentColor; }

/* ---------- hero — the diagonal split is our signature, lifted straight from the flyers ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 51px);
  padding:0;
  background:var(--bg-deep);
  overflow:hidden;
}
.hero-copy{
  position:relative; z-index:2;
  grid-column:2;
  grid-row:1;
  padding:3.5rem clamp(2rem, 5vw, 6rem);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 88% 18%, rgba(199,164,94,.16), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(199,164,94,.1), transparent 26%);
}
.hero-copy::before{
  content:"";
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(199,164,94,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,164,94,.11) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(135deg, transparent 5%, #000 48%, transparent 100%);
}
.hero-copy::after{
  content:"";
  position:absolute; z-index:-1; pointer-events:none;
  width:380px; height:380px; right:-220px; top:-190px;
  border:1px solid rgba(199,164,94,.32);
  border-radius:50%;
  box-shadow:
    0 0 0 58px rgba(199,164,94,.045),
    0 0 0 116px rgba(199,164,94,.025);
}
.hero-copy h1{
  font-size:clamp(2.2rem, 4.2vw, 3.6rem);
  line-height:1.08;
  color:var(--cream);
}
.hero-copy h1 em{ color:var(--gold); font-style:normal; }
.hero-sub{
  margin-top:1.6rem; max-width:34rem;
  color:var(--cream-dim); font-size:1.05rem;
}
.hero-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:2.6rem; margin-top:3.2rem; }
.hero-stats dt{ font-family:var(--serif); font-size:1.8rem; color:var(--gold-bright); }
.hero-stats dd{ font-size:0.78rem; color:var(--cream-dim); letter-spacing:0.03em; margin-top:0.15rem; }

.hero-showcase{
  position:relative;
  grid-column:1;
  grid-row:1;
  min-width:0;
}
.showcase-slide{
  position:absolute; inset:0;
  opacity:0;
  animation:slideshow 16s infinite;
}
.showcase-slide img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
}
.showcase-slide:nth-child(1){ animation-delay:0s; }
.showcase-slide:nth-child(2){ animation-delay:4s; }
.showcase-slide:nth-child(3){ animation-delay:8s; }
.showcase-slide:nth-child(4){ animation-delay:12s; }
@keyframes slideshow{
  0%{ opacity:0; }
  3%{ opacity:1; }
  23%{ opacity:1; }
  27%{ opacity:0; }
  100%{ opacity:0; }
}
.hero-showcase::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(240deg, rgba(11,10,8,0.55) 0%, rgba(11,10,8,0.05) 40%);
}
@media (prefers-reduced-motion: reduce){
  .showcase-slide{ animation:none; opacity:1; }
  .showcase-slide:not(:first-child){ display:none; }
}

/* ---------- section shell ---------- */
section{ padding:6rem 1.5rem; }
.section-head{ max-width:1240px; width:100%; margin:0 auto 3rem; text-align:left; }
.section-head h2{
  max-width:950px;
  font-size:clamp(2rem,3vw,2.7rem);
  line-height:1.12;
  margin-top:0.35rem;
  text-wrap:balance;
}
.section-sub{ max-width:780px; color:var(--cream-dim); margin-top:1rem; }
.section-head.light h2, .section-head.light .eyebrow{ color:var(--bg-deep); }

/* ---------- zonas ---------- */
.zonas{
  max-width:none; margin:0;
  background:var(--cream); color:var(--bg-deep);
}
.zonas .section-head,
.zonas-grid{ max-width:1240px; margin-left:auto; margin-right:auto; }
.zonas .section-head{ text-align:left; }
.zonas .section-sub{ color:#5f594e; }
.zonas-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.zona-card{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.28); color:var(--bg-deep); padding:2.25rem 1.8rem;
  border:1px solid #d2c5ad; border-radius:10px;
  box-shadow:0 12px 28px rgba(45,37,23,.12);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zona-card::before,
.agente-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.zona-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 18px 38px rgba(45,37,23,.24);
}
.zona-num{ font-family:var(--mono); color:var(--gold); font-size:0.8rem; }
.zona-card h3{ font-size:1.45rem; margin-top:0.8rem; color:#17140f; }
.zona-card p{ color:#5f594e; margin-top:0.7rem; font-size:0.92rem; }

/* ---------- propiedades ---------- */
.propiedades{
  position:relative; isolation:isolate;
  max-width:1240px; margin:0 auto;
}
.propiedades::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23C7A45E' stroke-opacity='.13'%3E%3Cpath d='M90 18 162 90 90 162 18 90Z'/%3E%3Cpath d='M90 54 126 90 90 126 54 90Z'/%3E%3Ccircle cx='90' cy='90' r='4' fill='%23C7A45E' fill-opacity='.22' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center top;
}
.propiedades .section-head,
.agentes .section-head{ max-width:none; }
.filters{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter-btn{
  background:transparent; border:1px solid var(--line); color:var(--cream-dim);
  font-family:var(--sans); font-size:0.82rem; padding:0.55rem 1.1rem;
  border-radius:100px; cursor:pointer; transition:all .18s ease;
}
.filter-btn:hover{ border-color:var(--gold); color:var(--cream); }
.filter-btn.is-active{ background:var(--gold); border-color:var(--gold); color:#1a1509; font-weight:600; }

.cards-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.6rem;
}
.no-results{ color:var(--cream-dim); padding:2rem 0; }

.p-card{
  background:var(--cream);
  color:var(--bg-deep);
  border:1px solid #d8ccb5;
  border-radius:10px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.p-card:hover{
  transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 20px 42px rgba(0,0,0,.28);
}
.p-card-img{
  position:relative; cursor:zoom-in;
  aspect-ratio:4/3; overflow:hidden;
}
.p-card-img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s ease; }
.p-card:hover .p-card-img img{ transform:scale(1.06); }
.p-card-tag{
  position:absolute; top:0.8rem; left:0.8rem;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  padding:0.38rem 0.7rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  text-transform:uppercase;
}
.p-card-body{ padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:0.85rem; flex:1; }
.p-card-body h3{ font-size:1.42rem; color:#17140f; }
.p-card-zone{ font-size:0.78rem; color:#8a692d; letter-spacing:0.03em; }
.p-card-price{ font-family:var(--serif); font-size:1.55rem; color:#8a692d; }
.p-card-price small{ font-family:var(--sans); font-size:0.7rem; color:#6b655a; display:block; letter-spacing:0.05em; text-transform:uppercase; }
.p-card-specs{
  display:flex; flex-wrap:wrap; gap:0.4rem 0.9rem;
  font-size:0.8rem; color:#5f594e; border-top:1px solid var(--line); padding-top:0.8rem;
}
.p-card-specs span{ white-space:nowrap; }
.p-card-cta{ margin-top:auto; justify-content:center; font-size:0.85rem; padding:0.72rem 1rem; }

/* ---------- por qué RB ---------- */
.porque{ background:var(--cream); color:var(--bg-deep); }
.porque-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem;
}
.porque .section-head{ max-width:1240px; }
.porque-card{ }
.porque-ico{ width:40px; height:40px; color:var(--wine); }
.porque-card h3{ font-size:1.15rem; margin-top:1.1rem; color:var(--bg-deep); }
.porque-card p{ margin-top:0.6rem; font-size:0.92rem; color:#4a4438; }

/* ---------- agentes ---------- */
.agentes{
  position:relative; isolation:isolate;
  max-width:1240px; margin:0 auto;
}
.agentes::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260'%3E%3Cg fill='none' stroke='%23C7A45E' stroke-opacity='.14'%3E%3Cpath d='M20 240V130a70 70 0 0 1 140 0v110M200 240V90a70 70 0 0 1 140 0v150'/%3E%3Cpath d='M45 240V132a45 45 0 0 1 90 0v108M225 240V92a45 45 0 0 1 90 0v148'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center bottom;
}
.agentes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.agente-card{
  position:relative; overflow:hidden;
  background:var(--cream); color:var(--bg-deep); border:1px solid #d8ccb5;
  border-radius:10px; padding:2.6rem; text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.agente-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 18px 38px rgba(0,0,0,.26);
}
.agente-initials{
  width:64px; height:64px; margin:0 auto;
  background:#1f2f22;
  border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.3rem; color:var(--gold);
}
.agente-card h3{ font-size:1.35rem; margin-top:1.1rem; color:#17140f; }
.agente-card p{ color:#5f594e; font-size:0.88rem; margin-top:0.25rem; margin-bottom:1.5rem; }
.agente-card .btn-whatsapp{ width:100%; }
.wa-label{ white-space:nowrap; }
.agente-phone{
  color:#8a8378; font-size:0.78rem; letter-spacing:0.03em;
  margin-top:0.9rem !important; margin-bottom:0 !important;
}
.agente-social{
  display:flex; align-items:center; justify-content:center;
  gap:0.9rem; margin-top:1.3rem;
}
.social-ico{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  background:none; border:none;
  color:#8a692d;
  transition:color .2s ease, transform .2s ease;
}
.social-ico svg{ width:100%; height:100%; fill:currentColor; }
.social-ico:hover{ color:var(--gold); transform:translateY(-2px); }

/* ---------- cta banner ---------- */
.cta-banner{
  background:var(--forest);
  text-align:center;
  padding:6rem 1.5rem;
}
.cta-banner h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--cream); }
.cta-banner p{ color:#D6E3D9; max-width:36rem; margin:1rem auto 2.2rem; }

/* ---------- footer ---------- */
.site-footer{
  background-color:var(--bg-panel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='120' viewBox='0 0 520 120'%3E%3Cpath d='M0 98h70V62h44v36h62V38h68v60h48V72h58v26h64V48h54v50h52' fill='none' stroke='%23C7A45E' stroke-opacity='.14'/%3E%3C/svg%3E");
  background-position:center bottom; background-repeat:repeat-x;
  border-top:1px solid var(--line); padding:3rem 1.5rem 2rem;
}
.footer-inner{ max-width:1240px; margin:0 auto; text-align:center; }
.footer-brand{ display:inline-flex; align-items:center; gap:0.6rem; margin-bottom:1.2rem; }
.footer-inner p{ color:var(--cream-dim); font-size:0.85rem; margin-top:0.4rem; }
.footer-legal{ opacity:0.65; margin-top:1.2rem; font-size:0.75rem; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(6,5,4,0.94);
  display:none; align-items:center; justify-content:center; z-index:200; padding:2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-height:92vh; max-width:92vw; border:1px solid var(--line); }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.8rem;
  background:none; border:1px solid var(--line); color:var(--cream);
  width:44px; height:44px; font-size:1.6rem; cursor:pointer; border-radius:50%;
  line-height:1;
}
.lightbox-close:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ================= responsive ================= */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero-showcase{ grid-column:1; grid-row:1; clip-path:none; height:52vh; }
  .hero-copy{ grid-column:1; grid-row:2; padding:3rem 1.6rem 3.5rem; }
  .hero-copy::before{ background-size:54px 54px; }
  .hero-copy::after{ width:280px; height:280px; right:-180px; top:-150px; }
  .zonas-grid, .porque-grid{ grid-template-columns:repeat(2,1fr); }
  .agentes-grid{ grid-template-columns:1fr; }
  .main-nav{
    display:flex; position:absolute; z-index:61; top:calc(100% + .75rem); left:1rem; right:1rem;
    background:#15130f; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    flex-direction:column; padding:.75rem; gap:.2rem;
    opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98);
    transform-origin:top; transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .main-nav a{ padding:.9rem 1rem; border-radius:7px; font-size:.95rem; }
  .main-nav a:hover{ background:rgba(199,164,94,.1); }
  .main-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(3,3,2,.72); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
  }
  .nav-backdrop.is-visible{ opacity:1; visibility:visible; }
  .nav-toggle{ display:flex; }
}
@media (min-width:981px){
  .nav-toggle{ display:none; }
}
@media (max-width:560px){
  .zonas-grid, .porque-grid{ grid-template-columns:1fr; }
  section{ padding:4rem 1.2rem; }
  .hero-stats{ gap:1.6rem; flex-wrap:wrap; }
  .whatsapp-float{ right:1rem; bottom:1rem; width:54px; height:54px; }
}