/* ============================================================
   LGM REAL ESTATE — Design System
   Paleta: Dark Luxe (negro cálido + dorado)
   Tipografía: Cormorant Garamond (display) + Geist (UI)
   ============================================================ */

:root {
  /* Paleta principal - Dark Luxe */
  --bg: #0e0e0c;
  --bg-2: #141411;
  --bg-3: #1c1b17;
  --surface: #1a1914;
  --surface-2: #22201a;
  --border: rgba(232, 226, 212, 0.08);
  --border-strong: rgba(232, 226, 212, 0.16);

  --text: #e8e2d4;
  --text-dim: #c4bba5;       /* bumped from #b4ab95 → ~6.5:1 vs dark bg, easier read for older eyes */
  --text-mute: #a8a08a;      /* bumped from #948b73 → ~5.5:1 vs dark bg, no longer borderline AA */
  --gold-text: var(--gold);  /* on dark backgrounds gold is already legible */

  --gold: #c9a876;
  --gold-2: #d9bd8e;
  --gold-dim: #8e7851;

  --accent: #c9a876;

  /* Tipografía */
  --f-display: "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  --f-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", "SF Mono", Monaco, monospace;

  /* Escala tipográfica */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 42px;
  --fs-4xl: 64px;
  --fs-5xl: 96px;
  --fs-6xl: 140px;

  /* Espaciado */
  --section-y: 140px;
  --container: 1440px;
  --gutter: 48px;

  /* Transiciones */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Scroll progress */
  --scroll-progress: 0;
}

/* Paleta alterna: Cream (modo claro tweakable) */
body.theme-light {
  --bg: #f5f0e6;
  --bg-2: #ebe4d4;
  --bg-3: #e1d8c3;
  --surface: #fbf7ee;
  --surface-2: #f0ead9;
  --border: rgba(20, 20, 18, 0.08);
  --border-strong: rgba(20, 20, 18, 0.18);
  --text: #14120e;
  --text-dim: #3d362a;       /* darker than #4a4334 → ~9:1 vs cream */
  --text-mute: #5a5347;      /* darker than #6b6354 → ~6:1 vs cream */
  /* Light theme gold variants:
     --gold      kept warm for buttons/icons (3.5:1 on cream — fine for non-text)
     --gold-text darker bronze used wherever gold is applied to TEXT on cream
                 backgrounds (nav links, eyebrows, footer links). 5.0:1+. */
  --gold: #9a7a42;
  --gold-text: #6a4a20;      /* darker bronze for clearer text on cream — ~6.4:1 */
  --gold-2: #b08b4a;
  --gold-dim: #c9a876;
  --accent: #9a7a42;
}

/* Light-theme text-on-cream overrides — surfaces NO-nav (footer, contact,
   chips, drawers) usan --gold-text bronze oscuro para ≥4.5:1 sobre crema.
   Nav queda fuera: el usuario pide el mismo gold cálido en los 3 temas
   tanto en estado floating como scrolled (ver bloque NAV consistency). */
body.theme-light .footer__legal-link,
body.theme-light .footer__legal-sep,
body.theme-light .footer ul a:hover,
body.theme-light .contact__channel-label,
body.theme-light .pcard__zone .dot,
body.theme-light .featured-v2__all,
body.theme-light .fav-drawer__tab.active,
body.theme-light .sell-banner__meta-val,
body.theme-light .footer__brand-eyebrow {
  color: var(--gold-text);
}
/* Nav while still floating over the hero image (no cream backdrop yet):
   light cream-gold para legibilidad. text-shadow REMOVIDO — causaba
   blur visible en texto small con letter-spacing amplio. Usar solo
   color + opacity para contraste. */
body.theme-light .nav:not(.scrolled) .nav__logo-eyebrow {
  color: #f1d6a2;
  text-shadow: none;
}
/* Hero eyebrow ("PUERTO PLATA · DOMINICAN REPUBLIC") sits over the dark
   hero photo regardless of theme. text-shadow blur 6px causaba halo
   difuso sobre texto small (~10-11px) → REMOVIDO. Color con suficiente
   contraste sobre photo dark. */
body.theme-light .hero__eyebrow {
  color: #f0d8a0;
  text-shadow: none;
}
body.theme-light .hero__eyebrow::before { background: #d9be8e; }
/* Active filled chip — switch to dark text everywhere for max contrast */
body.theme-light .featured-v2__chip.active {
  color: #14120e;
}
/* WhatsApp button label sits on a solid gold pill — force near-black */
body.theme-light .nav__wa-label {
  color: #14120e;
}
/* Filled active states sitting on gold backgrounds — near-black text
   for legibility (cream-on-gold = 3.5:1, near-black-on-gold = 8:1+). */
body.theme-light .mobile-drawer__langs button.active,
body.theme-light .mobile-drawer__close:hover,
body.theme-light .mobile-drawer__close:focus-visible,
body.theme-light .nav__theme-btn.active {
  color: #14120e;
}
body.theme-light .footer__vertix a {
  color: var(--gold-text);
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO + NAV consistency (auditoría 2026-05, hotfix 2).
   El hero SIEMPRE tiene foto oscura detrás (incluso en theme-light). Los
   tokens cream + gold-italic deben verse iguales en los 3 temas. El nav,
   tanto floating como scrolled, también mantiene gold cálido en los 3 temas
   por decisión visual (ver screenshot referencia).
   ────────────────────────────────────────────────────────────────────────── */
/* Tokens fijos compartidos entre temas para hero + nav (referencia screenshot
   user 2026-05). NO usar var(--gold) porque cada tema redefine el token y
   queremos el mismo warm gold en los 3 temas. */
:root {
  --hero-cream: #f5efe0;
  --hero-cream-dim: #d8d0bf;
  --hero-gold: #c9a876;       /* warm gold base */
  --hero-gold-bright: #e8c989; /* hover/active más saturado */
  --hero-gold-soft: #d9be8e;  /* eyebrow / underline accent */
  --nav-dark-bg: rgba(14, 14, 12, 0.92); /* fondo nav scrolled uniforme */
}

/* Hero — anular cualquier override theme-* que cambie color. */
body.theme-light .hero__title,
body.theme-coastal .hero__title {
  color: var(--hero-cream);
  text-shadow:
    0 2px 12px rgba(0,0,0,0.85),
    0 4px 48px rgba(0,0,0,0.6),
    0 0 2px rgba(0,0,0,0.5);
}
.hero__title .italic,
body.theme-light .hero__title .italic,
body.theme-coastal .hero__title .italic {
  color: var(--hero-gold);
  text-shadow:
    0 2px 12px rgba(0,0,0,0.9),
    0 4px 32px rgba(0,0,0,0.7),
    0 0 1px rgba(0,0,0,0.6);
}
body.theme-light .hero__sub,
body.theme-coastal .hero__sub {
  color: var(--hero-cream-dim);
  text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}
body.theme-light .hero__eyebrow,
body.theme-coastal .hero__eyebrow {
  color: var(--hero-gold-soft);
  text-shadow: none;
}
body.theme-light .hero__eyebrow::before,
body.theme-coastal .hero__eyebrow::before { background: var(--hero-gold-soft); }

/* Nav — dos estados claros para legibilidad visual:
   - Floating (sobre foto hero): cream con text-shadow + gradient scrim
     reforzado. Underline + bullets gold como acento.
   - Scrolled: fondo dark uniforme en los 3 temas + warm gold legible.
   Usuario priorizó atractivo visual; theme-light scrolled deja de ser cream
   para volverse banda editorial dark con gold (look luxury). */

/* Refuerzo de scrim sobre foto para floating (más opaco al top). */
.nav:not(.scrolled) {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.68) 0%,
    rgba(0,0,0,0.42) 55%,
    transparent 100%
  );
}

/* Fondo dark uniforme en scrolled — overridea cream de theme-light. */
body .nav.scrolled,
body.theme-default .nav.scrolled,
body.theme-light .nav.scrolled,
body.theme-coastal .nav.scrolled {
  background: var(--nav-dark-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Floating links — cream/white opacity alta + text-shadow legible. */
.nav:not(.scrolled) .nav__links a,
body.theme-light .nav:not(.scrolled) .nav__links a,
body.theme-coastal .nav:not(.scrolled) .nav__links a {
  color: var(--hero-cream);
  opacity: 0.92;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.45);
}
.nav:not(.scrolled) .nav__links a:hover,
body.theme-light .nav:not(.scrolled) .nav__links a:hover,
body.theme-coastal .nav:not(.scrolled) .nav__links a:hover {
  color: var(--hero-cream);
  opacity: 1;
}
.nav:not(.scrolled) .nav__links a.active,
body.theme-light .nav:not(.scrolled) .nav__links a.active,
body.theme-coastal .nav:not(.scrolled) .nav__links a.active {
  color: var(--hero-cream);
  opacity: 1;
  font-weight: 600;
}

/* Scrolled links — warm gold sobre dark, opacity más alta para legibilidad. */
.nav.scrolled .nav__links a,
body.theme-light .nav.scrolled .nav__links a,
body.theme-coastal .nav.scrolled .nav__links a {
  color: var(--hero-gold);
  opacity: 0.88;
  text-shadow: none;
}
.nav.scrolled .nav__links a:hover,
body.theme-light .nav.scrolled .nav__links a:hover,
body.theme-coastal .nav.scrolled .nav__links a:hover {
  color: var(--hero-gold-bright);
  opacity: 1;
}
.nav.scrolled .nav__links a.active,
body.theme-light .nav.scrolled .nav__links a.active,
body.theme-coastal .nav.scrolled .nav__links a.active {
  color: var(--hero-gold-bright);
  opacity: 1;
  font-weight: 600;
}

/* Underline siempre gold (acento) — en floating queda visible incluso si
   el texto es cream, en scrolled refuerza el active. */
.nav__links a::after,
.nav:not(.scrolled) .nav__links a::after,
.nav.scrolled .nav__links a::after,
body.theme-light .nav__links a::after,
body.theme-coastal .nav__links a::after {
  background: var(--hero-gold);
  height: 1.5px;
}

/* Logo eyebrow ("Real Estate") — gold cálido en scrolled, cream sobre foto.
   text-shadow REMOVIDO universalmente (causaba blur sobre 9px font). */
.nav:not(.scrolled) .nav__logo-eyebrow,
body.theme-light .nav:not(.scrolled) .nav__logo-eyebrow,
body.theme-coastal .nav:not(.scrolled) .nav__logo-eyebrow {
  color: var(--hero-gold-soft);
  text-shadow: none;
}
.nav.scrolled .nav__logo-eyebrow,
body.theme-light .nav.scrolled .nav__logo-eyebrow,
body.theme-coastal .nav.scrolled .nav__logo-eyebrow {
  color: var(--hero-gold);
}

/* Leaflet attribution: fg #6b6354 sobre overlay rgba(14,14,12,.8). Solo 3.26:1.
   Forzamos fg crema claro para >7:1 en cualquier tema. */
.leaflet-control-attribution,
.leaflet-control-attribution a,
.leaflet-control-attribution span {
  color: #f5efe0 !important;
}

/* Botón "Cerrar" — fondo gold, fg crema = 3.53:1. Forzamos near-black. */
.lgm-modal__close,
.modal-overlay .modal__close,
button[aria-label="Cerrar"],
.fav-drawer__close {
  color: #14120e;
}
body.theme-light .lgm-modal__close,
body.theme-light .modal-overlay .modal__close,
body.theme-light button[aria-label="Cerrar"],
body.theme-light .fav-drawer__close {
  color: #14120e;
}

/* Paleta alterna: Coastal (azul profundo) */
body.theme-coastal {
  --bg: #0a1620;
  --bg-2: #112131;
  --bg-3: #182b3d;
  --surface: #152638;
  --surface-2: #1d3246;
  /* Explicit text tokens — coastal previously inherited the dark theme's
     warm beige tones which read low-contrast on navy. New values are
     cool-tinted blue-grays that hit ≥4.5:1 vs --bg / --bg-2. */
  --text: #e9eef5;
  --text-dim: #c8d2dd;       /* bumped from #b8c5d3 for more legible secondary text on navy */
  --text-mute: #a8b6c6;      /* bumped from #94a4b6 → ~5.5:1 vs --bg */
  --gold: #d9be8e;
  --gold-text: var(--gold);
  --gold-2: #eacfa0;
  --accent: #d9be8e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* SIN overflow-x en html — Chrome trata overflow-x:clip/hidden como
   scroll container y rompe middle-click autoscroll incluso si axis
   vertical es visible. Containment horizontal manejado por max-width
   + box-sizing en elementos hijos. */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font-feature-settings ss01/cv11 REMOVIDOS 2026-05-28. Cliente reportó
     dígito "1" se mostraba como numeral Romano "I" en specs (e.g. "26614.1
     m²"). ss01 = stylistic set 1 de Cormorant que sustituye varios glifos
     incluyendo el "1" por un palote serif estilo I romano. cv11 = character
     variant adicional. Quitarlos = "1" plain numeric.
     Plus lnum + tnum forzados globally para alineación.
     Inherit-down: Cormorant default = old-style figures (3,4,5,7,9 descienden
     bajo baseline). lnum + tnum fuerzan lining + tabular = altura uniforme +
     ancho fijo. Geist (UI sans) ya lining default → no afecta. */
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  /* SIN overflow-x — middle-click autoscroll preservado. Body es scroll
     container vertical natural del browser; cualquier overflow-x lo rompe. */
  max-width: 100vw;
}

/* GLOBAL NUKE 2026-05-28: cliente reportó dígitos siguen tipo numeral Romano
   pese a fixes previos. Force LNUM + TNUM en TODOS los elementos sin
   excepción. Override !important para vencer cualquier ss01/cv11 que se
   coloque inline o desde otras capas. */
*,
*::before,
*::after {
  font-variant-numeric: lining-nums tabular-nums !important;
}

/* Compatibilidad legacy — clases específicas mantienen feature flags
   explícitos por si algún browser no respeta font-variant-numeric. */
.modal__spec-val,
.modal__price-value,
.pcard__price-main,
.fcard__price,
.fcard__meta,
.pcard__specs,
.modal__specs,
.gcard__price,
.lgm-stat-value,
.intel-kpi__value {
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Overflow safety net — fixed drawers (mobile + fav) shouldn't trigger horizontal scroll */
/* SIN overflow-x — middle-click autoscroll preservado. */
#root, .route-main { max-width: 100vw; }

/* Selección */
::selection { background: var(--gold); color: var(--bg); }

/* Scrollbar — visible en cualquier tema (gold thumb prima sobre border-strong
   pale beige que en theme-coastal no contrastaba con navy). Cliente reportaba
   barra invisible en azul. Ahora gold-dim default + gold full hover en todos
   los temas. Track sigue var(--bg) para fundirse con fondo. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* Firefox: scrollbar-color sobre body porque las CSS vars de tema viven ahí
   (theme-coastal modifica --gold/--bg en body, no en :root). Si lo ponemos
   en html, hereda los vars default y la barra queda dorada-oscura sobre navy. */
body { scrollbar-color: var(--gold-dim) var(--bg); scrollbar-width: thin; }

/* Coastal/azul: gold tiene tono más luminoso (#d9be8e). Reforzamos contraste
   usando --gold completo en thumb default + --gold-2 en hover. */
body.theme-coastal::-webkit-scrollbar-thumb { background: var(--gold); }
body.theme-coastal::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }
body.theme-coastal { scrollbar-color: var(--gold) var(--bg); }

/* Tipografía display */
h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.02;
  /* ss01 REMOVIDO 2026-05-28 — sustituía digit "1" por glifo Roman I.
     liga + dlig preservados (ligaduras normales). lnum + tnum fuerzan
     dígitos lining + tabular para alineación numérica. */
  font-feature-settings: "liga", "dlig", "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}

h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.eyebrow {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
}

/* Utilities */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rule { height: 1px; background: var(--border); width: 100%; }
.rule-strong { height: 1px; background: var(--border-strong); }

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; color: inherit; }

/* Botón dorado */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--gold);
  color: #14120e;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.4s var(--ease-out);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.btn-gold:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-gold .arrow { transition: transform 0.4s var(--ease-out); }
.btn-gold:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  transition: all 0.4s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  transition: all 0.3s var(--ease);
}
.btn-text:hover { color: var(--gold); }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 1000;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 60%, var(--gold-2) 100%);
  width: calc(var(--scroll-progress) * 100%);
  transition: width 0.1s linear;
  box-shadow: 0 0 20px var(--gold);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring { display: none !important; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 32px var(--gutter) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Always-on top gradient: makes nav items readable over any hero photo */
  background: linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.22) 55%, transparent 100%);
  transition: background 0.6s var(--ease), padding 0.4s var(--ease);
  /* No border anywhere — client wants the hairline divider gone in every
     state and on every breakpoint. */
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.nav.scrolled {
  background: rgba(14, 14, 12, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 18px var(--gutter) 14px;
}
body.theme-light .nav.scrolled { background: rgba(245, 240, 230, 0.92); }
body.theme-coastal .nav.scrolled { background: rgba(10, 22, 32, 0.88); }

/* ── Nav not-scrolled: cream links — overriden por bloque tokens fijos
   más abajo (HERO + NAV consistency). Mantener defaults aquí para el
   logo eyebrow + theme-pill solamente. */

.nav:not(.scrolled) .nav__theme-group {
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.42);
  border-radius: 4px;
}
.nav:not(.scrolled) .nav__theme-btn {
  color: rgba(255,255,255,0.80);
  opacity: 1;
  border-right-color: rgba(255,255,255,0.2);
}
.nav:not(.scrolled) .nav__theme-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nav:not(.scrolled) .nav__theme-btn.active {
  color: #fff;
  background: rgba(255,255,255,0.20);
}
.nav:not(.scrolled) .nav__lang {
  color: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.30);
}
.nav:not(.scrolled) .nav__lang:hover { color: #fff; border-color: rgba(255,255,255,0.65); }

.nav__logo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1;
  text-decoration: none;
  width: fit-content;
}
.nav__logo img {
  /* Tamaño grande para que el logo destaque. Theme swap via React src
     (no más content:url override). Aspect-ratio del nuevo logo horizontal
     LGM (~2.4:1) — actualizar si cambia el archivo. */
  height: 88px; width: auto;
  max-height: 88px;
  transition: filter 0.3s, height 0.4s var(--ease);
  display: block;
}
.nav.scrolled .nav__logo img { height: 64px; max-height: 64px; }
.nav__logo-eyebrow {
  font-family: "Geist Mono", var(--font-sans, system-ui), monospace;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  font-weight: 500;
  margin-top: 4px;
  display: block;
  text-align: center;
  white-space: nowrap;
  /* Geist Mono has no letter-spacing compensation on last char — pull back so visual center matches text center */
  text-indent: 0.42em;
  /* Anti-blur: smoothing + crisp pixel rendering. SIN text-shadow ni transform. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.nav__links {
  display: flex; gap: 36px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav__links a {
  color: var(--gold);
  opacity: 0.72;
  transition: opacity 0.3s, color 0.3s;
  position: relative;
  padding-bottom: 2px;
}
.nav__links a:hover { opacity: 1; color: var(--gold-2); }
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__wa {
  display: inline-flex;
  align-items: center; gap: 10px;
  padding: 10px 20px;
  /* WhatsApp brand green — antes era dorado, cliente reportó "intuitivamente
     mejor verde". Verde oficial WA #25D366 con hover #1ebe5d más oscuro. */
  background: #25D366;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s;
}
.nav__wa:hover { background: #1ebe5d; }

.nav__lang {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
  opacity: 0.78;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  position: relative;
  background: transparent;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s;
}
.nav__lang:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }

/* Theme selector (3 variants: light / dark / coastal) */
.nav__theme-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.nav__theme-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s, background 0.25s, color 0.25s;
}
.nav__theme-btn:last-child { border-right: 0; }
.nav__theme-btn:hover { opacity: 1; color: var(--gold); }
.nav__theme-btn.active {
  opacity: 1;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: all 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { width: 100%; }
.nav__burger span:nth-child(2) { width: 70%; margin-left: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* z-index: 2 eleva toda la pila del hero sobre siblings (ticker, featured, etc.)
     para que el dropdown panel del buscador pueda tapar la barra del ticker
     cuando se abre. No afecta nav/modals/drawers (z-index >= 100). */
  z-index: 2;
  /* svh + fallback vh: stable height en mobile (URL bar dynamics no causan
     resize). Antes 100vh ok en muchos browsers pero se promovia a 100dvh
     en mobile breakpoint causando CLS. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 120px var(--gutter) 80px;
  /* Always-dark fallback so animation drift on the .hero__bg image (3D
     rotations + translates can briefly uncover a corner) never reveals
     the cream theme bg as a visible white box. The photo itself is dark
     so #0a1014 blends in seamlessly when it does peek through. */
  background: #0a1014;
}
/* Top scrim: gradiente oscuro garantiza contraste de nav + hero__eyebrow
   sobre cualquier foto (cielo claro, agua, etc). Cubre los primeros ~220px
   del hero — zona nav + eyebrow + part of title. Pseudo fixed-height permite
   que photo siga visible debajo. pointer-events: none no bloquea clicks.
   Solo aparece sobre photo hero (no en otras páginas). */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 240px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.12) 78%,
    transparent 100%
  );
  pointer-events: none;
}

/* 3D scene: perspective on parent creates real depth for rotateX/Y on image. */
.hero {
  perspective: 1600px;
  perspective-origin: 50% 45%;
}

/* Máscara que clipea el bg (con inset negativo) a los bordes reales del hero.
   Antes el clip vivía en .hero { overflow: hidden } pero eso también clipeaba
   los dropdowns del buscador. Ahora solo el bg se clipa. */
.hero__bg-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg {
  position: absolute;
  inset: -12% 0 -12% 0;
  z-index: 0;
  /* will-change kept off the wrapper — only the inner img advertises
     transform changes. Putting it on both promotes two GPU layers and
     extended idle on iOS/Chromium can drop one, leaving the hero
     blank with just gradients showing through. */
  overflow: hidden;
}

/* Warm sun-glint + cool ocean reflection. Dramatic drift. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 38% at 28% 32%, rgba(255, 210, 140, 0.42), transparent 58%),
    radial-gradient(ellipse 35% 28% at 75% 70%, rgba(120, 200, 255, 0.28), transparent 62%),
    radial-gradient(ellipse 25% 20% at 60% 20%, rgba(255, 180, 100, 0.22), transparent 70%);
  mix-blend-mode: soft-light;
  animation: heroSunDrift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
  filter: blur(0px);
}
/* Mobile: disable decorative pseudos (::before + ::after). Ambos causan
   CLS cuando .hero__bg resuelve dimensions post-paint. Decorativo unicamente.
   Tambien disable animaciones heroDroneCam + heroLightStorm en hero img:
   - heroDroneCam: 28s scale + translate2d, GPU-pesado en mobile -> jank scroll
   - heroLightStorm: filter brightness/contrast loop, no compositable -> repaint
   - heroSunDrift: ya no aplica (::before hidden)
   En desktop: animaciones siguen, GPU tiene capacidad. */
@media (max-width: 760px) {
  .hero__bg::before,
  .hero__bg::after { display: none; }
  .hero__bg img { animation: none !important; }
}
/* Reduced-motion: disable todas animaciones decorativas en cualquier viewport */
@media (prefers-reduced-motion: reduce) {
  .hero__bg img,
  .hero__bg::before,
  .hero__bg::after { animation: none !important; }
}

/* Secondary glint layer: fast sparkle flashes. */
.hero__bg .hero__sparkle,
.hero__bg::after {
  pointer-events: none;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    /* Scrim behind text (bottom-left) for legibility */
    radial-gradient(ellipse 85% 75% at 25% 85%, rgba(14,14,12,0.55) 0%, rgba(14,14,12,0.28) 40%, transparent 75%),
    /* Bottom fade for search bar */
    radial-gradient(ellipse 120% 70% at 50% 110%, rgba(14,14,12,0.72) 0%, rgba(14,14,12,0.18) 55%, transparent 80%),
    /* Vertical scrim — lightened */
    linear-gradient(180deg, rgba(14,14,12,0.30) 0%, rgba(14,14,12,0.12) 30%, rgba(14,14,12,0.08) 50%, rgba(14,14,12,0.30) 75%, rgba(14,14,12,0.72) 100%),
    /* Left-side darkening — lightened */
    linear-gradient(90deg, rgba(14,14,12,0.38) 0%, rgba(14,14,12,0.08) 55%, rgba(14,14,12,0.02) 100%);
}

.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 55%;
  /* backface-visibility, perspective and 3d transforms removed — the
     animation no longer needs them and they were the trigger for the
     GPU-layer-loss-after-idle bug that left the hero blank.            */
  animation:
    heroDroneCam 28s cubic-bezier(0.42, 0, 0.58, 1) 0s infinite alternate,
    heroLightStorm 9s ease-in-out 0s infinite alternate;
  will-change: transform;
}

/* Drone orbit: 3D rotation + strong pan + zoom pulses.
   5 organic keyframes → never looks symmetric. Feel: drone circling the villa. */
@keyframes heroDroneCam {
  /* Ken-Burns style: only translate2d + scale. The previous version
     used rotateX/Y/Z which forced a perspective-aware GPU layer; on
     long idle stretches Chromium would discard the layer and leave
     the hero blank. 2D-only transforms are stable forever and visually
     close enough to the orbital feel. */
  0%   { transform: translate(0, 0) scale(1.20); }
  25%  { transform: translate(-1.6%, -0.9%) scale(1.24); }
  50%  { transform: translate(1.3%, -1.2%) scale(1.22); }
  75%  { transform: translate(-0.9%, 0.6%) scale(1.26); }
  100% { transform: translate(1.1%, -0.9%) scale(1.22); }
}

/* Light storm: aggressive brightness + saturation oscillation.
   Simulates sun breaking through clouds, dappled light.
   Capped at 0.62 max to keep text readable over any frame. */
@keyframes heroLightStorm {
  0%   { filter: brightness(0.82) saturate(1.00) contrast(1.04) blur(0); }
  28%  { filter: brightness(0.90) saturate(1.08) contrast(1.06) blur(0); }
  55%  { filter: brightness(0.78) saturate(1.02) contrast(1.03) blur(0); }
  80%  { filter: brightness(0.88) saturate(1.05) contrast(1.05) blur(0); }
  100% { filter: brightness(0.84) saturate(1.00) contrast(1.04) blur(0); }
}

/* Sun + ocean glint drift: wider range, dramatic opacity swings. */
@keyframes heroSunDrift {
  0% {
    transform: translate3d(-9%, -4%, 0) scale(0.95) rotate(0deg);
    opacity: 0.45;
  }
  33% {
    transform: translate3d(6%, 3%, 0) scale(1.18) rotate(3deg);
    opacity: 1;
  }
  66% {
    transform: translate3d(-4%, -7%, 0) scale(1.08) rotate(-2deg);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(8%, 1%, 0) scale(1.22) rotate(4deg);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img,
  .hero__bg::before { animation: none; transform: none; }
  .hero__bg img { filter: brightness(0.85) saturate(1.0) contrast(1.04); }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}

.hero__main { max-width: 900px; }
.hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 16px;
  /* Smoothing antialiased solo. NO transform translateZ (creaba compositor
     layer con sub-pixel positioning → blur). NO backface-visibility. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hero__eyebrow::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--gold);
}

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(54px, 9vw, 140px);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-wrap: pretty;
  color: #f5efe0;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.85),
    0 4px 48px rgba(0,0,0,0.6),
    0 0 2px rgba(0,0,0,0.5);
}
.hero__title span { display: block; }
.hero__title .italic {
  font-style: italic;
  color: var(--gold);
  text-shadow:
    0 2px 12px rgba(0,0,0,0.9),
    0 4px 32px rgba(0,0,0,0.7),
    0 0 1px rgba(0,0,0,0.6);
}

.hero__sub {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  /* Antes #d8d0bf (cream claro) se fusionaba con tonos cama/madera de foto
     hero. Subido a blanco puro + double text-shadow (sharp + blur) garantiza
     legibilidad sobre cualquier zona de la imagen. */
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 48px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(0, 0, 0, 0.6);
}

.hero__eyebrow {
  /* text-shadow blur removido — causaba halo difuso en glyph small.
     Color tiene contraste suficiente sobre photo dark. */
  text-shadow: none;
}

.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  text-align: right;
  padding-bottom: 10px;
}
.hero__meta-item {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__meta-item strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1;
  margin-bottom: 4px;
}

/* Hero scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  z-index: 3;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.hero__scroll:hover { color: var(--gold); gap: 22px; }
.hero__scroll:hover .hero__scroll-line { animation: none; transform: scaleX(1); opacity: 1; }
.hero__scroll-line {
  width: 60px; height: 1px;
  background: var(--gold);
  animation: scrollLine 2s ease-in-out infinite;
  transform-origin: left;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.3); opacity: 0.4; }
}

/* Buscador del hero */
.search {
  position: relative;
  z-index: 3;
  margin: -60px auto 0;
  max-width: var(--container);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
  gap: 1px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.search__field {
  background: var(--bg-2);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.search__field:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 16px; bottom: 16px;
  width: 1px;
  background: var(--border);
}
.search__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.search__control {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 15px;
  font-family: var(--f-display);
  outline: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.search__control option { background: var(--bg-2); color: var(--text); }
.search__btn {
  background: var(--gold);
  color: #14120e;
  border: 0;
  padding: 0 40px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.search__btn:hover { background: var(--gold-2); }

/* Empty-state variant — hero search when admin has zero properties */
.search--empty {
  grid-template-columns: 1fr auto;
  padding: 28px 32px;
  gap: 24px;
  align-items: center;
}
.search__empty-text {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .search--empty {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 16px;
    text-align: center;
  }
  .search--empty .search__btn { padding: 14px 24px; }
}

/* ============================================================
   TICKER / MARQUEE
   ============================================================ */
.ticker {
  padding: 32px 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative;
}
.ticker__track {
  display: flex;
  white-space: nowrap;
  gap: 64px;
  animation: ticker 60s linear infinite;
  align-items: center;
  will-change: transform;
}
.ticker__track span {
  font-family: var(--f-display);
  font-size: clamp(20px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex; align-items: center; gap: 64px;
  line-height: 1;
}
.ticker__track span:nth-child(even) {
  color: var(--gold);
  font-style: italic;
}
.ticker__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 24px;
  vertical-align: middle;
  flex: 0 0 auto;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation-duration: 180s; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: var(--section-y) var(--gutter);
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.section-head h2 {
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 1000px;
  text-wrap: pretty;
}
.section-head p {
  max-width: 360px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}
.section-head .eyebrow { margin-bottom: 24px; display: block; }

/* ============================================================
   FEATURED CAROUSEL
   ============================================================ */
.featured {
  padding: var(--section-y) 0;
  overflow: hidden;
  position: relative;
}
.featured .container { max-width: none; padding: 0 var(--gutter); }
.featured .section-head { padding: 0; }
.featured__carousel {
  display: flex;
  gap: 24px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.featured__carousel::-webkit-scrollbar { display: none; }
.featured__carousel.dragging { cursor: grabbing; scroll-snap-type: none; }

.carousel-nav {
  display: flex; gap: 12px;
  margin-top: 32px;
  padding: 0 var(--gutter);
  align-items: center;
}
.carousel-nav__btn {
  width: 56px; height: 56px;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  color: var(--text);
}
.carousel-nav__btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(201, 168, 118, 0.05); }
.carousel-nav__btn:disabled { opacity: 0.3; cursor: default; }
.carousel-nav__progress {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 20px;
  position: relative;
}
.carousel-nav__progress-fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.carousel-nav__count {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ============================================================
   PROPERTY CARD (carrusel)
   ============================================================ */
.pcard {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 380px;
  scroll-snap-align: start;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.5s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.pcard:hover {
  border-color: var(--gold-dim);
  transform: translateY(-4px);
}
.pcard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}
.pcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter 0.6s;
}
.pcard:hover .pcard__img img { transform: scale(1.06); filter: brightness(1.05); }

.pcard__badges {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 8px;
  z-index: 2;
}
.pcard__badge {
  padding: 6px 12px;
  background: rgba(14,14,12,0.75);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--border-strong);
}
.pcard__badge--gold { background: var(--gold); color: #14120e; border-color: var(--gold); }
/* Lujo / Ultra Lujo: visual hierarchy distinta del gold "venta/alquiler". */
.pcard__badge--luxury {
  background: linear-gradient(135deg, #c9a876 0%, #b89665 100%);
  color: #1a1610;
  border-color: #d9b88a;
  letter-spacing: 0.2em;
  font-weight: 600;
}
.pcard__badge--ultra {
  background: linear-gradient(135deg, #2a1f0f 0%, #1a1610 100%);
  color: #d9b88a;
  border: 1px solid #d9b88a;
  letter-spacing: 0.24em;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* Exclusivo (LGM exclusive listing) — palette distinta a luxury/ultra para
   diferenciar visualmente. Granate elegante con borde dorado claro. */
.pcard__badge--exclusive {
  background: linear-gradient(135deg, #4a1f2a 0%, #2e1219 100%);
  color: #f0d8a8;
  border: 1px solid #c9a876;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.pcard__badge--vacation {
  background: rgba(86, 163, 166, 0.18);
  color: #7fd4d7;
  border-color: rgba(127, 212, 215, 0.45);
}
.pcard__badge--cod {
  background: rgba(20, 18, 12, 0.82);
  color: var(--text-dim);
  border-color: rgba(232, 226, 212, 0.2);
  letter-spacing: 0.06em;
  text-transform: none;
}

.pcard__fav {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: var(--gold);
  border: 1px solid var(--gold);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s;
  color: #14120e;
}
.pcard__fav:hover { background: #b89256; border-color: #b89256; color: #0e0e0c; }
.pcard__fav.active { background: var(--gold); color: #14120e; border-color: var(--gold); }

.pcard__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pcard__ref {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
}
.pcard__name {
  font-family: 'LGM Title', "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
  overflow: hidden;
  max-height: calc(1.1em * 3);
}
.pcard__zone {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.pcard__zone .dot { color: var(--gold); margin: 0 6px; }

.pcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--text-dim);
  font-weight: 500;
}
.pcard__specs > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
.pcard__specs > div svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.pcard__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  font-family: var(--f-display);
}
.pcard__price-main {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.pcard__price-alt {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--f-ui);
  letter-spacing: 0.06em;
}

/* ============================================================
   FEATURED CAROUSEL V2 — screenshot redesign
   ============================================================ */
.featured-v2 { padding: 40px 0 var(--section-y); overflow: hidden; position: relative; }
/* Mobile: reduce padding bottom — el carousel snap-aligned ya tiene altura
   completa con cards 4:5; padding section-y completo creaba empty space
   excesivo bajo el carousel reportado por cliente. */
@media (max-width: 640px) {
  .featured-v2 { padding: 24px 0 32px; }
}
.featured-v2 .container { max-width: none; padding: 0 var(--gutter); }

.featured-v2__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
  gap: 40px;
  flex-wrap: wrap;
}
.featured-v2__title {
  font-family: var(--f-display);
  font-size: clamp(44px, 5.2vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.featured-v2__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
  display: inline-block;
  margin-left: 0.15em;
}
.featured-v2__all {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
  white-space: nowrap;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--f-ui);
  cursor: pointer;
}
.featured-v2__all:hover { color: var(--gold); border-bottom-color: var(--gold); }

.featured-v2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.featured-v2__chip {
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--fg);
  font-family: var(--f-ui);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  letter-spacing: 0.1em;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
  text-transform: none;
}
.featured-v2__chip:hover { border-color: var(--gold); color: var(--gold); }
.featured-v2__chip.active {
  /* Filled gold pill with high-contrast dark text — was gold-on-gold-tinted
     bg which gave a 1.08:1 ratio (illegible). Now a solid gold chip with
     near-black text reads ≥10:1 on every theme. */
  background: var(--gold);
  color: #14120e;
  border-color: var(--gold);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
body.theme-light .featured-v2__chip.active {
  background: var(--gold);
  color: #14120e;          /* near-black for ≥10:1 vs gold */
}

.featured-v2__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-bottom: 8px;
  cursor: grab;
  scrollbar-width: none;
  /* Mobile/tablet: swipe horizontal nativo con dedo. pan-x + pan-y permite
     que browser detect direction principal y route apropiado: swipe horizontal
     → carousel scroll, swipe vertical → page scroll. Antes solo pan-x bloqueaba
     vertical scroll completamente cuando user tocaba carousel — daba sensación
     de "página trabada" al deslizar abajo en featured cards. */
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.featured-v2__track::-webkit-scrollbar { display: none; }
.featured-v2__track.dragging { cursor: grabbing; scroll-snap-type: none; }
.featured-v2__track.auto-scrolling { scroll-snap-type: none; scroll-behavior: auto; }
.featured-v2__track.auto-rotating { scroll-snap-type: none; scroll-behavior: auto; }

.fcard {
  flex: 0 0 calc(25% - 17px);
  min-width: 280px;
  scroll-snap-align: start;
  cursor: pointer;
  display: block;
  background: transparent;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.fcard:hover { transform: translateY(-6px); }

.fcard__img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: #0f0d0a;
}
.fcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
/* Mobile/tablet: source photos are usually landscape (hero shots).
   Portrait 3:4 over-crops sides. Switch to 4:3 landscape so image
   stays consistent across cards without losing key subject. */
@media (max-width: 1024px) {
  .fcard__img { aspect-ratio: 4 / 3; }
}
/* Small mobile: card ocupa ~88% viewport, image ratio 4:5 (vertical retrato)
   para maximizar presencia visual + reducir empty space que reportaba cliente.
   Cada card snap-aligned, horizontal swipe muestra siguiente. */
@media (max-width: 640px) {
  .fcard { flex: 0 0 88vw; min-width: 88vw; max-width: 88vw; }
  .fcard__img { aspect-ratio: 4 / 5; }
}
.fcard:hover .fcard__img img { transform: scale(1.06); }

.fcard__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(10,8,6,0.96) 0%,
      rgba(10,8,6,0.84) 28%,
      rgba(10,8,6,0.52) 55%,
      rgba(10,8,6,0.18) 75%,
      rgba(10,8,6,0) 100%);
}

.fcard__over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 22px 22px;
  color: #f3ead9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fcard__corner {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: #14120e;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 2px;
  z-index: 2;
}

.fcard__fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: #14120e;
  cursor: pointer;
  z-index: 2;
  transition: all .25s ease;
}
.fcard__fav:hover { background: #b89256; border-color: #b89256; color: #0e0e0c; }
.fcard__fav.active { background: var(--gold); color: #14120e; border-color: var(--gold); }

/* Video count chip on listing cards — bottom-left of the image, mirrors
   the corner badge but with a video icon so the agent / buyer instantly
   sees a property has walkthrough video(s). Reused on .fcard / .pcard /
   .gcard via shared .fcard__video-badge class. */
.fcard__video-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(212, 165, 74, 0.95);
  color: #14120e;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.fcard__loc {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.7);
  margin-bottom: 4px;
}
.fcard__name {
  font-family: 'LGM Title', "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(16px, 3.8vw, 26px);
  font-weight: 400;
  line-height: 1.18;
  color: #f3ead9;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
  overflow: hidden;
  max-height: calc(1.18em * 3);
}
.fcard__price {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 10px;
}
.fcard__meta {
  display: flex;
  gap: 16px;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(243, 234, 217, 0.6);
  text-transform: uppercase;
  padding-top: 10px;
  border-top: 1px solid rgba(243, 234, 217, 0.18);
}

.featured-v2__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.featured-v2__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}
.featured-v2__dot.active { background: var(--gold); width: 26px; border-radius: 4px; }

@media (max-width: 1280px) {
  .fcard { flex: 0 0 calc(33.333% - 15px); min-width: 280px; }
}
@media (max-width: 1024px) {
  .fcard { flex: 0 0 calc(50% - 11px); min-width: 260px; }
  .featured-v2__head { align-items: flex-start; }
  /* Tablet: compact overlay so text doesn't climb too high */
  .fcard__over { padding: 16px 18px 18px; gap: 3px; }
  .fcard__name {
    font-size: clamp(14px, 2.4vw, 22px);
    max-height: calc(1.18em * 2);
    margin: 0 0 4px 0;
  }
  .fcard__price { font-size: 17px; margin-bottom: 6px; }
  .fcard__meta { font-size: 10px; gap: 12px; padding-top: 7px; }
}
@media (max-width: 640px) {
  .fcard { flex: 0 0 78%; min-width: 0; }
  .featured-v2__chips { gap: 8px; }
  .featured-v2__chip { padding: 8px 16px; }
  /* Mobile: tightest overlay — 2-line title cap, minimal padding */
  .fcard__over { padding: 12px 14px 14px; gap: 2px; }
  .fcard__loc { font-size: 9px; letter-spacing: 0.16em; margin-bottom: 2px; }
  .fcard__name {
    font-size: clamp(13px, 4vw, 18px);
    max-height: calc(1.18em * 2);
    margin: 0 0 3px 0;
  }
  .fcard__price { font-size: 15px; margin-bottom: 5px; }
  .fcard__meta { font-size: 10px; gap: 10px; padding-top: 6px; }
}
/* Ultrawide: show more cards simultaneously instead of 4 giant ones */
@media (min-width: 1680px) {
  .fcard { flex: 0 0 calc(20% - 18px); min-width: 280px; }
}
@media (min-width: 2400px) {
  .fcard { flex: 0 0 calc(16.666% - 19px); min-width: 300px; }
}
@media (min-width: 3400px) {
  .fcard { flex: 0 0 calc(14.285% - 19px); min-width: 320px; }
  .featured-v2 .container { max-width: 3200px; margin: 0 auto; }
}
/* Cap carousel container on huge displays so cards don't stretch edge-to-edge */
@media (min-width: 2400px) {
  .featured-v2 .container { max-width: 2400px; margin: 0 auto; }
}

/* ============================================================
   EDITORIAL GRID
   ============================================================ */
.editorial__filters {
  display: flex;
  gap: 4px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.editorial__filter {
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  background: transparent;
}
.editorial__filter:hover { color: var(--text); }
.editorial__filter.active {
  color: var(--gold);
  border-color: var(--gold);
}

.editorial__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.gcard { position: relative; cursor: pointer; overflow: hidden; }
.gcard__img {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
}
.gcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.gcard:hover .gcard__img img { transform: scale(1.05); }

.gcard__info {
  padding: 20px 0 8px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.gcard__info h4 {
  font-family: 'LGM Title', "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(17px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 6px;
  overflow: hidden;
  max-height: calc(1.1em * 3);
}
.gcard__info p {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.gcard__op {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 10px;
  border: 1px solid var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.gcard__price {
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--gold);
}

/* Tamaños variables del grid */
.gcard--w3 { grid-column: span 3; }
.gcard--w4 { grid-column: span 4; }
.gcard--w5 { grid-column: span 5; }
.gcard--w6 { grid-column: span 6; }
.gcard--w7 { grid-column: span 7; }
.gcard--w8 { grid-column: span 8; }

.gcard--w3 .gcard__img { aspect-ratio: 3 / 4; }
.gcard--w4 .gcard__img { aspect-ratio: 4 / 5; }
.gcard--w5 .gcard__img { aspect-ratio: 1 / 1; }
.gcard--w6 .gcard__img { aspect-ratio: 4 / 3; }
.gcard--w7 .gcard__img { aspect-ratio: 16 / 10; }
.gcard--w8 .gcard__img { aspect-ratio: 16 / 9; }

/* ============================================================
   PILLARS (WHY LGM)
   ============================================================ */
.pillars {
  background: var(--bg-2);
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillars__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.pillar {
  padding: 56px 32px 56px 0;
  border-right: 1px solid var(--border);
  position: relative;
  transition: background 0.4s;
}
.pillar:last-child { border-right: 0; padding-right: 0; }
.pillar:first-child { padding-left: 0; }
.pillar:not(:first-child) { padding-left: 32px; }
.pillar__num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.pillar__num::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--gold);
}
.pillar__title {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pillar__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ============================================================
   PROCESS
   ============================================================ */
.process {
  padding: var(--section-y) var(--gutter);
}
.process__steps {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process__line {
  position: absolute;
  top: 30px;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.process__line-fill {
  position: absolute;
  top: 30px; left: 0;
  height: 1px;
  background: var(--gold);
  width: 0;
  transition: width 1.2s var(--ease-out);
  z-index: 1;
}
.pstep {
  position: relative;
  padding: 0 32px 0 0;
  z-index: 2;
}
.pstep__num {
  width: 60px; height: 60px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 36px;
  font-style: italic;
  transition: all 0.4s var(--ease);
}
.pstep.active .pstep__num {
  background: var(--gold);
  color: #14120e;
  border-color: var(--gold);
}
.pstep__title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pstep__desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 260px;
}

/* ============================================================
   SELL BANNER — Full-bleed editorial split (image + text panel)
   ============================================================ */
.sell-banner {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sell-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 620px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
/* Image side */
.sell-banner__bg {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  will-change: transform;
}
.sell-banner__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) brightness(0.85);
}
.sell-banner__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,14,12,0) 60%, var(--bg) 100%),
    linear-gradient(180deg, rgba(14,14,12,0.25) 0%, rgba(14,14,12,0.45) 100%);
  pointer-events: none;
}
.sell-banner__badge {
  position: absolute;
  top: 28px; left: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(14,14,12,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,118,0.35);
  color: var(--gold);
  font-size: 11px;
  font-family: var(--f-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sell-banner__badge::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(201,168,118,0.25);
}
/* Text panel side */
.sell-banner__panel {
  position: relative;
  padding: clamp(56px, 6vw, 96px) clamp(32px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  background: var(--bg);
}
.sell-banner__panel::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(40px, 5vw, 72px);
  width: 2px;
  height: 60px;
  background: var(--gold);
}
.sell-banner__panel .eyebrow {
  color: var(--gold) !important;
  margin: 0 !important;
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.sell-banner__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
  margin: 0;
}
.sell-banner__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.sell-banner__sub {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0;
}
.sell-banner__meta {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.sell-banner__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sell-banner__meta-val {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.sell-banner__meta-lbl {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sell-banner__cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sell-banner__cta-note {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ============================================================
   MAP
   ============================================================ */
.map-section {
  padding: var(--section-y) var(--gutter);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.map-wrap {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.map-container {
  height: 580px;
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
  /* Premium polish: rounded corners + sombra dorada sutil + glow border */
  border-radius: 14px;
  box-shadow:
    0 24px 60px -12px rgba(0,0,0,0.32),
    0 0 0 1px rgba(201, 168, 118, 0.14);
}
#leaflet-map { width: 100%; height: 100%; border-radius: 13px; }

/* Markers: pin chip hover effect — eleva + scales 1.08 */
.lgm-marker .lgm-map-pin__chip:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.12) !important;
  z-index: 1000;
}
/* Active marker (popup open) — borde extra glow */
.leaflet-marker-icon.leaflet-popup-open .lgm-map-pin__chip {
  transform: scale(1.05);
}

/* Popup leaflet override — premium card style */
.lgm-map-popup .leaflet-popup-content-wrapper {
  background: #fdfaf3 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28), 0 0 0 1px rgba(201,168,118,0.18) !important;
  padding: 4px !important;
}
.lgm-map-popup .leaflet-popup-content {
  margin: 0 !important;
  font-size: 13px !important;
}
.lgm-map-popup .leaflet-popup-tip {
  background: #fdfaf3 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.lgm-map-popup .leaflet-popup-close-button {
  color: #c9a876 !important;
  font-size: 22px !important;
  padding: 6px 10px !important;
  font-weight: 300 !important;
}
.lgm-map-popup .leaflet-popup-close-button:hover {
  color: #8a6d3d !important;
  background: rgba(201,168,118,0.12) !important;
  border-radius: 4px;
}

/* Leaflet zoom controls — gold accent en lugar de azul default */
.leaflet-bar a {
  background: #fff !important;
  color: #8a6d3d !important;
  border-bottom: 1px solid #e8e1d4 !important;
  font-weight: 500 !important;
  transition: all 0.18s ease;
}
.leaflet-bar a:hover {
  background: #fdfaf3 !important;
  color: #c9a876 !important;
}
.leaflet-bar { border: 1px solid rgba(201,168,118,0.3) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; }

/* Attribution discreto */
.leaflet-control-attribution {
  background: rgba(255,255,255,0.7) !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.map-legend h4 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 8px;
}
.map-legend__city {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.3s;
}
.map-legend__city:hover { color: var(--gold); }
.map-legend__city-name {
  font-size: 14px;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map-legend__count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--gold);
}

/* Leaflet theme — preserva color tiles (Carto Voyager ya tiene paleta
   suave). Filter ligero según theme:
   - Dark: tint sutil dark sin perder colores totalmente
   - Light: minimal filter, casi original
   - Coastal: sutil */
.leaflet-container { background: var(--bg-3) !important; }
.leaflet-tile-pane { filter: brightness(0.85) saturate(0.9); }
body.theme-light .leaflet-tile-pane { filter: none; }
body.theme-coastal .leaflet-tile-pane { filter: brightness(0.9) saturate(1.05) hue-rotate(-10deg); }
.leaflet-control-attribution {
  background: rgba(14,14,12,0.8) !important;
  color: var(--text-mute) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}
.leaflet-control-attribution a { color: var(--gold) !important; }
.leaflet-popup-content-wrapper {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 4px 8px;
}
.leaflet-popup-tip { background: var(--gold) !important; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding: var(--section-y) var(--gutter);
}
.contact__wrap {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact__left h2 {
  font-family: var(--f-display);
  font-size: clamp(48px, 7vw, 108px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 20px 0 32px;
}
.contact__sub {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 400px;
  margin-bottom: 56px;
}
.contact__channels {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.contact__channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s var(--ease);
}
.contact__channel:hover { padding-left: 12px; }
.contact__channel-label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex: 0 0 150px;
  font-weight: 500;
}
.contact__channel-value {
  flex: 1;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2.4vw, 1.4rem);
  font-weight: 400;
  color: var(--text);
  transition: color 0.3s;
}
.contact__channel:hover .contact__channel-value { color: var(--gold); }

.contact__form {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  padding: 48px;
}
.contact__form h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 32px;
}
.form-row { margin-bottom: 24px; position: relative; }
.form-row label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 0 12px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
  font-family: var(--f-ui);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-bottom-color: var(--gold); }
.form-row textarea { resize: vertical; min-height: 100px; font-family: var(--f-ui); }
.form-row select option { background: var(--bg-2); color: var(--text); }

.form-success {
  padding: 40px;
  text-align: center;
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--gold);
  border: 1px solid var(--gold);
  margin-top: 20px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  padding: 8px var(--gutter) 16px;
  border-top: 1px solid var(--border);
}
/* Pantallas anchas: respiración moderada */
@media (min-width: 1400px) {
  .footer { padding: 16px var(--gutter) 24px; }
}
/* iPad portrait + laptops 761-1099: brand full row + links 3 cols */
@media (min-width: 761px) and (max-width: 1099.98px) {
  .footer { padding: 40px var(--gutter) 32px; }
  .footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px 36px;
    margin-bottom: 32px;
  }
  .footer__brand-logo { margin-bottom: 8px; }
}
/* Mobile/tablet: reduce padding + gap + márgenes para eliminar hueco
   blanco grande arriba del logo. */
@media (max-width: 760px) {
  .footer { padding: 16px var(--gutter) 24px; }
  .footer__inner { gap: 28px !important; margin-bottom: 24px !important; }
  .footer__brand-logo { margin-bottom: 8px !important; }
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  /* Brand spans full row arriba para logo XL. Links row below en 3 cols.
     Permite logo aprovechar ancho completo del container. */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 48px;
  margin-bottom: 12px;
}
.footer__brand { grid-column: 1 / -1; }
.footer__brand-logo {
  display: block;
  margin-bottom: 0;
  line-height: 1;
  width: 100%;
}
/* Mobile/tablet: centra logo y aprovecha ancho completo */
@media (max-width: 760px) {
  .footer__brand { text-align: center; }
  .footer__brand-logo {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .footer__brand-logo img {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Footer usa founder-full (2400×923 ratio 2.6:1) — wide horizontal con
   nombre Luis García Márquez. Sin aspect-ratio fixed (natural del archivo).
   max-width 100% del contenedor + object-fit contain previene distorsión
   en viewports estrechos (laptops 1360px etc). height clamp escala suave. */
/* Brand row spans full inner. Logo limitado a ~1000px max centrado
   para no dominar la pantalla en monitores anchos. */
.footer__brand img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}
.footer__brand-logo picture {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.footer__brand-logo picture img { width: 100%; max-width: 1000px; }
@media (min-width: 1400px) {
  .footer__brand img,
  .footer__brand-logo picture,
  .footer__brand-logo picture img { max-width: 1200px; }
}
.footer__brand-eyebrow {
  font-family: "Geist Mono", var(--font-sans, system-ui), monospace;
  font-size: 13px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  font-weight: 500;
  display: block;
  text-align: center;
  white-space: nowrap;
  margin-top: 6px;
  text-indent: 0.45em;
}
.footer__tagline { color: var(--text-dim); max-width: 380px; font-size: 17px; line-height: 1.7; }
.footer h5 {
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
  font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer ul a {
  color: var(--text-dim);
  font-size: 17px;
  font-weight: 400;
  transition: color 0.3s;
}
.footer ul a:hover { color: var(--gold); }
/* Footer social links — icon + texto inline. Cada uno con color brand
   en hover (mantiene texto cream default, pero icon adquiere brand color). */
.footer__social-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
}
.footer__social-link svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.25s, color 0.25s;
}
.footer__social-link:hover svg { opacity: 1; }

/* WhatsApp — brand green oficial */
.footer__social-link--wa svg { color: #25D366; opacity: 1; }
.footer__social-link--wa:hover { color: #25D366 !important; }

/* Facebook — brand blue oficial */
.footer__social-link--fb svg { color: #1877F2; opacity: 1; }
.footer__social-link--fb:hover { color: #1877F2 !important; }
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.footer__vertix {
  max-width: var(--container);
  margin: 10px auto 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.footer__vertix a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .2s ease;
}
.footer__vertix a:hover { opacity: 0.75; }

/* ============================================================
   FAVORITES DRAWER
   ============================================================ */
.fav-drawer-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  background: rgba(20, 19, 15, 0.92);
  border: 1px solid var(--border-strong);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-size: clamp(0.625rem, 1.2vw, 0.75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  backdrop-filter: blur(10px);
}
body.theme-light .fav-drawer-btn { background: rgba(245, 240, 230, 0.88); }
body.theme-coastal .fav-drawer-btn { background: rgba(10, 22, 32, 0.88); }
.fav-drawer-btn:hover { border-color: var(--gold); color: var(--gold); }
.fav-drawer-btn__count {
  background: var(--gold);
  color: #14120e;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 0 7px;
  font-weight: 600;
}

.fav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-2);
  border-left: 1px solid var(--border-strong);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fav-drawer.open { transform: translateX(0); }
.fav-drawer__head {
  padding: 32px 32px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fav-drawer__head h3 {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 300;
}
.fav-drawer__tabs {
  display: flex; gap: 4px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
}
.fav-drawer__tab {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  border: 1px solid transparent;
}
.fav-drawer__tab.active { color: var(--gold); border-color: var(--gold); }
.fav-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fav-drawer__empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--f-display);
  font-size: 18px;
  font-style: italic;
}
.fav-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s;
}
.fav-item:hover { padding-left: 8px; }
.fav-item img {
  width: 80px; height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.fav-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fav-item__name {
  font-family: 'LGM Title', "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.fav-item__zone { font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
.fav-item__price { font-size: 13px; color: var(--gold); font-family: var(--f-display); margin-top: 2px; }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 90;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s var(--ease-out);
  animation: waPulse 2s infinite;
}
.wa-float:hover { transform: scale(1.08); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.6); }
  50% { box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ============================================================
   MODAL PROPERTY
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 300;
  display: flex;
  justify-content: center;
  /* flex-start (not stretch): modal grows to natural content height.
     With stretch + no contain on .modal, flexbox clamped modal to 100vh
     and clipped all content below the fold. flex-start lets modal size
     to content; when taller than viewport the overlay scrolls it. */
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  /* NOTE: -webkit-overflow-scrolling:touch removed — deprecated and causes
     orphaned compositor layers on iOS (ghost images on scroll-up).
     isolation:isolate removed — position:fixed already creates stacking context;
     explicit isolation forces a compositor layer on some WebKit builds. */
  will-change: opacity;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
  /* Cancel GPU compositing hint after fade-in completes.
     Keeping will-change:opacity once the overlay is fully visible promotes
     the entire overlay (+ all child images) to a persistent GPU layer; on
     iOS Safari that causes image tiles to ghost when scrolling back up. */
  will-change: auto;
}

/* Visible gold scrollbar on the modal overlay so users can grab it.
   Native bars on cream/dark themes were 6-8px gray and almost invisible. */
.modal-overlay::-webkit-scrollbar {
  width: 14px;
}
.modal-overlay::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
}
.modal-overlay::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 74, 0.65);
  border-radius: 8px;
  border: 3px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
.modal-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 74, 0.95);
  background-clip: padding-box;
}
/* Firefox */
.modal-overlay {
  scrollbar-width: auto;
  scrollbar-color: rgba(212, 165, 74, 0.65) rgba(0, 0, 0, 0.18);
}

.modal {
  background: var(--bg);
  color: var(--text);
  width: 100%;
  /* Wider modal so the 2-col layout (description + sticky inquiry form)
     stays usable down to ~1024px. Cap at 1360px on huge displays and
     leave a 40px gutter on each side via calc(100vw - 40px) on smaller
     screens so the form column never gets too tight to read. */
  max-width: min(1360px, calc(100vw - 40px));
  margin: 40px auto 80px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  transform: translateY(40px);
  transition: transform 0.5s var(--ease-out);
  display: flex; flex-direction: column;
  position: relative;
  /* overflow MUST be visible — `overflow: hidden` made .modal its own
     scroll containing block, which broke `position: sticky` on
     .modal__side (the inquiry form). Corner rounding is handled by
     border-radius on .modal-overlay backdrop and on .modal itself;
     children with corner-touching backgrounds get matching radius. */
  overflow: visible;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
/* Round the gallery corners explicitly since modal no longer clips.
   Carousel necesita overflow-x scroll (snap funciona). Vertical hidden. */
.modal > div:first-child > .modal__gallery {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow-x: scroll;
  overflow-y: hidden;
}
@media (max-width: 1024px) {
  /* Mobile / tablet — fall back to near-full width for usability */
  .modal {
    max-width: calc(100vw - 24px);
    margin: 16px auto;
    border-radius: 6px;
  }
}
/* IMPORTANT: keep `transform: none` (not translateY(0)) once open. Any
   non-none transform creates a containing block for descendant
   position:sticky elements, which breaks the inquiry-form sticky
   inside .modal__side. */
.modal-overlay.open .modal { transform: none; }
.modal__close {
  /* Luxury close: white circle paper + dark ink icon + drop shadow.
     Pattern Sotheby's 2024 / Christie's: alta legibilidad sobre cualquier
     foto (hero gallery) sin invadir la composición editorial. */
  position: fixed;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  color: #14120e;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.modal__close:hover {
  background: var(--gold);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.34),
    0 2px 6px rgba(0, 0, 0, 0.22);
}
.modal__close svg {
  width: 17px; height: 17px;
  stroke: currentColor;
  stroke-width: 2.4;
}

.modal__gallery {
  /* Layout profesional limpio (Idealista pro / Apartments.com / Mansion
     Global / Vrbo desktop): UN hero carousel scroll-snap + UN thumb strip
     debajo (.modal__gallery-thumbs). Click hero → lightbox completo.
     Click thumb del strip → scroll gallery a esa foto.
     Aspect 3/2 (1.5:1) — match real estate photo convention (most DSLR/
     phone shoots 3:2 or 4:3). Antes 16/9 con object-fit:cover cropaba
     top+bottom de fotos source 4:3/3:2 (~25% pixel loss). Ahora image
     completa visible. */
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
  background: var(--bg-2);
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  /* min-height para viewports muy bajos (laptops 13" 1366x768) — evita que
     max-height cape demasiado y deje image diminuta. max-height ↑ a 85vh
     da más espacio cuando viewport tiene altura suficiente. Container
     respeta aspect 3/2 mientras quepa, sino limita por max-height. */
  min-height: 420px;
  max-height: 85vh;
}
.modal__gallery::-webkit-scrollbar { display: none; }
.modal__gallery > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* contain en lugar de cover — preserva aspect source sin recortar.
     Si photo aspect ≠ container (ej: 4/3 source en 3/2 container),
     bandas laterales muy delgadas cubiertas por bg dark neutral. */
  width: 100%; height: 100%; object-fit: contain;
  min-height: 0; min-width: 0;
  cursor: zoom-in;
  background: var(--bg-2);
  display: block;
  position: relative;
  contain: layout paint;
}
.modal__gallery img { object-fit: contain; }
/* Hover transition removida — causaba stutter al scroll horizontal en
   carousel scroll-snap. Hover effect via opacity solo en thumbs strip. */

/* COD pill anchored on first photo of the gallery — visible only here */
.modal__cod-corner {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.78);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 4px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Botón clickable — copia al portapapeles. */
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.modal__cod-corner:hover {
  background: var(--gold);
  color: #0a0a0a;
}
.modal__cod-corner:active { transform: scale(0.95); }
.modal__cod-corner--copied {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
@media (max-width: 640px) {
  .modal__cod-corner {
    top: 10px;
    left: 10px;
    font-size: 10px;
    padding: 5px 9px;
    letter-spacing: 0.14em;
  }
}

/* Variantes --n1/n2/n3/n4 obsoletas tras switch a carousel global —
   defaults flex aplican universalmente. */

/* Counter / dots / arrow visibles siempre (carousel global) — estilos
   completos en bloque @media unificado más abajo. */

/* Photo count CTA — bottom-right del grid editorial. Refinado luxury:
   tamaño botón sólido visible, sombra, hover gold. Standard Sotheby's
   "Show all photos" / Idealista "Ver fotos". */
.modal__gallery-pills {
  position: absolute;
  bottom: 18px; right: 18px;
  display: flex;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}
.modal__gallery-pills > * { pointer-events: auto; }
.modal__gallery-total {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  color: #14120e;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--f-ui);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.modal__gallery-total:hover {
  background: var(--gold);
  color: #ffffff;
  transform: translateY(-1px);
}
.modal__gallery-total svg { width: 14px; height: 14px; }

/* Video count badge — sits to the LEFT of the photo count badge so the
   user immediately sees both numbers ("8 fotos · 2 videos") without
   scrolling or opening the lightbox. */
.modal__gallery-videos {
  position: relative;
  background: var(--gold);
  color: #14120e;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--f-ui);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background 0.25s, transform 0.25s;
}
.modal__gallery-videos:hover {
  background: rgba(232, 187, 100, 1);
  transform: translateY(-1px);
}
.modal__gallery-videos svg { width: 14px; height: 14px; }

/* Gallery video tile (last cell in the gallery grid) — looks like an
   image tile but with a play overlay so the user immediately sees it
   is a clickable video, not a still. */
.modal__gallery-video-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.modal__gallery-video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.modal__gallery-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  color: #fff;
  pointer-events: none;
  transition: background 0.2s;
}
.modal__gallery-video-play svg {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
}
.modal__gallery-video-tile:hover .modal__gallery-video-play {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

/* Thumb-strip video tile — same shape as image thumb + small play badge */
.modal__gallery-thumb--video {
  position: relative;
  background: #000;
}
.modal__gallery-thumb--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.modal__gallery-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0,0,0,0.28);
  pointer-events: none;
}

/* Video thumb in the lightbox bottom strip — same shape as image thumb
   plus a play badge in the corner so the user can spot videos at a
   glance while browsing. */
.lightbox__thumb--video {
  position: relative;
  background: #000;
}
.lightbox__thumb--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.lightbox__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Video lightbox — same backdrop as photo lightbox, centered video player */
.lightbox--video .lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.lightbox__video {
  max-width: min(92vw, 1280px);
  max-height: 80vh;
  width: auto;
  height: auto;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   THUMBNAIL STRIP — below gallery, visible on all breakpoints
   ============================================================ */
.modal__gallery-thumbs {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.modal__gallery-thumbs::-webkit-scrollbar { display: none; }
.modal__gallery-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 52px;
  padding: 0;
  background: var(--bg-3);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.55;
}
.modal__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal__gallery-thumb.active {
  border-color: var(--gold);
  opacity: 1;
}
@media (hover: hover) {
  .modal__gallery-thumb:hover { opacity: 0.85; }
  .modal__gallery-thumb.active:hover { opacity: 1; }
}

.modal__body {
  display: grid;
  /* Force the inquiry form column to stay at least 420px so the inputs +
     labels never get too cramped to use, no matter how narrow the modal
     gets. Main column takes the rest. */
  grid-template-columns: minmax(0, 1.4fr) minmax(420px, 1fr);
  gap: 0;
  background: var(--bg);
  color: var(--text);
}
.modal__main {
  padding: 36px 44px 48px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
.modal__head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 6px;
}
.modal__ref {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.15em;
}
.modal__title {
  font-family: 'LGM Title', "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  /* Cap reducido para laptops 1280-1600 — antes 5vw escalaba hasta 96px
     en 1920 que rompía proporción. Ahora max 2.6rem ≈ 42px. */
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 10px 0 8px;
  /* Cormorant Garamond default = old-style figures (3,4,5,7,9 descienden
     bajo baseline) → numbers en títulos ("3 Habitaciones") se ven
     desalineados vs letras. Force lining figures (lnum) + tabular nums (tnum)
     para baseline consistente y ancho uniforme. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.modal__zone {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.modal__price-row {
  display: flex;
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.modal__price-item { display: flex; flex-direction: column; gap: 4px; }
.modal__price-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.modal__price-value {
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--gold);
  font-weight: 400;
}

.modal__description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 40px;
  max-width: 640px;
  /* Preserve line breaks and bullet formatting from user-entered text.
     pre-wrap: honour \n + wrap long lines (unlike pre which doesn't wrap). */
  white-space: pre-wrap;
}

/* Subdivided description blocks (Highlights / Location / Investment) */
.modal__desc-block {
  margin-bottom: 32px;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  max-width: 640px;
}
.modal__desc-block-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.modal__desc-block-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-wrap;
  margin: 0;
}

.modal__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.modal__spec { display: flex; flex-direction: column; gap: 6px; }
.modal__spec-val {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}
.modal__spec-label {
  /* User pidió aumentar tamaño label — antes 10px era subtle hint, ahora
     legible body-text para info clave (hab/baños/parking/m² construidos). */
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
}

.modal__features-title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 16px;
}
.modal__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin-bottom: 40px;
}
.modal__features li {
  font-size: 14px;
  list-style: none;
  padding-left: 20px;
  position: relative;
  color: var(--text-dim);
}
.modal__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--gold);
}

.modal__alerts {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.modal__alert {
  padding: 10px 16px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Modal side (form) — sticky inquiry form follows the description while
   the user scrolls so the contact CTA is always reachable without
   scrolling back to the top.
   align-self: start (grid syntax) — column NO stretch full height,
   bg pinta solo el form area, sin extender a empty space después. */
.modal__side {
  padding: 56px 48px 80px;
  background: var(--bg-2);
  display: flex; flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  border-radius: 0 8px 8px 0;
}
@media (max-width: 1024px) {
  /* On stacked layout (mobile/tablet) the form sits below content,
     sticky no longer applicable. */
  .modal__side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
.modal__side h4 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 12px;
}
/* Quick actions row — visible inmediato post-gallery thumbs.
   Desktop: row con border bottom separator. Mobile: sticky bottom para
   permanecer visible mientras user scrollea contenido modal.
   Cliente reportaba botones share/wa al fondo modal poco visibles. */
.modal__quick-actions {
  display: flex;
  gap: 10px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.modal__quick-actions > * {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  border-radius: 2px;
}
.modal__quick-actions > *:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.modal__quick-wa {
  background: var(--gold) !important;
  color: #14120e !important;
  border-color: var(--gold) !important;
  font-weight: 600;
  flex: 1.4 !important;
}
.modal__quick-wa:hover {
  background: var(--gold-2) !important;
  color: #14120e !important;
}
@media (max-width: 760px) {
  .modal__quick-actions {
    padding: 10px 16px;
    gap: 6px;
  }
  .modal__quick-actions > * {
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .modal__quick-label {
    display: none;
  }
}

.modal__actions {
  display: flex; gap: 10px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.modal__actions button {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--border-strong);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  transition: all 0.3s;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.modal__actions button:hover { border-color: var(--gold); color: var(--gold); }

/* Modal contiene todos sus links/anchors con colores del tema */
.modal a { color: var(--text); }
.modal a:hover { color: var(--gold); }
.modal__actions a { color: var(--text); }
.modal__actions a:hover { color: var(--gold); }

/* Mobile: thumbnail strip — smaller thumbs, padding-right so last one isn't cut */
@media (max-width: 640px) {
  .modal__gallery-thumbs {
    padding: 6px 20px 6px 6px;
  }
  .modal__gallery-thumb {
    width: 60px;
    height: 44px;
  }
}

/* Mobile: Añadir + Compartir en fila, WhatsApp abajo ancho completo */
@media (max-width: 640px) {
  .modal__actions {
    flex-wrap: wrap;
  }
  .modal__actions > *:last-child {
    flex: 0 0 100% !important;
    width: 100%;
  }
}

/* Overlay: oscurecer menos en theme claro para ver mejor */
body.theme-light .modal-overlay { background: rgba(40, 32, 20, 0.55); }
body.theme-coastal .modal-overlay { background: rgba(5, 12, 20, 0.9); }

/* Bloque amenities dentro del modal */
.modal__amenities-title {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 300;
  margin: 16px 0 20px;
}
.modal__amen-group { margin-bottom: 22px; }
.modal__amen-group-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.modal__amen-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.modal__amen-chip {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  border-radius: 2px;
  line-height: 1.3;
}
/* Dark themes — raise contrast since mono/thin text blends on charcoal bg */
body.theme-dark .modal__amen-chip,
body.theme-coastal .modal__amen-chip {
  border-color: rgba(255, 255, 255, 0.22);
  color: #f3ead9;
}

/* ============================================================
   DROPDOWN (custom select) — theme-aware
   ============================================================ */
.lgm-dd { position: relative; display: inline-block; width: 100%; font-family: inherit; }
.lgm-dd__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.lgm-dd__btn:hover { border-color: var(--gold); color: var(--text); }
.lgm-dd__btn:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(191,155,88,0.25); }
.lgm-dd--disabled .lgm-dd__btn { opacity: 0.55; cursor: not-allowed; }
.lgm-dd__label { flex: 1; color: var(--text); font-size: clamp(0.7rem, 1.8vw, 0.9rem); }
.lgm-dd__arrow { flex-shrink: 0; color: var(--text-dim); transition: transform .2s var(--ease); }
.lgm-dd--open .lgm-dd__btn { border-color: var(--gold); }
.lgm-dd--open .lgm-dd__arrow { transform: rotate(180deg); color: var(--gold); }
.lgm-dd__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  z-index: 500;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  /* Panel SIEMPRE usa sans 13px color text — sin importar variant */
  font-family: var(--f-sans, 'Geist', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: none;
  animation: lgmDdIn 0.18s var(--ease-out);
}
.lgm-dd--sort .lgm-dd__panel { left: auto; right: 0; }
@keyframes lgmDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lgm-dd__opt {
  padding: 10px 14px;
  /* Hereda font-family/size/color del panel — forzar por si algún variant intenta sobrescribir */
  font-family: inherit;
  font-size: clamp(0.7rem, 1.8vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
  line-height: 1.35;
}
.lgm-dd__opt:hover { background: var(--bg); color: var(--gold); }
.lgm-dd__opt--on {
  background: var(--gold);
  color: var(--bg);
  font-weight: 500;
}
.lgm-dd__opt--on:hover { background: var(--gold); color: var(--bg); }
.lgm-dd__group { padding-top: 4px; }
.lgm-dd__group + .lgm-dd__group,
.lgm-dd__opt + .lgm-dd__group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.lgm-dd__group-label {
  padding: 6px 14px 6px;
  font-family: var(--ff-mono, 'Geist Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  pointer-events: none;
}

/* Variant: hero search — transparent, display font */
.lgm-dd--hero .lgm-dd__btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.lgm-dd--hero .lgm-dd__btn:hover,
.lgm-dd--hero.lgm-dd--open .lgm-dd__btn { box-shadow: none; color: var(--gold); }
/* Panel + options usan estilo unificado desde .lgm-dd__panel / .lgm-dd__opt */

/* Variant: filters (chips/pill look) */
.lgm-dd--filter .lgm-dd__btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Variant: sort (compact, right-aligned) */
.lgm-dd--sort .lgm-dd__btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.lgm-dd--sort { min-width: 220px; }

/* Theme: light palette */
body.theme-light .lgm-dd__btn { background: var(--bg); color: var(--text); }
body.theme-light .lgm-dd__panel { background: var(--bg); box-shadow: 0 12px 36px rgba(20, 18, 10, 0.18); }
body.theme-light .lgm-dd__opt:hover { background: var(--bg-2); color: var(--gold); }
body.theme-light .lgm-dd--hero .lgm-dd__btn,
body.theme-light .lgm-dd--filter .lgm-dd__btn,
body.theme-light .lgm-dd--sort .lgm-dd__btn { background: transparent; }

/* Theme: coastal palette */
body.theme-coastal .lgm-dd__btn { background: var(--bg-2); color: var(--text); }
body.theme-coastal .lgm-dd__panel { background: var(--bg-2); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); }
body.theme-coastal .lgm-dd--hero .lgm-dd__btn,
body.theme-coastal .lgm-dd--filter .lgm-dd__btn,
body.theme-coastal .lgm-dd--sort .lgm-dd__btn { background: transparent; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-text { overflow: hidden; }
.reveal-text > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.reveal-text.visible > span { transform: translateY(0); }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  background: rgba(20, 19, 15, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold);
  padding: 28px;
  z-index: 500;
  width: 340px;
  max-width: calc(100vw - 32px);
  display: none;
  font-family: var(--f-ui);
}
.tweaks-panel.visible { display: block; }
.tweaks-panel h3 {
  font-family: var(--f-display);
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--gold);
}
.tweak-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tweak-row label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tweak-row select {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 10px;
  font-size: 13px;
  font-family: var(--f-ui);
  width: 100%;
}
.tweak-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.tweak-swatch {
  width: 44px; height: 44px;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  position: relative;
}
.tweak-swatch.active { border-color: var(--gold); }
.tweak-swatch.active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--gold);
}

/* ============================================================
   LANGUAGE DROPDOWN
   ============================================================ */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  min-width: 140px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  display: none;
}
.lang-dropdown.open { display: block; }
.lang-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
.lang-dropdown button:hover { background: var(--bg-3); color: var(--gold); }
.lang-dropdown button.active { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tighten inquiry-form spacing on anything narrower than full HD so the
   sticky form column stays compact while the description scrolls. Client
   wants the form ALWAYS on the right (never stacked) at desktop/laptop —
   layout switches to stacked only below 1024px (mobile/tablet), handled
   in the dedicated mobile block further down.
   Also shrink the hero title block on the same breakpoint so the
   "PUERTO PLATA · REPÚBLICA DOMINICANA" eyebrow ends up pegged right on
   top of "Residencias excepcionales" instead of floating up against the
   nav border with a huge gap below it. */
@media (max-width: 1599px) {
  .modal__main { padding: 32px 36px 40px; }
  .modal__side { padding: 30px 30px; gap: 14px; }
  .modal__side h4 { font-size: 20px; margin-bottom: 6px; }
  .modal__side .form-row { margin-bottom: 14px; }
  .modal__side .form-row label { margin-bottom: 5px; }
  .modal__side .form-row input,
  .modal__side .form-row textarea { padding: 7px 0 9px; font-size: 14px; }
  .modal__title { font-size: clamp(1.4rem, 2.4vw, 2.2rem); margin: 8px 0 6px; }
  .modal__zone { margin-bottom: 18px; }
  /* Hero block: eyebrow + title visually clustered, smaller title so the
     three-line layout actually fits the viewport without overflow */
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__title { font-size: clamp(44px, 7vw, 108px); margin-bottom: 22px; }
  .hero__sub { margin-bottom: 32px; }
}
@media (max-width: 1280px) {
  .modal__main { padding: 28px 30px 36px; }
  .modal__side { padding: 26px 26px; }
  .modal__title { font-size: clamp(1.25rem, 2.6vw, 2rem); }
}

@media (max-width: 1280px) {
  :root {
    --gutter: 32px;
    --section-y: 100px;
  }
  .contact__wrap { grid-template-columns: 1fr; gap: 48px; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-container { height: 440px; }
  .pcard { flex: 0 0 calc(50% - 12px); min-width: 340px; }
}

@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --section-y: 80px;
  }
  /* Mobile / tablet — stack the modal so the form drops below the
     description (sticky no longer applies, mobile rule below makes
     .modal__side static). */
  .modal__body { grid-template-columns: 1fr; }
  .modal__main { border-right: 0; border-bottom: 1px solid var(--border); }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__theme-group { display: none; }

  /* Mobile + tablet: solo mapa, sin columna de provincias/ciudades */
  .map-legend { display: none; }
  .map-wrap { grid-template-columns: 1fr; }

  /* min-height: 100svh estable. Antes 100dvh cambiaba cuando URL bar se`
     ocultaba al scrollear -> hero box height shift = CLS 0.36 mobile.
     svh = small viewport height (URL bar visible siempre), constante. */
  .hero { padding: 100px 24px 60px; min-height: 100svh; }
  .hero__content { grid-template-columns: 1fr; }
  .hero__meta { flex-direction: row; align-items: flex-start; text-align: left; justify-content: space-between; width: 100%; }

  .search {
    margin-top: -30px;
    grid-template-columns: 1fr 1fr;
  }
  .search__field:nth-child(2n)::after { display: none; }
  .search__field:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .search__btn { grid-column: 1 / -1; padding: 18px; }

  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .section-head p { max-width: none; }

  .pcard { min-width: 280px; flex: 0 0 85%; }

  .editorial__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .gcard--w3, .gcard--w4 { grid-column: span 3; }
  .gcard--w5, .gcard--w6 { grid-column: span 6; }
  .gcard--w7, .gcard--w8 { grid-column: span 6; }

  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--border); padding: 40px 0 !important; }
  .pillar:last-child { border-bottom: 0; }

  .process__steps { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .process__line, .process__line-fill { display: none; }

  .sell-banner { padding: 40px 20px; }
  .sell-banner__content { grid-template-columns: 1fr; min-height: 0; }
  .sell-banner__bg { min-height: 280px; aspect-ratio: 16/10; }
  .sell-banner__bg::after {
    background:
      linear-gradient(180deg, rgba(14,14,12,0.15) 0%, var(--bg-2) 98%);
  }
  .sell-banner__panel::before { display: none; }
  .sell-banner__meta { gap: 16px; }

  .contact__form { padding: 32px 24px; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
  }
  /* Mobile usa stacked SVG vía <picture>, ratio vertical → más alto naturalmente */
  .footer__brand picture { display: block; width: 100%; }
  .footer__brand-eyebrow { font-size: 10px; }
  /* Mobile/tablet: logo más pequeño porque ahora usa lockup horizontal
     07/08 founder-full (ratio 5.1:1) en todos los tamaños. height 56px =
     width ~286px que cabe en 375px-wide phones dejando espacio para
     hamburger button. Scrolled 44px = width ~224px. */
  .nav { padding: 14px var(--gutter) 12px; }
  .nav.scrolled { padding: 10px var(--gutter) 8px; }
  .nav__logo img { height: 56px; max-height: 56px; max-width: 60vw; width: auto; object-fit: contain; }
  .nav.scrolled .nav__logo img { height: 44px; max-height: 44px; }
  /* Bumped 8→10px: 8px era ilegible/blurry en HiDPI mobile. Reduced
     letter-spacing compensa el espacio extra horizontal. */
  .nav__logo-eyebrow {
    font-size: 10px;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  /* Ticker mobile/tablet — tighter spacing, smaller dot, faster loop */
  .ticker { padding: 18px 0; }
  .ticker__track { gap: 32px; animation-duration: 35s; }
  .ticker__track span { gap: 32px; font-size: clamp(18px, 4.5vw, 28px); }
  .ticker__dot { width: 6px; height: 6px; margin: 0 12px; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }

  /* Mobile/tablet: move scroll from overlay to modal.
     position:fixed + overflow-y:auto on the SAME element is the root cause of
     iOS Safari ghost images — WebKit allocates separate compositor tiles for
     the scrollport that don't get invalidated on scroll-up. Fix: overlay is
     overflow:hidden (no scroll), the modal div itself scrolls instead. */
  .modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    /* align-items: flex-start already set in base rule */
  }
  .modal {
    display: block; /* Override flex — prevents flex-shrink from crushing gallery thumbs */
    margin: 0;
    max-width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh;
    max-height: -webkit-fill-available; /* iOS 14 fallback */
  }
  /* Ensure gallery thumbs never get compressed */
  .modal__gallery-thumbs { flex-shrink: 0; min-height: 0; }
  .modal__main, .modal__side { padding: 32px 24px; }
  .modal__specs { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .modal__features { grid-template-columns: 1fr; }

  .fav-drawer { width: 100%; }
  .fav-drawer-btn { bottom: 16px; right: 16px; padding: 10px 14px; }
  .wa-float { bottom: 16px; left: 16px; width: 52px; height: 52px; }
}

/* Mobile/tablet — full-bleed visual impact:
   - aspect 16/9 matchea mayoría fotos landscape real estate
   - object-fit: cover llena container sin bands (vs desktop contain
     que muestra image completa con bands cream)
   - Mobile small viewport, image debe llenar pantalla — visual UX > pixel
     fidelity (user puede ver image completa abriendo lightbox)
   - max-height 60vh respeta viewport bajo, no eats todo screen */
@media (max-width: 1199px) {
  .modal__gallery {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 60vh;
    min-height: 240px;
  }
  .modal__gallery > *,
  .modal__gallery img {
    object-fit: cover;
  }
}

/* Carousel overlays — visibles todos los viewports (carousel universal).
   Counter "X / Y" en esquina IZQUIERDA — antes solapaba con .modal__gallery-pills
   (botón "N fotos") en la derecha, causando que ambos overlays se taparan
   visualmente. Ahora el counter siempre tiene su propio espacio bottom-left
   y el pill de fotos vive en bottom-right sin colisión. */
.modal__gallery-counter {
  display: block;
  position: absolute;
  bottom: 18px; left: 18px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 24px;
  font-family: var(--f-ui);
  pointer-events: none;
  z-index: 3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.modal__gallery-dots {
  display: flex;
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}
.modal__gallery-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.2s, transform 0.2s;
}
.modal__gallery-dot.active {
  background: #fff;
  transform: scale(1.35);
}
.modal__gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.2s, background 0.2s, transform 0.25s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.78);
  transform: translateY(-50%) scale(1.06);
}
.modal__gallery-arrow--prev { left: 16px; }
.modal__gallery-arrow--next { right: 16px; }
/* "N fotos" badge superpuesto — visible siempre como CTA. */

@media (max-width: 767px) {
  /* Hero mobile redesign: stack texto + form vertical, no overlay. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 96px 16px 40px;
    min-height: auto;
    gap: 28px;
  }
  .hero__content { padding: 0; }
  .hero__main { max-width: 100%; }
  .hero__title {
    font-size: clamp(2rem, 9vw, 3.25rem);
    margin-bottom: 18px;
    line-height: 1;
  }
  .hero__title span { display: block; }
  .hero__sub {
    font-size: clamp(0.875rem, 2.2vw, 1rem);
    margin-bottom: 0;
    max-width: 100%;
    /* Mobile: card background semi-oscuro + backdrop-blur garantiza
       legibilidad sobre cualquier foto, sin depender del color foto. */
    background: rgba(15, 12, 8, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Eyebrow pegged tight to the title and no longer pushed to the
     viewport edge by the gold dash + huge tracking. Drop ::before so
     "PUERTO PLATA · REPÚBLICA DOMINICANA" fits inside the viewport at
     375px without wrapping or clipping. !important so the legacy
     <=480 block (font-size + letter-spacing already !important there)
     can't undo the tighter spacing. */
  .hero__eyebrow {
    /* Mobile: 11px legible HiDPI. text-shadow REMOVIDO totalmente —
       cualquier blur en glyph 11px causa halo difuso. Si fondo photo
       tapa contraste, agregar contenedor con bg sólido (NO shadow). */
    font-size: 11px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.16em !important;
    gap: 0 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .hero__eyebrow::before { display: none !important; }
  .hero__scroll { display: none; }

  .search {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    padding: 6px;
  }
  .search__field { padding: 14px 18px; }
  .search__field:not(:last-child)::after { display: none; }
  .search__field { border-bottom: 1px solid var(--border); }
  .search__btn { grid-column: 1 / -1; padding: 16px; }
}

@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; }
  .editorial__grid { grid-template-columns: 1fr; }
  .gcard--w3, .gcard--w4, .gcard--w5, .gcard--w6, .gcard--w7, .gcard--w8 { grid-column: 1; }
  .process__steps { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE TRANSITIONS + ROUTER
   ============================================================ */
.route-main { min-height: 60vh; }
.page-transition--in {
  animation: pageFadeIn 0.42s var(--ease-out);
}
/* Mobile: solo opacity, sin translateY. Lighthouse cuenta translate movement
   como CLS shift en algunos casos -> 0.36 home mobile. Visual loss minimo. */
@media (max-width: 760px) {
  .page-transition--in { animation: pageFadeInOpacity 0.32s var(--ease-out); }
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pageFadeInOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page head (Propiedades, Sobre mí, Servicios) */
.page { padding-top: 120px; }
.page__head {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 80px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.page__title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 20px 0 28px;
  max-width: 22ch;
}
.page__sub {
  max-width: 56ch;
  color: var(--text-dim);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  line-height: 1.65;
}

/* ============================================================
   PROPIEDADES — filtros + resultados
   ============================================================ */
.page--props { padding-bottom: 120px; padding-top: 160px; }
.page--props .page__body { padding-top: 32px; }
/* Skeleton cards: mismo footprint que PCard real para reservar altura
   exacta antes que llegue la data async -> elimina CLS 0.78 al popular grid. */
.pcard--skeleton {
  pointer-events: none;
  cursor: default;
}
.pcard--skeleton .pcard__img {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.pcard__skel-line {
  height: 12px;
  margin: 8px 0;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: 2px;
}
.pcard__skel-line--lg { width: 80%; height: 16px; }
.pcard__skel-line--md { width: 60%; }
.pcard__skel-line--sm { width: 40%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.page__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: flex-start;
}
/* Ultrawide: widen filter rail so it doesn't look tiny next to huge result grid */
@media (min-width: 1680px) { .page__body { grid-template-columns: 340px 1fr; gap: 64px; } }
@media (min-width: 2400px) { .page__body { grid-template-columns: 380px 1fr; gap: 80px; } }
/* Laptop tight: reduce gap */
@media (min-width: 1025px) and (max-width: 1399px) { .page__body { gap: 40px; } }
/* Mobile: reduce bottom padding to free content space (top handled later at 768 breakpoint) */
@media (max-width: 767px) {
  .page--props { padding-bottom: 80px; }
}

.filters {
  /* User pidió: filters acompaña scroll página, NO encerrado en caja
     con scroll interno. Drop sticky + max-height + overflow.
     Ahora sidebar fluye natural — comparte scroll con results column.
     En desktop, results más alto que filters → user scroll y filters
     queda atrás (acceptable). Mobile (<1024px) ya stack vertical. */
  position: relative;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.filters::-webkit-scrollbar { display: none; }
.filters__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.filters__head h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 300;
}
.filters__reset {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}
.filters__reset:hover { color: var(--accent); border-bottom-color: var(--accent); }

.filters__search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0 12px;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.3s;
}
.filters__search:focus-within { border-color: var(--accent); }
.filters__search svg { flex: 0 0 auto; color: var(--text-dim); width: 14px; height: 14px; }
.filters__search input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 12px 4px;
  font-size: 13px;
  color: var(--text);
}
.filters__search input::placeholder { color: var(--text-mute); }
/* Quita X nativa del browser en type="search" — usamos custom .filters__search-clear.
   Sin esto aparecían 2 botones X (uno browser, uno custom). 2026-05-22 fix. */
.filters__search input[type="search"]::-webkit-search-cancel-button,
.filters__search input[type="search"]::-webkit-search-decoration,
.filters__search input[type="search"]::-webkit-search-results-button,
.filters__search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.filters__search-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: -2px;
  background: transparent;
  border: none;
  color: var(--text-mid, var(--text-mute));
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.filters__search-clear svg { width: 11px; height: 11px; }
.filters__search-clear:hover {
  background: rgba(201, 162, 74, 0.15);
  color: var(--accent, #C9A24A);
}

.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}

/* ===== FilterSection (collapsibles agrupando grupos) — 2026-05-22 v2 ===== */
/* Rediseño luxury: serif headers Cormorant + SVG monoline icons gold +
   bordes hairline opacidad baja + spacing aireado. Sin emojis (rompían
   paleta cream/gold). */
.filter-section {
  border-top: 1px solid rgba(201, 162, 74, 0.15);
  padding: 8px 0 4px;
}
.filter-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.filter-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: opacity 0.2s ease;
}
.filter-section__head:hover { opacity: 0.78; }
.filter-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gold, #C9A24A);
  opacity: 0.85;
}
.filter-section__label {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.012em;
  color: var(--text, #2b2418);
  line-height: 1;
}
body.theme-light .filter-section__label,
body.theme-coastal .filter-section__label { color: var(--text); }
.filter-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gold, #C9A24A);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 2px;
}
.filter-section__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-dim, #8a7e6b);
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.filter-section__chev.open { transform: rotate(180deg); }
.filter-section__head:hover .filter-section__chev { opacity: 1; }
.filter-section__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 2px 0 18px;
}

/* ===== ActiveFiltersBar (chips removibles) — 2026-05-22 v2 ===== */
.filters__active {
  padding: 4px 0 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.15);
}
.filters__active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filters__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: transparent;
  border: 1px solid rgba(201, 162, 74, 0.45);
  border-radius: 999px;
  color: var(--gold-text, #9b7a32);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  line-height: 1.2;
}
.filters__active-chip:hover {
  background: rgba(201, 162, 74, 0.1);
  border-color: rgba(201, 162, 74, 0.7);
  color: var(--gold, #C9A24A);
}
.filters__active-chip-label { line-height: 1; }
.filters__active-chip-x {
  opacity: 0.55;
  transition: opacity 0.18s ease;
  flex-shrink: 0;
}
.filters__active-chip:hover .filters__active-chip-x { opacity: 1; }

/* Theme dark/coastal: gold accent vs cream label */
body:not(.theme-light):not(.theme-coastal) .filter-section__label { color: var(--text, #e8e0cc); }
body:not(.theme-light):not(.theme-coastal) .filters__active-chip { color: var(--gold, #C9A24A); }

/* ===== QuickPresets — cards horizontales 1-click ===== */
.quick-presets {
  padding: 4px 0 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.15);
}
.quick-presets__row {
  display: grid;
  /* Auto-fit: 2 cols cuando hay ancho >= ~280px, 1 col cuando estrecho.
     Evita texto roto/recortado en panel filtros narrow (~260px). */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.quick-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  min-width: 0;
}
.quick-preset:hover {
  border-color: rgba(201, 162, 74, 0.55);
  background: rgba(201, 162, 74, 0.04);
  transform: translateY(-1px);
}
.quick-preset.active {
  border-color: var(--gold, #C9A24A);
  background: rgba(201, 162, 74, 0.08);
}
.quick-preset__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--gold, #C9A24A);
  background: rgba(201, 162, 74, 0.08);
  border-radius: 8px;
  opacity: 0.9;
}
.quick-preset.active .quick-preset__icon {
  background: rgba(201, 162, 74, 0.18);
  opacity: 1;
}
.quick-preset__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.quick-preset__label {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.15;
  /* Permite 2 líneas naturales (e.g. "Villas de Lujo") sin truncar */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.quick-preset__sub {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #8a7e6b);
  opacity: 0.85;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Panel filtros muy estrecho (<300px): 1 columna full-width, card más
   horizontal pegada (label puede wrap pero más espacio horizontal). */
@media (max-width: 1099.98px) {
  .quick-presets__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .quick-presets__row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .quick-preset { padding: 10px; }
  .quick-preset__icon { width: 28px; height: 28px; }
  .quick-preset__label { font-size: 14px; }
}

/* ===== PriceRangeSlider — dual range slider con burbujas ===== */
.price-slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px 2px;
}
.price-slider__bubbles {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.price-slider__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--gold, #C9A24A);
  color: #fff;
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 56px;
  text-align: center;
}
.price-slider__track-wrap {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}
.price-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(201, 162, 74, 0.18);
  border-radius: 3px;
  pointer-events: none;
}
.price-slider__fill {
  position: absolute;
  height: 3px;
  background: var(--gold, #C9A24A);
  border-radius: 3px;
  pointer-events: none;
}
.price-slider__input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid var(--gold, #C9A24A);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.price-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(201,162,74,0.4);
}
.price-slider__input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.price-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid var(--gold, #C9A24A);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.price-slider__input::-moz-range-track { background: transparent; border: none; }
.price-slider__legend {
  display: flex;
  justify-content: space-between;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, #8a7e6b);
  opacity: 0.75;
}

/* ===== Stepper — control numérico [-] N [+] ===== */
.stepper-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}
.stepper-row__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim, #8a7e6b);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(201, 162, 74, 0.3);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--gold, #C9A24A);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stepper__btn:hover:not(:disabled) {
  background: rgba(201, 162, 74, 0.12);
}
.stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.stepper__val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 0 12px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-left: 1px solid rgba(201, 162, 74, 0.2);
  border-right: 1px solid rgba(201, 162, 74, 0.2);
  height: 30px;
  letter-spacing: 0.02em;
}
.filters__select {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  appearance: none;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23a89f8a' stroke-width='1.2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  transition: border-color 0.3s;
}
.filters__select:focus { border-color: var(--accent); }
.filters__select option {
  background: var(--bg-2);
  color: var(--text);
}
body.theme-light .filters__select { color-scheme: light; }
body.theme-light .filters__select option { background: var(--surface); color: var(--text); }

/* Amenities filter */
.filter-amen__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 0;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.filter-amen__head:hover { color: var(--text); }
.filter-amen__count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--accent);
  color: #000;
  font-size: 10px;
  border-radius: 10px;
  letter-spacing: 0;
}
.filter-amen__chev { font-size: 10px; transition: transform .2s; }
.filter-amen__chev.open { transform: rotate(180deg); }
.filter-amen__body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.filter-amen__group-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.filter-amen__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-amen__chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 11px;
  font-size: 11px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.filter-amen__chip:hover { border-color: var(--accent); color: var(--text); }
.filter-amen__chip.on { background: var(--accent); color: #000; border-color: var(--accent); }
body.theme-coastal .filters__select { color-scheme: dark; }
body.theme-coastal .filters__select option { background: var(--bg-2); color: var(--text); }

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-pill {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: transparent;
  transition: all 0.25s var(--ease-out);
  cursor: pointer;
}
.filter-pill:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}
/* Disabled pill — opción sin resultados en filtros actuales.
   Visible pero no clickable + tooltip "Sin resultados". */
.filter-pill--disabled,
.filter-pill[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto; /* permite tooltip */
}
.filter-pill--disabled:hover,
.filter-pill[disabled]:hover {
  color: var(--text-dim);
  border-color: var(--border);
}
/* Count badge interno: "VENTA (45)" */
.filter-pill__count {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.75;
}
.filter-pill.active .filter-pill__count {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

/* Counter live "X propiedades coinciden" debajo del search */
.filters__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.10), rgba(201, 162, 74, 0.04));
  border: 1px solid rgba(201, 162, 74, 0.22);
  border-radius: 8px;
  font-family: var(--ff-sans, system-ui);
  font-size: 12px;
  color: var(--text);
}
.filters__counter-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #C9A24A);
  font-variant-numeric: tabular-nums;
}
.filters__counter-label {
  color: var(--text-dim);
  font-size: 12px;
}
.filters__counter-loading {
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
}

/* Quick amenities destacadas — 6 chips top Caribe-relevantes */
.filter-quick-amen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.filter-quick-amen__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--ff-sans, system-ui);
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-align: left;
  line-height: 1.3;
}
.filter-quick-amen__chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.filter-quick-amen__chip.on {
  background: rgba(201, 162, 74, 0.14);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.filter-quick-amen__chip span:first-child {
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 640px) {
  .filter-quick-amen { grid-template-columns: repeat(2, 1fr); }
  .filter-quick-amen__chip { font-size: 11px; padding: 8px; }
}

/* Results */
.results { min-width: 0; }
.results__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
  gap: 20px;
  flex-wrap: wrap;
}
.results__count {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.results__count strong {
  /* Geist sans en lugar de Cormorant serif — cliente reportó que el
     número '71' se veía romano/feo. Mantiene size + accent gold. */
  font-family: var(--f-ui);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.results__count span {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.results__controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .results__controls { width: 100%; justify-content: space-between; }
  .results__sort, .lgm-dd--sort { flex: 1; min-width: 0; }
  .results__view { flex-shrink: 0; }
}
.results__sort {
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 32px 10px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23a89f8a' stroke-width='1.2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.results__view { display: flex; border: 1px solid var(--border); }
.results__view button {
  padding: 10px 12px;
  color: var(--text-dim);
  transition: all 0.25s;
}
.results__view button.active { color: var(--bg); background: var(--accent); }
.results__view button:first-child { border-right: 1px solid var(--border); }

.results__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}
/* Lowered from 1280 to 1200 — at exactly 1280 + scrollbar viewport fell below threshold */
@media (min-width: 1200px) { .results__grid { grid-template-columns: repeat(3, 1fr); } }
/* Ultrawide / 4K — cap card width by adding extra columns so cards don't stretch huge */
@media (min-width: 1680px) { .results__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 2400px) { .results__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 3400px) { .results__grid { grid-template-columns: repeat(6, 1fr); gap: 48px 40px; } }
@media (max-width: 640px) { .results__grid { grid-template-columns: 1fr; gap: 28px 0; } }
@media (min-width: 641px) and (max-width: 767px) { .results__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

.results__list { display: flex; flex-direction: column; gap: 24px; }
.results__empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--text-dim);
}
.results__empty p { margin-bottom: 20px; font-size: 16px; }

/* List card (propiedades view=list) */
.lcard {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.lcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.lcard__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.lcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.lcard:hover .lcard__img img { transform: scale(1.06); }
.lcard__body {
  padding: 24px 28px 24px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
}
.lcard__ref {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.lcard__name {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.1;
  overflow: hidden;
  max-height: calc(1.1em * 3);
}
.lcard__desc {
  color: var(--text-dim);
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  line-height: 1.6;
  margin-bottom: 16px;
}
.lcard__specs {
  display: flex; gap: 22px;
  font-size: 13px;
  color: var(--text-dim);
}
.lcard__specs div { display: flex; align-items: center; gap: 6px; }
.lcard__specs svg { color: var(--accent); }
.lcard__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 10px;
  padding-right: 4px;
  min-width: 180px;
}
.lcard__op {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.lcard__price { display: flex; flex-direction: column; gap: 2px; }
.lcard__price-main {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.lcard__price-alt { font-size: 12px; color: var(--text-dim); }
.lcard__cta { font-size: 11px; }

@media (max-width: 1024px) {
  .page__body { grid-template-columns: 1fr; gap: 32px; }
  /* Filter block stretches full width on tablet — cap so it doesn't look like a giant card.
     Margin auto centra explicitamente para evitar asimetria visual en resoluciones
     intermedias (Pixel 7 Pro 476px, iPhone 14 Plus 428px, etc.). */
  .filters {
    position: static;
    max-height: none;
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .lcard { grid-template-columns: 1fr; }
  .lcard__body { padding: 20px; grid-template-columns: 1fr; }
  .lcard__aside { align-items: flex-start; text-align: left; min-width: 0; }
}
@media (max-width: 640px) {
  .filters { padding: 20px 18px; gap: 18px; }
  .filters__head h3 { font-size: 18px; }
  .results__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* FABs (wa-float left, fav-drawer-btn right ~52px alto, scroll-top arriba)
     tapan los últimos elementos del sidebar/grid. Reservamos espacio bottom
     dentro de filters + results para que el último filtro y la última card
     queden por encima de los floating buttons. Safe-area inset incluido. */
  .filters {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .results {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  /* Defensive overflow guard + grid card constraints — aplican también en
     viewports 431-640 (e.g. Pixel 7 Pro 476px) que antes caían en gap entre
     break 430 (aggressive) y 640 (legacy padding only). */
  .page--props,
  .page--props .page__body,
  .results,
  .results__grid {
    max-width: 100% !important;
    overflow-x: clip;
    box-sizing: border-box !important;
  }
  .results__grid .pcard,
  .results__grid .lcard {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* FABs compactos en TODOS los mobile (≤640), no solo ≤430. Posición safe-area. */
  .wa-float {
    width: 48px !important; height: 48px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
  }
  .fav-drawer-btn {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    padding: 8px 12px !important;
  }
  .scroll-top {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 38px !important; height: 38px !important;
  }
  /* results__head stack vertical + compact en todo el rango mobile */
  .results__head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
    margin-bottom: 22px !important;
  }
  .results__count strong { font-size: 28px !important; }
  .results__count span { font-size: 10px !important; letter-spacing: 0.12em !important; }
  .results__controls { width: 100% !important; gap: 8px !important; }
  .results__sort,
  .lgm-dd--sort {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 100px) !important;
    font-size: 11px !important;
    padding: 9px 28px 9px 12px !important;
  }
}

/* ============================================================
   PAGINATION FOOTER — infinite scroll sentinel + load more button
   ============================================================ */
.results__pagination {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.btn-loadmore {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn-loadmore:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.btn-loadmore__count {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: none;
}
.btn-loadmore:hover .btn-loadmore__count { color: rgba(255,255,255,0.85); }
.btn-loadmore.is-loading,
.btn-loadmore:disabled {
  opacity: 0.7;
  cursor: wait;
}
.btn-loadmore__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--gold);
  animation: btn-loadmore-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes btn-loadmore-spin {
  to { transform: rotate(360deg); }
}
.results__end {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 32px 0 0;
}

/* ============================================================
   SCROLL TO TOP — floating button
   bottom-right, ENCIMA del .fav-drawer-btn (también right, ~50px alto).
   Stack vertical: fav-btn abajo (24px) + scroll-top arriba (90px desktop /
   78px mobile). Sin overlap en ninguna resolución (fav-btn ocupa y=24-74
   desktop, scroll-top empieza y=90 → 16px gap visual).
   Respeta safe-area en mobile via env(safe-area-inset-bottom).
   ============================================================ */
.scroll-top {
  position: fixed;
  /* RIGHT side — apilado encima de fav-drawer-btn (mismo right). */
  right: 24px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s, color 0.18s;
  pointer-events: none;
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.scroll-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .scroll-top {
    right: 16px;
    /* fav-drawer-btn mobile: bottom 16px + ~50px alto = ocupa y=16-66.
       scroll-top inicia en y=78 (12px gap). */
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
  }
}
/* Hide scroll-top cuando modal/lightbox abierto — body scroll bloqueado,
   redundante. Cliente: "no tiene sentido en esa página". */
body:has(.lightbox.open) .scroll-top,
body:has(.modal--prop) .scroll-top,
body:has(.prop-modal-overlay) .scroll-top,
body:has(.sale-modal-backdrop) .scroll-top {
  display: none !important;
}

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.page--about { padding-top: 104px; }
.about__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  align-items: stretch;
}
.about__hero-img {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.about__hero-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.02);
}
.about__hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(14,14,12,0.3) 100%);
  pointer-events: none;
}
.about__hero-content {
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
}
.about__lede {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--text);
  max-width: 38ch;
  margin: 28px 0 40px;
}
.about__lede em { color: var(--accent); font-style: italic; }
.about__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.about__meta > div { display: flex; flex-direction: column; gap: 4px; }
.about__meta strong {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
}
.about__meta span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.about__body { padding: 120px 0; display: flex; flex-direction: column; gap: 100px; }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.about__h2 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  margin-top: 20px;
}
.about__prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.about__prose p:first-child::first-letter {
  font-family: var(--f-display);
  font-size: 68px;
  line-height: 0.85;
  float: left;
  margin: 4px 10px 0 0;
  color: var(--accent);
  font-weight: 400;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about__stat {
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--border);
}
.about__stat:last-child { border-right: 0; }
.about__stat strong {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.5vw, 4rem);
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.about__stat span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.about__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 40px;
}
.about__value {
  border-left: 1px solid var(--accent);
  padding-left: 24px;
}
.about__value h4 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--text);
}
.about__value p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
}

.about__quote {
  padding: 80px 40px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  text-align: center;
}
.about__quote blockquote { max-width: 32ch; margin: 0 auto; }
.about__quote p {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 28px;
  text-wrap: balance;
}
.about__quote footer {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 1024px) {
  .about__hero { grid-template-columns: 1fr; }
  .about__hero-img { min-height: 50vh; }
  .about__hero-content { padding: 60px 24px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .about__stat:nth-child(2) { border-right: 0; }
  .about__stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .about__values { grid-template-columns: 1fr; }
  .about__meta { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding: 0 var(--gutter) 120px;
  max-width: var(--container);
  margin: 0 auto;
}
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.service-row--reverse .service-row__img { order: 2; }
.service-row--featured { position: relative; }
.service-row--featured::before {
  content: "";
  position: absolute;
  inset: -60px -40px;
  background: var(--bg-2);
  z-index: -1;
  border: 1px solid var(--border);
}
.service-row__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.service-row__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.service-row:hover .service-row__img img { transform: scale(1.04); }
.service-row__num {
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--text);
  padding: 8px 14px;
  background: rgba(14, 14, 12, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 226, 212, 0.2);
}
.service-row__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--bg);
  margin-bottom: 24px;
  font-weight: 500;
}
.service-row__title {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.service-row__sub {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 32px;
  text-wrap: pretty;
}
.service-row__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.service-row__items li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.service-row__check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.service-row__check svg { width: 10px; height: 10px; }

.services__cta {
  padding: 100px 40px;
  text-align: center;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.services__cta-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  margin-bottom: 20px;
  max-width: 20ch;
  margin-inline: auto;
}
.services__cta p {
  max-width: 48ch;
  margin: 0 auto 40px;
  color: var(--text-dim);
  font-size: 17px;
}

@media (max-width: 1024px) {
  .services-list { gap: 80px; }
  .service-row { grid-template-columns: 1fr; gap: 32px; }
  .service-row--reverse .service-row__img { order: 0; }
  .service-row--featured::before { inset: -30px -20px; }
}

/* ============================================================
   MOBILE DRAWER (hamburger menu)
   ============================================================ */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--text);
  transform: translateX(-50%);
  transition: all 0.3s var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 28px; }
.nav__burger.open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.mobile-drawer.open { pointer-events: auto; }
.mobile-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.mobile-drawer.open .mobile-drawer__scrim { opacity: 1; }
.mobile-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(420px, 88vw);
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 100px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  overflow-y: auto;
}
.mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s;
}
.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
  transform: scale(1.04);
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  outline: none;
}
.mobile-drawer__close svg { flex-shrink: 0; }
.mobile-drawer__links { list-style: none; display: flex; flex-direction: column; }
.mobile-drawer__links li {
  border-bottom: 1px solid var(--border);
}
.mobile-drawer__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.75;
  transition: color 0.3s, opacity 0.3s, padding-left 0.3s var(--ease-out);
}
.mobile-drawer__links a:hover,
.mobile-drawer__links a.active {
  color: var(--gold-2);
  opacity: 1;
  padding-left: 10px;
}
.mobile-drawer__links a.active::before {
  content: "—";
  margin-right: 10px;
  color: var(--gold-2);
}
.mobile-drawer__links a svg { opacity: 0.6; }
.mobile-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.mobile-drawer__langs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mobile-drawer__langs button {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: all 0.25s;
  cursor: pointer;
  background: transparent;
}
.mobile-drawer__langs button:hover { color: var(--text); border-color: var(--border-strong); }
.mobile-drawer__langs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.mobile-drawer__theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mobile-drawer__theme-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s;
}
.mobile-drawer__theme-btn:hover { color: var(--text); border-color: var(--border-strong); }
.mobile-drawer__theme-btn.active {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* Active nav link (desktop) */
.nav__links a.active {
  color: var(--gold-2);
  opacity: 1;
  font-weight: 500;
}
.nav__links a.active::after { transform: scaleX(1); background: var(--gold-2); }

/* ============================================================
   RESPONSIVE PASS (nav + general)
   ============================================================ */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; }
  .nav__wa-label { display: none; }
  .nav__wa { padding: 10px 14px; }
  /* Lang switcher visible en mobile también — cliente reportó "selector
     idioma debe estar visible primera página, no todos saben buscarlo".
     Antes display:none mobile escondía dentro del burger. Ahora chip
     compacto al lado del WA + burger. */
  .nav__lang-wrap { display: block; }
  .nav__lang { padding: 7px 10px; font-size: 11px; letter-spacing: 0.1em; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-y: 80px;
  }
  .page { padding-top: 104px; }
  .page--props { padding-top: 126px; }
  .page--props .page__body { padding-top: 20px; }
  .page__head { padding: 48px 0 32px; margin-bottom: 48px; }
  .page__title { margin: 14px 0 18px; }

  .results__head { flex-direction: column; align-items: flex-start; }
  .filters { padding: 20px; }
  .filter-pills { gap: 4px; }
  .filter-pill { padding: 7px 10px; }

  .about__stat { padding: 28px 18px; }
  .about__quote { padding: 48px 24px; }

  .services-list { gap: 64px; padding-bottom: 64px; }
  .service-row__sub { margin-bottom: 24px; }
  .services__cta { padding: 64px 24px; }

  .wa-float { bottom: 84px; }
  .fav-drawer-btn {
    bottom: 16px; right: 16px;
    padding: 10px 14px;
  }
  .fav-drawer-btn span:nth-child(2) { display: none; }
}

/* Favorites/fav drawer accent fix */
.fav-drawer-btn:hover { border-color: var(--accent); color: var(--accent); }
.fav-drawer-btn__count {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ============================================================
   SELL PAGE (/vender) — hereda paleta del tema activo
   ============================================================ */
.sell {
  max-width: 980px;
  margin: 0 auto;
  /* Top padding clears fixed .nav (height ~89px + breathing room) so hero no se solapa */
  padding: 130px 48px 120px;
  color: var(--text);
}
.sell__hero { text-align: center; margin-bottom: 40px; }
.sell__hero .eyebrow { display: block; margin-bottom: 18px; color: var(--gold); }
.sell__title {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}
.sell__title em { font-style: italic; color: var(--gold); font-weight: 300; }
.sell__sub {
  font-size: 16px; line-height: 1.65;
  color: var(--text-dim);
  max-width: 620px; margin: 0 auto;
}

.sell__progress {
  display: flex; gap: 16px;
  margin: 0 0 36px;
  justify-content: space-between;
}
.sell__step {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  border-top: 2px solid var(--border);
  opacity: 0.45;
  transition: all .3s var(--ease);
}
.sell__step.active { opacity: 1; border-top-color: var(--gold); }
.sell__step.done { opacity: 0.7; border-top-color: var(--gold); }
.sell__step-num {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--gold);
}
.sell__step-label {
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.sell__form { display: flex; flex-direction: column; }
.sell__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 40px 44px 36px;
  margin-bottom: 24px;
}
.sell__section h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--text);
}
.sell__hint {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 28px;
  line-height: 1.5;
}
.sell__hint-inline {
  color: var(--text-mute);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
}

.sell__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sell__field { display: flex; flex-direction: column; gap: 8px; }
.sell__field--full { grid-column: 1 / -1; }
.sell__field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sell__field input,
.sell__field select,
.sell__field textarea {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 13px 14px;
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  width: 100%;
}
.sell__field input:focus,
.sell__field select:focus,
.sell__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-2);
}
.sell__field textarea { resize: vertical; min-height: 90px; line-height: 1.55; font-family: var(--f-ui); }
.sell__field select {
  cursor: pointer;
  appearance: none;
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89f8a' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.sell__field select option { background: var(--bg-2); color: var(--text); }
body.theme-light .sell__field select { color-scheme: light; }
body.theme-light .sell__field select option { background: var(--surface); color: var(--text); }

.sell__currency-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
}

.sell__checks {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 16px 18px;
}
.sell__check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.sell__check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

.sell__upload {
  border: 1.5px dashed var(--border-strong);
  border-radius: 3px;
  padding: 36px 20px;
  text-align: center;
  background: var(--bg-2);
  transition: all .2s var(--ease);
  cursor: pointer;
  position: relative;
}
.sell__upload.drag { border-color: var(--gold); background: var(--surface-2); }
.sell__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
.sell__upload-label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
  cursor: pointer;
}
.sell__upload-hint {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sell__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.sell__photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.sell__photo img { width: 100%; height: 100%; object-fit: cover; }
.sell__photo button {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  background: rgba(14, 14, 12, 0.8);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.sell__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0 0;
}
.sell__spacer { flex: 1; }
.sell .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 3px;
  font-family: var(--f-ui);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  transition: all .2s var(--ease);
}
.sell .btn-line:hover { border-color: var(--gold); color: var(--gold); }
.sell .btn-gold:disabled { opacity: 0.5; cursor: not-allowed; }

.sell__error {
  background: rgba(226, 139, 106, 0.12);
  border: 1px solid rgba(226, 139, 106, 0.5);
  color: #f1a98a;
  padding: 14px 18px;
  border-radius: 3px;
  margin: 18px 0 0;
  font-size: 13px;
}

.sell__success {
  text-align: center;
  padding: 140px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.sell__success-icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 36px;
  font-weight: 600;
}
.sell__success h1 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.375rem, 5vw, 3.25rem);
  font-weight: 300;
  margin: 0 0 20px;
  color: var(--text);
}
.sell__success p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 36px;
}

@media (max-width: 768px) {
  /* Padding top aumentado para clear del nav fixed (89px) + breathing room */
  .sell { padding: 110px 20px 80px; }
  .sell__section { padding: 28px 22px; }
  .sell__grid { grid-template-columns: 1fr; }
  .sell__progress { flex-direction: column; align-items: stretch; gap: 0; }
  .sell__step { flex-direction: row; gap: 12px; border-top: none; border-left: 2px solid var(--border); padding: 10px 14px; }
  .sell__step.active, .sell__step.done { border-left-color: var(--gold); }
  .sell__success { padding: 80px 20px; }
}

/* ============================================================
   LIGHTBOX — Image carousel (near fullscreen) w/ thumbnails
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.94);
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  animation: lbFade 180ms ease-out forwards;
}
.lightbox.open { opacity: 1; }
/* Blur backdrop — Apple Photos / Airbnb style. Misma image escalada +
   blur intenso detrás. Cubre bandas laterales con tonos del propio photo
   en lugar de negro plano. Premium UX. CSS var --lb-bg-img seteada
   inline desde React per current image. */
.lightbox__bg-blur {
  position: absolute;
  inset: -10%;  /* expand para evitar edge bleed del blur */
  z-index: 0;
  background-image: var(--lb-bg-img);
  background-size: cover;
  background-position: center;
  filter: blur(48px) saturate(1.2) brightness(0.55);
  -webkit-filter: blur(48px) saturate(1.2) brightness(0.55);
  transform: scale(1.15);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
/* Stage + nav + close + counter en z-index higher para over blur */
.lightbox__stage,
.lightbox__nav,
.lightbox__close,
.lightbox__counter,
.lightbox__thumbs { position: relative; z-index: 2; }

/* Tap-to-toggle UI (Apple Photos style). Click image → hide secondary controls.
   Tap again → restore. Smooth fade transition. .lightbox--ui-hidden
   aplica via lbUiHidden state. Image queda full-focus sin distracción.
   CLOSE button SIEMPRE visible — UX critical: user must always have escape
   route. Bug reportado: con lbUiHidden=true default en landscape mobile,
   ocultaba close → user atrapado sin X visible. */
.lightbox__close,
.lightbox__nav,
.lightbox__counter,
.lightbox__thumbs {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox--ui-hidden .lightbox__counter,
.lightbox--ui-hidden .lightbox__thumbs {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Close button + nav arrows SIEMPRE visibles — UX critical: user always
   needs escape route + navigation. Bug reportado: con default hidden
   landscape mobile, flechas no aparecían inconsistente → user no podía
   navegar. Apple Photos hide ALL UI on tap, pero LGM mobile small
   screen necesita controles persistent. */
.lightbox--ui-hidden .lightbox__close,
.lightbox--ui-hidden .lightbox__nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Img cursor pointer indica interactivo (toggle) + pinch-zoom native browser */
.lightbox__img {
  cursor: pointer;
  touch-action: pinch-zoom;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}
/* Double-tap zoom fill — image scaleada hasta llenar viewport (recorta
   parte). User opt-in para ver photo grande sin bandas laterales.
   Scale 1.6 cubre la mayoría aspect ratios diferenciados (4:3 vs 16:9). */
.lightbox__img--zoom-fill {
  transform: scale(1.6);
  cursor: zoom-out;
}
@keyframes lbFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Lightbox X close — DORADO siempre visible (cliente reportaba botón
   casi invisible sobre fondo oscuro fotos). Antes: color #fff + bg dark
   transparente quedaba demasiado sutil. Ahora: gold full + border gold +
   bg dark contrast + sombra para destacar. */
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(14, 14, 12, 0.85);
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 150ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 168, 118, 0.3);
}
.lightbox__close svg { stroke: var(--gold); }
.lightbox__close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #14120e;
  transform: scale(1.05);
}
.lightbox__close:hover svg { stroke: #14120e; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 18, 14, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 150ms ease;
  backdrop-filter: blur(6px);
}
.lightbox__nav:hover {
  background: rgba(198, 161, 91, 0.2);
  border-color: var(--gold);
  color: var(--gold);
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 60px 90px 20px;
  overflow: hidden;
  user-select: none;
}
@keyframes lightboxImgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  /* max-height:100% references grid track height which includes padding,
     so the image overflows the content box and gets clipped by overflow:hidden.
     Explicit calc avoids the percentage ambiguity entirely.
     200px = stage padding(80) + thumbs strip(104) + buffer(16). */
  max-width: calc(100vw - 180px);  /* 90px horizontal padding × 2 */
  max-height: calc(100vh - 200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  /* Smooth fade-in cuando image decoded → user no ve flash blank */
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.06));
  animation: lightboxImgFadeIn 0.32s ease-out;
  animation: lbImg 220ms ease-out;
}
@keyframes lbImg {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox__counter {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 18, 14, 0.65);
  color: var(--gold);
  border: 1px solid rgba(198, 161, 91, 0.3);
  font-family: var(--f-sans);
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  letter-spacing: 0.12em;
  backdrop-filter: blur(8px);
}

.lightbox__thumbs {
  display: flex;
  gap: 10px;
  padding: 16px 28px 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 161, 91, 0.4) transparent;
}
.lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(198, 161, 91, 0.4); border-radius: 3px; }

.lightbox__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: all 160ms ease;
}
.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}

/* Mobile adaptation */
@media (max-width: 768px) {
  .lightbox__stage { padding: 48px 8px 10px; }
  .lightbox__img { max-width: calc(100vw - 16px); max-height: calc(100vh - 160px); border-radius: 4px; }
  .lightbox__close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .lightbox__nav {
    width: 42px;
    height: 42px;
    top: auto;
    bottom: 104px;
    transform: none;
    background: rgba(20, 18, 14, 0.75);
  }
  .lightbox__nav--prev { left: 12px; }
  .lightbox__nav--next { right: 12px; }
  .lightbox__counter { top: 12px; padding: 6px 12px; }
  .lightbox__thumbs {
    padding: 10px 12px 14px;
    justify-content: flex-start;
    gap: 6px;
  }
  .lightbox__thumb { width: 64px; height: 44px; border-width: 1.5px; }
}

/* Short screens (laptops, landscape phones): compress thumb strip */
@media (max-height: 800px) {
  .lightbox__thumbs { padding: 8px 16px 12px; }
  .lightbox__thumb { width: 72px; height: 48px; }
  .lightbox__img { max-height: calc(100vh - 180px); }
}

/* Mobile/tablet landscape — REDESIGN PROFESIONAL Apple Photos / Booking
   pattern:
   1. Image use 100vh full sin recortar (object-fit: contain con max
      dimension viewport — preserva aspect)
   2. Thumbs strip ABSOLUTE bottom OVERLAY (no displaces image space)
      con backdrop semi-transparente gradient. Image extends behind
      thumbs partially.
   3. Arrows + close + counter bg dark contrast sobre image
   4. Backdrop blur del propio photo en bandas (aspect mismatch)

   Image NO recortada (contain) + thumbs flotando overlay = best balance
   entre "ver photo grande" + "navegar fácil entre fotos sin distracción". */
/* Mobile landscape detection — DROP hover:none + pointer:coarse strict
   detection (Samsung Internet + algunos browsers no report consistente).
   Use simple landscape + max-height 900 catch most phones+tablets en
   landscape mode SIN excluir desktops grandes (que no rotate). */
@media (orientation: landscape) and (max-height: 900px) {
  /* Lightbox container — single layer (sin grid filas) para overlay free */
  .lightbox {
    grid-template-rows: none !important;
    display: block !important;
  }
  .lightbox__stage {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100vh;
  }
  /* Image llena viewport COMPLETO con contain (preserve aspect, sin
     recortar). Bandas inevitables si aspect mismatch — cubiertas por
     backdrop blur del propio photo. */
  .lightbox__img {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }
  /* Bg blur visible para tonalizar bandas */
  .lightbox__bg-blur { display: block !important; }
  /* Thumbs strip OVERLAY bottom — flotante semi-transparente.
     Default HIDDEN en landscape mobile (lbUiHidden=true on open via JS).
     Gradient lighter para no oscurecer bottom de image cuando se muestra.
     User pide "imagen completa por defecto" → thumbs salen solo on tap. */
  .lightbox__thumbs {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
    z-index: 5 !important;
    overflow-x: auto;
    gap: 6px !important;
    /* Smooth fade-in/slide-up */
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .lightbox__thumb {
    width: 56px !important;
    height: 40px !important;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    overflow: hidden;
  }
  .lightbox__thumb.active {
    border-color: var(--gold, #c9a876) !important;
    box-shadow: 0 0 0 1px var(--gold, #c9a876);
  }
  /* Arrows + close + counter z-index above all */
  .lightbox__nav {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    background: rgba(20, 18, 14, 0.65) !important;
    z-index: 10 !important;
  }
  .lightbox__nav--prev { left: 12px !important; }
  .lightbox__nav--next { right: 12px !important; }
  .lightbox__close {
    top: 12px !important; right: 12px !important;
    background: rgba(20, 18, 14, 0.75) !important;
    z-index: 10 !important;
  }
  .lightbox__counter {
    top: 12px !important;
    background: rgba(20, 18, 14, 0.75) !important;
    z-index: 10 !important;
  }
  /* Tap-to-hide UI también oculta thumbs */
  .lightbox--ui-hidden .lightbox__thumbs {
    opacity: 0 !important;
    transform: translateY(100%);
    pointer-events: none;
  }
}

@media (max-width: 640px) {
  .lightbox__thumb { width: 54px; height: 38px; }
  .lightbox__nav { bottom: 110px; }
}

/* ============================================================
   LEGAL PAGES (Aviso Legal + Privacidad)
   ============================================================ */
.page--legal {
  padding: 88px 0 120px;
  background: var(--bg);
}
.legal__container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.legal__breadcrumb {
  margin-bottom: 48px;
}
.legal__back {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-light, #7b7167);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.legal__back:hover {
  color: var(--gold, #bfa46b);
  border-color: var(--gold, #bfa46b);
}
.legal__header {
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.legal__header .page__title {
  font-size: clamp(40px, 6vw, 72px);
  margin: 16px 0 20px;
  line-height: 1.02;
}
.legal__subtitle {
  font-size: 18px;
  color: var(--ink-2, #4a433c);
  line-height: 1.55;
  margin: 0 0 20px;
  font-style: italic;
}
.legal__updated {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-light, #7b7167);
  margin: 0;
}
.legal__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #4a433c);
  margin: 0 0 48px;
  padding: 24px 28px;
  background: var(--bg-2, #f7f3ec);
  border-left: 3px solid var(--gold, #bfa46b);
}
.legal__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.legal__section {
  scroll-margin-top: 120px;
}
.legal__h2 {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink, #1f1a14);
  letter-spacing: -0.01em;
}
.legal__p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2, #3a342d);
  margin: 0 0 10px;
  white-space: pre-wrap;
}
.legal__p:last-child { margin-bottom: 0; }
.legal__contact {
  margin-top: 72px;
  padding: 32px;
  background: var(--bg-2, #f7f3ec);
  border: 1px solid var(--border);
  text-align: center;
}
.legal__contact p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2, #3a342d);
}
.legal__contact a {
  color: var(--gold, #bfa46b);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.legal__contact a:hover { color: var(--ink, #1f1a14); }

/* Footer legal links */
.footer__legal-links {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.footer__legal-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}
.footer__legal-link:hover {
  color: var(--gold, #bfa46b);
}
.footer__legal-sep {
  margin: 0 6px;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .page--legal { padding: 56px 0 80px; }
  .legal__container { padding: 0 18px; }
  .legal__header .page__title { font-size: clamp(32px, 8vw, 48px); }
  .legal__subtitle { font-size: 15px; }
  .legal__intro { font-size: 15px; padding: 18px 20px; }
  .legal__h2 { font-size: 22px; }
  .legal__p { font-size: 14px; }
  .legal__contact { padding: 22px 18px; }
}

/* ============================================================
   RESPONSIVE REWRITE 2026 — Full-range fluid system
   Target coverage: 360 → 7680 px. Fluid tokens + container
   queries + ultra-wide scaling. Overrides legacy MQ where
   needed via cascade order (this layer is last).
   ============================================================ */

/* ---- FLUID BASE TOKENS (override legacy :root scale) ---- */
:root {
  /* Fluid gutters + section rhythm — scale 360→1920 viewport */
  --gutter: clamp(14px, 3vw, 64px);
  --section-y: clamp(56px, 9vw, 160px);

  /* Fluid type ramp — linear between 360px and 1920px */
  --fs-xs: clamp(10px, 0.22vw + 9.2px, 12px);
  --fs-sm: clamp(11px, 0.25vw + 10.1px, 13px);
  --fs-md: clamp(13px, 0.3vw + 11.9px, 15px);
  --fs-lg: clamp(14px, 0.4vw + 12.6px, 17px);
  --fs-xl: clamp(17px, 0.6vw + 14.8px, 22px);
  --fs-2xl: clamp(22px, 0.9vw + 18.8px, 32px);
  --fs-3xl: clamp(28px, 1.8vw + 21.5px, 52px);
  --fs-4xl: clamp(40px, 3.2vw + 28.5px, 84px);
  --fs-5xl: clamp(52px, 4.8vw + 35px, 124px);
  --fs-6xl: clamp(64px, 6.8vw + 40px, 176px);

  /* Container — fluid cap (overridden per-MQ below) */
  --container: min(1440px, 92vw);
}

/* Container primitive respects fluid cap */
.container { max-width: var(--container); }

/* ---- 360 → 430 : smallest phones ---- */
@media (max-width: 430px) {
  :root {
    --gutter: 14px;
    --section-y: 56px;
  }
  .hero { padding: 92px 14px 36px !important; gap: 20px; }
  .hero__title { font-size: clamp(1.75rem, 8.5vw, 2.75rem) !important; }
  .hero__sub { font-size: 13px !important; }
  .hero__eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 6px !important;
    /* SIN text-shadow — blur lo hacía borroso en HiDPI. */
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .hero__eyebrow::before { display: none !important; }
  .hero__meta { flex-wrap: wrap; gap: 8px; }
  .search__field { padding: 11px 14px !important; font-size: 13px; }
  .search__btn { padding: 14px !important; font-size: 11px; }
  .btn-gold, .btn-ghost { padding: 12px 18px; font-size: 11px; letter-spacing: 0.14em; }
  .nav__burger { width: 40px; height: 40px; }
  /* Small mobile <480px: logo más compacto, lockup horizontal 07/08 ratio
     5.1:1. height 44px = width ~224px que cabe en 375px-wide phones. */
  .nav { padding: 10px var(--gutter) 8px !important; }
  .nav.scrolled { padding: 8px var(--gutter) 6px !important; }
  .nav__logo img { height: 44px !important; max-height: 44px !important; max-width: 58vw !important; }
  .nav.scrolled .nav__logo img { height: 36px !important; max-height: 36px !important; }
  .footer__brand img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
  }
  .modal__main, .modal__side { padding: 20px 14px !important; }
  .modal__specs { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .page__title { font-size: clamp(34px, 10vw, 52px) !important; }
  /* ──────── /propiedades mobile hardening ────────
     Issues observados en viewports 320-430:
     1. pcard min-width:280 (default móvil) excede ancho viewport en small phones
     2. results__head sort dropdown ancho rompía layout
     3. wa-float + fav-drawer-btn + scroll-top podían tapar content
     4. FABs muy grandes en pantallas pequeñas
     Fix integral abajo. */
  .page--props,
  .page--props .page__body,
  .results,
  .results__grid {
    max-width: 100% !important;
    overflow-x: clip;
    box-sizing: border-box !important;
  }
  .results__grid .pcard,
  .results__grid .lcard {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .results__head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
    margin-bottom: 22px !important;
  }
  .results__count strong { font-size: 28px !important; }
  .results__count span { font-size: 10px !important; letter-spacing: 0.12em !important; }
  .results__controls { width: 100% !important; gap: 8px !important; }
  .results__sort,
  .lgm-dd--sort {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 100px) !important;
    font-size: 11px !important;
    padding: 9px 28px 9px 12px !important;
  }
  .results__view { flex: 0 0 auto !important; }
  .results__view button { padding: 9px 11px !important; }
  /* FABs: tamaño reducido + posición safe-area. wa-float left, fav-drawer-btn
     right (bottom), scroll-top right arriba — sin overlap. */
  .wa-float {
    width: 48px !important; height: 48px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
  }
  .fav-drawer-btn {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    padding: 8px 12px !important;
  }
  .scroll-top {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 38px !important; height: 38px !important;
  }
  /* Mobile filter sidebar: centrar + sin overflow.
     Pills permite wrap multi-line dentro del pill como fallback duro
     porque "EDIFICIO DE APARTAMENTOS" (24 chars) no cabe en viewport
     <420px ni siquiera con font 8px. Aceptamos break-word con hyphens. */
  .filters {
    padding: 14px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .filter-group { gap: 8px; }
  .filter-group__label { text-align: center; font-size: 10px !important; }
  .filter-pills {
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .filter-pill {
    padding: 6px 8px !important;
    font-size: clamp(8px, 2.4vw, 10px) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    /* CRÍTICO: permite quebrar texto largo (EDIFICIO DE APARTAMENTOS) en
       multiples líneas dentro del pill antes que overflow del container.
       max-width 100% del row → flex-wrap natural empujará a row siguiente
       si pill ancho > container; word-break para texto > pill ancho. */
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .mobile-drawer__links a { font-size: 22px; padding: 16px 0; }
  .pillar__title { font-size: 24px !important; }
  .pstep__title { font-size: 22px !important; }
  .about__lede { font-size: 1.05rem !important; }
  .service-row__title { font-size: clamp(30px, 8vw, 44px) !important; }
  .lightbox__thumb { width: 48px; height: 32px; }
}

/* ---- 431 → 640 : large phones (legacy 640 MQ remains) ---- */
/* Already covered by legacy @media (max-width:640) blocks */

/* ---- 641 → 767 : phablet / small tablet edge ---- */
@media (min-width: 641px) and (max-width: 767px) {
  .editorial__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gcard--w3, .gcard--w4, .gcard--w5, .gcard--w6, .gcard--w7, .gcard--w8 {
    grid-column: span 1;
  }
  .pcard { flex: 0 0 72%; }
}

/* ---- 768 → 900 : tablet portrait (iPad Mini / iPad / Surface) ---- */
@media (min-width: 768px) and (max-width: 900px) {
  .editorial__grid { grid-template-columns: repeat(6, 1fr); gap: 18px; }
  .gcard--w3, .gcard--w4 { grid-column: span 3; }
  .gcard--w5, .gcard--w6, .gcard--w7, .gcard--w8 { grid-column: span 6; }
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .pillars__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pillar { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; padding: 40px 24px !important; }
  .pillar:nth-child(2n) { border-right: 0 !important; }
  .pillar:last-child { border-bottom: 0 !important; }
  .about__stats { grid-template-columns: repeat(4, 1fr); }
  .about__values { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 901 → 1024 : tablet landscape ---- */
@media (min-width: 901px) and (max-width: 1024px) {
  .editorial__grid { grid-template-columns: repeat(8, 1fr); gap: 20px; }
  .gcard--w3 { grid-column: span 4; }
  .gcard--w4 { grid-column: span 4; }
  .gcard--w5, .gcard--w6 { grid-column: span 4; }
  .gcard--w7, .gcard--w8 { grid-column: span 8; }
  .pillars__grid { grid-template-columns: repeat(4, 1fr) !important; }
  .pillar { border-right: 1px solid var(--border) !important; border-bottom: 0 !important; padding: 40px 24px !important; }
  .pillar:last-child { border-right: 0 !important; }
}

/* ---- 1025 → 1366 : small laptop (existing legacy 1280 MQ keeps) ---- */

/* ---- 1367 → 1599 : mid laptop / FHD portrait ---- */
@media (min-width: 1367px) and (max-width: 1599px) {
  :root { --container: min(1366px, 90vw); }
}

/* ---- 1600 → 1919 : HD laptop / small QHD ---- */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --container: 1500px;
    --gutter: 56px;
  }
}

/* ---- 1920 → 2559 : FHD / 1920x1200 desktop ---- */
@media (min-width: 1920px) {
  :root {
    --container: 1600px;
    --gutter: 72px;
    --section-y: 160px;
  }
  body { font-size: 15px; }
  .hero { padding: clamp(100px, 10vw, 180px) var(--gutter) clamp(60px, 5vw, 120px); min-height: 100dvh; }
  .editorial__grid { max-width: var(--container); }
  .footer__inner { max-width: var(--container); }
}

/* ---- 2560 → 2879 : QHD / WQHD ---- */
@media (min-width: 2560px) {
  :root {
    --container: 1920px;
    --gutter: 96px;
    --section-y: 200px;
  }
  body { font-size: 17px; line-height: 1.6; }
  .nav__wrap { max-width: var(--container); }
}

/* ---- 2880 → 3439 : Retina 15"/16" scaled ---- */
@media (min-width: 2880px) {
  :root {
    --container: 2100px;
    --gutter: 112px;
  }
  body { font-size: 18px; }
}

/* ---- 3440 → 3839 : ultrawide (21:9) ---- */
@media (min-width: 3440px) {
  :root {
    --container: 2400px;
    --gutter: 140px;
    --section-y: 240px;
  }
  body { font-size: 19px; }
  .hero__title { font-size: clamp(96px, 5vw, 200px) !important; }
}

/* ---- 3840 → 5119 : 4K UHD ---- */
@media (min-width: 3840px) {
  :root {
    --container: 2600px;
    --gutter: 180px;
    --section-y: 280px;
  }
  body { font-size: 20px; }
  .hero__title { font-size: clamp(120px, 6vw, 260px) !important; }
}

/* ---- 5120 → 7679 : 5K + super-ultrawide ---- */
@media (min-width: 5120px) {
  :root {
    --container: 3000px;
    --gutter: 240px;
  }
  body { font-size: 24px; }
  .hero__title { font-size: clamp(160px, 5.5vw, 320px) !important; }
}

/* ---- 7680+ : 8K ---- */
@media (min-width: 7680px) {
  :root {
    --container: 4000px;
    --gutter: 320px;
    --section-y: 360px;
  }
  body { font-size: 30px; }
  .hero__title { font-size: clamp(240px, 6vw, 420px) !important; }
}

/* ---- CONTAINER QUERIES — adaptive cards/grids ---- */
@supports (container-type: inline-size) {
  .editorial__grid,
  .results__grid,
  .footer__inner,
  .pillars__grid,
  .about__stats,
  .about__values,
  .modal__specs {
    container-type: inline-size;
  }

  @container (max-width: 520px) {
    .editorial__grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    .editorial__grid .gcard--w3,
    .editorial__grid .gcard--w4,
    .editorial__grid .gcard--w5,
    .editorial__grid .gcard--w6,
    .editorial__grid .gcard--w7,
    .editorial__grid .gcard--w8 {
      grid-column: 1 / -1 !important;
    }
  }

  @container (max-width: 420px) {
    .modal__specs {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    .about__stats { grid-template-columns: 1fr 1fr; }
  }

  @container (min-width: 1800px) {
    .editorial__grid { gap: 32px; }
  }
}

/* ---- LANDSCAPE PHONE (orientation safeguard) ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-top: 72px; padding-bottom: 32px; }
  .hero__scroll { display: none; }
}

/* ---- SAFE AREA (iOS notch) ---- */
@supports (padding: env(safe-area-inset-top)) {
  .nav { padding-top: calc(32px + env(safe-area-inset-top)); }
  .nav.scrolled { padding-top: calc(18px + env(safe-area-inset-top)); }
  .mobile-drawer__panel { padding-top: calc(100px + env(safe-area-inset-top)); }
  .fav-drawer-btn, .wa-float { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   ADAPTIVE GRIDS 2026 — cards reflow on container width.
   Replaces fixed 2/3-col MQ with auto-fill minmax so cards
   naturally reflow: 1 on phone, 2 on tablet, 3 on laptop,
   4+ on wide desktop. No matter what parent width.
   ============================================================ */

/* Results grid (propiedades list) — adaptive cards.
   Min 220 so 3 cols fit at 1280 laptop (results rail ~720px after filter+gap),
   4 at 1680, 5 at 2400, 6 at 3400. */
.results__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
  gap: clamp(20px, 2vw, 40px) !important;
}
/* Mobile: let card use full width — 240px min + single col pattern */
@media (max-width: 640px) {
  .results__grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}
/* Ultrawide: slightly larger min so cards don't shrink below readable on 5K+ */
@media (min-width: 2400px) {
  .results__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
    gap: clamp(32px, 2vw, 56px) !important;
  }
}
/* Restore visible card separation (border blends on light theme) */
.results__grid .pcard,
.results__grid .lcard {
  border: 1px solid rgba(20, 20, 18, 0.14) !important;
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.04), 0 8px 24px rgba(20, 20, 18, 0.05);
  min-width: 0 !important;
}

/* Logo eyebrow alignment: letter-spacing adds trailing space that
   visually shifts centered text. Compensate with text-indent. */
.nav__logo-eyebrow,
.footer__brand-eyebrow {
  text-indent: 0.42em;
}

/* Heart / favorite button — white icon forced, readable on any theme */
.pcard__fav {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #14120e !important;
}
.pcard__fav svg { stroke: #14120e; }
.pcard__fav:hover {
  background: #b89256 !important;
  border-color: #b89256 !important;
  color: #0e0e0c !important;
}
.pcard__fav:hover svg { stroke: #0e0e0c; }
.pcard__fav.active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #14120e !important;
}
.pcard__fav.active svg { stroke: #14120e; fill: #14120e; }
.results__grid .pcard:hover,
.results__grid .lcard:hover {
  border-color: rgba(20, 20, 18, 0.28) !important;
  box-shadow: 0 2px 4px rgba(20, 20, 18, 0.06), 0 14px 36px rgba(20, 20, 18, 0.1);
}
body.theme-dark .results__grid .pcard,
body.theme-dark .results__grid .lcard,
body.theme-coastal .results__grid .pcard,
body.theme-coastal .results__grid .lcard {
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 480px) {
  .results__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ABOUT hero image — remove wash/fade effect on mobile to preserve photo essence.
   On desktop the subtle grayscale + bottom gradient complement the split layout;
   on phones the effect overpowers the reduced canvas. */
@media (max-width: 768px) {
  .about__hero-img img {
    filter: none !important;
  }
  .about__hero-img::after {
    display: none !important;
  }
  /* Sell banner image — same treatment. On mobile the bottom fade to bg-2
     washes the photo into the cream background; grayscale+brightness dims it
     further. Keep photo crisp and pure. */
  .sell-banner__bg img {
    filter: none !important;
  }
  .sell-banner__bg::after {
    display: none !important;
  }
}

/* Editorial grid (home featured) — safeguard reflow */
@media (min-width: 1025px) and (max-width: 1366px) {
  .editorial__grid { gap: 20px; }
}

/* Page body with filter sidebar: collapse under 1100 */
@media (max-width: 1100px) {
  .page__body {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .page--props .filters {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Nav: force burger earlier when cramped */
@media (max-width: 1200px) {
  .nav__links { display: none !important; }
  .nav__burger { display: flex !important; }
  .nav__theme-group { display: none !important; }
  .nav__wa-label { display: none !important; }
}

/* Hero layout: stack content + search vertically (not row).
   Hero has display:flex but default row puts search beside content
   → overflow. Force column so search sits full-width below content. */
.hero {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
}
.hero .search {
  width: 100%;
  max-width: var(--container, 1440px);
  margin: 40px auto 0 !important;
}

/* Hero search bar: wrap fields by viewport (MQ — safer than
   container-type, which would collapse .search inside flex hero) */
@media (max-width: 900px) {
  .search {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }
  .search__btn {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
  }
  .search__field:not(:last-child)::after { display: none !important; }
  .search__field { border-bottom: 1px solid var(--border) !important; padding: 14px 18px !important; }
}
@media (max-width: 560px) {
  .search {
    grid-template-columns: 1fr !important;
  }
}

/* Hero: prevent flex-end squish when sidebar-less narrow viewports */
@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero__meta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ---- PREVENT HORIZONTAL OVERFLOW (final safety) ---- */
html, body { max-width: 100vw; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
.container, .nav__wrap, .hero__content, .footer__inner, .page__body {
  max-width: min(100%, var(--container, 1440px));
  margin-inline: auto;
}

/* ============================================================
   PERF: content-visibility offscreen — Fase 1 mobile/tablet/desktop
   Defers layout + paint hasta proximidad viewport.
   contain-intrinsic-size reserva espacio para evitar saltos de scroll.
   Browsers sin soporte (Safari <18 antes de 2024): ignoran sin error.
   ============================================================ */
.section, .page__body > section, .page--about > section,
.page--services > section, .properties__results, .properties__grid {
  content-visibility: auto;
}
.section { contain-intrinsic-size: 1px 800px; }
.page__body > section { contain-intrinsic-size: 1px 600px; }
.properties__grid, .properties__results { contain-intrinsic-size: 1px 1200px; }

/* Reduce paint cost de cards lazily-rendered */
.pcard, .fcard, .gcard, .lcard {
  content-visibility: auto;
  contain-intrinsic-size: 1px 380px;
}

/* Respeta reduced motion: desactiva animaciones costosas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PERF: self-hosted fonts (Fase 1)
   Cormorant Garamond + Geist via /lgm/vendor/fonts/ — elimina DNS
   round-trip a fonts.googleapis.com / fonts.gstatic.com.
   font-display: swap evita FOIT en mobile slow networks.
   unicode-range latin (U+0020-024F + extras) reduce woff2 ~30%.
   ============================================================ */
/* Switch a Cormorant Infant 2026-05-28 — mismo carácter editorial Cormorant
   pero formas más redondeadas, crossbar t y stems más visibles. Cliente
   reportó t poco legible en titles propiedades con Cormorant Garamond.
   Mantengo nombre antiguo 'Cormorant Garamond' como alias en src fallback
   por si algún CSS module legacy lo referencia direct. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Alias real con nombre Cormorant Infant — uso futuro / clarity. Apunta
   a mismos archivos. */
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lgm/vendor/fonts/geist.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/geist.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   PROPERTY MODAL — Seccion "Propiedades similares"
   Grid responsivo con breakpoints fijos para evitar overflow
   horizontal del modal. Mobile-first: 1 col -> 2 -> 3 -> 4.
   ============================================================ */
.modal__similar {
  padding: 32px 24px 40px;
  border-top: 1px solid var(--border);
  /* Asegura que la seccion queda dentro del modal: si por alguna razon
     un hijo intentara salir, hidden lo recorta limpio. */
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.modal__similar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.2;
}
.modal__similar-sub {
  font-size: 13px;
  color: var(--text-mid, var(--ink-mid, #6A5A47));
  margin: 0 0 18px;
}
.modal__similar-grid {
  display: grid;
  /* Mobile default: 1 col */
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}
.modal__similar-skeleton {
  aspect-ratio: 4 / 3;
  background: var(--cream, rgba(255,255,255,0.06));
  border-radius: 8px;
  opacity: 0.6;
  animation: lgmSimilarPulse 1.4s ease-in-out infinite;
}
@keyframes lgmSimilarPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}
/* Tablet/intermedio 480-1100px: 2 cols (matches limit=4 → 2x2 grid balanced).
   Antes había stage 3-col en 768-1100 que dejaba 1 card huérfana sola en
   fila 2 (iPad portrait 832px). 2x2 mejor visualmente. */
@media (min-width: 480px) and (max-width: 1099.98px) {
  .modal__similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop 1100px+: 4 cols (matches limit=4 del endpoint → fila única) */
@media (min-width: 1100px) {
  .modal__similar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .modal__similar { padding: 40px 32px 48px; }
}
/* Reduce padding en mobile para maximizar area de cards */
@media (max-width: 600px) {
  .modal__similar { padding: 24px 16px 32px; }
  .modal__similar-grid { gap: 12px; }
}

/* Override .pcard defaults DENTRO del grid similares:
   PCard default `min-width: 380px` + `flex: 0 0 33.333%` está pensado
   para el carrusel destacados (flex container). En el grid similares
   reset a width 100% para respetar minmax(0, 1fr) de cada celda. */
.modal__similar-grid .pcard {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}
/* Body padding más compacto en cards de similares (espacio limitado) */
.modal__similar-grid .pcard__body {
  padding: 14px 16px 18px;
  gap: 6px;
}
/* Title escalado para grid 4-col: clamp más conservador,
   no estalla a 28px que se desborda en 280px ancho */
.modal__similar-grid .pcard__name {
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.25;
  max-height: calc(1.25em * 3);
  word-break: normal;
  overflow-wrap: anywhere;
}
.modal__similar-grid .pcard__zone {
  font-size: 11px;
}
.modal__similar-grid .pcard__specs {
  font-size: 11px;
  gap: 8px;
}
.modal__similar-grid .pcard__specs > div {
  gap: 4px;
}
.modal__similar-grid .pcard__price-main {
  font-size: clamp(14px, 1.3vw, 17px);
}

/* ============================================================
   LGM Title — surgical "t" glyph swap (landing only)
   ------------------------------------------------------------
   Applied ONLY to property titles on the landing:
     .modal__title  · .pcard__name · .fcard__name
     .gcard__info h4 · .fav-item__name
   Admin section, hero, h1/h2/h3 generics, prices and specs
   all keep Cormorant Infant untouched.

   Maps U+0074 (lowercase t) to Crimson Pro Light (300); every
   other Latin character resolves to the existing self-hosted
   Cormorant Infant face. Client disliked the curly top hook +
   base swoop on Cormorant Infant's lowercase t; this swap
   preserves the rest of the Cormorant character.

   Crimson Pro is shipped at weight 300 specifically so the swap
   matches Cormorant Infant's 300 visual weight on .modal__title
   and .pcard__name. (Previous attempt used EB Garamond 400 — the
   only weight Google Fonts ships — which rendered visibly bolder
   than surrounding 300 text. Crimson Pro has a similar straight
   "t" stem and ships at 300, fixing the weight mismatch.)

   unicode-range carve-out skips U+0074 in the Cormorant Infant
   face so the Crimson Pro entry wins for that codepoint without
   ambiguity. Both the upright and italic Cormorant Infant faces
   are mirrored so emphasised title text (h2 em, h2 .italic,
   .fcard__name italic) still renders italic correctly.
   ============================================================ */
@font-face {
  font-family: 'LGM Title';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/crimson-pro-300.woff2') format('woff2');
  unicode-range: U+0074;
}
@font-face {
  font-family: 'LGM Title';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant.woff2') format('woff2');
  unicode-range: U+0000-0073, U+0075-00FF, U+0131, U+0152-0153,
                 U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
                 U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'LGM Title';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('/lgm/vendor/fonts/cormorant-infant-italic.woff2') format('woff2');
  unicode-range: U+0000-0073, U+0075-00FF, U+0131, U+0152-0153,
                 U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
                 U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}