/* ============================================================
   RIBAR — sistema de diseño
   Tipografía: Archivo (titulares) + Inter (texto / datos)
   Color: verde institucional #00A000, negro #15171A, blanco,
   gris concreto para paneles neutros.
   ============================================================ */

:root{
  --ink:#15171A;
  --ink-soft:#3A3D42;
  --steel:#5B6570;
  --paper:#FFFFFF;
  --concrete:#ECEEEC;
  --concrete-line:#D8DBD8;
  --green:#00A000;
  --green-deep:#00701A;
  --green-tint:#E8F6EA;
  --line: rgba(21,23,26,0.12);
  --radius: 3px;
  --maxw: 1180px;
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem,4.2vw,3.6rem);}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:60ch;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{padding:88px 0;}
@media(max-width:720px){section{padding:56px 0;}}

/* ---------- structural marks (blueprint corner ticks) ---------- */
.tick{position:relative;}
.tick::before{
  content:"";
  position:absolute; top:0; left:0;
  width:22px; height:22px;
  border-top:2px solid var(--green);
  border-left:2px solid var(--green);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:13px 24px; border-radius:var(--radius);
  text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-deep);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline-light:hover{background:#fff; color:var(--ink);}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:42px; width:auto;}
.brand-text{font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--ink); line-height:1.1;}
.brand-text span{display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.06em; color:var(--steel);}
nav.main-nav{display:flex; align-items:center; gap:28px;}
nav.main-nav a{font-size:.93rem; font-weight:600; text-decoration:none; color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ink); border-color:var(--green);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer;}
@media(max-width:920px){
  nav.main-nav{position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:18px 28px; border-bottom:1px solid var(--line); display:none; gap:16px;}
  nav.main-nav.open{display:flex;}
  .menu-toggle{display:block;}
  .nav-cta .btn-outline{display:none;}
}

/* ---------- hero ---------- */
.hero{
  background:var(--ink); color:#fff;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  min-height:560px;
}
.hero-copy{padding:80px 56px 80px 28px; display:flex; flex-direction:column; justify-content:center;}
@media(min-width:1240px){.hero-copy{padding-left:calc((100vw - var(--maxw))/2 + 28px);}}
.hero-copy .eyebrow{color:var(--green); font-weight:700; font-size:.85rem; margin-bottom:14px;}
.hero-copy h1{color:#fff;}
.hero-copy p{color:#C7CBD1; font-size:1.1rem;}
.hero-actions{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
.hero-figure{position:relative; overflow:hidden;}
.hero-figure img{width:100%; height:100%; object-fit:cover; min-height:420px;}
.hero-figure::after{content:"";position:absolute; inset:0; background:linear-gradient(115deg, rgba(21,23,26,.55) 0%, rgba(21,23,26,0) 42%);}
@media(max-width:920px){
  .hero{grid-template-columns:1fr; min-height:0;}
  .hero-copy{padding:56px 28px 44px;}
  .hero-figure img{min-height:280px;}
}

/* ---------- page header (non-home) ---------- */
.page-hero{background:var(--ink); color:#fff; padding:64px 0 56px;}
.page-hero .eyebrow{color:var(--green); font-weight:700; font-size:.85rem; margin-bottom:10px;}
.page-hero h1{color:#fff; max-width:38ch;}
.page-hero p{color:#C7CBD1; max-width:62ch; font-size:1.08rem;}
.breadcrumb{font-size:.85rem; color:#9AA1A8; margin-bottom:18px;}
.breadcrumb a{color:#C7CBD1; text-decoration:none;}
.breadcrumb a:hover{color:#fff;}

/* ---------- sections ---------- */
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow{color:var(--green); font-weight:700; font-size:.85rem; margin-bottom:10px;}
.bg-concrete{background:var(--concrete);}
.bg-ink{background:var(--ink); color:#fff;}
.bg-ink h2, .bg-ink h3{color:#fff;}
.bg-ink p{color:#C7CBD1;}

/* ---------- value pillars (Servicio / Calidad / Compromiso) ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar{background:#fff; padding:36px 30px;}
.pillar .num{font-family:var(--font-head); font-weight:800; color:var(--green); font-size:.85rem; letter-spacing:.04em; margin-bottom:14px;}
@media(max-width:820px){.pillars{grid-template-columns:1fr;}}

/* ---------- project cards ---------- */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:980px){.project-grid{grid-template-columns:1fr;}}
.project-card{border:1px solid var(--line); background:#fff; text-decoration:none; color:inherit; display:flex; flex-direction:column;}
.project-card .thumb{aspect-ratio:4/5; overflow:hidden; background:var(--concrete);}
.project-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.project-card:hover .thumb img{transform:scale(1.04);}
.project-card .body{padding:22px 24px 26px; flex:1; display:flex; flex-direction:column;}
.status-tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:2px; margin-bottom:12px; width:fit-content;}
.status-venta{background:var(--green-tint); color:var(--green-deep);}
.status-preventa{background:#FFF3D9; color:#8A5A00;}
.status-vendido{background:var(--concrete); color:var(--steel);}
.project-card h3{margin-bottom:6px;}
.project-card .loc{color:var(--steel); font-size:.9rem; margin-bottom:14px;}
.project-card .specs{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-soft); display:flex; justify-content:space-between;}

/* ---------- spec sheet (technical data table) ---------- */
.spec-sheet{border:1px solid var(--line); background:#fff;}
.spec-sheet .row{display:flex; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid var(--line); font-size:.95rem;}
.spec-sheet .row:last-child{border-bottom:none;}
.spec-sheet .row dt{color:var(--steel); font-weight:600;}
.spec-sheet .row dd{margin:0; font-weight:700; text-align:right; font-family:var(--font-head);}

/* ---------- unit price table ---------- */
table.price-table{width:100%; border-collapse:collapse; font-size:.95rem;}
table.price-table th{text-align:left; font-family:var(--font-head); font-size:.75rem; letter-spacing:.04em; color:var(--steel); font-weight:700; padding:12px 16px; border-bottom:2px solid var(--ink);}
table.price-table td{padding:16px; border-bottom:1px solid var(--line);}
table.price-table td.price{font-family:var(--font-head); font-weight:800; font-size:1.05rem;}
table.price-table tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border:1px solid var(--line);}
.table-wrap table{border:none;}

/* ---------- two column media/copy ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:32px;}}
.split.reverse .split-media{order:2;}
.split-media img{width:100%; border:1px solid var(--line);}
.gallery-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:700px){.gallery-strip{grid-template-columns:1fr 1fr;}}
.gallery-strip img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line);}

/* ---------- amenities list ---------- */
.check-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
@media(max-width:600px){.check-list{grid-template-columns:1fr;}}
.check-list li{position:relative; padding-left:24px; color:var(--ink-soft); font-size:.97rem;}
.check-list li::before{content:"—"; position:absolute; left:0; color:var(--green); font-weight:700;}

/* ---------- credit / finance banner ---------- */
.finance-banner{border:1px solid var(--line); background:var(--green-tint); padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.finance-banner .amount{font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--green-deep);}

/* ---------- services grid ---------- */
.service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){.service-grid{grid-template-columns:1fr;}}
.service-card{background:#fff; padding:34px 32px;}
.service-card h3{margin-bottom:10px;}

/* ---------- team / about ---------- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px;}
@media(max-width:700px){.stat-row{grid-template-columns:1fr;}}
.stat{background:#fff; padding:28px 26px;}
.stat .n{font-family:var(--font-head); font-weight:800; font-size:2.2rem; color:var(--green); line-height:1;}
.stat .l{color:var(--steel); font-size:.88rem; margin-top:8px;}

/* ---------- blog ---------- */
.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px;}
@media(max-width:760px){.post-grid{grid-template-columns:1fr;}}
.post-card{text-decoration:none; color:inherit; border:1px solid var(--line);}
.post-card .thumb{aspect-ratio:16/9; background:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.post-card .body{padding:24px;}
.post-meta{font-size:.8rem; color:var(--steel); margin-bottom:10px;}
article.post-body{max-width:70ch; margin:0 auto;}
article.post-body h2{margin-top:1.6em;}
article.post-body p{font-size:1.05rem;}
article.post-body ul{color:var(--ink-soft); font-size:1.05rem; padding-left:1.2em;}

/* ---------- inmobiliaria section blocks ---------- */
.listing-empty{border:1.5px dashed var(--concrete-line); padding:48px 32px; text-align:center; color:var(--steel);}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--concrete-line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.97rem; background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);}
.info-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.info-row:first-child{padding-top:0;}
.info-row .label{width:110px; flex-shrink:0; font-weight:700; font-size:.85rem; color:var(--steel);}
.map-frame{border:1px solid var(--line); width:100%; height:280px; margin-top:24px;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--ink); color:#C7CBD1; padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:#fff; font-size:.8rem; letter-spacing:.04em; margin-bottom:16px; font-family:var(--font-head);}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:10px; font-size:.92rem;}
.footer-grid a{text-decoration:none; color:#C7CBD1;}
.footer-grid a:hover{color:#fff;}
.footer-brand img{height:38px; margin-bottom:14px;}
.footer-bottom{padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#8890988;}

/* ---------- whatsapp floating button ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  background:var(--green); color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.wa-float svg{width:28px; height:28px;}

/* ---------- misc ---------- */
.eyebrow{text-transform:none;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.mt-0{margin-top:0;}
.text-steel{color:var(--steel);}

/* ---------- filtros del catálogo inmobiliario ---------- */
.filtros{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; align-items:center;}
.filtros select{
  padding:11px 14px; border:1.5px solid var(--concrete-line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.94rem; background:#fff; min-width:200px;
}
.filtros select:focus{outline:2px solid var(--green); outline-offset:1px;}

/* Respaldo para navegadores sin soporte de aspect-ratio (Safari <15, WebKit viejo) */
@supports not (aspect-ratio: 4 / 3) {
  .project-card .thumb{height:340px;}
  .gallery-strip img{height:220px;}
  .post-card .thumb{height:200px;}
}

/* ---------- video embed responsivo (16:9) ---------- */
.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink);
  border:1px solid var(--line);
  overflow:hidden;
}
.video-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
@supports not (aspect-ratio: 16 / 9){
  .video-embed{height:0; padding-bottom:56.25%;}
}