/* =========================================================
   Light Towers · concept redesign by Insight
   Tokens → base → glass kit → global UI → acts
   ========================================================= */

:root {
  /* Palette sampled from the renders: blue-hour hero, white building */
  --night: #0A1220;       /* blue-hour sky, deepest */
  --deep: #101B2C;        /* raised surfaces */
  --slate: #1E2E44;       /* slate blue of the facade at dusk */
  --bone: #F2EEE8;        /* LED warm white, main text */
  --bone-2: #C9D0D9;      /* secondary text (AA on night) */
  --mist: #93A4B8;        /* tertiary text (AA on night) */
  --amber: #8A5A2B;       /* dark bronze: thread + accents only */
  --amber-soft: #C79A62;
  --line: rgba(28, 31, 36, .12);

  /* Building white (facade slabs) for the light acts */
  --paper: #ECE8E1;
  --paper-2: #E2DCD2;
  --paper-3: #DFD8CD;     /* deeper building white (act 6) */
  --ink: #1C1F24;
  --ink-2: #474C54;
  --ink-3: #686C72;

  /* UI that floats over both surfaces (nav, cursor, floating buttons, thread) */
  --ui-fg: var(--bone); --ui-fg-2: var(--bone-2); --ui-fg-3: var(--mist);
  --glass-a: rgba(255, 255, 255, .10); --glass-b: rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .14); --glass-hi: rgba(255, 255, 255, .28);
  --tint: rgba(255, 255, 255, .06); --pill: rgba(255, 255, 255, .14);
  --thread-core: var(--amber-soft); --thread-glow: .6; --cursor-ring: rgba(242, 238, 232, .45);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 64px;
}
:root[data-surface="light"] {
  --ui-fg: var(--ink); --ui-fg-2: var(--ink-2); --ui-fg-3: var(--ink-3);
  --glass-a: rgba(255, 255, 255, .66); --glass-b: rgba(255, 255, 255, .44);
  --glass-border: rgba(28, 31, 36, .10); --glass-hi: rgba(255, 255, 255, .95);
  --tint: rgba(28, 31, 36, .06); --pill: rgba(28, 31, 36, .08);
  --thread-core: var(--amber); --thread-glow: .35; --cursor-ring: rgba(28, 31, 36, .4);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* Language switch: only the active language is rendered */
html[data-lang="es"] [data-l="en"],
html[data-lang="en"] [data-l="es"] { display: none !important; }

.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
}
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.015em;
  line-height: .92;
  margin: 0;
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--amber); color: var(--night); font-weight: 600;
  transition: top .3s var(--ease);
}
.skip:focus-visible { top: 16px; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 6%); }
  80% { transform: translate(5%, -2%); }
  100% { transform: translate(0, 0); }
}

/* =========================================================
   GLASS KIT (Apple-style)
   ========================================================= */
.glass {
  --mx: 50%; --my: 0%;
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  color: var(--ui-fg);
  transition: background .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),   /* top highlight */
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 10px 30px -10px rgba(0, 0, 0, .45);
}
/* Subtle reflection that follows the cursor (set --mx/--my in JS) */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, .14), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.glass:hover::before { opacity: 1; }
.glass-inset {
  background: var(--tint);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(16, 27, 44, .92); }
}

/* Buttons */
.btn {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  white-space: nowrap;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
  will-change: transform;
}
.btn__label { position: relative; display: inline-block; transition: transform .5s var(--ease); }
.btn:active { transform: scale(.96) !important; }
.btn--amber {
  background: var(--amber); color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px -8px rgba(138, 90, 43, .55);
}
.btn--amber::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(255, 255, 255, .45), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn--amber:hover::before { opacity: 1; }
.btn--amber:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 34px -6px rgba(138, 90, 43, .75); }
.btn--glass { color: var(--bone); }

/* =========================================================
   THREAD OF LIGHT
   ========================================================= */
.thread {
  position: fixed; inset: 0; z-index: 60;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none; overflow: visible;
}
/* From act 4 on the global thread is never shown (acts 7–8 draw their own line) */
.thread-off .thread { visibility: hidden !important; }
.thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread__core { stroke: var(--thread-core); stroke-width: 1.5; transition: stroke .6s var(--ease); }
.thread__glow { stroke: var(--amber-soft); stroke-width: 7; opacity: var(--thread-glow); filter: url(#threadBlur); }
.thread__stair { stroke: rgba(138, 90, 43, .45); stroke-width: 1; visibility: hidden; }
.thread__serpent { stroke: #A9692A; stroke-width: 2.5; visibility: hidden; }
.thread__serpent-glow { stroke-width: 12; opacity: 1; visibility: hidden; }

/* =========================================================
   ACT 0 · PRELOADER
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  cursor: pointer;
}
.preloader__half {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--night);
}
.preloader__half--top { top: 0; }
.preloader__half--bottom { bottom: 0; }
.preloader__meta {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50% - 40px);
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--bone-2);
}
.preloader__count { font-variant-numeric: tabular-nums; color: var(--amber-soft); }
.preloader__skip {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  color: var(--mist);
}
.preloader.is-done { pointer-events: none; }
.preloader.is-gone { display: none; }
/* No JS: never trap the page behind the preloader */
html:not(.js) .preloader { display: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; z-index: 80; top: 14px; left: 14px; right: 14px;
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--nav-h); padding: 0 10px 0 22px;
  border-radius: 999px;
  max-width: 1400px; margin: 0 auto;
}
.nav__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__logo img { width: 124px; height: auto; transition: filter .6s var(--ease); }
/* White PNG: over paper it turns ink, like the Pininfarina logo in act 3 */
:root[data-surface="light"] .nav__logo img { filter: brightness(.15); }

.nav__acts ol { display: flex; gap: 2px; }
.nav__acts a {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 11px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ui-fg-2);
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
.nav__acts a i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ui-fg-3); transition: color .4s var(--ease); }
.nav__acts a:hover { color: var(--ui-fg); background: var(--tint); }
.nav__acts a.is-active { color: var(--ui-fg); }
.nav__acts a.is-active i { color: var(--amber); }
/* Progress indicator under each act */
.nav__p {
  position: absolute; left: 11px; right: 11px; bottom: 7px; height: 1px;
  background: var(--amber);
  transform-origin: left; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 6px rgba(138, 90, 43, .8);
}

.nav__right { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { display: flex; padding: 3px; border-radius: 999px; }
.lang button {
  min-width: 44px; min-height: 38px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  color: var(--ui-fg-3); transition: background-color .4s var(--ease), color .4s var(--ease);
}
.lang button:hover { color: var(--ui-fg); }
.lang button[aria-pressed="true"] { background: var(--pill); color: var(--ui-fg); box-shadow: inset 0 1px 0 var(--glass-hi); }

.nav__menu {
  display: none;
  align-items: center; justify-content: center;
  min-width: 56px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.nav__menu-total { color: var(--ui-fg-3); }

.sheet {
  pointer-events: auto;
  margin: 10px 0 0 auto; max-width: 320px;
  border-radius: 24px; padding: 10px;
}
.sheet__list a {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 0 14px; border-radius: 14px;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ui-fg-2);
}
.sheet__list a i { font-style: normal; color: var(--ui-fg-3); }
.sheet__list a.is-active { color: var(--ui-fg); background: var(--tint); }
.sheet__list a.is-active i { color: var(--amber); }
.sheet__list .nav__p { display: none; }

/* Hide act labels (keep numbers) when space is tight */
@media (max-width: 1360px) {
  .nav__acts a span { display: none !important; }
  .nav__acts a.is-active span[data-l] { display: inline !important; }
  html[data-lang="es"] .nav__acts a.is-active [data-l="en"],
  html[data-lang="en"] .nav__acts a.is-active [data-l="es"] { display: none !important; }
}
@media (max-width: 960px) {
  .nav { top: 10px; left: 10px; right: 10px; }
  .nav__bar { padding: 0 6px 0 16px; height: 58px; }
  .nav__logo img { width: 104px; }
  .nav__acts { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__right .btn { padding: 0 16px; font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 420px) {
  .nav__right { gap: 4px; }
  .nav__logo img { width: 92px; }
  .lang button { min-width: 40px; padding: 0 6px; }
  .nav__right .btn { padding: 0 12px; }
}

/* ---------- Floating WhatsApp (mobile only) ---------- */
.wa-float {
  position: fixed; z-index: 75; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: none; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  color: var(--ui-fg);
}
.wa-float svg { width: 24px; height: 24px; }
@media (max-width: 960px) { .wa-float { display: inline-flex; } }

/* ---------- Custom cursor ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .has-cursor .cursor { display: block; }
  .cursor { position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; }
  .cursor__dot, .cursor__ring {
    position: absolute; left: 0; top: 0; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 10px rgba(138, 90, 43, .9); }
  .cursor__ring {
    width: 34px; height: 34px;
    border: 1px solid var(--cursor-ring);
    transition: width .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  }
  .cursor.is-hover .cursor__ring { width: 58px; height: 58px; border-color: rgba(138, 90, 43, .7); background: rgba(138, 90, 43, .06); }
  .cursor.is-down .cursor__ring { width: 26px; height: 26px; }
}

/* =========================================================
   ACT 1 · LLEGAR (hero)
   Default CSS = final static state (no JS / reduced motion)
   ========================================================= */
.hero { background: var(--night); }
.hero__stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100lvh;
  --ui-bottom: calc(100lvh - 100svh);
}
/* Orbit shares the layers' box (inset -4%) and framing so it lands on them exactly */
.hero__canvas, .hero__video {
  position: absolute; left: -4%; top: -4%; width: 108%; height: 108%;
  max-width: none; /* the global max-width:100% shrank only the width → framing mismatch */
  object-fit: cover; object-position: 46% 50%;
  opacity: 0; visibility: hidden;
}
.hero__scene { position: absolute; inset: 0; }
.layer { position: absolute; inset: -4%; will-change: transform; }
.layer__in { position: absolute; inset: 0; will-change: transform; }
.layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 50%;
}
.layer .is-night { opacity: 0; }

/* Contrast: top for the nav, bottom-left for the copy, center for the title */
.hero__grad {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 18, 32, .55) 0%, rgba(10, 18, 32, 0) 22%),
    linear-gradient(0deg, rgba(10, 18, 32, .92) 0%, rgba(10, 18, 32, .55) 30%, rgba(10, 18, 32, 0) 58%),
    radial-gradient(60% 45% at 50% 42%, rgba(10, 18, 32, .35), transparent 70%);
}

.hero__intro {
  position: absolute; left: 0; right: 0; top: 18%;
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: 0 var(--gutter); text-align: center;
  pointer-events: none;
}
.hero.is-anim .hero__intro { top: 50%; transform: translateY(-50%); }
.hero__by { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--bone-2); }
.hero__by img { width: clamp(110px, 10vw, 150px); height: auto; }
.hero__place { margin: 0; color: var(--bone-2); }
.hero__title {
  font-size: clamp(64px, 13.5vw, 232px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .86;
  color: var(--bone);
  text-shadow: 0 2px 40px rgba(10, 18, 32, .45);
}
.hero__title .char { will-change: transform; }

.hero__final {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(clamp(32px, 6vh, 64px) + var(--ui-bottom));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero__copy { max-width: 620px; }
.hero__eyebrow { margin: 0 0 18px; color: var(--amber-soft); }
.hero__claim { font-size: clamp(44px, 6vw, 96px); color: var(--bone); }
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: block; }
.hero__body { margin: 22px 0 0; max-width: 34em; color: var(--bone-2); font-size: 16px; line-height: 1.6; }

/* Dusk / night toggle (glass segmented control) */
.mode {
  display: inline-flex; padding: 4px; border-radius: 999px; flex: none;
}
.mode button {
  position: relative; z-index: 1;
  min-height: 44px; min-width: 112px; padding: 0 18px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-2); transition: color .5s var(--ease);
}
.mode button[aria-pressed="true"] { color: var(--night); }
.mode__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--bone);
  box-shadow: inset 0 1px 0 #fff, 0 4px 16px -4px rgba(0, 0, 0, .4);
  transition: transform .7s var(--ease);
}
.hero[data-mode="night"] .mode__pill { transform: translateX(100%); }

.hero__steps {
  --edge: 1;
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column;
}
.hero__steps i {
  flex: 1; margin-top: -1px;
  background: var(--paper);
  box-shadow: inset 0 1px 0 rgba(138, 90, 43, calc(.6 * var(--edge)));
  transform: scaleX(0);
}

/* Brand curtains (Branson → Pininfarina → phrase → panels open on the hero) */
.marcas {
  display: grid; justify-items: center; gap: clamp(64px, 10vh, 120px);
  padding: clamp(120px, 16vh, 180px) var(--gutter);
  background: var(--night); color: var(--bone); text-align: center;
}
.marcas__panels { display: none; }
.marcas__item { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.marcas__branson { width: clamp(96px, 8vw, 132px); height: auto; }
.marcas__pf { width: clamp(220px, 22vw, 340px); height: auto; }
.marcas__label { margin: 0; color: var(--bone-2); }
.marcas__phrase {
  position: relative; margin: 0; font-size: clamp(44px, 6vw, 96px); line-height: 1.04;
  color: var(--amber-soft); /* same bronze light as the thread on dark */
  text-shadow: 0 0 22px rgba(199, 154, 98, .28); /* a quiet glow, close to the letters */
}
.marcas__halo { display: none; }
.hero.is-anim .marcas__halo {
  display: block; position: absolute; left: 50%; top: 50%;
  width: min(84vw, 980px); aspect-ratio: 2.4; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(199, 154, 98, .11), rgba(199, 154, 98, .06) 30%, rgba(199, 154, 98, .025) 58%, rgba(199, 154, 98, .008) 80%, rgba(199, 154, 98, 0));
  opacity: 0; pointer-events: none;
}
.marcas__phrase .ln { overflow: visible; padding: 0; margin: 0; } /* no masks: chars fade in */
.marcas__phrase .char { display: inline-block; will-change: transform, opacity, filter; }
/* Motion: a layer over the whole hero stage, under the scroll hint */
.hero.is-anim .marcas { position: absolute; inset: 0; display: block; padding: 0; background: transparent; }
.hero.is-anim .marcas__panels { display: flex; position: absolute; inset: 0; background: var(--night); }
.hero.is-anim .marcas__panels i { flex: 1; margin-right: -1px; background: var(--night); will-change: transform; } /* -1px: no seams */
.hero.is-anim .marcas__item { position: absolute; inset: 0; justify-content: center; padding: 0 var(--gutter); }
@media (max-width: 960px) {
  .marcas__phrase { font-size: clamp(38px, 10.5vw, 60px); }
  .hero.is-anim .marcas__panels i:nth-child(n + 5) { display: none; }
}

.hero__scroll {
  position: absolute; left: 50%; bottom: calc(28px + var(--ui-bottom)); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 12px;
  color: var(--bone-2);
}
.hero.is-anim .hero__scroll { display: flex; }
.hero__scroll i {
  width: 1px; height: 44px; overflow: hidden; position: relative;
  background: rgba(242, 238, 232, .2);
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--amber); animation: drip 1.8s var(--ease) infinite;
}
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

@media (max-width: 960px) {
  .hero__final { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__title { font-size: clamp(56px, 17vw, 120px); }
  .hero__title .word, .hero__title { word-spacing: 100vw; } /* one word per line */
  .mode button { min-width: 0; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .hero__body { display: none; }
}

/* =========================================================
   ACT 2 · ORIGEN
   Shapes live in the fixed thread SVG; this act holds the copy.
   ========================================================= */
.origen { background: var(--paper); color: var(--ink); }
.origen__stage {
  position: relative;
  padding: clamp(120px, 16vh, 180px) var(--gutter);
  display: grid; gap: 72px;
}
.origen__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(38% 30% at 66% 74%, rgba(199, 154, 98, .22), transparent 70%);
}
.origen__copy { position: relative; max-width: 560px; }
.origen__eyebrow { margin: 0 0 22px; color: var(--amber); }
.origen__title { font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--ink); }
/* Masks with room for accents (Í, á) and descenders so lines never collide */
.origen__title .ln { overflow: visible; padding: 0; margin: 0; } /* no masks: chars fade in, nothing can be clipped */
.origen__title .char { display: inline-block; will-change: transform, opacity, filter; }
.origen__body { margin: 26px 0 0; max-width: 32em; color: var(--ink-2); }

/* Animated layout: pinned stage, copy on the left, shape on the right */
/* Act 2 tucks 45% of a screen under the end of the hero (already solid paper there):
   less scroll with only the line on screen before the pyramid starts */
.origen.is-anim { margin-top: -45vh; }
.origen.is-anim .origen__stage {
  height: 100vh; height: 100lvh; padding: 0; display: block; overflow: hidden;
}
.origen.is-anim .origen__copy {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(36vw, 520px);
}
@media (max-width: 960px) {
  .origen__glow { background: radial-gradient(60% 30% at 50% 44%, rgba(199, 154, 98, .24), transparent 70%); }
  .origen.is-anim .origen__copy {
    top: auto; transform: none; width: auto; right: var(--gutter);
    bottom: calc(40px + (100lvh - 100svh));
  }
  .origen__title { font-size: clamp(38px, 10.5vw, 60px); }
  .origen__body { font-size: 16px; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .origen.is-anim .origen__body { display: none; }
}

/* =========================================================
   ACT 3 · DISEÑO
   Thread frame → window (clip-path) → full-screen render + quote
   ========================================================= */
.diseno { background: var(--paper); color: var(--ink); }
.diseno__stage {
  position: relative;
  padding: clamp(120px, 16vh, 180px) var(--gutter);
  display: grid; gap: 48px;
}
.diseno__eyebrow { margin: 0 0 22px; color: var(--amber); }
.diseno__title { font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--ink); }
.diseno__title .char { display: inline-block; will-change: transform, opacity, filter; }
.diseno__window { margin: 0; overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.diseno__window img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.diseno__over { display: grid; gap: 28px; justify-items: start; }
.diseno__logo { width: 150px; height: auto; filter: brightness(.15); }
.diseno__quote { margin: 0; max-width: 18em; }
.diseno__quote p { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.1; margin: 0 0 18px; }
.diseno__quote footer { color: var(--ink-3); }
.diseno__award { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); width: 100%; }

/* Animated: everything layered on one pinned screen */
.diseno.is-anim .diseno__stage { height: 100vh; height: 100lvh; padding: 0; display: block; overflow: hidden; }
.diseno.is-anim .diseno__intro {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(36vw, 520px);
}
.diseno.is-anim .diseno__window {
  position: absolute; inset: 0; border-radius: 0;
  clip-path: inset(50% 50% 50% 50%);   /* JS sets the frame rect, then opens it */
}
.diseno.is-anim .diseno__window img { aspect-ratio: auto; }
.diseno.is-anim .diseno__over {
  /* Centered in the patch of sky above the trees; white type, no panels or gradients */
  position: absolute; left: 48%; top: calc(var(--nav-h) + clamp(28px, 6vh, 64px));
  transform: translateX(-50%);
  width: min(860px, calc(100% - 2 * var(--gutter)));
  justify-items: center; text-align: center; gap: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 45, 80, .35), 0 2px 18px rgba(20, 45, 80, .35);
}
.diseno.is-anim .diseno__logo { filter: drop-shadow(0 1px 8px rgba(20, 45, 80, .4)); }
.diseno.is-anim .diseno__quote { max-width: none; }
.diseno.is-anim .diseno__quote p { font-size: clamp(28px, 2.8vw, 44px); margin-bottom: 14px; }
.diseno.is-anim .diseno__quote footer { color: #fff; }
.diseno.is-anim .diseno__award { color: #fff; border-top-color: rgba(255, 255, 255, .45); width: auto; padding: 14px 8px 0; }

@media (max-width: 960px) {
  .diseno.is-anim .diseno__intro {
    top: auto; transform: none; width: auto; right: var(--gutter);
    bottom: calc(40px + (100lvh - 100svh));
  }
  .diseno__title { font-size: clamp(38px, 10.5vw, 60px); }
  .diseno__quote p { font-size: clamp(26px, 7.4vw, 40px); }
  .diseno.is-anim .diseno__over { left: 50%; top: calc(var(--nav-h) + 24px); gap: 14px; }
  .diseno.is-anim .diseno__quote p { font-size: clamp(22px, 6vw, 30px); }
  .diseno.is-anim .diseno__logo { width: 120px; }
}

/* =========================================================
   ACT 4 · EXPLORAR
   Overview render + glass hotspots → zoom to a zone + glass card.
   The cam box has the render's exact aspect, so hotspot % = real zones.
   ========================================================= */
.explorar { background: var(--night); color: var(--bone); }
.explorar__stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100lvh;
  --ui-bottom: calc(100lvh - 100svh);
}
.explorar__scene { position: absolute; inset: 0; }
.explorar__view { position: absolute; inset: 0; will-change: transform; }
/* No-JS / reduced motion: centered "cover" box. JS sets px size + transform. */
.explorar__cam {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78vh); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  touch-action: pan-y;
}
.explorar.is-cam .explorar__cam { left: 0; top: 0; transform: none; aspect-ratio: auto; }
.explorar__cam img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
.explorar__cam::after { /* soft vignette for the copy (sky) and the chips (ground) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 18, 32, .35), rgba(10, 18, 32, 0) 26%, rgba(10, 18, 32, 0) 78%, rgba(10, 18, 32, .45));
}
.explorar__spots { position: absolute; inset: 0; z-index: 1; }

/* Hotspot: glass dot that pulses, label on hover/focus */
.hs {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.hs__dot {
  position: relative; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3px, rgba(255, 255, 255, .18) 3.5px);
  border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 18px rgba(199, 154, 98, .55);
  transition: box-shadow .5s var(--ease); /* no transform transition: GSAP scrubs this scale */
}
.hs__dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255, 238, 214, .8);
  animation: hsPulse 2.4s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes hsPulse {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.hs__label {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 18, 32, .55);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  opacity: 0; transform: translate(-50%, 6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.hs:hover .hs__dot, .hs:focus-visible .hs__dot, .hs.is-active .hs__dot { transform: scale(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 26px rgba(199, 154, 98, .9); }
.hs:hover .hs__label, .hs:focus-visible .hs__label, .hs.is-active .hs__label { opacity: 1; transform: translate(-50%, 0); }
.hs:focus-visible { outline-color: var(--amber-soft); outline-offset: 0; border-radius: 50%; }

/* Copy in the clean sky (top right on desktop) */
.explorar__copy {
  position: absolute; right: var(--gutter); top: calc(var(--nav-h) + clamp(30px, 6vh, 64px));
  max-width: min(720px, 56vw); text-align: right;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 45, 80, .35), 0 2px 18px rgba(20, 45, 80, .35);
}
.explorar__eyebrow { margin: 0 0 16px; color: var(--bone-2); }
.explorar__title { font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: #fff; }
.explorar__title .ln { overflow: visible; padding: 0; margin: 0; }
.explorar__title .char { display: inline-block; will-change: transform, opacity, filter; }
/* Hint sits where "Vista general" appears (they never show together) */
.explorar__hint {
  position: absolute; left: 50%; bottom: calc(clamp(24px, 5vh, 48px) + 14px + var(--ui-bottom)); translate: -50% 0;
  margin: 0; white-space: nowrap; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-shadow: 0 1px 2px rgba(20, 45, 80, .35), 0 2px 18px rgba(20, 45, 80, .35);
}
.explorar__hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(199, 154, 98, .9); }

/* Mobile chips */
.explorar__chips {
  position: absolute; left: 0; right: 0; bottom: calc(20px + var(--ui-bottom) + env(safe-area-inset-bottom));
  display: none; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 4px 88px 4px var(--gutter);
  scroll-snap-type: x proximity;
}
.explorar__chips::-webkit-scrollbar { display: none; }
.explorar__chips button {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone); scroll-snap-align: start;
  background: rgba(10, 18, 32, .5);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.explorar__chips button i { font-style: normal; color: var(--amber-soft); font-variant-numeric: tabular-nums; }

/* "Vista general" */
.explorar__back {
  position: absolute; left: 50%; bottom: calc(clamp(24px, 5vh, 48px) + var(--ui-bottom));
  translate: -50% 0; z-index: 3;
}
.explorar__back[hidden] { display: none; }
.explorar__back .btn__label { display: inline-flex; align-items: center; gap: 10px; }

/* Glass card (darker glass so text stays AA over any part of the photo) */
.spot {
  position: absolute; z-index: 4;
  right: var(--gutter); top: 50%; translate: 0 -50%;
  width: min(400px, 34vw);
  max-height: calc(100svh - var(--nav-h) - 72px); overflow: auto;
  margin-top: calc(var(--nav-h) / 2);
  padding: 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 27, 44, .62), rgba(10, 18, 32, .5));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  color: var(--bone);
}
.spot__close {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bone);
  background: rgba(10, 18, 32, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .4s var(--ease);
}
.spot__close:hover { background: rgba(10, 18, 32, .75); }
.spot__media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--deep); }
.spot__media img, .spot__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot__media video { display: none; }
.spot.has-video .spot__media video { display: block; }
.spot.has-video .spot__media img { display: none; }
.spot__body { padding: 20px 14px 14px; }
.spot__num { margin: 0 0 10px; color: var(--amber-soft); font-variant-numeric: tabular-nums; }
.spot__title { font-size: clamp(32px, 2.8vw, 44px); line-height: 1.04; color: var(--bone); margin: 0 0 12px; }
.spot__text { margin: 0; color: var(--bone-2); font-size: 16px; line-height: 1.6; }

@media (max-width: 960px) {
  .explorar__copy {
    left: var(--gutter); right: var(--gutter); top: calc(58px + 10px + 24px);
    max-width: none; text-align: center;
  }
  .explorar__eyebrow { margin-bottom: 10px; }
  .explorar__title { font-size: clamp(38px, 10.5vw, 60px); }
  .explorar__hint { bottom: auto; top: calc(58px + 10px + 24px + 104px); }
  .explorar__chips { display: flex; }
  .explorar__back { bottom: auto; top: calc(58px + 10px + 14px); }
  .explorar.is-card-top .explorar__back { top: auto; bottom: calc(24px + var(--ui-bottom) + env(safe-area-inset-bottom)); }
  .hs__label { display: none; }
  /* Bottom sheet */
  .spot {
    left: 10px; right: 10px; top: auto; bottom: calc(10px + var(--ui-bottom) + env(safe-area-inset-bottom));
    translate: none; margin: 0; width: auto;
    max-height: 58svh; border-radius: 22px;
  }
  .spot.spot--top { top: calc(58px + 10px + 10px); bottom: auto; }
  .spot__media { aspect-ratio: 2 / 1; }
  .spot__body { padding: 16px 10px 8px; }
  .spot__title { font-size: clamp(28px, 8vw, 36px); }
}
@media (max-width: 960px) and (max-height: 700px) {
  .spot__media { display: none; }
  .spot__close { background: transparent; border-color: rgba(255, 255, 255, .2); }
}
@media (prefers-reduced-motion: reduce) {
  .hs__dot::after { animation: none; opacity: 0; }
}

/* =========================================================
   ACT 5 · VIVIR (scrollytelling: a day at Light Towers)
   Media fixed on one side, copy changes on the other; each amenity
   enters with its own geometric mask. Default = stacked list.
   ========================================================= */
.vivir { background: var(--paper); color: var(--ink); }
.vivir__stage {
  position: relative;
  padding: clamp(120px, 16vh, 180px) var(--gutter);
  display: grid; gap: clamp(56px, 8vh, 96px);
}
.vivir__eyebrow { margin: 0 0 14px; color: var(--amber); }
.vivir__h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; color: var(--ink); }
.vivir__bar { display: none; }
.vivir__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.vivir__media { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--paper-2); aspect-ratio: 16 / 10; order: 2; }
.vivir__media img, .vivir__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vivir__text { order: 1; max-width: 520px; }
.vivir__meta { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-3); }
.vivir__num { color: var(--amber); font-variant-numeric: tabular-nums; }
.vivir__time { font-variant-numeric: tabular-nums; color: var(--ink); }
.vivir__title { font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--ink); }
.vivir__title .ln { overflow: visible; padding: 0; margin: 0; }
.vivir__title .char { display: inline-block; will-change: transform, opacity, filter; }
.vivir__body { margin: 22px 0 0; max-width: 30em; color: var(--ink-2); }

/* Animated: one pinned screen */
.vivir.is-anim .vivir__stage { height: 100vh; height: 100lvh; padding: 0; display: block; overflow: hidden; }
.vivir.is-anim .vivir__head {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 14px + clamp(28px, 5vh, 56px));
  width: min(36vw, 520px);
}
.vivir.is-anim .vivir__bar {
  display: block; position: relative; margin-top: 18px; height: 1px; width: 100%;
  background: var(--line);
}
.vivir__bar i {
  position: absolute; inset: 0; background: var(--amber);
  transform-origin: left; transform: scaleX(0);
}
.vivir.is-anim .vivir__item { display: contents; }
.vivir.is-anim .vivir__media {
  position: absolute; aspect-ratio: auto; border-radius: 4px;
  left: 46vw; right: var(--gutter);
  top: calc(var(--nav-h) + 14px + 24px); bottom: clamp(28px, 5vh, 48px);
  will-change: clip-path;
}
.vivir.is-anim .vivir__text {
  position: absolute; left: var(--gutter); top: 54%; transform: translateY(-50%);
  width: min(36vw, 520px);
}

@media (max-width: 960px) {
  .vivir__item { grid-template-columns: 1fr; gap: 24px; }
  .vivir__media { order: 0; }
  .vivir__title { font-size: clamp(38px, 10.5vw, 60px); }
  .vivir.is-anim .vivir__head { top: calc(58px + 10px + 20px); right: var(--gutter); width: auto; }
  .vivir.is-anim .vivir__h2 { font-size: 24px; }
  .vivir.is-anim .vivir__eyebrow { margin-bottom: 8px; }
  .vivir.is-anim .vivir__bar { margin-top: 12px; }
  .vivir.is-anim .vivir__media {
    left: var(--gutter); right: var(--gutter);
    top: calc(58px + 10px + 132px); bottom: auto; height: 34svh;
  }
  .vivir.is-anim .vivir__text {
    top: auto; transform: none; width: auto; right: var(--gutter);
    bottom: calc(88px + (100lvh - 100svh)); /* clears the floating WhatsApp */
  }
  .vivir__meta { margin-bottom: 14px; }
  .vivir__body { margin-top: 14px; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .vivir.is-anim .vivir__body { display: none; }
}

/* Act 6 starts tucked under the pinned act 5, so it is already in place when the half circle covers */
.vivir-pinned .vivir { z-index: 3; } /* above act 6 even when act 6 is raised for its own hand-off (z 2) */
/* Act 5 has no controls: its pin spacer must not block clicks on act 6 */
.vivir-pinned .pin-spacer:has(> .vivir), .vivir-pinned .vivir { pointer-events: none; }
.vivir-pinned .hogar { z-index: 1; margin-top: -100vh; margin-top: -100lvh; }

/* Half circle that rises from the bottom and covers act 5 → act 6 */
.vivir__dome { display: none; }
.vivir.is-anim .vivir__dome {
  display: block; position: absolute; z-index: 20; left: 50%; top: 100%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper-3);
  box-shadow: 0 0 0 1px rgba(138, 90, 43, .45);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none; will-change: transform;
}

/* =========================================================
   ACT 6 · HOGAR (horizontal gallery of the 8 typologies)
   Desktop + motion: pinned track moved by scroll.
   Default (mobile, reduced motion, no JS): swipe carousel with snap.
   ========================================================= */
.hogar { background: var(--paper-3); color: var(--ink); }
.hogar__stage { position: relative; padding: clamp(120px, 16vh, 180px) 0 clamp(72px, 10vh, 120px); }
.hogar__rail {
  display: flex; gap: 16px; align-items: stretch; margin-top: clamp(36px, 6vh, 56px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.hogar__rail::-webkit-scrollbar { display: none; }
.hogar__head { padding: 0 var(--gutter); max-width: calc(560px + 2 * var(--gutter)); }
.hogar__eyebrow { margin: 0 0 18px; color: var(--ink-2); }
.hogar__title { margin: 0; font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--ink); }
.hogar__title .ln { overflow: visible; padding: 0; margin: 0; display: block; }
.hogar__title .char { display: inline-block; will-change: transform, opacity, filter; }
.hogar__body { margin: 24px 0 0; max-width: 30em; color: var(--ink-2); }

.home {
  flex: 0 0 min(82vw, 360px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: 4px; padding: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -28px rgba(28, 31, 36, .45);
}
.home__media { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: var(--paper-2); aspect-ratio: 4 / 3; }
.home__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.home__info { padding: 18px 10px 8px; display: flex; flex-direction: column; }
.home__top { margin: 0; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); }
.home__num { color: var(--amber); font-variant-numeric: tabular-nums; }
.home__total { margin: 14px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 4vw, 64px); line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
.home__total small { font-size: .42em; margin-left: .18em; letter-spacing: 0; color: var(--ink-2); }
.home__split { margin: 8px 0 0; color: var(--ink-2); }
.home__note { margin: 10px 0 0; min-height: 1.6em; color: var(--amber); }
.home__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home__price { margin: 0; display: flex; flex-direction: column; line-height: 1.3; color: var(--ink); }
.home__price .label { color: var(--ink-3); margin-bottom: 2px; }
.hogar .btn--glass { color: var(--ink); padding: 0 18px; }
.hogar__src { flex: 0 0 min(70vw, 280px); align-self: flex-end; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); scroll-snap-align: end; }

.hogar__progress { margin: 28px var(--gutter) 0; display: flex; align-items: center; gap: 18px; }
.hogar__count { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hogar__count b { font-weight: 600; color: var(--amber); }
.hogar__bar { position: relative; flex: 1; height: 1px; background: rgba(28, 31, 36, .16); }
.hogar__bar i {
  position: absolute; inset: 0; background: var(--amber);
  box-shadow: 0 0 6px 1px rgba(199, 154, 98, .55);
  transform-origin: left; transform: scaleX(.125);
}

/* Animated (desktop): one pinned screen, the track slides left */
.hogar.is-anim .hogar__stage { height: 100vh; height: 100lvh; padding: 0; overflow: hidden; }
.hogar.is-anim .hogar__track {
  position: absolute; left: 0; top: calc(var(--nav-h) + 14px + clamp(20px, 4vh, 40px)); bottom: clamp(84px, 12vh, 112px);
  display: flex; align-items: stretch; padding: 0 var(--gutter); will-change: transform;
}
.hogar.is-anim .hogar__head { flex: 0 0 min(36vw, 520px); align-self: center; margin-right: clamp(24px, 6vw, 120px); padding: 0; max-width: none; }
.hogar.is-anim .hogar__rail { margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; gap: clamp(16px, 1.6vw, 28px); }
.hogar.is-anim .home { flex-basis: clamp(300px, 24vw, 380px); }
.hogar.is-anim .home__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 120px; }
.hogar.is-anim .home__media img { width: 116%; left: -8%; will-change: transform; }
.hogar.is-anim .hogar__src { padding-right: 0; }
.hogar.is-anim .hogar__progress { position: absolute; left: 0; right: 0; bottom: clamp(32px, 5vh, 48px); margin: 0 var(--gutter); }
@media (min-width: 961px) and (max-height: 760px) {
  .hogar.is-anim .home__split { display: none; }
  .hogar.is-anim .hogar__body { display: none; }
}
@media (max-width: 960px) {
  .hogar__title { font-size: clamp(38px, 10.5vw, 60px); }
  .hogar__eyebrow { margin-bottom: 14px; }
  .hogar__body { margin-top: 18px; }
}

/* Hand-off 6 → 7 (desktop): act 7 waits under the last screen of act 6 */
.hogar-pinned .hogar { z-index: 2; }
.hogar-pinned .lugar { z-index: 1; margin-top: -100vh; margin-top: -100lvh; }

/* =========================================================
   ACT 7 · LUGAR (map of north Mérida + the city)
   Default (mobile flow, reduced motion, no JS): map, then the city, stacked.
   .is-anim: one pinned screen with layered copy, map and photo.
   ========================================================= */
.lugar { background: var(--paper); color: var(--ink); }
.lugar__stage { position: relative; padding: clamp(120px, 16vh, 180px) var(--gutter); }
.lugar__eyebrow { margin: 0 0 18px; color: var(--ink-2); }
.lugar__title { margin: 0; font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--ink); }
.lugar__title--b { font-size: clamp(38px, 3.9vw, 64px); }
.lugar__title .ln { overflow: visible; padding: 0; margin: 0; display: block; }
.lugar__title .char { display: inline-block; will-change: transform, opacity, filter; }
.lugar__body { margin: 24px 0 0; max-width: 30em; color: var(--ink-2); }
.lugar__copy { max-width: 560px; }

/* Map */
.lugar__mapbox { position: relative; margin: clamp(40px, 6vh, 64px) 0 0; container-type: inline-size; }
.lugar__map { position: relative; width: 100%; max-width: 980px; margin: 0 auto; aspect-ratio: 1000 / 800; touch-action: pan-y; }
.lugar__pan { position: absolute; inset: 0; will-change: transform; }
.lugar__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lugar__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lugar__street { stroke: rgba(28, 31, 36, .16); stroke-width: 1.6; }
.lugar__road { stroke: rgba(28, 31, 36, .42); stroke-width: 3; }
.lugar__peri { stroke: rgba(28, 31, 36, .42); stroke-width: 7; }
.lugar__peri-glow { stroke: var(--amber-soft); stroke-width: 10; opacity: 0; filter: url(#lugarBlur); }
.lugar__roadlabels { fill: var(--ink-3); }
.lugar__route { stroke: var(--amber); stroke-width: 2.2; }
.lugar__route--coast { stroke-dasharray: none; }
.lugar__dot { fill: var(--paper); stroke: var(--amber); stroke-width: 2.4; }
.lugar__coast path { stroke: var(--amber); stroke-width: 2.4; }
.lugar__core { fill: var(--amber); }
.lugar__pulse { fill: none; stroke: var(--amber); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: lugar-pulse 2.4s var(--ease) infinite; }
@keyframes lugar-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.lugar__ltname {
  position: absolute; margin: 0; transform: translate(-50%, calc(-100% - 22px));
  font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -.015em;
  color: var(--ink); white-space: nowrap;
}
.lugar__coastlabel { position: absolute; margin: 0; transform: translate(14px, -10%); display: grid; gap: 2px; color: var(--ink-2); white-space: nowrap; }
.lugar__coastlabel b { color: var(--amber); font-weight: 600; font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* Place labels: glass pills next to their dot */
:root .lugar__place {
  --glass-a: rgba(255, 255, 255, .7); --glass-b: rgba(255, 255, 255, .5);
  --glass-border: rgba(28, 31, 36, .10); --glass-hi: rgba(255, 255, 255, .95);
  position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  padding: 7px 14px 7px 8px; border-radius: 14px; color: var(--ink);
  transform: translate(16px, -50%); white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 22px -12px rgba(28, 31, 36, .35);
}
.lugar__place[data-side="l"] { transform: translate(calc(-100% - 16px), -50%); }
.lugar__place b {
  grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(138, 90, 43, .45); color: var(--amber); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lugar__pname { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
.lugar__place small { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.lugar__note { margin: 14px 0 0; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lugar__drag { display: none; margin-right: 12px; color: var(--amber); }

/* The city */
.lugar__city { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 12vh, 140px); }
.lugar__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.lugar__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.lugar__cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lugar__cities li {
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(28, 31, 36, .14);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}

/* Animated: one pinned screen with layers */
.lugar.is-anim .lugar__stage { height: 100vh; height: 100lvh; padding: 0; overflow: hidden; }
.lugar.is-anim .lugar__copy { position: absolute; left: var(--gutter); top: 50%; width: min(36vw, 520px); transform: translateY(-50%); }
.lugar.is-anim .lugar__mapbox {
  position: absolute; margin: 0; container-type: size;
  left: calc(var(--gutter) + min(36vw, 520px) + clamp(24px, 4vw, 72px)); right: var(--gutter);
  top: calc(var(--nav-h) + 14px + clamp(16px, 3vh, 32px)); bottom: clamp(56px, 8vh, 80px);
  display: grid; place-items: center;
}
.lugar.is-anim .lugar__map { width: min(100cqw, 125cqh); max-width: none; margin: 0; }
.lugar.is-anim .lugar__note { position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(28px, 4.4vh, 40px)); margin: 0; }
.lugar.is-anim .lugar__city { display: contents; }
.lugar.is-anim .lugar__photo {
  position: absolute; margin: 0; top: 50%;
  left: calc(var(--gutter) + min(36vw, 520px) + clamp(24px, 4vw, 72px)); right: var(--gutter);
  height: min(calc(100lvh - 2 * (var(--nav-h) + 40px)), 720px); aspect-ratio: auto;
  transform: translateY(-50%); background: transparent;
}
.lugar.is-anim .lugar__photo img { left: 50%; width: auto; aspect-ratio: 4 / 5; height: 100%; border-radius: 4px; will-change: transform, clip-path; } /* xPercent -50 set in JS */
@media (min-width: 961px) and (max-height: 760px) {
  .lugar.is-anim .lugar__copy--a .lugar__body { display: none; }
}
@media (max-width: 960px) {
  .lugar__title { font-size: clamp(38px, 10.5vw, 60px); }
  .lugar__title--b { font-size: clamp(32px, 8.6vw, 48px); }
  .lugar__eyebrow { margin-bottom: 14px; }
  .lugar__body { margin-top: 18px; }
  .lugar__stage { padding-left: 0; padding-right: 0; }
  .lugar__copy { padding: 0 var(--gutter); }
  .lugar__mapbox { overflow: hidden; }
  .lugar__map { width: 640px; max-width: none; margin: 0; }
  .lugar__drag { display: block; margin: 0 0 2px; }
  .lugar__place { padding: 5px 10px 5px 6px; column-gap: 8px; }
  .lugar__place b { width: 20px; height: 20px; font-size: 11px; }
  .lugar__pname { font-size: 11px; }
  .lugar__place small { display: none; }
  .lugar__place[data-mside="r"] { transform: translate(14px, -50%); } /* clears the Light Towers name */
  .lugar__city { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .lugar__city .lugar__copy { padding: 0; }
  .lugar__photo { aspect-ratio: 4 / 5; max-height: 70svh; }

  /* Pinned on mobile: map (or photo) on top, copy at the bottom */
  .lugar.is-anim .lugar__copy { top: auto; transform: none; left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(88px + (100lvh - 100svh)); padding: 0; } /* clears the floating WhatsApp */
  .lugar.is-anim .lugar__mapbox { left: 0; right: 0; top: calc(var(--nav-h) + 18px); bottom: auto; height: 44svh; display: block; overflow: hidden; }
  .lugar.is-anim .lugar__map { width: auto; height: 100%; }
  .lugar.is-anim .lugar__mapbox { overflow: visible; } /* the stage already clips; the drag hint stays visible */
  .lugar.is-anim .lugar__note { bottom: auto; top: calc(100% + 8px); }
  .lugar.is-anim .lugar__photo { left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 18px); height: 30svh; transform: none; }
  .lugar.is-anim .lugar__photo img { left: 0; width: 100%; aspect-ratio: auto; object-position: 52% 45%; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .lugar.is-anim .lugar__body { display: none; }
}

/* =========================================================
   ACT 8 · INVITACIÓN (portal of light → the towers at night)
   Default (reduced motion, no JS): final state on night, arch photo + copy.
   .is-anim: pinned; geometry of the portal is set in JS (px).
   ========================================================= */
.act { position: relative; }
.invitacion { background: var(--night); color: var(--bone); }
.inv__stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center;
  gap: clamp(32px, 6vw, 96px); padding: clamp(120px, 16vh, 180px) var(--gutter);
}
.inv__line { display: none; }
.inv__portal {
  order: 2; position: relative; margin: 0; width: min(100%, 440px); justify-self: center; aspect-ratio: 4 / 5.2;
  border-radius: 999px 999px 4px 4px; overflow: hidden; background: var(--deep);
  box-shadow: 0 0 0 1px rgba(199, 154, 98, .7), 0 0 32px rgba(199, 154, 98, .28);
}
.inv__portal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.inv__eyebrow { margin: 0 0 18px; color: var(--bone-2); }
.inv__title { margin: 0; font-size: clamp(42px, 4.8vw, 80px); line-height: 1.04; color: var(--bone); }
.inv__title .ln { overflow: visible; padding: 0; margin: 0; display: block; }
.inv__title .char { display: inline-block; will-change: transform, opacity, filter; }
.inv__body { margin: 24px 0 0; max-width: 30em; color: var(--bone-2); }
.inv__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.inv__ctas .btn { min-height: 52px; padding: 0 26px; }
.inv__ctas .btn--glass {
  --glass-a: rgba(255, 255, 255, .10); --glass-b: rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .16); --glass-hi: rgba(255, 255, 255, .28);
  color: var(--bone);
}

/* Animated: one pinned screen; the portal opens on paper and the night comes in */
.invitacion.is-anim { background: var(--paper); }
.invitacion.is-anim .inv__stage { display: block; height: 100vh; height: 100lvh; padding: 0; overflow: hidden; }
.invitacion.is-anim .inv__line { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.inv__line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.inv__ground, .inv__arch { stroke: var(--amber); stroke-width: 1.5; }
.inv__arch-glow { stroke: var(--amber-soft); stroke-width: 7; opacity: .35; filter: url(#invBlur); }
.inv__frame { stroke: rgba(199, 154, 98, .75); stroke-width: 1; }
.invitacion.is-anim .inv__portal {
  position: absolute; inset: 0; width: auto; justify-self: stretch; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: transparent;
  clip-path: inset(100% 50% 0% 50%); will-change: clip-path;
}
.invitacion.is-anim .inv__portal img { inset: auto; max-width: none; object-position: 47% 50%; will-change: transform; } /* framed to the arch in JS */
/* Final composition: the full photo in a wide frame, the invitation centred underneath */
.invitacion.is-anim .inv__copy {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 5vh, 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.invitacion.is-anim .inv__eyebrow { margin-bottom: 14px; }
.invitacion.is-anim .inv__title .ln { display: inline; }
.invitacion.is-anim .inv__body { margin-top: 16px; max-width: 40em; }
.invitacion.is-anim .inv__ctas { justify-content: center; margin-top: 24px; }
@media (min-width: 961px) {
  /* One compact row under the photo, aligned to its frame (left/right set in JS) */
  .invitacion.is-anim .inv__copy {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "eye ." "title ctas";
    justify-content: space-between; column-gap: 32px; align-items: end; text-align: left;
  }
  .invitacion.is-anim .inv__eyebrow { grid-area: eye; margin: 0 0 10px; }
  .invitacion.is-anim .inv__title { grid-area: title; font-size: clamp(36px, 3.4vw, 60px); white-space: nowrap; }
  .invitacion.is-anim .inv__title .ln > span { display: inline; }
  .invitacion.is-anim .inv__body, .invitacion.is-anim .inv__num { display: none; }
  .invitacion.is-anim .inv__ctas { grid-area: ctas; flex-wrap: nowrap; margin: 0; padding-bottom: .35em; }
}

@media (min-width: 961px) and (max-height: 760px) {
  .invitacion.is-anim .inv__body { display: none; }
}
@media (max-width: 960px) {
  .inv__stage { grid-template-columns: 1fr; }
  .inv__portal { order: 0; width: min(78vw, 360px); }
  .inv__title { font-size: clamp(38px, 10.5vw, 60px); }
  .inv__eyebrow { margin-bottom: 14px; }
  .inv__body { margin-top: 18px; }
  .inv__ctas { margin-top: 24px; }
  .inv__ctas .btn { flex: 1 1 auto; }
  .invitacion.is-anim .inv__copy { bottom: calc(88px + (100lvh - 100svh)); } /* clears the floating WhatsApp */
  .invitacion.is-anim .inv__title .ln { display: block; }
  .invitacion.is-anim .inv__ctas { align-self: stretch; }
}
@media (max-width: 960px) {
  .invitacion.is-anim .inv__body { display: none; } /* the portal needs the top half */
}

/* ---------- Footer (night, continues act 8) ---------- */
.footer {
  background: var(--night); color: var(--bone-2);
  padding: clamp(64px, 10vh, 112px) var(--gutter) calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .08);
  position: relative; z-index: 1;
}
.footer .label { color: var(--mist); margin: 0 0 16px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.footer__brand img { height: 36px; width: auto; }
.footer__brand p { margin: 20px 0 0; max-width: 26em; }
.footer__partners { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px; margin-top: 32px; }
.footer__partner { display: grid; gap: 10px; }
.footer__partner .label { margin: 0; }
.footer__partner img { width: auto; height: 16px; opacity: .9; }
.footer__partner img[alt^="Branson"] { height: 56px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); transition: color .4s var(--ease); }
.footer__col a:hover { color: var(--amber-soft); }
.footer__privacy summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--bone); list-style: none; }
.footer__privacy summary::-webkit-details-marker { display: none; }
.footer__privacy summary::after { content: "+"; margin-left: 10px; color: var(--amber-soft); }
.footer__privacy[open] summary::after { content: "−"; }
.footer__privacy p { margin: 4px 0 0; font-size: 14px; max-width: 22em; color: var(--mist); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px;
  margin-top: clamp(48px, 8vh, 88px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__bottom p { margin: 0; max-width: 46em; font-size: 14px; color: var(--mist); }
.footer .footer__tag { margin: 0; color: var(--amber-soft); }
@media (max-width: 960px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* =========================================================
   REDUCED MOTION: no smooth scroll, no pins, only fades
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .btn, .btn__label { transform: none !important; }
}