/* ═════════════════════════════════════════════════════════════════════
   WTC Pereira — styles.css
   Prompt 1: foundation, navigation, hero
   Later prompts append section-specific styles; do not refactor this file.
   ═════════════════════════════════════════════════════════════════════ */


/* ── 1 · Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }


/* ── 2 · Design tokens ───────────────────────────────────────────────── */
:root {
  /* Colour */
  --ink:        #0A0807;
  --ink-2:      #1a1612;
  --bone:       #F4EFE5;
  --bone-mut:   rgba(244, 239, 229, 0.78);
  --brass:      #B08968;
  /* CTA orange lifted from the PEREIRA wordmark in the logo */
  --accent:     #e25a25;
  --accent-hi:  #F07438;   /* lighter hover tone */
  --hairline: rgba(244, 239, 229, 0.12);

  /* Jungle — subtle tropical accent referencing the Eje Cafetero selva.
     Calibrated to feel sunlit, not shaded — like chlorophyll under
     direct light, not the floor of a forest. */
  --jungle:       #154D3E;  /* deep emerald — section-bg tint */
  --jungle-mid:   #2D9777;  /* interactive green — card hover */
  --jungle-hi:    #6FE0B0;  /* bright sunlit green — text accents */
  --jungle-soft:  rgba(64, 180, 140, 0.16);  /* wash */
  /* Warm sun filter — used as a faint highlight on jungle slabs to
     suggest light filtering through the canopy. */
  --sun-soft:     rgba(232, 176, 72, 0.10);

  /* Third-party brand tokens — only for channel icons, not site palette. */
  --whatsapp-green: #25D366;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale (8px base) */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
  --space-9: 160px;
  --space-10: 200px;
  --space-11: 240px;
  --space-12: 320px;

  /* Container */
  --container-max: 1440px;
  --gutter: 48px;

  /* Header height */
  --header-h: 88px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  240ms;
  --dur-macro:  600ms;
  --dur-slow:  1400ms;
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
  }
}


/* ── 3 · Base typography + body ──────────────────────────────────────── */
html { scroll-behavior: auto; } /* Lenis handles smooth-scroll */
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Focus — always visible, never hidden */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ── 4 · Utilities ───────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--bone);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform var(--dur-micro) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
/* Legacy — kept in case older sections still reference it. */
.eyebrow__n {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--brass);
  letter-spacing: 0.04em;
}


/* ── 5 · Header ──────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  color: var(--bone);

  /* Intro: header is invisible until t=3.6s */
  opacity: 0;
  transition:
    opacity 1s var(--ease),
    background-color 400ms var(--ease),
    backdrop-filter 400ms var(--ease),
    padding 400ms var(--ease);

  background: transparent;
  padding-block: 12px;
}
.site-header.is-in { opacity: 1; }

/* Frosted chrome — materializes the moment the user scrolls so the
   mini-logo and nav live inside a single visible chrome bar rather
   than floating as disconnected elements. Matches `.landing-header`
   so the editorial site and the commercial landing read as one
   coherent surface. */
.site-header.is-scrolled {
  background: rgba(10, 8, 7, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
/* Compact on downward scroll */
.site-header.is-compact { padding-block: 8px; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Header logo slot — reserves left-side space so the right-side
   actions stay right-aligned. Sized to match `.landing-header__logo`
   (120px wide) so the editorial site's chrome bar collapses to the
   same height as the landing's. Mini-logo's natural aspect is
   ~0.65 (511.8 × 332.24), so 120px wide ≈ 78px tall. */
.site-header__logo-slot {
  flex: 0 0 auto;
  width: 120px;
  height: 78px;
}
@media (max-width: 900px) {
  .site-header__logo-slot { width: 110px; height: 72px; }
}
@media (max-width: 640px) {
  .site-header__logo-slot { width: 96px; height: 62px; }
}

/* Footer monogram (kept — footer is a sensible place for the small mark) */
.monogram {
  display: inline-flex;
  align-items: center;
  color: var(--bone);
  transition: opacity var(--dur-micro) var(--ease);
}
.monogram:hover { opacity: 0.75; }
.monogram__mark { height: 28px; width: auto; }

/* Chrome — two layouts driven by scroll state:
     · On hero (header NOT .is-scrolled): actions detach from the bar
       and float as a VERTICAL stack, fixed to the right edge of the
       viewport, centred vertically. Ghost-mode pills (no backdrop)
       read as editorial tokens instead of UI.
     · Scrolled: actions collapse back into the bar as a horizontal
       ROW, regain their frost, and the CTA recovers its orange fill.
   Transitions on opacity + background + border smooth the swap; the
   flex-direction change itself is instant but masked by the 320ms
   visual shift happening on the pills. */
.site-header__actions {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
  transition: opacity 260ms var(--ease);
}
/* Hero state — lift out of the header, become a right-edge column. */
.site-header:not(.is-scrolled) .site-header__actions {
  position: fixed;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 52;
}


/* Language toggle — pill, matching the Menú trigger and CTA. All three
   header pills share the same padding / font-size / border so their
   heights line up exactly. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
  background: rgba(10, 8, 7, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1.5px solid rgba(244, 239, 229, 0.25);
  border-radius: 999px;
  flex: 0 0 auto;
}
.lang-toggle__btn {
  position: relative;
  padding: 3px 8px;
  /* Inactive button — readable enough to register as a clickable
     alternative (was 0.45 = ghosted; visitors didn't notice the
     toggle existed). */
  color: rgba(244, 239, 229, 0.72);
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: 500;
  transition:
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.lang-toggle__btn:hover {
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 176, 0.25);
}
/* Active language — bolder type + coloured chip background so the
   current language is unmistakable at a glance. */
.lang-toggle__btn.is-active {
  color: var(--bone);
  font-weight: 700;
  background: rgba(111, 224, 176, 0.18);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 176, 0.4);
}
.lang-toggle__sep { color: var(--bone-mut); opacity: 0.45; }


/* Menu trigger — pill button that opens the fullscreen overlay. Same
   frosted-pill frame as the lang toggle and CTA, so the three chrome
   pieces read as a consistent set. */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 8, 7, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1.5px solid rgba(244, 239, 229, 0.25);
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.menu-trigger:hover,
.menu-trigger:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background-color: rgba(111, 224, 176, 0.08);
}
.menu-trigger__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
  height: 10px;
  align-items: flex-end;
  justify-content: center;
}
.menu-trigger__icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: width var(--dur-micro) var(--ease);
}
.menu-trigger__icon span:nth-child(1) { width: 14px; }
.menu-trigger__icon span:nth-child(2) { width: 9px; }
.menu-trigger:hover .menu-trigger__icon span:nth-child(2) { width: 14px; }
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span:nth-child(1) { width: 9px; }
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span:nth-child(2) { width: 14px; }


/* Pill CTA — filled with the brand orange so the primary action reads
   unambiguously. Hover bumps to a slightly brighter tone. */
.pill-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  transition:
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
  white-space: nowrap;
}
.pill-cta:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bone);
}

/* Header pills share the exact same geometry. Fixed height + vertical
   padding 0 prevents child content (icons, buttons) from stretching
   any single pill taller than the others. Only header-context CTAs
   are affected; in-body CTAs keep their natural padding. */
.site-header__actions .lang-toggle,
.site-header__actions .menu-trigger,
.site-header__actions .contact-trigger,
.site-header__actions .pill-cta {
  height: 36px;
  padding-block: 0;
  padding-inline: 18px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
}

/* ── Contact pill + popover ──────────────────────────────────────
   The pill is a ghost-outline button matching the Menú trigger.
   Click opens a small popover below with WhatsApp / phone / email
   rows, each a deep-link (mailto:, tel:, wa.me). Lighter intent
   than the Agenda CTA — for visitors who just want to ask. */
.contact-wrap {
  position: relative;
  flex: 0 0 auto;
}
.contact-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1.5px solid rgba(244, 239, 229, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.contact-trigger:hover,
.contact-trigger:focus-visible,
.contact-trigger[aria-expanded="true"] {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
}
.contact-trigger svg { flex-shrink: 0; }

/* Primary variant — filled orange, the single CTA of the header
   after consolidation (replaced "Agenda tu visita"). Same height /
   padding rules as the other header pills. */
.contact-trigger--primary {
  color: var(--bone);
  background: var(--accent);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1.5px solid var(--accent);
}
.contact-trigger--primary:hover,
.contact-trigger--primary:focus-visible,
.contact-trigger--primary[aria-expanded="true"] {
  color: var(--bone);
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}
/* Even in hero ghost mode, the primary CTA stays filled orange so it
   reads as the single clear action. */
.site-header:not(.is-scrolled) .contact-trigger--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bone);
}
.site-header:not(.is-scrolled) .contact-trigger--primary:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}

/* Popover — appears below the pill, anchored to its right edge. */
.contact-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 280px;
  padding: var(--space-3);
  background: rgba(10, 8, 7, 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(10, 8, 7, 0.55);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.contact-popover[hidden] { display: none !important; }
.contact-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.contact-popover__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 0 0 var(--space-3);
  padding: 0 4px;
}
.contact-popover__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--bone);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease);
}
.contact-popover__option:hover,
.contact-popover__option:focus-visible {
  background: rgba(244, 239, 229, 0.06);
  outline: none;
}
.contact-popover__option + .contact-popover__option { margin-top: 2px; }
.contact-popover__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(111, 224, 176, 0.12);
  color: var(--jungle-hi);
  flex-shrink: 0;
}
.contact-popover__icon svg { width: 18px; height: 18px; }
.contact-popover__option--whatsapp .contact-popover__icon {
  background: rgba(37, 211, 102, 0.15);
  color: var(--whatsapp-green);
}
.contact-popover__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-popover__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
}
.contact-popover__value {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On hero (ghost mode), the contact pill stays outline too. */
.site-header:not(.is-scrolled) .contact-trigger {
  border-color: rgba(244, 239, 229, 0.45);
  color: rgba(244, 239, 229, 0.88);
  background: transparent;
}

/* Narrow viewports — popover anchors to viewport edges so it doesn't
   overflow. On very small screens it becomes a full-width sheet. */
@media (max-width: 480px) {
  .contact-popover {
    right: auto;
    left: 50%;
    transform: translate(-50%, -4px);
    min-width: 0;
    width: calc(100vw - 24px);
    max-width: 320px;
  }
  .contact-popover.is-open {
    transform: translate(-50%, 0);
  }
}

/* ── Ghost mode on hero — while the header has no frost (user still
   on the hero), the three pills lose their chromed fills and become
   quiet outlines so the cinematic image breathes. Once the user
   scrolls and .is-scrolled fires, everything solidifies. */
.site-header:not(.is-scrolled) .lang-toggle,
.site-header:not(.is-scrolled) .menu-trigger {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: rgba(244, 239, 229, 0.45);
  color: rgba(244, 239, 229, 0.88);
}
.site-header:not(.is-scrolled) .lang-toggle__btn.is-active {
  color: var(--bone);
}
.site-header:not(.is-scrolled) .menu-trigger:hover,
.site-header:not(.is-scrolled) .menu-trigger:focus-visible {
  border-color: var(--bone);
  color: var(--bone);
  background: transparent;
}
.site-header:not(.is-scrolled) .site-header__actions .pill-cta {
  background: transparent;
  border-color: rgba(244, 239, 229, 0.55);
  color: var(--bone);
}
.site-header:not(.is-scrolled) .site-header__actions .pill-cta:hover {
  background: rgba(244, 239, 229, 0.08);
  border-color: var(--bone);
  color: var(--bone);
}
/* Smooth the transition when frost snaps on/off on scroll. */
.lang-toggle,
.menu-trigger,
.site-header__actions .pill-cta {
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    color 320ms var(--ease),
    backdrop-filter 320ms var(--ease);
}


/* Compact pills on narrow screens; stack stays vertical. */
@media (max-width: 640px) {
  .pill-cta {
    padding: 8px 16px;
    font-size: 11px;
  }
  .lang-toggle { font-size: 12px; }
}




/* ── 7 · HERO ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;         /* fallback */
  height: 100svh;
  background: var(--ink);
  overflow: hidden;
}

/* Layer 1 — video (shows poster = frame 0 until main.js calls .play()).
   The video plays clear from t=0 — no blurred "dawn" phase. Taglines
   read on top of the moving footage thanks to their text-shadow. The
   .is-video-in flag is kept so JS can still hook the moment the video
   becomes the protagonist (used elsewhere for vignette / chrome), but
   no filter swap happens here anymore. */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
  opacity: 1;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the visible crop to the bottom so the park / fountain never
     gets trimmed. When the viewport is wider than the video's 16:9
     aspect, the top sky crops instead. Transform-origin matches so the
     parallax zoom also expands away from the bottom edge, not towards it.
     Scale slightly above 1.0 so the blur filter on the wrapper doesn't
     expose bare edges at the viewport rim during the intro. */
  object-position: center bottom;
  transform: scale(1.12);
  transform-origin: center bottom;
}
.hero__video-fallback {
  width: 100%; height: 100%; object-fit: cover;
}

/* End-of-clip poster overlay. Sits inside .hero__video-wrap on top of the
   <video> so the parallax + crop + scale match the video exactly. Stays
   invisible while the video plays; the `.is-video-ending` state on the
   hero fades it in over 1.2s. JS keeps that state for ~3s total before
   adding `.is-video-resting` (which reveals the play button). The frame
   composition matches the poster the visitor saw on arrival, so the
   ending settles back to that reference image — visually adds 3 seconds
   of "video" without any video re-encoding. */
.hero__video-end-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.12);
  transform-origin: center bottom;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.is-video-ending .hero__video-end-poster {
  opacity: 1;
}

/* Layer 2 — vignette. Used to fade in at videoReveal but that
   created a "darkness valley" right when the user expected the video
   to brighten: the scrim halo was leaving (centre clearing) at the
   same moment the vignette was arriving (corners darkening). The
   handoff read as a discontinuous moment. Now the vignette is the
   permanent cinematic frame from page load — only the scrim halo
   transitions, and it goes one direction (out), so the reveal is a
   single continuous gesture. */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center 55%, transparent 45%, rgba(10,8,7,0.5) 100%);
  opacity: 1;
  will-change: transform;
}


/* ── Layer 3 — Logo (fast fade, zoom-to-corner) ──────────────────────────
   Lifecycle:
     1 · hidden   (`.wordmark`)
     2 · visible  (`.wordmark.is-visible`) — fast fade at full-page size
     3 · parked   (`.wordmark.is-parked`)  — JS applies translate+scale
   Positioned `fixed` so the post-park logo is pinned to the viewport and
   remains the site mark while the user scrolls.
   ───────────────────────────────────────────────────────────────────── */
.hero__wordmark {
  position: fixed;
  inset: 0;
  /* Above the site header (z-index 50) so the frosted backdrop doesn't
     muddy the parked logo when the user scrolls past the hero. */
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  pointer-events: none;        /* clickable only once parked */
  transform-origin: center center;
  will-change: transform, opacity;

  opacity: 0;
  /* Transform lives in a CSS custom property — JS sets `--park-transform`
     (or leaves it unset for the centred state). This is immune to anything
     that could clear an inline `style="transform:..."` attribute. */
  transform: var(--park-transform, none);

  /* Logo fade is a punchy ~0.7 s so it's fully readable before the park
     beat begins; the transform still uses 1.2 s for a smooth glide to
     the corner. */
  transition:
    opacity 0.7s var(--ease),
    transform 1.2s var(--ease);

  /* Logo fades in centred on the full viewport, then parks top-left. */
  padding-inline: var(--gutter);
}
.wordmark.is-visible { opacity: 1; }
/* Once parked, opacity is locked at 1 — nothing can fade the logo back out.
   IMPORTANT: the container stays pointer-events:none (inherited from the
   base rule). Only the child <img> is clickable — otherwise the full-
   viewport fixed container would intercept every click on the page and
   route it to href="#top". */
.wordmark.is-parked  {
  opacity: 1 !important;
}
.wordmark__logo {
  pointer-events: auto;
}

/* Temporary flag main.js uses during a re-park so no transition plays. */
.wordmark.is-reparking { transition: none !important; }

.wordmark__logo {
  display: block;
  /* Hard-kill any default img chrome or box artefacts */
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  /* Lift off the hero video — drop-shadow respects alpha so only the
     logo glyphs get shadowed, never a bounding box. Three stacked
     shadows: a tight sharp one for edge definition, a mid blur for
     depth, and a wide diffuse one that carries the logo over any
     bright patch in the video. */
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));

  /* Width scales with the viewport; max-height is capped at ~55% of
     viewport height so the 3-word mantra column below always has
     room. At high browser zooms the viewport shrinks and this cap
     kicks in, preventing "Valoriza" from being clipped off-screen. */
  width: clamp(260px, 50vw, 640px);
  max-width: calc(100vw - var(--gutter) * 2);
  max-height: 55svh;
  height: auto;
  object-fit: contain;

  -webkit-user-drag: none;
  user-select: none;
}


/* Layer 6 — bottom dissolve */
.hero__bottom-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(10,8,7,0) 100%);
}

/* "Ver video" button — injected by main.js. Hidden until the hero
   video finishes its first run; then main.js pauses the clip on
   HERO_REST_FRAME and adds `.is-video-resting` to the hero, which
   reveals the button. Click → seek(0), play(), class removed. */
.hero__play-btn {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(96px, 14vh, 140px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bone, #f5f1e8);
  background: rgba(15, 14, 12, 0.55);
  border: 1px solid rgba(245, 241, 232, 0.28);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.hero__play-btn svg { flex: 0 0 auto; opacity: 0.95; }
.hero__play-btn:hover {
  background: rgba(15, 14, 12, 0.72);
  border-color: rgba(245, 241, 232, 0.5);
}
.is-video-resting .hero__play-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* ── 8 · Section stubs ───────────────────────────────────────────────── */
.section-stub {
  position: relative;
  min-height: 50vh;
  padding-block: var(--space-10);
  border-top: 1px solid var(--hairline);
}
.section-stub:first-of-type { border-top: 0; } /* hero is flush */
.section-stub .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.section-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  color: var(--bone-mut);
  max-width: 24ch;
}


/* ── 8.6 · Tipologías — four alternating magazine chapters ──────────
   Section opener + 4 "tipo-chapter" blocks. Each chapter is a 2-col
   grid (image + body) that flips sides on odd/even for editorial
   rhythm. The image is framed by a subtle jungle-wash gradient so it
   doesn't sit flat against the ink. Body column has an index number
   (01/02/03/04) set in big muted mono to mark the chapter, a tag
   eyebrow, a title in clamp(~36–64px), copy, and a 3-fact strip. */
.sec-tipologias {
  padding-block: clamp(64px, 7vw, 112px);
  border-top: 1px solid var(--hairline);
}
.sec-tipologias__intro {
  max-width: 860px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec-tipologias__lead {
  margin-top: var(--space-4);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--bone);
  max-width: 64ch;
}

.tipo-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: clamp(48px, 5.5vw, 88px);
  padding-inline: var(--gutter);
  max-width: var(--container-max);
  margin-inline: auto;
  border-top: 1px solid var(--hairline);
}
.tipo-chapter:last-of-type { border-bottom: 1px solid var(--hairline); }
@media (max-width: 960px) {
  .tipo-chapter {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-block: clamp(40px, 6vw, 64px);
  }
}
/* The body already has a .container class (for its inner max-width
   controls); neutralise the extra padding now that the chapter
   itself provides the gutter. */
.tipo-chapter > .tipo-chapter__body.container {
  padding-inline: 0;
}

/* Flip variant — image on the right, body on the left. DOM order
   stays "media → body" so screen-reader order remains natural. */
.tipo-chapter--flip .tipo-chapter__media { order: 2; }
.tipo-chapter--flip .tipo-chapter__body  { order: 1; }
@media (max-width: 960px) {
  .tipo-chapter--flip .tipo-chapter__media,
  .tipo-chapter--flip .tipo-chapter__body { order: 0; }
}

.tipo-chapter__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.tipo-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1200ms var(--ease), filter 900ms var(--ease);
  filter: brightness(0.95) saturate(1.03);
}
.tipo-chapter__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 15%, rgba(21, 77, 62, 0.2), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(10, 8, 7, 0.25));
  pointer-events: none;
}
.tipo-chapter:hover .tipo-chapter__media img,
.tipo-chapter__media:hover img,
.tipo-chapter__media:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1) saturate(1.1);
}
/* "Ver planos por piso →" link inside each tipo-chapter body. Sits
   below the facts list as a quiet editorial action. */
.tipo-chapter__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  text-decoration: none;
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(111, 224, 176, 0.35);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), gap var(--dur-micro) var(--ease);
}
.tipo-chapter__link:hover,
.tipo-chapter__link:focus-visible {
  color: var(--jungle-hi);
  border-bottom-color: var(--jungle-hi);
  gap: 12px;
}
.tipo-chapter__link svg {
  transition: transform var(--dur-micro) var(--ease);
}
.tipo-chapter__link:hover svg { transform: translateX(2px); }

/* Two-link row at the bottom of each tipología card: "Ver planos
   por piso" + "Ver disponibilidad". The second link uses brass to
   match the availability bucket cards on /disponibilidad and the
   landing pill — so the visitor sees a consistent gold accent
   anywhere availability is offered. */
.tipo-chapter__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-self: flex-start;
  margin-top: var(--space-2);
}
.tipo-chapter__links .tipo-chapter__link {
  margin-top: 0;
  align-self: auto;
}
.tipo-chapter__link--alt {
  color: var(--brass);
  border-bottom-color: rgba(176, 137, 104, 0.35);
}
.tipo-chapter__link--alt:hover,
.tipo-chapter__link--alt:focus-visible {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.tipo-chapter__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Let the `.container` class on this element handle horizontal
     gutter so the text never touches the viewport edge on mobile or
     the media column's edge on desktop. */
}

.tipo-chapter__index {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--bone-mut);
  opacity: 0.25;
  margin: 0 0 calc(var(--space-3) * -1);
}
.tipo-chapter__tag {
  color: var(--jungle-hi);
  margin: 0;
}
.tipo-chapter__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
  max-width: 18ch;
}
.tipo-chapter__body-text {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--bone);
  margin: 0;
  max-width: 48ch;
}
.tipo-chapter__body-text em {
  color: var(--jungle-hi);
  font-style: normal;
}

.tipo-chapter__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 480px) {
  .tipo-chapter__facts {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-4);
  }
}
.tipo-chapter__facts > div { display: flex; flex-direction: column; gap: 4px; }
.tipo-chapter__facts dt {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 0;
}
.tipo-chapter__facts dd {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}

/* Intro CTA — single "Ver brochure" pill below the section's
   opening paragraph, replacing the closing CTA block that used to
   sit after the last tipo-chapter. */
.sec-tipologias__intro-cta {
  margin-top: var(--space-4);
}


/* ── 8.65 · Recorrido Virtual — 5 tour cards grid ────────────────────
   One wide hero card (Zonas Comunes) + 4 regular cards in a 2×2
   grid beside it on desktop. On narrower viewports, the wide card
   spans the full width and the 4 others fall to 2-col, then 1 col.
   Each card is a link to its mirrored 3DVista tour; the thumbnail
   is framed by a play overlay that grows on hover. */
.sec-recorrido {
  padding-block: clamp(64px, 7vw, 112px);
  border-top: 1px solid var(--hairline);
}
.sec-recorrido__intro {
  max-width: 860px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-recorrido__lead {
  margin-top: var(--space-4);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--bone);
  max-width: 64ch;
}

.sec-recorrido__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1180px) {
  .sec-recorrido__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .sec-recorrido__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sec-recorrido__grid { grid-template-columns: 1fr; }
}

.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-micro) var(--ease);
}
.tour-card:hover { transform: translateY(-3px); }

.tour-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(244, 239, 229, 0.02);
  isolation: isolate;
}

.tour-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 900ms var(--ease), filter 500ms var(--ease);
  filter: brightness(0.92) saturate(1.02);
}
.tour-card:hover .tour-card__media img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.1);
}
.tour-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(10, 8, 7, 0.55), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(10, 8, 7, 0.35));
  pointer-events: none;
  z-index: 1;
}

.tour-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(244, 239, 229, 0.15);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(244, 239, 229, 0.35);
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.tour-card__play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;  /* optically centre the triangle glyph */
}
.tour-card:hover .tour-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: rgba(111, 224, 176, 0.18);
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
}

.tour-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tour-card__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.tour-card__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0;
}
.tour-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-mut);
  margin: 0;
}


/* ── 8.66 · Ubicación — aerial hero + POIs + 4 pillars + map ────────
   Three-part layout:
     · Aerial image with absolutely-positioned markers (percentage
       coordinates on --x / --y so the layer scales with the image)
     · 4-pillar strip (Conectividad · Deportes · Entretenimiento ·
       Negocios) — 4 cols desktop, 2×2 tablet, 1 col mobile
     · Google Maps iframe in a dark-filter wrapper so the live map
       lives inside the site's ink atmosphere without clashing.       */
.sec-ubicacion {
  padding-block: clamp(64px, 7vw, 112px);
  border-top: 1px solid var(--hairline);
}
.sec-ubicacion__intro {
  max-width: 860px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-ubicacion__lead {
  margin-top: var(--space-4);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--bone);
  max-width: 64ch;
}

/* ── Aerial with POI markers ─────────────────────────────────────── */
.sec-ubicacion__aerial {
  margin: 0 auto var(--space-8);
}
.aerial {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.aerial__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) saturate(1.05) contrast(1.02);
}

/* Toda la imagen aérea es un botón que abre el video del entorno —
   se renderiza encima de la imagen pero debajo de los marcadores POI.
   Cursor pointer + un play badge centrado para que sea visualmente
   claro que es clickeable. */
.aerial__cta {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--bone);
  font: inherit;
  transition: background-color 0.3s var(--ease);
}
.aerial__cta:hover,
.aerial__cta:focus-visible {
  background: rgba(10, 8, 7, 0.18);
  outline: none;
}
.aerial__cta-play {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(244, 239, 229, 0.92);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}
.aerial__cta-play svg { margin-left: 3px; }
.aerial__cta:hover .aerial__cta-play,
.aerial__cta:focus-visible .aerial__cta-play {
  transform: scale(1.06);
  background: var(--jungle-hi);
  color: var(--bone);
}
.aerial__cta-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 8px 14px;
  background: rgba(10, 8, 7, 0.55);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  .aerial__cta-label { display: none; }
  .aerial__cta-play { width: 48px; height: 48px; }
}

/* Markers se renderizan encima del botón — pero como son spans
   informativos sin acción propia, dejarles pointer-events:none hace
   que el click pase al botón aerial__cta de abajo. */
.aerial__marker {
  pointer-events: none;
}
/* Subtle top-to-bottom dark gradient so labels always have contrast */
.aerial::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 7, 0.15), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(10, 8, 7, 0.35), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.aerial__marker {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 2;
  pointer-events: none;
}
/* Dots removed — the label pills carry the location info on their own. */
.aerial__dot,
.aerial__dot--far { display: none; }
.aerial__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.06em;
  color: var(--bone);
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(10, 8, 7, 0.72);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(244, 239, 229, 0.12);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(10, 8, 7, 0.5);
}
/* Anchor marker — larger dot ringed in accent, brighter label. */
.aerial__marker--anchor .aerial__dot {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-color: var(--bone);
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 22px rgba(226, 90, 37, 0.7);
  animation: aerialPulse 2.4s ease-in-out infinite;
}
.aerial__marker--anchor .aerial__label {
  font-weight: 700;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(226, 90, 37, 0.5);
}
@keyframes aerialPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(226, 90, 37, 0.6); }
  50%      { box-shadow: 0 0 0 3px var(--accent), 0 0 32px rgba(226, 90, 37, 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .aerial__marker--anchor .aerial__dot { animation: none; }
}

/* Place-name caption sitting on the aerial — bold uppercase type in
   the bottom-left with its own dark gradient backdrop so it reads
   clearly on any part of the image. Sits above the POI markers in
   the stack. */
.aerial__place {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 60px 28px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(
    to top,
    rgba(10, 8, 7, 0.9) 0%,
    rgba(10, 8, 7, 0.55) 45%,
    transparent 100%
  );
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.aerial__place::before {
  /* Small jungle-green accent square anchoring the title — editorial
     masthead treatment. */
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 14px;
  background: var(--accent);
  transform: translateY(-4px);
}
@media (max-width: 640px) {
  .aerial__place { padding: 40px 16px 12px; letter-spacing: 0.08em; }
  .aerial__place::before { width: 7px; height: 7px; margin-right: 10px; }
}

/* Direction-arrow label — airport indicator, no dot, just a pill
   with an outbound arrow glyph. */
.aerial__label--arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aerial__marker--direction .aerial__dot { display: none; }

.aerial__caption {
  margin-top: var(--space-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-mut);
  text-align: center;
  font-family: var(--font-sans);
  max-width: 68ch;
  margin-inline: auto;
}

/* Hide non-anchor labels on very narrow viewports — they overlap */
@media (max-width: 560px) {
  .aerial__marker:not(.aerial__marker--anchor) .aerial__label { display: none; }
}

/* ── Four pillars strip ─────────────────────────────────────────── */
.sec-ubicacion__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 960px) {
  .sec-ubicacion__pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sec-ubicacion__pillars { grid-template-columns: 1fr; }
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(244, 239, 229, 0.015);
  transition:
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.pillar:hover {
  border-color: rgba(62, 166, 134, 0.35);
  transform: translateY(-2px);
  background: rgba(31, 107, 85, 0.06);
}
.pillar__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jungle-hi);
  margin-bottom: var(--space-2);
}
.pillar__icon svg { width: 28px; height: 28px; }
.pillar__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.pillar__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0;
}

/* ── Google Maps wrapper ────────────────────────────────────────── */
.sec-ubicacion__map-wrap {
  padding-top: var(--space-8);
}
.sec-ubicacion__map-eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--jungle-hi);
}
.sec-ubicacion__map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink);
  isolation: isolate;
}
.sec-ubicacion__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Gentle dark filter on the OSM tileset so the bright cartography
     sits inside the ink atmosphere without washing out. Applied to
     the iframe only — the toggle pill on top stays at native color. */
  filter: invert(0.88) hue-rotate(180deg) saturate(0.8) brightness(0.92);
}
@media (max-width: 640px) {
  .sec-ubicacion__map { aspect-ratio: 4 / 5; }
}

/* Interaction blocker — covers the iframe so accidental scrolls
   don't pan/zoom the map off Villa Olímpica. Hidden when the
   unlock checkbox is :checked. */
.map-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  cursor: help;
  pointer-events: auto;
}
.sec-ubicacion__map:has(input[data-map-unlock]:checked) .map-lock {
  display: none;
}

/* ── WTCP branded pin — sits at the exact centre of the visible
   bbox, which is calibrated to be the WTCP site. Three stacked
   pieces: pulsing halo, logo badge, stem dropping to the ground. */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-pin__halo {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 44px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(226, 90, 37, 0.55), transparent 70%);
  border-radius: 50%;
  animation: mapPinHalo 2.2s ease-in-out infinite;
}
.map-pin__badge {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bone);
  box-shadow:
    0 0 0 3px var(--accent),
    0 8px 28px rgba(10, 8, 7, 0.75),
    0 0 36px rgba(226, 90, 37, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: mapPinBob 3s ease-in-out infinite;
  padding: 8px;
  box-sizing: border-box;
}
.map-pin__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* logo renders white over the orange badge */
}
.map-pin__stem {
  width: 3px;
  height: 48px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(226, 90, 37, 0.75);
  margin-top: -3px;
}
/* Anchor dot at the base of the stem — the exact point on the map. */
.map-pin__anchor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bone);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 14px rgba(226, 90, 37, 0.9),
    0 4px 14px rgba(10, 8, 7, 0.6);
  margin-top: -3px;
}
@keyframes mapPinBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes mapPinHalo {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin__badge, .map-pin__halo { animation: none; }
}
@media (max-width: 640px) {
  .map-pin__badge { width: 76px; height: 76px; padding: 6px; }
  .map-pin__stem { height: 34px; width: 2.5px; }
  .map-pin__anchor { width: 12px; height: 12px; border-width: 2px; }
}

/* Toggle pill — BOTTOM-left corner. OSM puts its +/- zoom controls
   top-right, and the parked site logo (fixed, top-left of viewport)
   would otherwise intercept clicks if the toggle lived at top-left.
   Bottom-left is the only corner clear of both. */
.map-toggle {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 8, 7, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease);
}
.map-toggle:hover {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
}
.map-toggle input {
  /* Visually hidden but functional; the track/thumb is the UI. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.map-toggle__track {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.18);
  transition: background-color var(--dur-micro) var(--ease);
  flex-shrink: 0;
}
.map-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bone);
  transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.map-toggle input:checked ~ .map-toggle__track {
  background: rgba(111, 224, 176, 0.45);
}
.map-toggle input:checked ~ .map-toggle__track .map-toggle__thumb {
  transform: translateX(12px);
  background: var(--jungle-hi);
}

/* Toggle label switches between "locked" / "unlocked" copy. */
.map-toggle__text { display: inline-flex; }
.map-toggle__unlocked { display: none; }
.sec-ubicacion__map:has(input[data-map-unlock]:checked) .map-toggle__locked   { display: none; }
.sec-ubicacion__map:has(input[data-map-unlock]:checked) .map-toggle__unlocked { display: inline; }

@media (max-width: 640px) {
  .map-toggle {
    bottom: 8px;
    left: 8px;
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* ── Distance calculator form ─────────────────────────────────────
   Sits under the map. User types an origin address, submit opens
   Google Maps directions from that origin to WTCP in a new tab. */
.sec-ubicacion__distance {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(244, 239, 229, 0.015);
}
.distance-form__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-3);
}
.distance-form__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.distance-form__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--bone);
  background: rgba(10, 8, 7, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.distance-form__input::placeholder { color: var(--bone-mut); }
.distance-form__input:focus {
  outline: none;
  border-color: var(--jungle-hi);
  background: rgba(10, 8, 7, 0.7);
}
.distance-form__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
  flex-shrink: 0;
}
.distance-form__button:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}
.distance-form__hint {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--bone-mut);
  line-height: 1.5;
}
.sec-ubicacion__map-note {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bone-mut);
  text-align: center;
}
.sec-ubicacion__map-note a {
  color: var(--jungle-hi);
  margin-left: 4px;
  border-bottom: 1px solid rgba(111, 224, 176, 0.3);
  transition: border-color var(--dur-micro) var(--ease);
}
.sec-ubicacion__map-note a:hover { border-bottom-color: var(--jungle-hi); }


/* ── 8.7 · Aliados — Constructora + Comercialización ─────────────────
   Two premium partner cards. Equal weight, symmetrical layout so
   neither firm dominates the other. Stats strip at the bottom of
   each card gives scannable credentials without forcing the reader
   through the body copy.                                             */
.sec-aliados {
  padding-block: clamp(64px, 7vw, 112px);
  border-top: 1px solid var(--hairline);
}
.sec-aliados__head { margin-bottom: clamp(36px, 4.5vw, 64px); max-width: 72ch; }
.sec-aliados__lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--bone-mut);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.sec-aliados__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .sec-aliados__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* With an odd number of partner cards the 2-col grid leaves a lone trailing
   card. Center it at half width on desktop so it never sits awkwardly to the
   left. (Harmless no-op when the count is even.) */
@media (min-width: 901px) {
  .sec-aliados__grid > .partner-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc(50% - (var(--space-4) / 2));
  }
}

.partner-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 60% at 85% 15%, var(--jungle-soft), transparent 65%),
    rgba(244, 239, 229, 0.015);
  transition:
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.partner-card:hover {
  border-color: rgba(62, 166, 134, 0.35);
  transform: translateY(-2px);
}

.partner-card__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-2);
}

.partner-card__logo-wrap {
  height: 100px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
}
.partner-card__logo-wrap a {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-micro) var(--ease);
}
.partner-card__logo-wrap a:hover { opacity: 0.72; }
.partner-card__logo { display: block; height: auto; }
/* Sizes tuned so the three marks read at similar optical weight even
   though their native aspect ratios differ. A&C is a tall stacked
   mark (~1.8:1), Colliers is horizontal wordmark (~5.5:1 after the
   crop we made), AVAL is medium stacked (~1.7:1). */
.partner-card__logo--ayc {
  width: auto;
  height: 80px;
  filter: brightness(0) invert(0.94) sepia(0.08);
}
.partner-card__logo--colliers {
  width: auto;
  height: 70px;
}
.partner-card__logo--aval {
  width: auto;
  height: 78px;
}
.partner-card__logo--leed {
  width: auto;
  height: 88px;
}
/* Intervé: full-color horizontal lockup with tagline (~1.28:1). Treated
   to warm white like A&C so it reads on the dark card. */
.partner-card__logo--interve {
  width: auto;
  height: 108px;
  filter: brightness(0) invert(0.94) sepia(0.08);
}
/* Urbanic Group: the mark reads through subtle grey shading (a 3D fold), so
   a monochrome white filter flattens it to a solid block. Instead we show
   the logo in its native colors on a warm-white plate so the detail and the
   dark wordmark stay legible on the dark card. */
.partner-card__logo--urbanic {
  width: auto;
  height: 52px;
  max-width: 100%;
  /* The SVG is a white logo on a baked-in black background. screen blend
     drops the black against the dark card (black is the identity for
     screen) and keeps the white mark — no white chip needed. */
  mix-blend-mode: screen;
}

.partner-card__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-2);
  max-width: 18ch;
}
.partner-card__body {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
  color: var(--bone);
  margin: 0;
}
.partner-card__body strong {
  color: var(--jungle-hi);
  font-weight: 500;
}

/* Stats strip at the bottom of each card. Uses container queries so
   the layout responds to the CARD width, not the viewport. Typography
   is tightened so 4 stats stay on one line as long as possible; only
   collapses to 2×2 when the card is truly narrow. Never 3+1. */
.partner-card__stats {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 12px;
}
@container (max-width: 560px) {
  .partner-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    column-gap: var(--space-3);
  }
  /* Let labels wrap here; short stats are unaffected. */
  .partner-card__stat { white-space: normal; }
}
/* On a phone-width card the two-up cells fall to ~95px, but single-word
   labels like "Independiente"/"Supervisión" are ~119px and can't break — so
   they spilled ~8px past the viewport. Drop to one column so each stat gets
   the full card width. Tablet-width cards (>380px) keep the 2-up layout. */
@container (max-width: 380px) {
  .partner-card__stats { grid-template-columns: minmax(0, 1fr); }
}
.partner-card__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}
.partner-card__stat-n {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}
.partner-card__stat-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 0;
}

.partner-card__link {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--jungle-hi);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(111, 224, 176, 0.3);
  transition: border-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.partner-card__link:hover {
  border-color: var(--jungle-hi);
  opacity: 1;
}


/* ── 8.9 · Hablemos — equipo comercial Colliers ──────────────────────
   Editorial roster. Six portraits in a 3-column grid (2 on tablet,
   1 on mobile), grayscaled until hover. Contact icons are revealed
   in each card. The Colliers logo sits inline in the eyebrow so the
   "brokerage partner" framing is explicit without being loud.        */
.sec-hablemos {
  padding-block: clamp(64px, 7vw, 112px);
  border-top: 1px solid var(--hairline);
}

.sec-hablemos__head { margin-bottom: clamp(36px, 4.5vw, 64px); }

.sec-hablemos__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.sec-hablemos__sep { opacity: 0.5; }
.sec-hablemos__colliers {
  height: 56px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.92;
}

.sec-hablemos .sec__title {
  margin-bottom: var(--space-5);
  max-width: 16ch;
}
.sec-hablemos__body {
  max-width: 64ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--bone);
  margin-bottom: var(--space-3);
}
.sec-hablemos__body strong {
  color: var(--jungle-hi);
  font-weight: 500;
}

/* ── Team grid ─────────────────────────────────────────────────────── */
.sec-hablemos__team,
.sec-aliados__team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: clamp(36px, 4.5vw, 64px);
  /* Cap the grid width so portraits don't blow up on wide monitors.
     At max-width 900px with 3 cols + gap, each card ≈ 280px wide —
     feels like editorial masthead, not stock-photo gallery. */
  max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .sec-hablemos__team,
  .sec-aliados__team { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 640px; }
}
@media (max-width: 540px) {
  .sec-hablemos__team,
  .sec-aliados__team { grid-template-columns: 1fr; max-width: 380px; }
}

/* Equipo sub-block inside the Aliados section. Sits after the three
   partner cards with its own mini-header (eyebrow + Colliers logo +
   h3 + descriptive paragraph) before the team portrait grid. */
.sec-aliados__equipo {
  margin-top: clamp(64px, 7vw, 104px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--hairline);
}
.sec-aliados__equipo-head {
  max-width: 780px;
  margin: 0 auto var(--space-6);
  text-align: center;
}
.sec-aliados__equipo-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
}
.sec-aliados__equipo-sep { opacity: 0.5; }
.sec-aliados__equipo-colliers {
  height: 40px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.92;
}
.sec-aliados__equipo-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.sec-aliados__equipo-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 auto;
  max-width: 640px;
}
.sec-aliados__equipo-body strong {
  color: var(--jungle-hi);
  font-weight: 500;
}

.team-card { display: flex; flex-direction: column; gap: var(--space-3); }

.team-card__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(244, 239, 229, 0.02);
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.team-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(1) brightness(0.88) contrast(1.05);
  transition: filter 520ms var(--ease), transform 900ms var(--ease);
}
/* Soft jungle tint overlay that melts on hover, so the b/w photos
   read as part of the atmosphere rather than stock headshots. */
.team-card__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(21, 77, 62, 0.35), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(10, 8, 7, 0.45));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 420ms var(--ease);
  z-index: 1;
}
.team-card:hover .team-card__photo,
.team-card:focus-within .team-card__photo {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.02);
}
.team-card:hover .team-card__photo-wrap::after,
.team-card:focus-within .team-card__photo-wrap::after { opacity: 0.35; }

.team-card__meta { display: flex; flex-direction: column; gap: 4px; }
.team-card__name {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.team-card__role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 8px;
}
.team-card__contact {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.team-card__contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--bone-mut);
  transition:
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.team-card__contact a svg {
  width: 16px;
  height: 16px;
  display: block;
}
.team-card__contact a:hover {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background-color: rgba(111, 224, 176, 0.06);
  transform: translateY(-1px);
}

.sec-hablemos__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}


/* ── 9 · Footer ──────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  padding-block: var(--space-6);
  border-top: 1px solid var(--hairline);
  color: var(--bone);
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
/* Footer gradient wash — soft jungle→ink fade closes the page on
   our palette without the tropical-leaves image that used to sit
   behind this layer. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(10, 8, 7, 0.8) 40%, rgba(10, 8, 7, 0.88) 100%),
    linear-gradient(180deg, rgba(21, 77, 62, 0.25), rgba(10, 8, 7, 0.35));
  z-index: -1;
  pointer-events: none;
}
.site-footer__grid {
  display: grid;
  /* Contact column gets more room so "Edificio Cámara de Comercio de
     Pereira" stays on a single line. */
  grid-template-columns: 1fr 1.4fr 0.9fr;
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.site-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }

/* Footer brand — the full WTCP logo, scaled down, aligned to column left. */
.site-footer__logo {
  display: inline-block;
  width: 200px;
  margin-bottom: var(--space-2);
  transition: opacity var(--dur-micro) var(--ease);
}
.site-footer__logo:hover { opacity: 0.75; }
.site-footer__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .site-footer__logo { width: 170px; } }
.site-footer__tagline {
  max-width: 32ch;
  font-size: 14px;
  font-weight: 300;
  color: var(--bone-mut);
  line-height: 1.6;
}

.site-footer__address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 300;
  color: var(--bone);
  line-height: 1.55;
}
.site-footer__address-line {
  display: block;
}
/* Keep the full building name on one line. */
.site-footer__address-line--wide {
  white-space: nowrap;
}
.site-footer__address-link {
  margin-top: 8px;
  align-self: flex-start;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.site-footer__address-link + .site-footer__address-link { margin-top: 0; }
.site-footer__address-link:hover { border-color: var(--jungle-hi); color: var(--jungle-hi); }

/* Mobile: allow the long line to wrap so it doesn't overflow. */
@media (max-width: 768px) {
  .site-footer__address-line--wide { white-space: normal; }
}

.site-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--bone);
  transition:
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.site-footer__social a:hover {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  transform: translateY(-1px);
  background-color: rgba(111, 224, 176, 0.06);
}
.site-footer__social svg {
  width: 18px;
  height: 18px;
  display: block;
}

.site-footer__privacy {
  margin-top: var(--space-2);
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-mut);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.site-footer__privacy:hover { color: var(--brass); border-color: var(--brass); }

.site-footer__bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.site-footer__copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone-mut);
}


/* ── 9.3 · Menu panel — fullscreen side drawer ──────────────────────
   Calm, scholarly, library-not-cinema. Triggered by hovering (or
   clicking on touch / keyboard) the "Menú" pill in the header. A
   narrow panel slides in from the right, keeping most of the page
   visible behind it. Flat ink background (no tropical-leaf drama).
   Typography is modest — 18–22px Inter 300, generous vertical
   rhythm, mono numeric prefix. No stagger, no translate on hover:
   everything arrives with the panel, and hover is a colour shift. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;                  /* clicks pass through when closed */
}
.menu-overlay[hidden] { display: none !important; }

/* Light dimming of the page behind the panel — kept subtle so the
   user still perceives the site behind. */
.menu-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 7, 0.25);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms var(--ease);
}
.menu-overlay.is-open .menu-overlay__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Side panel — slides in from the right. */
.menu-overlay__frame {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(320px, 38vw, 520px);
  /* Tighter vertical padding so 13 top-level items + submenus fit
     inside a standard laptop viewport without scrolling. */
  padding-block: clamp(20px, 2.4vh, 32px) clamp(20px, 2.4vh, 32px);
  padding-inline: var(--space-6);
  background: var(--ink);
  border-left: 1px solid var(--hairline);
  transform: translateX(100%);
  transition: transform 420ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vh, 20px);
  pointer-events: auto;
  overflow-y: auto;
}
.menu-overlay.is-open .menu-overlay__frame {
  transform: translateX(0);
}

/* Head row — "Índice" eyebrow on the left, subtle Cerrar text on the
   right. No circular close button — plain "Close" text. */
.menu-overlay__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: clamp(10px, 1.5vh, 18px);
  border-bottom: 1px solid var(--hairline);
}
.menu-overlay__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 0;
}
.menu-overlay__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-mut);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease);
}
.menu-overlay__close svg { width: 14px; height: 14px; }
.menu-overlay__close:hover,
.menu-overlay__close:focus-visible { color: var(--bone); }

/* Nav — one calm column. */
.menu-overlay__nav { flex: 1 1 auto; }
.menu-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.menu-overlay__list .side-nav__item {
  margin: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
.menu-overlay__list .side-nav__link {
  /* Applies to both <a> (leaf items) and <button> (parents with
     children). The button reset below neutralises default browser
     styling so both tags render identically. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* Tight vertical padding so all 13 items + submenus fit inside
     laptop viewports (~768–900px) without scrolling. */
  padding: clamp(5px, 0.9vh, 9px) 0;
  margin: 0;
  width: 100%;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--bone);
  background: transparent;
  white-space: nowrap;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-micro) var(--ease), padding-left var(--dur-micro) var(--ease);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
/* Chevron column — sits before the label. For items that DO have
   children it shows the down-arrow; for leaf items the span is
   still rendered (empty) so every label lines up at the same x. */
.menu-overlay__list .side-nav__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(244, 239, 229, 0.55);
  transition: transform var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.menu-overlay__list .side-nav__chevron svg {
  width: 12px;
  height: 12px;
}
.menu-overlay__list .side-nav__item--has-children.is-expanded > .side-nav__link .side-nav__chevron {
  transform: rotate(180deg);
  color: var(--jungle-hi);
}
.menu-overlay__list .side-nav__link:hover .side-nav__chevron,
.menu-overlay__list .side-nav__link:focus-visible .side-nav__chevron {
  color: var(--jungle-hi);
}
/* Inline clarifier — sits on the same line as the label, separated
   by the natural gap. Short labels only (e.g. "Portal Aval Pay
   Center") — long explanations belong elsewhere, not in the menu. */
.menu-overlay__list .side-nav__note {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(244, 239, 229, 0.5);
  white-space: nowrap;
}
.menu-overlay__list .side-nav__link:hover .side-nav__note,
.menu-overlay__list .side-nav__link:focus-visible .side-nav__note {
  color: rgba(111, 224, 176, 0.75);
}
.menu-overlay__list .side-nav__item:last-child .side-nav__link {
  border-bottom: 0;
}
.menu-overlay__list .side-nav__link:hover,
.menu-overlay__list .side-nav__link:focus-visible {
  color: var(--jungle-hi);
  padding-left: 4px;
}

/* Submenu — collapsed by default; the parent link's click expands
   or collapses it. The chevron on the left of the label signals
   that children exist, and rotates when the group is open. */
.menu-overlay__list .side-nav__sub {
  list-style: none;
  margin: 0;
  /* Indent the whole sub-block to match the chevron column so the
     children's tick marks align under the parent label. */
  padding: 3px 0 8px 24px;
  display: none;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
}
.menu-overlay__list .side-nav__item--has-children.is-expanded > .side-nav__sub {
  display: flex;
}
.menu-overlay__list .side-nav__item--has-children.is-expanded > .side-nav__link {
  border-bottom: 0;
  padding-bottom: 5px;
}
.menu-overlay__list .side-nav__sub-item { margin: 0; }
.menu-overlay__list .side-nav__sub-link {
  display: inline-block;
  padding: 3px 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.6);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-micro) var(--ease), padding-left var(--dur-micro) var(--ease);
}
/* Small tick mark before each sub-link — reinforces the "nested"
   feel without committing to a vertical rail. */
.menu-overlay__list .side-nav__sub-link::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: translateY(-50%);
  transition: width var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.menu-overlay__list .side-nav__sub-link:hover,
.menu-overlay__list .side-nav__sub-link:focus-visible {
  color: var(--jungle-hi);
}
.menu-overlay__list .side-nav__sub-link:hover::before,
.menu-overlay__list .side-nav__sub-link:focus-visible::before {
  opacity: 0.9;
  width: 16px;
}
.menu-overlay__list .side-nav__item:last-child .side-nav__sub {
  border-bottom: 0;
}

/* Mobile: panel grows to full viewport since 40% is too narrow on phones. */
@media (max-width: 640px) {
  .menu-overlay__frame {
    width: 100%;
    border-left: 0;
  }
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}


/* ── 9.5 · AGYCON footer — standard branded strip across all sites ──
   Dark navy plate with copyright + "Developed by Agycon" + tagline.
   Same pattern as CALEM, Pagenik, Secludere, etc. Year is injected by
   main.js so the strip stays current without manual edits. */
.agycon-footer {
  background: #0B2545;
  color: #FFFFFF;
  padding: 10px 16px;
}
.agycon-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  text-align: center;
}
.agycon-footer__copy {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.agycon-footer__dot { color: rgba(255, 255, 255, 0.2); }
.agycon-footer__dot--sm { display: none; }
@media (min-width: 640px) {
  .agycon-footer__dot--sm { display: inline; }
  .agycon-footer__tagline { display: inline; }
}
.agycon-footer__tagline {
  display: none;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}
.agycon-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.6;
  transition: opacity var(--dur-micro) var(--ease);
}
.agycon-footer__link:hover { opacity: 1; }
.agycon-footer__logo {
  height: 24px;
  width: auto;
  /* brightness-200 equivalent — Tailwind's `brightness(2)` nearly whites
     out the Agycon mark so it reads on the navy plate. */
  filter: brightness(2);
}
.agycon-footer__domain {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}


/* ── 9.8 · Legal pages (privacy, terms) — editorial reading layout ──
   Dark ink base, generous line-height, narrow measure so prose reads
   like a legal doc, not a blog. Shares the atmosphere of the site
   but strips all the cinema — this is reading-only territory. */
body.legal-page { background: var(--ink); color: var(--bone); }

.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--space-3);
  background: rgba(10, 8, 7, 0.75);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.legal-header__logo { display: inline-block; width: 170px; }
.legal-header__logo img { display: block; width: 100%; height: auto; }
/* Right-side grouping for menu + volver on every subpage header. */
.legal-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 640px) {
  /* Hide the global menu trigger entirely on subpage headers in mobile.
     Subpages (disponibilidad, planes, brochure, tour, política) are
     focused, single-task views — adding a 14-item global nav drawer on
     top of "← Volver" creates choice paralysis on a small screen. The
     "Volver" button gives a single, clear escape back to the previous
     context (proyecto / landing); from there the visitor can navigate
     freely. */
  .legal-header__actions .menu-trigger { display: none; }
}

/* On desktop, hide the menu trigger for visitors who arrived from the
   landing — they're in commercial mode (scan inventory, book a visit)
   and don't want the editorial 14-item drawer. `← Volver` returns
   them to the landing flow. menu.js sets `body.from-landing` based on
   document.referrer. Visitors coming from proyecto.html keep the
   trigger because they're already exploring editorially. */
body.from-landing .legal-header__actions .menu-trigger { display: none; }
.legal-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.legal-header__back svg { width: 14px; height: 14px; }
.legal-header__back:hover,
.legal-header__back:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
}

.legal {
  padding-block: var(--space-8) var(--space-10);
}
.legal__article {
  max-width: 760px;
  margin: 0 auto;
}

.legal__head {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--hairline);
}
.legal__head .eyebrow {
  color: var(--jungle-hi);
  margin-bottom: var(--space-3);
}
.legal__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.legal__subtitle {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--bone-mut);
  margin: 0 0 var(--space-3);
}
.legal__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bone-mut);
  margin: 0;
}

.legal__section {
  margin-bottom: var(--space-6);
}
.legal__h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.legal__section p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.legal__section p strong { color: var(--bone); font-weight: 500; }
.legal__section em { color: var(--bone-mut); font-style: italic; }
.legal__section a {
  color: var(--jungle-hi);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 224, 176, 0.3);
  transition: border-color var(--dur-micro) var(--ease);
}
.legal__section a:hover { border-bottom-color: var(--jungle-hi); }

.legal__list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone);
}
.legal__list li { margin-bottom: var(--space-2); }
.legal__list--plain { list-style: none; padding-left: 0; }
.legal__list--plain li {
  padding-left: var(--space-3);
  position: relative;
}
.legal__list--plain li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--jungle-hi);
  font-weight: 700;
}

.legal__callout {
  padding: var(--space-4);
  border-left: 2px solid var(--jungle-hi);
  background: rgba(21, 77, 62, 0.12);
  margin-block: var(--space-3);
}
.legal__callout-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 8px;
}
.legal__callout-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bone-mut) !important;
  margin: 0 !important;
}

.legal__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.015);
  margin-block: var(--space-3);
}
.legal__contact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .legal__contact-row { grid-template-columns: 1fr; gap: 2px; }
}
.legal__contact-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jungle-hi);
}

.legal__download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.legal__download svg { width: 16px; height: 16px; }
.legal__download:hover,
.legal__download:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background-color: rgba(111, 224, 176, 0.06);
}


/* ── 9.95 · Tour wrapper page — 3DVista iframe with site chrome ────
   Full-viewport iframe with a compact header on top (logo + "Volver"
   back to #recorrido). Keeps the user inside the site even while
   they're in the 360° tour, and gives them a one-click escape. */
.tour-page {
  background: var(--ink);
  overflow: hidden;
  height: 100vh;
}
.tour-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Very compact padding so the tour viewport gets the rest. */
  padding-block: 10px;
}
.tour-header .legal-header__inner {
  gap: var(--space-3);
}
/* DEPRECATED note (the floating .tour__back was overlapping the
   tour iframe controls; reverted to the in-header Volver button
   styled as an accent pill, ordered to the right of Menú). */
/* Old comment retained for context:
   Hide the in-header Volver button — the floating .tour__back is
   more prominent and always-visible. Keep the logo + title for
   branding. Reserve space on the right so the floating button has
   room to breathe. */
/* In-header Volver — restored, styled as an accent pill, and
   ordered to the right of Menú so the exit affordance reads as a
   stronger CTA (the floating .tour__back is now hidden — see below). */
.tour-header .legal-header__back {
  order: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bone);
  box-shadow: 0 6px 20px rgba(226, 90, 37, 0.35);
}
.tour-header .legal-header__back:hover,
.tour-header .legal-header__back:focus-visible {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bone);
}
/* Hide the floating Volver — its previous purpose was a high-contrast
   exit, now served by the in-header accent pill. */
.tour__back { display: none !important; }
/* Override: in tour context the wrapper logo is small to give the
   360° viewer maximum vertical real estate. */
.tour-header .legal-header__logo {
  width: 96px;
}
@media (max-width: 640px) {
  .tour-header { padding-block: 6px; }
  .tour-header .legal-header__logo { width: 72px; }
}
.tour-header__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.tour-header__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.tour-header__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--bone);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 640px) {
  .tour-header__meta { display: none; }
}

.tour {
  position: relative;
  width: 100vw;
  /* Header height: ~10px pad top + ~72px logo + ~10px pad bottom + 1px border ≈ 93px.
     Use safe svh so iOS bottom chrome doesn't clip the tour. */
  height: calc(100svh - 95px);
  overflow: hidden;
}
@media (max-width: 640px) {
  .tour { height: calc(100svh - 70px); }
}
.tour__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ink);
}
/* Floating back button — fixed top-right of the viewport, above
   everything (iframe, hint, even the tour header). Always visible
   inside a tour so the user has a one-click escape to #recorrido. */
.tour__back {
  position: fixed;
  /* Float just below the header strip — was at top:16px which sat
     directly on top of the in-header Menú button. The floating one
     is the canonical exit during the tour, so it stays prominent
     but no longer occludes navigation. */
  top: 80px;
  right: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  border: 2px solid var(--bone);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--accent),
    0 6px 20px rgba(10, 8, 7, 0.6),
    0 0 24px rgba(226, 90, 37, 0.45);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.tour__back:hover,
.tour__back:focus-visible {
  background: var(--accent-hi);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px var(--accent-hi),
    0 8px 28px rgba(10, 8, 7, 0.7),
    0 0 36px rgba(226, 90, 37, 0.6);
}
@media (max-width: 640px) {
  .tour__back {
    top: 10px;
    right: 10px;
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

.tour__fallback {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(244, 239, 229, 0.55);
  pointer-events: none;
}
.tour__fallback a {
  color: var(--jungle-hi);
  margin-left: 6px;
  border-bottom: 1px solid rgba(111, 224, 176, 0.4);
  pointer-events: auto;
}
.tour__fallback a:hover { border-bottom-color: var(--jungle-hi); }


/* ── 9.9 · Availability page — VIKA / r3altor iframe embed ──────────
   Full-bleed iframe container with a narrow editorial header above.
   iframe takes 100vw and a comfortable height — resizes responsive. */
.availability {
  padding-block: var(--space-6) var(--space-8);
}
.availability__head {
  max-width: 760px;
  margin-bottom: var(--space-5);
}
.availability__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: var(--space-3) 0 var(--space-3);
}
.availability__lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--bone);
  max-width: 64ch;
  margin: 0;
}
/* ── Live availability grid (disponibilidad.html) ─────────────────
   Replaces the old r3altor.co iframe. Reads from the Supabase edge
   function `inventory-status`, which returns 4 standard buckets
   (apartasuite/oficina/consultorio/local) plus 2 "consulta privada"
   buckets (oficina_premium, consultorio_especializado). Cero precios
   anywhere — the section never shows COP figures, by design. */
.availability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-3) var(--space-6);
}
@media (max-width: 900px) {
  .availability-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The gated-state CTA is a global .pill-cta (white-space: nowrap). Inside
   this centered gated box its text ("Hablar con el equipo comercial") is
   wider than a 360px viewport, so let THIS instance wrap instead of forcing
   the column open and overflowing the page. */
.availability-gated .pill-cta {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* Skeleton placeholder shown while inventory.js fetches — four
   shimmer blocks that match the rough shape of the bucket cards. */
.availability-skeleton {
  display: contents;
}
.availability-skeleton span {
  display: block;
  height: 220px;
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(244,239,229,0.04) 8%, rgba(244,239,229,0.08) 18%, rgba(244,239,229,0.04) 33%);
  background-size: 200% 100%;
  animation: availability-shimmer 1.6s linear infinite;
}
@keyframes availability-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.availability-bucket {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: rgba(244, 239, 229, 0.02);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.availability-bucket--premium {
  border-color: rgba(176, 137, 104, 0.35);
  background:
    linear-gradient(160deg, rgba(176, 137, 104, 0.06) 0%, rgba(244, 239, 229, 0.02) 60%);
}

.availability-bucket__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.availability-bucket__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
  line-height: 1.2;
}
.availability-bucket__counts {
  font-size: 14px;
  color: var(--bone-mut);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.availability-bucket__counts strong {
  color: var(--brass);
  font-weight: 500;
  font-size: 16px;
}
.availability-bucket__range {
  font-size: 12px;
  color: var(--bone-mut);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.availability-bucket__hint {
  font-size: 12px;
  color: rgba(176, 137, 104, 0.85);
  margin: 0;
  font-style: italic;
}
.availability-bucket__empty {
  font-size: 13px;
  color: var(--bone-mut);
  font-style: italic;
  margin: var(--space-2) 0;
}

.availability-units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.availability-unit {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 239, 229, 0.06);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.availability-unit:last-child { border-bottom: none; }
.availability-unit__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.availability-unit__floor {
  color: var(--bone-mut);
  font-size: 13px;
}
.availability-unit__area {
  color: var(--brass);
  text-align: right;
  font-weight: 500;
}

/* Fallback when the toggle is OFF — same container, just a soft
   message + CTA so the page never feels broken to the visitor. */
.availability-gated {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: var(--space-4);
  text-align: center;
  background: rgba(244, 239, 229, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.availability-gated__msg {
  max-width: 56ch;
  color: var(--bone-mut);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* CTA strip below the grid — surfaces the commercial team since
   prices and reservation are never shown inline. */
.availability-cta {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-5);
  margin-top: var(--space-4);
}
.availability-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.availability-cta__lead {
  max-width: 60ch;
  color: var(--bone-mut);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  margin: 0;
}
.availability-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ── Availability chip on planes.html ──────────────────────────
   Slim band right under the hero, shows live count for the active
   tipología. Hidden by JS when toggle is off, count is zero, or
   tipología has no buckets (sotanos). */
.planes-availability {
  padding-block: var(--space-3) 0;
}
.planes-availability__inner {
  display: flex;
  justify-content: flex-start;
}
.planes-availability-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 18px;
  border: 1px solid rgba(176, 137, 104, 0.35);
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(176, 137, 104, 0.10), rgba(244, 239, 229, 0.02));
  font-size: 14px;
  color: var(--bone);
}
.planes-availability-chip__count {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.planes-availability-chip__label {
  color: var(--bone-mut);
}
.planes-availability-chip__cta {
  margin-left: var(--space-2);
  color: var(--jungle-hi);
  border-bottom: 1px solid rgba(111, 224, 176, 0.3);
  padding-bottom: 1px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.planes-availability-chip__cta:hover { border-bottom-color: var(--jungle-hi); }

/* Landing hero pill — sits next to the existing Avance pill in
   .landing-hero__ctas. Always-visible entry point to /disponibilidad.
   When the toggle is on AND there's at least one available unit, a
   secondary span shows the live count. */
.landing-disponibilidad-link__count {
  margin-left: 6px;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.01em;
}


/* ── 9.97 · AI chat widget ──────────────────────────────────────
   Floating trigger bottom-right → draggable/resizable modal that
   streams responses from cityindex.appagy.com/api/chat with
   context=wtcp. Memory persists in localStorage. */

/* IA pill — lives inside the header actions row next to Hablemos.
   Ghost outline with a subtle pulsing dot so it reads as "active
   assistant", but stays visually secondary to the orange CTA. */
.ai-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  background: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1.5px solid var(--jungle-hi);
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
/* Hover tooltip — appears below the IA pill so the visitor knows
   what clicking does before they open the chat. Uses the element's
   own data-tooltip attribute so the text stays i18n-friendly. */
.ai-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  max-width: 260px;
  width: max-content;
  padding: 10px 14px;
  background: rgba(10, 8, 7, 0.94);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
  z-index: 200;
}
.ai-trigger:hover::after,
.ai-trigger:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.ai-trigger:not([data-tooltip])::after { content: none; }
.ai-trigger:hover,
.ai-trigger:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.12);
}
.ai-trigger svg {
  color: var(--jungle-hi);
  animation: aiSpin 6s linear infinite;
}
@keyframes aiSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-trigger svg { animation: none; }
}
/* Apply same geometry as the other header pills. */
.site-header__actions .ai-trigger {
  height: 36px;
  padding: 0 16px;
  box-sizing: border-box;
}
/* Ghost mode on hero — keep green visible on dark hero */
.site-header:not(.is-scrolled) .ai-trigger {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background: transparent;
}

/* Chat modal — draggable/resizable floating window. */
.ai-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 95;
  width: 380px;
  height: 560px;
  min-width: 320px;
  min-height: 420px;
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  display: flex;
  flex-direction: column;
  background: rgba(10, 8, 7, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 8, 7, 0.7);
  overflow: hidden;
  isolation: isolate;
  /* Transform origin bottom-right so the open animation pops from
     where the trigger button was. */
  transform-origin: bottom right;
  animation: aiOpen 280ms var(--ease);
}
.ai-chat[hidden] { display: none !important; }
@keyframes aiOpen {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header — draggable. */
.ai-chat__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(226, 90, 37, 0.12);
  border-bottom: 1px solid var(--hairline);
  cursor: move;
  user-select: none;
}
.ai-chat__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ai-chat__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jungle-hi);
  box-shadow: 0 0 8px var(--jungle-hi);
  flex-shrink: 0;
  animation: aiPulseDot 2s ease-in-out infinite;
}
@keyframes aiPulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.ai-chat__title-main {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bone);
  margin: 0;
}
.ai-chat__title-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 2px 0 0;
}
.ai-chat__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ai-chat__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--bone-mut);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.ai-chat__action:hover {
  background: rgba(244, 239, 229, 0.08);
  color: var(--bone);
}

/* Message list — scrollable. */
.ai-chat__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.ai-chat__body::-webkit-scrollbar { width: 6px; }
.ai-chat__body::-webkit-scrollbar-thumb {
  background: rgba(244, 239, 229, 0.12);
  border-radius: 3px;
}

.ai-message {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bone);
  word-wrap: break-word;
}
.ai-message p { margin: 0 0 8px; }
.ai-message p:last-child { margin-bottom: 0; }
.ai-message ul { margin: 4px 0 8px; padding-left: 18px; }
.ai-message li { margin-bottom: 2px; }
.ai-message a {
  color: var(--jungle-hi);
  border-bottom: 1px solid rgba(111, 224, 176, 0.3);
}
.ai-message a:hover { border-color: var(--jungle-hi); }
.ai-message strong { color: var(--bone); font-weight: 600; }
.ai-message code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(244, 239, 229, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

.ai-message--bot {
  align-self: flex-start;
  background: rgba(244, 239, 229, 0.04);
  border: 1px solid var(--hairline);
}
.ai-message--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--bone);
  border: 1px solid var(--accent);
}
.ai-message--user a,
.ai-message--user strong { color: var(--bone); }

/* "Typing" indicator — three dots bouncing */
.ai-message--typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 14px;
}
.ai-message--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bone-mut);
  animation: aiTyping 1.4s ease-in-out infinite;
}
.ai-message--typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-message--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Suggestion chips — only shown before first user message. */
.ai-chat__suggestions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.ai-chat__suggestions.is-hidden { display: none; }
.ai-chat__suggestions button {
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bone);
  background: rgba(244, 239, 229, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.ai-chat__suggestions button:hover {
  background: rgba(111, 224, 176, 0.12);
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
}

/* Input form */
.ai-chat__form {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  background: rgba(10, 8, 7, 0.5);
}
.ai-chat__input {
  flex: 1 1 auto;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bone);
  background: rgba(10, 8, 7, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
  min-width: 0;
}
.ai-chat__input::placeholder { color: rgba(244, 239, 229, 0.4); }
.ai-chat__input:focus {
  outline: none;
  border-color: var(--jungle-hi);
  background: rgba(10, 8, 7, 0.72);
}
.ai-chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--accent);
  color: var(--bone);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.ai-chat__send:hover { background: var(--accent-hi); }
.ai-chat__send:disabled {
  background: rgba(244, 239, 229, 0.12);
  cursor: not-allowed;
}

/* Resize handle (bottom-right corner) */
.ai-chat__resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  color: var(--bone-mut);
  opacity: 0.4;
  z-index: 3;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2px;
  transition: opacity var(--dur-micro) var(--ease);
}
.ai-chat__resize:hover { opacity: 0.8; }

/* Mobile: take over most of the viewport as a bottom sheet. */
@media (max-width: 640px) {
  .ai-chat {
    width: calc(100vw - 16px);
    height: calc(100svh - 60px);
    right: 8px;
    bottom: 8px;
    min-width: 0;
    min-height: 0;
  }
  .ai-chat__resize { display: none; }
}


/* ── 10 · Intro skip (session seen / reduced motion / scroll-to-skip) ──
   When main.js adds `.intro-instant` to <html>, every transition used by
   the intro collapses to zero.                                           */
.intro-instant .site-header,
.intro-instant .hero__video-wrap,
.intro-instant .hero__vignette,
.intro-instant .hero__wordmark {
  transition: none !important;
}


/* ── 11 · Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  /* Collapse all intro transitions */
  .site-header,
  .hero__video-wrap,
  .hero__vignette,
  .hero__wordmark {
    transition-duration: 0s !important;
  }

  html { scroll-behavior: auto; }
}


/* ═════════════════════════════════════════════════════════════════════
   Intro taglines — three lines move through three states:
     · huge  : centre of the right half, scale 2, spotlight moment
     · stack : centre of the right half, scale 1, stacked in its own slot
     · edge  : right edge, scale 0.7, final compact
   main.js sets [data-state] on each line at the right moments; the
   transitions below handle the visuals.
   ═════════════════════════════════════════════════════════════════════ */
/* Intro statement — three monumental thin declarations stacked
   vertically, each fading in sequentially (~1 s apart) and persisting
   on screen until the whole block fades out as the mantra row
   appears at the parked-logo anchor. */
.hero__intro-statement {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  /* Asymmetric horizontal padding pushes the centred phrase ~13vw
     right of the viewport centre, so it doesn't sit too close to the
     full-size hero logo during the intro. */
  padding: var(--space-4) calc(var(--gutter) + 8px);
  padding-left: calc(var(--gutter) + 8px + 13vw);
  pointer-events: none;
}
/* Whole block fade-out — used at video-reveal time so the three
   phrases dissolve together while the mantra fades in on the left. */
.hero__intro-statement.is-out .hero__intro-phrase {
  opacity: 0;
  transform: translateY(-6px);
}
.hero__intro-statement.is-past-hero {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.hero__intro-phrase {
  font-family: var(--font-sans);
  font-weight: 200;
  /* Constrained by BOTH width (vw) and height (svh) so the phrase
     stays sane at any browser zoom. The stack of three caps tighter
     than a single phrase so they all fit vertically. */
  font-size: clamp(28px, min(5.2vw, 9svh), 78px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
  max-width: min(18ch, calc(100vw - 480px));
  margin: 0;
  /* Strong shadow so the white type reads even against busy frames. */
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.7),
    0 0 4px rgba(0, 0, 0, 0.45);

  /* Default: hidden, slight upward offset for the rise-in. */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.hero__intro-phrase.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Targeted halo behind the taglines only — a soft radial gradient
   centered on the text region, transparent at the edges. The video
   footage stays at full brightness everywhere except behind the
   type, eliminating the "black valley" feel of a flat overlay while
   still giving the white phrases enough contrast to read. The halo
   fades out at video-reveal time so the hero settles cleanly into
   its cinematic state. */
.hero__intro-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(
    ellipse 55% 38% at 56% 50%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0)    78%
  );
  opacity: 1;
  pointer-events: none;
  transition: opacity 1s var(--ease);
}
.hero.is-video-in .hero__intro-scrim {
  opacity: 0;
}


/* Hero editorial mantra — horizontal row of the three short
   declarations. Fades in one word at a time after the video is
   revealed, then stays fixed (no rotation). Vertically aligned with
   the parked logo via JS. */
.hero__mantra {
  position: absolute;
  /* JS positions the column below the logo, centred on its X axis.
     These defaults cover the split-second before JS runs. */
  left: calc(var(--gutter) + 220px);
  top: 340px;
  z-index: 6;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  text-align: center;

  font-family: var(--font-sans);
  font-weight: 200;
  /* Constrained by BOTH width (vw) and available height (svh) so the
     3-word stack never exceeds the viewport at high browser zooms or
     short viewports. Each line ≤ ~10% of viewport height — 3 lines
     fit cleanly under the logo without clipping. */
  font-size: clamp(26px, min(5.2vw, 10svh), 78px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);

  /* Strong multi-layer shadow for contrast across any video frame. */
  text-shadow:
    0 2px 32px rgba(0, 0, 0, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.65),
    0 0 3px rgba(0, 0, 0, 0.55);

  transition: opacity 0.4s var(--ease);
}
/* Uniform dark halo behind the whole column so every word reads
   consistently regardless of what frame of the video is behind it
   (bright windows, cloudy sky, dark trees). */
.hero__mantra::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse 110% 92% at center center,
      rgba(10, 8, 7, 0.55) 0%,
      rgba(10, 8, 7, 0.3) 50%,
      transparent 85%);
  filter: blur(24px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.1s;
}
.hero__mantra.is-in::before { opacity: 1; }
.hero__mantra.is-past-hero { opacity: 0; }
.hero__mantra.is-past-hero::before { opacity: 0; }

/* Staggered reveal — each word fades up from below with a 450 ms gap
   so the three lines land top-to-bottom in sequence. */
.hero__mantra-word {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 450ms);
  /* Lift off the hero video — same treatment as the logo. */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.65),
    0 3px 10px rgba(0, 0, 0, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.5);
}
.hero__mantra.is-in .hero__mantra-word {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .hero__mantra {
    font-size: clamp(28px, 5.2vw, 64px);
  }
}
@media (max-width: 640px) {
  .hero__mantra {
    font-size: clamp(24px, 6vw, 44px);
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Mini header — compact "mini-me" logo + active section indicator.
   Takes over from the big parked hero logo once the user scrolls past
   the hero. Visually anchored inside the frosted chrome bar.
   ═════════════════════════════════════════════════════════════════════ */
.header-mini {
  position: fixed;
  top: 12px;
  left: var(--gutter);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), top 320ms var(--ease);
  will-change: opacity;
}
.header-mini.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Compact state nudges the mini-logo up so it stays vertically
   centred against the slimmer frost bar. */
.site-header.is-compact ~ .header-mini,
body:has(.site-header.is-compact) .header-mini { top: 8px; }
.header-mini-logo {
  display: block;
  width: 120px;
  flex-shrink: 0;
}
.header-mini-logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) { .header-mini-logo { width: 110px; } }
@media (max-width: 640px) {
  .header-mini { top: 8px; }
  .header-mini-logo { width: 96px; }
}

/* Legacy: the old standalone `.header-mini-logo.is-visible` selector —
   kept in case anything still toggles it directly. */
.header-mini-logo.is-visible { opacity: 1; }

/* When the user is past the hero, fade the big parked logo AND the
   tagline block out so they don't visually intersect the mini logo
   as the hero scrolls up. Selector specificity beats is-parked's
   `opacity: 1 !important`. */
.hero__wordmark.is-past-hero { opacity: 0 !important; }
.hero__intro-statement.is-past-hero {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════════
   Section primitives — shared across all content sections (2–11).
   ═════════════════════════════════════════════════════════════════════ */

/* Base section block */
.sec {
  position: relative;
  background: var(--ink);
  color: var(--bone);
}

/* Editorial section title — thin, massive, tight tracking */
.sec__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(40px, 5.5vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}
.sec__title--hero {
  font-size: clamp(56px, 9vw, 164px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

/* Dek — small all-caps subtitle under a section title */
.sec__dek {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
  margin: var(--space-4) 0 0;
}

/* Stat — reusable big-number block */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__n {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0;
}
.stat__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-mut);
  margin: 0;
}
/* Long label — shrinks the letter-spacing + font-size just enough
   so "Sótanos parqueadero" stays on one line without wrapping. */
.stat__label--nowrap {
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.14em;
}
@media (max-width: 640px) {
  .stat__label--nowrap {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   01 · El Proyecto
   ═════════════════════════════════════════════════════════════════════ */

/* El Proyecto sits on a faint jungle tint — warms up the post-hero
   fall-off and hints at the Eje Cafetero setting. */
.sec-proyecto {
  padding-top: 0;
  padding-bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% 20%, var(--jungle-soft), transparent 65%),
    radial-gradient(ellipse 70% 60% at 10% 90%, var(--jungle-soft), transparent 65%),
    var(--ink);
}

/* --- Manifesto — scroll-scrubbed globe→Pereira zoom ---------------
   Outer `__manifesto` is a tall scroll track; inner `__scrubstage`
   sticks to the viewport while the track is being scrolled. JS maps
   scroll progress 0→1 onto the video's currentTime so the zoom
   follows the scroll. 200vh gives the user comfortable room to scrub
   through the ~7s clip without feeling rushed. */
.sec-proyecto__manifesto {
  position: relative;
  /* Scroll track height. 180vh = ~1 extra viewport of scroll to
     traverse the whole zoom; tune up for slower scrub, down for
     faster. */
  height: 180vh;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sec-proyecto__scrubstage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sec-proyecto__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
  filter: brightness(0.92) saturate(1.05) contrast(1.03);
  pointer-events: none;
}
/* Diagonal darkening: strong at bottom-left (where the title lives),
   fading to transparent at the top-right (where the aerial shows the
   mountains, trees and the WTCP building). */
.sec-proyecto__scrubstage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top right,
      rgba(10, 8, 7, 0.82) 0%,
      rgba(10, 8, 7, 0.55) 28%,
      rgba(10, 8, 7, 0.22) 55%,
      transparent 72%);
  pointer-events: none;
}
/* Bottom dissolve into the next block. */
.sec-proyecto__scrubstage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 240px;
  background: linear-gradient(0deg, var(--ink) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.sec-proyecto__manifesto-inner {
  position: relative;
  z-index: 3;
  padding-block: var(--space-5) var(--space-4);
  /* Left-anchored, bottom-docked. Kept narrow so the title always
     wraps to new lines well before reaching the building on the
     right of the aerial. */
  max-width: min(680px, 52%);
}
.sec-proyecto__manifesto .sec__title--hero {
  margin-top: var(--space-3);
  max-width: 10ch;
  /* Narrower title — 3 lines of monumental thin Inter sits cleaner
     at bottom-left than 2 wide lines reaching across the frame. */
  font-size: clamp(44px, 6vw, 104px);
}

/* Full-width dek banner — one line at the very bottom of the
   manifesto, spanning edge to edge under the title column. */
.sec-proyecto__dek-banner {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-block: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  /* On narrow viewports text uses full width again and the dek
     returns to wrapping normally. */
  .sec-proyecto__manifesto-inner { max-width: 100%; }
  .sec-proyecto__scrubstage::before {
    background:
      linear-gradient(180deg,
        rgba(10, 8, 7, 0.2) 0%,
        rgba(10, 8, 7, 0.55) 100%);
  }
  .sec-proyecto__dek-banner {
    white-space: normal;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

/* --- Section opener — calm editorial header, reads as "reading mode"
     after the cinematic hero. Eyebrow + 2-line secondary title. --- */
.sec-proyecto__intro {
  padding-block: clamp(56px, 6vw, 96px) var(--space-5);
  max-width: 1200px;
}
.sec-proyecto__intro .eyebrow {
  margin-bottom: var(--space-3);
}
.sec-proyecto__intro .sec__title {
  max-width: 18ch;
}

/* --- Numbers strip — equal columns, centered content, vertical hairlines --- */
.sec-proyecto__numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}
.sec-proyecto__numbers .stat {
  position: relative;
  align-items: center;
  text-align: center;
  padding-inline: var(--space-3);
}
.sec-proyecto__numbers .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: var(--hairline);
}
@media (max-width: 900px) {
  .sec-proyecto__numbers { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .sec-proyecto__numbers .stat + .stat::before { display: none; }
}

/* --- Uses grid — sits on a deeper jungle slab with a warm sun-glow --- */
.sec-proyecto__uses {
  position: relative;
  padding-block: clamp(48px, 5vw, 80px) clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  background:
    /* Sun pool, top-right — warm yellow-green haze */
    radial-gradient(ellipse 60% 50% at 85% 15%, var(--sun-soft), transparent 65%),
    /* Jungle tint, overall */
    linear-gradient(180deg, rgba(45, 151, 119, 0.14), rgba(21, 77, 62, 0.09) 60%, transparent),
    var(--ink);
  overflow: hidden;
}
.sec-proyecto__uses > * { position: relative; z-index: 1; }

.uses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .uses-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

.use-card {
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(244, 239, 229, 0.015);
  /* Cards are <a> elements — reset anchor defaults. */
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.use-card:hover,
.use-card:focus-visible {
  border-color: rgba(62, 166, 134, 0.5);
  background: rgba(31, 107, 85, 0.07);
  transform: translateY(-2px);
}
.use-card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  opacity: 0.7;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.use-card:hover .use-card__cta,
.use-card:focus-visible .use-card__cta {
  opacity: 1;
  transform: translateX(2px);
}
.use-card__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-3);
}
.use-card__floors {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bone-mut);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.use-card__total {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.use-card__copy {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0;
  opacity: 0.85;
}

/* Ghost pill variant (secondary CTA) */
.pill-cta--ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone);
}
.pill-cta--ghost:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* Brochure pill — jungle-hi outline variant with open-book icon.
   Visually distinct from both the primary orange CTA and the plain
   bone ghost pill so the brochure action reads as "there's a
   document to open" instead of just another nav link. */
.pill-cta--brochure {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone);
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.pill-cta--brochure:hover,
.pill-cta--brochure:focus-visible {
  /* Match the ghost pill hover (border + text → accent) so "Ver
     brochure" reacts like "Tengo una pregunta" / "Disponibilidad". */
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.pill-cta--brochure svg { flex-shrink: 0; }

/* Landing CTA "Avance de obras" — rendered at runtime by
   landing-avance-link.js when the admin toggle is on AND there's at
   least one published Avance entry. The "última actualización" date
   slot is dimmer than the label so the pill still reads as a single
   action with a soft confidence cue. Hidden on phones < 480px because
   the label + date wraps and looks cluttered next to the other CTAs. */
.landing-avance-link {
  gap: 8px;
}
.landing-avance-link__date {
  font-weight: 400;
  color: rgba(244, 239, 229, 0.6);
  font-size: 0.85em;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .landing-avance-link__date { display: none; }
}

/* ── 9.96 · Sobre Pereira — editorial feature on the host city ─────
   Long-form section: intro + 4-up stat strip + four alternating
   editorial chapters + closing CTA to PereiraIndex. Matches the
   Tipologías rhythm (same .sec__title + eyebrow + facts list
   vocabulary) so the two sections read as a pair. */
.sec-pereira {
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(21, 77, 62, 0.1), transparent 55%),
    var(--ink);
}
.sec-pereira__intro {
  max-width: 880px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-pereira__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(244, 239, 229, 0.82);
  max-width: 720px;
  margin: var(--space-4) 0 0;
}

/* Editorial photo band — constrained width (source is 980×551, so
   full-bleed would soften it). Subtle shadow and rounded corners
   keep the editorial feel. Caption sits below in a small eyebrow. */
.sec-pereira__photo {
  margin-bottom: clamp(36px, 4.5vw, 64px);
  max-width: 1100px;
}
.sec-pereira__photo picture,
.sec-pereira__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(244, 239, 229, 0.05);
}
.sec-pereira__photo-caption {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 229, 0.55);
  margin: var(--space-2) 0 0;
  font-style: italic;
}

/* Stats strip — four numbers in a row, hairline separators on wide
   screens, wraps to two columns then one on small viewports. */
.sec-pereira__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
@media (max-width: 900px) {
  .sec-pereira__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sec-pereira__stats { grid-template-columns: 1fr; }
}
.pereira-stat {
  padding-inline: clamp(12px, 2vw, 24px);
  border-right: 1px solid var(--hairline);
}
.pereira-stat:last-child { border-right: 0; }
@media (max-width: 900px) {
  .pereira-stat:nth-child(2n) { border-right: 0; }
  .pereira-stat:nth-child(1),
  .pereira-stat:nth-child(2) {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline);
  }
  .pereira-stat:nth-child(3),
  .pereira-stat:nth-child(4) {
    padding-top: var(--space-3);
  }
}
@media (max-width: 520px) {
  .pereira-stat { border-right: 0; padding-block: var(--space-2); }
  .pereira-stat + .pereira-stat { border-top: 1px solid var(--hairline); border-bottom: 0; }
}
.pereira-stat__n {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 8px;
}
.pereira-stat__label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  margin: 0;
}

/* Chapters — editorial prose blocks. Text-only (no image column for
   now — the brochure and external photography aren't licensed for
   web); the visual rhythm comes from the alternating container
   alignment and the index number hanging at left. */
.pereira-chapter {
  padding-block: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--hairline);
}
.pereira-chapter:last-of-type { border-bottom: 0; }
.pereira-chapter__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  max-width: 1100px;
}
.pereira-chapter--flip .pereira-chapter__body {
  margin-left: auto;
}
@media (max-width: 720px) {
  .pereira-chapter__body { grid-template-columns: 1fr; gap: var(--space-2); }
}
.pereira-chapter__index {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(48px, 5vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--jungle-hi);
  margin: 0;
  opacity: 0.6;
}
.pereira-chapter__tag {
  margin-bottom: var(--space-2);
}
.pereira-chapter__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.pereira-chapter__body-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 var(--space-3);
  max-width: 640px;
}
.pereira-chapter__body-text em {
  font-style: normal;
  color: var(--jungle-hi);
}
.pereira-chapter__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  max-width: 640px;
}
@media (max-width: 640px) {
  .pereira-chapter__facts { grid-template-columns: 1fr; }
}
.pereira-chapter__facts div {
  margin: 0;
}
.pereira-chapter__facts dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  margin: 0 0 4px;
}
.pereira-chapter__facts dd {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bone);
  margin: 0;
}

/* Closing CTA — takes the reader to PereiraIndex (the sister city
   platform). Primary pill + explanation lede. */
.sec-pereira__cta {
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 720px;
  text-align: left;
}
.sec-pereira__cta-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 var(--space-3);
}
.sec-pereira__cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ── 9.97 · La Red WTC — WTCA network value proposition ───────────
   Editorial-plus-data-dense section. Intro → declaration block with
   WTCA member badge → "WTC effect" numbers (rent premiums +
   occupancy) → six city case studies → closing investor narrative
   with WTCA brochure download. */
.sec-red {
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 0% 30%, rgba(21, 77, 62, 0.12), transparent 55%),
    var(--ink);
}
.sec-red__intro {
  max-width: 880px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-red__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(244, 239, 229, 0.82);
  max-width: 720px;
  margin: var(--space-4) 0 0;
}

/* Shared chapter typography (tag/title/body used across all
   sub-blocks in this section). */
.sec-red__chapter-tag {
  margin-bottom: var(--space-2);
}
.sec-red__chapter-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.sec-red__chapter-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 var(--space-3);
  max-width: 680px;
}
.sec-red__chapter-body em {
  font-style: italic;
  color: var(--jungle-hi);
}
.sec-red__chapter-body strong {
  color: var(--bone);
  font-weight: 500;
}

/* Declaration block — text column + WTCA badge aside. */
.sec-red__declaration {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 820px) {
  .sec-red__declaration { grid-template-columns: 1fr; }
}
.sec-red__declaration-mark {
  display: flex;
  justify-content: center;
}
.sec-red__declaration-mark img {
  width: clamp(180px, 18vw, 260px);
  height: auto;
  /* Invert the black-on-white WTCA badge into bone-on-dark so it
     sits inside our editorial palette. */
  filter: invert(1) brightness(0.92);
  opacity: 0.88;
}

/* WTC effect — numbers section. Sticky section title then two
   metric blocks (premiums, occupancy). */
.sec-red__effect {
  padding-block: clamp(64px, 8vw, 120px);
}
.sec-red__effect-head {
  margin-bottom: var(--space-6);
  max-width: 780px;
}
.sec-red__metric-block {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 820px;
}
.sec-red__metric-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--bone);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.sec-red__metric-n {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--jungle-hi);
  flex: 0 0 auto;
}
.sec-red__metric-list {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 820px) {
  .sec-red__metric-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sec-red__metric-list { grid-template-columns: 1fr; }
}
.sec-red__metric-list li {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) clamp(12px, 2vw, 20px);
  border-right: 1px solid var(--hairline);
}
.sec-red__metric-list li:last-child { border-right: 0; }
@media (max-width: 820px) {
  .sec-red__metric-list li:nth-child(2n) { border-right: 0; }
  .sec-red__metric-list li:nth-child(1),
  .sec-red__metric-list li:nth-child(2) {
    border-bottom: 1px solid var(--hairline);
  }
}
@media (max-width: 480px) {
  .sec-red__metric-list li { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sec-red__metric-list li:last-child { border-bottom: 0; }
}
.sec-red__metric-city {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  margin-bottom: 6px;
}
.sec-red__metric-value {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jungle-hi);
  /* Keep the number and its unit sign on a single visual line —
     at narrow column widths the "%" was wrapping below. */
  white-space: nowrap;
}
.sec-red__metric-note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.65);
  margin: var(--space-2) 0 0;
  max-width: 720px;
}

/* City cases — six short cards. */
.sec-red__cases {
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--hairline);
}
.sec-red__cases-head {
  margin-bottom: var(--space-6);
  max-width: 780px;
}
.sec-red__cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1000px) {
  .sec-red__cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sec-red__cases-grid { grid-template-columns: 1fr; }
}
.red-case {
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 239, 229, 0.08);
  border-radius: 12px;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.red-case:hover {
  border-color: rgba(111, 224, 176, 0.35);
  background: rgba(111, 224, 176, 0.04);
}
.red-case__city {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-2);
}
.red-case__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  color: var(--bone);
  margin: 0 0 var(--space-2);
}
.red-case__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.7);
  margin: 0;
}

/* Closing block — investor narrative + CTAs + source note. */
.sec-red__closing {
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--hairline);
  max-width: 860px;
}
.sec-red__closing-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.sec-red__source {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: rgba(244, 239, 229, 0.4);
  margin: var(--space-5) 0 0;
  font-style: italic;
  max-width: 680px;
}


/* ── 9.97 · Avance de obras — construction-progress timeline ──────
   Section 09. Vertical gold axis on the left with circular markers
   per entry, milestone cards to the right. Entries are loaded at
   runtime from Supabase by avance.js — section starts hidden, JS
   reveals it once it confirms `wtcp_section_settings.avance.is_visible`
   and there's data to render. Group headers (month · year) appear
   whenever the month changes between entries. */
.sec-avance {
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(196, 163, 90, 0.08), transparent 55%),
    var(--ink);
  position: relative;
}
.sec-avance__intro {
  max-width: 880px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-avance__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--bone-mut);
  margin: 0;
  max-width: 60ch;
}
.sec-avance__container { position: relative; }

/* Skeleton during fetch — three dim cards with a pulse. */
.sec-avance__skeleton {
  position: relative;
  padding-left: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sec-avance__skeleton-axis {
  position: absolute;
  left: clamp(14px, 1.4vw, 22px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(196, 163, 90, 0.25);
}
.sec-avance__skeleton-card {
  height: 220px;
  border-radius: 14px;
  background: rgba(244, 239, 229, 0.025);
  border: 1px solid var(--hairline);
  animation: avanceSkeletonPulse 1.6s ease-in-out infinite;
}
.sec-avance__skeleton-card:nth-child(2) { animation-delay: 0.2s; }
.sec-avance__skeleton-card:nth-child(3) { animation-delay: 0.4s; }
.sec-avance__skeleton-card:nth-child(4) { animation-delay: 0.6s; }
@keyframes avanceSkeletonPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* Empty state — section enabled but no entries yet. */
.sec-avance__empty {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone-mut);
  padding: 48px clamp(24px, 4vw, 48px);
  border: 1px dashed var(--hairline);
  border-radius: 14px;
  text-align: center;
  margin: 0;
}

/* Vertical timeline — gold gradient axis, ordered list of entries. */
.sec-avance__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.sec-avance__timeline::before {
  content: '';
  position: absolute;
  left: clamp(14px, 1.4vw, 22px);
  top: 28px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(196, 163, 90, 0.7) 0%,
    rgba(196, 163, 90, 0.45) 60%,
    rgba(196, 163, 90, 0)   100%
  );
  pointer-events: none;
}
.avance-group {
  position: relative;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.avance-group:last-child { margin-bottom: 0; }
.avance-group__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  padding-left: clamp(40px, 5vw, 72px);
  margin: 0 0 18px;
}
.avance-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.avance-entry {
  position: relative;
  padding-left: clamp(40px, 5vw, 72px);
}
.avance-entry__marker {
  position: absolute;
  left: clamp(8px, 0.85vw, 16px);
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(196, 163, 90, 0.85);
  box-shadow:
    0 0 0 4px rgba(196, 163, 90, 0.15),
    0 0 14px rgba(196, 163, 90, 0.35);
  z-index: 1;
}
.avance-entry__card {
  background: rgba(244, 239, 229, 0.025);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 32px);
  transition: border-color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.avance-entry__card:hover {
  border-color: rgba(196, 163, 90, 0.45);
  transform: translateY(-2px);
}
.avance-entry__date {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  background: rgba(196, 163, 90, 0.1);
  border: 1px solid rgba(196, 163, 90, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 14px;
}
.avance-entry__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 16px;
}
.avance-entry__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  margin-bottom: 16px;
}
.avance-entry__cover img,
.avance-entry__cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avance-entry__body {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--bone-mut);
}
.avance-entry__body p { margin: 0 0 12px; }
.avance-entry__body p:last-child { margin-bottom: 0; }

.avance-entry__gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.avance-entry__gallery-item {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--hairline);
  cursor: zoom-in;
}
.avance-entry__gallery-item img,
.avance-entry__gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.avance-entry__gallery-item:hover img,
.avance-entry__gallery-item:hover video {
  transform: scale(1.05);
}

@media (max-width: 720px) {
  .sec-avance__timeline::before,
  .sec-avance__skeleton-axis { left: 8px; }
  .avance-entry,
  .avance-group__heading,
  .sec-avance__skeleton { padding-left: 32px; }
  .avance-entry__marker { left: 2px; width: 12px; height: 12px; }
}


/* ── 9.98 · Medios — press archive + analysis digest ──────────────
   Two blocks: "Prensa" (external newspaper coverage as photo-first
   cards) and "Análisis WTCP" (a compact list of the project's own
   long-form editorial pieces). Each card/item is a link — the
   Medios is a digest, not a self-contained journal. */
.sec-media {
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 80% 100%, rgba(21, 77, 62, 0.1), transparent 55%),
    var(--ink);
}
.sec-media__intro {
  max-width: 880px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-media__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.82);
  max-width: 720px;
  margin: var(--space-4) 0 0;
}

.sec-media__block {
  margin-bottom: clamp(64px, 8vw, 120px);
}
.sec-media__block:last-child { margin-bottom: 0; }
.sec-media__block-head {
  margin-bottom: var(--space-5);
  max-width: 780px;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}
.sec-media__block-tag { margin-bottom: var(--space-2); }
.sec-media__block-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-2);
}
.sec-media__block-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.65);
  margin: var(--space-2) 0 0;
  max-width: 640px;
}

/* Press cards grid. */
.sec-media__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  /* Cada card a su altura natural — evita que un excerpt largo
     "estire" toda la fila y haga las cards más altas que el grid
     de Videos. Mismo comportamiento que .sec-video__grid. */
  align-items: start;
}
@media (max-width: 1000px) { .sec-media__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sec-media__grid { grid-template-columns: 1fr; } }

.media-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 239, 229, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--bone);
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.media-card:hover,
.media-card:focus-visible {
  border-color: rgba(111, 224, 176, 0.35);
  background: rgba(111, 224, 176, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
}
/* Variant sin link (no tiene external_url en la BD) — no clickeable,
   sin hover effect, cursor default. Generado por media.js cuando la
   entrada no tiene URL externa. */
.media-card--no-link {
  cursor: default;
}
.media-card--no-link:hover,
.media-card--no-link:focus-visible {
  border-color: rgba(244, 239, 229, 0.08);
  background: rgba(255, 255, 255, 0.025);
  transform: none;
  box-shadow: none;
}
.media-card--no-link:hover .media-card__media img {
  transform: none;
  filter: brightness(0.92);
}
.media-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.media-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
  filter: brightness(0.92);
}
.media-card:hover .media-card__media img {
  transform: scale(1.04);
  filter: brightness(1);
}
.media-card__body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.media-card__meta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 2px;
}
.media-card__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0;
}
.media-card__excerpt {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.7);
  margin: 4px 0 0;
  /* Soft clamp so long excerpts don't blow out card heights. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card__author {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: rgba(244, 239, 229, 0.45);
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-style: italic;
}

/* Opinion variant — no media, uses a large quote mark and different
   background so the card reads as a column, not a news piece. */
.media-card--opinion {
  background: rgba(111, 224, 176, 0.04);
  border-color: rgba(111, 224, 176, 0.18);
}
.media-card--opinion .media-card__body {
  padding-top: var(--space-4);
}
.media-card__quote-mark {
  font-family: serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 0.6;
  color: var(--jungle-hi);
  opacity: 0.5;
  margin: 0 0 var(--space-2);
  height: 28px;
}

/* Analysis compact list. */
.sec-media__analysis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.sec-media__analysis-list li {
  border-bottom: 1px solid var(--hairline);
}
.sec-media__analysis-list a {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  color: var(--bone);
  text-decoration: none;
  transition: padding var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.sec-media__analysis-list a:hover,
.sec-media__analysis-list a:focus-visible {
  color: var(--jungle-hi);
  padding-left: 6px;
}
@media (max-width: 720px) {
  .sec-media__analysis-list a {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
}
.media-analysis__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  opacity: 0.85;
}
.media-analysis__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
  color: inherit;
}
@media (max-width: 720px) {
  .media-analysis__tag { grid-column: 1; }
  .media-analysis__title { grid-column: 1 / -1; }
}
.media-analysis__arrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  color: inherit;
  opacity: 0.6;
  transition: transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.sec-media__analysis-list a:hover .media-analysis__arrow {
  opacity: 1;
  transform: translateX(4px);
}


/* LEED claim — quiet jungle-hi badge under the section title so the
   sustainability primacy is visible without shouting. */
.sec-proyecto__leed {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
  border: 1px solid rgba(111, 224, 176, 0.3);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.sec-proyecto__leed:hover,
.sec-proyecto__leed:focus-visible {
  background: rgba(111, 224, 176, 0.16);
  border-color: rgba(111, 224, 176, 0.55);
  transform: translateY(-1px);
  outline: none;
}
.sec-proyecto__leed-arrow {
  margin-left: 2px;
  font-size: 0.95em;
  color: var(--jungle-hi);
  transition: transform var(--dur-micro) var(--ease);
}
.sec-proyecto__leed:hover .sec-proyecto__leed-arrow {
  transform: translateX(3px);
}
.sec-proyecto__leed strong {
  color: var(--bone);
  font-weight: 600;
}
.sec-proyecto__leed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.15);
  border-radius: 999px;
  flex-shrink: 0;
}

/* Cross-section diagram — monumental image that explains how the
   45.000 m² distribute vertically. Subtle shadow + hairline border,
   caption below with the parqueaderos breakdown. */
.sec-proyecto__cross-section {
  margin: var(--space-6) auto 0;
  max-width: 1200px;
}
.sec-proyecto__cross-section img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(244, 239, 229, 0.06);
}
.sec-proyecto__cross-section-cap {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: rgba(244, 239, 229, 0.55);
  margin: var(--space-3) 0 0;
  text-align: center;
  font-style: italic;
}
.sec-proyecto__cross-section-cap strong {
  font-weight: 500;
  font-style: normal;
  color: rgba(244, 239, 229, 0.82);
}


/* Distances to major Colombian cities — grid-of-tiles pattern,
   hairline borders, hover turns the tile jungle-hi. */
.sec-ubicacion__distances {
  margin-top: clamp(48px, 6vw, 88px);
}
.sec-ubicacion__distances-eyebrow {
  color: var(--jungle-hi);
  margin-bottom: var(--space-3);
}
.sec-ubicacion__distances-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.82);
  max-width: 720px;
  margin: 0 0 var(--space-5);
}
.distances-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 1000px) { .distances-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .distances-grid { grid-template-columns: repeat(2, 1fr); } }
.distance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid var(--hairline);
  transition: background-color var(--dur-micro) var(--ease);
}
.distance:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .distance:nth-child(3n) { border-right: 0; }
  .distance:nth-child(-n+3) {
    border-bottom: 1px solid var(--hairline);
  }
}
@media (max-width: 520px) {
  .distance:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .distance:nth-child(2n) { border-right: 0; }
  .distance:nth-child(-n+4) {
    border-bottom: 1px solid var(--hairline);
  }
}
.distance:hover { background: rgba(111, 224, 176, 0.05); }
.distance__city {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
}
.distance__km {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-top: 2px;
}
.distance__time {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--jungle-hi);
}
.distance__note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 229, 0.5);
  margin-top: 2px;
  font-style: italic;
}


/* ── Atmósfera — full-bleed cinematic video band that sits between
   Tipologías and Parque as a narrative "visual rest". Replaces the
   old decorative leaf-band at that position. Autoplays muted when
   it enters the viewport (IntersectionObserver, same pattern as
   the parque video) and pauses when it scrolls out to save CPU. */
.sec-atmosfera {
  position: relative;
  width: 100%;
  /* Video is 1920×1080 (16:9). Match the section aspect to the
     video's so `object-fit: cover` shows the full frame without
     cropping top/bottom (previously max-height: 72vh was trimming
     the ground-level entrance where cars come in). */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sec-atmosfera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle top + bottom gradient so the video fades into the ink
   sections above and below instead of butting as a hard edge. */
.sec-atmosfera__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 7, 0.45) 0%, transparent 14%, transparent 86%, rgba(10, 8, 7, 0.55) 100%);
  pointer-events: none;
}

/* ── El Parque — cinematic video band + editorial story block ────
   Lives inside El Proyecto, between the context paragraph and the
   globe manifesto. Video is full-bleed (breaks out of the container)
   and loops silently. The body below is a regular container with a
   short editorial on the "Jóvenes que dan más" design competition. */
.sec-proyecto__parque {
  margin-block: clamp(48px, 7vw, 96px);
}
.sec-proyecto__parque-video-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
}
.sec-proyecto__parque-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle top→bottom darkening so the body copy below flows visually
   out of the video rather than competing with it. */
.sec-proyecto__parque-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 16, 13, 0.85) 100%);
  pointer-events: none;
}
.sec-proyecto__parque-body {
  padding-top: clamp(32px, 5vw, 72px);
  max-width: 920px;
}
.sec-proyecto__parque-eyebrow { color: var(--jungle-hi); }
.sec-proyecto__parque-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: var(--space-2) 0 var(--space-4);
}
.sec-proyecto__parque-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 var(--space-3);
  max-width: 780px;
}
.sec-proyecto__parque-text em {
  font-style: normal;
  color: var(--jungle-hi);
  font-weight: 500;
}
.sec-proyecto__parque-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 820px) {
  .sec-proyecto__parque-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sec-proyecto__parque-facts { grid-template-columns: 1fr; }
}
.sec-proyecto__parque-facts div { margin: 0; }
.sec-proyecto__parque-facts dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  margin: 0 0 4px;
}
.sec-proyecto__parque-facts dd {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bone);
  margin: 0;
}


/* ── 9.99 · En video — bonus audiovisual gallery ──────────────────
   Opt-in grid of 6 cards (poster + duration badge + title + short
   description). Clicking a card opens a full-viewport lightbox with
   an HTML5 <video controls>. Nothing autoplays on the page itself
   so the gallery is data-friendly and doesn't compete with the
   editorial flow. */
.sec-video {
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(21, 77, 62, 0.12), transparent 55%),
    var(--ink);
}
.sec-video__intro {
  max-width: 880px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-video__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.82);
  max-width: 720px;
  margin: var(--space-4) 0 0;
}
.sec-video__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  /* Cada card a su altura natural (no estira a la fila) — mismo
     comportamiento que .sec-media__grid. Evita que un desc o título
     largo en una card haga las demás de la fila tan altas. */
  align-items: start;
}
@media (max-width: 1000px) { .sec-video__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sec-video__grid { grid-template-columns: 1fr; } }

.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 239, 229, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  color: var(--bone);
  font: inherit;
  text-align: left;
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.video-card:hover,
.video-card:focus-visible {
  border-color: rgba(111, 224, 176, 0.35);
  background: rgba(111, 224, 176, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
}
.video-card__thumb {
  width: 100%;
  /* Altura fija por max-height — el thumb se center-crops via
     object-fit: cover. Esto asegura que el card sea compacto
     independientemente del aspect-ratio del poster source. */
  height: 130px;
  max-height: 130px;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
  filter: brightness(0.88);
}
.video-card:hover .video-card__thumb {
  transform: scale(1.03);
  filter: brightness(1);
}
.video-card--vertical .video-card__thumb {
  /* Misma altura compacta que las normales (130px). El reel se
     reproduce en formato vertical nativo en el lightbox. */
  height: 130px;
  max-height: 130px;
  object-position: center;
}

/* Duration pill on the thumbnail. */
.video-card__dur {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone);
  background: rgba(10, 16, 13, 0.78);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Big centred play icon — only on thumb, fades in on hover. */
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(244, 239, 229, 0.92);
  border-radius: 999px;
  opacity: 0.85;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease), background-color 220ms var(--ease);
  pointer-events: none;
}
.video-card__play svg { width: 18px; height: 18px; }
.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  background: var(--jungle-hi);
}
.video-card__play svg { margin-left: 3px; } /* optical balance for the triangle */
/* (kept for future) — used to size the play badge smaller on vertical reel cards */

/* Body de las video-cards alineado al ritmo tipográfico de las
   media-cards de Prensa — mismo padding generoso, mismo gap, misma
   escala de title/desc/eyebrow para que ambos bloques se lean como
   familia. El play button + duration siguen siendo overlays
   específicos de video. */
.video-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Padding ajustado para card compacta — antes era space-3/space-4
     (24/32px), ahora space-2/space-3 (12/16px). Combinado con desc
     oculta + thumb 16/5, la card tiene ~40% de la altura original. */
  padding: var(--space-2) var(--space-3) var(--space-3);
  flex: 1;
}
.video-card__lang {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 2px;
}
.video-card__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0;
}
/* Desc oculta en cards compactas — la información queda en el title
   y el data-video-desc del button (visible al abrir el lightbox). */
.video-card__desc {
  display: none;
}
.video-card__dur {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  font-size: 10px;
}
/* (vertical reel now uses 16/9 like siblings — see .video-card--vertical
   .video-card__thumb above; max-height override no longer needed) */

/* --- Lightbox -------------------------------------------------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 12, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 60px);
  box-sizing: border-box;
  animation: videoFadeIn 220ms var(--ease) both;
}
.video-lightbox[hidden] { display: none !important; }
@keyframes videoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.video-lightbox__stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.video-lightbox__video {
  width: 100%;
  max-height: calc(100vh - 180px);
  background: #000;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.video-lightbox__meta {
  text-align: center;
  color: var(--bone);
}
.video-lightbox__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--bone);
  margin: 0 0 4px;
}
.video-lightbox__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 239, 229, 0.6);
  margin: 0;
  max-width: 720px;
  margin-inline: auto;
}
.video-lightbox__close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  background: rgba(20, 28, 24, 0.7);
  border: 1px solid rgba(244, 239, 229, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.video-lightbox__close:hover,
.video-lightbox__close:focus-visible {
  background: rgba(226, 90, 37, 0.2);
  border-color: var(--accent);
}
body.video-lightbox-open { overflow: hidden; }


/* ─────────────────────────────────────────────────────────────────
   Press article lightbox — embed iframe del artículo en lugar de
   abrir target=_blank. Igual que video-lightbox pero con barra de
   chrome arriba (source + título + abrir-externo + cerrar) en
   lugar de overlay flotante.
   ───────────────────────────────────────────────────────────────── */
.press-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(8, 12, 20, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  animation: press-lightbox-in 200ms ease-out;
}
.press-lightbox[hidden] { display: none !important; }

@keyframes press-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.press-lightbox__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(11, 25, 45, 0.98), rgba(11, 25, 45, 0.92));
  border-bottom: 1px solid rgba(196, 163, 90, 0.25);
}
.press-lightbox__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.press-lightbox__source {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #C4A35A);
}
.press-lightbox__source:empty { display: none; }
.press-lightbox__title {
  font-size: 13px;
  color: rgba(244, 239, 229, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.press-lightbox__open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(196, 163, 90, 0.4);
  background: rgba(196, 163, 90, 0.12);
  border-radius: 8px;
  color: var(--gold, #C4A35A);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.press-lightbox__open:hover,
.press-lightbox__open:focus-visible {
  background: rgba(196, 163, 90, 0.22);
  border-color: rgba(196, 163, 90, 0.65);
  outline: none;
}
.press-lightbox__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.18);
  border-radius: 8px;
  color: rgba(244, 239, 229, 0.85);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.press-lightbox__close:hover,
.press-lightbox__close:focus-visible {
  background: rgba(244, 239, 229, 0.08);
  border-color: rgba(244, 239, 229, 0.35);
  outline: none;
}

.press-lightbox__body {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;          /* clave para que el iframe respete el flex parent en Safari */
  background: #fff;
}
.press-lightbox__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: #5b6577;
  font-size: 13px;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 1;
}
.press-lightbox__loading.is-hidden { opacity: 0; }
.press-lightbox__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(27, 54, 93, 0.18);
  border-top-color: #1B365D;
  animation: press-lightbox-spin 0.7s linear infinite;
}
@keyframes press-lightbox-spin {
  to { transform: rotate(360deg); }
}

.press-lightbox__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 600px) {
  .press-lightbox__bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .press-lightbox__open span { display: none; } /* solo ícono en mobile */
  .press-lightbox__open { padding: 7px 9px; }
  .press-lightbox__title {
    font-size: 12px;
    /* En móvil dejamos que se enrolle a 2 líneas para títulos largos. */
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

body.press-lightbox-open { overflow: hidden; }

/* Cuando los press cards son botones/links interactivos del
   lightbox, el cursor sigue siendo el pointer estándar. */
.media-card[data-press-open] { cursor: pointer; }


/* Brochure + planos access row inside El Proyecto — sits above
   the uses grid. */
.sec-proyecto__brochure-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}
@media (max-width: 640px) {
  .sec-proyecto__brochure-row { justify-content: center; }
}


/* ── 9.97 · Planes por piso — dedicated sub-page ───────────────────
   Long-form scroll page, one per tipología. Top strip: sticky tabs
   to jump between tipologías without going back to the home index.
   Body: big hero render → one floor per section, alternating
   image-left / image-right rhythm. All four tipologías share the
   same shell via planes.html?tipologia=<slug>. */
.planes-page {
  background: var(--ink);
}
.planes-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 12px;
  background: rgba(16, 24, 20, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(244, 239, 229, 0.08);
}
.planes-header .legal-header__logo { width: 96px; }
.planes-header__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.planes-header__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.planes-header__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--bone);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 720px) {
  .planes-header__meta { display: none; }
  .planes-header .legal-header__logo { width: 72px; }
}

/* --- Tipología switcher (sticky just below the header) --- */
.planes-tabs {
  position: sticky;
  top: 68px;
  z-index: 18;
  background: rgba(16, 24, 20, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(244, 239, 229, 0.06);
}
.planes-tabs__inner {
  display: flex;
  gap: clamp(8px, 2vw, 24px);
  flex-wrap: wrap;
  justify-content: center;
  padding-block: 14px;
}
.planes-tabs__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.14);
  border-radius: 999px;
  text-decoration: none;
  transition:
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.planes-tabs__tab:hover,
.planes-tabs__tab:focus-visible {
  color: var(--bone);
  border-color: rgba(244, 239, 229, 0.4);
}
.planes-tabs__tab.is-active {
  color: var(--jungle-hi);
  border-color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
}
.planes-tabs__n {
  font-weight: 600;
  font-size: 10px;
  color: inherit;
  opacity: 0.7;
}
.planes-tabs__label { font-weight: 500; }
@media (max-width: 640px) {
  .planes-tabs__inner { gap: 6px; padding-block: 10px; }
  .planes-tabs__tab { padding: 7px 12px; font-size: 11px; letter-spacing: 0.16em; }
  .planes-tabs__n { display: none; }
}

/* --- Hero for the selected tipología --- */
.planes-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(380px, 64vh, 680px);
  overflow: hidden;
}
.planes-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.planes-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 16, 13, 0) 40%, rgba(10, 16, 13, 0.82) 100%),
    linear-gradient(90deg, rgba(10, 16, 13, 0.55) 0%, rgba(10, 16, 13, 0) 55%);
}
.planes-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 6vh, 64px);
  color: var(--bone);
}
.planes-hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-2);
}
.planes-hero__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  max-width: 780px;
}
.planes-hero__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  max-width: 620px;
  color: rgba(244, 239, 229, 0.82);
  margin: 0;
}

/* --- Floor list --- */
.planes-floors {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 96px);
  padding-block: clamp(48px, 7vw, 96px);
}
.planes-floor {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--container-max, 1400px);
  margin-inline: auto;
  padding-inline: var(--space-4);
  width: 100%;
  box-sizing: border-box;
}
.planes-floor--flip { grid-template-columns: 1fr 1.1fr; }
.planes-floor--flip .planes-floor__media { order: 2; }
.planes-floor--flip .planes-floor__body { order: 1; }
@media (max-width: 900px) {
  .planes-floor,
  .planes-floor--flip {
    grid-template-columns: 1fr;
  }
  .planes-floor--flip .planes-floor__media { order: 0; }
  .planes-floor--flip .planes-floor__body { order: 0; }
}
.planes-floor__media {
  position: relative;
  background: rgba(244, 239, 229, 0.96);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(244, 239, 229, 0.08);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
  text-align: left;
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.planes-floor__media:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(111, 224, 176, 0.35);
}
.planes-floor__media:focus-visible {
  outline: 2px solid var(--jungle-hi);
  outline-offset: 3px;
}
.planes-floor__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 800ms var(--ease);
}
.planes-floor__media:hover img {
  transform: scale(1.015);
}
/* "Ampliar" chip overlaid bottom-right of each plan. Shows the
   media is clickable without needing to read a caption. */
.planes-floor__zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(244, 239, 229, 0.92);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0.88;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.planes-floor__media:hover .planes-floor__zoom-hint {
  opacity: 1;
  transform: translateY(-1px);
}

/* --- Lightbox ------------------------------------------------------ */
.planes-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 12, 10, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 60px);
  box-sizing: border-box;
  animation: planesFadeIn 220ms var(--ease) both;
}
.planes-lightbox[hidden] { display: none !important; }
@keyframes planesFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.planes-lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  /* Hide the native scrollbar — we paint our own custom rails. */
  scrollbar-width: none;
}
.planes-lightbox__stage::-webkit-scrollbar { display: none; }
.planes-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
  transition: transform 300ms var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
/* When zoomed, switch to native scroll inside the stage so the user
   can pan the over-sized image. Cursor becomes a grab handle to
   signal that the plan is draggable. */
.planes-lightbox.is-zoomed .planes-lightbox__img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: grab;
}
.planes-lightbox.is-zoomed.is-dragging .planes-lightbox__img {
  cursor: grabbing;
}
.planes-lightbox.is-zoomed .planes-lightbox__stage { cursor: grab; }
.planes-lightbox.is-zoomed.is-dragging .planes-lightbox__stage { cursor: grabbing; }

/* --- Custom scroll rails (zoom mode only) ---
   Thin tracks on the right edge and the bottom that mirror the
   scrollbar position. Kept subtle so they don't compete with the
   plan itself. Thumb color picks up the brand jungle-hi to reinforce
   that these are live indicators, not static chrome. */
.planes-lightbox__scroll {
  position: fixed;
  z-index: 3;
  background: rgba(244, 239, 229, 0.08);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
}
.planes-lightbox__scroll.is-visible { opacity: 1; }
.planes-lightbox__scroll--v {
  top: 80px;
  bottom: 80px;
  right: 14px;
  width: 6px;
}
.planes-lightbox__scroll--h {
  left: 80px;
  right: 80px;
  bottom: 56px;
  height: 6px;
}
.planes-lightbox__thumb {
  position: absolute;
  background: var(--jungle-hi);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(111, 224, 176, 0.45);
  transition: height 120ms var(--ease), top 60ms linear,
              width 120ms var(--ease), left 60ms linear;
}
.planes-lightbox__scroll--v .planes-lightbox__thumb {
  left: 0;
  right: 0;
  min-height: 20px;
}
.planes-lightbox__scroll--h .planes-lightbox__thumb {
  top: 0;
  bottom: 0;
  min-width: 20px;
}
@media (max-width: 640px) {
  .planes-lightbox__scroll--v { top: 60px; bottom: 72px; right: 8px; }
  .planes-lightbox__scroll--h { left: 60px; right: 60px; bottom: 48px; }
}
.planes-lightbox__close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  background: rgba(20, 28, 24, 0.7);
  border: 1px solid rgba(244, 239, 229, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.planes-lightbox__close:hover,
.planes-lightbox__close:focus-visible {
  background: rgba(226, 90, 37, 0.2);
  border-color: var(--accent);
}
.planes-lightbox__meta {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--bone);
  pointer-events: none;
}
.planes-lightbox__piso {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.planes-lightbox__hint {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 229, 0.55);
  margin: 4px 0 0;
}
body.planes-lightbox-open {
  overflow: hidden;
}


/* ── 9.98 · Descargas — brochure download card ─────────────────────
   Minimal section with an editorial intro and a single prominent
   download card. Card uses a horizontal layout:
   big iconic PDF glyph, descriptive body, pill-action on the right. */
.sec-descargas {
  padding-block: clamp(56px, 6vw, 96px);
  background:
    radial-gradient(ellipse at 10% 0%, rgba(21, 77, 62, 0.14), transparent 55%),
    var(--ink);
}
.sec-descargas__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) {
  .sec-descargas__inner { grid-template-columns: 1fr; }
}
.sec-descargas__intro {
  max-width: 560px;
}
.sec-descargas__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.82);
  margin: var(--space-3) 0 0;
}

/* Stack of download/navigation cards — sits as the right-side
   column of the descargas grid. */
.sec-descargas__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Download card --- */
.download-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(13px, 2vw, 26px);
  padding: clamp(14px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(244, 239, 229, 0.1);
  border-radius: 14px;
  text-decoration: none;
  color: var(--bone);
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.download-card:hover,
.download-card:focus-visible {
  border-color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.06);
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(111, 224, 176, 0.3);
}
.download-card__thumb {
  width: clamp(42px, 4.6vw, 60px);
  height: clamp(54px, 5.9vw, 76px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
  border: 1px solid rgba(111, 224, 176, 0.25);
  border-radius: 8px;
  flex-shrink: 0;
}
.download-card__thumb svg {
  width: 60%;
  height: 60%;
}
.download-card__body { min-width: 0; }
.download-card__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 3px;
}
.download-card__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.download-card__meta {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  color: rgba(244, 239, 229, 0.55);
  margin: 4px 0 0;
}
.download-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--jungle-hi);
  border-radius: 999px;
  transition: background-color var(--dur-micro) var(--ease);
  flex-shrink: 0;
  white-space: nowrap;
}
.download-card:hover .download-card__action,
.download-card:focus-visible .download-card__action {
  background: #7fe8be;
}
@media (max-width: 640px) {
  .download-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .download-card__action {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }
}

/* Dual CTA row below the download card (Ver + Descargar). */
.download-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}


/* ── 9.99 · Brochure viewer page — embedded PDF with site chrome ───
   Full-viewport iframe with a compact header on top. Mirrors the
   tour.html layout: logo + title + actions row, plus a floating
   back pill for always-visible exit regardless of scroll. */
.brochure-page {
  background: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
}
.brochure-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 14px;
}
/* Three-column grid so the meta stays centred to the viewport
   regardless of how wide logo or actions are. */
.brochure-header .legal-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.brochure-header .legal-header__logo {
  width: 96px;
  justify-self: start;
}
.brochure-header__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.brochure-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  /* Shift 20% of the viewport to the left of the floating Volver
     pill so the two pills don't read as a single cluster. */
  margin-right: 20vw;
}
.brochure-header__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.brochure-header__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--bone);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* "Descargar" in the header — quiet ghost pill so it doesn't fight
   the floating "Volver" button that lives over the iframe. */
.brochure-header__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.3);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.brochure-header__download:hover,
.brochure-header__download:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
}
@media (max-width: 640px) {
  .brochure-header { padding-block: 6px; }
  .brochure-header .legal-header__logo { width: 72px; }
  .brochure-header__meta { display: none; }
  /* Smaller floating Volver on mobile → proportional clearance. */
  .brochure-header__actions { margin-right: 35vw; }
}

.brochure {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 95px);
  background: #1a1a1a;
  padding: 16px 0 calc(28px + env(safe-area-inset-bottom));
}
/* Page-image gallery — replaces the iframe PDF, which only rendered the
   cover on mobile browsers. 36 landscape pages stacked vertically and
   lazy-loaded; the same layout serves desktop and mobile. */
.brochure__gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 14px;
}
.brochure__page {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 908;
  border-radius: 8px;
  background: #2a2a2a;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
/* Floating Volver — fixed top-right of the viewport, above the
   iframe so the exit is always one click away. */
.brochure__back {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  border: 2px solid var(--bone);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--accent),
    0 6px 20px rgba(10, 8, 7, 0.6),
    0 0 24px rgba(226, 90, 37, 0.45);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.brochure__back:hover,
.brochure__back:focus-visible {
  background: var(--accent-hi);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px var(--accent-hi),
    0 8px 28px rgba(10, 8, 7, 0.7),
    0 0 36px rgba(226, 90, 37, 0.6);
}
@media (max-width: 640px) {
  .brochure__back {
    top: 10px;
    right: 10px;
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}
.brochure__fallback {
  text-align: center;
  padding: var(--space-4);
  color: rgba(244, 239, 229, 0.7);
}
.brochure__fallback a {
  color: var(--jungle-hi);
  border-bottom: 1px solid rgba(111, 224, 176, 0.4);
}
.planes-floor__body {
  padding-inline: 0;
  max-width: 560px;
}
.planes-floor__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-2);
}
.planes-floor__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
}
.planes-floor__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
}
.planes-floor__features li {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 239, 229, 0.82);
  padding-left: 14px;
  position: relative;
}
.planes-floor__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--jungle-hi);
}

/* --- Outro CTA --- */
.planes-outro {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: 1px solid rgba(244, 239, 229, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.planes-outro__inner {
  text-align: center;
  max-width: 760px;
}
.planes-outro__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 var(--space-4);
}
.planes-outro__row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}


/* ── Hablemos form — full-width lead form below the pill row ────── */
.sec-hablemos__form-wrap {
  margin-top: clamp(48px, 6vw, 80px);
  max-width: 720px;
}
.sec-hablemos__form-head {
  margin-bottom: var(--space-4);
}
.sec-hablemos__form-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: var(--space-2) 0 var(--space-2);
}
.sec-hablemos__form-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-mut);
  margin: 0;
  max-width: 54ch;
}


/* ── Back-to-landing home icon on proyecto.html ─────────────────── */
.site-header__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.18);
  flex-shrink: 0;
  transition: border-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease);
}
.site-header__home:hover,
.site-header__home:focus-visible {
  border-color: var(--jungle-hi);
  color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.08);
}
.site-header:not(.is-scrolled) .site-header__home {
  border-color: rgba(244, 239, 229, 0.35);
}


/* ═════════════════════════════════════════════════════════════════════
   ── LANDING (commercial entry at /) ───────────────────────────────
   Lean, conversion-focused counterpart to proyecto.html. Reuses the
   palette tokens and pill styles but keeps a tighter layout: no
   overlay menu, hero with compact stats + triple CTA, pillar grid,
   tipology tiles with prices from A&C, credibility seals, tours row,
   form + sala-de-negocios, closing link to proyecto.html.
   ═════════════════════════════════════════════════════════════════════ */
body.landing-page {
  background: var(--ink);
  color: var(--bone);
}

/* ── Landing header ───────────────────────────────────────────────── */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 8, 7, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  padding-block: 12px;
}
.landing-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.landing-header__logo { display: inline-block; width: 120px; flex-shrink: 0; }
.landing-header__logo img { display: block; width: 100%; height: auto; }
.landing-header__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.landing-header__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
  text-decoration: none;
  padding: 6px 2px;
  transition: color var(--dur-micro) var(--ease);
}
.landing-header__link:hover,
.landing-header__link:focus-visible { color: var(--jungle-hi); }
.landing-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bone);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease);
}
.landing-header__cta:hover,
.landing-header__cta:focus-visible { background: var(--accent-hi); color: var(--bone); }

/* "Hablemos" — secondary WhatsApp door beside the filled "Agenda" CTA.
   Green ghost (outline) so it reads as the quieter, low-commitment
   option. 1px border is absorbed into the padding so its box matches
   the filled CTA's height exactly. */
.landing-header__cta--hablemos {
  background: transparent;
  color: #25D366;
  border: 1px solid #25D366;
  padding: 9px 17px;
}
.landing-header__cta--hablemos:hover,
.landing-header__cta--hablemos:focus-visible {
  background: #25D366;
  color: #ffffff;
}

/* Language toggle (ES · EN) — pixel-identical to the proyecto.html
   `.lang-toggle` (frosted pill + green chip on active). Mirrors that
   component exactly so both pages share one toggle look. i18n.js adds
   .is-active to the active button on load and after each setLang(). */
.landing-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  margin-right: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
  background: rgba(10, 8, 7, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1.5px solid rgba(244, 239, 229, 0.25);
  border-radius: 999px;
  flex: 0 0 auto;
}
.landing-header__lang-btn {
  appearance: none;
  position: relative;
  padding: 3px 8px;
  color: rgba(244, 239, 229, 0.72);
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: 500;
  transition:
    color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}
.landing-header__lang-btn:hover,
.landing-header__lang-btn:focus-visible {
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 176, 0.25);
  outline: none;
}
.landing-header__lang-btn.is-active {
  color: var(--bone);
  font-weight: 700;
  background: rgba(111, 224, 176, 0.18);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 176, 0.4);
  cursor: default;
}
.landing-header__lang-sep {
  color: var(--bone-mut);
  opacity: 0.45;
}

@media (max-width: 640px) {
  .landing-header__link { display: none; }
  /* Hide the header WhatsApp CTA on mobile — the floating green bubble
     covers the same intent and lives within thumb reach as the user
     scrolls. Two CTAs to the same place felt redundant. The header
     keeps logo + lang toggle; everything else lives in the body. */
  .landing-header__cta { display: none; }
  /* Compact the lang pill on phones so it doesn't push the CTA off
     the right edge. Same component, just tighter padding + smaller
     type. The frosted pill, gap, green chip and outline all stay. */
  .landing-header__lang {
    margin-right: var(--space-2);
    padding: 6px 10px;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .landing-header__lang-btn { padding: 2px 6px; }
}

/* Tablet (641–820px): the full desktop header — two text links + the Hablemos
   ghost button + the Agenda CTA — overflowed ~768px (824px wide). Hide the text
   links and the Hablemos button here, keeping the primary "Agenda tu visita"
   CTA. Below 640px the rules above take over (Agenda hides too, WhatsApp icon
   appears). */
@media (max-width: 820px) {
  .landing-header__link { display: none; }
  .landing-header__cta--hablemos { display: none; }
}

/* Below ~430px (most phones in portrait) just shrink the logo a touch
   so the lang pill has full breathing room. The CTA is already hidden
   above (640px breakpoint) so we don't need any of the icon-only /
   transparent-pill compromises we needed before. */
@media (max-width: 430px) {
  .landing-header__inner { gap: var(--space-2); }
  .landing-header__logo { width: 96px; }
  .landing-header__nav { gap: var(--space-2); }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.landing-hero__media {
  position: absolute;
  inset: 0;
  /* Was z-index: -1 + parent isolation:isolate. On Chrome Android 113
     (and some other older Blink builds) the negative-z-index child is
     painted BEHIND the section's own canvas even with isolation, which
     makes the video AND poster invisible — only the dark page bg shows
     through. Sit at the natural stacking position instead and rely on
     `.landing-hero__body { z-index: 1 }` to keep text on top. */
  z-index: 0;
}
.landing-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 7, 0.26) 0%, rgba(10, 8, 7, 0.48) 60%, rgba(10, 8, 7, 0.70) 100%),
    linear-gradient(90deg, rgba(10, 8, 7, 0.48) 0%, rgba(10, 8, 7, 0) 55%);
}
.landing-hero__body {
  position: relative;
  padding-block: clamp(80px, 12vh, 140px);
  max-width: 880px;
  z-index: 1;
}
/* Soft spotlight halo behind the text — subtle radial darkening
   that lifts title/lead contrast against the video without fully
   covering the frame. Blurred so the edge reads as "light fading"
   rather than a rectangle. */
.landing-hero__body::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  background: radial-gradient(
    ellipse 85% 70% at 30% 55%,
    rgba(10, 8, 7, 0.51) 0%,
    rgba(10, 8, 7, 0.30) 40%,
    rgba(10, 8, 7, 0.10) 70%,
    transparent 100%
  );
  filter: blur(32px);
  pointer-events: none;
}
.landing-hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 var(--space-3);
}
.landing-hero__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0 0 var(--space-3);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.landing-hero__tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.4;
  color: rgba(196, 163, 90, 0.95);
  margin: calc(var(--space-3) * -0.5) 0 var(--space-3);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.landing-hero__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.92);
  margin: 0 0 var(--space-5);
  max-width: 64ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.landing-hero__lead strong {
  color: var(--bone);
  font-weight: 600;
}
.landing-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
}
@media (max-width: 640px) {
  .landing-hero__stats { grid-template-columns: repeat(2, 1fr); }
}
.landing-hero__stats > div { display: flex; flex-direction: column; gap: 3px; }
.landing-hero__stats dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  margin: 0;
}
.landing-hero__stats dd {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
  line-height: 1;
}
.landing-hero__ctas {
  /* 2×2 grid: row 1 = Agenda · Pregunta, row 2 = Disponibilidad ·
     Brochure. Equal columns + equal-size pills so the block reads as a
     tidy quadrant rather than a ragged wrap. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  max-width: 540px;
}
/* Every pill fills its cell → identical width. Single line (nowrap) +
   fixed min-height keeps all four exactly the same height; the 540px
   container gives the longest label (ES + EN) room to stay on one line.
   Descendant selector so it also catches the disponibilidad/avance
   anchors injected at runtime. */
.landing-hero__ctas .pill-cta {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
/* The disponibilidad + avance pills are injected inside placeholder
   <span>s. display:contents promotes the inner <a> to be the grid item
   directly (so it sits in a cell and stretches), and an empty avance
   span contributes no cell at all. */
.landing-hero__ctas > [data-landing-disponibilidad-link],
.landing-hero__ctas > [data-avance-landing-link] {
  display: contents;
}
/* On narrow phones the 2-column grid would squeeze the uppercase labels
   past the cell width, and nowrap can't break them — so collapse to a
   single full-width column where every label fits on one line. */
@media (max-width: 600px) {
  .landing-hero__ctas {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}
/* Second-tier CTA — sits below the primary row, left-aligned with
   the primary row but visually centered against it via flex with the
   same width hint. The ghost pill is a quieter exploratory link. */
.landing-hero__ctas-secondary {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
  /* Match the natural width of the primary row so the secondary pill
     centers within it instead of against the full hero width. */
  width: fit-content;
  max-width: 100%;
}
.landing-hero__ctas-secondary .pill-cta {
  /* Slightly tone it down so it reads as secondary action. */
  opacity: 0.85;
}
.landing-hero__ctas-secondary .pill-cta:hover {
  opacity: 1;
}

/* ── Shared section head ─────────────────────────────────────────── */
.landing-section__head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.landing-section__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: var(--space-2) 0 var(--space-3);
}
.landing-section__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--bone-mut);
  margin: 0;
  max-width: 64ch;
}
.landing-section__lead strong { color: var(--bone); }

/* ── 3 pillars ────────────────────────────────────────────────────── */
.landing-pillars {
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--hairline);
}
.landing-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .landing-pillars__grid { grid-template-columns: 1fr; }
}
.landing-pillar {
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(111, 224, 176, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.landing-pillar__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(111, 224, 176, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jungle-hi);
}
.landing-pillar__icon svg { width: 22px; height: 22px; }
.landing-pillar__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.25;
  color: var(--bone);
  margin: 0;
}
.landing-pillar__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-mut);
  margin: 0;
}

/* ── Tipologías tiles ─────────────────────────────────────────────── */
.landing-tipologias {
  /* Asymmetric padding — keep top breathing room after the pillars,
     tighter at the bottom because the seals strip below is the
     same "respaldo" idea visually. */
  padding-block: clamp(72px, 8vw, 120px) clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}
.landing-tipologias__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 760px) {
  .landing-tipologias__grid { grid-template-columns: 1fr; }
}
/* The tile was an <a> before — it's now a container wrapping TWO
   anchors: `.tipo-tile__link` (opens the floor plan) and
   `.tipo-tile__cta` (opens WhatsApp pre-filled for that tipology).
   Nesting two interactive elements required the split. */
.tipo-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(244, 239, 229, 0.015);
  transition: border-color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease);
}
.tipo-tile:hover,
.tipo-tile:focus-within {
  border-color: rgba(62, 166, 134, 0.55);
  background: rgba(31, 107, 85, 0.08);
  transform: translateY(-2px);
}
.tipo-tile__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.tipo-tile__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
}
.tipo-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}
.tipo-tile:hover .tipo-tile__media img { transform: scale(1.03); }

/* Dual-pill CTA at the bottom of each tile — splits intent between
   "Uso propio" (ghost) and "Inversión" (gold). Each pill carries a
   tipology + intent-specific WhatsApp message so the commercial
   team sees the persona before opening the chat. */
.tipo-tile__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 var(--space-4) var(--space-4);
}
.tipo-tile__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.tipo-tile__pill__ch {
  display: inline-block;
  transition: transform var(--dur-micro) var(--ease);
}
.tipo-tile__pill:hover .tipo-tile__pill__ch,
.tipo-tile__pill:focus-visible .tipo-tile__pill__ch {
  transform: translateX(2px);
}
.tipo-tile__pill--use {
  background: rgba(244, 239, 229, 0.04);
  border: 1px solid rgba(244, 239, 229, 0.2);
  color: var(--bone);
}
.tipo-tile__pill--use:hover,
.tipo-tile__pill--use:focus-visible {
  background: rgba(244, 239, 229, 0.08);
  border-color: rgba(244, 239, 229, 0.35);
}
.tipo-tile__pill--invest {
  background: rgba(196, 163, 90, 0.14);
  border: 1px solid rgba(196, 163, 90, 0.55);
  color: #f0e3bf;
}
.tipo-tile__pill--invest:hover,
.tipo-tile__pill--invest:focus-visible {
  background: rgba(196, 163, 90, 0.24);
  border-color: rgba(196, 163, 90, 0.75);
}
@media (max-width: 380px) {
  .tipo-tile__pill { font-size: 11px; padding: 10px 8px; }
}

/* Tile flash — triggered when the mobile sticky chip-bar lands on
   a tile, so the visitor sees which one matched their tap. */
@keyframes tileFlash {
  0%   { box-shadow: 0 0 0 0 rgba(196, 163, 90, 0); }
  35%  { box-shadow: 0 0 0 6px rgba(196, 163, 90, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(196, 163, 90, 0); }
}
.tipo-tile.is-flashed {
  animation: tileFlash 1.6s var(--ease);
}
.tipo-tile__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tipo-tile__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0;
}
.tipo-tile__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.tipo-tile__price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--bone);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}
.tipo-tile__price strong {
  font-weight: 600;
  color: var(--bone);
}
.tipo-tile__price span {
  font-size: 10px;
  color: var(--bone-mut);
  margin-left: 2px;
  vertical-align: super;
}
.tipo-tile__areas {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bone-mut);
  margin: 0;
}
.tipo-tile__delivery {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(111, 224, 176, 0.85);
  margin: 0;
}
.tipo-tile__arrow {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform var(--dur-micro) var(--ease);
}
.tipo-tile:hover .tipo-tile__arrow { transform: translateX(3px); }
.landing-tipologias__note {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.55);
  text-align: center;
}
@media (max-width: 760px) {
  .landing-tipologias__note { font-size: 11px; text-align: left; }
}

/* ── Seals / credibility strip ────────────────────────────────────── */
.landing-seals {
  /* Tight on top (sits right under tipologías — they're conceptually
     paired) and normal on bottom to separate from the tours section. */
  padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(21, 77, 62, 0.12), transparent 60%),
    var(--ink);
}
.landing-seals__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (max-width: 1100px) {
  .landing-seals__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .landing-seals__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .landing-seals__grid { grid-template-columns: 1fr; }
}
.landing-seal {
  padding: var(--space-4);
  border-left: 2px solid var(--jungle-hi);
  display: flex;
  flex-direction: column;
}
.landing-seal__logo {
  height: 80px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.landing-seal__logo img {
  max-height: 80px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 1;
  filter: brightness(1.05);
  transition: filter var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              opacity var(--dur-micro) var(--ease);
}
.landing-seal__logo a {
  display: inline-flex;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.landing-seal__logo a:hover img,
.landing-seal__logo a:focus-visible img {
  transform: translateY(-1px);
  opacity: 1;
}
.landing-proof__logos a {
  display: inline-flex;
  transition: opacity var(--dur-micro) var(--ease);
}
.landing-proof__logos a:hover img,
.landing-proof__logos a:focus-visible img {
  opacity: 1;
}

/* Filter strategy by logo family:
 *
 *  --invert  → for dark monochrome marks (WTCA badge, A&C wordmark,
 *              Colliers) where the source art is black/dark-blue. We
 *              flip to white with `brightness(0) invert(1)` — yes,
 *              it flattens to a silhouette, but at 96px tall the
 *              letter forms read clearly. brightness boost / saturate
 *              tricks DON'T work here because brightness(N) on pure
 *              black is still black (multiplicative).
 *
 *  --washed  → for colored badges (LEED) where invert would mangle
 *              the palette. Desaturate + brighten preserves the
 *              internal design while toning down to monochrome.
 *
 *  default   → for marks already designed for dark backgrounds
 *              (Fiduciaria AVAL — white-on-transparent PNG). Just a
 *              tiny brightness boost.
 */
.landing-seal__logo--invert,
.landing-proof__logo--invert {
  filter: brightness(0) invert(1) opacity(0.85) !important;
}
.landing-seal__logo a:hover .landing-seal__logo--invert,
.landing-seal__logo a:focus-visible .landing-seal__logo--invert {
  filter: brightness(0) invert(1) opacity(1) !important;
}
/* For PNGs that are ALREADY white-on-transparent (Colliers, AVAL when
   it had a class) and gray medallions where pure-invert would over-
   brighten — just dim a touch so they don't out-shine the inverted
   silhouettes alongside. */
.landing-seal__logo--soft {
  opacity: 0.8 !important;
  filter: brightness(1.05) !important;
}
.landing-seal__logo a:hover .landing-seal__logo--soft,
.landing-seal__logo a:focus-visible .landing-seal__logo--soft {
  opacity: 0.95 !important;
}
/* Legacy class kept in case any markup still uses it. Same intent
   as --soft. */
.landing-seal__logo--washed {
  filter: grayscale(1) brightness(1.4) contrast(0.95) opacity(0.85) !important;
}
.landing-seal__tag {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  margin: 0 0 6px;
  /* Reserve room for two lines so the FIRST line of every title — and
     the FIRST line of every body — align across all seals. Required
     because "Arquitectura & Concreto" wraps to 2 lines while the
     others fit on 1. flex-start keeps single-line titles at the top
     of the reserved box; the empty second line absorbs the difference. */
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}
.landing-seal__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone);
  margin: 0;
}

/* ── Tours row ────────────────────────────────────────────────────── */
.landing-tours {
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--hairline);
}
.landing-tours__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 860px) {
  .landing-tours__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .landing-tours__grid { grid-template-columns: 1fr; }
}
.tour-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-micro) var(--ease);
}
.tour-tile:hover,
.tour-tile:focus-visible { transform: translateY(-2px); }
.tour-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #0a0a0a;
  border: 1px solid var(--hairline);
}
.tour-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}
.tour-tile:hover img,
.tour-tile:focus-visible img {
  transform: scale(1.04);
}
/* Centered play badge — circle with backdrop blur so it reads on
   either bright or dark thumbnails without needing a full overlay. */
.tour-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 8, 7, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1.5px solid rgba(244, 239, 229, 0.85);
  color: var(--bone);
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.tour-tile__play svg { width: 20px; height: 20px; margin-left: 2px; }
.tour-tile:hover .tour-tile__play,
.tour-tile:focus-visible .tour-tile__play {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
}
/* Label BELOW the image, not overlaid — always readable. */
.tour-tile__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  text-align: center;
  transition: color var(--dur-micro) var(--ease);
}
.tour-tile:hover .tour-tile__label,
.tour-tile:focus-visible .tour-tile__label {
  color: var(--jungle-hi);
}

/* ── Apartasuites — investment thesis mini-section ───────────────── */
.landing-thesis {
  padding-block: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(196, 163, 90, 0.03), transparent 60%);
}
.landing-thesis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 820px) {
  .landing-thesis__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.landing-thesis__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--bone-mut);
  max-width: 48ch;
  margin: var(--space-3) 0 var(--space-4);
}
.landing-thesis__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.landing-thesis__list li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-left: 2px solid rgba(196, 163, 90, 0.6);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.015);
}
.landing-thesis__label {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  margin-bottom: 6px;
}
.landing-thesis__list li p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone);
}

/* ── "¿Por qué decidir ahora?" — 6 urgency drivers ───────────────── */
.landing-now {
  padding-block: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--hairline);
}
.landing-now__grid {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .landing-now__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .landing-now__grid { grid-template-columns: repeat(3, 1fr); }
}
.landing-now__grid li {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(244, 239, 229, 0.015);
  position: relative;
}
.landing-now__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(196, 163, 90, 0.7);
  margin-bottom: 10px;
  display: block;
}
.landing-now__t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--bone);
  margin: 0 0 8px;
}
.landing-now__b {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-mut);
  margin: 0;
}

/* ── FAQ accordion ─────────────────────────────────────────────────── */
.landing-faq {
  padding-block: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--hairline);
}
.landing-faq__list {
  margin-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}
.landing-faq__item {
  border-bottom: 1px solid var(--hairline);
}
.landing-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: color var(--dur-micro) var(--ease);
}
.landing-faq__item summary::-webkit-details-marker { display: none; }
.landing-faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 300;
  color: rgba(196, 163, 90, 0.9);
  transition: transform var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.landing-faq__item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
  border-color: rgba(196, 163, 90, 0.7);
}
.landing-faq__item summary:hover { color: rgba(196, 163, 90, 0.95); }
.landing-faq__item p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone-mut);
  max-width: 70ch;
}
/* Optional CTA inside an FAQ answer (e.g. "Cómo llegar a la oficina"
   under "¿Dónde está la sala?"). Sits below the paragraph with a bit
   of breathing room. */
.landing-faq__cta {
  margin: 0 0 var(--space-3);
}
.landing-faq__cta .pill-cta {
  font-size: 11px;
  padding: 8px 14px;
}

/* CTA pegado al bloque de oficina del footer del proyecto. */
.site-footer__address-cta {
  margin-top: 12px;
}
.site-footer__address-cta .pill-cta {
  font-size: 11px;
  padding: 8px 14px;
}

/* ── Social proof strip above the lead form ──────────────────────── */
.landing-proof {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(196, 163, 90, 0.22);
  border-left-width: 2px;
  border-radius: 10px;
  background: rgba(196, 163, 90, 0.04);
}
.landing-proof__line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bone-mut);
  /* Margin trimmed to absorb the +8px the larger logos add to the row,
     so the outer panel keeps its current height. */
  margin: 0 0 4px;
}
.landing-proof__line strong {
  font-weight: 500;
  color: var(--bone);
}
.landing-proof__logos {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  /* Indent the WTCA logo so it lands under the word "World" of
     "World Trade Centers Association" in the line above. The
     offset is chosen to match the body text wrap at typical
     desktop widths (≈ width of "AVAL. Acreditado por la "
     in 13 px Inter); narrower viewports collapse the row to
     the box's left edge once the row no longer fits. */
  padding-left: 160px;
}
@media (max-width: 720px) {
  .landing-proof__logos { padding-left: 0; }
}
/* Render every proof logo as a uniform white silhouette so the row
   reads as one set of credentials, not five competing brands. Uses
   !important to beat the legacy `.landing-proof__logo--invert` rule
   that already carries !important — without it, the per-class rule
   above wins and we get a stack of two opacity layers (0.85 from
   the filter + 0.75 from the element) that washes everything out. */
.landing-proof__logos img,
.landing-proof__logos img.landing-proof__logo--invert {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1) !important;
  opacity: 0.85;
  transition: opacity var(--dur-micro) var(--ease);
}
.landing-proof__logos img:hover { opacity: 1; }

/* ── Landing modals (Apartasuites thesis · ¿Por qué decidir ahora?)
   ──────────────────────────────────────────────────────────────────
   Native <dialog> with smooth open/close, brand-styled panel and
   keyboard-accessible close button. Both modals share the same
   chrome — content swaps inside .wtcp-modal__body. */
.wtcp-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(720px, 92vw);
  width: 100%;
  color: var(--bone);
  margin: auto;
}
.wtcp-modal::backdrop {
  background: rgba(8, 6, 5, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wtcp-modal[open] {
  animation: wtcpModalIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wtcp-modal[open]::backdrop {
  animation: wtcpModalBackdrop 0.28s ease-out;
}
@keyframes wtcpModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes wtcpModalBackdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wtcp-modal__panel {
  position: relative;
  background: linear-gradient(180deg, #16130d 0%, #0e0c08 100%);
  border: 1px solid rgba(196, 163, 90, 0.25);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 44px) clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  max-height: 86vh;
  overflow-y: auto;
}
.wtcp-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 239, 229, 0.18);
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 239, 229, 0.65);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wtcp-modal__close:hover { color: var(--bone); border-color: var(--accent); }
.wtcp-modal__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  margin: 0 0 10px;
}
.wtcp-modal__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 var(--space-4);
}
.wtcp-modal__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.78);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
}

/* Reasons list inside "¿Por qué decidir ahora?" modal — 6 items grid. */
.wtcp-modal__reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .wtcp-modal__reasons { grid-template-columns: 1fr 1fr; }
}
.wtcp-modal__reasons li {
  padding: var(--space-3);
  background: rgba(244, 239, 229, 0.025);
  border: 1px solid rgba(244, 239, 229, 0.08);
  border-radius: 10px;
}
.wtcp-modal__reasons .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(196, 163, 90, 0.7);
  display: block;
  margin-bottom: 6px;
}
.wtcp-modal__reasons .t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--bone);
  margin: 0 0 4px;
  display: block;
}
.wtcp-modal__reasons .b {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(244, 239, 229, 0.6);
  margin: 0;
  display: block;
}

/* Apartasuites thesis bullets inside its modal — same vibe as the
   inline list we removed from the page. */
.wtcp-modal__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.wtcp-modal__bullets li {
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-left: 2px solid rgba(196, 163, 90, 0.6);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.02);
}
.wtcp-modal__bullets .label {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  margin-bottom: 6px;
}
.wtcp-modal__bullets p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone);
}

/* ── Orbit-zone trigger (WTCP silhouette + pulse + cards) ────────
   The button visual IS the WTC Pereira building silhouette,
   recoloured to brand gold via CSS filter. Halo rings pulse around
   it like a faro; on desktop hover the 6 reasons fan out as orbit
   cards. Click → opens the "¿Por qué decidir ahora?" modal. */
.orbit-zone {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  /* Tight breathing room around the silhouette. The 6 cards no longer
     reserve in-section space — when the zone is hover-active they
     overflow the section and float above a fullscreen backdrop that
     dims the rest of the page (see .orbit-zone::before below). */
  padding: clamp(40px, 5vw, 72px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fullscreen dim-veil that fades in when the orbit is hover-active.
   Lives as a pseudo-element of the zone so it shares the active state
   without an extra DOM node, but uses position:fixed to cover the
   viewport rather than just the (now compact) section. The zone is
   raised above page content while active so the cards (which overflow
   the section) read on top of the veil. */
.orbit-zone::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 5, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: -1;
}
.orbit-zone[data-active] { z-index: 80; }
.orbit-zone[data-active]::before { opacity: 1; }

.orbit-btn {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}
.orbit-btn__building {
  position: relative;
  width: clamp(180px, 18vw, 240px);
  filter: drop-shadow(0 8px 24px rgba(196, 163, 90, 0.25));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.3s ease;
}
.orbit-btn__building img {
  width: 100%; height: auto; display: block;
  /* Recolor the black silhouette to brand gold via channel math. */
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(58%)
    saturate(420%)
    hue-rotate(2deg)
    brightness(95%)
    contrast(92%);
}
.orbit-btn:hover .orbit-btn__building,
.orbit-btn:focus-visible .orbit-btn__building {
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 36px rgba(196, 163, 90, 0.45));
}
/* Window-light overlay on top of the silhouette — a few warm dots
   that flicker subtly to suggest the building is alive. */
.orbit-btn__lights {
  position: absolute;
  top: 12%; left: 24%; right: 4%; bottom: 14%;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 230, 170, 0.95), transparent 100%),
    radial-gradient(2px 2px at 38% 28%, rgba(255, 230, 170, 0.85), transparent 100%),
    radial-gradient(2px 2px at 62% 22%, rgba(255, 230, 170, 0.95), transparent 100%),
    radial-gradient(2px 2px at 82% 36%, rgba(255, 230, 170, 0.8),  transparent 100%),
    radial-gradient(2px 2px at 22% 48%, rgba(255, 230, 170, 0.9),  transparent 100%),
    radial-gradient(2px 2px at 50% 58%, rgba(255, 230, 170, 0.85), transparent 100%),
    radial-gradient(2px 2px at 74% 64%, rgba(255, 230, 170, 0.95), transparent 100%),
    radial-gradient(2px 2px at 30% 76%, rgba(255, 230, 170, 0.85), transparent 100%),
    radial-gradient(2px 2px at 60% 82%, rgba(255, 230, 170, 0.95), transparent 100%);
  animation: orbitWindowFlicker 4.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes orbitWindowFlicker {
  0%, 100% { opacity: 0.55; }
  30%      { opacity: 0.9; }
  45%      { opacity: 0.4; }
  70%      { opacity: 0.85; }
  88%      { opacity: 0.55; }
}
/* Concentric pulsing rings around the building — reads as a radar /
   target reticle. Two rings staggered out of phase so there's always
   one expanding and giving the silhouette a heartbeat. */
.orbit-btn__building::before,
.orbit-btn__building::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 163, 90, 0.7);
  animation: orbitBuildingPulse 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  pointer-events: none;
  z-index: -1;
}
.orbit-btn__building::after { animation-delay: 1.4s; }
@keyframes orbitBuildingPulse {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0;    }
  18%  {                                                opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0;    }
}
/* Caption styled as a pill so it reads as a CTA, coherent with the
   gold pills on the tipología tiles and the hero "Agenda tu visita".
   In the default state it sits below the silhouette via flex-flow.
   When [data-active] (orbit fan-out is showing), the pill lifts up
   and brightens to solid gold so it lands dead-centre on top of the
   silhouette — making the click affordance unmissable while the
   reasons orbit around it. */
.orbit-zone {
  /* Distance to lift the pill onto the silhouette center; varies with
     the silhouette's responsive size. */
  --orbit-pill-lift: -130px;
}
.orbit-btn__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  background: rgba(196, 163, 90, 0.14);
  border: 1px solid rgba(196, 163, 90, 0.55);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #f0e3bf;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.3s var(--ease),
              border-color 0.3s var(--ease),
              color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
  position: relative;
  z-index: 11;
}
.orbit-btn:hover .orbit-btn__caption,
.orbit-btn:focus-visible .orbit-btn__caption {
  background: rgba(196, 163, 90, 0.24);
  border-color: rgba(196, 163, 90, 0.75);
}
.orbit-zone[data-active] .orbit-btn__caption {
  transform: translateY(var(--orbit-pill-lift)) scale(1.06);
  background: rgba(196, 163, 90, 0.96);
  border-color: rgba(196, 163, 90, 1);
  color: #131211;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(196, 163, 90, 0.4);
}
.orbit-zone[data-active] .orbit-btn__caption .orbit-arrow {
  color: #131211;
}
.orbit-btn__caption .orbit-arrow {
  color: rgba(196, 163, 90, 0.95);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              color 0.3s var(--ease);
}
.orbit-btn:hover .orbit-arrow { transform: translateX(4px); }

.orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  padding: 12px 14px;
  background: rgba(15, 14, 12, 0.92);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease;
  pointer-events: none;
  z-index: 5;
}
.orbit-card .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(196, 163, 90, 0.85);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}
.orbit-card .t {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--bone);
  font-weight: 500;
}
/* Position the 6 cards radially when the zone is hover-active.
   Offsets are larger than a standard pill button because the
   building silhouette occupies ~220×220px at the centre. */
.orbit-zone[data-active] .orbit-card { opacity: 1; }
.orbit-zone[data-active] .orbit-card[data-i="0"] { transform: translate(calc(-50% - 320px), calc(-50% - 100px)) scale(1); transition-delay: 0.05s; }
.orbit-zone[data-active] .orbit-card[data-i="1"] { transform: translate(calc(-50% + 0px),   calc(-50% - 200px)) scale(1); transition-delay: 0.10s; }
.orbit-zone[data-active] .orbit-card[data-i="2"] { transform: translate(calc(-50% + 320px), calc(-50% - 100px)) scale(1); transition-delay: 0.15s; }
.orbit-zone[data-active] .orbit-card[data-i="3"] { transform: translate(calc(-50% - 320px), calc(-50% + 100px)) scale(1); transition-delay: 0.20s; }
.orbit-zone[data-active] .orbit-card[data-i="4"] { transform: translate(calc(-50% + 0px),   calc(-50% + 200px)) scale(1); transition-delay: 0.25s; }
.orbit-zone[data-active] .orbit-card[data-i="5"] { transform: translate(calc(-50% + 320px), calc(-50% + 100px)) scale(1); transition-delay: 0.30s; }
/* Tablet — pull cards in so they don't overflow the container at
   intermediate viewport widths. */
@media (max-width: 1100px) {
  .orbit-zone { --orbit-pill-lift: -110px; }
  .orbit-zone[data-active] .orbit-card[data-i="0"] { transform: translate(calc(-50% - 230px), calc(-50% - 90px))  scale(1); }
  .orbit-zone[data-active] .orbit-card[data-i="1"] { transform: translate(calc(-50% + 0px),   calc(-50% - 175px)) scale(1); }
  .orbit-zone[data-active] .orbit-card[data-i="2"] { transform: translate(calc(-50% + 230px), calc(-50% - 90px))  scale(1); }
  .orbit-zone[data-active] .orbit-card[data-i="3"] { transform: translate(calc(-50% - 230px), calc(-50% + 90px))  scale(1); }
  .orbit-zone[data-active] .orbit-card[data-i="4"] { transform: translate(calc(-50% + 0px),   calc(-50% + 175px)) scale(1); }
  .orbit-zone[data-active] .orbit-card[data-i="5"] { transform: translate(calc(-50% + 230px), calc(-50% + 90px))  scale(1); }
}

/* Mobile / coarse pointer — cards collapse since hover is unreliable;
   keep them invisible and let click open the modal directly. The
   silhouette button stays — just no orbit drama around it. */
@media (max-width: 720px) {
  .orbit-card { display: none; }
  .orbit-zone {
    padding: clamp(40px, 8vw, 80px) 0;
    margin-top: var(--space-4);
  }
  .orbit-btn__building { width: clamp(140px, 38vw, 180px); }
}

/* Small "Saber más" inline link in the apartasuites tile body.
   Lives outside .tipo-tile__body (because the body is wrapped in the
   plan-link anchor) so we replicate the body's horizontal padding via
   margin to keep it aligned with title/price/etc. above. */
.tipo-tile__more {
  align-self: flex-start;
  margin: -4px var(--space-4) 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: rgba(196, 163, 90, 0.95);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 1px dashed rgba(196, 163, 90, 0.4);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tipo-tile__more:hover { color: var(--bone); border-color: var(--bone); }

/* "Hedge" — single-line urgency hint right above the form so the
   visitor who never opened the modal still touches urgency at the
   moment of conversion. Sits inside .landing-form, before the form. */
.landing-form__urgency {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(196, 163, 90, 0.95);
  margin: 0 0 var(--space-3);
  padding: 10px 14px;
  background: rgba(196, 163, 90, 0.06);
  border-left: 2px solid rgba(196, 163, 90, 0.5);
  border-radius: 0 6px 6px 0;
}

/* ── Desktop contact channel popover ───────────────────────────────
   Injected by contact-popover.js when a desktop user clicks any
   wa.me link. Lets them pick WhatsApp / phone / email instead of
   landing on the WhatsApp QR-scan page if they don't have WA Web. */
.wa-popover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 6, 5, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: waPopFade 0.18s ease-out;
}
@keyframes waPopFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wa-popover__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #131211;
  border: 1px solid rgba(196, 163, 90, 0.35);
  border-radius: 14px;
  padding: var(--space-4) var(--space-4) calc(var(--space-3) + 4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  animation: waPopRise 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes waPopRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.wa-popover__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--bone-mut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.wa-popover__close:hover {
  color: var(--bone);
  border-color: rgba(196, 163, 90, 0.55);
}
.wa-popover__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  margin: 0 0 6px;
}
.wa-popover__hint {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mut);
  margin: 0 0 var(--space-3);
}
.wa-popover__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.02);
  color: var(--bone);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.wa-popover__option:hover,
.wa-popover__option:focus-visible {
  background: rgba(196, 163, 90, 0.08);
  border-color: rgba(196, 163, 90, 0.45);
  transform: translateX(2px);
  outline: none;
}
.wa-popover__option svg {
  flex: 0 0 auto;
  color: rgba(196, 163, 90, 0.95);
}
.wa-popover__option--whatsapp svg { color: #25D366; }
.wa-popover__lbl {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wa-popover__lbl strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--bone);
}
.wa-popover__lbl small {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--bone-mut);
  margin-top: 2px;
}

/* Stop the page from scrolling while the modal is open. */
body.wa-popover-open { overflow: hidden; }

/* ── Contact / form / sala de negocios ────────────────────────────── */
.landing-contacto {
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse at 0% 50%, rgba(21, 77, 62, 0.1), transparent 60%),
    var(--ink);
}
.landing-contacto__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 960px) {
  /* minmax(0, 1fr), not plain 1fr: the form's phone row + inputs give the
     column a ~403px min-content, so plain 1fr (= minmax(auto,1fr)) refused to
     shrink and forced the whole landing into horizontal scroll at 360px. */
  .landing-contacto__grid { grid-template-columns: minmax(0, 1fr); }
}
.landing-form__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--bone-mut);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
}

/* Lead form */
.lead-form { display: flex; flex-direction: column; gap: var(--space-3); }
.lead-form__row { display: flex; flex-direction: column; gap: var(--space-3); }
.lead-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 540px) {
  .lead-form__row--2 { grid-template-columns: 1fr; }
}
.lead-form__field { display: flex; flex-direction: column; gap: 6px; }
.lead-form__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
}
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  color: var(--bone);
  background: rgba(244, 239, 229, 0.04);
  border: 1px solid rgba(244, 239, 229, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
  -webkit-appearance: none;
          appearance: none;
}
.lead-form__field textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }
.lead-form__field input:focus,
.lead-form__field select:focus,
.lead-form__field textarea:focus {
  outline: none;
  border-color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.06);
}
.lead-form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='rgba(244,239,229,.6)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.lead-form__field select option { color: #0a0807; background: var(--bone); }
.lead-form__privacy { margin-top: var(--space-2); }
.lead-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mut);
  cursor: pointer;
}
.lead-form__check input { margin-top: 3px; accent-color: var(--jungle-hi); }
.lead-form__check a { color: var(--jungle-hi); text-decoration: underline; }
.lead-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.lead-form__submit:disabled { opacity: 0.5; cursor: wait; }
.lead-form__status {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-height: 1.4em;
}
.lead-form__status--ok { color: var(--jungle-hi); }
.lead-form__status--err { color: #ff6b6b; }
.lead-form__status--sending { color: var(--bone-mut); }

/* Required-field asterisk — small, red, visible. */
.lead-form__req {
  color: #ff5a5a;
  font-weight: 600;
  margin-left: 2px;
  font-size: 0.95em;
}
.lead-form__required-note {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bone-mut);
  margin: 0 0 var(--space-3);
}
.lead-form__required-note .lead-form__req { margin-right: 4px; }

/* Success panel — overlays on top of the form (modal-style) on
   successful submit. Hidden by default (the [hidden] attribute is
   explicitly enforced here because the base .lead-form__success
   sets display: flex, which would otherwise win over the browser's
   default `[hidden] { display: none }`). */
.lead-form { position: relative; }
.lead-form__success[hidden] { display: none; }
.lead-form__success {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
  background: rgba(10, 8, 7, 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1.5px solid var(--jungle-hi);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(111, 224, 176, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  animation: leadFormSuccessIn 320ms var(--ease);
}
@keyframes leadFormSuccessIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.lead-form__success-icon {
  color: var(--jungle-hi);
  width: 64px;
  height: 64px;
}
.lead-form__success-icon svg {
  width: 100%;
  height: 100%;
}
.lead-form__success-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.lead-form__success-title span { color: var(--jungle-hi); font-weight: 500; }
.lead-form__success-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--bone);
  margin: 0;
  max-width: 44ch;
}
.lead-form__success-body strong {
  color: var(--jungle-hi);
  font-weight: 600;
}
.lead-form__success-urgent {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bone-mut);
  margin: var(--space-2) 0 0;
}
.lead-form__success-urgent a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}
.lead-form__success-urgent a:hover { color: var(--accent-hi); }

/* ── Phone-input component (country select + tel) ───────────────────
   Used by both the main lead form and the contact popover. The
   visible markup is stacked: label · select · label · tel. The
   hidden input that actually submits is invisible but tracked. */
.phone-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.phone-field__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mut);
}
.phone-field__label--tel { margin-top: 8px; }
.phone-field__country,
.phone-field__tel {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  color: var(--bone);
  background: rgba(244, 239, 229, 0.04);
  border: 1px solid rgba(244, 239, 229, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
  -webkit-appearance: none;
          appearance: none;
}
.phone-field__country {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='rgba(244,239,229,.6)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.phone-field__country option { color: #0a0807; background: var(--bone); }
.phone-field__country option:disabled { color: rgba(10, 8, 7, 0.4); }
.phone-field__country:focus,
.phone-field__tel:focus {
  outline: none;
  border-color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.06);
}

/* New popover row that wraps just the submit button (the phone
   input has been promoted to its own block above this row). */
.wa-popover__callback-actions {
  display: flex;
  margin-top: 12px;
  margin-bottom: 8px;
}
.wa-popover__callback-actions button[type="submit"] {
  flex: 1 1 auto;
  padding: 12px 16px;
}

/* Popover overrides — tighter padding + lighter borders so it fits
   the narrow chooser column. */
.wa-popover__callback .phone-field { gap: 4px; }
.wa-popover__callback .phone-field__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone-mut);
}
.wa-popover__callback .phone-field__country,
.wa-popover__callback .phone-field__tel {
  padding: 11px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.03);
  font-size: 14px;
}
.wa-popover__callback .phone-field__country:focus,
.wa-popover__callback .phone-field__tel:focus {
  border-color: rgba(196, 163, 90, 0.6);
  background: rgba(244, 239, 229, 0.06);
}

/* Sala de negocios */
.landing-sala {
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(244, 239, 229, 0.02);
}
.landing-sala__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: var(--space-2) 0 var(--space-3);
}
.landing-sala__title--sm { font-size: clamp(18px, 1.7vw, 22px); }
.landing-sala__address {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 var(--space-3);
  font-style: normal;
}
.landing-sala__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.landing-sala__divider {
  height: 1px;
  background: var(--hairline);
  margin: var(--space-4) 0;
}
.landing-team {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.landing-team__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.landing-team__card:hover,
.landing-team__card:focus-visible {
  border-color: var(--jungle-hi);
  background: rgba(111, 224, 176, 0.06);
}
.landing-team__card img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.landing-team__meta { display: flex; flex-direction: column; gap: 2px; }
.landing-team__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--bone);
  margin: 0;
}
.landing-team__role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone-mut);
  margin: 0;
}
.landing-sala__all-team {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jungle-hi);
  text-decoration: none;
}
.landing-sala__all-team:hover,
.landing-sala__all-team:focus-visible { color: var(--accent); }
/* Hide "Ver equipo completo →" on mobile — the team cards are already
   shown right above, so the link to proyecto.html#contacto is redundant
   on small screens. */
@media (max-width: 640px) {
  .landing-sala__all-team { display: none; }
}

/* ── More link ────────────────────────────────────────────────────── */
.landing-more {
  padding-block: clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.landing-more__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.landing-more__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--bone-mut);
  margin: 0;
}

/* ── Header WhatsApp button (mobile) ──────────────────────────────────
   On mobile the header hides its text CTAs, so this compact green
   WhatsApp button lives in the sticky top bar beside the ES·EN toggle —
   always on screen. Hidden on desktop, where the full "Hablemos" CTA
   already sits in the header. Replaced the old floating bubble. */
.landing-header__wa-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color var(--dur-micro) var(--ease);
}
.landing-header__wa-mobile svg { display: block; }
.landing-header__wa-mobile:hover,
.landing-header__wa-mobile:focus-visible { background: #1ebe5d; }
@media (max-width: 640px) {
  .landing-header__wa-mobile { display: inline-flex; }
}

/* Footer link variant on landing */
.agycon-footer__link-plain {
  font-family: var(--font-sans);
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--dur-micro) var(--ease);
}
.agycon-footer__link-plain:hover { opacity: 1; color: var(--jungle-hi); }

/* ── Mobile sticky persona chips (≤720px only) ───────────────────── */
.landing-mobile-chips { display: none; }
.landing-mobile-chips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0, 1fr) — NOT plain 1fr (= minmax(auto, 1fr)). With auto the
     four chips refuse to shrink below their text min-content, so the row
     blows past 360px ("Consultorio"/"Apartasuite" don't fit) and drags the
     fixed nav + whole page into horizontal scroll. minmax(0,...) lets the
     four tracks split the width evenly. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.landing-mobile-chips__chip {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: rgba(244, 239, 229, 0.04);
  border: 1px solid rgba(244, 239, 229, 0.2);
  color: var(--bone);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 9px 6px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.landing-mobile-chips__chip:active,
.landing-mobile-chips__chip.is-active {
  background: rgba(196, 163, 90, 0.22);
  border-color: rgba(196, 163, 90, 0.55);
  color: #f0e3bf;
}
@media (max-width: 720px) {
  body.landing-page main { padding-bottom: 70px; }
  .landing-mobile-chips {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(8, 6, 5, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--hairline);
  }
}

/* ── wa-popover callback / success variants ──────────────────────── */
.wa-popover__callback,
.wa-popover__success { display: none; }
.wa-popover[data-mode="callback"] .wa-popover__option,
.wa-popover[data-mode="callback"] .wa-popover__hint { display: none; }
.wa-popover[data-mode="callback"] .wa-popover__callback { display: block; }
.wa-popover[data-mode="callback-success"] .wa-popover__option,
.wa-popover[data-mode="callback-success"] .wa-popover__hint,
.wa-popover[data-mode="callback-success"] .wa-popover__callback { display: none; }
.wa-popover[data-mode="callback-success"] .wa-popover__success { display: block; }

.wa-popover__callback { margin-top: 6px; }
.wa-popover__callback-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
  margin: 0 0 6px;
}
.wa-popover__callback-hint {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mut);
  margin: 0 0 var(--space-3);
}
.wa-popover__callback-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.wa-popover__callback input[type="tel"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.03);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
}
.wa-popover__callback input[type="tel"]:focus {
  outline: none;
  border-color: rgba(196, 163, 90, 0.6);
  background: rgba(244, 239, 229, 0.06);
}
.wa-popover__callback button[type="submit"] {
  appearance: none;
  border: 1px solid rgba(196, 163, 90, 0.6);
  background: rgba(196, 163, 90, 0.18);
  color: #f0e3bf;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wa-popover__callback button[type="submit"]:hover {
  background: rgba(196, 163, 90, 0.3);
  border-color: rgba(196, 163, 90, 0.8);
}
.wa-popover__callback button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wa-popover__callback-error {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #e8806c;
  margin: 0 0 8px;
  min-height: 0;
}
.wa-popover__callback-back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--bone-mut);
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
}
.wa-popover__callback-back:hover { color: var(--bone); }

.wa-popover__success {
  text-align: center;
  padding: 8px 4px 4px;
}
.wa-popover__success-icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(62, 166, 134, 0.18);
  border: 1px solid rgba(62, 166, 134, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6cd2a3;
}
.wa-popover__success-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--bone);
  margin: 0 0 6px;
}
.wa-popover__success-msg {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mut);
  margin: 0;
}

/* ── Image / hero disclaimer ─────────────────────────────────────
   Small overlay at the base of key images, hero videos, and tour
   viewer — flags everything as artistic/reference, not contractual.
   Container needs position:relative; default places at bottom edge. */
.img-disclaimer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Monaco, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(244, 239, 229, 0.62);
  background: linear-gradient(to top, rgba(8, 18, 14, 0.7), rgba(8, 18, 14, 0));
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .img-disclaimer { font-size: 9px; padding: 4px 8px; letter-spacing: 0.04em; }
}

/* Hero variant: sits at top inside the dark legal-header / "frost"
   strip used on the tour viewer page. Static, not absolute. */
.tour-disclaimer-strip {
  width: 100%;
  padding: 4px 12px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Monaco, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(244, 239, 229, 0.55);
  background: rgba(8, 18, 14, 0.45);
  border-top: 1px solid rgba(244, 239, 229, 0.06);
  pointer-events: none;
}
@media (max-width: 480px) {
  .tour-disclaimer-strip { font-size: 9px; padding: 3px 8px; letter-spacing: 0.04em; }
}