:root{
  --green-900:#0f2419; --green-800:#1f3a2b; --green-700:#2a5239; --green-600:#3a6b4a;
  --gold:#c8a24b; --gold-soft:#d9b96b;
  --beige:#f4efe6; --beige-2:#ebe3d4;
  --rose:#c47a7a; --rose-soft:#e6b3b3;
  --ink:#0f0f0f; --ink-2:#262624; --muted:#6b6e6a;
  --line:rgba(15,15,15,0.08); --line-light:rgba(255,255,255,0.14);
  --shadow-1: 0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.06);
  --shadow-2: 0 24px 60px -20px rgba(15,15,15,0.25);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius-s: 6px; --radius-m: 14px; --radius-l: 22px;
  --container: 1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--sans); color:var(--ink); background:var(--beige); -webkit-font-smoothing:antialiased; line-height:1.55}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{background:var(--gold); color:var(--ink)}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin:0}
h1{font-size: clamp(40px, 6vw, 72px); line-height:1.04; letter-spacing:-0.02em}
h2{font-size: clamp(28px, 3.6vw, 44px); line-height:1.1}
h3{font-size: clamp(22px, 2.4vw, 28px)}
.eyebrow{font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:600; display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold); display:inline-block}
.lead{font-size:18px; color:var(--ink-2); max-width:62ch}
.muted{color:var(--muted)}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
section{padding: clamp(60px, 8vw, 100px) 0; position:relative}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:500; font-size:14px; letter-spacing:0.02em; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; border:1px solid transparent}
.btn:hover{transform: translateY(-1px)}
.btn--primary{background:var(--green-800); color:var(--beige)}
.btn--primary:hover{background:var(--green-700); box-shadow:var(--shadow-2)}
.btn--gold{background:var(--gold); color:var(--ink)}
.btn--gold:hover{background:var(--gold-soft)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:var(--ink); color:var(--beige); border-color:var(--ink)}
.btn--whatsapp{background:#25D366; color:#0a3a1c}
.btn--whatsapp:hover{background:#1ebe5a}
.btn--lg{padding:18px 28px; font-size:15px}
.btn .icon{width:18px; height:18px; flex:0 0 auto}

/* Header */
.header{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px 28px; transition: all .35s ease; border-bottom:1px solid transparent; background:rgba(244,239,230,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.header__brand{display:flex; align-items:center; gap:12px}
.header__brand img{height:48px; width:auto}
.header__brand .name{font-family:var(--serif); font-size:18px; letter-spacing:0.06em; color:var(--ink); text-transform:uppercase}
.nav{display:flex; align-items:center; gap:32px}
.nav a{color:var(--ink-2); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500; position:relative; padding:6px 0}
.nav a.is-active{color:var(--green-800)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition: transform .3s ease}
.nav a:hover::after, .nav a.is-active::after{transform:scaleX(1)}
.header-cta{background:var(--green-800); color:var(--beige); padding:10px 18px; border-radius:999px; font-size:13px; letter-spacing:0.04em; transition:all .25s ease}
.header-cta:hover{background:var(--green-700)}
.menu-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:transparent; color:var(--ink); border:1px solid var(--line)}
.menu-btn svg{width:18px; height:18px}
.mobile-nav{display:none; position:fixed; inset:0; z-index:80; background:var(--green-900); color:#fff; flex-direction:column; padding:80px 28px 32px}
.mobile-nav.is-open{display:flex}
.mobile-nav a{font-family:var(--serif); font-size:32px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.08)}
.mobile-nav .close{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff; display:flex; align-items:center; justify-content:center}
@media (max-width:840px){.nav, .header-cta{display:none} .menu-btn{display:inline-flex}}

/* Hero */
.hero-r{
  position:relative; padding-top: clamp(120px, 16vw, 180px); padding-bottom: clamp(40px, 6vw, 80px);
  background:
    linear-gradient(180deg, rgba(244,239,230,0.92), rgba(244,239,230,0.96)),
    url("../images/villa_hero_premium.jpg") center / cover no-repeat;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-r__grid{display:grid; grid-template-columns: 1.15fr 1fr; gap:64px; align-items:center}
.hero-r .eyebrow-rose{
  font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--rose); font-weight:600;
  display:inline-flex; align-items:center; gap:10px;
}
.hero-r .eyebrow-rose svg{width:14px; height:14px}
.hero-r h1{margin-top:18px; font-weight:400}
.hero-r h1 em{font-style:italic; color:var(--green-800); font-weight:400}
.hero-r__sub{margin-top:22px; font-size:18px; color:var(--ink-2); max-width:52ch}
.hero-r__facts{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px; margin-top:32px;
  padding:24px; border:1px solid var(--line); border-radius:var(--radius-l); background:rgba(255,255,255,0.85);
}
.hero-r__facts dt{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.hero-r__facts dd{margin:0; font-family:var(--serif); font-size:22px; font-weight:500; color:var(--green-800)}
.hero-r__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.hero-r__media{position:relative}
.hero-r__media .frame{
  border-radius:var(--radius-l); overflow:hidden; aspect-ratio:4/5; box-shadow: var(--shadow-2);
  border:6px solid #fff;
}
.hero-r__media .frame img{width:100%; height:100%; object-fit:cover}
.hero-r__media .badge{
  position:absolute; top:-22px; right:-22px;
  width:120px; height:120px; border-radius:50%;
  background:var(--green-800); color:var(--beige);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--serif); border:4px solid var(--beige); box-shadow: var(--shadow-2);
}
.hero-r__media .badge .num{font-size:28px; font-weight:600; color:var(--gold)}
.hero-r__media .badge .lbl{font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(244,239,230,0.7); font-family:var(--sans); font-weight:600}
@media (max-width:900px){
  .hero-r__grid{grid-template-columns:1fr; gap:40px}
  .hero-r__media{order:-1; max-width:420px}
  .hero-r__facts{grid-template-columns:1fr 1fr 1fr; gap:14px; padding:18px}
  .hero-r__facts dd{font-size:18px}
}

/* Prize section */
.prize{background:var(--beige)}
.prize__grid{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center}
.prize__list{margin-top:28px; display:grid; gap:14px}
.prize__list .item{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--radius-m); background:#fff; border:1px solid var(--line);
}
.prize__list .item svg{flex:0 0 auto; width:20px; height:20px; color:var(--gold); margin-top:2px}
.prize__list .item h4{font-family:var(--sans); font-size:14px; font-weight:600; margin-bottom:2px; color:var(--ink)}
.prize__list .item p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}
.prize__media{aspect-ratio:4/3; border-radius:var(--radius-l); overflow:hidden; box-shadow: var(--shadow-2)}
.prize__media img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){.prize__grid{grid-template-columns:1fr; gap:40px}}

/* Steps */
.steps-r{background:#fff}
.steps-r__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:rstep}
.step-r{
  background:var(--beige); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:32px 26px; position:relative;
}
.step-r::before{
  counter-increment: rstep;
  content: counter(rstep, decimal-leading-zero);
  font-family:var(--serif); font-size:48px; color:var(--gold); font-weight:500; display:block; line-height:1; margin-bottom:14px;
}
.step-r h4{font-family:var(--serif); font-size:22px; font-weight:500; margin-bottom:8px}
.step-r p{margin:0; color:var(--muted); font-size:14px}
@media (max-width:900px){.steps-r__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps-r__grid{grid-template-columns:1fr}}

/* === NUMBER GRID === */
.numbers{background:var(--beige)}
.numbers__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap}
.numbers__title{max-width:600px}
.numbers__title h2{margin-top:14px}
.numbers__legend{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:18px; font-size:13px; color:var(--ink-2);
}
.legend{display:inline-flex; align-items:center; gap:8px}
.legend .swatch{width:14px; height:14px; border-radius:4px; border:1px solid var(--line)}
.swatch--avail{background:#fff}
.swatch--pending{background:var(--gold-soft); border-color:var(--gold)}
.swatch--paid{background:var(--green-800); border-color:var(--green-900)}

.counter{
  display:flex; align-items:center; gap:18px;
  padding:16px 22px; background:#fff; border:1px solid var(--line); border-radius:999px;
}
.counter__bar{
  position:relative; width:200px; height:8px; border-radius:999px; background:var(--beige-2); overflow:hidden;
}
.counter__bar span{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius:999px; transition:width .6s cubic-bezier(.2,.8,.2,1); width:0%}
.counter__txt{font-family:var(--serif); font-size:18px; color:var(--green-800)}
.counter__txt b{font-weight:600}

.grid {
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.cell {
  position:relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-m);
  background:#fff;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size: clamp(18px, 2.4vw, 28px); font-weight:500;
  color:var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
  user-select:none;
}
.cell:hover{transform: translateY(-2px); border-color:var(--green-800); box-shadow:var(--shadow-1)}
.cell:focus-visible{outline:2px solid var(--green-800); outline-offset:2px}

.cell.is-pending{
  background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  color:var(--ink); border-color:var(--gold);
  cursor:not-allowed;
}
.cell.is-pending:hover{transform:none; box-shadow:none}
.cell.is-pending::after{
  content:"En espera";
  position:absolute; bottom:6px; font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  font-family:var(--sans); font-weight:600; opacity:0.65;
}
.cell.is-paid{
  background:linear-gradient(135deg, var(--green-700), var(--green-900));
  color:var(--gold); border-color:var(--green-900);
  cursor:not-allowed;
}
.cell.is-paid:hover{transform:none; box-shadow:none}
.cell.is-paid::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(200,162,75,0.16), transparent 60%);
  border-radius:var(--radius-m);
}
.cell.is-paid::after{
  content:"Vendido";
  position:absolute; bottom:6px; font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  font-family:var(--sans); font-weight:600; color:rgba(244,239,230,0.7);
}
.cell.is-loading{opacity:0.5; pointer-events:none}

@media (max-width: 760px){
  .grid{grid-template-columns:repeat(5,1fr); gap:8px}
}

/* Bank info */
.bank{background:#fff}
.bank__grid{display:grid; grid-template-columns: 1fr 1fr; gap:48px}
.bank h3{font-family:var(--serif); font-size:24px; font-weight:500; margin-bottom:14px}
.bank p{color:var(--ink-2); margin-bottom:8px}
.bank__details{padding:24px; background:var(--beige); border-radius:var(--radius-l); border:1px solid var(--line)}
.bank__row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14px}
.bank__row:last-child{border-bottom:0}
.bank__row .lbl{color:var(--muted); letter-spacing:0.04em}
.bank__row .val{font-family:var(--serif); font-size:18px; color:var(--green-800)}
.bank__warn{
  margin-top:16px; padding:14px 18px; border-radius:var(--radius-m);
  background:rgba(196,122,122,0.08); border:1px solid rgba(196,122,122,0.2);
  font-size:13px; color:var(--ink-2);
}
.bank__warn b{color:var(--rose)}
@media (max-width:900px){.bank__grid{grid-template-columns:1fr; gap:32px}}

/* FAQ */
.faq{background:var(--beige)}
.faq__list{margin-top:32px; display:grid; gap:12px; max-width:820px}
details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  padding: 20px 24px;
  transition: background .2s ease;
}
details[open]{background:#fff; box-shadow:var(--shadow-1)}
summary{
  cursor:pointer; font-family:var(--serif); font-size:20px; font-weight:500; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--sans); font-weight:300; font-size:24px; color:var(--gold); transition:transform .25s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin: 14px 0 0; color:var(--ink-2); font-size:15px; line-height:1.65}

/* Footer (compact) */
.footer-r{background:var(--green-900); color:rgba(244,239,230,0.78); padding: 56px 0 28px}
.footer-r__grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px}
.footer-r img{height:56px; filter:brightness(0) invert(1); opacity:0.95}
.footer-r p{margin-top:18px; max-width:34ch; font-size:14px; color:rgba(244,239,230,0.6)}
.footer-r h5{color:#fff; font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; margin:0 0 16px}
.footer-r ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.footer-r ul a{font-size:14px; transition:color .25s ease}
.footer-r ul a:hover{color:var(--gold)}
.footer-r__bottom{margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08); font-size:12px; color:rgba(244,239,230,0.5)}
@media (max-width:780px){.footer-r__grid{grid-template-columns:1fr 1fr}}

/* Floating WhatsApp */
.fab{position:fixed; right:22px; bottom:22px; z-index:60; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 40px rgba(37,211,102,0.4); transition:transform .3s ease}
.fab:hover{transform:scale(1.06)}
.fab svg{width:28px; height:28px}
.fab::before{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,0.5); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(0.85); opacity:1} 100%{transform:scale(1.55); opacity:0}}

/* Reservation modal */
.modal{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(15,36,25,0.6); backdrop-filter: blur(8px);
}
.modal.is-open{display:flex}
.modal__card{
  background:#fff; border-radius:var(--radius-l); max-width:480px; width:100%;
  padding:36px 32px; position:relative;
  box-shadow: var(--shadow-2);
  animation: pop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(0.98)} to{opacity:1; transform:translateY(0) scale(1)}}
.modal__close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:var(--beige); display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.modal__close:hover{background:var(--beige-2)}
.modal__close svg{width:14px; height:14px}
.modal h3{font-family:var(--serif); font-size:24px; margin-bottom:8px}
.modal p{color:var(--muted); font-size:14px; margin:0 0 18px}
.modal__num{
  font-family:var(--serif); font-size:72px; line-height:1; color:var(--gold); font-weight:500;
  text-align:center; padding: 18px 0 22px;
}
.modal__price{
  text-align:center; font-size:14px; color:var(--ink-2); margin-bottom:24px;
}
.modal__price b{color:var(--green-800); font-family:var(--serif); font-size:18px}
.modal__actions{display:grid; gap:10px}
.modal__fine{margin-top:18px; font-size:12px; color:var(--muted); line-height:1.5}

/* Reveal */
.reveal{opacity:0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform: translateY(0)}