/* ============================================================
   ISABELA OCEAN VIEW — shared stylesheet
   Tokens are declared once here; every page and the eventual
   Elementor/Avada rebuild should pull colors/type from this list.
   ============================================================ */

:root{
  /* --- color --- */
  --ink:        #14201B;   /* near-black, deep palm-shadow green */
  --ink-soft:   #3C4A43;
  --paper:      #F5F6F3;   /* cool near-white, not cream */
  --paper-dim:  #EBEDE8;
  --sand:       #E4DFCE;   /* muted divider / card bg */
  --teal:       #0F5C56;   /* primary accent — ocean, CTAs, links */
  --teal-bright:#1D9E8C;
  --teal-ink:   #0A3E3A;
  --guava:      #B8462E;   /* secondary accent — muted terracotta, used sparingly */
  --sunshine:   #B08A3E;   /* brass/gold — refined, used sparingly for badges */
  --line:       rgba(20,32,27,0.12);
  --line-soft:  rgba(20,32,27,0.07);

  /* --- type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius: 3px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16.5px;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h1{ font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 450; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1.15em; color: var(--ink-soft); }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 1.1em;
  opacity: 0.85;
}
.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
section{ padding: 140px 0; }
@media (max-width: 860px){
  section{ padding: 88px 0; }
}
@media (max-width: 720px){
  section{ padding: 64px 0; }
  .container{ padding: 0 22px; }
}

/* ---------------- placeholders (remove once real photos land) ---------------- */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--sand), var(--sand) 10px, #DAD4C0 10px, #DAD4C0 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  padding: 12px;
  min-height: 220px;
}
.ph span{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: var(--radius);
}

/* ---------------- nav ---------------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,246,243,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
.wordmark{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.wordmark .dot{ color: var(--guava); }
.nav-links{
  display: flex;
  gap: 36px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-links a{ border-bottom: 1px solid transparent; padding-bottom: 3px; }
.nav-links a:hover{ border-color: var(--teal); color: var(--ink); }
.nav-cta{
  background: var(--ink);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-cta:hover{ background: var(--teal-ink); }
.nav-toggle{ display:none; }
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; background:none; border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius); }
}

/* ---------------- buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,32,27,0.14); }
.btn-primary{ background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover{ background: var(--teal-ink); border-color: var(--teal-ink); }
.btn-whatsapp{ background: #25D366; border-color: #25D366; color: #08321C; }
.btn-whatsapp:hover{ background: #1EBE5B; }
.btn-outline{ background: transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: #fff; }
.btn-guava{ background: var(--guava); border-color: var(--guava); color: #fff; }
.btn-block{ width: 100%; justify-content: center; }

/* ---------------- hero ---------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero .ph{ position:absolute; inset:0; min-height: unset; color:#fff; }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,32,27,0.05) 0%, rgba(10,17,14,0.1) 45%, rgba(8,14,12,0.82) 100%);
}
.hero-inner{ position: relative; z-index: 2; padding-bottom: 96px; }
.hero .eyebrow{ color: #CFE8DD; opacity: 1; }
.hero h1{ color: #fff; max-width: 920px; }
.hero-sub{ color: #E5E9E3; max-width: 580px; font-size: 1.12rem; line-height: 1.6; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 36px; }
@media (max-width: 720px){ .hero-inner{ padding-bottom: 56px; } }

/* ---------------- stamp (signature element) ---------------- */
.stamp{
  width: 136px; height: 136px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 12px;
  opacity: 0.85;
  transform: rotate(-6deg);
  flex-shrink: 0;
}

/* ---------------- property cards (home) ---------------- */
.listings{ background: var(--paper); }
.listing-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 860px){ .listing-grid{ grid-template-columns: 1fr; gap: 48px; } }
.listing-card{
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.listing-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 48px rgba(20,32,27,0.12); }
.listing-card .ph, .listing-card img{ aspect-ratio: 5/4; min-height: unset; object-fit: cover; width: 100%; }
.listing-body{ padding: 34px 6px 6px; display:flex; flex-direction:column; gap: 14px; flex: 1; }
.listing-badge{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--sunshine);
  color: var(--sunshine);
  padding: 5px 12px;
  border-radius: var(--radius);
}
.listing-price{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.spec-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}
.listing-ctas{ display:flex; gap:12px; margin-top: auto; flex-wrap: wrap; padding-top: 6px; }
.listing-ctas .btn{ flex:1; justify-content:center; }

/* ---------------- why isabela / positioning strip ---------------- */
.positioning{ background: var(--ink); color: #fff; }
.positioning p{ color: #C9D3CD; }
.positioning h2{ color: #fff; }
.positioning-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 56px; }
@media (max-width: 860px){ .positioning-grid{ grid-template-columns:1fr; gap: 32px; } }
.positioning-item{ border-top: 1px solid rgba(255,255,255,0.16); padding-top: 22px; }
.positioning-item .eyebrow{ color: #C6A461; opacity: 1; }
.positioning-item p{ font-size: 0.96rem; line-height: 1.65; }

/* ---------------- CTA band ---------------- */
.cta-band{
  background: var(--teal);
  color: #fff;
  text-align: center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: #D7ECE6; max-width: 560px; margin-left:auto; margin-right:auto; font-size: 1.02rem; }
.cta-band .hero-ctas{ justify-content:center; margin-top: 32px; }

/* ---------------- footer ---------------- */
footer{ background: var(--ink); color: #B9C4BD; padding: 88px 0 36px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr; gap: 32px; } }
footer h4{ color:#fff; font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.9; }
footer a{ display:block; margin-bottom:10px; font-size:0.92rem; }
footer a:hover{ color:#fff; }
.footer-bottom{
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------------- floating whatsapp ---------------- */
.wa-float{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  background: #25D366;
  color: #08321C;
  width: 58px; height: 58px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: 1.5rem;
}
.wa-float:hover{ transform: scale(1.06); }

/* ---------------- sticky property bar ---------------- */
.sticky-bar{
  position: sticky;
  top: 88px;
  z-index: 40;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.sticky-bar .container{
  display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap;
}
.sticky-bar .price{ font-family: var(--font-mono); font-size:1rem; }
.sticky-bar .actions{ display:flex; gap:10px; }

/* ---------------- gallery ---------------- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-grid .ph{ aspect-ratio: 4/3; min-height: unset; }
.gallery-grid img{
  aspect-ratio: 4/3; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-grid a, .gallery-grid .gallery-item{ display:block; overflow:hidden; }
.gallery-grid img:hover{ transform: scale(1.02); }
@media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); gap: 14px; } }

/* ---------------- specs table ---------------- */
.spec-table{ width:100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.86rem; }
.spec-table tr{ border-bottom: 1px solid var(--line-soft); }
.spec-table td{ padding: 15px 6px; }
.spec-table td:first-child{ color: var(--ink-soft); width: 46%; }

/* ---------------- two-col section ---------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap: 40px; } }

/* ---------------- access timeline (real sequence, so numbered) ---------------- */
.access-list{ list-style:none; margin:0; padding:0; }
.access-list li{
  display:flex; gap:20px; align-items:baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.access-list li:last-child{ border-bottom: 1px solid var(--line-soft); }
.access-time{ font-family: var(--font-mono); font-size:0.85rem; color: var(--teal-ink); min-width: 96px; }

/* ---------------- 360 tour embed ---------------- */
.tour-frame-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ink);
  border: 1px solid var(--line);
}
.tour-frame-wrap iframe{ width:100%; height:100%; border:0; }
.tour-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:#fff; text-align:center; padding: 20px;
  font-family: var(--font-mono); font-size:0.8rem;
}

/* ---------------- form ---------------- */
.inquiry{ background: var(--paper-dim); }
.form-card{ background:#fff; border:1px solid var(--line); padding: 32px; max-width: 560px; }
.form-row{ margin-bottom: 16px; }
.form-row label{ display:block; font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; color: var(--ink-soft); }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding: 12px; border:1px solid var(--line); background: var(--paper); font-family: var(--font-body); font-size: 0.95rem; border-radius: var(--radius);
}
.form-row textarea{ min-height: 100px; resize: vertical; }

/* ---------------- amenity/feature list ---------------- */
.feature-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px 40px; }
@media (max-width: 600px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-item{ display:flex; gap:14px; }
.feature-item .mark{ color: var(--guava); font-family: var(--font-mono); flex-shrink:0; }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 22px; }
.badge{
  font-family: var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em;
  border:1px solid var(--line); padding: 6px 12px; border-radius: var(--radius); color: var(--ink-soft);
}