/* ===================================================================
   AISA REAL ESTATE — SHARED DESIGN SYSTEM
   Linked by every page (before that page's own <style> block) so this
   is the single source of truth for tokens + the header/footer/floating
   contact components. Page-specific rules stay in each page's own
   inline <style> and win the cascade by source order where needed
   (e.g. funnel.html's cream body theme).
   =================================================================== */

:root{
  /* Brand palette — unchanged, verbatim across the whole site */
  --green-950:#07211a; --green-900:#0b2e24; --green-800:#0f3a2c; --green-700:#154532;
  --gold-500:#c9a227; --gold-400:#d9b84a; --gold-300:#e8cd7a;
  --cream:#f5efe0; --white:#ffffff; --line: rgba(201,162,39,0.25);
  --ink:#1c2b24;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
  --container-pad-mobile: 16px;

  /* Spacing scale */
  --space-xs: 8px;  --space-sm: 16px; --space-md: 24px; --space-lg: 40px;
  --space-xl: 64px; --space-2xl: 96px;
  --section-pad-y: 96px;
  --section-pad-y-mobile: 56px;

  /* Type scale */
  --fs-h1: clamp(32px, 4vw, 44px);
  --fs-h2: clamp(26px, 3vw, 34px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-button: 15px;
  --fs-nav: 14px;

  /* Radius tokens */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Buttons */
  --btn-pad-y: 14px; --btn-pad-x: 28px;

  /* Motion */
  --motion-fast: 250ms; --motion-medium: 600ms; --motion-slow: 1000ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, var(--green-700), var(--green-950) 60%);
  color: var(--cream);
  line-height:1.6;
  font-size: var(--fs-body);
}
h1,h2,h3,h4{ font-family:'Playfair Display', serif; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
small, .small{ font-size:var(--fs-small); }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
*:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
@media (max-width:480px){ .container{ padding:0 var(--container-pad-mobile); } }

.gold-text{ color:var(--gold-400); }
.eyebrow{ font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-300); font-weight:700; }

section{ padding:var(--section-pad-y) 0; }
@media (max-width:760px){ section{ padding:var(--section-pad-y-mobile) 0; } }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{ color:var(--gold-400); }
.section-head p{ opacity:.75; margin-top:8px; font-size:14px; }

/* ---------- Buttons (one shared scale) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-sm); border:none; cursor:pointer;
  font-weight:600; font-size:var(--fs-button); font-family:inherit;
  transition:transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-premium);
}
.btn-gold{ background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#231b04; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,162,39,.35); }
.btn-gold:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline-gold{ background:transparent; border:1px solid var(--gold-500); color:var(--gold-300); }
.btn-outline-gold:hover{ background:rgba(201,162,39,.1); }
.btn-whatsapp{ background:#25d366; color:#08210f; }
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,211,102,.3); }
.btn-whatsapp-gold{ background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#231b04; }
.btn-whatsapp-gold:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,162,39,.35); }

/* ---------- Scroll-reveal motion system (shared by initScrollReveal()) ---------- */
.reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-image{
  opacity:0;
  transition:opacity var(--motion-medium) var(--ease-premium), transform var(--motion-medium) var(--ease-premium);
  will-change:opacity, transform;
}
.reveal-up{ transform:translateY(40px); }
.reveal-left{ transform:translateX(-40px); }
.reveal-right{ transform:translateX(40px); }
.reveal-scale{ transform:scale(0.94); }
.reveal-image{ transform:scale(1.08); }
.reveal.in-view, .reveal-up.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view{
  opacity:1; transform:translate(0,0) scale(1);
}
.reveal-image.in-view{
  opacity:1; transform:scale(1);
  transition:opacity var(--motion-slow) var(--ease-premium), transform 1.1s var(--ease-premium);
}
.img-wrap{ overflow:hidden; display:block; }
.img-wrap img{ transition:transform var(--motion-slow) var(--ease-premium); }

/* ===================================================================
   HEADER — one structure/behavior for every page
   =================================================================== */
header.site-header{
  position:sticky; top:0; z-index:60; background:rgba(7,33,26,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background var(--motion-medium) var(--ease-premium), backdrop-filter var(--motion-medium) var(--ease-premium),
    box-shadow var(--motion-medium) var(--ease-premium), padding var(--motion-fast) var(--ease-premium);
}
header.site-header.is-scrolled{
  background:rgba(7,33,26,.94); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
header.site-header .logo{ display:flex; align-items:center; flex-shrink:0; }
header.site-header .logo img{ height:52px; width:auto; object-fit:contain; }
.nav-mobile-panel{ display:contents; }
.nav-links{ display:flex; gap:30px; font-size:var(--fs-nav); font-weight:500; align-items:center; }
.nav-links a{ opacity:.85; white-space:nowrap; }
.nav-links a:hover{ opacity:1; color:var(--gold-300); }
.nav-cta{ display:flex; gap:12px; align-items:center; flex-shrink:0; }
.burger{ display:none; font-size:24px; color:var(--gold-400); background:none; border:none; cursor:pointer; }

@media (max-width:860px){
  .header-inner .nav-links, .header-inner .nav-cta{ display:none; }
  .burger{ display:block; }
  .nav-mobile-panel{ display:none; }
  header.site-header.nav-open .nav-mobile-panel{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:rgba(7,33,26,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); padding:8px var(--container-pad) 20px;
    box-shadow:0 16px 30px rgba(0,0,0,.35);
  }
  header.site-header.nav-open .nav-mobile-panel .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
  }
  header.site-header.nav-open .nav-mobile-panel .nav-links a{
    padding:12px 0; border-bottom:1px solid rgba(232,205,122,.12);
  }
  header.site-header.nav-open .nav-mobile-panel .nav-cta{
    display:flex; padding-top:12px;
  }
  header.site-header.nav-open .nav-mobile-panel .nav-cta .btn{ width:100%; text-align:center; }
  .burger.is-open{ color:var(--gold-300); }
}

/* ===================================================================
   FOOTER — one structure for every page
   =================================================================== */
footer.site-footer{ background:var(--green-950); border-top:1px solid var(--line); padding:56px 0 24px; text-align:left; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; margin-bottom:28px; }
.footer-brand .footer-logo{ height:44px; width:auto; object-fit:contain; margin-bottom:14px; }
.footer-brand p{ font-size:13px; opacity:.8; margin-bottom:6px; }
.footer-brand p a:hover{ color:var(--gold-300); }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--gold-300);
  transition:background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.footer-social a:hover{ background:rgba(201,162,39,.15); transform:translateY(-2px); }
.footer-social a svg{ width:16px; height:16px; fill:currentColor; }
.footer-links h4{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-300); margin-bottom:14px; }
.footer-links ul{ list-style:none; display:grid; gap:10px; font-size:14px; opacity:.85; }
.footer-links ul a:hover{ color:var(--gold-300); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:18px; text-align:center; font-size:12px; opacity:.6; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   FLOATING CONTACT — one collapsible component for every page
   =================================================================== */
.fab-stack{ position:fixed; right:20px; bottom:24px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.fab-menu{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.fab-item{
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; box-shadow:0 10px 24px rgba(0,0,0,.3); white-space:nowrap;
  background:var(--green-800); color:var(--cream); border:1px solid var(--line);
  transition:transform var(--motion-fast) var(--ease-premium), opacity var(--motion-fast) var(--ease-premium);
}
.fab-item:hover{ transform:translateY(-2px); }
.fab-item .fab-icon{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fab-item .fab-icon svg{ width:100%; height:100%; fill:currentColor; }
.fab-whatsapp{ background:#25d366; color:#08210f; border-color:transparent; }
.fab-toggle{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#231b04;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform var(--motion-fast) var(--ease-premium);
}
.fab-toggle:hover{ transform:translateY(-3px) scale(1.05); }

/* Default (no-JS-safe): menu is visible. JS adds .fab-collapsed on load, which hides the
   menu until .is-open is toggled back on — so a JS failure never permanently hides contact options. */
.fab-stack.fab-collapsed .fab-menu{ display:none; }
.fab-stack.fab-collapsed.is-open .fab-menu{ display:flex; animation:fabIn var(--motion-fast) var(--ease-premium); }
@keyframes fabIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (hover:hover){
  .fab-stack.fab-collapsed:hover .fab-menu{ display:flex; }
}
@media (max-width:600px){
  .fab-item .fab-label{ display:none; }
  .fab-item{ padding:12px; border-radius:50%; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-image,
  header.site-header, .btn, .fab-item, .fab-toggle{ transition:none !important; animation:none !important; }
}

/* ===================================================================
   FORM VALIDATION — shared across homeConsultForm (index.html),
   contactForm (contact.html) and propertyInquiryForm (property.html).
   Deliberately stays within the existing green/gold/cream palette —
   no red/error color is introduced, per the brand's restrained-palette rule.
   =================================================================== */
.has-error{
  border-color: var(--gold-500) !important;
  background: rgba(201,162,39,.08) !important;
}
.field-error-text{
  display:block; font-size:11px; color:var(--gold-300); margin:-6px 0 2px; text-align:left;
}
.form-error-banner{
  display:none; border:1px solid var(--gold-500); background:rgba(201,162,39,.12);
  color:var(--cream); border-radius:var(--radius-sm); padding:12px 14px; font-size:13px;
  margin:4px 0; text-align:left;
}
.form-error-banner a{ color:var(--gold-300); text-decoration:underline; }
.form-error-banner.is-visible{ display:block; }