/* ============================================================
   base.css -- shared foundation
   Design tokens (:root), reset, typography, buttons, site header, nav,
   footer, the lead-capture modal, and anything used by more than one page.
   Loaded FIRST by every page.
   ============================================================ */

/* ============================================================
   Tauana Brandão Real Estate — styles.css
   Color palette: Deep Forest Green + Rich Gold
   Typography: Roboto (body) + Cormorant Garamond (display)
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --color-primary:        #C9A84C;
  --color-primary-hover:  #E8C97A;
  --color-primary-deep:   #B8922E;
  --color-dark:           #121212;
  --color-darker:         #0A0A0A;
  --color-bg:             #FAFAF7;
  --color-surface:        #ffffff;
  --color-text:           #1a1a1a;
  --color-text-secondary: #7A7A7A;
  --color-border:         #E2DDD0;
  --color-cream:          #F4F1EA;

  --font-body:    'Roboto', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-brand:   'Cormorant Garamond', serif; /* wordmark; alternatives: 'Old Standard TT' | 'Prata' | 'Marcellus' | 'Cinzel' | 'Playfair Display' */

  --hero-brand-color: #FFFFFF;   /* hero wordmark; alternative: var(--color-primary) for gold */
  --search-pull:  190px;         /* how far the search block (tabs + card) is pulled up into the hero */
  --type-scale:   112.5%;        /* public-page font base: 100% = old 16px, 106.25% = 17px, 112.5% = 18px */

  --container-max:  1140px;
  --container-wide: 1520px;   /* gallery, header and footer share this grid */
  --section-pad:   80px 0;
  --radius-btn:    6px;
  --shadow-card:   0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.16);
  --transition:    0.3s ease;

  --header-h: 72px;
  --fbar-h:   57px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Public pages opt into the larger type scale; CRM keeps the 16px default. */
html.public { font-size: var(--type-scale); }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

/* ── Layout Helpers ────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 30px;
}

.container-wide { max-width: var(--container-wide); }

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  max-width: 520px;
}

.divider-gold {
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin: 20px 0;
}

.divider-gold.center { margin: 20px auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.812rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition),
              transform 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-darker);
}

.btn-gold:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.40);
}

.btn-gold-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-gold-outline:hover {
  background: var(--color-primary);
  color: var(--color-darker);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.30);
}

.btn-dark-outline {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.btn-dark-outline:hover {
  background: var(--color-dark);
  color: var(--color-primary);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(60px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.anim-fadeIn      { animation: fadeIn      0.9s ease forwards; }
.anim-fadeInUp    { animation: fadeInUp    0.8s ease forwards; }
.anim-fadeInRight { animation: fadeInRight 0.8s ease forwards; }

.anim-delay-1 { animation-delay: 0.15s; opacity: 0; }
.anim-delay-2 { animation-delay: 0.30s; opacity: 0; }
.anim-delay-3 { animation-delay: 0.45s; opacity: 0; }
.anim-delay-4 { animation-delay: 0.60s; opacity: 0; }

/* ── ===================================================== ── */
/* ── HEADER / NAV                                          ── */
/* ── ===================================================== ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.20);
  transition: background var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Three columns — logo | links | actions — rather than two clumps pushed to
   the window edges. The bar used to opt out of the page grid entirely
   (max-width: 100%), so on a wide monitor it stretched edge to edge while every
   section under it stopped at 1140–1520px and centred; the logo lined up with
   nothing. It now sits on the same wide grid as the property gallery, which
   also means nothing moves at all below 1520px.
   .site-nav is display: contents so its three groups become grid items here;
   the phone layout puts it back to a flex row. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}

.header-logo {
  grid-area: 1 / 1;      /* left column */
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.header-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-brand-name {
  font-family: var(--font-brand);
  font-size: 0.938rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1;
  white-space: nowrap;
}

.header-brand-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  width: 100%;
}

.header-brand-rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0.8;
}

.header-brand-re {
  font-family: var(--font-body);
  font-size: 0.563rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--color-primary);
  white-space: nowrap;
}

.site-nav { display: contents; }

.nav-links {
  grid-area: 1 / 2;      /* centre column */
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Fale Comigo and the language switch, as the header grid's right column. */
.nav-actions {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.80);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.nav-cta {
  font-size: 0.688rem;
  letter-spacing: 2px;
  padding: 9px 22px;
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: transform 0.3s, opacity 0.3s;
}

/* Left/right decorative columns */
.hero-side {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-side-line {
  width: 1px;
  height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.40), transparent);
}

.search-fin-btn {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, 0.35);
  background: rgba(10, 10, 10, 0.45);
  color: rgba(244, 241, 234, 0.85);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}

.search-fin-btn:not(.active):hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.search-fin-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-darker);
}

/* caret under the active tab, pointing at the search card */
.search-fin-btn.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--color-primary);
}

.properties-header {
  text-align: center;
  margin-bottom: 56px;
}

.properties-header .section-subtitle {
  margin: 0 auto;
}

/* ── Carousel shell ───────────────────────────────────────── */
.properties-carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  /* breathing room so the hover lift is not clipped by the viewport;
     the negative margin keeps the layout position unchanged */
  padding-top: 10px;
  margin-top: -10px;
}

/* Flex track — JS sets card widths and drives translateX */
.properties-grid {
  display: flex;
  gap: 28px;
  will-change: transform;
}

/* ── Arrow buttons ─────────────────────────────────────────── */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 20px));
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid rgba(201, 168, 76, 0.55);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.11);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}

.carousel-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-darker);
  box-shadow: 0 6px 22px rgba(201, 168, 76, 0.38);
}

.carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.carousel-btn-prev { left: -23px; }
.carousel-btn-next { right: -23px; }

/* ── Dash indicators ───────────────────────────────────────── */
.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  /* Reserved so the bar occupies the same height empty, hidden or full —
     see buildIndicators(). Matches .carousel-dot's 8px padding + 2px dash. */
  min-height: 18px;
}

.carousel-dot {
  background: none;
  border: none;
  padding: 8px 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.carousel-dot span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-border);
  transition: width 0.35s ease, background 0.35s ease;
}

.carousel-dot.active span {
  width: 42px;
  background: var(--color-primary);
}

.carousel-dot:hover span {
  background: var(--color-primary-hover);
}

/* Property Card */
.property-card {
  background: var(--color-surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid var(--color-border);
}

.property-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: 0 14px 36px rgba(201, 168, 76, 0.34), 0 18px 40px rgba(0, 0, 0, 0.10);
}

.card-image-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--color-bg);
}

/* Blurred background: same image, cover-fills the space so no whitespace */
.card-bg-img {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  object-position: center;
  filter: blur(10px) brightness(0.55);
  z-index: 0;
  transition: opacity 0.15s ease;
}

/* Main image: fully contained, no crop, no distortion */
.card-main-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  transition: opacity 0.15s ease;
}

.card-bg-img.is-changing,
.card-main-img.is-changing {
  opacity: 0;
}

.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: var(--color-darker);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 4;
}

/* Exclusive listings: inverted gold — distinct from the flat-gold DWV badges */
.card-badge--exclusive {
  background: var(--color-dark);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ── Card mini-gallery navigation ──────────────────────────── */
.card-img-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  opacity: 0;
  transition: opacity 0.22s ease, color 0.2s ease;
  pointer-events: none;
}

.card-img-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.card-img-btn:hover {
  color: var(--color-dark);
}

.card-img-prev { left: 10px; }
.card-img-next { right: 10px; }

.property-card:hover .card-img-btn {
  opacity: 1;
  pointer-events: auto;
}

.card-img-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 3;
  pointer-events: none;
}

.property-card:hover .card-img-counter {
  opacity: 1;
}

.card-body {
  padding: 22px 24px 18px;
}

.card-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 6px;
  font-variant-numeric: lining-nums;
}

.card-img-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.card-title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 4px;
}

.card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.card-title-link:hover {
  color: var(--color-primary);
}

.card-address {
  font-size: 0.812rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.card-amenities {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.amenity {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.812rem;
  font-weight: 300;
  color: var(--color-text-secondary);
}

.amenity svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.cities-header {
  text-align: center;
  margin-bottom: 56px;
}

.cities-header .section-subtitle { margin: 0 auto; }

.city-notfound {
  text-align: center;
  padding: calc(var(--header-h) + 90px) 30px 90px;
}

/* shared section header (centered) */
.city-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.city-section-header .section-subtitle { margin: 0 auto; }

.poi-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.25s ease;
}

.poi-chip svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

.poi-chip.active {
  background: var(--color-surface);
  border-color: rgba(201, 168, 76, 0.7);
  color: var(--color-dark);
  opacity: 1;
}

.poi-chip.active svg { stroke: var(--color-primary-deep); }

.poi-chip:hover { opacity: 1; border-color: var(--color-primary); }

/* POI map pin: gold-rimmed teardrop with category glyph */
.poi-pin {
  width: 34px;
  height: 34px;
  background: var(--color-dark);
  border: 1.5px solid var(--color-primary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.poi-pin svg {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  stroke: var(--color-primary);
  fill: none;
  transition: stroke 0.25s ease;
}

.poi-pin:hover,
.poi-pin.active {
  background: var(--color-primary);
  transform: rotate(-45deg) scale(1.12);
}

.poi-pin:hover svg,
.poi-pin.active svg { stroke: var(--color-darker); }

/* POI popup content — horizontal card: name/tag left, blurb right.
   Fixed width like .map-popup-card: the shared wrapper forces the
   leaflet content to width:auto, so the card must size itself. */
.poi-popup {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 330px;
  padding: 16px 18px;
  background: var(--color-surface);
}

.poi-popup-head {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.poi-popup-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.562rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

.poi-popup-cat svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-primary-deep);
  fill: none;
  flex-shrink: 0;
}

.poi-popup-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
}

.poi-popup-blurb {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(201, 168, 76, 0.45);
}

.city-teaser {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 34px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center 30%;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: var(--shadow-card);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.city-teaser:hover {
  border-color: rgba(201, 168, 76, 0.85);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 24px rgba(201, 168, 76, 0.30);
}

.city-teaser-eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.city-teaser-title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-cream);
}

.city-teaser-arrow {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 168, 76, 0.6);
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.55); /* keeps the gold arrow legible over bright photo areas */
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.city-teaser-arrow svg { width: 20px; height: 20px; }

.city-teaser:hover .city-teaser-arrow {
  transform: translateX(6px);
  background: var(--color-primary);
  color: var(--color-darker);
}

/* compact variant — listings sidebar */
#city-guide-hint .city-teaser--compact {
  margin: 14px 16px 4px;
}

.city-teaser--compact {
  padding: 16px 20px;
  gap: 14px;
}

.city-teaser--compact .city-teaser-title  { font-size: 1.188rem; }
.city-teaser--compact .city-teaser-eyebrow{ letter-spacing: 2px; font-size: 0.562rem; }
.city-teaser--compact .city-teaser-arrow  { width: 36px; height: 36px; }
.city-teaser--compact .city-teaser-arrow svg { width: 16px; height: 16px; }

/* guide link inside the property map popup */
.map-popup-guide {
  display: inline-block;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(201, 168, 76, 0.35);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  transition: color 0.25s;
}

.map-popup-guide:hover { color: var(--color-dark); }

/* -- Why invest -------------------------------------------------- */
.city-invest {
  padding: var(--section-pad);
  background: var(--color-darker);
}

.city-invest .section-eyebrow { color: var(--color-primary); }
.city-invest .section-title   { color: var(--color-cream); }

/* -- Loading skeletons -----------------------------------------
   Widths mirror initCarousel()'s visibleCount() (1 / 3 / 4 at 768 / 1280) and
   its 28px GAP, so the placeholder row occupies exactly the space the real
   cards will. Everything else is inherited from .property-card. */
.property-card--skeleton {
  flex: 0 0 100%;
  pointer-events: none;
}

@media (min-width: 768px) {
  .property-card--skeleton { flex: 0 0 calc((100% - 56px) / 3); }
}


@media (min-width: 1280px) {
  .property-card--skeleton { flex: 0 0 calc((100% - 84px) / 4); }
}


.sk-block,
.sk-bar {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-cream) 0%,
    #EDEAE1 40%,
    var(--color-cream) 80%
  );
  background-size: 300% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.sk-block { width: 100%; height: 100%; }

.sk-bar {
  display: inline-block;
  border-radius: 3px;
  vertical-align: middle;
}

@keyframes sk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-block,
  .sk-bar { animation: none; }
}


/* ── ===================================================== ── */
/* ── FOOTER                                                ── */
/* ── ===================================================== ── */
.site-footer {
  background: var(--color-darker);
  padding: 0;
}

.footer-top-divider {
  height: 1px;
  background: rgba(201, 168, 76, 0.30);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 48px 30px;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
}

.footer-contact {
  text-align: center;
}

.footer-contact-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.footer-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(244,241,234,0.80);
  margin-bottom: 8px;
  transition: color 0.25s;
}

.footer-contact a:hover { color: var(--color-primary); }

.footer-contact a svg {
  width: 15px;
  height: 15px;
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.footer-legal {
  text-align: right;
}

.footer-creci {
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.footer-copy {
  font-size: 0.688rem;
  color: rgba(244,241,234,0.40);
  line-height: 1.6;
}

/* ── Floating WhatsApp button ───────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.10);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  color: #fff;
}

.fbar-pill {
  position: relative;
  flex-shrink: 0;
}

.fbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.812rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  line-height: 1.4;
}
.fbar-btn:hover { border-color: var(--color-dark); }

.fbar-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.fbar-pill.open .fbar-btn {
  border-color: var(--color-dark);
  background: var(--color-dark);
  color: var(--color-cream);
}
.fbar-pill.open .fbar-chevron { transform: rotate(180deg); }

.fbar-pill.fbar-active .fbar-btn {
  border-color: var(--color-primary);
  background: rgba(201, 168, 76, 0.08);
  color: var(--color-dark);
  font-weight: 500;
}

/* Dropdown panel — fixed so it escapes overflow-x:auto clipping */
.fbar-dropdown {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
  z-index: 9000;
  overflow: hidden;
}
.fbar-pill.open .fbar-dropdown { display: block; }

/* ── ===================================================== ── */
/* ── RESPONSIVE                                            ── */
/* ── ===================================================== ── */
@media (max-width: 1024px) {

  .carousel-btn-prev { left: -16px; }
  .carousel-btn-next { right: -16px; }
}


/* -- Header between phone and full desktop ---------------------
   The header grid is `1fr auto 1fr` with the nav centred, so the centre
   column pushes into the side columns as it grows. Four nav items plus the
   CTA and the language switch stop fitting below ~1100px -- and this band was
   already broken before "Guia de cidades" was added: at 900px the CTA wrapped
   to two lines, at 800px the nav overlapped the wordmark.

   769-1024px gets the hamburger. The phone block's other rules -- shrinking
   the wordmark, trimming gutters, hiding the globe -- deliberately stay on the
   phone. 1025-1200px keeps the full nav and buys room by tightening tracking. */
@media (min-width: 769px) and (max-width: 1024px) {
  .header-inner { display: flex; justify-content: space-between; }

  .nav-links,
  .nav-cta     { display: none; }
  .nav-toggle  { display: flex; }

  .site-nav    { display: flex; align-items: center; gap: 14px; }
  .nav-actions { display: flex; align-items: center; gap: 18px; }

  .site-nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    background: var(--color-darker);
    padding: 24px 30px;
    gap: 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.20);
  }
}


@media (min-width: 1025px) and (max-width: 1200px) {
  .nav-links   { gap: 18px; }
  .nav-links a { font-size: 0.688rem; letter-spacing: 1px; }
  .nav-actions { gap: 14px; }
  .nav-cta     { padding: 9px 14px; letter-spacing: 1px; }
}


@media (max-width: 768px) {
  :root { --section-pad: 56px 0; }

  /* Nav */
  .nav-links,
  .nav-cta { display: none; }

  .nav-toggle { display: flex; }

  /* The header row is logo + language switch + hamburger on a phone. PT/EN is
     about 60px wider than the single button it replaced, which at the old
     30px gutter no longer fit on a 360px screen. Trim the gutter, shrink the
     wordmark and drop the globe — PT/EN carries the meaning on its own once
     space is this tight. Measured after: 305/345/375/415px of content at
     320/360/390/430px wide, so the row still fits on the narrowest phones. */
  .site-header .container { padding: 0 16px; }
  .header-inner      { display: flex; justify-content: space-between; }
  .site-nav          { display: flex; align-items: center; gap: 12px; }
  .nav-actions       { display: flex; align-items: center; gap: 12px; }
  .header-logo       { gap: 8px; }
  .header-logo img   { height: 34px; }
  .header-brand-name { font-size: 0.813rem; letter-spacing: 0.06em; }
  .header-brand-re   { font-size: 0.5rem;   letter-spacing: 0.20em; }
  .lang-switch       { padding: 3px; }
  .lang-switch-globe { display: none; }
  .lang-opt          { padding: 4px 8px; }

  .site-nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    background: var(--color-darker);
    padding: 24px 30px;
    gap: 20px;
    border-top: 1px solid rgba(201,168,76,0.20);
  }

  .section-title { font-size: 2rem; }

  /* Properties carousel — arrows tuck inside on narrow screens */
  .carousel-btn-prev { left: 4px; }
  .carousel-btn-next { right: 4px; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .footer-logo { display: flex; justify-content: center; }
  .footer-legal { text-align: center; }
}


/* ============================================================
   PROPERTY DETAIL PAGE (imovel.html)
   ============================================================ */

/* -- Loading skeleton ----------------------------------------- */
.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.thumb-btn {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  padding: 0;
  opacity: 0.65;
  transition: opacity var(--transition), border-color var(--transition);
}

.thumb-btn:hover { opacity: 0.85; }
.thumb-btn.active {
  border-color: var(--color-primary);
  opacity: 1;
}

.detail-unit-number {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: -12px 0 20px;
}

.features-group-label {
  font-family: var(--font-body, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 24px;
  margin-bottom: 8px;
}

.detail-payment {
  margin-top: 36px;
}

.payment-list li {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.9;
  list-style: none;
}

.detail-incorporation {
  margin-top: 28px;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-text-secondary, #888);
}

.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.btn-block svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.detail-map-pin {
  width: 28px;
  height: 40px;
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(201,168,76,0.55));
}
.detail-map-pin::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #e8c96e, #C9A84C, #a07830);
}
.detail-map-pin::after {
  content: '';
  position: absolute;
  top: 7px; left: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
}

/* -- Not found state ------------------------------------------ */
.detail-not-found {
  padding: 100px 30px;
  text-align: center;
}

.detail-not-found .section-title {
  margin-bottom: 32px;
}

/* -- Error state on listing page ------------------------------ */
.properties-error {
  width: 100%;
  text-align: center;
  padding: 48px;
  color: var(--color-text-secondary);
  font-size: 0.938rem;
}

@media (max-width: 600px) {
  .thumb-btn { width: 64px; height: 44px; }
}

/* The bar runs out of room for the full wordmark on a phone: logo + "ASCENZA
   FEMME GROUP" needs 228px and only ~210px is left before the language switch
   and the menu button. The mark shortens to ASCENZA there, which the logo and
   REAL ESTATE still sit under; the link's aria-label carries the full name.
   The footer keeps all three words -- it stacks, so it has the width. */
@media (max-width: 480px) {
  .site-header .header-brand-rest { display: none; }
}


/* Custom map markers */
.map-marker {
  background: var(--color-dark);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30);
  transition: background var(--transition), transform var(--transition);
  position: relative;
}

.map-marker::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
  border-bottom: none;
}

.map-marker.active {
  background: var(--color-primary);
  color: var(--color-darker);
  transform: scale(1.08);
  z-index: 999;
}

.map-marker.hidden { display: none; }

/* -- Map popup card ------------------------------------------ */
.map-popup-wrapper .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--color-border);
}
.map-popup-wrapper .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  line-height: 1;
}
.map-popup-wrapper .leaflet-popup-tip-container {
  margin-top: -1px;
}
.map-popup-wrapper .leaflet-popup-tip {
  background: var(--color-surface);
  box-shadow: none;
}
.map-popup-wrapper .leaflet-popup-close-button {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  top: 5px;
  right: 7px;
  padding: 0;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.map-popup-wrapper .leaflet-popup-close-button:hover {
  background: rgba(0,0,0,0.6);
}
.map-popup-card {
  display: flex;
  width: 300px;
  /* grows with content (e.g. the unit line) — a fixed height clipped
     the vertically-centered info at the top */
  min-height: 90px;
}
.map-popup-img {
  width: 100px;
  height: auto; /* flex stretch fills the card height */
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.map-popup-info {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: var(--color-surface);
}
.map-popup-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.812rem;
  font-weight: 400;
  line-height: 1.4; /* room for descenders — overflow:hidden clips them when tight */
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.2s;
}
.map-popup-name:hover {
  color: var(--color-dark);
}
.map-popup-tipo {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.map-popup-unit {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

/* -- Filters panel ------------------------------------------- */
.sidebar-filters {
  flex-shrink: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 90px;
}

.filter-select,
.filter-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.812rem;
  font-weight: 300;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A7A7A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

.filter-select:focus,
.filter-input:focus {
  border-color: var(--color-primary);
}

.filter-row-price { align-items: flex-start; flex-wrap: wrap; }
.filter-row-price .filter-label { padding-top: 8px; }

.price-range-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-range-row .filter-input { min-width: 0; }

.price-range-sep {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Remove number input spinner arrows */
.filter-input::-webkit-outer-spin-button,
.filter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-input[type=number] { -moz-appearance: textfield; }

.filter-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.sort-pill .fbar-btn {
  padding: 6px 12px;
  font-size: 0.75rem;
}

.compact-card-no-img {
  background: var(--color-border);
}

.compact-card-unit {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px 0 0;
}

.compact-card-price {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-dark);
  font-variant-numeric: lining-nums;
}

/* -- Empty / error state ------------------------------------- */
.map-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 300;
}

/* ── Language switch ───────────────────────────────────────── */
/* A segmented control, not a single button. The old .lang-toggle showed only
   the current language ("PT"), which reads equally well as "you are in
   Portuguese" and as "click for Portuguese" — people cannot tell which without
   clicking it. Showing both options with the active one filled says what the
   control does and what it is set to at once, and still costs one click.
   Language names stay in their own language and there are no flags: a flag is
   a country, not a language. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.lang-switch-globe {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.lang-opt {
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.lang-opt[aria-pressed="false"]:hover { color: var(--color-primary); }

/* The active option is filled, not merely tinted: colour on its own would fail
   WCAG 1.4.1 and would read as a hover state. White rather than gold, so the
   header keeps a single gold accent — the Fale Comigo CTA. */
.lang-opt[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-dark);
  font-weight: 700;
  cursor: default;
}

.lang-opt:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 2px;
}

/* Spells out "Português" / "English" behind the two-letter codes for screen
   readers, which would otherwise announce them as bare letters. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Lead capture modal ────────────────────────────────────── */
.lead-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body.lead-modal-open { overflow: hidden; }

.lead-modal {
  position: relative;
  background: var(--color-bg);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.lead-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px;
}
.lead-modal-close:hover { color: var(--color-dark); }

.lead-modal-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0 0 12px;
}

.lead-modal-subtitle {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin: 14px 0 4px;
}

.lead-modal-property {
  font-family: var(--font-display);
  font-size: 1.062rem;
  font-style: italic;
  color: var(--color-primary-deep);
  margin: 6px 0 0;
}

.lead-form { margin-top: 18px; }

.lead-field { display: block; margin-bottom: 14px; }
.lead-field span {
  display: block;
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.lead-field input,
.lead-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.938rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.2s;
}
.lead-field input:focus,
.lead-field select:focus { border-color: var(--color-primary); }

/* Intl phone: dial-code dropdown + national number side by side */
.lead-phone-row { display: flex; gap: 8px; }
.lead-phone-row .lead-dial {
  flex: 0 0 auto;
  width: 108px;
  padding-left: 8px;
  padding-right: 4px;
}
.lead-phone-row input { flex: 1; min-width: 0; }

.lead-error {
  font-size: 0.812rem;
  color: #b3261e;
  margin: 0 0 10px;
}

.lead-submit { margin-top: 4px; }

.lead-consent {
  font-size: 0.688rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 14px 0 0;
  text-align: center;
}

/* [hidden] must win over the flex display above */
.lead-modal-overlay[hidden] { display: none; }

/* ============================================================
   FINANCING PAGE (financiamento.html)
   Reuses .city-hero, .city-section-header, .hood-grid/.hood-card,
   .invest-disclaimer and .city-cta — only layout glue lives here.
   ============================================================ */

/* Language-gated nav items are authored hidden and revealed by
   applyLangOnly() in i18n.js; the UA default is enough, but .nav-links
   is a flex container so be explicit. */
.nav-links li[hidden] { display: none; }