/* =========================================================================
   SEALED BID — MONTE LÍBANO 255 — cliente.css
   Editorial de Arquitectura Contemporánea + Private Equity.
   Mobile-first. Sin frameworks. Sin dependencias externas.
   ========================================================================= */

/* El atributo [hidden] debe ganarle siempre a cualquier display: propio.
   Sin esta regla, un bloque como .form-success (display:flex) se mostraba
   aunque el JS lo marcara como hidden — de ahí que el check de "visita
   solicitada" apareciera antes de enviar el formulario. */
[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   --------------------------------------------------------------------- */
:root{
  --c-bg:            #FBF9F4;
  --c-bg-alt:        #F3EFE6;
  --c-surface:       #FFFFFF;
  --c-ink:           #16160F;
  --c-graphite:      #2C2C26;
  --c-stone:         #726F63;
  --c-stone-light:   #B7B2A3;
  --c-line:          rgba(22,22,15,0.11);
  --c-line-strong:   rgba(22,22,15,0.22);
  --c-forest:        #1E3A2B;
  --c-forest-dark:   #132A1E;
  --c-forest-tint:   #E7EDE7;
  --c-champagne:     #B79B6A;
  --c-champagne-dark:#8F7A50;
  --c-white:         #FFFFFF;

  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --radius-sm: 2px;
  --radius-md: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 720ms;

  --shadow-soft: 0 1px 2px rgba(22,22,15,0.04), 0 8px 24px rgba(22,22,15,0.06);
  --shadow-lift: 0 4px 8px rgba(22,22,15,0.05), 0 20px 48px rgba(22,22,15,0.10);

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; font-size: 15px; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; }
.ic-xs{ width:14px; height:14px; }
.ic-sm{ width:17px; height:17px; }
.ic-lg{ width:36px; height:36px; stroke-width:1.2; }

/* ---------------------------------------------------------------------
   2. TIPOGRAFÍA
   --------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family: var(--font-serif); font-weight: 400; margin: 0; color: var(--c-ink); }

.section-eyebrow{
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-champagne-dark);
  font-weight: 600;
  margin: 0 0 14px;
}
.section-eyebrow.light{ color: var(--c-champagne); }

.section-title{
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: .01em;
  margin-bottom: 16px;
}
.section-lead{
  max-width: 620px;
  color: var(--c-stone);
  font-size: 16.5px;
  margin-bottom: 44px;
}

/* ---------------------------------------------------------------------
   3. UTILIDADES / REVEAL
   --------------------------------------------------------------------- */
/* Desvanecimiento de sección: además del fundido y el desplazamiento, el
   contenido llega desenfocado y se resuelve. El escalonado (--d) es lo que
   más se percibe: cada elemento entra un instante después del anterior, en
   vez de aparecer todo el bloque de golpe. */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  filter: blur(14px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); filter: blur(0); }
/* Un filtro en un ancestro aplana las transformaciones 3D de sus hijos:
   los bloques con perspectiva entran con fade y desplazamiento, sin blur. */
.reveal.reveal-flat,
.reveal.reveal-flat.in-view{ filter: none; }

/* ---------------------------------------------------------------------
   4. BOTONES
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 28px;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--c-forest); color: var(--c-white); box-shadow: 0 1px 2px rgba(22,22,15,.08); }
.btn-primary:hover{ background: var(--c-forest-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(19,42,30,.28); }
.btn-primary:active{ transform: translateY(0); }
.btn-outline{ background: transparent; border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-outline:hover{ border-color: var(--c-ink); }
.btn-ghost{ background: transparent; color: var(--c-ink); border-color: transparent; text-decoration: none; position:relative; }
.btn-ghost::after{ content:""; position:absolute; left:28px; right:28px; bottom:11px; height:1px; background: var(--c-ink); transform: scaleX(0); transform-origin:left; transition: transform var(--t-fast) var(--ease); }
.btn-ghost:hover::after{ transform: scaleX(1); }
.btn-ghost-light{ background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover{ border-color: rgba(255,255,255,.8); }
.btn-sm{ padding: 10px 18px; font-size: 11.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------------------------------------------------------------------
   5. CONFIDENTIAL BAR + HEADER
   --------------------------------------------------------------------- */
/* El aviso de confidencialidad ya no encabeza la página: vive dentro de los
   formularios, que es donde el interesado entrega información. */
.form-confidential{
  display:flex; align-items:flex-start; gap:7px;
  font-size:11.5px; line-height:1.5; letter-spacing:.03em;
  color: var(--c-stone); margin: 14px 0 4px;
}
.form-confidential .ic{ flex-shrink:0; margin-top:2px; color: var(--c-champagne-dark); }
/* Dentro de los modales de pantalla completa el aviso cierra el encabezado,
   centrado con el mismo ancho de columna que el resto de la cabecera. */
.oferta-header .form-confidential{
  max-width:900px; margin: 0 auto; padding: 0 0 16px;
  border-top: 1px solid var(--c-line); padding-top: 12px;
}

.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,249,244,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-fast) var(--ease);
}
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:28px; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{
  width:34px; height:34px; border:1px solid var(--c-ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-size:13px; letter-spacing:.03em;
}
.brand-mark.sm{ width:28px; height:28px; font-size:11px; }
.brand-text{ font-size:12.5px; letter-spacing:.14em; font-weight:600; }

.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-graphite); position:relative; padding:6px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--c-champagne-dark); transform:scaleX(0); transition:transform var(--t-fast) var(--ease); }
.main-nav a:hover::after{ transform:scaleX(1); }
.nav-toggle{ display:none; background:none; border:none; color:var(--c-ink); padding:6px; }

/* Selector de idioma ES / EN — discreto, integrado al lenguaje visual del
   nav principal (mismo subrayado champagne que .main-nav a al activarse). */
.lang-switch{ display:flex; align-items:center; gap:7px; flex:none; }
.lang-opt{
  background:none; border:none; padding:6px 1px; margin:0;
  font-family: var(--font-sans); font-size:12px; letter-spacing:.08em;
  font-weight:600; color:var(--c-stone-light); position:relative;
  transition: color var(--t-fast) var(--ease);
}
.lang-opt::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--c-forest); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--ease); }
.lang-opt:hover{ color:var(--c-ink); }
.lang-opt.is-active{ color:var(--c-forest); cursor:default; }
.lang-opt.is-active::after{ transform:scaleX(1); }
.lang-sep{ color:var(--c-line-strong); font-size:11px; user-select:none; }

@media (max-width: 900px){
  .main-nav{
    position: fixed; inset: 72px 0 0 0; background: var(--c-bg);
    flex-direction: column; align-items:flex-start; gap:0; padding: 12px var(--gutter) 32px;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
    border-top: 1px solid var(--c-line);
  }
  .main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--c-line); }
  .main-nav .btn{ margin-top:18px; width:100%; }
  .nav-toggle{ display:block; }
  .header-inner{ gap:16px; }
}

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding: 120px 0 80px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
  --mx: 62%; --my: 38%;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(183,155,106,.10), transparent 62%);
  transition: background .5s var(--ease);
}
.hero-bg{ position:absolute; inset:0; z-index:0; display:flex; justify-content:flex-end; align-items:center; opacity:.62; }
.hero-elevation-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; will-change: transform; }
.hero-elevation{ width:min(58vw, 760px); height:auto; color: var(--c-stone-light); overflow:visible; }
.hero-inner{ position:relative; z-index:1; max-width: 760px; pointer-events:none; }
.hero-inner a, .hero-inner button{ pointer-events:auto; }

/* Niveles interactivos dentro de la ilustración del hero */
.hero-band{ cursor:pointer; outline:none; }
.hero-band .he-window{ transition: fill var(--t-med) var(--ease), opacity var(--t-med) var(--ease), stroke var(--t-fast) var(--ease); fill:none; opacity:.85; }
.hero-band.is-lit .he-window{ fill: var(--c-champagne); opacity:.16; }
.hero-band:hover .he-window, .hero-band:focus-visible .he-window{ fill: var(--c-champagne); opacity:.5; stroke: var(--c-champagne-dark); }
.hero-band:focus-visible .he-hit{ stroke: var(--c-champagne-dark); stroke-width:1; }
.hero-elevation-caption{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-stone);
  display:flex; align-items:center; gap:8px; font-weight:600; transition: color var(--t-fast) var(--ease);
}
.hero-elevation-caption.is-active{ color: var(--c-champagne-dark); }
.hec-dot{ width:5px; height:5px; border-radius:50%; background: var(--c-champagne-dark); flex-shrink:0; }

@media (max-width: 900px){ .hero-elevation-wrap{ display:none; } }
/* Sin la ilustración, el hero deja de reservar su altura: el título sube y se
   elimina el hueco de la parte superior. El botón sólido se retira porque el
   flotante de cristal ya cumple esa función y se sentían duplicados. */
.hide-on-mobile{ display:inline-flex; }
@media (max-width: 760px){
  .hero{ min-height:auto; align-items:flex-start; padding: 34px 0 56px; }
  .hero-bg{ display:none; }
  .hero-title{ margin-bottom:13px; }
  .hero-credit{ gap:9px; margin-bottom:11px; }
  .hero-credit-logo{ width:28px; height:28px; }
  .hero-credit-text{ font-size:13px; }
  .hero-sub{ margin-bottom:24px; }
  .hide-on-mobile{ display:none; }
  .hero-cta{ margin-bottom:4px; }
  /* Sin el botón sólido, el enlace fantasma queda alineado con el texto. */
  .hero-cta .btn-ghost{ padding-left:0; padding-right:0; }
  .hero-cta .btn-ghost::after{ left:0; right:0; }
  /* El hero ya no ocupa toda la pantalla: el indicador de scroll se
     encimaba con la nota inferior, así que se retira en teléfono. */
  .hero-scroll{ display:none; }
}
.hero-kicker{ font-family: var(--font-sans); font-size:13px; letter-spacing:.32em; font-weight:700; color:var(--c-forest); margin-bottom:6px; }
.eyebrow{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-stone); margin-bottom:22px; font-weight:600; }
.hero-title{ font-size: clamp(44px, 8vw, 92px); line-height:1.02; letter-spacing:.01em; margin-bottom:16px; }
.hero-credit{ display:flex; align-items:center; gap:13px; max-width:560px; margin-bottom:14px; }
.hero-credit-logo{ width:38px; height:38px; object-fit:contain; flex-shrink:0; opacity:.94; }
.hero-credit-text{ font-family: var(--font-serif); font-style:italic; font-size: clamp(14.5px, 1.6vw, 17px); line-height:1.4; color:var(--c-graphite); }
.hero-sub{ color:var(--c-stone); font-size:16px; max-width:520px; margin-bottom:30px; }

.hero-status{ display:flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.1em; font-weight:700; margin-bottom:34px; text-transform:uppercase; }
.status-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--c-forest); box-shadow:0 0 0 4px var(--c-forest-tint); }
.status-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--c-forest); opacity:.55; animation: statuspulse 2.6s var(--ease) infinite; }
.status-dot.closed{ background:#8B3A2E; box-shadow:0 0 0 4px rgba(139,58,46,.12); }
.status-dot.closed::after{ border-color:#8B3A2E; }
@keyframes statuspulse{ 0%{ transform:scale(.5); opacity:.55; } 100%{ transform:scale(2.1); opacity:0; } }
.status-sep{ color: var(--c-stone-light); }
.countdown-inline{ font-variant-numeric: tabular-nums; letter-spacing:.02em; color:var(--c-stone); font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.hero-note{ font-size:12.5px; color:var(--c-stone); display:flex; align-items:center; gap:6px; }

.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1;
  background:none; border:none; padding:8px 10px; display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--c-stone); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hero-scroll:hover{ color: var(--c-ink); transform: translateX(-50%) translateY(-2px); }
.hero-scroll-label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.hero-scroll-line{ display:block; width:1px; height:40px; background: linear-gradient(currentColor, transparent); animation: scrollpulse 2.2s var(--ease) infinite; }
@keyframes scrollpulse{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top;} 40%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(1); transform-origin:bottom;} }

/* ---------------------------------------------------------------------
   6b. TICKER — DATOS CLAVE DEL PROCESO
   --------------------------------------------------------------------- */
.hero-ticker-bar{ background: var(--c-ink); border-bottom:1px solid var(--c-line); overflow:hidden; }
.hero-ticker-track{
  display:flex; align-items:center; width:max-content; white-space:nowrap; padding: 13px 0;
  animation: ticker-scroll 38s linear infinite;
}
.hero-ticker-bar:hover .hero-ticker-track{ animation-play-state: paused; }
.hero-ticker-track span{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color: rgba(251,249,244,.68); padding:0 16px; }
.hero-ticker-track span.htt-sep{ color: var(--c-champagne); padding:0; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  .hero-ticker-track{ animation:none; }
  .status-dot::after{ animation:none; display:none; }
  .hero-scroll-line{ animation:none; }
  .hero-elevation-wrap, .hero-band .he-window{ transition:none; }
  .location-visual{ transition:none; }
  .location-visual:hover, .location-visual:focus-visible{ transform:none; }
}

/* ---------------------------------------------------------------------
   7. POSITIONING / STATS
   --------------------------------------------------------------------- */
.positioning{ position:relative; padding: 90px 0; border-bottom:1px solid var(--c-line); }

/* ---------------------------------------------------------------------
   VELO DE DISOLUCIÓN ENTRE SECCIONES
   Franjas finas en el borde superior e inferior de cada sección, atadas al
   scroll (no a un cronómetro como .reveal): se desenfocan y oscurecen justo
   cuando ese borde cruza la línea del header, y se resuelven a nítido
   conforme sigues bajando. Da la sensación de que una sección se disuelve
   mientras la siguiente la cubre, sin volver sticky ninguna sección ni
   alargar el alto de la página — cliente.js calcula la intensidad por
   cuadro (initSectionVeils/updateSectionVeils) y la escribe en --veil-o/
   --veil-b; aquí solo se define cómo se ve.
   --------------------------------------------------------------------- */
.section-veil{
  position:absolute; left:0; right:0; height:130px;
  pointer-events:none; z-index:4;
  opacity: var(--veil-o, 0);
  backdrop-filter: blur(var(--veil-b, 0px));
  -webkit-backdrop-filter: blur(var(--veil-b, 0px));
}
.section-veil.is-top{ top:0; background: linear-gradient(to bottom, rgba(10,10,8,.5), rgba(10,10,8,0)); }
.section-veil.is-bottom{ bottom:0; background: linear-gradient(to top, rgba(10,10,8,.5), rgba(10,10,8,0)); }
@media (prefers-reduced-motion: reduce){ .section-veil{ display:none; } }

.positioning-inner{ max-width: 900px; }
.editorial-lead{ font-family: var(--font-serif); font-weight:400; font-size: clamp(24px, 3.4vw, 36px); line-height:1.35; color:var(--c-graphite); margin-bottom:56px; }
.stat-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; }
.stat{ display:flex; flex-direction:column; border-top:1px solid var(--c-line-strong); padding-top:16px; }
.stat-num{ font-family: var(--font-serif); font-size:40px; color:var(--c-forest); }
.stat-unit{ font-size:12px; color:var(--c-champagne-dark); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-top:2px; }
.stat-label{ font-size:12.5px; color:var(--c-stone); margin-top:6px; }
@media (max-width:700px){ .stat-row{ grid-template-columns: repeat(2,1fr); } }

/* ---------------------------------------------------------------------
   8. EXPLORA EL EDIFICIO
   --------------------------------------------------------------------- */
.explore{ padding: 96px 0 0; background: var(--c-bg-alt); border-bottom:1px solid var(--c-line); }

/* --- Riel horizontal (solo móvil): indicador compacto de nivel ----------- */
/* Riel horizontal (teléfono): la misma guía del escritorio, acostada. Una
   línea con cuatro paradas y el relleno champagne que avanza de izquierda a
   derecha conforme se recorren los niveles — sin recuadros sólidos. */
.level-rail-h{
  display:none; position: sticky; top: 64px; z-index: 8;
  padding: 16px 0 14px; margin-bottom: 6px;
  background: linear-gradient(180deg, var(--c-bg-alt) 74%, rgba(243,239,230,0));
}
.railh-track{ position:relative; display:flex; justify-content:space-between; padding-top:14px; }
.railh-line{ position:absolute; left:5px; right:5px; top:5px; height:1px; background:var(--c-line-strong); }
.railh-line-fill{
  position:absolute; left:0; top:0; height:1px; width:0; background: var(--c-champagne-dark);
  transition: width var(--t-slow) var(--ease);
}
.railh-item{
  position:relative; flex:1 1 0; background:none; border:none; padding:0;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--c-stone-light);
  transition: color var(--t-mid,320ms) var(--ease);
}
.railh-item::before{
  content:""; position:absolute; left:50%; top:-14px; margin-left:-4.5px;
  width:9px; height:9px; border-radius:50%;
  background: var(--c-bg-alt); border:1px solid var(--c-line-strong);
  transition: all var(--t-mid,320ms) var(--ease);
}
.railh-item:first-child::before{ left:5px; margin-left:-4.5px; }
.railh-item:last-child::before{ left:auto; right:5px; margin-left:0; margin-right:-4.5px; }
.railh-item.is-active{ color: var(--c-forest); }
.railh-item.is-active::before{ background: var(--c-champagne-dark); border-color: var(--c-champagne-dark); transform: scale(1.15); }

/* --- Estructura de dos columnas: riel fijo + tarjetas apiladas ----------- */
.explore-stack{ display:grid; grid-template-columns: 210px 1fr; gap: 40px; align-items:start; }

.level-rail{ position: sticky; top: 128px; padding-bottom: 40px; }
.rail-title{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-stone);
  font-weight:700; margin-bottom:20px;
}
.rail-track{ position:relative; padding-left:22px; display:flex; flex-direction:column; gap:26px; }
.rail-line{ position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--c-line-strong); }
.rail-line-fill{
  position:absolute; left:0; top:0; width:1px; height:0; background:var(--c-champagne-dark);
  transition: height var(--t-slow) var(--ease);
}
.rail-item{
  display:flex; align-items:center; gap:14px; text-align:left; background:none; border:none;
  padding:0; margin-left:-22px; padding-left:22px; position:relative; color:var(--c-stone-light);
  transition: color var(--t-mid, 320ms) var(--ease);
}
.ri-dot{
  position:absolute; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--c-bg-alt); border:1px solid var(--c-line-strong);
  transition: all var(--t-mid, 320ms) var(--ease);
}
.ri-text{ display:flex; flex-direction:column; gap:2px; }
.ri-clave{ font-family: var(--font-serif); font-size:17px; line-height:1; color:inherit; }
.ri-name{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:inherit; }
.rail-item:hover{ color: var(--c-graphite); }
.rail-item.is-active{ color: var(--c-forest); }
.rail-item.is-active .ri-dot{ background: var(--c-champagne-dark); border-color: var(--c-champagne-dark); transform: scale(1.15); }
.rail-item.is-active .ri-name{ color: var(--c-champagne-dark); }

/* --- Tarjetas apiladas ---------------------------------------------------
   Todas las tarjetas comparten contenedor y son sticky: la siguiente sube y
   cubre a la anterior, que permanece asomada por el borde superior.        */
.level-cards{ display:flex; flex-direction:column; row-gap: 46vh; padding-bottom: 22vh; }
.level-card{
  position: sticky;
  top: calc(112px + var(--i, 0) * 13px);
  background: var(--c-surface); border:1px solid var(--c-line);
  padding: clamp(22px,3.2vw,40px); border-radius: var(--radius-md);
  display:grid; grid-template-columns: 1.05fr 1fr; gap:38px; align-items:start;
  box-shadow: var(--shadow-lift);
  transform: scale(calc(1 - var(--cover, 0) * .045));
  transform-origin: 50% 0;
  transition: transform 120ms linear;
  overflow:hidden;
}
.lc-veil{
  position:absolute; inset:0; background: var(--c-bg-alt); pointer-events:none;
  opacity: calc(var(--cover, 0) * .55); border-radius: var(--radius-md);
  transition: opacity 120ms linear;
}
.level-panel-visual{
  aspect-ratio: 4/3; border:1px solid var(--c-line); border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center; background: var(--c-bg-alt); color:var(--c-stone-light);
  position:relative; overflow:hidden;
}
.level-panel-visual svg{ width:70%; height:70%; }
.level-panel-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lc-media-tag{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family: var(--font-serif); font-size:13px; letter-spacing:.06em;
  color: var(--c-white); background: rgba(19,42,30,.72); padding:5px 11px; border-radius:2px;
}
.level-panel-body h3{ font-size:26px; margin-bottom:10px; }
.level-panel-body p.level-desc{ color:var(--c-stone); margin-bottom:24px; font-size:15px; }
.level-space-list{ display:flex; flex-direction:column; gap:0; border-bottom:1px solid var(--c-line); }
/* Nombre, superficie total, desglose y botón son 4 hijos directos de un
   mismo grid con áreas nombradas (en vez de anidar el botón dentro de una
   fila más chica que no incluía el desglose). Esto permite que el
   desglose (.lsb-row) reciba la MISMA plantilla de columnas que la fila de
   arriba, así la columna de m² queda pixel a pixel alineada bajo la
   superficie total sin importar cuántos dígitos tenga cada cifra — y en
   móvil, permite reubicar el botón como su propia línea centrada AL FINAL
   (después del desglose) sólo cambiando grid-template-areas, sin duplicar
   markup ni depender del orden dentro de un contenedor que no lo incluía. */
.level-space-block{
  display:grid;
  grid-template-columns: 1fr 78px 92px;
  grid-template-areas: "name total link" "breakdown breakdown breakdown";
  align-items:center; column-gap:12px; row-gap:10px; padding:14px 0;
  border-top:1px solid var(--c-line);
}
.level-space-block .lsr-name{ grid-area:name; font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.level-space-block .lsr-area{ grid-area:total; font-size:12.5px; color:var(--c-stone); text-align:right; }
.level-space-block .lsr-total{ grid-area:total; font-weight:600; font-size:14.5px; text-align:right; }
.level-space-block .lsr-link{ grid-area:link; justify-self:end; }
.level-space-block .level-space-breakdown{
  grid-area:breakdown; display:flex; flex-direction:column; gap:3px;
}
.level-space-block .level-space-breakdown .lsb-row{
  display:grid; grid-template-columns: 1fr 78px 92px; /* misma plantilla que .level-space-block */
  column-gap:12px; font-size:12.5px; color:var(--c-stone);
}
.level-space-block .level-space-breakdown .lsb-row span:last-child{ text-align:right; }
.level-space-block .lsr-link{
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--c-forest);
  font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; padding:0;
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.level-space-block .lsr-link .ic{ width:13px; height:13px; }
.level-space-block .lsr-link:hover{ color: var(--c-champagne-dark); gap:9px; }

@media (max-width:1020px){
  .explore-stack{ grid-template-columns: 168px 1fr; gap:28px; }
  .level-card{ grid-template-columns:1fr; gap:24px; }
}
/* Móvil: se retira el riel lateral y queda el indicador horizontal compacto */
@media (max-width:860px){
  .explore-stack{ grid-template-columns: 1fr; gap:0; }
  .level-rail{ display:none; }
  .level-rail-h{ display:block; }
  .level-cards{ row-gap: 34vh; padding-bottom: 16vh; }
  .level-card{ top: calc(128px + var(--i, 0) * 10px); }
  .level-panel-visual{ aspect-ratio: 16/10; }
  /* Móvil: nombre y superficie total comparten la primera línea (igual
     relación visual que en escritorio, sólo que el botón baja de línea)
     para que el total quede alineado a la altura del nombre en vez de
     flotar suelto una línea abajo. Debajo, el desglose ocupa el ancho
     completo, y el botón "EXPLORA" cierra la tarjeta en su propia línea,
     centrado y con separación extra para que se lea como una acción
     aparte y no como si quedara encajado entre los textos. Al ser áreas
     de grid con nombre (no "order" dentro de un contenedor más chico), el
     botón puede moverse libremente después del desglose sin duplicar
     markup. */
  .level-space-block{
    grid-template-columns: 1fr auto;
    grid-template-areas: "name total" "breakdown breakdown" "link link";
    row-gap:8px;
  }
  .level-space-block .lsr-name{ font-size:13.5px; }
  .level-space-block .lsr-area,
  .level-space-block .lsr-total{ text-align:right; }
  /* El desglose vuelve a flex simple de 2 columnas (etiqueta / valor): en
     móvil ya es una sola columna de ancho completo, así que su valor se
     alinea al mismo borde derecho que la superficie total de arriba sin
     necesitar columnas fijas. */
  .level-space-block .level-space-breakdown .lsb-row{ display:flex; justify-content:space-between; }
  /* Botón centrado en su propia línea al final, con margen superior
     extra (además del row-gap general) para separarlo con claridad del
     desglose. En móvil el enlace de texto se confundía con el resto de
     la fila; se convierte en una píldora sólida compacta — con textura
     de botón (sombra + realce interior), no un óvalo plano — para que se
     lea de inmediato como la acción tocable, sin igualar el peso del CTA
     principal. */
  .level-space-block .lsr-link{
    justify-self:center; margin-top:6px;
    color: var(--c-white); background: var(--c-forest);
    padding: 9px 18px 9px 20px; border-radius:999px; gap:4px;
    box-shadow: 0 2px 6px rgba(19,42,30,.24), inset 0 1px 0 rgba(255,255,255,.16);
  }
  .level-space-block .lsr-link .ic{ color: var(--c-white); }
  .level-space-block .lsr-link:hover,
  .level-space-block .lsr-link:active{
    color: var(--c-white); background: var(--c-forest-dark); gap:4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
  }
}
@media (max-width:760px){
  /* Margen de seguridad: la última fila de cada nivel nunca queda a la
     misma altura que el botón flotante "Presentar oferta privada", sin
     depender de que ninguna fila en particular sea de una sola línea. */
  .level-space-list{ padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce){
  .level-cards{ row-gap: 26px; padding-bottom:0; }
  .level-card{ position: static; transform:none; }
  .lc-veil{ display:none; }
}

/* ---------------------------------------------------------------------
   9. ESPACIOS DISPONIBLES (CARDS)
   --------------------------------------------------------------------- */
.spaces{ position:relative; padding: 96px 0; }
.space-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.space-card{
  background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.space-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--c-line-strong); }
.space-card-media{
  aspect-ratio: 4/3; background: linear-gradient(135deg, var(--c-bg-alt), #EDE7D8);
  display:flex; align-items:center; justify-content:center; color: var(--c-stone-light); position:relative; overflow:hidden;
}
.space-card-media svg{ width:46%; }
.space-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.space-card-tag{ position:absolute; top:14px; left:14px; background:var(--c-white); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:2px; color:var(--c-forest); }
.space-card-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.space-card-level{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-champagne-dark); font-weight:700; }
/* Nombre + superficie rentable total en la misma línea — misma lógica que
   la tarjeta de "Explora el edificio" (nombre a la izquierda, total en
   negrita a la derecha). Debajo, el desglose en lista de 1 sola columna
   (chico, gris piedra); en 2 columnas se veía distorsionado en esta
   tarjeta más angosta (ajuste 2026-09-09). */
.space-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.space-card-name{ font-family:var(--font-serif); font-size:21px; margin:0; }
.space-card-total{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.space-card-breakdown{ display:flex; flex-direction:column; gap:3px; }
.space-card-breakdown .scb-row{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--c-stone);
}
.space-card-breakdown .scb-row span:last-child{ white-space:nowrap; }
.space-card-feats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.space-card-feats span{ font-size:10.5px; border:1px solid var(--c-line); padding:4px 9px; border-radius:20px; color:var(--c-stone); }
.space-card-actions{ margin-top:auto; display:flex; gap:10px; padding-top:14px; }
.space-card-actions .btn{ flex:1; padding:12px 10px; font-size:11px; }
@media (max-width:960px){ .space-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .space-grid{ grid-template-columns: 1fr;} }

/* ---------------------------------------------------------------------
   10. PLANOS
   --------------------------------------------------------------------- */
.floorplans{ padding:96px 0; background: var(--c-bg-alt); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.plan-tabs{ display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.plan-tab{ padding:12px 20px; border:1px solid var(--c-line-strong); background:var(--c-surface); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--c-stone); border-radius:var(--radius-sm); }
.plan-tab.is-active{ background:var(--c-ink); border-color:var(--c-ink); color:var(--c-white); }
.plan-viewer{
  background: var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-md);
  aspect-ratio: 16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  color: var(--c-stone); cursor: zoom-in; position:relative; overflow:hidden;
}
.plan-viewer .plan-placeholder-grid{ position:absolute; inset:0; opacity:.35; }
.plan-viewer p{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; z-index:1; }
.plan-viewer-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.plan-viewer-label{
  position:absolute; left:18px; bottom:18px; z-index:1; color:var(--c-white);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  background:rgba(22,22,15,.55); padding:6px 12px; border-radius:2px;
}
.plan-viewer .zoom-hint{ position:absolute; bottom:18px; right:18px; z-index:1; display:flex; align-items:center; gap:6px; font-size:11px; text-transform:none; letter-spacing:0; font-weight:600; }
.plan-viewer-img ~ .zoom-hint{ background:rgba(255,255,255,.88); color:var(--c-ink); padding:5px 10px; border-radius:20px; }

/* ---------------------------------------------------------------------
   11. RENDERS
   --------------------------------------------------------------------- */
.renders{ position:relative; padding:96px 0; }
.render-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.render-tab{ padding:10px 18px; border:1px solid var(--c-line-strong); background:transparent; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--c-stone); border-radius:20px; }
.render-tab.is-active{ background:var(--c-forest); border-color:var(--c-forest); color:var(--c-white); }

/* Escenario del carrusel: la pieza al frente queda nítida y las laterales se
   alejan en profundidad. El arrastre desplaza la fotografía dentro de su
   marco a distinta velocidad (parallax), evitando la sensación de plano. */
.render-stage{ position:relative; }
.render-viewport{
  position:relative; height: clamp(300px, 44vw, 480px);
  perspective: 1500px; perspective-origin: 50% 50%;
  overflow:hidden; touch-action: pan-y; cursor: grab;
  --slide-w: 60%;
}
.render-viewport:active{ cursor: grabbing; }
.render-viewport:focus-visible{ outline:1px solid var(--c-champagne-dark); outline-offset:4px; }
.render-track{ position:absolute; inset:0; transform-style: preserve-3d; }
.render-track.is-animated .render-slide{ transition: transform 520ms var(--ease), opacity 520ms var(--ease); }
.render-track.is-animated .render-slide img{ transition: transform 520ms var(--ease); }
.render-track.is-dragging .render-slide,
.render-track.is-dragging .render-slide img{ transition:none; }

.render-slide{
  position:absolute; top:0; bottom:0; left:50%; width: var(--slide-w);
  margin:0 0 0 calc(var(--slide-w) / -2);
  transform-style: preserve-3d; backface-visibility:hidden;
  will-change: transform, opacity;
}
.rs-frame{
  position:absolute; inset:0; overflow:hidden; display:block;
  border:1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-bg-alt); box-shadow: var(--shadow-soft);
  transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.render-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none; will-change: transform;
}
.render-slide.is-front .rs-frame{ border-color: var(--c-champagne); box-shadow: var(--shadow-lift); }
.render-slide .render-label{
  position:absolute; left:14px; bottom:12px; z-index:2; color:var(--c-graphite);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  background:rgba(255,255,255,.86); padding:5px 10px; border-radius:2px;
  opacity:0; transition: opacity var(--t-slow) var(--ease);
}
.render-slide.is-front .render-label{ opacity:1; }

.render-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:26px; }
.render-nav{
  width:40px; height:40px; border:1px solid var(--c-line-strong); background:transparent;
  border-radius:50%; color:var(--c-graphite); display:flex; align-items:center; justify-content:center;
  transition: all var(--t-fast) var(--ease); flex-shrink:0;
}
.render-nav:hover{ border-color:var(--c-forest); color:var(--c-forest); }
.render-nav .ic{ width:17px; height:17px; }
.render-dots{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:center; }
.render-dot{
  width:7px; height:7px; border-radius:50%; background:transparent;
  border:1px solid var(--c-stone-light); padding:0;
  transition: all var(--t-fast) var(--ease);
}
.render-dot:hover{ border-color: var(--c-graphite); }
.render-dot.is-active{ background:var(--c-forest); border-color:var(--c-forest); transform: scale(1.28); }
.render-hint{
  text-align:center; margin-top:14px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--c-stone-light);
}
.render-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--c-stone); font-size:13px; letter-spacing:.03em; }
.render-stage.is-empty .render-controls,
.render-stage.is-empty .render-hint{ display:none; }

@media (max-width:860px){
  .render-viewport{ height: clamp(260px, 62vw, 360px); }
  .render-hint{ font-size:10px; }
}
@media (prefers-reduced-motion: reduce){
  .render-track.is-animated .render-slide,
  .render-track.is-animated .render-slide img{ transition:none; }
}

/* ---------------------------------------------------------------------
   12. PROCESO / TIMELINE
   --------------------------------------------------------------------- */
.process{ position:relative; padding:96px 0; background: var(--c-forest); color: var(--c-bg); }
.process .section-eyebrow{ color: var(--c-champagne); }
.process .section-title{ color: var(--c-white); }
.process .section-lead{ color: rgba(251,249,244,.68); }
.timeline{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(251,249,244,.16); border:1px solid rgba(251,249,244,.16); }
.timeline-step{ background: var(--c-forest-dark); padding: 30px 24px; display:flex; flex-direction:column; gap:14px; min-height: 190px; position:relative; }
.timeline-step .ts-num{ font-family: var(--font-serif); font-size:30px; color: var(--c-champagne); }
.timeline-step h4{ font-family: var(--font-sans); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--c-white); }
.timeline-step p{ font-size:13.5px; color: rgba(251,249,244,.66); line-height:1.55; }
/* El riel y los puntos solo existen en la versión vertical de teléfono. */
.timeline-rail{ display:none; }
.timeline-step .ts-dot{ display:none; }
@media (max-width:900px){ .timeline{ grid-template-columns: repeat(2,1fr);} }

/* --- Teléfono: línea de tiempo vertical que se llena al hacer scroll -------
   Los pasos dejan de ser bloques grandes y se vuelven entradas compactas
   colgadas de un riel; el trazo avanza con el scroll y cada punto se enciende
   al alcanzarse, de modo que el recorrido se lee mucho más rápido.          */
@media (max-width:760px){
  .timeline{
    display:block; position:relative; background:none; border:none;
    padding-left: 30px;
  }
  .timeline-rail{
    display:block; position:absolute; left:5px; top:7px; bottom:7px; width:1px;
    background: rgba(251,249,244,.20);
  }
  .timeline-rail-fill{
    position:absolute; left:0; top:0; width:1px; height:0;
    background: var(--c-champagne);
    transition: height 140ms linear;
  }
  .timeline-step{
    background:none; padding: 0 0 26px; min-height:0; gap:5px;
    display:grid; grid-template-columns: auto 1fr; align-items:baseline;
    column-gap:10px;
  }
  .timeline-step:last-of-type{ padding-bottom:0; }
  .timeline-step .ts-dot{
    display:block; position:absolute; left:-30px; top:7px;
    width:11px; height:11px; border-radius:50%;
    background: var(--c-forest-dark); border:1px solid rgba(251,249,244,.35);
    transition: background var(--t-mid,320ms) var(--ease), border-color var(--t-mid,320ms) var(--ease), transform var(--t-mid,320ms) var(--ease);
  }
  .timeline-step .ts-num{
    font-size:13px; letter-spacing:.14em; font-family: var(--font-sans);
    font-weight:700; color: rgba(251,249,244,.34);
    transition: color var(--t-mid,320ms) var(--ease);
  }
  .timeline-step h4{
    grid-column:2; font-size:14.5px; color: rgba(251,249,244,.42);
    transition: color var(--t-mid,320ms) var(--ease);
  }
  .timeline-step p{
    grid-column:2; font-size:13px; line-height:1.5; color: rgba(251,249,244,.30);
    transition: color var(--t-mid,320ms) var(--ease);
  }
  /* Paso alcanzado por el trazo */
  .timeline-step.is-reached .ts-dot{ background: var(--c-champagne); border-color: var(--c-champagne); transform: scale(1.12); }
  .timeline-step.is-reached .ts-num{ color: var(--c-champagne); }
  .timeline-step.is-reached h4{ color: var(--c-white); }
  .timeline-step.is-reached p{ color: rgba(251,249,244,.66); }
}
@media (prefers-reduced-motion: reduce){
  .timeline-step .ts-dot, .timeline-step .ts-num,
  .timeline-step h4, .timeline-step p, .timeline-rail-fill{ transition:none; }
}

/* ---------------------------------------------------------------------
   13. CONTADOR
   --------------------------------------------------------------------- */
.counter-section{ position:relative; background: var(--c-ink); color: var(--c-bg); padding: 72px 0; }
.counter-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:36px; }
.counter-title{ color: var(--c-white); font-size: clamp(26px,3.2vw,36px); margin-bottom:10px; }
.counter-sub{ color: rgba(251,249,244,.62); font-size:14px; }
.counter-sub.closed{ color:#E4A597; }
/* Nota de reserva bajo el texto de cierre: viñeta discreta en champagne, un
   punto menos de tamaño que .counter-sub para que lea como pie de nota. */
.counter-note{
  position:relative; padding-left:16px; margin-top:8px;
  color: rgba(251,249,244,.48); font-size:13px; line-height:1.5;
}
.counter-note::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:4px; height:4px; border-radius:50%;
  background: var(--c-champagne); opacity:.75;
}
.counter-clock{ display:flex; flex-wrap:wrap; gap: 22px; row-gap:20px; }
.clock-unit{ display:flex; flex-direction:column; align-items:center; min-width:56px; }
@media (max-width:520px){
  .counter-clock{ gap:16px; row-gap:16px; }
  .clock-unit{ min-width:48px; }
  .clock-num{ font-size:26px; }
}
.clock-num{ font-family: var(--font-serif); font-size: clamp(30px,4vw,44px); color: var(--c-champagne); font-variant-numeric: tabular-nums; }
.clock-label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: rgba(251,249,244,.5); margin-top:4px; }

/* ---------------------------------------------------------------------
   14. AMENIDADES
   --------------------------------------------------------------------- */
.amenities{ position:relative; padding:96px 0; }
.amenity-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:24px; }
.amenity-item{ text-align:center; padding: 34px 16px; border:1px solid var(--c-line); border-radius:var(--radius-md); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.amenity-item:hover{ border-color: var(--c-forest); transform: translateY(-3px); }
.amenity-item .ai-icon{ width:40px; height:40px; margin:0 auto 16px; color: var(--c-forest); }
.amenity-item .ai-icon .ic{ width:100%; height:100%; stroke-width:1.1; }
.amenity-item span{ font-size:12.5px; letter-spacing:.05em; font-weight:600; }
@media (max-width:900px){ .amenity-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:560px){ .amenity-grid{ grid-template-columns: repeat(2,1fr);} }

/* ---------------------------------------------------------------------
   15. UBICACIÓN
   --------------------------------------------------------------------- */
.location{ position:relative; padding:96px 0; background: var(--c-bg-alt); border-top:1px solid var(--c-line); }
.location-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.location-address{ font-style:normal; font-size:19px; line-height:1.7; font-family:var(--font-serif); margin: 18px 0 30px; color: var(--c-graphite); }
.location-visual{
  aspect-ratio: 1/1; border:1px solid var(--c-line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background: var(--c-surface);
  text-decoration:none; color:inherit; cursor:pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.location-visual:hover, .location-visual:focus-visible{
  transform: translateY(-3px); border-color: var(--c-champagne-dark);
  box-shadow: 0 20px 44px rgba(19,42,30,.14);
}
.location-visual:focus-visible{ outline:2px solid var(--c-forest); outline-offset:5px; }
.location-visual:hover .mv-ring{ opacity:.9; }
.location-visual:hover .mv-leader{ opacity:.9; }
.map-graphic{ width:86%; height:86%; }

/* pieza editorial — mapa de ubicación */
.mv-park{ fill: var(--c-forest); opacity:.16; }
.mv-park-sm{ opacity:.13; }
.mv-street{ fill:none; stroke: var(--c-stone-light); stroke-width:.6; stroke-linecap:round; opacity:.6; }
.mv-avenue{ fill:none; stroke: var(--c-stone); stroke-width:1.1; stroke-linecap:round; opacity:.48; }
.mv-street-local{ stroke: var(--c-forest); stroke-width:1; opacity:.4; }
.mv-compass-line{ stroke: var(--c-champagne-dark); stroke-width:.7; opacity:.75; }
.mv-compass-n{ font-family: var(--font-sans); font-size:8px; font-weight:600; letter-spacing:.05em; fill: var(--c-champagne-dark); }
.mv-ring{ fill:none; stroke: var(--c-champagne-dark); stroke-width:.7; opacity:.55; transition: opacity var(--t-fast) var(--ease); }
.mv-pin-halo{ fill: var(--c-surface); }
.mv-pin{ fill: var(--c-forest); }
.mv-leader{ stroke: var(--c-champagne-dark); stroke-width:.5; opacity:.65; transition: opacity var(--t-fast) var(--ease); }
.mv-label-title{ font-family: var(--font-sans); font-size:9.5px; font-weight:700; letter-spacing:.085em; fill: var(--c-forest-dark); }
.mv-label-sub{ font-family: var(--font-serif); font-style:italic; font-size:9px; fill: var(--c-stone); }
/* El mapa vectorial y el botón "Abrir en Google Maps" llevan al mismo destino,
   así que sólo se muestra uno a la vez: en escritorio el mapa (más editorial),
   en móvil el botón (más directo al tacto y sin ocupar altura de más). */
@media (min-width:861px){
  #mapsLink{ display:none; }
}
@media (max-width:860px){
  .location-inner{ grid-template-columns:1fr; }
  .location-visual{ display:none; }
}

/* ---------------------------------------------------------------------
   16. CTA FINAL
   --------------------------------------------------------------------- */
.final-cta{ position:relative; background: var(--c-graphite); color: var(--c-white); padding: 100px 0; text-align:center; }
.final-cta-inner{ max-width:680px; margin:0 auto; }
.final-cta-title{ font-size: clamp(28px,4vw,44px); margin-bottom:34px; color: var(--c-white); }
.final-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background: var(--c-ink); color: rgba(251,249,244,.72); padding: 72px 0 0; }
.footer-inner{ display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap:36px; padding-bottom:56px; border-bottom:1px solid rgba(251,249,244,.12); }
.footer-brand p{ font-size:12.5px; margin-top:10px; color: rgba(251,249,244,.5); max-width:220px; }
.footer-brand .brand-mark{ border-color: rgba(251,249,244,.4); color:var(--c-white); }
.footer-brand .brand-text{ color: var(--c-white); }
.footer-col h4{ font-family: var(--font-sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--c-champagne); margin-bottom:16px; }
.footer-col a{ display:block; font-size:13.5px; padding:6px 0; color: rgba(251,249,244,.72); }
.footer-col a:hover{ color: var(--c-white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 20px 0; font-size:11.5px; flex-wrap:wrap; gap:10px; }
.footer-confidential{ display:flex; align-items:center; gap:6px; }
@media (max-width:800px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
   18. STICKY CTA (MOBILE)
   --------------------------------------------------------------------- */
/* Cristal esmerilado invertido: película clara muy translúcida con contorno y
   texto en verde bosque, para que el contenido se vea pasar con claridad detrás
   del botón. El formulario que abre NO lleva ningún tratamiento translúcido —
   se mantiene sólido y plano. */
.sticky-cta{
  display:none; position: fixed; left:16px; right:16px; bottom:16px; z-index:60;
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  color: var(--c-forest); border:1px solid rgba(30,58,43,.42); border-radius: 999px;
  padding:16px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  box-shadow: 0 8px 26px rgba(22,22,15,.14), inset 0 1px 0 rgba(255,255,255,.55);
  opacity:1; transform:translateY(0);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
/* Sobre las secciones oscuras del sitio (contador y cierre) la película se
   aclara para que el verde del texto siga siendo legible. */
.sticky-cta.on-dark{
  background: rgba(255,255,255,.72);
  border-color: rgba(30,58,43,.28);
  box-shadow: 0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Dentro de "Explora el edificio" las tarjetas de nivel quedan fijas en
   pantalla durante buena parte del scroll; si una fila de espacio cayera en
   la banda de este botón, quedaría atrapada ahí de forma permanente (no es
   un simple paso transitorio como en el resto del sitio). Cada ficha de
   espacio ya ofrece su propio "Presentar oferta"/"Programar visita", así
   que aquí el botón se atenúa por completo en vez de arriesgarse a tapar
   algo de forma indefinida. Ver updateStickyCtaContrast() en cliente.js. */
.sticky-cta.is-hushed{ opacity:0; transform:translateY(10px); pointer-events:none; }
/* Sin soporte de backdrop-filter el botón se vuelve sólido y legible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .sticky-cta{ background: rgba(255,255,255,.92); }
}
@media (max-width:760px){ .sticky-cta{ display:block; } body{ padding-bottom: 78px; } }

/* ---------------------------------------------------------------------
   19. OVERLAYS / MODALES (genérico)
   --------------------------------------------------------------------- */
.overlay{
  position: fixed; inset:0; z-index: 200; display:flex; align-items:flex-start; justify-content:center;
  background: rgba(20,20,15,0.55); backdrop-filter: blur(3px);
  opacity:0; pointer-events:none; transition: opacity var(--t-med) var(--ease);
  padding: 5vh 16px; overflow-y:auto;
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.overlay-panel{
  background: var(--c-surface); width:100%; max-width: 640px; border-radius: var(--radius-md);
  padding: clamp(28px,4vw,52px); position:relative; margin: auto;
  transform: translateY(18px) scale(.98); transition: transform var(--t-med) var(--ease);
  box-shadow: var(--shadow-lift);
}
.overlay.is-open .overlay-panel{ transform: translateY(0) scale(1); }
/* Cristal esmerilado (misma receta que .sticky-cta): visible en reposo, no
   solo al pasar el cursor — en móvil no hay hover que lo revele, y sobre
   una foto (p. ej. la ficha de espacio) un botón sin fondo propio se vuelve
   invisible. La variante .light es para overlays con fondo oscuro (lightbox
   de renders/planos), igual que .sticky-cta.on-dark. */
.overlay-close{
  position:absolute; top:18px; right:18px; z-index:2; border:none; color:var(--c-graphite);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid rgba(22,22,15,.14);
  box-shadow: 0 2px 8px rgba(22,22,15,.10);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.overlay-close:hover{ background: rgba(255,255,255,.85); color: var(--c-ink); border-color: rgba(22,22,15,.22); }
.overlay-close.light{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}
.overlay-close.light:hover{ background: rgba(255,255,255,.28); color:#fff; border-color: rgba(255,255,255,.44); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .overlay-close{ background: rgba(255,255,255,.94); }
  .overlay-close.light{ background: rgba(0,0,0,.32); }
}
.overlay-title{ font-size: 26px; margin-bottom:8px; }
.overlay-sub{ color: var(--c-stone); font-size:14px; margin-bottom:28px; }

.overlay-dark{ background: rgba(10,10,8,0.94); align-items:center; }
.overlay-dark .lightbox-inner{ max-width: 900px; width:100%; color:#fff; text-align:center; }

/* ---------------------------------------------------------------------
   20. FORMULARIOS
   --------------------------------------------------------------------- */
.ml-form{ display:flex; flex-direction:column; gap:22px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; letter-spacing:.04em; color: var(--c-stone); font-weight:600; }
.field-full{ grid-column: 1 / -1; }
.field input, .field select, .field textarea{
  border:1px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: 13px 14px;
  background: var(--c-bg); color: var(--c-ink); font-size:14.5px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--c-forest); background: var(--c-white); }
.field textarea{ resize: vertical; min-height:96px; font-family:inherit; }
.field-hint{ font-size:11.5px; color: var(--c-stone-light); font-weight:400; }
/* Iteración 2026-09-04 — solicitud de interés: reutiliza los mismos tokens
   de color del sistema (sin introducir nuevos colores) para la retro-
   alimentación de validación y para los campos precargados/bloqueados
   del formulario de agenda cuando llega desde una solicitud confirmada. */
.field-hint.is-error{ color: var(--c-champagne-dark); font-weight:600; }
.field input[readonly]{ background: var(--c-bg-alt); color: var(--c-stone); cursor: not-allowed; }
/* El estado de selección lo comunica el contorno de la píldora (borde +
   fondo + color de texto), no el punto — por eso el <input> nativo se
   oculta visualmente (sigue presente y operable para teclado/lectores de
   pantalla) y se sustituye por un punto tipográfico pequeño (7px, sin el
   anillo grueso de un control de formulario): hueco cuando no está
   elegido, sólido cuando sí — un detalle secundario, no el protagonista. */
.field-radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.field-radio-group label{
  position:relative;
  display:flex; align-items:center; gap:8px; border:1px solid var(--c-line-strong); border-radius:20px;
  padding:9px 16px 9px 14px; font-size:12.5px; font-weight:600; color:var(--c-stone); cursor:pointer;
  transition: all var(--t-fast) var(--ease);
}
.field-radio-group input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.field-radio-group .chip-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  border:1.3px solid var(--c-stone-light); background:transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.field-radio-group input:checked + .chip-dot{ border-color: var(--c-forest); background: var(--c-forest); }
.field-radio-group input:checked ~ span{ color: var(--c-forest); }
.field-radio-group label:has(input:checked){ border-color: var(--c-forest); background: var(--c-forest-tint); }

@media (max-width:640px){ .form-grid{ grid-template-columns: 1fr; } }

.form-success{ text-align:center; padding: 20px 0; color: var(--c-forest); display:flex; flex-direction:column; align-items:center; gap:14px; }
.form-success h4{ font-size:24px; }
.form-success p{ color: var(--c-stone); max-width:380px; }
.form-success-actions{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
.success-summary{ width:100%; background: var(--c-bg-alt); border-radius:var(--radius-sm); padding:18px 20px; text-align:left; font-size:13.5px; color:var(--c-graphite); display:flex; flex-direction:column; gap:6px; }
.success-summary b{ color:var(--c-ink); }
.folio-tag{ font-family: var(--font-serif); font-size:22px; letter-spacing:.02em; color:var(--c-champagne-dark); background: var(--c-bg-alt); padding:10px 22px; border-radius:20px; }

/* ---------------------------------------------------------------------
   TARJETA EMERGENTE DE CONFIRMACIÓN (visita solicitada)
   Sustituye al panel en línea que antes reemplazaba al formulario: ahora
   la confirmación llega como tarjeta propia, con folio y datos de la cita.
   --------------------------------------------------------------------- */
.vcard-panel{ max-width: 470px; padding: clamp(30px,4vw,42px); }
.vcard{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.vcard-check{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(30,58,43,.08); border:1px solid rgba(30,58,43,.20); color: var(--c-forest);
  margin-bottom:20px;
}
.vcard-check .ic{ width:26px; height:26px; stroke-width:2.1; }
.vcard-eyebrow{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--c-champagne-dark); margin-bottom:8px;
}
.vcard-title{ font-family: var(--font-serif); font-size:26px; letter-spacing:.02em; margin-bottom:10px; }
.vcard-sub{ font-size:13.5px; color: var(--c-stone); line-height:1.6; max-width:330px; margin-bottom:22px; }
.vcard-folio{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
  background: var(--c-bg-alt); border-radius: var(--radius-sm); padding:14px 20px; margin-bottom:18px;
}
.vcard-folio-label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--c-stone); }
.vcard-folio-value{ font-family: var(--font-serif); font-size:21px; letter-spacing:.03em; color: var(--c-champagne-dark); }
.vcard-rows{ width:100%; display:flex; flex-direction:column; text-align:left; margin-bottom:20px; }
.vcard-rows .vcard-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:10px 2px; border-bottom:1px solid var(--c-line); font-size:13.5px;
}
.vcard-rows .vcard-row:last-child{ border-bottom:none; }
.vcard-rows .vcard-label{ color: var(--c-stone); flex:0 0 auto; }
.vcard-rows .vcard-value{ color: var(--c-ink); font-weight:600; text-align:right; }
.vcard-foot{
  display:flex; align-items:center; gap:7px; justify-content:center;
  font-size:11.5px; color: var(--c-stone-light); margin-bottom:22px;
}

/* ---------------------------------------------------------------------
   TARJETA DE CONTACTO
   Tarjeta de presentación privada: los datos no se publican de forma
   permanente en la página, sólo al abrir el enlace "Contacto".
   --------------------------------------------------------------------- */
.contact-panel{ max-width: 430px; padding: clamp(30px,4vw,44px); }
.contact-card{ display:flex; flex-direction:column; }
.contact-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.contact-card-brand{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--c-stone);
}
.contact-card-eyebrow{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--c-champagne-dark); margin-bottom:8px;
}
.contact-card-name{ font-family: var(--font-serif); font-size:29px; line-height:1.15; margin-bottom:6px; }
.contact-card-role{ font-size:13px; color: var(--c-stone); line-height:1.5; }
.contact-card-rule{
  display:block; width:44px; height:1px; background: var(--c-champagne); opacity:.7; margin:22px 0;
}
.contact-card-lines{ display:flex; flex-direction:column; gap:2px; }
.contact-line{
  display:flex; align-items:center; gap:14px; padding:12px 12px 12px 2px; border-radius: var(--radius-sm);
  color: var(--c-ink); transition: background var(--t-fast) var(--ease);
}
.contact-line:hover{ background: var(--c-bg-alt); }
.contact-line .ic{ width:18px; height:18px; color: var(--c-forest); flex:0 0 auto; }
.contact-line-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-line-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--c-stone-light); }
.contact-line-value{ font-size:15px; letter-spacing:.01em; word-break:break-word; }
.contact-card-foot{
  display:flex; align-items:center; gap:7px; font-size:11.5px; color: var(--c-stone-light);
  margin-top:24px; padding-top:18px; border-top:1px solid var(--c-line);
}

/* ---------------------------------------------------------------------
   21. FICHA DE ESPACIO (MODAL)
   --------------------------------------------------------------------- */
.space-detail{ max-width: 920px; padding:0; overflow:hidden; }
.space-detail-content{ display:flex; flex-direction:column; }
.sd-hero{ aspect-ratio: 21/9; background: linear-gradient(135deg, var(--c-bg-alt), #E4DCC6); display:flex; align-items:center; justify-content:center; color: var(--c-stone-light); position:relative; overflow:hidden; }
.sd-hero svg{ width:26%; }
.sd-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sd-hero .sd-tag{ position:absolute; left:24px; top:24px; background:var(--c-white); padding:7px 14px; border-radius:2px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--c-forest); }
.sd-body{ padding: clamp(24px,4vw,44px); }
.sd-level{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-champagne-dark); font-weight:700; margin-bottom:8px; }
.sd-title{ font-size: clamp(26px,3vw,34px); margin-bottom:16px; }
.sd-desc{ color:var(--c-stone); font-size:15px; max-width:640px; margin-bottom:26px; }
.sd-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin-bottom:30px; }
.sd-stat{ border-top:1px solid var(--c-line-strong); padding-top:10px; }
.sd-stat b{ display:block; font-family:var(--font-serif); font-size:22px; color:var(--c-ink); }
.sd-stat span{ font-size:11.5px; color:var(--c-stone); text-transform:uppercase; letter-spacing:.06em; }
.sd-feats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.sd-feats li{ border:1px solid var(--c-line); padding:9px 16px; border-radius:20px; font-size:13px; color:var(--c-graphite); display:flex; align-items:center; gap:8px; }
.sd-gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-bottom:32px; }
.sd-gallery div{ aspect-ratio:1/1; background: linear-gradient(160deg,#EDE9DD,#DCD5C2); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--c-stone-light); cursor:zoom-in; overflow:hidden; position:relative; }
.sd-gallery svg{ width:34%; }
.sd-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.sd-delivery-note{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:var(--c-stone); margin-bottom:24px; }
.sd-delivery-note svg{ flex-shrink:0; margin-top:1px; }
.sd-actions{ display:flex; gap:14px; flex-wrap:wrap; border-top:1px solid var(--c-line); padding-top:28px; }
@media (max-width:640px){ .sd-gallery{ grid-template-columns: repeat(2,1fr);} }

/* ---------------------------------------------------------------------
   22. PROCESO DE OFERTA (WIZARD FULLSCREEN)
   --------------------------------------------------------------------- */
.overlay-fullscreen{ background: var(--c-bg); align-items:stretch; padding:0; }
.oferta-shell{ width:100%; min-height:100%; display:flex; flex-direction:column; background:var(--c-bg); }
.oferta-header{ position:sticky; top:0; background: var(--c-bg); border-bottom:1px solid var(--c-line); z-index:5; padding: 18px var(--gutter) 0; }
.oferta-header-top{ display:flex; align-items:center; gap:12px; max-width:900px; margin:0 auto; padding-bottom:16px; }
.oferta-header-title{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--c-stone); flex:1; }
.oferta-header .overlay-close{ position:static; }
.oferta-progress{ max-width:900px; margin:0 auto; padding-bottom:16px; }
.oferta-progress-bar{ height:3px; background: var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:10px; }
.oferta-progress-fill{ height:100%; background: var(--c-forest); width:12.5%; transition: width var(--t-med) var(--ease); }
.oferta-progress-label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-stone); font-weight:700; }
.oferta-progress-label #ofertaStepNum{ color:var(--c-ink); }

.oferta-body{ flex:1; max-width:900px; margin:0 auto; width:100%; padding: 44px var(--gutter) 60px; }
.oferta-step-eyebrow{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-champagne-dark); font-weight:700; margin-bottom:8px; }
.oferta-step-title{ font-size: clamp(24px,3vw,32px); margin-bottom:10px; }
.oferta-step-desc{ color:var(--c-stone); margin-bottom:34px; max-width:560px; font-size:14.5px; }

.oferta-footer{ position:sticky; bottom:0; background: var(--c-bg); border-top:1px solid var(--c-line); padding: 16px var(--gutter); display:flex; justify-content:space-between; gap:12px; max-width:100%; }
.oferta-footer .btn{ min-width:120px; }

/* Chips de espacio — tarjeta de dos líneas (nombre + nivel/superficie),
   porque llevan más información que una píldora de una sola palabra y eso
   justifica que sean más grandes. Pero la SELECCIÓN sigue exactamente la
   misma lógica de contorno/color que las píldoras de tipo de persona y
   tiempo de ocupación (borde + fondo tenue + texto, no un relleno sólido) —
   así los tres grupos del formulario se leen como un solo sistema. Como se
   puede elegir más de un espacio, el indicador es un check, no un radio; y
   a diferencia del punto de las píldoras (que siempre se ve, hueco o
   relleno), aquí no hay ningún ícono hasta que se selecciona. */
.space-pick-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.space-pick{
  display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--c-line-strong); border-radius:12px;
  padding:10px 16px; cursor:pointer; background: var(--c-surface);
  transition: all var(--t-fast) var(--ease);
}
.space-pick:hover{ border-color: var(--c-ink); }
.space-pick.is-selected{ border-color: var(--c-forest); background: var(--c-forest-tint); }
.space-pick .sp-name{
  font-family:var(--font-sans); font-weight:700; font-size:12.5px; margin:0; color:var(--c-graphite);
  display:flex; align-items:center; gap:6px;
}
.space-pick .sp-check{ display:none; width:12px; height:12px; flex-shrink:0; color: var(--c-forest); }
.space-pick.is-selected .sp-check{ display:inline-flex; }
.space-pick.is-selected .sp-name{ color: var(--c-forest); }
.space-pick .sp-meta{ font-size:11px; color:var(--c-stone); margin:0; }
.space-pick.is-selected .sp-meta{ color: var(--c-forest); opacity:.75; }

.doc-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--c-line); border-radius:var(--radius-sm); margin-bottom:10px; }
.doc-row .doc-icon{ width:34px; height:34px; border-radius:50%; background:var(--c-bg-alt); display:flex; align-items:center; justify-content:center; color:var(--c-stone); flex-shrink:0; }
.doc-row .doc-info{ flex:1; min-width:0; }
.doc-row .doc-name{ font-size:14px; font-weight:600; }
.doc-row .doc-meta{ font-size:11.5px; color:var(--c-stone); display:flex; gap:10px; margin-top:2px; }
.doc-row .doc-status{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:5px 10px; border-radius:20px; }
.doc-row .doc-status.pending{ color:var(--c-stone); background: var(--c-bg-alt); }
.doc-row .doc-status.uploaded{ color: var(--c-forest); background: var(--c-forest-tint); }
.doc-row button{ background:none; border:none; color:var(--c-stone); padding:6px; }
.doc-row button:hover{ color:#8B3A2E; }
.doc-add-btn{ border:1px dashed var(--c-line-strong); border-radius:var(--radius-sm); padding:14px 16px; width:100%; background:transparent; color:var(--c-stone); font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; }
.doc-add-btn:hover{ border-color:var(--c-forest); color:var(--c-forest); }
.doc-demo-note{ font-size:11.5px; color:var(--c-stone-light); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:16px; }

.review-block{ border-top:1px solid var(--c-line); padding: 22px 0; }
.review-block h4{ font-family:var(--font-sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-champagne-dark); font-weight:700; margin-bottom:14px; }
.review-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px 24px; }
.review-item{ display:flex; flex-direction:column; gap:3px; }
.review-item span{ font-size:11px; color:var(--c-stone); text-transform:uppercase; letter-spacing:.05em; }
.review-item b{ font-size:14.5px; color:var(--c-ink); font-weight:600; }
.review-checks{ display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid var(--c-line); margin-top:10px; }
.review-checks label{ display:flex; align-items:flex-start; gap:12px; font-size:13.5px; color:var(--c-graphite); cursor:pointer; }
.review-checks input{ margin-top:3px; accent-color: var(--c-forest); width:16px; height:16px; flex-shrink:0; }
@media (max-width:640px){ .review-grid{ grid-template-columns:1fr; } }

.confirm-screen{ text-align:center; padding: 40px 0 20px; }
.confirm-icon{ width:76px; height:76px; border-radius:50%; background: var(--c-forest-tint); color:var(--c-forest); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; }
.confirm-icon svg{ width:36px; height:36px; }
.confirm-eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-stone); font-weight:700; margin-bottom:10px; }
.confirm-title{ font-size: clamp(28px,4vw,38px); margin-bottom:6px; }
.confirm-title-en{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-champagne-dark); font-weight:700; margin-bottom:22px; }
.confirm-folio{ display:inline-block; font-family:var(--font-serif); font-size:30px; letter-spacing:.03em; background: var(--c-bg-alt); padding:16px 34px; border-radius: var(--radius-sm); margin: 8px 0 30px; }
.confirm-meta{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; max-width:560px; margin: 0 auto 34px; text-align:left; }
.confirm-meta div span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-stone); margin-bottom:4px; }
.confirm-meta div b{ font-size:14.5px; }
.confirm-msg{ color:var(--c-stone); font-size:14.5px; max-width:440px; margin: 0 auto 6px; }
.confirm-msg.strong{ color:var(--c-ink); font-weight:600; }
.confirm-actions{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){ .confirm-meta{ grid-template-columns:1fr; text-align:center; } }

/* ---------------------------------------------------------------------
   23. LEGAL MODAL
   --------------------------------------------------------------------- */
.legal-panel{ max-width:640px; max-height:80vh; overflow-y:auto; }
.legal-body{ font-size:14px; color: var(--c-graphite); line-height:1.75; }
.legal-body h4{ font-family:var(--font-sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-champagne-dark); margin: 20px 0 8px; }
.legal-body p{ margin: 0 0 12px; }

/* ---------------------------------------------------------------------
   24. LIGHTBOX CONTENT
   --------------------------------------------------------------------- */
.lightbox-plan{ background:#151510; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-md); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; color: rgba(255,255,255,.5); overflow:hidden; }
.lightbox-plan svg{ width:80px; height:80px; }
.lightbox-plan-img{ padding:0; }
.lightbox-plan-img img{ width:100%; height:100%; object-fit:contain; }
.lightbox-caption{ margin-top:18px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------------
   25. RESPONSIVE — AJUSTES GENERALES
   --------------------------------------------------------------------- */
@media (max-width: 760px){
  .space-detail{ max-width:100%; }
  .sd-gallery{ grid-template-columns: repeat(2,1fr); }
  .oferta-footer{ flex-direction:row; }
  .final-cta{ padding: 72px 0; }
  .process, .amenities, .location, .renders, .floorplans, .spaces, .explore, .positioning{ padding: 64px 0; }
}