/* ==========================================================================
   ELEMENT APARTAMENTOS — landing
   Réplica estructural de la home "Personal" de referencia (fintech
   scroll-storytelling), con marca 100% Element.

   La paleta sale del propio logo: el anillo de Element está partido en
   cuatro cuadrantes —petróleo #004D55, navy #00163A, vino #6A0404 y azul
   claro #9BB2D1— y esos cuatro colores son el sistema de acentos de toda
   la página (las familias de amenidades, las cards del deck). El oro
   #D3AD52 viene del sello "Tras el éxito de Torre 1"; el terracota
   #8E360D es el color de botón del sitio actual y aquí es la acción.
   Tinta #1B383E y texto #37465A, también del sitio actual.

   Tipografía: Josefin Sans (display, la del sitio actual) + Montserrat
   (cuerpo). Las dos ya son fuentes de la marca; Josefin tiene una altura
   de x muy baja, así que en párrafos largos manda Montserrat.

   Sistema de scroll (variables que escribe el JS):
   --p1 / --p2  hero: fase de escala del device y fase de la palabra
   --zy         desplazamiento vertical de cada carril de zonas
   --od         posición de cada dígito del odómetro (en em)
   --c          cobertura de una card del deck por la siguiente (0..1)
   --bm1x/--bm2x/--bmy  brand moment: palabras y parallax del fondo
   --fy         flotación de los renders del tour
   ========================================================================== */

:root {
  /* los cuatro cuadrantes del anillo */
  --petrol: #004d55;
  --navy: #00163a;
  --wine: #6a0404;
  --sky: #9bb2d1;

  --sky-soft: #c3d2e6;
  --sky-tint: #e4ebf3;
  --ink: #1b383e;
  --slate: #37465a;
  --gold: #d3ad52;        /* oro del sello de Torre 2 */
  --gold-soft: #f2e8cf;
  --clay: #8e360d;        /* acción: el botón del sitio actual */
  --forest: #3b5645;      /* su hover */
  --sand: #e6decf;
  --mist: #f4f2ed;
  --paper: #ffffff;
  --navy-deep: #0e2a2e;   /* petróleo profundo: fondos oscuros */
  --black-plate: #071a1d;
  --wa: #25d366;

  --font: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Josefin Sans", "Montserrat", ui-sans-serif, sans-serif;
  --radius-xl: 2.25rem;   /* radio de tarjeta grande, como la referencia */
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1.5rem 3rem rgba(7, 26, 29, 0.14);
  --pad-x: clamp(20px, 5vw, 72px);
  --topbar-h: 52px;
  --nav-h: 72px;
}

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


/* `clip` y no `hidden`: hidden convierte al elemento en contenedor de
   scroll y eso rompe position:sticky y window.scrollY (el motor de
   animación depende de ambos). */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* los saltos por ancla caen debajo de la barra fija y del nav */
  scroll-padding-top: calc(var(--topbar-h) + var(--nav-h));
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-top: var(--topbar-h);   /* hueco de la topbar, que es fixed */
}

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

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

:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* Josefin Sans manda en todo lo que es voz de marca: titulares, botones,
   cifras y etiquetas. El cuerpo se queda en Montserrat, que a 16px se lee
   mucho mejor (Josefin tiene la altura de x muy baja). Josefin además pide
   un poco menos de tracking negativo que una grotesca normal. */
h1, h2, h3, .btn, .deck-step, .typology-badge, .znum-big, .stat dd, .fam h3 {
  font-family: var(--font-display);
}

/* titulares de sección: grandes, apretados, como la referencia */
.split-copy h2,
.zones-head h2,
.deck-head h2,
.backed > h2,
.where-copy h2,
.tour-copy h2,
.faq-section > h2 {
  font-size: clamp(2.3rem, 4.8vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
}

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 1.05rem; line-height: 1.2;
  letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 10px 20px; font-size: 0.95rem; }
.btn-full { width: 100%; }

/* acción principal: el terracota del sitio actual, con su mismo hover
   verde. No inventamos color de botón: este par ya es de la marca. */
.btn-clay { background: var(--clay); color: #fff; }
.btn-clay:hover { background: var(--forest); box-shadow: 0 12px 28px -12px rgba(142, 54, 13, 0.7); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--slate); box-shadow: 0 12px 28px -12px rgba(27, 56, 62, 0.6); }

.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* el ghost vive solo en el nav, que es oscuro */
.btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------- topbar
   Fija arriba durante toda la página y sin cerrar. Como deja de ocupar
   sitio en el flujo, el body compensa con padding-top y todo lo que se
   pega arriba (nav, escenas sticky) arranca en --topbar-h. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  height: var(--topbar-h);
  padding: 0 var(--pad-x);
  font-size: 1.05rem; text-align: center;
}
.topbar p {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
/* constructora y ciudad en el oro del sello: el dato que más confunde
   a los usuarios es dónde queda el proyecto, así que "Villavicencio"
   lleva el mismo peso que el nombre de la constructora. */
.topbar strong { color: var(--gold); }

/* ---------------------------------------------------------------- nav */
/* banda de marca: logo grande y centrado al abrir la página. Vive fuera
   del nav sticky y se va con el scroll, así el header no cambia de alto
   y el contenido nunca da un salto al colapsarse.

   Cabecera oscura, no blanca como la referencia: el logo de Element solo
   existe en blanco sobre transparente (no hay versión en positivo para
   fondo claro), así que la banda y el nav van en petróleo profundo. Es la
   misma decisión que toma el sitio actual. Si algún día llega el logo en
   versión oscura, esto se puede invertir. */
.brandrow {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px;
  padding: clamp(20px, 3vw, 34px) var(--pad-x) clamp(16px, 2.2vw, 26px);
  background: var(--navy-deep);
}
.brand-hero { display: inline-flex; }
.brand-hero img {
  width: clamp(190px, 21vw, 290px);
  height: auto;
}
/* la bajada de marca que ya trae el logotipo del cliente, en texto */
.brandrow-tag {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.15vw, 0.78rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-align: center;
  color: var(--gold);
}

.nav {
  position: sticky; top: var(--topbar-h); z-index: 50;
  display: flex; align-items: center; gap: 32px;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: rgba(14, 42, 46, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(211, 173, 82, 0.22);
}
/* logo compacto del nav: ocupa su espacio siempre (el menú no se corre)
   y solo se desvanece mientras la banda de marca está en cuadro. Oculto
   de base únicamente si hay JS para revelarlo — sin JS queda visible. */
.brand { flex-shrink: 0; display: inline-flex; }
.brand-logo { width: 132px; height: auto; }
.js .brand {
  opacity: 0;
  visibility: hidden;   /* lo saca del orden de tabulación y del árbol de
                           accesibilidad mientras manda la banda de arriba */
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}
.js .nav:not(.is-top) .brand {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-links {
  display: flex; gap: 28px; margin-inline: auto;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.86); text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
  padding: 6px 2px; position: relative;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--gold);
  transition: right 0.22s ease;
}
.nav-links a:hover::after { right: 0; }

.nav-actions { display: flex; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 10px;
  margin-left: auto;
}
.nav-toggle span {
  width: 26px; height: 2.5px; background: #fff; border-radius: 2px;
  transition: transform 0.2s ease;
}

/* drawer (mobile) */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; padding: 48px 32px;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}
.drawer.is-open { transform: translateY(0); }
.drawer a {
  color: #fff; text-decoration: none;
  font-size: 1.8rem; font-weight: 700; padding: 10px 0;
}
.drawer a.btn {
  font-size: 1.1rem; justify-content: center; margin-top: 20px;
  background: #fff; color: var(--ink);
}
.drawer-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 2.4rem; cursor: pointer; line-height: 1;
}

/* ================================================================= HERO
   Escena sticky durante 3 viewports. Fase A (--p1): el device blanco
   escala 0.35 → 1 con origen center-top; el radio y la cabecera del
   logo se compensan con la escala inversa (var --s) para que se lean
   constantes, igual que la referencia. Fase B (--p2): la palabra de
   marca cruza la imagen y aparece el pie con CTA. */
.hero-stack {
  position: relative;
  height: 300vh;
  --p1: 0;
  --p2: 0;
}
.hero-scene {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(24px, 4.5vh, 56px) var(--pad-x) 0;
}
/* Fondo oscuro, al revés que la referencia (que va en azul claro): la
   cabecera de Element es petróleo y un hero claro entre dos bandas
   oscuras daba un sándwich raro. En oscuro, además, la tarjeta blanca
   del device recorta con mucha más fuerza. El halo dorado superior es
   el mismo oro del sello. */
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 4%, rgba(211, 173, 82, 0.22) 0%, rgba(211, 173, 82, 0) 60%),
    radial-gradient(120% 80% at 88% 100%, rgba(0, 77, 85, 0.65) 0%, rgba(0, 77, 85, 0) 55%),
    linear-gradient(176deg, var(--navy-deep) 0%, #10353a 48%, var(--black-plate) 100%);
  z-index: 0;
}

/* el bloque superior se aleja y desvanece mientras el device crece */
.hero-top {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc(var(--p1) * -64px)) scale(calc(1 - var(--p1) * 0.05));
  opacity: calc(1 - var(--p1) * 2.1);
  will-change: transform, opacity;
}

.hero-toggle {
  display: inline-flex; gap: 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(211, 173, 82, 0.32);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: clamp(24px, 4.5vh, 44px);
}
.hero-toggle-btn {
  border: none; cursor: pointer;
  background: transparent; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 9px 24px; border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-toggle-btn.is-active { background: var(--gold); color: var(--black-plate); }

.hero-title {
  font-size: clamp(2.9rem, 8vw, 6.2rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
}
/* la caja del subtítulo es más angosta que la del titular (46ch vs 18ch del
   titular, que es quien define el ancho de .hero-copy): sin margin auto se
   alinea a la izquierda y el texto se lee descentrado. */
.hero-sub {
  margin-top: 18px;
  margin-inline: auto;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: #fff;
  max-width: 46ch;
  opacity: 0.82;
}
.hero-copy.is-swapping .hero-title,
.hero-copy.is-swapping .hero-sub { animation: swap 0.4s ease; }
@keyframes swap {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------- device frame
   Tarjeta blanca con cabecera de logo. --s es la escala real; padding,
   logo y radio se dividen por --s para mantenerse visualmente iguales
   durante todo el recorrido (el truco central de la referencia). */
.hero-device {
  --s: calc(0.35 + var(--p1) * 0.65);
  position: absolute;
  left: 50%;
  top: calc(56% - var(--p1) * 56%);
  width: 100vw;
  height: 100vh;
  margin: 0;
  transform: translateX(-50%) scale(var(--s));
  transform-origin: center top;
  z-index: 1;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: calc(var(--radius-xl) / var(--s)) calc(var(--radius-xl) / var(--s)) 0 0;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(14, 42, 46, calc(0.55 - var(--p1) * 0.55));
  will-change: transform, top;
}
.hero-device-bar {
  flex-shrink: 0;
  display: flex; justify-content: center; align-items: center;
  padding: calc(0.85rem / var(--s)) 0;
}
.hero-device-bar img {
  width: auto;
  height: calc(1.7rem / var(--s));
}
.hero-device-media {
  position: relative;
  flex: 1;
  min-height: 0;
}
.hero-device-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* sombra inferior para la palabra y el pie; solo aparece en fase B */
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 26, 29, 0.78) 0%, rgba(7, 26, 29, 0.12) 45%, rgba(7, 26, 29, 0) 70%);
  opacity: var(--p2);
}

/* palabra de marca que cruza la imagen (fase B) */
.hero-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.hero-word span {
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 12px 60px rgba(7, 26, 29, 0.35);
  transform: translateX(calc((1 - var(--p2)) * 58vw));
  opacity: calc(var(--p2) * 2);
  will-change: transform, opacity;
}

/* pie con CTA, al final de la fase B; solo es clicable cuando el
   motor marca .is-cta en el stack (evita clics sobre un CTA invisible) */
.hero-device-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 5vw, 56px);
  text-align: left;
  color: #fff;
  opacity: calc((var(--p2) - 0.55) * 2.6);
  transform: translateY(calc((1 - var(--p2)) * 24px));
  will-change: opacity, transform;
  pointer-events: none;
}
.hero-stack.is-cta .hero-device-caption { pointer-events: auto; }
.hero-device-caption span {
  display: block;
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 8px;
}
.hero-device-caption strong {
  display: block;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
  max-width: 22ch;
  margin-bottom: 18px;
}

/* indicador de scroll: desaparece apenas empieza el movimiento */
.hero-scrollcue {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px; height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  opacity: calc(1 - var(--p1) * 4);
}
.hero-scrollcue span {
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; border-radius: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: cue 1.7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(-50%, 14px); opacity: 0; }
}

/* entrada escalonada del hero al cargar */
.hero-toggle,
.hero-copy { animation: hero-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-copy { animation-delay: 0.08s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* floating WhatsApp badge */
.float-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-deep); color: #fff;
  border-radius: 18px;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 0.8rem; line-height: 1.25; text-align: left;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease;
}
.float-wa:hover { transform: translateY(-3px); }
.float-wa svg { color: var(--wa); flex-shrink: 0; }
.float-wa strong { font-size: 0.9rem; }

/* --------------------------------------------------- respaldo bajo el hero */
.hero-backed {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(32px, 6vh, 56px) var(--pad-x) 0;
  text-align: center;
}
.hero-backed p {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--slate); opacity: 0.7;
}
/* 4x el tamaño original (34px→136px). No basta con `height` fija +
   width:auto confiando en el reset global `img{max-width:100%}`: en
   pantallas angostas ese max-width limita el ancho pero no recalcula el
   alto, y el logo queda achatado. Con un solo lado fluido (height) el
   ancho siempre se deriva del alto real, sin distorsión. */
.hero-backed img { height: clamp(92px, 25vw, 136px); width: auto; }

/* --------------------------------------------------------------- intro */
.intro {
  padding: clamp(64px, 10vh, 110px) var(--pad-x);
  max-width: 880px; margin: 0 auto;
}
.intro-kicker {
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--clay);
  margin-bottom: 18px;
}
.intro-lede {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.75;
  color: var(--slate);
}
.intro-lede strong { color: var(--ink); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: clamp(40px, 6vh, 64px);
}
.stat {
  background: var(--mist);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  text-align: center;
}
.stat dt {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--clay);
}
.stat dd {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* features: lo que antes era enumeración corrida dentro del lede. Dos
   grupos, cada ítem con check violeta y hairline — misma familia visual
   que los kickers y las tiles de stats. */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  margin-top: clamp(40px, 6vh, 64px);
}
.feature-group h3 {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--clay);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 56, 62, 0.14);
}
.feature-group ul { list-style: none; }
.feature-group li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(27, 56, 62, 0.07);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}
.feature-group li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e360d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.intro-note {
  margin-top: clamp(28px, 4vh, 40px);
  font-size: 0.92rem;
  color: var(--slate);
}

.legal-note {
  margin-top: 28px;
  font-size: 0.78rem;
  color: var(--slate);
  opacity: 0.75;
  max-width: 72ch;
}
/* solo la nota de zonas sociales, no las demás .legal-note del sitio:
   centrada y en un renglón mientras quepa; si no cabe (celulares muy
   angostos), se libera el nowrap para que envuelva en vez de recortarse. */
.zones .legal-note {
  text-align: center;
  margin-inline: auto;
  max-width: none;
}
.legal-note-onnavy { color: rgba(255, 255, 255, 0.75); opacity: 1; }

/* ============================================================== SPLIT
   Texto + imagen alta, como "Shop in stores and online". */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) var(--pad-x);
}
.split-copy p {
  margin: 20px 0 28px;
  color: var(--slate);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 46ch;
}
.split-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split-media img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ============================================================== ZONES
   Réplica del grid de rewards: tres carriles con parallax vertical a
   distinta velocidad (--zy lo escribe el JS), ítems que revelan hacia
   arriba y tiles de número tipo odómetro. */
.zones {
  padding: clamp(72px, 11vh, 130px) var(--pad-x);
  max-width: 1240px;
  margin: 0 auto;
}
.zones-head { max-width: 820px; margin-bottom: clamp(40px, 6vh, 64px); }
.zones-head p {
  margin-top: 16px;
  color: var(--slate);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 52ch;
}

.zones-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.zlane {
  display: flex; flex-direction: column;
  gap: clamp(14px, 2vw, 24px);
  --zy: 0px;
  transform: translate3d(0, var(--zy), 0);
  will-change: transform;
}
/* los carriles laterales arrancan más abajo, como la referencia */
.zlane-side { padding-top: clamp(48px, 8vh, 96px); }

.zitem {
  background: #fff;
  border: 1.5px solid rgba(27, 56, 62, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.zitem h3 {
  padding: 16px 20px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.zitem figure { margin: 0; }
.zitem img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.zitem-lg img { aspect-ratio: 4 / 3; }
/* tile gráfica: ícono con transparencia sobre color de marca, como las
   tiles de logos de la referencia */
/* El ícono que entregó el cliente ya es un disco petróleo con el trazo en
   blanco. Sobre la tile petróleo ese disco se pierde, así que va montado
   sobre una moneda clara que le hace de halo — el mismo tratamiento que
   en .fam. Se pone arriba con order:-1 sin tocar el orden del HTML, que
   deja el texto primero para lectores de pantalla. */
.zitem-graphic {
  background: var(--petrol);
  border-color: transparent;
  display: flex; flex-direction: column;
  padding-bottom: 20px;
}
.zitem-graphic h3 { color: #fff; padding-bottom: 0; }
.zitem-graphic p {
  padding: 8px 20px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem; line-height: 1.5;
}
.zitem-graphic figure { order: -1; padding: 22px 20px 4px; }
.zitem-graphic img {
  width: 64px; height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
/* cada familia de amenidades toma un cuadrante del anillo del logo */
.zitem-training { background: var(--wine); }
.zitem-wellness { background: var(--petrol); }

/* tile de número tipo odómetro */
.znum {
  background: var(--mist);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
}
.znum-accent { background: var(--sky-tint); }
.znum-edge { background: var(--gold-soft); }

/* 2,65 m y PVC comparten fila: son las dos únicas tiles del carril que
   van una junto a la otra en vez de apiladas. Cada una ocupa el 50%
   de la columna (1fr 1fr): el gap sale del propio 50%, no se resta
   aparte, así que la fila sigue sumando el 100% exacto. El número
   gigante usa un clamp más chico que el de las tiles de ancho
   completo (18 zonas), calibrado para la mitad del ancho del carril. */
.znum-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
}
.znum-pair .znum-big { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.znum-big {
  display: flex; align-items: baseline; gap: 0.2em;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.znum-big em {
  font-style: normal;
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.znum-sub {
  margin-top: 16px;
  color: var(--slate);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  max-width: 30ch;
}

/* odómetro: cada dígito es una columna 0-9 que se desplaza --od (em) */
.odo { display: inline-flex; }
.odo-sep { display: inline-block; }
.odo-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.odo-strip {
  display: flex; flex-direction: column;
  line-height: 1;
  transform: translateY(calc(var(--od, 0) * -1em));
  will-change: transform;
}
.odo-strip b { font-weight: inherit; height: 1em; }

/* =============================================================== DECK
   Réplica de "Pay now or pay over time": cada slot es sticky bajo el
   nav; la card se cubre por la siguiente mientras escala hacia atrás
   (origen arriba) y un velo la oscurece (--c = cobertura 0..1). */
.deck-section {
  padding: clamp(72px, 11vh, 130px) var(--pad-x);
  max-width: 1240px;
  margin: 0 auto;
}
.deck-head { max-width: 820px; margin-bottom: clamp(40px, 6vh, 64px); }
.deck-head p {
  margin-top: 16px;
  color: var(--slate);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 52ch;
}

.deck { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
.deck-slot {
  position: sticky;
  top: calc(var(--topbar-h) + var(--nav-h) + 20px);
}
/* escalonado sutil para que asome el borde de la card anterior */
.deck-slot:nth-child(2) { top: calc(var(--topbar-h) + var(--nav-h) + 32px); }
.deck-slot:nth-child(3) { top: calc(var(--topbar-h) + var(--nav-h) + 44px); }
.deck-slot:nth-child(4) { top: calc(var(--topbar-h) + var(--nav-h) + 56px); }

.deck-card {
  --c: 0;
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: clamp(360px, 52vh, 460px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform-origin: center top;
  transform: scale(calc(1 - var(--c) * 0.05));
  will-change: transform;
}
/* velo que oscurece la card cuando la siguiente la cubre */
.deck-card::after {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: calc(var(--c) * 0.22);
  transition: opacity 0.1s linear;
  pointer-events: none;
  z-index: 2;
}
.deck-copy {
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.deck-step {
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.7;
}
.deck-copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  max-width: 16ch;
}
.deck-copy p { font-size: clamp(0.98rem, 1.5vw, 1.1rem); max-width: 42ch; }
.deck-media { margin: 0; min-height: 0; }
.deck-media img { width: 100%; height: 100%; object-fit: cover; }

.deck-ink { background: var(--navy-deep); color: #fff; }
.deck-ink .deck-copy p { color: rgba(255, 255, 255, 0.82); }
.deck-sky { background: var(--sky); color: var(--ink); }
.deck-sky .deck-copy p { color: rgba(27, 56, 62, 0.85); }
.deck-sand { background: var(--sand); color: var(--ink); }
.deck-sand .deck-copy p { color: var(--slate); }
.deck-mist { background: var(--mist); color: var(--ink); }
.deck-mist .deck-copy p { color: var(--slate); }

/* ============================================================= BACKED
   Réplica del stack "Safety and privacy": titular centrado, imagen
   grande redondeada, texto y logos debajo. */
.backed {
  padding: clamp(72px, 11vh, 130px) var(--pad-x);
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.backed > h2 { margin-bottom: clamp(36px, 6vh, 56px); }
.backed-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.backed-media img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.backed p {
  margin: clamp(28px, 5vh, 44px) auto 0;
  max-width: 58ch;
  color: var(--slate);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.backed p strong { color: var(--ink); }
.backed-logos {
  margin-top: 36px;
  display: flex; justify-content: center; align-items: center; gap: 44px;
  flex-wrap: wrap;   /* al doble de tamaño, dos logos ya no caben en una
                        fila en celulares angostos */
}
.backed-logos img { height: 72px; width: auto; opacity: 0.85; }

/* ======================================================= BRAND MOMENT
   Réplica de "send smarter": media full-bleed con parallax vertical
   (--bmy) y dos palabras gigantes que entran desde lados opuestos y se
   cruzan al ritmo del scroll (--bm1x / --bm2x). */
.bmoment {
  position: relative;
  height: 100vh;
  overflow: clip;
}
.bmoment-media {
  position: absolute;
  left: 0; right: 0;
  top: -15%; height: 130%;
  --bmy: 0px;
  transform: translate3d(0, var(--bmy), 0);
  will-change: transform;
}
.bmoment-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bmoment-tint {
  position: absolute; inset: 0;
  background: rgba(14, 42, 46, 0.28);
}
.bmoment-words {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(20px, 6vw, 96px);
  overflow: clip;
}
.bmoment-w1, .bmoment-w2 {
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 12px 60px rgba(7, 26, 29, 0.4);
  will-change: transform;
}
.bmoment-w1 {
  align-self: flex-start;
  --bm1x: -250px;
  transform: translate3d(var(--bm1x), 0, 0);
}
.bmoment-w2 {
  align-self: flex-end;
  --bm2x: 250px;
  transform: translate3d(var(--bm2x), 0, 0);
}

/* ============================================================ BANDA
   Text-section blanca a pantalla completa ("Invierte donde crece..."). */
.band-text {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(64px, 10vh, 120px) var(--pad-x);
}
.band-text h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 22ch;
}
.band-text-light { background: var(--paper); color: var(--ink); }
.band-text-light h2 em {
  font-style: italic; font-weight: 300; color: var(--clay);
}

/* ==================================================== TIPOLOGÍAS
   Réplica exacta del sitio original (cieloapartamentos.com.co): sin
   tabs ni sticky-scroll, lista plana de las 11 unidades —plano +
   ficha completa—, una debajo de otra. Título centrado con subrayado
   corto, como en el original. */
.typologies {
  padding: clamp(48px, 7vh, 80px) var(--pad-x) clamp(56px, 9vh, 96px);
  max-width: 1080px;
  margin: 0 auto;
}
.typologies-head { text-align: center; margin-bottom: clamp(28px, 4vh, 40px); }
.typologies-head h2 {
  display: inline-block;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 3px solid var(--clay);
}

.typology-list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
}
.typology-card {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
/* sin tarjeta gris detrás: los planos ya traen fondo blanco, así que
   van directo sobre el fondo de la página. */
.typology-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

.typology-info { display: flex; flex-direction: column; }
.typology-badge {
  display: flex;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.typology-badge span, .typology-badge em {
  padding: 14px 22px;
  font-style: normal;
  font-weight: 700;
  font-size: 1.33rem;   /* 1.02rem +30% */
  color: #fff;
  white-space: nowrap;
}
.typology-badge span { flex: 1; background: var(--ink); }
.typology-badge em { background: var(--clay); }

.typology-specs {
  list-style: none;
  border: 1px solid rgba(27, 56, 62, 0.1);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.typology-specs li {
  padding: 7px 22px;   /* renglón más bajo: la tabla no queda tan alta */
  border-bottom: 1px solid rgba(27, 56, 62, 0.08);
  color: var(--slate);
  font-size: 0.96rem;
}
.typology-specs li:last-child { border-bottom: none; }

.typologies-legal { text-align: center; margin: clamp(32px, 5vh, 48px) auto 0; }

/* =============================================================== WHERE */
.where {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(72px, 11vh, 130px) var(--pad-x);
}
.where-copy p {
  margin: 20px 0 24px;
  color: var(--slate);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 46ch;
}
.where-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 28px;
}
.where-chips li {
  background: var(--mist);
  border: 1.5px solid rgba(27, 56, 62, 0.1);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 600; font-size: 0.92rem;
}

/* parallax: el inner (128% de alto) se desplaza dentro del marco */
.px-frame {
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.px-inner {
  height: 128%;
  will-change: transform;
}
.px-inner img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================ TOUR
   Split oscuro (lugar del "Crypto"): renders flotando en parallax. */
.tour {
  position: relative;
  background:
    radial-gradient(100% 80% at 80% 10%, rgba(142, 54, 13, 0.4) 0%, rgba(142, 54, 13, 0) 60%),
    var(--navy-deep);
  color: #fff;
  overflow: clip;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(88px, 14vh, 160px) var(--pad-x);
}
.tour-copy { max-width: 560px; justify-self: end; }
.tour-copy h2 { color: #fff; }
.tour-copy p {
  margin: 20px 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 44ch;
}
.tour-float { position: relative; min-height: 380px; }
.tour-float img {
  position: absolute;
  width: min(58%, 340px);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  --fy: 0px;
  will-change: transform;
}
.tour-card-a {
  left: 0; top: 8%;
  transform: rotate(-6deg) translate3d(0, var(--fy), 0);
}
.tour-card-b {
  right: 0; bottom: 4%;
  transform: rotate(5deg) translate3d(0, var(--fy), 0);
}

/* ----------------------------------------------------------------- faq
   Todo centrado: título, acordeones y su contenido. El "+" se queda
   posicionado a la derecha (patrón estándar de acordeón); el resto —
   pregunta y respuesta— va centrado. */
.faq-section {
  padding: clamp(72px, 11vh, 130px) var(--pad-x);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.faq {
  margin: clamp(32px, 5vh, 48px) auto 0;
  max-width: 820px;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
  border: 1.5px solid rgba(27, 56, 62, 0.12);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 600; font-size: 1.02rem;
  text-align: center;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--clay);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  padding: 0 24px 22px;
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  color: var(--slate); font-size: 0.96rem;
}

/* =============================================================== VISIT
   Cierre oscuro con titular gigante y la tarjeta blanca del formulario,
   como "All in the PayPal app". */
.visit {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(142, 54, 13, 0.35) 0%, rgba(142, 54, 13, 0) 60%),
    var(--black-plate);
  color: #fff;
  padding: clamp(88px, 13vh, 150px) var(--pad-x);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.visit-title {
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.0;
}
.visit-sub {
  margin: 22px 0 clamp(36px, 6vh, 56px);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 52ch;
}

/* La tarjeta blanca ya no envuelve un form propio: dentro va el iframe del
   formulario de LeadConnector. El padding es menor que el del form antiguo
   porque el formulario alojado trae el suyo. `overflow: hidden` es lo que
   hace que el iframe respete las esquinas redondeadas. */
.visit-embed {
  width: min(560px, 100%);
  background: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.visit-embed iframe { display: block; width: 100%; }
/* Los min-height son una red, no decoración: form_embed.js escribe el alto del
   iframe en línea y, si el handshake falla a medias, lo deja en 0 y el widget
   desaparece. El CSS le gana al style en línea, así que la tarjeta no colapsa.
   Van separados porque el suelo de cada uno es distinto: el formulario declara
   su alto (data-height="614") y ahí el suelo puede ser exacto; el calendario no
   declara ninguno, así que su suelo es solo anticolapso —bastante bajo para no
   pelearse con el alto real que le ponga el script, que puede ser menor—.
   Ninguno de los dos lleva `loading="lazy"`: el iframe tiene que estar cargado
   cuando form_embed.js va a hablar con él. */
.visit-embed.is-form iframe { min-height: 614px; }
.visit-embed.is-cal  iframe { min-height: 320px; }

/* Enlaza las dos tarjetas: sin esto son dos cajas blancas seguidas sin
   explicación de por qué hay dos. */
.visit-step {
  margin: clamp(26px, 4vh, 40px) 0 16px;
  font-size: 0.95rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Va sobre el fondo oscuro de .visit, no dentro de la tarjeta: el color
   tiene que ser claro o desaparece. */
.form-note {
  margin-top: 18px;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); text-align: center;
}
.form-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover { color: var(--gold); }

/* -------------------------------------------------------------- footer */
.footer {
  background: var(--black-plate);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(56px, 9vh, 96px) var(--pad-x) 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px; margin: 0 auto;
}
.footer-brand img {
  width: 140px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: 18px;
}
.footer-brand p { font-size: 0.9rem; }
.footer-col h3 {
  color: #fff; font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 4px 0;
}
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 0.92rem; }
.footer-col strong { color: var(--gold); }
.footer-legal {
  max-width: 1200px; margin: 48px auto 0;
  font-size: 0.75rem; opacity: 0.55; line-height: 1.7;
}
.footer-copy {
  max-width: 1200px; margin: 18px auto 0;
  font-size: 0.8rem; opacity: 0.7;
}

/* ================================================================ MOTION
   Reveal diagonal (0.75rem/0.75rem) con escalonado, como la referencia.
   El estado inicial lo aplica el JS (.is-motion-ready) para que sin
   JS —crawlers de IA incluidos— todo quede visible. */
.is-motion-ready {
  opacity: 0;
  transform: translate3d(0.75rem, 0.75rem, 0);
  transition:
    opacity 0.6s cubic-bezier(0, 0, 0.25, 1),
    transform 0.7s cubic-bezier(0, 0, 0.25, 1);
  transition-delay: var(--motion-delay, 0ms);
}
/* variante media: entra con zoom-out, como los frames de referencia */
.is-motion-ready.motion-media {
  transform: translate3d(0, 0.75rem, 0) scale(1.06);
  transition-duration: 0.8s, 0.9s;
}
/* variante titular: desplazamiento lateral corto */
.is-motion-ready.motion-title {
  transform: translate3d(-0.5rem, 0.4rem, 0);
}
/* variante grid: sube desde 2.25rem, como los ítems del grid de la
   referencia */
.is-motion-ready.motion-up {
  transform: translate3d(0, 2.25rem, 0);
}
.is-motion-in { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; }

/* ==================================================== PIEZAS DE ELEMENT
   Todo lo que no existe en la referencia y sí en esta marca: el sello de
   Torre 2, las familias de amenidades, la ficha de tipología con su
   ubicación en planta, los enlaces de recorrido y las placas oscuras
   donde van los logotipos blancos. */

/* ---- sello "Tras el éxito de Torre 1, llega Torre 2"
   Es la noticia comercial del proyecto, así que vive en el hero. Se
   desvanece con --p1, igual que el bloque de texto: cuando el device
   ocupa la pantalla ya no debe competir con la imagen. */
.hero-seal {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 4vw, 64px);
  top: clamp(12px, 3vh, 34px);
  width: clamp(88px, 11vw, 148px);
  height: auto;
  opacity: calc(1 - var(--p1) * 2.4);
  transform: rotate(-8deg) scale(calc(1 - var(--p1) * 0.12));
  filter: drop-shadow(0 14px 30px rgba(7, 26, 29, 0.45));
  pointer-events: none;
  animation: seal-in 0.9s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes seal-in {
  from { opacity: 0; transform: rotate(-22deg) scale(0.7); }
  to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* ---- placa oscura para logotipos blancos
   Los logos que entregó el cliente (Curbanas, Bancolombia, EDGE, el
   propio Element) existen SOLO en blanco sobre transparente. Sobre el
   fondo claro de la página desaparecerían, así que van sobre una placa
   petróleo. No es decoración: es la única forma de mostrarlos sin
   repintarlos. */
.hero-backed img,
.backed-logos {
  background: var(--navy-deep);
  border-radius: var(--radius-lg);
}
.hero-backed img {
  height: clamp(92px, 25vw, 136px);
  width: auto;
  padding: 14px 30px;
}
.backed-logos {
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 48px);
  width: fit-content;
  margin-inline: auto;
}

/* ---- familias de amenidades que no caben en los carriles
   Social, Connection y Kids van en fila propia bajo el grid. Cada una
   toma un color del anillo; el ícono ya viene con su círculo petróleo
   quemado, así que se monta sobre un disco claro para que no choque. */
.fam-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(14px, 2vw, 24px);
}
.fam {
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  color: #fff;
}
.fam img {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
  margin-bottom: 16px;
}
.fam h3 {
  font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}
.fam p { font-size: 0.94rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.fam-social { background: var(--navy); }
.fam-connection { background: var(--petrol); }
.fam-kids { background: var(--wine); }

/* ---- ficha de tipología: dos piezas que el original de Element sí
   tiene y Cielo no —el "área construida aprox." y el plano de llave que
   sitúa la unidad dentro de la planta. */
.typology-area {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--slate); opacity: 0.75;
  padding: 10px 22px 2px;
}
.typology-info .typology-area + .typology-specs { border-top: 1px solid rgba(27, 56, 62, 0.1); }
.typology-key {
  margin: 18px 0 0;
  display: flex; align-items: center; gap: 14px;
}
.typology-key img {
  width: 140px; height: auto;
  border: 1px solid rgba(27, 56, 62, 0.12);
  border-radius: 10px;
  background: #fff;
}
.typology-key figcaption {
  font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--slate); opacity: 0.75;
}
.typology-info .btn { margin-top: 18px; align-self: flex-start; }

/* la ficha de tipología deja de ser una tabla cerrada: el badge redondea
   arriba y la lista abajo, con el área intercalada */
.typology-specs { border-radius: 0; }
.typology-key + .btn { margin-top: 14px; }

/* ---- recorridos 360: Element sí los tiene publicados, así que en vez
   de un CTA a WhatsApp va la lista real de enlaces. */
.tour-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- el titular de la banda usa oro en la línea en cursiva; sobre
   fondo blanco el oro puro no contrasta lo suficiente para texto, así
   que la cursiva se queda en terracota (que sí pasa AA) y el oro solo
   aparece como relleno en fondos oscuros. */
.band-text-light { background: var(--mist); }

@media (max-width: 860px) {
  .fam-row { grid-template-columns: 1fr; }
  .hero-seal { width: clamp(72px, 20vw, 104px); right: 12px; top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* el sello deja de animarse y de depender de --p1 */
  .hero-seal { animation: none; opacity: 1; transform: rotate(-8deg); }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .is-motion-ready { opacity: 1; transform: none; }

  .hero-stack { height: auto; }
  .hero-scene { position: static; height: auto; padding-bottom: 48px; }
  .hero-top { transform: none; opacity: 1; }
  .hero-device {
    position: relative; left: auto; top: auto;
    width: min(920px, 100%); height: auto;
    transform: none;
    border-radius: var(--radius-xl);
    margin: 40px auto 0;
    box-shadow: var(--shadow-card);
  }
  .hero-device-bar { padding: 14px 0; }
  .hero-device-bar img { height: 28px; }
  .hero-device-media { aspect-ratio: 16 / 10; }
  .hero-shade { opacity: 1; }
  .hero-word { display: none; }
  .hero-device-caption { opacity: 1; transform: none; pointer-events: auto; }
  .hero-scrollcue { display: none; }

  .zlane { transform: none; }
  .zlane-side { padding-top: 0; }
  .odo-strip { transform: none; }

  .deck-slot { position: static; }
  .deck-card { transform: none; }
  .deck-card::after { display: none; }

  .bmoment { height: auto; }
  .bmoment-media { position: relative; top: 0; height: auto; transform: none; }
  .bmoment-words { position: absolute; inset: 0; justify-content: center; }
  .bmoment-w1, .bmoment-w2 { transform: none; }

  .band-text { min-height: 0; }

  .px-inner { transform: none !important; height: 100%; }
  .tour-float img { transform: rotate(0); }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .deck-card { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 980px) {
  /* plano arriba, ficha debajo: a este ancho ya no hay sitio para las
     dos columnas del original */
  .typology-card { grid-template-columns: 1fr; }
  .typology-media { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }

  /* móvil: sin banda aparte. Como el menú vive en el drawer, el logo va
     grande y centrado dentro del propio nav y el botón de menú se sale
     del flujo a la derecha — así no queda una franja blanca vacía. */
  .brandrow { display: none; }
  .nav { justify-content: center; height: 78px; }
  .brand-logo { width: 152px; }
  .js .brand {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-toggle { position: absolute; right: var(--pad-x); margin-left: 0; }

  .stats { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; }
  .split-media img { aspect-ratio: 4 / 3; }

  /* zonas: el carril central pasa arriba y los laterales quedan en dos
     columnas debajo, sin parallax que descuadre el layout */
  .zones-grid { grid-template-columns: 1fr 1fr; }
  .zlane-mid { grid-column: 1 / -1; order: -1; }
  .zlane-side { padding-top: 0; }

  .deck-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .deck-media img { aspect-ratio: 16 / 9; }
  .deck-copy { padding: 24px; }

  .where { grid-template-columns: 1fr; }

  .tour { grid-template-columns: 1fr; }
  .tour-copy { justify-self: start; }
  .tour-float { min-height: 300px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .float-wa span { display: none; }
  .float-wa { border-radius: 50%; padding: 16px; }

  /* hero en móvil: pantalla angosta y alta — el device arranca más
     grande y más abajo para no chocar con el titular */
  .hero-stack { height: 280vh; }
  .hero-scene { padding-top: clamp(16px, 3vh, 32px); }
  .hero-device {
    --s: calc(0.5 + var(--p1) * 0.5);
    top: calc(48% - var(--p1) * 48%);
  }
  /* "El único resort urbano" es un renglón largo y el salto es duro, así
     que en móvil el cuerpo baja lo justo para que entre completo. */
  .hero-title { font-size: clamp(2rem, 8.6vw, 3.4rem); }
  .hero-sub { margin-top: 14px; font-size: 1rem; }
  .hero-toggle { margin-bottom: clamp(18px, 3vh, 28px); }
  .hero-scrollcue { display: none; }

  /* topbar a una línea: como es fija, si envuelve se come alto en toda
     la página, no solo en el hero */
  .topbar { font-size: 0.8rem; padding: 0 16px; }
  .topbar p { flex-wrap: nowrap; white-space: nowrap; }
}

/* en celulares angostos "Proyecto de" ya no cabe junto al resto sin
   partir la línea; se quita ese relleno antes que arriesgar el
   truncamiento de "Villavicencio", que es el dato que de verdad importa
   (y el que antes se perdía: la barra vieja usaba text-overflow:
   ellipsis y se comía justo la ubicación). */
@media (max-width: 440px) {
  .topbar-lead { display: none; }
  .topbar { padding: 0 10px; }
}

@media (max-width: 560px) {
  .stats { gap: 10px; }
  .stat { padding: 16px 10px; }
  .features { grid-template-columns: 1fr; gap: 32px; }
  .zones-grid { grid-template-columns: 1fr; }
  .zlane-mid { grid-column: auto; }
  /* a este ancho la tile ya perdió casi todo su padding: dos columnas
     dejarían "5 mundos" y "EDGE" demasiado apretados, así que se apilan. */
  .znum-pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .bmoment-w1, .bmoment-w2 { font-size: clamp(3rem, 16vw, 5rem); }
  .visit-embed { padding: 10px; }
}