:root { --ink:#1b2421; --forest:#1d3029; --green:#315948; --cream:#eee8dd; --paper:#faf7f0; --gold:#c97843; --line:#d5cec1; --ash:#6d716b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,select { font:inherit; }
button { color:inherit; }
img { display:block; width:100%; }
.text-en { display:none; }
.lang-en .text-es { display:none; }
.lang-en .text-en { display:inline; }
[hidden] { display:none !important; }
.search-panel button { border:0; cursor:pointer; }

.site-header { align-items:center; background:rgba(255,253,248,.96); border-bottom:1px solid rgba(17,45,43,.1); display:flex; height:84px; justify-content:space-between; left:0; padding:0 5vw; position:absolute; right:0; top:0; z-index:20; }
.brand { align-items:center; display:inline-flex; font-size:17px; font-weight:800; letter-spacing:.08em; }
.brand-lockup { display:grid; line-height:1; }
.brand-lockup>span>span { color:var(--gold); font-weight:500; }
.brand-lockup small { color:#787a73; font-size:7px; font-weight:800; letter-spacing:.23em; margin-top:6px; }
.brand-mark { display:inline-flex; margin-right:11px; width:48px; }
.brand-mark svg { fill:none; height:36px; stroke:var(--green); stroke-linecap:round; stroke-linejoin:round; stroke-width:2.3; width:48px; }
.main-nav { display:flex; gap:2.2vw; }
.main-nav a { font-size:13px; font-weight:700; letter-spacing:.03em; position:relative; }
.main-nav a::after { background:var(--gold); bottom:-8px; content:""; height:2px; left:0; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; width:100%; }
.main-nav a:hover::after { transform:scaleX(1); }
.header-actions { align-items:center; display:flex; gap:10px; }
.language,.menu-button { align-items:center; background:none; border:0; cursor:pointer; display:flex; font-size:12px; font-weight:800; gap:6px; padding:10px; }
.header-whatsapp { align-items:center; background:var(--forest); color:white; display:inline-flex; font-size:13px; font-weight:700; gap:7px; padding:13px 17px; }
.menu-button { display:none; }

.hero { background:#1c2924 center 48%/cover no-repeat; height:790px; padding:84px 5vw 0; position:relative; }
.hero-shade { background:linear-gradient(90deg,rgba(16,25,22,.9) 0%,rgba(16,25,22,.6) 42%,rgba(16,25,22,.13) 75%),linear-gradient(0deg,rgba(14,22,19,.42),transparent 50%); inset:84px 0 0; position:absolute; }
.hero-content { color:white; max-width:760px; position:relative; top:125px; z-index:2; }
.eyebrow { color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.22em; margin:0 0 18px; text-transform:uppercase; }
.eyebrow.light { color:#e7b98f; }
.hero h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(54px,6.4vw,94px); font-weight:400; letter-spacing:-.055em; line-height:.9; margin:0; }
.hero h1 em { color:#e3a977; font-weight:400; }
.hero-intro { font-size:17px; line-height:1.7; margin:28px 0 0; max-width:540px; }
.search-panel { align-items:flex-end; background:var(--paper); border-top:4px solid var(--gold); bottom:-58px; box-shadow:0 18px 45px rgba(19,31,27,.24); display:grid; grid-template-columns:1fr 1fr 1fr auto; left:5vw; max-width:1180px; padding:23px 28px 25px; position:absolute; right:5vw; z-index:5; }
.search-panel label { border-right:1px solid var(--line); display:block; margin-right:25px; padding-right:22px; }
.search-panel label>span { color:#7a776f; display:block; font-size:10px; font-weight:800; letter-spacing:.13em; margin-bottom:11px; text-transform:uppercase; }
.select-wrap { align-items:center; display:flex; gap:8px; }
.select-wrap select { appearance:none; background:transparent; border:0; color:var(--ink); cursor:pointer; font-size:14px; font-weight:700; outline:0; width:100%; }
.select-wrap svg:last-child { margin-left:auto; }
.search-button { align-items:center; background:var(--gold); color:white; display:flex; font-size:13px; font-weight:800; gap:10px; justify-content:center; min-height:54px; padding:0 24px; transition:background .2s ease; }
.search-button:hover { background:#ad7b3a; }

.volcano-ribbon { background:#18221f; color:white; display:grid; gap:34px; grid-template-columns:repeat(3,1fr); padding:110px 7vw 52px; }
.volcano-ribbon>div { border-left:1px solid rgba(255,255,255,.18); display:grid; gap:5px; padding-left:22px; position:relative; }
.volcano-ribbon>div>span { color:var(--gold); font-family:Georgia,serif; font-size:13px; left:-1px; position:absolute; top:-29px; }
.volcano-ribbon strong { font-family:Georgia,serif; font-size:21px; font-weight:400; letter-spacing:.06em; }
.volcano-ribbon small { color:#98aaa2; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.section { margin:0 auto; max-width:1320px; padding:105px 5vw 110px; }
.section-heading { align-items:flex-end; display:flex; justify-content:space-between; margin-bottom:42px; }
h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(38px,4.5vw,66px); font-weight:400; letter-spacing:-.04em; line-height:1.02; margin:0; }
.section-copy { max-width:420px; }
.section-copy p { color:#676860; line-height:1.65; margin:0 0 10px; }
.section-copy span { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.property-grid { display:grid; gap:28px; grid-template-columns:repeat(3,1fr); }
.property-card { background:white; border:1px solid #e3ded4; min-width:0; transition:transform .25s ease,box-shadow .25s ease; }
.property-card:hover { box-shadow:0 18px 40px rgba(22,57,52,.12); transform:translateY(-5px); }
.property-image { aspect-ratio:1.38; overflow:hidden; position:relative; }
.property-image img { height:100%; object-fit:cover; transition:transform .6s ease; }
.property-card:hover .property-image img { transform:scale(1.035); }
.demo-badge { background:rgba(255,253,248,.92); color:var(--forest); font-size:9px; font-weight:900; left:16px; letter-spacing:.14em; padding:8px 10px; position:absolute; top:16px; }
.property-price { background:var(--forest); bottom:0; color:white; font-family:Georgia,serif; font-size:20px; padding:12px 17px; position:absolute; right:0; }
.property-body { padding:22px 22px 24px; }
.property-location { align-items:center; color:var(--gold); display:flex; font-size:11px; font-weight:800; gap:4px; letter-spacing:.08em; margin:0 0 12px; text-transform:uppercase; }
.property-body h3 { font-family:Georgia,serif; font-size:24px; font-weight:400; margin:0 0 18px; }
.property-meta { border-bottom:1px solid #e6e1d7; display:flex; gap:20px; padding-bottom:17px; }
.property-meta span { align-items:center; color:#62665f; display:flex; font-size:12px; gap:6px; }
.property-body>a { align-items:center; display:flex; font-size:12px; font-weight:800; justify-content:space-between; letter-spacing:.06em; padding-top:17px; text-transform:uppercase; }
.empty-state { align-items:center; border:1px solid var(--line); display:flex; flex-direction:column; gap:16px; padding:70px 20px; text-align:center; }
.empty-state button { background:var(--forest); border:0; color:white; cursor:pointer; padding:12px 18px; }

.areas-section { background:linear-gradient(145deg,#1d3029,#121d19); color:white; padding:100px 5vw 110px; }
.areas-intro { margin:0 auto 44px; max-width:760px; text-align:center; }
.areas-intro>p:last-child { color:#c8d3d0; line-height:1.7; margin:24px auto 0; max-width:600px; }
.area-grid { display:grid; gap:14px; grid-template-columns:repeat(6,1fr); margin:0 auto; max-width:1320px; }
.area-card { aspect-ratio:1.28; background:#0e312e; border:0; cursor:pointer; grid-column:span 2; overflow:hidden; padding:0; position:relative; text-align:left; }
.area-card:nth-child(-n+2) { aspect-ratio:1.72; grid-column:span 3; }
.area-card img { height:100%; object-fit:cover; transition:transform .7s ease; }
.area-card:hover img { transform:scale(1.05); }
.area-overlay { background:linear-gradient(0deg,rgba(7,32,29,.9),transparent 66%); inset:0; position:absolute; }
.area-content { bottom:0; color:white; display:grid; left:0; padding:30px; position:absolute; right:0; }
.area-content strong { font-family:Georgia,serif; font-size:36px; font-weight:400; }
.area-content small { color:#d6ddda; line-height:1.55; margin-top:10px; max-width:300px; }
.area-content i { align-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:flex; height:40px; justify-content:center; justify-self:end; margin-top:17px; width:40px; }

.trust-section { align-items:stretch; display:grid; grid-template-columns:1.1fr .9fr; min-height:570px; }
.trust-visual { align-content:center; background:linear-gradient(rgba(17,27,23,.38),rgba(17,27,23,.68)),url('../images/volcan-baru-hero.png') center/cover no-repeat; color:white; display:grid; font-family:Georgia,serif; font-size:clamp(38px,5vw,72px); gap:0; justify-content:center; overflow:hidden; padding:70px; text-align:center; }
.trust-visual small { color:#e8c19d; font-family:Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:.25em; margin-bottom:12px; }
.trust-visual b { color:#e3a977; font-size:clamp(48px,6vw,90px); font-style:italic; font-weight:400; line-height:.8; }
.trust-copy { align-content:center; background:#e9e1d4; padding:7vw; }
.trust-copy>p:nth-of-type(2) { color:#626760; line-height:1.8; margin:25px 0 32px; max-width:520px; }
.trust-copy>div { display:flex; gap:22px; }
.trust-copy a { align-items:center; border-bottom:1px solid var(--ink); display:inline-flex; font-size:12px; font-weight:800; gap:8px; padding:11px 0; text-transform:uppercase; }

.contact-section { align-items:center; background:#202a26; border-top:5px solid var(--gold); color:white; display:grid; gap:9vw; grid-template-columns:1.1fr .9fr; padding:95px 8vw; }
.contact-section>div:last-child>p { color:#c7d0cd; line-height:1.7; margin:0 0 26px; max-width:480px; }
.contact-button { align-items:center; background:var(--gold); display:inline-flex; font-size:13px; font-weight:800; gap:9px; padding:16px 20px; }
footer { align-items:center; background:#0b2422; color:#dbe3e0; display:grid; gap:30px; grid-template-columns:1fr auto; padding:55px 5vw 35px; }
.footer-brand { color:white; }
.footer-brand .brand-mark svg { stroke:#e2c089; }
.footer-brand .brand-lockup small { color:#82958e; }
footer>div { text-align:right; }
footer>div p { color:#8ea29e; font-size:12px; margin:0 0 8px; }
footer>div a { color:white; font-size:18px; font-weight:700; }
footer small { border-top:1px solid rgba(255,255,255,.12); color:#81938f; font-size:10px; grid-column:1/-1; padding-top:22px; text-align:center; }
.single-header { position:relative; }
.single-hero { height:min(70vh,720px); overflow:hidden; position:relative; }
.single-hero img { height:100%; object-fit:cover; }
.single-content { margin:0 auto; max-width:1180px; padding:75px 5vw 110px; }
.single-title { align-items:flex-end; display:flex; gap:30px; justify-content:space-between; }
.single-title h1 { font-family:Georgia,serif; font-size:clamp(42px,6vw,78px); font-weight:400; letter-spacing:-.045em; line-height:1; margin:0; max-width:760px; }
.single-title strong { color:var(--green); font-family:Georgia,serif; font-size:32px; font-weight:400; white-space:nowrap; }
.property-meta.large { border-bottom:1px solid var(--line); border-top:1px solid var(--line); gap:34px; margin-top:34px; padding:22px 0; }
.property-meta.large span { font-size:14px; }
.single-grid { display:grid; gap:9vw; grid-template-columns:1.3fr .7fr; margin-top:55px; }
.single-description { color:#5e625b; font-size:17px; line-height:1.8; }
.demo-note { background:var(--cream); border-left:3px solid var(--gold); font-size:13px; padding:18px; }
.single-grid aside { align-self:start; background:var(--forest); color:white; padding:38px; }
.single-grid aside h2 { font-size:34px; }
.single-grid aside p { color:#c6d1ce; line-height:1.6; margin:20px 0 25px; }
.basic-page { margin:0 auto; max-width:900px; min-height:80vh; padding:70px 5vw; }
.basic-page article { margin-top:70px; }
.basic-page h1 { font-family:Georgia,serif; font-size:54px; font-weight:400; }

@media (max-width:960px) {
  .main-nav { background:var(--paper); box-shadow:0 20px 30px rgba(0,0,0,.12); display:none; flex-direction:column; left:0; padding:25px 5vw; position:absolute; right:0; top:84px; }
  .main-nav.is-open { display:flex; }
  .menu-button { display:flex; }
  .header-whatsapp { display:none; }
  .search-panel { grid-template-columns:1fr 1fr; row-gap:25px; }
  .search-panel label:nth-child(2) { border-right:0; }
  .property-grid { grid-template-columns:repeat(2,1fr); }
  .volcano-ribbon { gap:20px; padding-left:5vw; padding-right:5vw; }
  .area-grid { grid-template-columns:repeat(2,1fr); }
  .area-card,.area-card:nth-child(-n+2) { aspect-ratio:1.2; grid-column:span 1; }
  .area-card:last-child { grid-column:1/-1; }
}
@media (max-width:680px) {
  .site-header { height:72px; padding:0 18px; }
  .brand { font-size:14px; }
  .brand-mark,.brand-mark svg { width:38px; }
  .main-nav { top:72px; }
  .hero { height:720px; padding:72px 22px 0; }
  .hero-shade { inset:72px 0 0; }
  .hero-content { top:96px; }
  .hero h1 { font-size:56px; }
  .hero-intro { font-size:15px; max-width:90%; }
  .search-panel { bottom:-183px; grid-template-columns:1fr; left:16px; padding:22px; right:16px; }
  .search-panel label { border-bottom:1px solid var(--line); border-right:0; margin:0; padding:0 0 14px; }
  .search-panel label>span { margin-bottom:7px; }
  .properties-section { padding-top:90px; }
  .volcano-ribbon { gap:34px; grid-template-columns:1fr; padding:225px 24px 55px; }
  .section { padding-left:20px; padding-right:20px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:22px; }
  .property-grid { grid-template-columns:1fr; }
  .area-grid { grid-template-columns:1fr; }
  .area-card { aspect-ratio:1.15; }
  .area-card,.area-card:nth-child(-n+2),.area-card:last-child { grid-column:1; }
  .trust-section,.contact-section { grid-template-columns:1fr; }
  .trust-visual { min-height:380px; padding:50px 20px; }
  .trust-copy,.contact-section { padding:70px 24px; }
  .trust-copy>div { align-items:flex-start; flex-direction:column; gap:5px; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer>div { text-align:center; }
  .single-hero { height:48vh; }
  .single-title { align-items:flex-start; flex-direction:column; }
  .single-grid { grid-template-columns:1fr; }
}