/* ============================================================
   Villa Rosario — design tokens
   Palette drawn from the villa's own hours: limewashed walls by
   day, bougainvillea at the edges, the pool going ink-teal at
   night. Deliberately not the cream/terracotta template.
   ============================================================ */
:root{
  --ink:        #0F262A;   /* deep pool-at-night */
  --ink-2:      #163A3F;
  --teal:       #2C8C88;   /* pool water, daylight */
  --bougainvillea: #C4497A; /* sparing accent only */
  --gold:       #C79A5B;   /* terracotta / evening light */
  --stone:      #EFE9DC;   /* limewash wall */
  --stone-dark: #E1D8C4;
  --charcoal:   #17211F;
  --white:      #FFFFFF;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.05;
  margin:0;
  color:var(--ink);
}
h2{ font-size:clamp(2rem, 3.4vw, 3rem); letter-spacing:-0.01em; }
p{ margin:0; line-height:1.6; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

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

/* subtle grain overlay for warmth, not a texture-pack cliche */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2000;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.85rem 1.6rem;
  font-family:var(--font-body); font-weight:500; font-size:0.95rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn--primary{ background:var(--ink); color:var(--white); }
.btn--primary:hover{ transform:translateY(-2px); background:var(--ink-2); }
.btn--ghost{ border-color:var(--charcoal); color:var(--charcoal); }
.btn--ghost:hover{ transform:translateY(-2px); background:rgba(15,38,42,0.06); }
.btn--ghost-light{ border-color:rgba(255,255,255,0.4); color:var(--white); }
.btn--ghost-light:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); }
.btn--lg{ padding:1rem 2rem; font-size:1rem; }

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  font-family:var(--font-mono); font-size:0.82rem;
  color:var(--white);
  background:rgba(15,38,42,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav__mark{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.01em; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ opacity:0.85; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ display:none; }
@media (max-width:760px){
  .nav__links{ display:none; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--white);
}
.hero__video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,38,42,0.15) 0%, rgba(15,38,42,0.35) 55%, rgba(15,38,42,0.82) 100%);
  transition:filter 0.1s linear;
}
.hero__scrim::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 85%, rgba(196,73,122,0.28), transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 90%, rgba(199,154,91,0.2), transparent 60%);
}
.hero__content{
  position:relative; z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.2rem, 4vw, 3rem) 6rem;
  width:100%;
}
.hero__title{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  color:var(--white);
  max-width:14ch;
}
.hero__title em{ font-style:italic; color:var(--stone); }
.hero__sub{
  margin-top:1.4rem;
  max-width:44ch;
  font-size:1.1rem;
  color:rgba(255,255,255,0.88);
}
.hero__cta-row{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero .btn--ghost{ border-color:rgba(255,255,255,0.55); color:var(--white); }
.hero .btn--ghost:hover{ background:rgba(255,255,255,0.1); }
.hero__specs{
  margin-top:2.6rem;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.75);
  display:flex; gap:0.6rem;
}
.hero__scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:1px; height:44px; background:rgba(255,255,255,0.4);
}
.hero__scroll-cue span{
  display:block; width:5px; height:5px; border-radius:50%;
  background:var(--white);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:translateY(0); opacity:1; }
  90%{ transform:translateY(38px); opacity:0; }
  100%{ opacity:0; }
}

/* ---------------- Section shell ---------------- */
section{ padding:clamp(4rem, 9vw, 7.5rem) clamp(1.2rem, 4vw, 3rem); }
.section-head{ max-width:var(--container); margin:0 auto 3rem; }
.section-head h2{ max-width:16ch; }
.lede{ margin-top:1.2rem; max-width:60ch; font-size:1.08rem; color:#3B4644; }

/* ---------------- Overview / spec sheet ---------------- */
.overview{ background:var(--stone); }
.spec-sheet{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--stone-dark);
}
.spec{
  padding:1.6rem 1.2rem;
  border-right:1px solid var(--stone-dark);
  border-bottom:1px solid var(--stone-dark);
  display:flex; flex-direction:column; gap:0.5rem;
}
.spec:nth-child(4n){ border-right:none; }
.spec__label{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#6B7A76;
}
.spec__value{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink); }
.overview__note{
  max-width:var(--container); margin:1.4rem auto 0;
  font-family:var(--font-mono); font-size:0.78rem; color:#6B7A76;
}
@media (max-width:760px){
  .spec-sheet{ grid-template-columns:repeat(2, 1fr); }
  .spec:nth-child(4n){ border-right:1px solid var(--stone-dark); }
  .spec:nth-child(2n){ border-right:none; }
}

/* ---------------- Gallery ---------------- */
.gallery{ background:var(--white); }
.gallery__grid{
  max-width:var(--container); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0.6rem;
}
.gallery__group{ max-width:var(--container); margin:0 auto 2.4rem; }
.gallery__group-label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:#6B7A76;
  margin:0 0 0.8rem;
}
.bedroom-block{ margin-bottom:1.4rem; }
.bedroom-block__title{
  font-family:var(--font-body); font-weight:500; font-size:0.98rem;
  color:var(--ink); margin:0 0 0.6rem;
}
.bedroom-block__title span{
  font-family:var(--font-mono); font-weight:400; font-size:0.8rem;
  color:#6B7A76; text-transform:none; letter-spacing:0;
}
.gallery__grid--2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:760px){
  .gallery__grid--2{ grid-template-columns:1fr 1fr; }
}
.tile{
  position:relative;
  margin:0;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; align-items:flex-end;
  background:linear-gradient(150deg, var(--stone-dark), var(--stone));
}
.tile img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.tile figcaption{
  position:relative; z-index:1;
  padding:0.9rem 1rem;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em;
  color:rgba(255,255,255,0.92);
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,38,42,0) 45%, rgba(15,38,42,0.55) 100%);
}
.tile--wide{ grid-column:span 2; }
.tile--pool{ background:linear-gradient(150deg, #3AA6A0, #17595A); }
.tile--living{ background:linear-gradient(150deg, #C9A66B, #8C6A3E); }
.tile--dusk{ background:linear-gradient(150deg, #C4497A, #5B2140); }
.tile--suite{ background:linear-gradient(150deg, #D8CDB4, #A9967A); }
.tile--kitchen{ background:linear-gradient(150deg, #B7C4B0, #5D6E58); }
.tile--aerial{ background:linear-gradient(150deg, #7FB8B4, #234A48); }
.tile--terrace{ background:linear-gradient(150deg, #E3B77A, #A6672F); }
.tile--video{
  background:linear-gradient(150deg, var(--ink-2), var(--ink));
  align-items:center; justify-content:center; flex-direction:column; gap:0.8rem;
  cursor:pointer;
}
.tile--video figcaption{ padding:0; }
.tile__play{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:0.9rem; padding-left:3px;
}
.gallery__note{
  max-width:var(--container); margin:1.4rem auto 0;
  font-family:var(--font-mono); font-size:0.78rem; color:#8B958F;
}
@media (max-width:900px){
  .gallery__grid{ grid-template-columns:repeat(2, 1fr); }
  .tile--wide{ grid-column:span 2; }
}

/* ---------------- Setting ---------------- */
.setting{
  background:var(--ink);
  color:var(--stone);
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.setting h2{ color:var(--white); }
.setting p{ margin-top:1.2rem; max-width:52ch; color:rgba(239,233,220,0.82); }
.setting__list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:0.7rem; }
.setting__list li{
  padding-left:1.3rem; position:relative;
  font-size:0.95rem; color:rgba(239,233,220,0.9);
}
.setting__list li::before{
  content:"—"; position:absolute; left:0; color:var(--teal);
}
.setting__address{
  margin-top:1rem; font-family:var(--font-mono); font-size:0.85rem;
  color:rgba(239,233,220,0.75); letter-spacing:0.01em;
}
.setting__map{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink-2);
}
.setting__map iframe{ display:block; width:100%; height:100%; filter:saturate(0.9) contrast(1.05); }
@media (max-width:900px){
  .setting{ grid-template-columns:1fr; }
  .setting__map{ aspect-ratio:16/9; }
}

/* ---------------- Reviews ---------------- */
.reviews{ background:var(--white); }
.reviews__intro{ max-width:var(--container); margin:0 auto 3rem; }
.reviews__intro h2{ max-width:16ch; }
.reviews__intro .lede{ margin-top:1.2rem; max-width:60ch; font-size:1.08rem; color:#3B4644; }
.reviews__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.review-card{
  background:var(--stone);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem;
  display:flex; flex-direction:column; gap:0.9rem;
  border-top:3px solid var(--gold);
}
.review-card__stars{
  font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.05em;
  color:var(--gold); font-weight:500;
}
.review-card__text{ font-size:0.96rem; color:#3B4644; line-height:1.55; }
.review-card__source{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em;
  color:#8B958F; margin-top:auto;
}
.reviews__links{
  max-width:var(--container); margin:1.8rem auto 0;
  font-size:0.92rem; color:#3B4644;
}
.reviews__links a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){
  .reviews__grid{ grid-template-columns:1fr; }
}

/* ---------------- Book ---------------- */
.book{
  background:linear-gradient(160deg, var(--ink) 0%, #123539 100%);
  color:var(--white);
  text-align:center;
}
.book__inner{ max-width:640px; margin:0 auto; }
.book h2{ color:var(--white); }
.book__lede{ margin-top:1.2rem; color:rgba(255,255,255,0.82); }
.book__widget{
  margin:2.2rem auto 0;
  max-width:520px;
  background:var(--white);
  border-radius:6px;
  padding:1.2rem;
}
.book__actions{ display:flex; gap:1rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.book__alt{ margin-top:1.6rem; font-size:0.88rem; color:rgba(255,255,255,0.65); }
.book__alt a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ---------------- Footer ---------------- */
.footer{
  background:var(--stone);
  padding:2.4rem clamp(1.2rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--stone-dark);
}
.footer__mark{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink); }
.footer__meta{ font-family:var(--font-mono); font-size:0.72rem; color:#6B7A76; }

/* ---------------- Floating WhatsApp button ---------------- */
.whatsapp-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:1500;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab svg{ width:30px; height:30px; }
.whatsapp-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 22px rgba(0,0,0,0.34); }
@media (max-width:600px){
  .whatsapp-fab{ right:1rem; bottom:1rem; width:52px; height:52px; }
  .whatsapp-fab svg{ width:28px; height:28px; }
}