/* =====================================================================
   DUO LIVING SLP · DISEÑO
   ---------------------------------------------------------------------
   Orden del archivo:
   1. Tokens        2. Base y utilidades   3. Encabezado y menú
   4. Hero          5. Secciones I–VII     6. Visor de imágenes
   7. Footer        8. Responsivo
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* paleta de marca */
  --arena:#E6D5BF;
  --marfil:#F6F0E7;
  --blanco:#FCFAF6;
  --tinta:#161310;
  --rojo:#B23127;        /* rojo de marca: líneas, barras y detalles gráficos */
  --rojo-txt:#96271E;    /* rojo para TEXTO sobre fondos claros (5.6:1 en arena, 7.1:1 en marfil) */
  --rojo-txt-osc:#E4705F;/* rojo para TEXTO sobre fondo tinta (contraste 6.0:1) */

  /* texto: todos verificados a 4.5:1 o más sobre su fondo */
  --txt:#161310;          /* texto principal sobre fondos claros */
  --txt-2:#3D3831;        /* párrafos */
  --txt-3:#52493D;        /* secundario sobre marfil/blanco (7.8:1) */
  --txt-arena:#4A4237;    /* secundario sobre fondo arena (6.9:1) */
  --txt-osc:#B8AF9E;      /* secundario sobre fondo tinta */
  --txt-osc-2:#A39A88;    /* terciario sobre fondo tinta (6.6:1) */
  --linea:#D9D2C6;        /* separadores sobre fondos claros */
  --linea-osc:#35302A;    /* separadores sobre fondo tinta */
  --linea-arena:#C8BAA2;
  --gris-sup:#EEE9E1;     /* superficie neutra (Disponibilidad): entre marfil y arena */

  /* tipografía */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ritmo vertical y sombras */
  --sec-y:clamp(84px,11vw,150px);
  --sombra:0 30px 70px -32px rgba(22,19,16,.45);
  --sombra-sm:0 12px 30px -18px rgba(22,19,16,.5);

  /* movimiento: un solo lenguaje para toda la página (29 sep 2026).
     --ui: respuesta a cursor/toque (150-300 ms); --curva: entradas al
     viewport (400-700 ms); desplazamientos de 4-12 px; escalas .98-1.03. */
  --rapido:.2s;
  --medio:.32s;
  --ui:.24s;
  --curva:cubic-bezier(.22,1,.36,1);
  --curva-ui:cubic-bezier(.22,1,.36,1);
  --sombra-ui:0 10px 22px -14px rgba(22,19,16,.5);
}

/* ============ 2. BASE Y UTILIDADES ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--sans);font-weight:300;color:var(--txt);background:var(--marfil);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto es obligatorio: las imágenes llevan atributos width/height en el
   HTML (para que la página no dé un salto al cargar) y sin esto el navegador
   usa el alto del atributo y deforma la proporción. */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* foco visible y consistente en todo el sitio */
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.hero :focus-visible,
#amenidades :focus-visible,
.band :focus-visible,
footer :focus-visible,
.menu-overlay :focus-visible{outline-color:#fff}

.skip-link{position:absolute;left:14px;top:-70px;z-index:200;display:flex;align-items:center;min-height:44px;background:var(--tinta);color:var(--arena);padding:12px 22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;transition:top var(--rapido) ease}
.skip-link:focus{top:14px}

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

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,56px)}
/* en pantallas muy angostas (≤ 360 px) el margen baja a 20 px; en celulares
   normales (375-430) queda en 24 px para que ningún texto toque el borde */
@media (max-width:360px){.wrap{padding-inline:20px}}
section{padding:var(--sec-y) 0;position:relative}

.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--txt-3)}
.eyebrow .num{color:var(--rojo-txt);margin-right:.9em}
h2.title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(42px,6vw,72px);line-height:1.05;margin:.18em 0 0;letter-spacing:-.005em}
.statement{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.25}
.caption{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3);margin-top:14px}
.duoline{position:relative;height:8px;margin-top:18px}
.duoline i{position:absolute;display:block;height:2px}
.duoline i:first-child{left:0;right:0;top:0;background:var(--tinta)}
.duoline i:last-child{right:0;top:6px;width:34%;background:var(--rojo)}
.duoline-s{max-width:220px}
/* Clases que sustituyen a los antiguos style="" del HTML (1 oct 2026): sin
   estilos inline la CSP puede prohibirlos más adelante. */
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.ubi-txt{max-width:720px}
.center-obra{margin-top:clamp(30px,4vw,44px)}

/* botones */
/* Sistema de botones: fondo/borde/texto en transición, 1 px de elevación y
   sombra discreta con cursor (solo punteros finos: en táctil no hay hover) y
   scale(.98) al tocar. Todos los CTA del sitio comparten esta respuesta. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--tinta);color:var(--arena);padding:17px 36px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;border:1px solid var(--tinta);transition:background var(--ui) ease,color var(--ui) ease,border-color var(--ui) ease,transform var(--ui) var(--curva-ui),box-shadow var(--ui) ease}
.btn:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:var(--sombra-ui)}
}
.btn:active{transform:scale(.98);box-shadow:none;transition-duration:.12s}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-ghost{background:none;color:var(--tinta)}
.btn-ghost:hover{background:var(--tinta);border-color:var(--tinta);color:var(--arena)}
.btn-light{background:var(--marfil);border-color:var(--marfil);color:var(--tinta)}
.btn-light:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn-outline-light{background:rgba(22,19,16,.28);border-color:rgba(255,255,255,.7);color:#fff;backdrop-filter:blur(4px)}
.btn-outline-light:hover{background:var(--marfil);border-color:var(--marfil);color:var(--tinta)}
.center{text-align:center;margin-top:46px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- revelado al entrar en pantalla (solo si JS está activo: html.js) ----------
   sitio.js pone .in una sola vez y el elemento se queda en su estado final.
   Variantes, para que no todo sea el mismo fade + translateY:
     .rv            fade + 12 px desde abajo
     .rv.de-izq     fade + 12 px desde la izquierda   .rv.de-der  desde la derecha
     .rv.sc         fade + scale(.98)
     .rv-img        fade + 14 px + scale(.985) (figuras)
     .st            los hijos directos entran escalonados (70 ms) con fade + 8 px
     .st-sc         igual, con scale(.98) en lugar del desplazamiento
   Los .st van con :where() para que su estado final no pese más que un :hover. */
html.js .rv{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .6s var(--curva)}
html.js .rv.de-izq{transform:translateX(-12px)}
html.js .rv.de-der{transform:translateX(12px)}
html.js .rv.sc{transform:scale(.98)}
html.js .rv-img{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .65s ease,transform .7s var(--curva)}
html.js .rv.in,html.js .rv-img.in{opacity:1;transform:none}
/* el "eyebrow" (numeral romano + antetítulo) entra un instante antes que el
   título, deslizándose 8 px; el título lo siguen sus letras (.al, 100 ms después) */
html.js .rv>.eyebrow,html.js .rv>div>.eyebrow{opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .5s var(--curva)}
html.js .rv.de-der>.eyebrow{transform:translateX(8px)}
html.js .rv.in>.eyebrow,html.js .rv.in>div>.eyebrow{opacity:1;transform:none}
/* escalonado de hijos */
html.js .rv.st,html.js .rv.st-sc{transform:none}
html.js :where(.st)>*{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .55s var(--curva)}
html.js :where(.st-sc)>*{opacity:0;transform:scale(.98);transition:opacity .5s ease,transform .55s var(--curva)}
html.js :where(.st.in,.st-sc.in)>*{opacity:1;transform:none}
html.js :where(.st,.st-sc)>*:nth-child(2){transition-delay:.07s}
html.js :where(.st,.st-sc)>*:nth-child(3){transition-delay:.14s}
html.js :where(.st,.st-sc)>*:nth-child(4){transition-delay:.21s}
html.js :where(.st,.st-sc)>*:nth-child(5){transition-delay:.28s}
html.js :where(.st,.st-sc)>*:nth-child(6){transition-delay:.35s}
html.js :where(.st,.st-sc)>*:nth-child(7){transition-delay:.42s}
html.js :where(.st,.st-sc)>*:nth-child(8){transition-delay:.49s}
html.js :where(.st,.st-sc)>*:nth-child(9){transition-delay:.56s}
html.js :where(.st,.st-sc)>*:nth-child(n+10){transition-delay:.63s}

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-img,html.js .rv>.eyebrow,html.js .rv>div>.eyebrow,
  html.js :where(.st,.st-sc)>*{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ 3. ENCABEZADO Y MENÚ ============ */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background var(--medio) ease,box-shadow var(--medio) ease}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(20px,4vw,44px)}
header.solid{background:rgba(246,240,231,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(22,19,16,.1)}
/* sobre el hero (antes de hacer scroll) la marca va en claro */
header:not(.solid) .mark,header:not(.solid) nav.mainnav a{color:var(--marfil)}
header:not(.solid) .mark b::after,header:not(.solid) .burger span{background:var(--marfil)}
header:not(.solid) .mark small{color:rgba(246,240,231,.8)}
header:not(.solid) .cta-head{border-color:rgba(246,240,231,.75);color:var(--marfil)}
header:not(.solid) .cta-head:hover{background:var(--marfil);color:var(--tinta)}
header:not(.solid){text-shadow:0 1px 12px rgba(22,19,16,.35)}

.mark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3em;font-size:15px;min-height:44px;padding-right:6px}
.mark small{font-weight:500;letter-spacing:.3em;font-size:9px;color:var(--txt-3)}
.mark b{position:relative}
.mark b::after{content:"";position:absolute;left:0;right:-.3em;bottom:-6px;height:1.5px;background:var(--tinta)}
.mark b::before{content:"";position:absolute;right:-.3em;bottom:-9px;width:46%;height:1.5px;background:var(--rojo)}

nav.mainnav{display:flex;gap:clamp(16px,2.4vw,30px)}
/* Enlaces del menú: con el cursor el texto sube 2 px (transform: no mueve a
   los vecinos ni cambia la altura del header), vira al vino de texto y una
   línea fina crece de izquierda a derecha. Sección activa (.cur): color vino
   y línea completa más tenue, sin elevación, para distinguirla del hover. */
nav.mainnav a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--tinta);position:relative;padding:6px 0;white-space:nowrap;transition:transform .24s var(--curva-ui),color .24s ease,opacity .15s ease}
nav.mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rojo);transform:scaleX(0);transform-origin:left center;transition:transform .26s var(--curva-ui),opacity .26s ease}
nav.mainnav a:hover,nav.mainnav a:focus-visible{transform:translateY(-2px);color:var(--rojo-txt)}
nav.mainnav a:hover::after,nav.mainnav a:focus-visible::after{transform:scaleX(1);opacity:1}
nav.mainnav a.cur{color:var(--rojo-txt)}
nav.mainnav a.cur::after{transform:scaleX(1);opacity:.45}
nav.mainnav a:active{transform:translateY(-1px);opacity:.75}
header:not(.solid) nav.mainnav a:hover,header:not(.solid) nav.mainnav a:focus-visible,header:not(.solid) nav.mainnav a.cur{color:#fff}

.cta-head{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;border:1px solid var(--tinta);padding:11px 20px;transition:background var(--ui),color var(--ui),border-color var(--ui),transform var(--ui) var(--curva-ui),box-shadow var(--ui)}
.cta-head:hover{background:var(--tinta);color:var(--arena)}
@media (hover:hover) and (pointer:fine){.cta-head:hover{transform:translateY(-1px);box-shadow:var(--sombra-ui)}}
.cta-head:active{transform:scale(.98);box-shadow:none}

/* barra fina de progreso de lectura */
.scrollbar-progress{height:2px;width:0;background:var(--rojo);transition:width .1s linear;opacity:0}
header.solid .scrollbar-progress{opacity:1}

.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:0}
.burger span{display:block;width:24px;height:2px;background:var(--tinta);transition:transform .3s var(--curva-ui),opacity .3s ease}
/* abierto: las dos líneas se cruzan en una X (gap 7 px + 2 px de alto = 4.5 px al centro) */
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* El panel ocupa toda la pantalla y hace scroll por dentro (overflow-y:auto,
   overscroll-behavior:contain para no arrastrar la página de fondo). Los
   enlaces se centran con márgenes automáticos: si sobra alto quedan al
   centro; si falta, los márgenes valen 0 y la lista empieza arriba, así que
   ninguna opción queda inalcanzable. Aire inferior para la barra del
   navegador del teléfono (safe-area-inset-bottom). */
.menu-overlay{position:fixed;inset:0;background:var(--arena);z-index:100;display:flex;flex-direction:column;padding:calc(72px + env(safe-area-inset-top,0px)) clamp(28px,8vw,60px) calc(48px + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity var(--medio) ease;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.menu-overlay[hidden]{display:none}
.menu-overlay.open{opacity:1}
.menu-overlay a{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(26px,6vw,38px);padding:13px 0;border-bottom:1px solid rgba(22,19,16,.14);display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--tinta);flex:none}
.menu-overlay a:first-of-type{margin-top:auto}
.menu-overlay .menu-wa{margin-bottom:auto}
/* los enlaces entran escalonados (50 ms) al abrir y se van juntos al cerrar */
.menu-overlay a,.menu-close{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s var(--curva)}
.menu-overlay.open a,.menu-overlay.open .menu-close{opacity:1;transform:none}
.menu-overlay.open a:nth-of-type(2){transition-delay:.05s}
.menu-overlay.open a:nth-of-type(3){transition-delay:.1s}
.menu-overlay.open a:nth-of-type(4){transition-delay:.15s}
.menu-overlay.open a:nth-of-type(5){transition-delay:.2s}
.menu-overlay.open a:nth-of-type(6){transition-delay:.25s}
.menu-overlay.open a:nth-of-type(7){transition-delay:.3s}
.menu-overlay.open a:nth-of-type(8){transition-delay:.35s}
.menu-overlay.open a:nth-of-type(n+9){transition-delay:.4s}
/* táctil: respuesta breve al tocar; el primer toque abre el enlace */
.menu-overlay.open a:active{opacity:.6;transform:translateX(1px);transition-duration:.1s}
.menu-overlay a small{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--rojo-txt);font-weight:600;white-space:nowrap}
.menu-overlay .menu-wa{margin-top:22px;border-bottom:0;color:var(--rojo-txt)}
.menu-overlay .menu-wa small{color:var(--txt-arena)}
/* fijo respecto a la pantalla: sigue a la vista aunque el menú haga scroll */
.menu-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:1;background:none;border:0;cursor:pointer;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--tinta);padding:14px}
.menu-overlay :focus-visible{outline-color:var(--rojo)}

/* ============ 4. HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;background:var(--tinta);color:var(--marfil);padding:clamp(108px,14vh,148px) clamp(20px,5vw,64px) clamp(72px,10vh,112px)}
.hero-bg{position:absolute;inset:0;z-index:0}
/* La fotografía sigue siendo protagonista: solo se atenúa un poco (brillo
   .88, contraste 1.06). Sin desenfoque. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:brightness(.88) contrast(1.06)}
/* Velo en dos capas: un degradado vertical suave y un óvalo apenas más
   oscuro detrás del bloque de texto, para que el texto destaque sin apagar
   el edificio en los bordes. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(ellipse 62% 58% at 50% 46%,rgba(12,10,8,.34) 0%,rgba(12,10,8,0) 72%),
  linear-gradient(180deg,rgba(12,10,8,.74) 0%,rgba(12,10,8,.46) 24%,rgba(12,10,8,.44) 56%,rgba(12,10,8,.68) 86%,rgba(12,10,8,.82) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;will-change:transform,opacity}

.hero-kicker{font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;color:var(--arena);margin-bottom:clamp(30px,4.5vh,52px)}
.logo-lg{display:inline-block}
.logo-word{font-weight:700;font-size:clamp(72px,15vw,170px);line-height:.9;letter-spacing:.14em;margin-right:-.14em;color:var(--marfil)}
.logo-sub{display:flex;justify-content:space-between;font-weight:500;letter-spacing:.4em;font-size:clamp(12px,2.1vw,20px);margin:.5em .1em 0;color:var(--marfil)}
.logo-sub span:last-child{margin-right:-.4em}
.logo-lines{position:relative;height:11px;margin-top:14px}
.logo-lines i{position:absolute;display:block}
.logo-lines i:first-child{left:0;right:0;top:0;height:3px;background:var(--marfil)}
.logo-lines i:last-child{right:0;top:8px;width:33%;height:3px;background:var(--rojo)}

.hero-h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,4.4vw,60px);line-height:1.12;margin-top:clamp(44px,7vh,76px);margin-inline:auto;color:#fff}
.hero-addr{font-size:clamp(13px,1.1vw,15px);letter-spacing:.08em;line-height:1.7;color:rgba(246,240,231,.9);margin-top:clamp(24px,3.5vh,40px)}
.hero-ciudad{display:block;margin-top:6px;font-size:.86em;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--arena)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(40px,6vh,64px)}
.hero-cta .btn{padding:19px 46px;font-size:11.5px}

/* Entrada al cargar, en orden y con 80-100 ms entre elementos (sin ocultar
   nada si no hay JS): kicker → logo (scale .97→1, sin rebote) → H1 (12 px,
   8 en celular) → domicilio → CTA. */
html.js .hero-kicker{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .7s var(--curva)}
html.js .logo-lg{opacity:0;transform:scale(.97);transition:opacity .7s ease,transform .8s var(--curva)}
html.js .hero-h1{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s var(--curva)}
html.js .hero-addr,html.js .hero-cta{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .7s var(--curva)}
html.js.cargada .hero-kicker{opacity:1;transform:none}
html.js.cargada .logo-lg{opacity:1;transform:none;transition-delay:.08s}
html.js.cargada .hero-h1{opacity:1;transform:none;transition-delay:.18s}
html.js.cargada .hero-addr{opacity:1;transform:none;transition-delay:.28s}
html.js.cargada .hero-cta{opacity:1;transform:none;transition-delay:.38s}
/* Fondo: acercamiento cinematográfico casi imperceptible (1 → 1.018 en 12 s),
   solo en escritorio; en celular no se aplica. Es la única excepción a la
   regla de no escalar fotografías, pedida por el cliente el 29 sep 2026. */
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.018)}}
@media (min-width:761px){
  html.js.cargada .hero-bg img{animation:hero-zoom 12s cubic-bezier(.2,.6,.3,1) forwards}
}
@media (prefers-reduced-motion:reduce){
  html.js .hero-kicker,html.js .logo-lg,html.js .hero-h1,html.js .hero-addr,html.js .hero-cta{opacity:1;transform:none;transition:none}
  html.js.cargada .hero-bg img{animation:none}
}

/* ---- Datos clave: franja oscura justo debajo del hero (ya con scroll) ---- */
.datos{background:var(--tinta);color:var(--marfil);padding:0;border-bottom:1px solid var(--linea-osc)}
.datos-wrap{display:flex;flex-direction:column;align-items:center}
.hero-facts{list-style:none;width:100%;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--linea-osc)}
.hero-facts li{padding:clamp(24px,3vw,36px) 12px;text-align:center;border-left:1px solid var(--linea-osc);display:flex;flex-direction:column;gap:4px}
.hero-facts li:first-child{border-left:0}
.hero-facts b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(22px,2.6vw,32px);line-height:1.1;color:#fff}
.hero-facts span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--arena)}
.datos-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;margin:22px auto;padding:12px 8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--arena);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--ui),border-color var(--ui)}
.datos-cta:hover,.datos-cta:focus-visible{color:#fff;border-bottom-color:var(--rojo)}
/* enlaces con flecha: solo la flecha se desplaza (5 px con cursor, 3 al tocar) */
.datos-cta span{display:inline-block;transition:transform var(--ui) var(--curva-ui)}
.datos-cta:hover span,.datos-cta:focus-visible span{transform:translateX(5px)}
.datos-cta:active span{transform:translateX(3px);transition-duration:.12s}
.datos :focus-visible{outline-color:var(--marfil)}

/* ---- Aclaraciones al pie de una lista de características ---- */
.nota-aclara{margin-top:12px;font-size:12px;line-height:1.6;letter-spacing:.01em;color:var(--txt-3)}

/* ============ 5. SECCIONES ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.split .txt p{margin-top:20px;max-width:56ch;color:var(--txt-2)}
.figure{position:relative}
.figure img{width:100%}
.feature-fig img{display:block;width:auto;max-width:100%;max-height:86vh;margin:0 auto;will-change:transform;box-shadow:var(--sombra)}
.feature-fig .caption{margin-top:16px;text-align:center}
#proyecto .split{grid-template-columns:0.9fr 1.1fr}
#exclusividad .split{grid-template-columns:1.1fr 0.9fr}

/* --- I proyecto --- */
#proyecto{background:var(--marfil)}
#proyecto .statement{margin-top:34px}

/* --- II exclusividad: primer bloque oscuro del recorrido; la banda "El
   conjunto" que sigue es del mismo tono, por eso va más baja --- */
#exclusividad{background:var(--tinta);color:var(--marfil)}
#exclusividad .split .txt p{color:#E8DDC9}
#exclusividad .eyebrow{color:var(--txt-osc)}
#exclusividad .eyebrow .num{color:var(--rojo-txt-osc)}
#exclusividad .caption{color:var(--txt-osc)}
#exclusividad .statement{margin-top:26px;font-size:clamp(24px,3vw,36px);max-width:16ch;color:var(--marfil)}
#exclusividad .duoline i:first-child{background:var(--marfil)}
#exclusividad :focus-visible{outline-color:var(--marfil)}

/* --- banda "El conjunto" --- */
.band{position:relative;overflow:hidden;background:var(--tinta);padding:clamp(64px,9vw,110px) 0;border-top:1px solid var(--linea-osc)}
/* se reafirma position:absolute porque .parx lo pondría en relative */
.band .band-bg{position:absolute;inset:0;--parx:110px}
.band-bg img{width:100%;height:100%;object-fit:cover;filter:blur(5px) brightness(.5) saturate(1.05);transform:scale(1.07)}
.band-content{position:relative;z-index:1}
.band-content .eyebrow{color:var(--arena);text-align:center}
.band .edstats{margin-top:38px}
.band .edstats .n{color:#F4ECDD}
.band .edstats .l{color:var(--arena)}
.band-note{text-align:center;margin-top:clamp(30px,4vw,44px);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--arena)}
.band-label{position:absolute;z-index:1;left:clamp(20px,5vw,56px);bottom:22px;color:#E8DDC9;font-size:11px;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.7)}

.edstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px);margin-top:clamp(40px,5vw,60px)}
.stat{display:flex;align-items:center;gap:clamp(16px,2vw,24px);justify-content:center}
.stat svg{width:clamp(44px,4.6vw,58px);height:auto;flex:none;color:#D8CBB2;transition:transform .25s var(--curva-ui)}
/* iconos: 2 px de elevación con el cursor, respuesta breve al tocar; sin giros ni rebotes */
@media (hover:hover) and (pointer:fine){.stat:hover svg{transform:translateY(-2px)}}
.stat:active svg{transform:scale(1.03)}
.stat-tx{display:flex;flex-direction:column}
.edstats .n{font-family:var(--serif);font-style:italic;font-size:clamp(42px,4.6vw,60px);line-height:1}
.edstats .l{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-top:6px}

/* --- III departamento --- */
#departamento{background:var(--blanco)}
.specs{margin-top:44px;border-top:1px solid var(--linea);list-style:none}
.specs li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--linea);font-size:14px;letter-spacing:.05em}
.specs li b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;flex:none}
/* min-width:0 + overflow-wrap: el valor puede encogerse y partirse en varias
   líneas dentro de la fila; nunca sobresale del borde */
.specs li span{color:var(--txt-3);text-align:right;min-width:0;overflow-wrap:break-word}
.bignum{font-family:var(--serif);font-style:italic;font-size:clamp(64px,8vw,110px);line-height:1;font-weight:500}
/* 26 px en todos los anchos: era un style="" en el HTML que ganaba también en móvil */
#departamento .bignum{margin-top:26px}
.bignum small{font-size:.36em;letter-spacing:.1em}

/* botón que envuelve cada imagen ampliable (lo agrega sitio.js) */
.zoom-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;transition:transform .35s var(--curva-ui),box-shadow .35s ease}
.zoom-btn:focus-visible{outline:2px solid var(--rojo);outline-offset:-3px}
/* planos (departamento, conjunto, rooftop): con el cursor se elevan 2 px con
   scale(1.012) y una sombra discreta; al tocar, una respuesta mínima. Las
   fachadas (.feature-fig) no llevan esto: ya flotan con el parallax. */
@media (hover:hover) and (pointer:fine){
  .figure:not(.feature-fig) .zoom-btn:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 22px 40px -28px rgba(22,19,16,.45)}
}
.zoom-btn:active{transform:scale(.995);transition-duration:.12s}

/* ---------- parallax: la imagen se desliza dentro de su marco ----------
   .parx es el marco recortado; .parx-in es más alto que el marco y se desplaza
   dentro de ese sobrante. Nunca se usa scale(): la imagen no se amplía. */
.parx{position:relative;overflow:hidden}
.parx-in{position:absolute;left:0;width:100%;top:calc(var(--parx,55px) * -1);height:calc(100% + var(--parx,55px) * 2);will-change:transform}
.parx-in .zoom-btn{position:absolute;inset:0;height:100%}
.parx-in img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
  /* sin movimiento: el marco recupera su comportamiento normal */
  .parx-in{position:static;height:100%;transform:none!important}
  .parx-in .zoom-btn{position:static;height:auto}
}
/* 860 px y no más: la planta del conjunto mide 1300 px y por encima de este
   ancho se vería ampliada en pantallas de alta densidad */
.edificio{max-width:860px;margin:clamp(70px,9vw,120px) auto 0;padding-top:clamp(60px,8vw,90px);border-top:1px solid #E3DDD2;text-align:center}
.edificio .eyebrow{display:block;margin-bottom:26px}
.edificio .caption{text-align:center}

.btn-wa-solid{background:#0F7A40;border-color:#0F7A40;color:#fff}
.btn-wa-solid:hover{background:#0C602F;border-color:#0C602F;color:#fff}
.btn-wa-solid svg{width:17px;height:17px;flex:none}

/* --- IV disponibilidad: modelo 3D + panel de unidades --- */
#disponibilidad{background:var(--gris-sup)}
.disp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.disp-count{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.disp-count b{font-family:var(--serif);font-style:italic;font-size:34px;font-weight:600;letter-spacing:0;margin-right:4px}
.disp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(32px,4vw,48px)}
/* En escritorio el modelo acompaña al panel mientras se hace scroll */
.scene-wrap{position:sticky;top:96px}
/* touch-action:pan-y es clave en celular: el dedo vertical sigue haciendo
   scroll de la página; solo el arrastre horizontal gira el modelo. */
.scene{position:relative;background:linear-gradient(180deg,#EEF0F2 0%,#E6E0D5 55%,#DDD4C4 100%);border:1px solid var(--linea);overflow:hidden;height:clamp(360px,58vh,720px);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.scene.drag{cursor:grabbing}
/* Modo de giro libre (táctil): la escena se queda con todos los gestos, en
   cualquier dirección. Se entra solo, al empezar a girar; se sale solo, al
   desplazar la página fuera de la sección. Sin botones encima del modelo. */
.scene.libre{touch-action:none}
.scene canvas{display:block;width:100%;height:100%}
.scene-msg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:30px;font-size:13px;line-height:1.7;color:var(--txt-3);background:rgba(246,240,231,.55);pointer-events:none}
.scene-msg.on{display:flex}
/* etiquetas proyectadas sobre el modelo (torre, nivel, zonas) */
.lbl{position:absolute;pointer-events:none;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--txt);white-space:nowrap;transition:opacity var(--medio)}
.lbl.torre{font-size:11px;background:var(--tinta);color:var(--arena);padding:6px 10px 6px 13px}
.lbl.nivel{color:var(--txt-3);font-size:9px;letter-spacing:.22em}
.lbl.nivel.on{color:var(--rojo-txt)}
.lbl.zona{font-size:9px;color:var(--txt-3);letter-spacing:.2em}
.scene-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:10px}
.scene-hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);line-height:1.6}
.scene-tools{display:flex;gap:6px;flex-wrap:wrap}
.scene-tools button{background:var(--blanco);border:1px solid var(--linea);font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:0 12px;min-height:40px;min-width:40px;cursor:pointer;color:var(--txt);transition:background var(--ui),color var(--ui),border-color var(--ui),transform var(--ui) var(--curva-ui)}
.scene-tools button:hover{background:var(--tinta);color:var(--arena);border-color:var(--tinta)}
.scene-tools button:active{transform:scale(.97);transition-duration:.12s}
.scene-tools button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

.panel{background:var(--blanco);border:1px solid var(--linea);padding:clamp(20px,2.4vw,28px)}
.legend{display:flex;gap:14px 18px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--txt-3)}
.legend i{width:14px;height:14px;display:inline-block;border:1px solid rgba(22,19,16,.5);flex:none}
.legend .lg-disponible{background:#F4EFE6}
.legend .lg-apartado{background:#C9C1B5}
.legend .lg-vendido{background:#7A736B}
.f-label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--txt-3);margin:20px 0 10px}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros button{background:none;border:1px solid var(--linea-arena);font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:0 14px;min-height:40px;min-width:40px;cursor:pointer;color:var(--txt-2);transition:background var(--ui),color var(--ui),border-color var(--ui),transform var(--ui) var(--curva-ui)}
.filtros button:hover,.filtros button.on{background:var(--tinta);color:var(--arena);border-color:var(--tinta)}
.filtros button:active{transform:scale(.97);transition-duration:.12s}
.filtros button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
/* lista de unidades: respaldo sin WebGL y acceso con teclado. Los fondos
   siguen la leyenda: disponible claro, apartado arena, vendido gris. */
/* 4 columnas = las 4 unidades de cada nivel; las filas van del nivel 5 al 1 */
.u-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.u-lista button{border:1px solid var(--linea);background:#F4EFE6;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;min-height:40px;cursor:pointer;color:var(--txt);transition:border-color var(--ui),opacity var(--ui),box-shadow var(--ui),transform var(--ui) var(--curva-ui)}
.u-lista button.apartado{background:#C9C1B5;border-style:dashed;border-color:#7A6E5C}
.u-lista button.vendido{background:#7A736B;color:#fff;border-color:#7A736B;text-decoration:line-through;text-decoration-thickness:1.5px}
/* tarjetas de unidad: 2 px de elevación y sombra ligera con el cursor; al
   tocar, scale(.97). La seleccionada (.on) conserva su doble contorno. */
.u-lista button:hover{border-color:var(--tinta)}
@media (hover:hover) and (pointer:fine){
  .u-lista button:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(22,19,16,.45)}
}
.u-lista button:active{transform:scale(.97);transition-duration:.12s}
.u-lista button.on{box-shadow:inset 0 0 0 2px var(--rojo),0 0 0 2px var(--blanco),0 0 0 4px var(--rojo);border-color:var(--rojo)}
.u-lista button.off{opacity:.22;pointer-events:none}
.u-lista button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.crumbs{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);min-height:16px;line-height:1.7}
.crumbs b{color:var(--txt);font-weight:600}
.ficha{margin-top:16px}
/* la ficha entra con un fade corto cada vez que se elige otra unidad (disponibilidad.js repone .in) */
html.js .ficha{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s var(--curva)}
html.js .ficha.in{opacity:1;transform:none}
.u-id{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;font-weight:600;position:relative;display:inline-block}
.u-id::after{content:"";position:absolute;right:0;bottom:-8px;width:38%;height:2px;background:var(--rojo)}
.badge{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;padding:7px 12px;border:1px solid}
.badge.disponible{color:#2F5A2A;border-color:#2F5A2A;background:#EEF3EA}
.badge.apartado{color:#7A4B1E;border-color:#7A4B1E;background:#F5ECE2}
.badge.vendido{color:var(--txt-arena);border-color:#C9C2B6;background:#EEE9E0}
.u-specs{margin-top:16px}
.u-specs li{padding:10px 0;font-size:12.5px;gap:14px}
.u-specs li b{font-size:10.5px}
/* fotografías de la unidad: la primera grande a todo el ancho del panel y el
   resto en una fila de tres. En 16:9, que es la proporción de los renders,
   para no recortarles los lados. Todas abren el visor. */
.u-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.u-foto{display:block;padding:0;border:0;background:#E9E3D8;cursor:zoom-in;aspect-ratio:16/9;overflow:hidden;width:100%}
.u-foto:first-child{grid-column:1/-1}
/* última miniatura cuando hay más fotos: velo oscuro con "+N" encima */
.u-foto-mas{position:relative}
.u-foto-mas::after{content:"";position:absolute;inset:0;background:rgba(22,19,16,.55)}
.u-foto-mas span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;font-family:var(--serif);font-style:italic;font-size:22px;font-weight:600;color:var(--marfil)}
.u-aviso{margin-top:8px;font-size:11px;letter-spacing:.04em;color:var(--txt-3);line-height:1.5}
.u-foto img{width:100%;height:100%;object-fit:cover;transition:filter var(--medio) ease,transform .4s var(--curva-ui)}
.u-foto:hover img{filter:brightness(1.07)}
@media (hover:hover) and (pointer:fine){.u-foto:hover img{transform:scale(1.03)}}
.u-foto:active img{transform:scale(.98);transition-duration:.12s}
.u-foto:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
/* menos tracking que el botón general: en el panel angosto (y en celular)
   "Cotizar por WhatsApp" debe caber en una sola línea */
.ficha .btn{width:100%;margin-top:10px;letter-spacing:.16em;padding-inline:16px}
.ficha .u-cta{margin-top:20px}
.vacio{font-size:13px;color:var(--txt-3);line-height:1.7;margin-top:10px}
.panel-note{margin-top:20px;font-size:12px;color:var(--txt-3);line-height:1.6}

/* --- V amenidades: en marfil, para descansar entre los bloques oscuros
   (Exclusividad y Preventa) y no competir con los tonos del plano --- */
#amenidades{background:var(--marfil);color:var(--txt)}
#amenidades .eyebrow{color:var(--txt-3)}
#amenidades .eyebrow .num{color:var(--rojo-txt)}
#amenidades .caption{color:var(--txt-3)}
.amen-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.amen-h{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--txt-3);margin-top:40px}
.amen-list{margin-top:14px;border-top:1px solid var(--linea-arena);list-style:none}
.amen-list li{padding:14px 0;border-bottom:1px solid var(--linea-arena);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--txt)}
/* los puntos de la lista son solo indicadores: sin movimiento ni respuesta al
   cursor (el cliente lo pidió así el 30 sep 2026) */
.amen-list li::after{content:"";width:6px;height:6px;background:var(--rojo);flex:none}
.amen-list-alt li::after{background:var(--txt-3)}

/* --- V ubicación --- */
#ubicacion{background:var(--blanco)}
#ubicacion p{color:var(--txt-2)}
.chips-help{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chips button{border:1px solid var(--linea-arena);background:transparent;padding:11px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--txt-2);cursor:pointer;min-height:44px;transition:background var(--ui),color var(--ui),border-color var(--ui),transform var(--ui) var(--curva-ui)}
.chips button:hover,.chips button.on{background:var(--tinta);color:var(--arena);border-color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.chips button:hover{transform:translateY(-1px)}}
.chips button:active{transform:scale(.97);transition-duration:.12s}
/* isolation:isolate: el mapa y su rótulo (z-index 400, por encima de Leaflet)
   quedan en su propio contexto de apilamiento y nunca pasan por encima del
   header fijo (z-index 50) al hacer scroll. */
.mapbox{margin-top:clamp(48px,6vw,70px);position:relative;box-shadow:var(--sombra-sm);isolation:isolate}
#map{width:100%;height:520px;background:#E9E4DA;z-index:0}
.mapbox .leaflet-tile-pane{filter:grayscale(1) contrast(1.06) brightness(1.03)}
.leaflet-container{font-family:var(--sans)}
.pin-duo,.pin-poi{background:none;border:0}
.pin-duo i{display:block;width:20px;height:20px;border-radius:50%;background:var(--rojo);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.pin-poi i{display:block;width:11px;height:11px;border-radius:50%;background:var(--tinta);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform var(--rapido)}
.pin-poi.on i{background:var(--rojo);transform:scale(1.45)}
.leaflet-popup-content-wrapper{border-radius:0;box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.leaflet-popup-content{margin:12px 16px;font-size:12px;line-height:1.5}
.leaflet-popup-content b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.leaflet-popup-content span{color:var(--txt-3);letter-spacing:.05em}
.mapbox .pinlabel{position:absolute;left:0;bottom:0;z-index:400;background:var(--tinta);color:var(--arena);padding:15px 22px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}

/* --- VI preventa --- */
/* --- VIII preventa: segundo gran momento visual después del hero. Carbón,
   precio en blanco, condiciones en texto claro y un solo botón principal en
   rojo de marca (el "terracota" de la revisión visual). --- */
#preventa{background:var(--tinta);color:var(--marfil)}
.pricehero{text-align:center}
.pricehero .desde{font-size:12px;letter-spacing:.38em;text-transform:uppercase;font-weight:600;color:var(--txt-osc);margin-top:26px}
.pricehero .monto{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(58px,10vw,140px);line-height:1;margin-top:14px;position:relative;display:inline-block;color:#fff}
.pricehero .monto::after{content:"";position:absolute;right:0;bottom:-14px;width:38%;height:3px;background:var(--rojo)}
.pricehero .mxn{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-osc);margin-top:30px}
.avail{max-width:640px;margin:clamp(56px,7vw,80px) auto 0}
.avail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.avail-count{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--marfil)}
.avail-count b{font-family:var(--serif);font-style:italic;font-size:38px;font-weight:600;letter-spacing:0;margin-right:4px;color:var(--rojo-txt-osc)}
.avail-pct{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--txt-osc)}
.avail-bar{height:3px;background:rgba(246,240,231,.22);margin-top:14px;overflow:hidden}
.avail-bar i{display:block;height:100%;width:0;background:var(--rojo);transition:width 1.4s var(--curva)}
.avail-note{margin-top:16px;font-size:14px;font-weight:500;color:var(--marfil);letter-spacing:.02em}
.avail-note b{font-weight:600;color:#fff}
#preventa .btn{background:var(--rojo);border-color:var(--rojo);color:#fff}
#preventa .btn:hover{background:var(--rojo-txt);border-color:var(--rojo-txt)}
#preventa .btn-ghost{background:none;border-color:rgba(246,240,231,.55);color:var(--marfil)}
#preventa .btn-ghost:hover{background:var(--marfil);border-color:var(--marfil);color:var(--tinta)}
#preventa :focus-visible{outline-color:var(--marfil)}

/* --- VII avance real de obra --- */
#avance{background:var(--marfil)}
.obra-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,70px);align-items:end}
.obra-txt{margin-top:22px;max-width:52ch;color:var(--txt-2)}
.obra-big{text-align:right;display:flex;flex-direction:column;gap:10px}
.obra-big b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1;text-transform:uppercase;letter-spacing:.02em;position:relative;display:inline-block;padding-bottom:14px}
.obra-big b::after{content:"";position:absolute;right:0;bottom:0;width:38%;height:3px;background:var(--rojo)}
.obra-big small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-3)}
.obra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(36px,5vw,60px)}
.obra-grid[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.obra-grid[data-n="5"] .obra-fig:first-child{grid-column:span 2;grid-row:span 2}
.obra-fig{margin:0}
.obra-foto{display:block;width:100%;padding:0;border:0;background:#E9E3D8;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden}
.obra-grid[data-n="5"] .obra-fig:first-child .obra-foto{height:100%;aspect-ratio:auto}
.obra-foto{transition:box-shadow .35s ease}
.obra-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--curva-ui)}
@media (hover:hover) and (pointer:fine){.obra-foto:hover img{transform:scale(1.03)}}
.obra-foto:active img{transform:scale(.99);transition-duration:.12s}
.obra-foto:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
/* Precio "desde" de la unidad en la ficha: tamaño de titular, como el de Preventa */
.u-desde{margin:0;padding:16px 0 14px;border-bottom:1px solid var(--linea);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.u-desde small{flex:0 0 100%;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--txt-3);margin-bottom:6px}
.u-desde b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(28px,3.2vw,36px);line-height:1;color:var(--tinta)}
.u-desde span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
@media (max-width:860px){
  .obra-head{grid-template-columns:1fr}
  .obra-big{text-align:left;align-items:flex-start}
  .obra-grid,.obra-grid[data-n="4"]{grid-template-columns:repeat(2,1fr)}
  .obra-grid[data-n="5"] .obra-fig:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:520px){
  .obra-grid,.obra-grid[data-n="4"]{grid-template-columns:1fr}
  .obra-grid[data-n="5"] .obra-fig:first-child{grid-column:auto}
}

/* Hero en laptop (pantallas anchas pero bajas, ~700-820 px de alto): se
   compactan logo, márgenes y franja para que los cuatro datos clave queden
   a la vista sin hacer scroll. */
@media (min-width:761px) and (max-height:820px){
  .hero{padding:96px clamp(20px,5vw,64px) 72px}
  .hero-kicker{margin-bottom:24px}
  .logo-word{font-size:clamp(62px,9.5vw,120px)}
  .logo-sub{font-size:clamp(12px,1.4vw,16px);margin-top:.45em}
  .logo-lines{margin-top:12px;height:10px}
  .hero-h1{margin-top:32px;font-size:clamp(26px,3.2vw,44px)}
  .hero-addr{margin-top:20px}
  .hero-cta{margin-top:32px}
}
@media (min-width:761px) and (max-height:680px){
  .hero{padding:84px clamp(20px,5vw,64px) 64px}
  .logo-word{font-size:clamp(54px,8vw,96px)}
  .hero-h1{margin-top:24px;font-size:clamp(24px,2.8vw,36px)}
  .hero-addr{margin-top:16px}
  .hero-cta{margin-top:26px}
}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:860px;margin:clamp(48px,6vw,70px) auto 0;text-align:center}
.perk{display:flex;flex-direction:column;gap:10px;padding:0 6px}
.perk-n{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.2vw,38px);line-height:1.1;color:#fff}
.perk-l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--txt-osc);line-height:1.6}
.prenote{max-width:660px;margin:26px auto 0;text-align:center;font-size:13px;color:var(--txt-osc);letter-spacing:.02em;line-height:1.75}

/* --- VII contacto --- */
#contacto{background:var(--blanco)}
.form-wrap{max-width:660px;margin:0 auto;text-align:center}
#contacto .form-wrap>div>p{color:var(--txt-2)}
form{margin-top:48px;text-align:left}
.field{margin-bottom:24px}
.field label{display:block;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--txt-3);margin-bottom:9px;transition:color var(--ui) ease}
.field:focus-within label{color:var(--txt)}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--linea-arena);background:transparent;padding:11px 2px;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--txt);border-radius:0;-webkit-appearance:none;appearance:none;min-height:44px;transition:border-color var(--rapido) ease}
.field select{cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23161310'/></svg>");background-repeat:no-repeat;background-position:right 4px center;padding-right:22px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--rojo);border-bottom-width:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--rojo);outline-offset:4px}
.field textarea{resize:vertical;min-height:90px}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:var(--rojo)}
.field-err{display:none;color:#9A2A21;font-size:12px;letter-spacing:.02em;margin-top:7px}
.field.err .field-err{display:block}
.form-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin-top:36px}
.btn-wa{display:none;align-items:center;gap:10px;border:1px solid var(--tinta);padding:16px 30px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;transition:background var(--ui),color var(--ui),transform var(--ui) var(--curva-ui),box-shadow var(--ui)}
.btn-wa:hover{background:var(--tinta);color:var(--arena)}
@media (hover:hover) and (pointer:fine){.btn-wa:hover{transform:translateY(-1px);box-shadow:var(--sombra-ui)}}
.btn-wa:active{transform:scale(.98);box-shadow:none}
.btn-wa svg{width:17px;height:17px;flex:none}
.form-legal{margin-top:20px;text-align:center;font-size:12.5px;color:var(--txt-3);line-height:1.6}
.form-msg{display:none;margin-top:24px;padding:16px 20px;font-size:13px;letter-spacing:.03em;text-align:center}
.form-msg.ok{display:block;background:#EDF3EA;color:#2F4A27;border-left:3px solid #3F6B32}
.form-msg.warn{display:block;background:#F7EAE8;color:#8A2820;border-left:3px solid var(--rojo)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* widget de Turnstile (solo en modo seguro); oculto mientras no se use */
.turnstile{margin-top:28px;min-height:65px}
.turnstile[hidden]{display:none}
/* mapa de respaldo (Google) y botón "DUO" del mapa: antes eran style="" en JS */
.map-iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04)}
.leaflet-bar .ctl-duo{width:auto;padding:0 10px;font:600 10px/26px var(--sans);letter-spacing:.18em;text-transform:uppercase}

/* WhatsApp flotante */
/* Sin pulsación ni rebote: aparece con fade + 14 px desde abajo, crece 4 %
   con el cursor y se encoge 4 % al tocar. */
#wa-float{display:none;position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.28);align-items:center;justify-content:center;transition:transform var(--medio) var(--curva-ui),opacity var(--medio) ease}
@media (hover:hover) and (pointer:fine){#wa-float:hover{transform:scale(1.04)}}
#wa-float:active{transform:scale(.96);transition-duration:.12s}
/* Oculto mientras el visitante está en el hero (ahí ya hay un CTA de WhatsApp);
   sitio.js lo muestra tras un pequeño scroll. */
#wa-float.oculto{opacity:0;transform:translateY(14px);pointer-events:none}
@media (prefers-reduced-motion:reduce){#wa-float{transition:none}}
#wa-float svg{width:28px;height:28px;fill:#fff}

/* ============ 6. VISOR DE IMÁGENES ============ */
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(14,11,9,.94);display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px);opacity:0;transition:opacity var(--medio) ease}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-fig{max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:14px}
/* Dos topes a la vez: la pantalla (100% / 78vh) y el tamaño nativo de la
   imagen (--nat-w / --nat-h, que pone sitio.js). Gana el menor. */
.lb-fig img{width:auto;max-width:min(100%,var(--nat-w,100%));max-height:min(78vh,var(--nat-h,78vh));margin:0 auto;object-fit:contain;transition:opacity .28s ease}
/* al pasar de una foto a otra, la nueva entra con un fundido (sitio.js) */
.lb-fig img.cambiando{opacity:0}
.lb-fig figcaption{text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--arena)}
.lb-aviso{text-align:center;font-size:10px;letter-spacing:.08em;color:var(--txt-osc);margin-top:-6px}
.lb-close,.lb-nav{position:absolute;background:rgba(246,240,231,.1);border:1px solid rgba(246,240,231,.35);color:var(--marfil);cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:background var(--ui) ease,opacity var(--ui) ease}
.lb-close:hover,.lb-nav:hover{background:rgba(246,240,231,.25)}
.lb-close:active,.lb-nav:active{opacity:.7}
.lb-close{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);font-size:17px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:30px;line-height:1;padding-bottom:5px}
.lb-prev{left:clamp(10px,2vw,24px)}
.lb-next{right:clamp(10px,2vw,24px)}

/* ============ 7. FOOTER ============ */
footer{background:var(--tinta);color:var(--txt-osc);padding:clamp(70px,9vw,110px) 0 44px;font-size:12.5px}
.f-logo{color:var(--arena)}
.f-logo .logo-word{font-size:44px;color:var(--arena);letter-spacing:.16em;margin-right:-.16em}
.f-logo .logo-sub{font-size:9px;color:var(--arena);letter-spacing:.42em;max-width:150px}
.f-logo .logo-lines{max-width:150px;height:8px}
.f-logo .logo-lines i:first-child{height:2px;background:var(--arena)}
.f-logo .logo-lines i:last-child{height:2px;top:5px}
.f-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.credits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.credits b{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-osc-2);font-weight:600;margin-bottom:10px}
.credits span{color:#D8CFC0;font-weight:400}
.f-bottom{margin-top:clamp(50px,7vw,80px);padding-top:26px;border-top:1px solid #2C2824;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:11px;letter-spacing:.05em;color:var(--txt-osc-2)}

/* ============ 8. RESPONSIVO ============ */
/* Con ocho enlaces el menú necesita ~1300 px con su espaciado normal.
   Entre 1180 y 1360 se compacta un poco; entre 900 y 1180 (laptops con
   escala 125 %, ventanas no maximizadas) se compacta más, pero sigue siendo
   horizontal y completo: el cliente pidió (28 sep 2026) que en escritorio
   NUNCA se esconda tras la hamburguesa. La hamburguesa queda para ≤ 920 px
   (tabletas en vertical y celulares). */
@media (max-width:1360px){
  nav.mainnav{gap:14px}
  nav.mainnav a{font-size:10px;letter-spacing:.15em}
}
@media (max-width:1180px){
  header .bar{gap:12px;padding-left:20px;padding-right:20px}
  nav.mainnav{gap:10px}
  nav.mainnav a{font-size:9.5px;letter-spacing:.09em}
  .cta-head{font-size:10px;letter-spacing:.16em;padding:10px 14px;white-space:nowrap}
}
@media (max-width:1060px){
  header .bar{gap:10px}
  nav.mainnav{gap:8px}
  nav.mainnav a{font-size:9px;letter-spacing:.07em}
  .cta-head{font-size:9.5px;letter-spacing:.12em;padding:9px 12px}
}
@media (max-width:980px){
  header .bar{gap:8px;padding-left:16px;padding-right:16px}
  nav.mainnav{gap:6px}
  nav.mainnav a{font-size:8.8px;letter-spacing:.04em}
  .cta-head{font-size:9px;letter-spacing:.08em;padding:8px 10px}
}
@media (max-width:920px){
  nav.mainnav{display:none}
  .burger{display:flex}
}

@media (max-width:960px){
  .disp-grid{grid-template-columns:1fr}
  /* relative (no static): el botón de giro libre se posiciona sobre la escena */
  .scene-wrap{position:relative;top:auto}
  .scene{height:clamp(300px,48vh,460px)}
}

@media (max-width:860px){
  .split,#proyecto .split,#exclusividad .split,.amen-grid{grid-template-columns:1fr}
  .feature-fig{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .feature-fig img{width:100%;max-height:none;box-shadow:none}
  .feature-fig .caption{padding:0 20px}
  .f-grid,.credits{grid-template-columns:1fr}
  /* en Departamento: título, luego el plano, luego las especificaciones */
  #departamento .split>.txt{display:contents}
  #departamento .split .txt .eyebrow{order:1}
  #departamento .split .txt h2.title{order:2;margin-bottom:6px}
  #departamento .split .tipo-block{order:3}
  #departamento .split .txt .bignum{order:4}
  #departamento .split .txt .specs{order:5;margin-top:10px}
}

@media (max-width:760px){
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .hero-facts li:nth-child(odd){border-left:0}
  .hero-facts li:nth-child(n+3){border-top:1px solid var(--linea-osc)}
  .hero-facts li{padding:20px 10px}
  .datos-cta{margin:18px auto}
  .hero{padding:104px 5vw 76px}
  .hero-kicker{font-size:11px;letter-spacing:.36em;margin-bottom:28px}
  .logo-word{font-size:clamp(66px,17.5vw,86px)}
  .logo-sub{font-size:12.5px}
  .hero-h1{margin-top:36px;font-size:clamp(28px,7.8vw,36px);line-height:1.15}
  .hero-addr{margin-top:24px;font-size:13.5px}
  .hero-cta{margin-top:36px}
  .hero-cta .btn{padding:17px 30px}
  .nota-aclara{font-size:11.5px}
  /* la aclaración del estacionamiento va después de la lista también en el orden móvil */
  #departamento .split .txt .nota-aclara{order:6}
}

/* Títulos en celular: el antetítulo ("III CONOCE TU") con menos tracking
   (.32em → .18em) y el salto controlado "Elige tu / departamento" (.br-m). */
.br-m{display:none}
@media (max-width:640px){
  .eyebrow{letter-spacing:.18em}
  .br-m{display:inline}
}

@media (max-width:720px){
  .perks{grid-template-columns:1fr;gap:26px}
  .band .edstats{grid-template-columns:1fr;gap:28px;justify-items:start;max-width:340px;margin-inline:auto}
  .stat{justify-content:flex-start}
  .center .btn{width:100%}
}

@media (max-width:640px){
  body{font-size:15px}
  html{scroll-padding-top:70px}
  header .bar{padding:13px 18px}
  .mark{font-size:13px;letter-spacing:.24em}
  .mark small{font-size:8px}
  .cta-head{display:none}
  section{padding:72px 0}
  h2.title{font-size:40px}
  .statement{font-size:26px}
  .bignum{font-size:60px}
  .edstats .n{font-size:38px}
  .edstats .l{font-size:10.5px;letter-spacing:.16em}
  .pricehero .monto{font-size:52px}
  #map{height:380px}
  .mapbox .pinlabel{position:static;display:block;padding:14px 16px;font-size:9.5px;letter-spacing:.16em}
  .band-label{font-size:9px;letter-spacing:.2em;bottom:16px}
  .chips button{padding:10px 14px;font-size:10px;letter-spacing:.12em}
  .disp-count b{font-size:28px}
  .scene-bar{flex-direction:column;align-items:stretch}
  .scene-tools{justify-content:space-between}
  .scene-tools button{flex:1 1 auto;padding:0 8px;font-size:9.5px;letter-spacing:.1em}
  .hero-cta{flex-direction:column;align-items:center}
  .hero-cta .btn{width:100%;max-width:340px}
  .form-actions{flex-direction:column}
  .form-actions .btn,.form-actions .btn-wa{width:100%;text-align:center;justify-content:center}
  .credits{gap:20px}
  #wa-float{right:14px;bottom:14px;width:50px;height:50px}
  #wa-float svg{width:25px;height:25px}
  /* espacio al final del formulario para que el botón flotante no tape el envío */
  #leadForm{padding-bottom:64px}
  .lb-nav{width:44px;height:44px;font-size:26px}
}

@supports (padding: env(safe-area-inset-bottom)){
  #wa-float{bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ---------- animación de letras en los títulos de sección ---------- */
/* .pal envuelve cada palabra: las letras son inline-block y, sin esto, el
   navegador podía partir una palabra entre dos líneas ("Departa / mento") */
.pal{white-space:nowrap}
.al{display:inline-block;overflow:hidden;vertical-align:bottom}
.al i{display:inline-block;font-style:inherit;transform:translateY(118%);transition:transform .7s var(--curva)}
.in .al i{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .al i{transform:none;transition:none}
  html.js .ficha,.menu-overlay a,.menu-close{opacity:1;transform:none;transition:none}
}