/* Showroom · estructura (copiada de propuestas/comun/estructura.css, la de la 5B elegida).
   Solo posiciones, tamaños, capas y comportamiento responsive: es el modelo del
   showroom de referencia. Todo lo que es piel (color, tipografía, esquinas, sombras,
   textura, carácter del movimiento) sale de las variables de piel-5b.css y tema.css.
   El tipo de propiedad llega como #app[data-tipo="villa"|"edificio"]: nunca el nombre de
   una propiedad, que en un armado sin marca no puede aparecer en ningún archivo.
   Capas (z-index): escena 0 · minimapa 14 · hud/preview/ficha/tabs 20 · velo 40 ·
   menú 45 · modal 48 · portada 50 · cortina 60 · aviso 70. */

:root {
  --hud-top: 20px; --hud-x: 20px; --ctrl-h: 40px; --circ: 40px;
  --panel-w: 360px; --preview-w: 320px; --tabs-w: 168px;
  --ok-overlay: color-mix(in srgb, var(--c-ok) 42%, transparent);
  --no-overlay: color-mix(in srgb, var(--c-no) 42%, transparent);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--c-fondo); color: var(--c-tinta); }
body { font-family: var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ficha__scroll, .menu, .modal__caja, .preview, .contacto, .tira__lista, .tabs__lista, .selector__lista { overscroll-behavior: contain; }
.titulo-unidad, .menu__nombre, .marca__nombre { text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 3px; }

.ic {
  font-family: var(--f-icon); font-weight: var(--icon-w, 300); font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: var(--icon-var, 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24); flex: none;
}
.ic--grande { font-size: 40px; }

#app { position: fixed; inset: 0; overflow: hidden; }

/* ----------------------------------------------------------------- portada */
.portada { position: absolute; inset: 0; z-index: 50; overflow: hidden; background: var(--c-fondo);
  transition: opacity var(--dur-lenta) var(--ease), visibility 0s linear var(--dur-lenta); }
#app:not([data-vista="portada"]) .portada { opacity: 0; visibility: hidden; pointer-events: none; }
/* De la portada a la maqueta: la maqueta arranca sobre la misma imagen, así que la portada se va
   pareja (arranca y termina suave). Con la curva de siempre, que corre al principio, en el primer
   cuadro se iba casi la mitad y la imagen se aclaraba de golpe: se veía un salto. */
#app[data-vista="maqueta"] .portada { transition: opacity 600ms cubic-bezier(.45, 0, .25, 1), visibility 0s linear 600ms; }
/* Mientras la maqueta se prepara, la portada se sostiene visible con el último cuadro fijo encima
   del video (motor.js, congelarPortada); los textos y la sombra se van enseguida. */
#app.portada-sostenida .portada { opacity: 1 !important; visibility: visible !important; transition: none !important; }
#app:not([data-vista="portada"]) .portada__ui, #app:not([data-vista="portada"]) .portada__velo { opacity: 0; transition: opacity 350ms ease; }
.portada__final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__medio, .portada__velo { position: absolute; inset: 0; }
.portada__video, .portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__img--b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .portada__img--a { animation: kenburns 18s var(--ease) infinite alternate; }
  .portada__img--b { animation: atardecer 18s ease-in-out infinite; }
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes atardecer { 0%, 40% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } }
.portada__arriba { position: absolute; top: var(--hud-top); left: var(--hud-x); right: var(--hud-x); display: flex; justify-content: space-between; gap: 12px; z-index: 2; }
/* Portada como en la referencia: logo y cifras centrados, botón de entrar a ~75 % de la altura.
   El bloque de la marca queda debajo de la propiedad en escritorio (no encima del edificio) y arriba,
   en el cielo, en vertical. Un velo propio oscurece solo la franja donde va el texto. */
.portada__ui { position: absolute; inset: 0; z-index: 2; }
.portada__centro { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; text-align: center;
  padding: 10vh 24px calc(25dvh - var(--entrar-h, 44px) / 2); z-index: 2; }
.portada .marca { align-self: end; margin-bottom: 3vh; }
.portada .cifras { margin: 0 0 3.2vh; }
/* portada.textosAlFinal: las cifras e "Ingresar" esperan a que termine el vuelo de la portada
   (motor.js pone .portada--esperando) y entran con su animación apenas llega (.portada--llego). */
.portada--esperando .cifras, .portada--esperando .btn-entrar { opacity: 0; visibility: hidden; animation: none !important; }
.portada--llego .cifras, .portada--llego .btn-entrar { animation-delay: 120ms !important; }
/* Con textosAlFinal el vuelo se ve limpio, sin sombra: la sombra que ayuda a leer llega con los
   textos, más suave que la de siempre y sin la franja que marcaba el cielo. El logo se sostiene
   solo con una sombra propia, pegada a las letras. */
.portada--esperando .portada__velo, .portada--llego .portada__velo { transition: opacity 1400ms var(--ease); }
.portada--esperando .portada__velo { opacity: 0; }
.portada--llego .portada__velo { background: radial-gradient(ellipse at 50% 40%, rgba(5, 7, 11, 0) 50%, rgba(5, 7, 11, .26) 100%); }
.portada--llego .portada__velo::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .24) 86%, rgba(0, 0, 0, .08) 100%); }
#app[data-tipo="edificio"] .portada--llego .portada__velo::before { background: radial-gradient(ellipse 34% 24% at 50% 68%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 100%); }
.portada--esperando .marca__img img, .portada--llego .marca__img img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
/* Sin la sombra de antes, los números quedan sobre la fachada blanca: van en un panel
   translúcido esmerilado (solo ahí) y la frase del logo lleva una sombra de letra más marcada. */
.portada--llego .cifras { padding: 14px 30px 12px; border-radius: 18px; background: rgba(6, 14, 20, .42);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.portada--esperando .marca__lugar, .portada--llego .marca__lugar { text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 14px rgba(0, 0, 0, .55); }
/* En la computadora la torre queda al medio: el logo va arriba, en el cielo, y las cifras con
   "Ingresar" en una sola fila abajo, sobre la arena (Camilo, 27-sep-2026). */
@media (min-width: 761px) {
  .portada--esperando .portada__centro, .portada--llego .portada__centro {
    grid-template-columns: 1fr auto auto 1fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "marca marca marca marca" ". . . ." ". cifras boton .";
    column-gap: 18px; align-items: center; padding: 7vh 24px calc(24px + env(safe-area-inset-bottom)); }
  .portada--esperando .marca, .portada--llego .marca { grid-area: marca; align-self: start; margin: 0; }
  .portada--esperando .cifras, .portada--llego .cifras { grid-area: cifras; margin: 0; }
  .portada--esperando .btn-entrar, .portada--llego .btn-entrar { grid-area: boton; }
}
/* En el celular la torre ocupa el medio de la pantalla (del 35% al 80% del alto): las cifras van
   en una sola fila compacta y "Ingresar" abajo del todo, sobre la arena, para no tapar el edificio
   (Camilo, 27-sep-2026). */
@media (max-width: 760px) {
  .portada--esperando .portada__centro, .portada--llego .portada__centro { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .portada--esperando .cifras, .portada--llego .cifras { grid-template-columns: repeat(4, auto); gap: 0 14px; margin: 0 0 12px; padding: 10px 14px 9px; }
  .portada--esperando .cifras b, .portada--llego .cifras b { font-size: 24px; }
  .portada--esperando .cifras span, .portada--llego .cifras span { font-size: 8px; letter-spacing: .14em; margin-top: 5px; }
  .portada--esperando .btn-entrar, .portada--llego .btn-entrar { height: 44px; }
}
@media (max-width: 760px) {
  .portada--llego .portada__velo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .24) 62%, rgba(0, 0, 0, .3) 84%, rgba(0, 0, 0, .1) 100%); }
  #app[data-tipo="edificio"] .portada--llego .portada__velo::before { background: radial-gradient(ellipse 80% 30% at 50% 66%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 100%); }
}
.portada__centro .marca__lugar, .portada__centro .cifras { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45); }
.portada__velo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, var(--velo-texto, .38)) 50%, rgba(0, 0, 0, var(--velo-texto, .38)) 80%, rgba(0, 0, 0, .12) 100%); }
#app[data-tipo="edificio"] .portada__velo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 64%, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 100%); }
.portada__img--a { object-position: 58% 50%; }
.marca { display: grid; justify-items: center; }
.marca__img img { width: min(420px, 70vw); height: auto; }
.marca__img { margin: 0; }
.cifras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.cifras li { display: grid; justify-items: center; }
.btn-entrar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }

/* ------------------------------------------------------------------ escena */
.escena { position: absolute; inset: 0; z-index: 0; }
.capa { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
#app[data-vista="exterior"] .capa--exterior, #app[data-vista="pisos"] .capa--pisos, #app[data-vista="ficha"] .capa--ficha,
#app[data-vista="tour"] .capa--tour, #app[data-tab="tour"] .capa--tour, #app[data-vista="amenidades"] .capa--amenidades,
#app[data-vista="contacto"] .capa--contacto { opacity: 1; visibility: visible; transition-delay: 0s; }
#app[data-tab="tour"] .capa--tour { z-index: 1; }

/* exterior */
.pano { position: absolute; inset: 0; }
.pano--noche { opacity: 0; transition: opacity 900ms ease; }
.capa--exterior.es-noche .pano--noche { opacity: 1; }
/* El exterior de un edificio es un render plano, no una panorámica; el tour panorámico sí lo es. */
#app[data-tipo="edificio"] .capa--exterior .pano { display: none; }
.ext-foto { position: absolute; inset: 0; }
.ext-foto { overflow: hidden; }
/* Vacía (villa: el exterior es la panorámica) no debe tapar el visor: si no, se come los clics
   de los puntos y el arrastre. */
.ext-foto:empty { display: none; }
.ext-caja { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ext-caja img, .ext-caja svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Día/Noche del edificio: la misma toma, fundido cruzado (checklist #11). */
.ext-caja .ext-noche { opacity: 0; transition: opacity 900ms ease; }
.capa--exterior.es-noche .ext-caja .ext-noche { opacity: 1; }
/* Hover o toque sobre la torre: toda la silueta se pinta del acento de la marca, con la
   fachada todavía visible debajo, y aparece la tarjeta "Nombre · Ingresar" (checklist #13). */
.ext-foto svg .silueta { fill: var(--c-silueta, var(--c-acento)); fill-opacity: 0; cursor: pointer; transition: fill-opacity var(--dur-rapida) var(--ease); }
.capa--exterior.sil-on .silueta { fill-opacity: var(--silueta-opacidad, .9); }
/* De día se multiplica: la fachada blanca toma el color y sus balcones y ventanas se siguen
   leyendo. De noche (render oscuro) va encima, algo más transparente. */
.capa--exterior:not(.es-noche) .ext-foto svg { mix-blend-mode: multiply; }
.capa--exterior.es-noche.sil-on .silueta { fill-opacity: var(--silueta-opacidad-noche, .7); }
.ext-hs { position: absolute; }
.capa--exterior.sil-on .ext-hs .hs__tarjeta { opacity: 1; transform: none; pointer-events: auto; }
/* En un celular la torre llena el ancho: la tarjeta va debajo del punto, centrada, para no
   salirse de la pantalla. */
@media (max-width: 760px) {
  .ext-hs .hs__tarjeta { left: 0; top: 22px; transform: translate(-50%, -6px); }
  .capa--exterior.sil-on .ext-hs .hs__tarjeta { transform: translate(-50%, 0); }
}
/* Sobre la torre pintada, el punto se invierte para no perderse en el mismo color. */
.capa--exterior.sil-on .ext-hs .hs__punto { background: #fff; box-shadow: 0 0 0 4px var(--c-acento), 0 0 0 6px #fff, 0 3px 14px rgba(0, 0, 0, .45); }
/* Zoom de cámara hacia el edificio antes de la planta (checklist #14): ~700 ms, salida suave. */
.ext-caja, .capa--exterior .pano { transition: transform 700ms var(--ease-zoom, cubic-bezier(.22, .8, .3, 1)); }
.capa--exterior.zoom .ext-caja { transform: scale(2.4); }
.capa--exterior.zoom .pano { transform: scale(1.18); }
.capa--exterior.zoom .hs, .capa--exterior.zoom .flecha { opacity: 0; transition: opacity 200ms ease; }
#app[data-tipo="edificio"] .capa--exterior .flecha { display: none; }
.pnlm-container { background: var(--c-fondo) !important; }
#app[data-tipo="edificio"] .capa--tour .pnlm-container { background: var(--c-tour, #1d1a1f) !important; }
.pnlm-load-box, .pnlm-about-msg { display: none !important; }

/* hotspots del exterior: punto + tarjeta con "Ingresar" */
.hs-wrap { width: 0 !important; height: 0 !important; overflow: visible !important; }
.hs, .ext-hs.hs { position: absolute; display: block; cursor: pointer; }
.hs__punto { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-acento); box-shadow: 0 0 0 3px #fff, 0 0 0 8px color-mix(in srgb, var(--c-acento) 45%, transparent), 0 3px 14px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) { .hs__punto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-acento); animation: latido 2.4s ease-out infinite; } }
@keyframes latido { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.hs__tarjeta { position: absolute; left: 18px; top: -26px; display: flex; align-items: center; gap: 14px; white-space: nowrap; padding: 8px 8px 8px 16px;
  background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra); opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hs:hover .hs__tarjeta, .hs:focus-within .hs__tarjeta, .hs--fijo .hs__tarjeta { opacity: 1; transform: none; pointer-events: auto; }
.hs__tarjeta b { font-weight: 600; font-size: 14px; }
.hs__btn { background: var(--c-acento); color: var(--c-acento-tinta); border-radius: var(--r-ctrl); padding: 7px 14px; font-size: 13px; font-weight: 600; }

/* flechas circulares de acento, a media altura */
.flecha { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center;
  background: var(--c-acento); color: var(--c-acento-tinta); border-radius: var(--r-flecha, 50%); box-shadow: var(--sombra-chica); transition: transform var(--dur-rapida) var(--ease); }
.flecha:hover { transform: scale(1.06); }
.flecha:active { transform: scale(.96); }
.flecha--izq { left: var(--hud-x); } .flecha--der { right: var(--hud-x); }
#app[data-vista="ficha"] .etapa .flecha--izq { left: calc(var(--panel-w) + var(--hud-x) * 2); }
#app[data-vista="ficha"].ficha-cerrada .etapa .flecha--izq { left: var(--hud-x); }
#app[data-vista="ficha"] .etapa .flecha--der { right: calc(var(--tabs-w) + var(--hud-x) * 2); }
#app[data-vista="ficha"].tabs-cerradas .etapa .flecha--der { right: 64px; }

/* ------------------------------------------------------------------ pisos */
.pisos__fondo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: var(--pisos-filtro, grayscale(.85) brightness(1.08) blur(2px)); transform: scale(1.04); }
.capa--pisos::after { content: ""; position: absolute; inset: 0; background: var(--pisos-velo, transparent); pointer-events: none; }
.plano-caja { position: absolute; z-index: 1; left: 50%; top: 52%; --ar: 1.43; width: min(calc(100vw - 2 * var(--tabs-w) - 120px), calc((100dvh - 200px) * var(--ar)), 980px);
  aspect-ratio: var(--ar); transform: translate(-50%, -50%); transition: opacity var(--dur) var(--ease); }
.plano, .plano svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* La planta entra creciendo desde el edificio (viene del zoom del exterior) o, al cambiar de
   piso, llega desde el selector de la derecha, de arriba o de abajo según el sentido. */
.plano-caja.entra { animation: planta-entra 700ms var(--ease-zoom, cubic-bezier(.22, .8, .3, 1)) both; }
.plano-caja.cambia { transform-origin: 120% 50%; animation: planta-cambia 700ms var(--ease-zoom, cubic-bezier(.22, .8, .3, 1)) both; }
@keyframes planta-entra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes planta-cambia {
  from { opacity: 0; transform: translate(-50%, calc(-50% + var(--dy, 1) * 48px)) scale(.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.plano { border-radius: inherit; overflow: hidden; }
.pines { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; font-size: 12px; font-weight: 600;
  background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-ctrl); box-shadow: var(--sombra-chica); white-space: nowrap; transition: transform var(--dur-rapida) var(--ease); }
.pin.hover, .pin:hover, .pin.sel { transform: translate(-50%, -50%) scale(1.1); }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto--ok { background: var(--c-ok); } .punto--no { background: var(--c-no); } .punto--hold { background: var(--c-hold); }

.svg-plano .unidad { cursor: default; fill: transparent; transition: fill var(--dur-rapida) var(--ease), fill-opacity var(--dur-rapida) var(--ease); }
.svg-plano--villa .unidad { fill: var(--plano-unidad, transparent); }
.svg-plano .unidad-activa { cursor: pointer; outline: none; }
.svg-plano .unidad-activa.est-ok:hover, .svg-plano .unidad-activa.est-ok.hover, .svg-plano .unidad-activa.est-ok:focus-visible, .svg-plano .unidad-activa.est-ok.sel { fill: var(--ok-overlay); }
.svg-plano .unidad-activa.est-no:hover, .svg-plano .unidad-activa.est-no.hover, .svg-plano .unidad-activa.est-no:focus-visible, .svg-plano .unidad-activa.est-no.sel { fill: var(--no-overlay); }
.svg-plano .unidad-activa:focus-visible { stroke: var(--c-foco, var(--c-acento)); stroke-width: 6; }
.svg-plano .marcada { fill: var(--ok-overlay) !important; }
.svg-plano--villa .espacio { fill: var(--plano-espacio); stroke: var(--plano-linea); stroke-width: 2; }
.svg-plano--villa .unidad { stroke: var(--plano-linea); stroke-width: 2.5; }
.svg-plano--villa .etiqueta { fill: var(--plano-texto); font-family: var(--f-ui); font-size: 17px; letter-spacing: .02em; }
.svg-plano--villa .apagada { fill: var(--plano-unidad); }
.svg-plano--edificio .plano-img { filter: var(--plano-img-filtro, grayscale(1) brightness(1.22) contrast(.88)); }
/* Edificio: el plano del brochure se ve siempre; cada unidad lleva un tinte leve de su estado
   (como key/12 y key/13) que se vuelve fuerte al pasar o al elegirla. */
.svg-plano--edificio .unidad { stroke: transparent; stroke-width: 18; }
.svg-plano--edificio .unidad-activa.est-ok { fill: color-mix(in srgb, var(--c-ok) 17%, transparent); }
.svg-plano--edificio .unidad-activa.est-no { fill: color-mix(in srgb, var(--c-no) 20%, transparent); }
.svg-plano--edificio .unidad-activa.est-ok:hover, .svg-plano--edificio .unidad-activa.est-ok.hover, .svg-plano--edificio .unidad-activa.est-ok.sel, .svg-plano--edificio .unidad-activa.est-ok:focus-visible { fill: var(--ok-overlay); }
.svg-plano--edificio .unidad-activa.est-no:hover, .svg-plano--edificio .unidad-activa.est-no.hover, .svg-plano--edificio .unidad-activa.est-no.sel, .svg-plano--edificio .unidad-activa.est-no:focus-visible { fill: var(--no-overlay); }
/* Reservada (la puede marcar la hoja de la desarrolladora): ámbar, como su badge y su punto. */
.svg-plano--edificio .unidad-activa.est-hold { fill: color-mix(in srgb, var(--c-hold) 24%, transparent); }
.svg-plano--edificio .unidad-activa.est-hold:hover, .svg-plano--edificio .unidad-activa.est-hold.hover, .svg-plano--edificio .unidad-activa.est-hold.sel, .svg-plano--edificio .unidad-activa.est-hold:focus-visible { fill: color-mix(in srgb, var(--c-hold) 48%, transparent); }
.svg-plano--edificio.svg-plano--mini .marcada { fill: color-mix(in srgb, var(--c-ok) 55%, transparent) !important; }
.svg-plano--edificio .unidad-activa.sel { stroke: var(--c-tinta); }

#app { --sel-w: 96px; }
#app[data-tipo="villa"] { --sel-w: 152px; }
@media (min-width: 761px) {
  #app.con-preview .plano-caja {
    left: calc((var(--hud-x) + var(--preview-w) + 28px + 100vw - var(--sel-w) - var(--hud-x) - 28px) / 2);
    width: min(calc(100vw - var(--preview-w) - var(--sel-w) - 2 * var(--hud-x) - 72px), calc((100dvh - 200px) * var(--ar)), 980px);
  }
}
.plano-caja { transition: left var(--dur) var(--ease), width var(--dur) var(--ease), opacity var(--dur) var(--ease); }
/* selector de pisos / niveles: columna vertical a la derecha */
.selector { position: absolute; z-index: 2; right: var(--hud-x); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; padding: 10px 8px;
  background: var(--c-panel); border-radius: var(--r-selector, 999px); box-shadow: var(--sombra); max-height: calc(100dvh - 180px); }
.selector__lista { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.selector__lista button { display: block; min-width: 56px; padding: 8px 12px; border-radius: var(--r-ctrl); font-size: 13px; font-weight: 500; color: var(--c-tinta-2); white-space: nowrap; transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease); position: relative; }
#app[data-tipo="villa"] .selector__lista button { min-width: 120px; }
.selector__lista button:hover { background: var(--c-acento-suave); color: var(--c-tinta); }
.selector__lista button[aria-current="true"] { background: var(--c-acento); color: var(--c-acento-tinta); }
.selector__lista button.agotado { text-decoration: line-through; text-decoration-color: var(--c-no); text-decoration-thickness: 2px; }
.selector__lista button.agotado::after { content: ""; position: absolute; right: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-no); }
/* piso vendido y activo: sin tachado ni punto rojo sobre la píldora de acento; se marca con un anillo */
.selector__lista button.agotado[aria-current="true"] { text-decoration: none; box-shadow: inset 0 0 0 2px var(--c-no); }
.selector__lista button.agotado[aria-current="true"]::after { background: var(--c-acento-tinta); }
.selector__flecha { width: 32px; height: 28px; display: grid; place-items: center; color: var(--c-tinta-2); border-radius: var(--r-ctrl); }
.selector__flecha:hover { color: var(--c-acento); }
.selector__riel { position: absolute; right: -9px; top: 44px; bottom: 44px; width: 2px; background: var(--c-linea); border-radius: 2px; }
.selector__riel i { position: absolute; left: 0; right: 0; top: 0; height: calc((var(--i) + 1) / var(--n) * 100%); background: var(--c-acento); border-radius: 2px; transition: height var(--dur) var(--ease); }
.leyenda { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.leyenda__fila { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-ctrl); box-shadow: var(--sombra-chica); white-space: nowrap; }
.leyenda__fila .punto--no, .leyenda__fila .punto--hold { margin-left: 6px; }
.leyenda__fila em { font-style: normal; color: var(--c-tinta-2); margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--c-linea); }
.fecha { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--c-panel); border-radius: var(--r-ctrl); box-shadow: var(--sombra-chica); font-size: 13px; font-weight: 600; }
.fecha > span { padding: 0 10px; min-width: 150px; text-align: center; }
.fecha button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-ctrl); color: var(--c-acento); }
.fecha button:hover { background: var(--c-acento-suave); }

/* --------------------------------------------------------------------- HUD */
.hud { position: absolute; z-index: 20; top: var(--hud-top); display: grid; gap: 10px; transition: opacity var(--dur) var(--ease); }
.hud--izq { left: var(--hud-x); justify-items: start; }
.hud--der { right: var(--hud-x); justify-items: end; }
#app[data-vista="portada"] .hud { opacity: 0; visibility: hidden; }
.hud__fila { display: flex; align-items: center; gap: 8px; }
.btn-menu { height: var(--ctrl-h); display: inline-flex; align-items: center; gap: 8px; padding: 0 18px 0 14px; background: var(--c-acento); color: var(--c-acento-tinta); border-radius: var(--r-ctrl); font-weight: 600; font-size: 14px; box-shadow: var(--sombra-chica); }
.circ { width: var(--circ); height: var(--circ); display: grid; place-items: center; border-radius: var(--r-circ, 50%); background: var(--c-oscuro); color: var(--c-oscuro-tinta); box-shadow: var(--sombra-chica); flex: none; }
.circ--claro { background: var(--c-panel); color: var(--c-tinta); }
.circ--borde { background: transparent; color: var(--c-tinta); box-shadow: none; border: 1px solid var(--c-linea); }
.btn-menu:active, .circ:active, .pildora:active, .btn-cta:active, .btn-sec:active, .btn-entrar:active { transform: scale(.97); }
.chip-escena { padding: 6px 12px; font-size: 12px; font-weight: 500; background: var(--c-chip); color: var(--c-chip-tinta); border-radius: var(--r-chip, 6px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pildora { height: var(--ctrl-h); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-ctrl); font-size: 13px; font-weight: 500; box-shadow: var(--sombra-chica); white-space: nowrap; text-decoration: none; }
.pildora .ic { font-size: 18px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--c-seg); border-radius: var(--r-ctrl); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sombra-chica); }
.seg button { height: calc(var(--ctrl-h) - 6px); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-ctrl); font-size: 12px; font-weight: 600; color: var(--c-seg-tinta); white-space: nowrap; }
.seg button .ic { font-size: 16px; }
.seg button[aria-pressed="true"] { background: var(--c-seg-on); color: var(--c-seg-on-tinta); box-shadow: var(--sombra-chica); }
.hud--der .seg--lang button { padding: 0 10px; }

/* ----------------------------------------------------------------- preview */
.preview { position: absolute; z-index: 20; left: var(--hud-x); top: calc(var(--hud-top) + var(--ctrl-h) + 44px); width: var(--preview-w); max-height: calc(100dvh - var(--hud-top) - var(--ctrl-h) - 64px);
  overflow: auto; scrollbar-width: none; background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra);
  opacity: 0; transform: var(--entra-preview, translateY(10px) scale(.98)); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.preview.on { opacity: 1; transform: none; pointer-events: auto; }
.preview__cuerpo { padding: 16px 18px 18px; display: grid; gap: 14px; }
.preview__pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.x { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-circ, 50%); background: var(--c-panel); color: var(--c-tinta); box-shadow: var(--sombra-chica); }
.x .ic { font-size: 18px; }
.x--plano { position: static; box-shadow: none; border: 1px solid var(--c-linea); }

.carrusel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-panel-2); }
.carrusel--preview { border-radius: var(--r-panel) var(--r-panel) 0 0; }
.carrusel--ficha { border-radius: var(--r-foto); margin-bottom: 16px; }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-lenta) var(--ease); }
.carrusel img.on { opacity: 1; }
.carrusel__f { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-circ, 50%); background: var(--c-panel); color: var(--c-tinta); opacity: .92; }
.carrusel__f .ic { font-size: 18px; }
.carrusel__f--izq { left: 10px; } .carrusel__f--der { right: 10px; }

.titulo-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.titulo-unidad__tipo { display: block; margin-bottom: 3px; font-family: var(--f-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-tinta-2); font-style: normal; }
.titulo-unidad { margin: 0; font-size: 20px; line-height: 1.15; }
.titulo-unidad--grande { font-size: 24px; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: var(--r-ctrl); white-space: nowrap; }
.badge--ok { background: var(--c-ok); color: var(--c-ok-tinta, #fff); }
.badge--no { background: var(--c-no); color: var(--c-no-tinta, #fff); }
.badge--hold { background: var(--c-hold); color: var(--c-tinta); }
.btn-cta { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; background: var(--c-acento); color: var(--c-acento-tinta);
  border-radius: var(--r-ctrl); font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; transition: filter var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease); }
.btn-cta:hover { filter: brightness(1.07); }
.btn-sec { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--c-linea-fuerte, var(--c-linea)); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.btn-sec .ic { font-size: 18px; }
.btn-sec--lleno { background: var(--c-acento); color: var(--c-acento-tinta); border-color: transparent; }
.filas { margin: 0; display: grid; }
.fila { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--c-linea); font-size: 13.5px; }
.fila:last-child { border-bottom: 0; }
.fila .ic { font-size: 19px; color: var(--c-icono, var(--c-acento)); }
.fila dt { color: var(--c-tinta-2); }
.fila dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.fila .ic--ok { color: var(--c-ok); font-size: 18px; }
.precio { display: grid; gap: 2px; }
.precio__v { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.precio__n { font-size: 12px; color: var(--c-tinta-2); }
.nota { margin: 6px 0 0; font-size: 11.5px; color: var(--c-tinta-2); line-height: 1.45; }

/* -------------------------------------------------------------------- ficha */
.ficha { position: absolute; z-index: 20; left: var(--hud-x); top: calc(var(--hud-top) + var(--ctrl-h) + 44px); bottom: var(--hud-x); width: var(--panel-w);
  display: grid; grid-template-rows: 1fr auto; background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra);
  opacity: 0; transform: translateX(calc(-100% - 40px)); visibility: hidden; transition: transform var(--dur-lenta) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur-lenta); }
#app[data-vista="ficha"]:not(.ficha-cerrada) .ficha { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
#app[data-tab="tour"] .ficha { bottom: calc(var(--tira-h, 108px) + var(--hud-x)); }
.ficha__scroll { position: relative; overflow-y: auto; padding: 16px 18px 20px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--c-acento) transparent; }
.ficha__scroll::-webkit-scrollbar { width: 4px; } .ficha__scroll::-webkit-scrollbar-thumb { background: var(--c-acento); border-radius: 4px; }
.ficha__scroll > .x { top: 24px; right: 26px; }
.ficha__scroll > * + * { margin-top: 14px; }
.ficha__scroll > .carrusel { margin-top: 0; }
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; }
.accion { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: var(--r-accion, 12px); border: 1px solid var(--c-linea); font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--c-tinta); }
.accion .ic { color: var(--c-icono, var(--c-acento)); font-size: 22px; }
.accion:hover { background: var(--c-acento-suave); }
.seccion h3 { margin: 18px 0 2px; font-size: 12px; font-weight: 600; color: var(--c-tinta-2); letter-spacing: .02em; }
.seccion__texto { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
.seccion__texto .ic { color: var(--c-icono, var(--c-acento)); font-size: 19px; }
.btn-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: var(--r-ctrl); border: 1.5px solid var(--c-acento); color: var(--c-acento-texto, var(--c-acento)); font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-wa:hover { background: var(--c-acento-suave); }
.ficha__pie { display: flex; gap: 8px; align-items: center; padding: 12px 18px 16px; border-top: 1px solid var(--c-linea); }
.btn-pie { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--r-ctrl); border: 1px solid var(--c-linea); font-size: 12px; font-weight: 500; white-space: nowrap; }
.btn-pie .ic { font-size: 16px; }
.ficha__pie .circ { width: 36px; height: 36px; margin-left: auto; }
.ficha__pie .circ .ic { font-size: 17px; }

/* pestañas verticales a la derecha */
.tabs { position: absolute; z-index: 20; right: var(--hud-x); top: calc(var(--hud-top) + var(--ctrl-h) + 44px); display: flex; align-items: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); }
#app[data-vista="ficha"] .tabs { opacity: 1; visibility: visible; }
.tabs__lista { display: grid; gap: 8px; width: var(--tabs-w); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.tabs__lista button { height: var(--ctrl-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--c-panel); color: var(--c-tinta-2); border-radius: var(--r-ctrl); box-shadow: var(--sombra-chica); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.tabs__lista button .ic { color: var(--c-icono, var(--c-acento)); font-size: 19px; }
.tabs__lista button[aria-selected="true"] { background: var(--c-acento); color: var(--c-acento-tinta); }
.tabs__lista button[aria-selected="true"] .ic { color: inherit; }
.tabs__chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--c-chev, var(--c-tinta)); border-radius: 50%; background: var(--c-seg); }
.tabs-cerradas .tabs__lista { transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; }
.tabs-cerradas .tabs__chev .ic { transform: rotate(180deg); }

/* etapa: el contenido de cada pestaña */
.etapa { position: absolute; inset: 0; background: var(--c-etapa); }
.galeria { position: absolute; inset: 0; background: var(--c-fondo); }
.galeria__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--dur-cruce, 800ms) ease-in-out; }
.galeria__foto.on { opacity: 1; }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; }
/* imagen más chica que la pantalla: se muestra entera, nunca estirada, sobre un fondo desenfocado de sí misma */
.galeria__foto--contener { overflow: hidden; }
.galeria__fondo { position: absolute; inset: -40px; background-position: center; background-size: cover; filter: blur(34px) brightness(.8); }
.galeria__foto--contener img { position: relative; object-fit: contain; }
.galeria__foto figcaption { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, 80vw); padding: 10px 16px; font-size: 13px; line-height: 1.45;
  background: var(--c-chip); color: var(--c-chip-tinta); border-radius: var(--r-chip, 8px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; }
.capa--amenidades .galeria__foto figcaption { left: calc(var(--hud-x) + 64px); transform: none; bottom: 32px; text-align: left; display: grid; gap: 4px; max-width: 420px; }
.capa--amenidades .galeria__foto figcaption b { font-size: 16px; }
.plano-grande { position: absolute; top: 90px; bottom: 40px; left: calc(var(--panel-w) + var(--hud-x) * 2 + 20px); right: calc(var(--tabs-w) + var(--hud-x) * 2 + 40px); display: grid; place-items: center; }
.ficha-cerrada .plano-grande { left: 60px; }
.plano-grande__caja { width: 100%; aspect-ratio: 860 / 600; max-height: 100%; }
.plano-grande__caja svg { width: 100%; height: 100%; }
.plano-grande__pie { margin: 0; font-size: 12px; color: var(--c-tinta-2); align-self: start; }
.plano-grande--img { display: flex; align-items: center; justify-content: center; }
.plano-grande--img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-foto); box-shadow: var(--sombra); }
.comparar { position: absolute; top: 90px; bottom: 40px; left: calc(var(--panel-w) + var(--hud-x) * 2 + 20px); right: calc(var(--tabs-w) + var(--hud-x) * 2 + 40px); overflow: auto; display: grid; align-content: center; }
.ficha-cerrada .comparar { left: 60px; }
.comparar table { width: 100%; border-collapse: collapse; background: var(--c-panel); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--sombra); font-size: 13.5px; }
.comparar th, .comparar td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-linea); white-space: nowrap; }
.comparar thead th { font-size: 12px; font-weight: 600; color: var(--c-tinta-2); }
.comparar tbody tr:last-child > * { border-bottom: 0; }
.comparar tr.actual { background: var(--c-acento-suave); }
.comparar th button { font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-linea); text-underline-offset: 3px; }
.vacio { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 24px 24px calc(var(--panel-w) + 40px); }
.vacio__caja { max-width: 380px; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 28px; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra); }
.vacio__caja .ic { color: var(--c-icono, var(--c-acento)); }
.vacio__caja p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-tinta-2); }

.minimapa { position: absolute; z-index: 14; right: var(--hud-x); bottom: var(--hud-x); width: 210px; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra); overflow: hidden; }
.minimapa:empty { display: none; }
#app:not([data-vista="ficha"]) .minimapa { display: none; }
.minimapa__caja { aspect-ratio: 1.45; padding: 8px; background: var(--c-panel-2); }
.minimapa__caja svg { width: 100%; height: 100%; }
.minimapa__t { display: block; padding: 7px 10px; font-size: 11.5px; font-weight: 600; text-align: center; }
.svg-plano--mini .etiqueta { display: none; }

/* --------------------------------------------------------------------- tour */
.capa--tour { background: var(--c-tour, #1d1a1f); }
.tour-carga { position: absolute; inset: 0; background: var(--c-tour, #1d1a1f); transition: opacity 600ms ease; }
.capa--tour.listo .tour-carga { opacity: 0; pointer-events: none; }
.tour-carga__tira { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tira-h, 108px); background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 118px, transparent 118px 124px); }
.pista { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--tira-h, 108px) + 28px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); pointer-events: none; transition: opacity 600ms ease; white-space: nowrap; }
.pista .ic { font-size: 26px; }
.pista.fuera { opacity: 0; }
/* Recorrido panorámico de un edificio: la nota de que los costados son una ampliación con IA.
   Siempre visible (no se va con la pista), chica y arriba al centro: abajo tapaba las flechas,
   que van sobre el piso. */
.tour-nota { position: absolute; z-index: 3; left: 50%; top: calc(var(--hud-top, 20px) + 6px); transform: translateX(-50%); width: max-content; max-width: min(460px, max(240px, calc(100% - 700px))); margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff; font-size: 11.5px; line-height: 1.35; text-align: center; pointer-events: none; }
.tour-nota[hidden] { display: none; }
/* Tablet (761–1023 px, iPad vertical incluido): arriba al centro no entra entre el chip y los
   controles, así que baja a la fila de abajo del chip; en la ficha, entre el panel y las pestañas. */
@media (min-width: 761px) and (max-width: 1023px) {
  .tour-nota { top: calc(var(--hud-top) + var(--ctrl-h) + 44px); left: var(--hud-x); right: var(--hud-x); transform: none; width: auto; max-width: none; border-radius: 12px; }
  #app[data-tab="tour"] .tour-nota { left: var(--hud-x); right: calc(var(--tabs-w) + var(--hud-x) * 2 + 24px); }
  #app[data-tab="tour"]:not(.ficha-cerrada) .tour-nota { left: calc(var(--panel-w) + var(--hud-x) * 2); }
}
/* Con la ficha cerrada aparece la píldora "Ficha técnica" en la fila de arriba: hasta 1399 px la
   nota ya no entra al centro de esa fila y baja, entre el borde y las pestañas. */
@media (min-width: 761px) and (max-width: 1399px) {
  #app.ficha-cerrada[data-tab="tour"] .tour-nota { top: calc(var(--hud-top) + var(--ctrl-h) + 44px); left: var(--hud-x); right: calc(var(--tabs-w) + var(--hud-x) * 2 + 24px); transform: none; width: auto; max-width: none; border-radius: 12px; }
}
.tira { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; transition: transform var(--dur) var(--ease); }
.tira.cerrada { transform: translateY(calc(100% - 44px)); }
.tira__barra { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; position: relative; }
.tira__chev { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgba(0,0,0,.35); }
.tira.cerrada .tira__chev .ic { transform: rotate(180deg); }
.pildora--tour { position: absolute; right: var(--hud-x); height: 34px; font-size: 12px; }
.tira__lista { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--c-tira, rgba(12,12,14,.72)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); height: 64px; }
.tira__item { position: relative; flex: none; width: 124px; height: 64px; overflow: hidden; opacity: .78; transition: opacity var(--dur-rapida) ease; }
.tira__item img { width: 100%; height: 100%; object-fit: cover; }
.tira__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tira__item:hover, .tira__item.on { opacity: 1; }
.tira__item.on { box-shadow: inset 0 0 0 2px var(--c-tira-on, #fff); }
.tira__item.on img { outline: 0; }
.fl-wrap { width: 0 !important; height: 0 !important; overflow: visible !important; }
.fl { position: absolute; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -50%); cursor: pointer; }
.fl__chev { width: 58px; height: 34px; transform: perspective(160px) rotateX(52deg); position: relative; }
.fl__chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -8px 0 0 -15px; border-left: 5px solid #fff; border-top: 5px solid #fff; transform: rotate(45deg); border-radius: 3px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.fl__txt { color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.7); transform: perspective(200px) rotateX(38deg); }
.fl:hover .fl__chev::before { border-color: var(--c-acento); }

/* --------------------------------------------------------------- contacto */
.contacto__fondo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.contacto { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); overflow-y: auto; padding: 88px 28px 28px; background: var(--c-panel); color: var(--c-tinta); box-shadow: var(--sombra); display: grid; align-content: start; gap: 16px; }
.contacto h2 { margin: 0; font-size: 26px; color: var(--c-acento-texto, var(--c-acento)); }
.contacto h3 { margin: 12px 0 0; font-size: 16px; }
.contacto__pie { font-size: 13px; color: var(--c-tinta-2); line-height: 1.5; }

/* -------------------------------------------------------------------- menú */
.velo { position: absolute; inset: 0; z-index: 40; background: var(--c-velo, rgba(10,10,12,.18)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.menu-on .velo, .modal-on .velo { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu { position: absolute; z-index: 45; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); display: flex; flex-direction: column; padding: 26px 24px 22px; overflow-y: auto; background: var(--c-panel); color: var(--c-tinta);
  border-radius: 0 var(--r-panel) var(--r-panel) 0; box-shadow: var(--sombra); transform: translateX(-105%); transition: transform var(--dur-lenta) var(--ease); }
.menu-on .menu { transform: none; }
.menu__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.menu__marca { display: flex; align-items: center; gap: 12px; }
.menu__logo { width: 170px; height: auto; }
.menu__proy { margin: 22px 0 4px; font-size: 13px; font-weight: 600; color: var(--c-acento-texto, var(--c-acento)); }
.menu__lugar { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--c-tinta-2); }
.menu__lugar .ic { font-size: 16px; color: var(--c-icono, var(--c-acento)); }
.menu__lista { list-style: none; margin: 26px -24px 0; padding: 0; }
.menu__lista button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 24px; font-size: 14.5px; color: var(--c-tinta-2); text-align: left; border-left: 3px solid transparent; transition: background var(--dur-rapida) ease; }
.menu__lista button .ic { color: var(--c-icono, var(--c-acento)); }
.menu__lista button:hover, .menu__lista button.on { background: var(--c-acento-suave); }
.menu__lista button.on { border-left-color: var(--c-acento); color: var(--c-acento-texto, var(--c-acento)); font-weight: 600; }
.menu__lista em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--c-tinta-2); border: 1px solid var(--c-linea); border-radius: var(--r-ctrl); padding: 2px 8px; }
.menu__ajustes { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin: auto 0 0; padding-top: 22px; font-size: 12px; color: var(--c-tinta-2); }
.menu__ajustes .seg { justify-self: start; }
.menu .seg { background: var(--c-panel-2); box-shadow: none; }
.menu .seg button { color: var(--c-tinta-2); }
.menu .seg button[aria-pressed="true"] { background: var(--c-acento); color: var(--c-acento-tinta); }
.menu__pie { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-linea); }
.menu__pie .circ { color: var(--c-icono, var(--c-acento)); width: 38px; height: 38px; text-decoration: none; }
.menu__firma { margin-left: auto; font-size: 11.5px; color: var(--c-tinta-2); text-decoration: none; }

/* ------------------------------------------------------------------ modal */
.modal { position: absolute; z-index: 48; inset: 0; display: grid; place-items: center; padding: 20px; pointer-events: none; visibility: hidden; }
.modal-on .modal { visibility: visible; }
.modal__caja { pointer-events: auto; width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 22px 26px 24px; background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra-grande, var(--sombra));
  opacity: 0; transform: translateX(60px); transition: opacity var(--dur) var(--ease), transform var(--dur-lenta) var(--ease); display: grid; gap: 12px; }
.modal-on .modal__caja { opacity: 1; transform: none; }
.modal--qr .modal__caja { width: min(320px, 100%); justify-items: stretch; }
.modal__cab { display: flex; justify-content: space-between; align-items: center; }
.modal__logo { width: 110px; height: auto; }
.modal__t { margin: 6px 0 0; font-size: 20px; }
.modal__sub { margin: 0; font-size: 13px; color: var(--c-tinta-2); }
.qr { width: 100%; height: auto; border-radius: 8px; image-rendering: pixelated; background: #fff; padding: 6px; }
.form { display: grid; gap: 14px; margin-top: 4px; }
.campo { display: grid; gap: 2px; }
.campo span { font-size: 12px; color: var(--c-tinta-2); }
.campo input, .campo textarea { width: 100%; border: 0; border-bottom: 1.5px solid var(--c-linea-fuerte, var(--c-linea)); background: transparent; padding: 7px 0; font-size: 15px; outline: none; resize: none; border-radius: 0; }
.campo input:focus, .campo textarea:focus { border-bottom-color: var(--c-acento); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--c-tinta-2); }
.check a { color: var(--c-acento-texto, var(--c-acento)); text-underline-offset: 2px; }
.check input { accent-color: var(--c-acento); width: 18px; height: 18px; margin: 0; flex: none; }
.form__error { margin: 0; min-height: 0; font-size: 12.5px; color: var(--c-error, var(--c-no)); font-weight: 600; }
.form__error:empty { display: none; }

/* ----------------------- contacto, CTA de Nuva y QR de la vista (compartir.js) */
.campo select { width: 100%; border: 0; border-bottom: 1.5px solid var(--c-linea-fuerte, var(--c-linea)); background: transparent; padding: 7px 22px 7px 0; font: inherit; font-size: 15px; color: var(--c-tinta); outline: none; border-radius: 0; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-tinta-2) 50%), linear-gradient(135deg, var(--c-tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo select:focus { border-bottom-color: var(--c-acento); }
.campo select:invalid, .campo select option[disabled] { color: var(--c-tinta-2); }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { box-shadow: 0 2px 0 0 var(--c-foco, var(--c-acento)); }
.campo__error { font-size: 12px; line-height: 1.35; color: var(--c-error, var(--c-no)); font-weight: 600; }
.campo__error:empty { display: none; }
.con-error input, .con-error textarea, .con-error select { border-bottom-color: var(--c-error, var(--c-no)); }
.check-caja { display: grid; gap: 4px; }
.con-error .check input { outline: 2px solid var(--c-error, var(--c-no)); outline-offset: 1px; }
.form__nota { margin-top: -6px; }
.form__ok { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--c-tinta); }
.form__ok:empty { display: none; }
.form__ok a { color: var(--c-acento-texto, var(--c-acento)); font-weight: 600; text-underline-offset: 2px; }
.form__sobre { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 6px 7px 12px; border-radius: var(--r-ctrl); background: var(--c-acento-suave); font-size: 12.5px; color: var(--c-tinta-2); }
.form__sobre b { color: var(--c-tinta); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form__quitar { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--c-tinta-2); }
.form__quitar:hover { background: var(--c-panel-2); color: var(--c-tinta); }
.form__quitar .ic { font-size: 17px; }
/* El CTA de Nuva: una línea discreta, no un botón que compita con el de la propiedad. */
.cta-nuva { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--c-tinta-2); text-decoration: none; }
.cta-nuva span:not(.ic) { text-decoration: underline; text-decoration-color: var(--c-linea-fuerte, var(--c-linea)); text-underline-offset: 3px; }
.cta-nuva .ic { font-size: 15px; color: var(--c-icono, var(--c-acento)); transition: transform var(--dur-rapida, .15s) ease; }
.cta-nuva:hover { color: var(--c-tinta); }
.cta-nuva:hover .ic { transform: translateX(2px); }
.cta-nuva--menu { margin-top: 18px; }
.cta-nuva--menu + .menu__pie { margin-top: 10px; }
.cta-nuva--contacto { padding-top: 14px; border-top: 1px solid var(--c-linea); }
.qr-cuerpo { display: grid; gap: 12px; }
.qr--cargando { aspect-ratio: 1; display: grid; place-items: center; font-size: 12.5px; color: var(--c-tinta-2); }
.qr-acciones { display: grid; gap: 8px; }
.qr-acciones [aria-disabled="true"] { opacity: .5; cursor: progress; }
.qr-error { margin: 0; padding: 14px; border-radius: 8px; background: var(--c-acento-suave); font-size: 13px; line-height: 1.45; color: var(--c-tinta); }
.ficha [data-pdf][aria-busy="true"] { cursor: progress; opacity: .6; }

/* -------------------------------------------------------- cortina y aviso */
.cortina { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: var(--c-cortina, rgba(255,255,255,.2)); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); transition: opacity var(--cortina-ms, 320ms) var(--ease); }
.cortina.on { opacity: 1; }
.aviso { position: absolute; z-index: 70; left: 50%; bottom: 28px; transform: translate(-50%, 20px); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; font-size: 13px; line-height: 1.45;
  background: var(--c-oscuro); color: var(--c-oscuro-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1180px) and (min-width: 761px) {
  :root { --panel-w: 330px; --tabs-w: 150px; }
  .plano-caja { width: min(calc(100vw - 260px), calc((100dvh - 190px) * var(--ar))); }
}

/* ------------------------------------------------------------------ móvil */
@media (max-width: 760px) {
  :root { --hud-top: 12px; --hud-x: 12px; --ctrl-h: 38px; --circ: 38px; --tira-h: 92px; }
  .portada__arriba { flex-wrap: wrap; }
  .portada__centro { padding: 12vh 20px calc(25dvh - var(--entrar-h, 44px) / 2); }
  .portada .marca { align-self: start; margin-bottom: 0; }
  .portada__velo::after { background:
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, var(--velo-texto, .38)) 58%, rgba(0, 0, 0, calc(var(--velo-texto, .38) + .12)) 82%, rgba(0, 0, 0, .2) 100%); }
  #app[data-tipo="edificio"] .portada__velo::before { background: radial-gradient(ellipse 90% 34% at 50% 66%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 100%); }
  .hud--der .seg--lang, .pildora--ctx span:not(.ic), .seg--dn span:not(.ic), #btn-full { display: none; }
  .pildora--ctx { width: var(--circ); padding: 0; justify-content: center; }
  .btn-menu span:not(.ic) { display: none; } .btn-menu { width: var(--circ); padding: 0; justify-content: center; }
  .hud--der { max-width: 50vw; }
  .flecha { width: 40px; height: 40px; margin-top: -20px; }

  /* pisos: plano a lo ancho, selector abajo en fila */
  .plano-caja { top: 44%; width: min(calc(100vw - 20px), calc((100dvh - 260px) * var(--ar))); }
  #app[data-tipo="villa"] .plano-caja { width: calc(100vw - 16px); }
  .selector { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; display: flex; padding: 5px; border-radius: var(--r-ctrl); max-height: none; }
  .selector__lista { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
  .selector__lista button { min-width: 44px; padding: 8px 10px; }
  #app[data-tipo="villa"] .selector__lista button { min-width: 0; flex: 1; }
  #app[data-tipo="villa"] .selector__lista li { flex: 1; }
  .selector__flecha, .selector__riel { display: none; }
  .leyenda { bottom: calc(70px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .leyenda__fila { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 2px; }
  .leyenda__fila em { flex-basis: 100%; text-align: center; border: 0; padding: 0; margin: 0; }
  .pin { font-size: 11px; padding: 3px 7px 3px 6px; gap: 4px; }

  /* vista previa y ficha: hojas inferiores */
  .preview { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 78dvh; border-radius: var(--r-panel) var(--r-panel) 0 0; --entra-preview: translateY(40px);
    padding-bottom: env(safe-area-inset-bottom); }
  .carrusel--preview { aspect-ratio: 16 / 8; }
  .preview .filas .fila:nth-child(n+3) { display: none; }
  .ficha { left: 0; right: 0; bottom: 0; top: 46dvh; width: auto; border-radius: var(--r-panel) var(--r-panel) 0 0; transform: translateY(105%); }
  #app[data-tab="tour"] .ficha { bottom: 0; }
  .ficha .carrusel--ficha { display: none; }
  .ficha__scroll > .x { top: 14px; right: 16px; }
  .ficha .titulo-fila { padding-right: 44px; }
  .tabs { right: 0; left: 0; top: calc(46dvh - 54px); padding: 0 12px; }
  .ficha-cerrada .tabs { top: auto; bottom: calc(14px + var(--tira-h) + env(safe-area-inset-bottom)); }
  #app:not([data-tab="tour"]).ficha-cerrada .tabs { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .tabs__chev { display: none; }
  .tabs__lista { display: flex; width: auto; overflow-x: auto; scrollbar-width: none; gap: 6px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 28px; }
  .tabs__lista button { height: 36px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
  .tabs-cerradas .tabs__lista { transform: none; opacity: 1; pointer-events: auto; }
  .etapa .galeria, #app[data-vista="ficha"] .etapa > * { bottom: 54dvh; }
  .ficha-cerrada .etapa .galeria, #app[data-vista="ficha"].ficha-cerrada .etapa > * { bottom: 0; }
  #app[data-vista="ficha"] .etapa .flecha--izq { left: 12px; } #app[data-vista="ficha"] .etapa .flecha--der { right: 12px; }
  #app[data-vista="ficha"] .etapa .flecha { top: 23dvh; }
  .galeria__foto figcaption { bottom: 64px; font-size: 12px; }
  .plano-grande, .comparar { left: 12px !important; right: 12px; top: 100px; bottom: 60px; }
  #app[data-vista="ficha"]:not(.ficha-cerrada) .etapa > .plano-grande, #app[data-vista="ficha"]:not(.ficha-cerrada) .etapa > .comparar { bottom: calc(54dvh + 58px); }
  .comparar { align-content: start; }
  .comparar th, .comparar td { padding: 9px 10px; font-size: 12.5px; }
  .vacio { padding: 64px 16px 70px; }
  .minimapa { display: none !important; }
  .capa--amenidades .galeria__foto figcaption { left: 12px; right: 12px; bottom: 24px; max-width: none; }
  .tira__item { width: 96px; height: 52px; } .tira__lista { height: 52px; }
  .pildora--tour span:not(.ic) { display: none; } .pildora--tour { width: 34px; padding: 0; justify-content: center; }
  .pista { font-size: 11px; }
  .tour-nota { left: 12px; right: 12px; top: calc(var(--hud-top, 12px) + 100px); transform: none; width: auto; max-width: none; font-size: 10.5px; border-radius: 10px; }
  /* Tour dentro de la ficha con la ficha cerrada: las pestañas van sobre la tira; nota y pista, encima. */
  #app.ficha-cerrada[data-tab="tour"] .pista { bottom: calc(var(--tira-h, 92px) + 64px); }
  .contacto { top: 30dvh; width: 100vw; padding: 24px 20px; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .modal { align-items: end; padding: 0; }
  .modal__caja { width: 100%; border-radius: var(--r-panel) var(--r-panel) 0 0; transform: translateY(40px); max-height: 92dvh; }
  .modal--qr .modal__caja { width: 100%; }
  .aviso { bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .chip-escena, .seg, .velo, .cortina, .tira__lista { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ------------------------------------------------------------- intro en dron */
/* Video a pantalla completa, casi sin interfaz: solo "Omitir intro" abajo al centro, como en la
   referencia (key 05, checklist #4). Al terminar, la capa se funde sobre el exterior, que ya
   está debajo (sin pantalla de carga, checklist #5). */
.intro { position: absolute; inset: 0; background: #000; overflow: hidden; }
.intro__poster, .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__saltar { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px 0 12px; border-radius: var(--r-ctrl, 999px);
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25); text-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: background var(--dur-rapida) ease; }
.intro__saltar .ic { font-size: 18px; }
.intro__saltar:hover { background: rgba(255, 255, 255, .34); }
#app[data-vista="intro"] .hud { opacity: 0; visibility: hidden; pointer-events: none; }
#app[data-vista="intro"] .capa--vista { overflow: hidden; }
#app[data-desde="intro"] .capa--exterior { transition: none; }
/* Fundido corto: el último cuadro del vuelo y el exterior no calzan al píxel, y un cruce largo
   deja ver las dos imágenes a la vez (doble imagen). */
#app[data-desde="intro"]:not(.vista-registrada) .capa--vista { transition: opacity 320ms ease-out, visibility 0s linear 320ms; }
@media (prefers-reduced-transparency: reduce) { .intro__saltar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .6); } }

/* ------------------------------------------- vistas registradas y modelos */
/* Una vista que trae su propio archivo (ubicacion.js, unidades.js…) se dibuja en .capa--vista:
   el motor le pone #app.vista-registrada mientras está activa. */
.capa--vista { overflow: auto; }
#app.vista-registrada .capa--vista { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Edificio: cada modelo tiene su color (--c-modelo-a, -b, -c, -ph en la piel o en tema.css). */
.leyenda__modelos { gap: 14px; }
.modelo-chip { display: inline-flex; align-items: center; gap: 6px; }
.modelo-chip__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--c-modelo, var(--c-acento)); flex: none; }
.pin__modelo { width: 3px; height: 12px; border-radius: 2px; background: var(--c-modelo, var(--c-acento)); flex: none; }

/* ------------------------------------------------------------------ ubicación */
/* Mapa a pantalla completa (key 30–33): pin de la propiedad en el acento, destinos en círculos
   blancos con su rótulo, la ruta en el acento y abajo la tarjeta "12 min · 9,8 km" con los modos.
   Los colores del mapa salen de --mapa-* (piel o tema.css). Sin mapa, la lista de destinos. */
.ubic { position: absolute; inset: 0; overflow: hidden; background: var(--mapa-tierra, var(--c-etapa)); }
.ubic__mapa { position: absolute; inset: 0; }
.ubic[data-pestana="alrededores"] .ubic__mapa, .ubic--sinmapa .ubic__mapa { visibility: hidden; }
.ubic__cab { position: absolute; z-index: 3; left: var(--hud-x); top: calc(var(--hud-top) + var(--ctrl-h) + 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ubic__pie { position: absolute; z-index: 3; left: 50%; bottom: max(var(--hud-x), env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(620px, calc(100% - 2 * var(--hud-x))); }
.ubic[data-pestana="alrededores"] .ubic__pie, .ubic[data-pestana="alrededores"] .ubic__lista { display: none; }
.ubic__panel { background: var(--c-panel); color: var(--c-tinta); border-radius: var(--r-panel); box-shadow: var(--sombra); padding: 14px 16px;
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.ubic__rotulo { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; color: var(--c-tinta-2); }
.ubic__destinos { overflow: hidden; }
.ubic__destinos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ubic__dest { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 6px; border-radius: var(--r-ctrl); background: var(--c-panel-2);
  border: 1px solid var(--c-linea); color: var(--c-tinta); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease); }
.ubic__dest:hover { background: var(--c-acento-suave); border-color: var(--c-linea-fuerte); }
.ubic__ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-acento-suave); color: var(--c-icono); }
.ubic__ic .ic { font-size: 17px; }
.ubic__t { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.ubic__t .ic { font-size: 15px; }
.ubic__origen { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-tinta-2); }
.ubic__origen .ic { font-size: 15px; }
.ubic__fila { display: flex; align-items: center; gap: 10px; }
.ubic__dest-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ubic__dest-t b { font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: .01em; }
.ubic__dest-t span { font-size: 12px; color: var(--c-tinta-2); }
.ubic__x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--c-tinta); }
.ubic__tiempo { margin: 10px 0 12px; font-family: var(--f-display); font-weight: 200; font-size: 30px; line-height: 1.1; color: var(--c-acento-texto); font-variant-numeric: tabular-nums; }
.ubic__tiempo small { font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--c-tinta-2); }
.ubic__modos { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; box-shadow: none; border: 1px solid var(--c-linea); }
.ubic__modos button { justify-content: center; }
.seg button[disabled] { opacity: .38; cursor: not-allowed; }
/* pines del mapa (los ubica MapLibre: el elemento es el círculo, el rótulo cuelga al lado) */
.upin { display: block; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.upin__c { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--c-tinta-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06); transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease); }
.upin__c .ic { font-size: 17px; }
.upin__t { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); width: max-content; padding: 3px 8px; white-space: nowrap; pointer-events: none;
  font-size: 11.5px; font-weight: 600; color: var(--c-tinta); background: rgba(255, 255, 255, .94); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.upin--izq .upin__t { left: auto; right: calc(100% + 6px); }
.upin--prop.upin--borde-der .upin__t { left: auto; right: -8px; transform: none; }
.upin--prop.upin--borde-izq .upin__t { left: -8px; transform: none; }
.ubic--lejos .upin:not(.on):not(.upin--prop) .upin__t { display: none; }
.upin:hover .upin__c { color: var(--c-acento); }
.upin.on { z-index: 2; }
.upin.on .upin__c { background: var(--c-acento); color: var(--c-acento-tinta); box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0, 0, 0, .35); }
.upin--prop { z-index: 3; width: 38px; height: 38px; cursor: default; }
.upin--prop .upin__c { background: var(--c-acento); color: var(--c-acento-tinta);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px color-mix(in srgb, var(--c-acento) 28%, transparent), 0 4px 16px rgba(0, 0, 0, .35); }
.upin--prop .upin__c .ic { font-size: 20px; }
.upin--prop .upin__t { left: 50%; top: auto; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 5px 10px; background: var(--c-oscuro); color: var(--c-oscuro-tinta);
  font-family: var(--f-display); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
/* Controles del mapa (Mapa / Satélite y 3D): arriba a la derecha, a la altura del encabezado */
.ubic__ctrl { position: absolute; z-index: 3; right: var(--hud-x); top: calc(var(--hud-top) + var(--ctrl-h) + 10px); display: flex; align-items: center; gap: 8px; }
.ubic__ctrl[hidden], .ubic[data-pestana="alrededores"] .ubic__ctrl { display: none; }
.ubic__3d { width: var(--ctrl-h); height: var(--ctrl-h); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ubic__3d[aria-pressed="true"] { background: var(--c-seg-on); color: var(--c-seg-on-tinta); }
/* Satélite: la foto oscura mientras cargan los mosaicos, y la ruta con un borde blanco que ya
   la separa de la foto (ubicacion.js) */
.ubic .maplibregl-ctrl-attrib { font-family: var(--f-ui); font-size: 11px; }
.ubic .maplibregl-ctrl-bottom-right { right: calc(var(--hud-x) - 10px); bottom: calc(var(--hud-x) - 10px); }
.ubic .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { background: var(--c-panel); border-radius: 8px; padding: 2px 8px; color: var(--c-tinta-2); }
.ubic .maplibregl-ctrl-attrib a { color: inherit; }
/* Con Esri la atribución es larga: a la derecha de la tarjeta, en las líneas que hagan falta */
.ubic .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-width: calc((100vw - 620px) / 2 - var(--hud-x) - 16px); text-align: right; }
/* Hasta 1100 px no queda lugar al lado de la tarjeta: la atribución va chica, justo encima */
@media (max-width: 1100px) {
  .ubic .maplibregl-ctrl-bottom-right { left: var(--hud-x); right: var(--hud-x); bottom: calc(max(var(--hud-x), env(safe-area-inset-bottom)) + var(--ubic-pie-h, 0px) + 6px); display: flex; justify-content: flex-end; }
  .ubic .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
  .ubic .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-width: none; font-size: 9.5px; line-height: 1.35; padding: 2px 7px; }
}
/* Con el mapa lejos (un destino lejano en pantalla) los destinos cercanos quedan casi
   encima de la propiedad y el nombre centrado arriba del pin tapaba a un vecino (al noroeste): a
   esa escala el nombre va a la derecha, hacia el interior, donde no hay destinos. */
.ubic--lejos .upin--prop:not(.upin--borde-der) .upin__t { left: calc(100% + 8px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
/* sin mapa: la lista de destinos con los tiempos de cada modo */
.ubic--sinmapa { background: radial-gradient(ellipse at 30% 0%, var(--c-acento-suave), transparent 60%), var(--c-etapa); }
.ubic__lista { position: absolute; z-index: 2; inset: calc(var(--hud-top) + var(--ctrl-h) + 58px) var(--hud-x) var(--hud-x); display: grid; justify-items: center; align-items: start; overflow: auto; overscroll-behavior: contain; }
.ubic__lista:empty { display: none; }
.ubic__sinmapa { width: min(560px, 100%); padding: 20px 22px; }
.ubic__h { margin: 0 0 6px; font-family: var(--f-display); font-weight: 200; font-size: 26px; letter-spacing: .02em; }
.ubic__nota { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--c-tinta-2); }
.ubic__filas { list-style: none; margin: 0; padding: 0; }
.ubic__filas > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-linea); }
.ubic__filas b { font-size: 14px; font-weight: 600; }
.ubic__modos-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.ubic__modos-lista li { display: inline-flex; align-items: center; gap: 4px; }
.ubic__modos-lista .ic { font-size: 16px; color: var(--c-icono); }
/* Alrededores: el mapa del brochure con los puntos numerados encima y la leyenda por categoría */
.alr { position: absolute; inset: 0; z-index: 2; display: none; grid-template-rows: auto minmax(0, 1fr); gap: 12px; background: var(--c-etapa);
  padding: calc(var(--hud-top) + var(--ctrl-h) + 60px) 0 var(--hud-x); }
.ubic[data-pestana="alrededores"] .alr { display: grid; }
.alr__lienzo { overflow-x: auto; overflow-y: hidden; padding: 0 var(--hud-x); scrollbar-width: none; overscroll-behavior-x: contain; }
.alr__lienzo::-webkit-scrollbar { display: none; }
.alr__mapa { position: relative; width: min(100%, calc(56dvh * var(--ar, 2.9))); margin: 0 auto; overflow: hidden; border-radius: var(--r-panel); box-shadow: var(--sombra); background: #0c4a50; }
.alr__mapa img { position: absolute; left: 0; top: 0; width: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
.alr__pin { position: absolute; z-index: 1; width: 22px; height: 22px; padding: 0; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  background: var(--c-acento); color: var(--c-acento-tinta); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: 10.5px; font-weight: 700; line-height: 1;
  transition: transform var(--dur-rapida) var(--ease); }
.alr__pin:hover, .alr__pin.on { z-index: 3; transform: translate(-50%, -50%) scale(1.25); }
.alr__pin.on { background: var(--c-tinta); color: #fff; }
.alr__rotulo { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) scale(.8); padding: 4px 9px; white-space: nowrap; font-style: normal;
  font-size: 12px; font-weight: 600; color: var(--c-tinta); background: rgba(255, 255, 255, .96); border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); pointer-events: none; }
.alr__pin:hover .alr__rotulo, .alr__pin.on .alr__rotulo { display: block; }
.alr__leyenda { margin: 0 var(--hud-x); min-height: 0; overflow: auto; overscroll-behavior: contain; }
.alr__aprox { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--c-linea); background: var(--c-panel-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.alr__grupos { columns: 4 200px; column-gap: 22px; }
.alr__grupo { break-inside: avoid; margin-bottom: 12px; }
.alr__grupo h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; color: var(--c-rotulo, var(--c-tinta-2)); }
.alr__grupo h3 .ic { font-size: 16px; color: var(--c-icono); }
.alr__grupo ul { list-style: none; margin: 0; padding: 0; }
.alr__grupo button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--c-tinta); }
.alr__grupo button:hover { background: var(--c-panel-2); }
.alr__grupo button b { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-acento-suave); color: var(--c-acento-texto); font-size: 10.5px; }
.alr__grupo button.on { background: var(--c-acento-suave); }
.alr__grupo button.on b { background: var(--c-acento); color: var(--c-acento-tinta); }
@media (max-width: 760px) {
  /* En el celular la fila del encabezado ya está llena (Ubicación, Mapa / Alrededores): los
     controles bajan una fila y se apilan, solo íconos. */
  .ubic__ctrl { top: calc(var(--hud-top) + 2 * var(--ctrl-h) + 20px); flex-direction: column; align-items: flex-end; }
  .ubic__capas { flex-direction: column; }
  .ubic__capas button { width: calc(var(--ctrl-h) - 6px); padding: 0; justify-content: center; }
  .ubic__capas button span:not(.ic) { display: none; }
  .ubic__destinos ul { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ubic__destinos ul::-webkit-scrollbar { display: none; }
  .ubic__tiempo { font-size: 26px; }
  .alr__mapa { width: 1100px; }
  .alr__grupos { columns: 2 140px; column-gap: 14px; }
}

/* ------------------------------------------------------- unidades y suites */
/* Página de contenido fuera del visor (key 35–37): tipologías arriba, la lista como un portal
   inmobiliario con los filtros al costado (en el celular, en una hoja) y la barra "Comparar".
   Las suites de una villa usan las mismas tarjetas, agrupadas por nivel. */
.uds { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; color: var(--c-tinta);
  background: radial-gradient(ellipse 70% 50% at 0% 0%, var(--c-acento-suave), transparent 70%), var(--c-etapa);
  padding: calc(var(--hud-top) + var(--ctrl-h) + 34px) 36px 48px;
  /* lo que sube por debajo del HUD se funde, en vez de cruzarse con los botones */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hud-top) + var(--ctrl-h) + 18px));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hud-top) + var(--ctrl-h) + 18px)); }
.uds.con-cmp { padding-bottom: 120px; }
.uds__marco { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 30px; align-items: start; }
.uds__marco--solo { display: block; max-width: 1180px; }
.uds__lado { position: sticky; top: 0; max-height: calc(100dvh - var(--hud-top) - var(--ctrl-h) - 60px); overflow-y: auto; scrollbar-width: none; border-radius: var(--r-panel); }
.uds__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.uds__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.uds__h { margin: 0; font-family: var(--f-display); font-weight: 200; font-size: 30px; line-height: 1.1; letter-spacing: .01em; color: var(--c-acento-texto, var(--c-acento)); }
.uds__sub { margin: 6px 0 0; font-size: 13.5px; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.uds__h2 { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 300; font-size: 20px; letter-spacing: .02em; }
.uds__h2 small { font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-rotulo, var(--c-tinta-2)); }
.uds__fuente { margin: -8px 0 14px; font-size: 12px; color: var(--c-tinta-2); }
.uds__grupo + .uds__grupo { margin-top: 34px; }

/* tipologías */
.uds__tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.utipo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra);
  transition: box-shadow var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease); }
.utipo.on { box-shadow: 0 0 0 2px var(--c-modelo, var(--c-acento)), var(--sombra); }
.utipo__foto { position: relative; aspect-ratio: 16 / 10; background: var(--c-carrusel, var(--c-panel-2)); }
.utipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.utipo__foto .badge { position: absolute; left: 10px; top: 10px; box-shadow: var(--sombra-chica); }
.utipo__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-modelo, var(--c-acento)); }
.utipo--agotada .utipo__foto img { filter: grayscale(1) blur(1px); opacity: .7; }
.utipo__cuerpo { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; }
.utipo__t { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .01em; }
.utipo__t .modelo-chip__muestra { width: 12px; height: 12px; }
.utipo__datos { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--c-tinta-2); }
.utipo__datos span, .ucard__datos li, .ucard__piso, .ucard__vista { display: inline-flex; align-items: center; gap: 5px; }
.utipo__datos .ic, .ucard__datos .ic, .ucard__piso .ic, .ucard__vista .ic { font-size: 17px; color: var(--c-icono, var(--c-acento)); }
.utipo__desde { margin: 2px 0 4px; display: grid; font-family: var(--f-display); font-weight: 200; font-size: 24px; line-height: 1.1; color: var(--c-acento-texto, var(--c-acento)); font-variant-numeric: tabular-nums; }
.utipo__desde small { font-family: var(--f-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-rotulo, var(--c-tinta-2)); }
.utipo__btn { width: 100%; }

/* herramientas de la lista */
.uds__herr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uds__buscar, .uds__orden { position: relative; display: inline-flex; align-items: center; height: var(--ctrl-h); border-radius: var(--r-ctrl); background: var(--c-panel); box-shadow: var(--sombra-chica); color: var(--c-tinta-2); }
.uds__buscar .ic, .uds__orden .ic { position: absolute; left: 12px; font-size: 18px; pointer-events: none; }
.uds__buscar input { width: 210px; height: 100%; border: 0; background: transparent; outline: none; padding: 0 14px 0 38px; font-size: 13.5px; color: var(--c-tinta); border-radius: inherit; }
.uds__buscar input::placeholder { color: var(--c-tinta-2); opacity: .8; }
.uds__buscar:focus-within, .uds__orden:focus-within { box-shadow: 0 0 0 2px var(--c-foco, var(--c-acento)), var(--sombra-chica); }
.uds__orden select { height: 100%; border: 0; background: transparent; outline: none; appearance: none; -webkit-appearance: none; padding: 0 16px 0 38px; font-size: 13px; font-weight: 600; color: var(--c-tinta); cursor: pointer; border-radius: inherit; }
.uds__btn-filtros { display: none; }
.uds__btn-filtros b { font-weight: 700; color: var(--c-acento-texto, var(--c-acento)); }

/* tarjetas de unidad y de suite */
.uds__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.ucard { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra);
  transition: box-shadow var(--dur-rapida) var(--ease); }
.ucard--elegida { box-shadow: 0 0 0 2px var(--c-acento), var(--sombra); }
.ucard__foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-carrusel, var(--c-panel-2)); }
.ucard__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease); }
.ucard:hover .ucard__foto img { transform: scale(1.04); }
.ucard__foto .badge { position: absolute; left: 10px; top: 10px; box-shadow: var(--sombra-chica); }
.ucard__modelo { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-ctrl);
  background: var(--c-oscuro); color: var(--c-oscuro-tinta); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ucard__modelo::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c-modelo, var(--c-acento)); box-shadow: 0 0 0 1.5px var(--c-oscuro-tinta); }
.ucard--apagada .ucard__foto img { filter: grayscale(.9); opacity: .78; }
.ucard__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.ucard__id { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: .02em; line-height: 1.15; }
.ucard__id button { text-align: left; }
.ucard__id button:hover { color: var(--c-acento-texto, var(--c-acento)); }
.ucard__piso { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--c-acento-texto, var(--c-acento)); }
.ucard__datos { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--c-tinta-2);
  border-top: 1px solid var(--c-linea); border-bottom: 1px solid var(--c-linea); }
.ucard__datos--suite { display: grid; gap: 6px; }
.ucard__vista { margin: 0; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--c-tinta-2); }
.ucard__precio { margin: 0; font-family: var(--f-display); font-weight: 200; font-size: 26px; line-height: 1.1; color: var(--c-acento-texto, var(--c-acento)); font-variant-numeric: tabular-nums; }
.ucard--apagada .ucard__precio { color: var(--c-tinta-2); }
/* "Comparar" (con su ícono) es más largo que "Ver ficha": se lleva más ancho y nunca se corta */
.ucard__pie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px; margin-top: auto; padding-top: 4px; }
.ucard__pie .btn-sec { min-width: 0; gap: 4px; padding: 0 6px; font-size: 12.5px; letter-spacing: 0; overflow: hidden; }
.ucard__pie .btn-sec .ic { font-size: 16px; }
.ucard__cmp[aria-pressed="true"] { background: var(--c-acento-suave); border-color: var(--c-acento); color: var(--c-acento-texto, var(--c-acento)); }
.ucard--suite .ucard__pie { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.uds__vacio { grid-column: 1 / -1; display: grid; place-items: center; padding: 30px 0 50px; }
.uds__vacio .vacio__caja { max-width: 420px; }
.uds__vacio .vacio__caja .uds__vacio-t { font-family: var(--f-display); font-weight: 300; font-size: 19px; color: var(--c-tinta); }

/* filtros (al costado en escritorio, en la hoja del celular) */
.ufil { display: grid; gap: 18px; padding: 18px 18px 20px; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.ufil__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ufil__h { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 19px; letter-spacing: .02em; }
.ufil__grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.ufil__grupo legend { padding: 0; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--c-rotulo, var(--c-tinta-2)); }
.ufil__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ufil__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: var(--r-ctrl); border: 1px solid var(--c-linea-fuerte, var(--c-linea));
  font-size: 12.5px; font-weight: 600; color: var(--c-tinta-2); transition: background var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease); }
.ufil__chip:hover { background: var(--c-acento-suave); }
.ufil__chip[aria-pressed="true"] { background: var(--c-acento-suave); border-color: var(--c-modelo, var(--c-acento)); color: var(--c-tinta); box-shadow: inset 0 0 0 1px var(--c-modelo, var(--c-acento)); }
.ufil__rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ufil__rango label, .ufil__solo { display: grid; gap: 4px; font-size: 11.5px; color: var(--c-tinta-2); }
.ufil select { width: 100%; height: 40px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--c-linea-fuerte, var(--c-linea)); background-color: var(--c-panel-2);
  appearance: none; -webkit-appearance: none; font-size: 13.5px; font-weight: 500; color: var(--c-tinta); cursor: pointer; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ufil select:focus-visible { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 1px; }
.ufil__switch { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--c-panel-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ufil__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ufil__pista { position: relative; width: 36px; height: 22px; flex: none; border-radius: 999px; background: var(--c-linea-fuerte, var(--c-linea)); transition: background var(--dur-rapida) var(--ease); }
.ufil__pista::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur-rapida) var(--ease); }
.ufil__switch input:checked + .ufil__pista { background: var(--c-ok); }
.ufil__switch input:checked + .ufil__pista::after { transform: translateX(14px); }
.ufil__switch input:focus-visible + .ufil__pista { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 2px; }
.ufil__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--c-linea); }
.ufil__cuenta { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ufil__limpiar { font-size: 13px; font-weight: 600; color: var(--c-acento-texto, var(--c-acento)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-linea-fuerte, var(--c-linea)); }
.ufil__ver { margin-top: 2px; }

/* barra de comparar */
.ucmp { position: fixed; z-index: 5; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; pointer-events: none;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; background: var(--c-panel); border-radius: var(--r-ctrl); box-shadow: var(--sombra);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.ucmp.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.ucmp__t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ucmp__t .ic { color: var(--c-icono, var(--c-acento)); font-size: 19px; }
.ucmp__t b { font-variant-numeric: tabular-nums; color: var(--c-tinta-2); font-weight: 600; }
.ucmp__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ucmp__lista li { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; height: 32px; border-radius: var(--r-ctrl); background: var(--c-acento-suave); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ucmp__lista button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--c-tinta-2); }
.ucmp__lista button:hover { background: var(--c-panel); color: var(--c-tinta); }
.ucmp__lista .ic { font-size: 16px; }
.ucmp__pista { font-size: 12.5px; color: var(--c-tinta-2); white-space: nowrap; padding-right: 10px; }
.ucmp__ver { flex: none; }
/* con la barra de comparar abierta, los avisos salen por encima de ella */
#app[data-vista="unidades"]:has(.ucmp.on) .aviso { bottom: 92px; }
/* la barra es fija: al salir de la lista no se queda encima de la ficha mientras la capa se funde */
#app:not([data-vista="unidades"]) .ucmp { display: none; }

/* suites: fecha y resumen del día */
.uds__cab--suites { align-items: center; }
.uds__dia { display: grid; justify-items: end; gap: 8px; }
.uds__dia .fecha button[disabled] { opacity: .3; cursor: default; }
.uds__resumen { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uds__resumen .punto--no { margin-left: 8px; }
.uds__resumen em { font-style: normal; font-weight: 500; color: var(--c-tinta-2); margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--c-linea); }

/* comparador de la ficha (edificio): unidades lado a lado */
.comparar--lado { display: grid; align-content: center; gap: 8px; }
.cmp__caja { overflow: auto; max-height: 100%; border-radius: var(--r-panel); background: var(--c-panel); box-shadow: var(--sombra); overscroll-behavior: contain;
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.comparar--lado table.cmp { width: 100%; min-width: calc(120px + var(--cols, 3) * 150px); background: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; table-layout: fixed; }
.cmp th, .cmp td { white-space: normal; vertical-align: middle; }
.cmp tbody th { width: 128px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-rotulo, var(--c-tinta-2)); }
.cmp__esquina { width: 128px; }
.cmp thead th { padding: 12px 10px 10px; vertical-align: bottom; text-transform: none; letter-spacing: 0; }
.cmp__foto { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-foto); overflow: hidden; background: var(--c-carrusel, var(--c-panel-2)); margin-bottom: 8px; }
.cmp__foto img { width: 100%; height: 100%; object-fit: cover; }
.cmp__x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--c-panel); color: var(--c-tinta); box-shadow: var(--sombra-chica); }
.cmp__x .ic { font-size: 16px; }
.cmp__id { display: block; font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: .02em; color: var(--c-tinta); }
.cmp td.actual, .cmp th.actual { background: color-mix(in srgb, var(--c-acento-suave) 55%, transparent); }
.cmp__precio { font-family: var(--f-display); font-weight: 300; font-size: 18px; color: var(--c-acento-texto, var(--c-acento)); font-variant-numeric: tabular-nums; }
.cmp__nd { color: var(--c-tinta-2); }
.cmp__mas { vertical-align: middle !important; }
.cmp__mas button { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: var(--r-foto); border: 1.5px dashed var(--c-linea-fuerte, var(--c-linea));
  font-size: 12.5px; font-weight: 600; color: var(--c-acento-texto, var(--c-acento)); }
.cmp__mas button:hover { background: var(--c-acento-suave); }
.cmp__acciones td, .cmp__acciones th { border-bottom: 0; }
.cmp__acciones .btn-sec { width: 100%; }
.cmp__aqui { font-size: 12px; font-weight: 600; color: var(--c-tinta-2); }
.comparar--lado .nota { margin: 0; }
.cmp__fuera { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--r-panel); background: var(--c-panel); box-shadow: var(--sombra-chica);
  font-size: 12.5px; line-height: 1.45; color: var(--c-tinta); }
.cmp__fuera .ic { font-size: 18px; color: var(--c-icono, var(--c-acento)); }

@media (max-width: 1180px) and (min-width: 761px) {
  .uds { padding-left: 24px; padding-right: 24px; }
  .uds__marco { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  .uds { padding: calc(var(--hud-top) + var(--ctrl-h) + 22px) 12px 32px; }
  .uds.con-cmp { padding-bottom: 150px; }
  .uds__marco { display: block; }
  .uds__lado { display: none; }
  .uds__main { gap: 28px; }
  .uds__h { font-size: 26px; }
  .uds__cab { margin-bottom: 12px; }
  .uds__cab--lista > div:first-child { flex: 1 1 100%; }
  .uds__herr { flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto; }
  .uds__buscar { grid-column: 1 / -1; }
  .uds__buscar input { width: 100%; }
  .uds__orden select { max-width: 100%; }
  .uds__btn-filtros { display: inline-flex; justify-self: end; }
  /* tipologías: tira horizontal */
  .uds__tiras { display: flex; overflow-x: auto; gap: 12px; margin: 0 -12px; padding: 2px 12px 10px; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .uds__tiras::-webkit-scrollbar { display: none; }
  .utipo { flex: 0 0 min(72vw, 250px); scroll-snap-align: start; }
  /* unidades: tarjeta horizontal compacta */
  .uds__grilla { grid-template-columns: 1fr; gap: 12px; }
  .ucard { grid-template-rows: none; grid-template-columns: 118px minmax(0, 1fr); }
  .ucard__foto { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .ucard__foto .badge { left: 6px; top: 6px; font-size: 10.5px; padding: 3px 8px; }
  .ucard__modelo { left: 6px; right: 6px; bottom: 6px; justify-content: center; font-size: 10.5px; padding: 3px 6px; }
  .ucard__cuerpo { padding: 12px 12px 12px; gap: 6px; }
  .ucard__id { font-size: 17px; }
  .ucard__datos { padding: 6px 0; gap: 2px 10px; font-size: 12px; }
  .ucard__precio { font-size: 22px; }
  .ucard__pie .btn-sec { min-height: 38px; font-size: 12.5px; padding: 0 8px; }
  .ucard--suite .ucard__foto { min-height: 180px; }
  /* hoja de filtros */
  .uds-hoja { position: absolute; inset: 0; z-index: 48; visibility: hidden; pointer-events: none; }
  .uds-hoja.on { visibility: visible; pointer-events: auto; }
  .uds-hoja__velo { position: absolute; inset: 0; background: var(--c-velo, rgba(10, 10, 12, .18)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity var(--dur) var(--ease); }
  .uds-hoja.on .uds-hoja__velo { opacity: 1; }
  .uds-hoja__caja { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(105%); transition: transform var(--dur-lenta) var(--ease); }
  .uds-hoja.on .uds-hoja__caja { transform: none; }
  .ufil--hoja { border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--c-menu, var(--c-panel)); }
  .ufil--hoja .ufil__chip { min-height: 40px; }
  .uds-hoja-on .hud { visibility: hidden; }
  /* barra de comparar a lo ancho */
  .ucmp { left: 12px; right: 12px; transform: translateY(24px); max-width: none; flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 14px; border-radius: var(--r-panel); }
  .ucmp.on { transform: none; }
  #app[data-vista="unidades"]:has(.ucmp.on) .aviso { bottom: 170px; }
  .ucmp__lista { flex: 1 1 auto; }
  .ucmp__ver, .ucmp__pista { flex: 1 1 100%; }
  .ucmp__pista { text-align: center; padding: 4px 0; }
  /* suites */
  .uds__cab--suites { align-items: flex-start; }
  .uds__dia { justify-items: start; width: 100%; }
  .uds__dia .fecha { width: 100%; justify-content: space-between; }
  /* comparador de la ficha */
  .comparar--lado { align-content: start; }
  /* tres unidades entran en 366 px sin desplazarse de lado */
  .comparar--lado table.cmp { min-width: calc(82px + var(--cols, 3) * 94px); }
  /* el rótulo más largo ("DORMITORIOS") entra con aire antes del valor; si no, corta en guion */
  .cmp tbody th, .cmp__esquina { width: 82px; font-size: 8.5px; letter-spacing: .02em; hyphens: auto; -webkit-hyphens: auto; }
  .cmp tbody th { padding-right: 8px; }
  .cmp th, .cmp td { padding: 8px 6px; font-size: 11.5px; }
  .cmp thead th { padding: 8px 6px; }
  .cmp__foto { margin-bottom: 6px; }
  .cmp__x { width: 24px; height: 24px; right: 4px; top: 4px; }
  .cmp__id { font-size: 12px; letter-spacing: 0; }
  .cmp__precio { font-size: 14px; }
  .cmp .badge { font-size: 10.5px; padding: 3px 8px; }
  .cmp__acciones .btn-sec { min-height: 34px; font-size: 11.5px; padding: 0 6px; }
}

/* ----------------------------------------------------------- formas de pago */
/* Página de contenido como la de unidades (.uds da el fondo, el margen bajo el HUD y el fundido):
   a la izquierda la unidad y el tipo de comprador, a la derecha el desglose. En el celular, una
   columna. Montos siempre en cifras tabulares, para que se lean en columna. */
.btn-pagos { width: 100%; min-height: 42px; }
.pag__marco { max-width: 1120px; margin: 0 auto; }
.pag__cab { margin-bottom: 22px; }
.pag__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pag__panel { background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra); padding: 20px 22px 22px;
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.pag__elegir { position: sticky; top: 0; display: grid; gap: 10px; }
.pag__rotulo { margin: 4px 0 0; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--c-rotulo, var(--c-tinta-2)); }
.pag__select select { width: 100%; height: 46px; padding: 0 36px 0 14px; border-radius: 12px; border: 1px solid var(--c-linea-fuerte, var(--c-linea)); background-color: var(--c-panel-2);
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-tinta); cursor: pointer; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.pag__select select:focus-visible { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 1px; }
.pag__unidad { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 4px 0 8px; }
.pag__unidad:empty { display: none; }
.pag__foto { position: relative; min-height: 136px; border-radius: var(--r-foto); overflow: hidden; background: var(--c-carrusel, var(--c-panel-2)); }
.pag__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pag__foto .badge { position: absolute; left: 6px; top: 6px; font-size: 10.5px; padding: 3px 8px; box-shadow: var(--sombra-chica); }
.pag__datos { min-width: 0; display: grid; align-content: start; gap: 4px; }
.pag__datos p { margin: 0; }
.pag__id { font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: .02em; line-height: 1.15; }
.pag__modelo, .pag__meta { font-size: 12.5px; color: var(--c-tinta-2); }
.pag__precio { margin-top: 4px !important; font-family: var(--f-display); font-weight: 200; font-size: 26px; line-height: 1.1; color: var(--c-acento-texto, var(--c-acento)); font-variant-numeric: tabular-nums; }
.pag__ficha { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--c-acento-texto, var(--c-acento));
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-linea-fuerte, var(--c-linea)); }
.pag__ficha .ic { font-size: 16px; }
.pag__tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 14px; background: var(--c-panel-2); border: 1px solid var(--c-linea); }
.pag__tipos button { min-height: 44px; padding: 6px 10px; border-radius: 11px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--c-tinta-2);
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease); }
.pag__tipos button:hover { color: var(--c-tinta); }
.pag__tipos button[aria-pressed="true"] { background: var(--c-seg-on); color: var(--c-seg-on-tinta); box-shadow: var(--sombra-chica); }
.pag__tipos button:focus-visible { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 2px; }

.pag__plan { padding: 24px 26px 24px; }
.pag__plan-in.entra { animation: pag-entra var(--dur) var(--ease) both; }
@keyframes pag-entra { from { opacity: 0; transform: translateY(8px); } }
.pag__plan-cab { margin-bottom: 16px; }
.pag__eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--c-rotulo, var(--c-tinta-2)); }
.pag__h2 { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: .01em; }
.pag__resumen { margin: 6px 0 0; font-size: 13.5px; color: var(--c-tinta-2); }
.pag__barra { display: flex; gap: 3px; height: 30px; margin-bottom: 8px; }
.pag__seg { min-width: 0; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
  background: var(--c-seg-on); color: var(--c-seg-on-tinta); }
.pag__seg--1 { background: color-mix(in srgb, var(--c-seg-on) 72%, var(--c-etapa)); }
.pag__seg--2 { background: color-mix(in srgb, var(--c-seg-on) 44%, var(--c-etapa)); color: var(--c-tinta); }
.pag__seg--3 { background: color-mix(in srgb, var(--c-seg-on) 24%, var(--c-etapa)); color: var(--c-tinta); }
.pag__pasos { list-style: none; margin: 0; padding: 0; }
.pag__paso { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-linea); }
.pag__n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--c-acento-suave); color: var(--c-acento-texto, var(--c-acento));
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pag__txt { min-width: 0; display: grid; gap: 2px; }
.pag__txt b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pag__txt span { font-size: 12.5px; line-height: 1.4; color: var(--c-tinta-2); }
.pag__txt .pag__detalle { font-weight: 600; color: var(--c-tinta); font-variant-numeric: tabular-nums; }
.pag__monto { margin: 0; display: grid; justify-items: end; text-align: right; font-family: var(--f-display); font-weight: 300; font-size: 19px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pag__monto small { font-family: var(--f-ui); font-size: 11.5px; font-weight: 500; color: var(--c-tinta-2); }
.pag__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 6px; }
.pag__total span { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--c-rotulo, var(--c-tinta-2)); }
.pag__total b { font-family: var(--f-display); font-weight: 300; font-size: 26px; color: var(--c-acento-texto, var(--c-acento)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pag__hoa { margin: 10px 0 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--c-panel-2); border: 1px solid var(--c-linea); font-size: 13.5px; line-height: 1.35; }
.pag__hoa .ic { font-size: 20px; color: var(--c-icono, var(--c-acento)); }
.pag__hoa-t { color: var(--c-tinta-2); }
.pag__hoa b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pag__hoa b small { font-size: 12px; font-weight: 500; color: var(--c-tinta-2); margin-left: 2px; }
.pag__notas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.pag__notas li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.45; color: var(--c-tinta-2); }
.pag__notas .ic { font-size: 17px; color: var(--c-icono, var(--c-acento)); }
.pag__wa { margin-top: 18px; min-height: 48px; }
.pag__sin { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 16px 6px 4px; }
.pag__sin .ic--grande { font-size: 38px; color: var(--c-icono, var(--c-acento)); }
.pag__sin p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-tinta-2); max-width: 380px; }
.pag__sin .pag__sin-t { font-family: var(--f-display); font-weight: 300; font-size: 20px; color: var(--c-tinta); }
.pag__sin .btn-cta { width: auto; }
@media (prefers-reduced-motion: reduce) { .pag__plan-in.entra { animation: none; } }
@media (max-width: 900px) and (min-width: 761px) {
  .pag__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; }
  .pag__unidad { grid-template-columns: 1fr; }
  .pag__foto { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .pag__cab { margin-bottom: 14px; }
  .pag__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pag__elegir { position: static; }
  .pag__panel { padding: 16px 16px 18px; }
  .pag__unidad { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .pag__foto { min-height: 118px; }
  .pag__precio { font-size: 22px; }
  .pag__plan { padding: 18px 16px 18px; }
  .pag__h2 { font-size: 22px; }
  .pag__paso { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; }
  .pag__n { width: 26px; height: 26px; font-size: 12px; }
  .pag__txt b { font-size: 13.5px; }
  .pag__monto { font-size: 16.5px; }
  .pag__total b { font-size: 22px; }
}

/* ------------------------------------------- calidad (Task 10: guías de interfaz) */
:root { color-scheme: light; }
/* Controles nativos (select, checkbox) con fondo y tinta explícitos: en Windows con modo oscuro
   no quedan grises sobre gris. */
select, option { background-color: var(--c-fondo); color: var(--c-tinta); }
/* Sobre fondos oscuros (portada, intro, tour) el anillo de foco va blanco: el del acento no se ve. */
.portada :focus-visible, .intro :focus-visible, .capa--tour :focus-visible, .tira :focus-visible, .pista :focus-visible { outline-color: #fff; }
/* El menú cerrado no se alcanza con el Tab (además de inert): queda fuera de pantalla y oculto. */
.menu { visibility: hidden; transition: transform var(--dur-lenta) var(--ease), visibility 0s linear var(--dur-lenta); }
.menu-on .menu { visibility: visible; transition-delay: 0s; }
/* Estado al pasar el mouse en todo control que no lo tenía (solo con puntero que puede "pasar"). */
@media (hover: hover) {
  .circ:hover, .x:hover, .carrusel__f:hover, .tabs__chev:hover, .tira__chev:hover { filter: brightness(1.1); box-shadow: var(--sombra-chica), 0 0 0 2px color-mix(in srgb, var(--c-acento) 35%, transparent); }
  .circ--borde:hover, .btn-pie:hover, .btn-sec:not(.btn-sec--lleno):hover { background: var(--c-acento-suave); }
  .btn-sec--lleno:hover, .btn-menu:hover, .hs__btn:hover { filter: brightness(1.08); }
  .pildora:hover, .tabs__lista button:not([aria-selected="true"]):hover { color: var(--c-tinta); background: color-mix(in srgb, var(--c-panel) 70%, var(--c-acento-suave)); }
  .seg button:not([aria-pressed="true"]):not([disabled]):hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .pin:hover { box-shadow: var(--sombra-chica), 0 0 0 2px var(--c-acento); }
}
/* Pausa del timelapse de la portada: discreta, arriba a la izquierda (la derecha es del idioma). */
.circ--portada { background: var(--c-portada-seg, rgba(0, 0, 0, .32)); color: var(--c-oscuro-tinta, #fff); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.circ--portada .ic { font-size: 20px; }
.portada--quieta .portada__img { animation-play-state: paused !important; }
/* Un botón que se lee como link (la política de privacidad dentro de la casilla). */
.enlace { display: inline; padding: 0; font: inherit; color: var(--c-acento-texto, var(--c-acento)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* El mapa de alrededores del brochure puede traer los colores de una marca: el tema lo neutraliza. */
.alr__mapa img { filter: var(--alr-mapa-filtro, none); }
/* Contador de fotos de la tarjeta de unidad (arriba a la derecha; el estado va a la izquierda). */
.ucard__n { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: var(--r-ctrl);
  background: var(--c-oscuro); color: var(--c-oscuro-tinta); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ucard__n .ic { font-size: 14px; }
/* En el celular la foto de la tarjeta es angosta: el contador chocaba con el estado. */
@media (max-width: 760px) { .ucard__n { display: none; } }

/* ------------------------------------------------ detalles (ronda 3) */
/* Carrusel de fotos de las tarjetas (unidades, tipologías, suites). La caja ya reserva el alto
   (aspect-ratio de .ucard__foto / .utipo__foto): cambiar de foto no mueve nada. */
.fcar { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.fcar__abrir { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
span.fcar__abrir { cursor: default; }
.fcar__pista { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform var(--dur) var(--ease); }
.fcar__pista img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.fcar__f { position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: var(--r-circ, 50%);
  background: var(--c-panel); color: var(--c-tinta); box-shadow: var(--sombra-chica); opacity: 0; pointer-events: none; transition: opacity var(--dur-rapida) var(--ease); }
.fcar__f .ic { font-size: 20px; }
.fcar__f--izq { left: 8px; } .fcar__f--der { right: 8px; }
.fcar__f:focus-visible { opacity: 1; pointer-events: auto; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ucard:hover .fcar__f, .utipo:hover .fcar__f, .fcar:focus-within .fcar__f { opacity: 1; pointer-events: auto; }
}
.fcar__puntos { position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%); display: flex; gap: 0; padding: 2px 4px; border-radius: var(--r-ctrl); background: rgba(0, 0, 0, .32); }
/* Cada punto se ve de 6 px. Con mouse se enciman los márgenes (la píldora sigue chica); con el dedo
   cada uno se toca en 24 × 24 sin pisar al de al lado. */
.fcar__puntos button { width: 24px; height: 24px; margin: -6px -5px; display: grid; place-items: center; }
@media (pointer: coarse) {
  .fcar__puntos button { margin: -6px 0; }
  /* Así la píldora es más ancha: en la tarjeta de unidad va encima del chip del modelo. */
  .ucard:not(.ucard--suite) .fcar__puntos { bottom: 42px; }
}
.fcar__puntos button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: transform var(--dur-rapida) var(--ease), background var(--dur-rapida) var(--ease); }
.fcar__puntos button.on::before { background: #fff; transform: scale(1.25); }
/* Lo que va encima de la foto no se come el clic que abre la ficha. */
.ucard__foto .badge, .ucard__modelo, .ucard__n, .utipo__foto .badge { z-index: 1; pointer-events: none; }
.utipo__foto .fcar__puntos { bottom: 14px; }
/* En la tarjeta de unidad el modelo va abajo a la derecha: los puntos, abajo a la izquierda. */
.ucard:not(.ucard--suite) .fcar__puntos { left: 10px; transform: none; }
.ucard:hover .ucard__foto .fcar__pista img { transform: none; }
.ucard--apagada .ucard__foto img, .utipo--agotada .utipo__foto img { transition: none; }
@media (max-width: 760px) {
  .ucard:not(.ucard--suite) .fcar__puntos { bottom: 34px; left: 50%; transform: translateX(-50%); }
  /* La foto de la tarjeta horizontal del celular mide 118 px: no entran seis puntos de 24. Ahí los
     puntos solo indican (se cambia de foto deslizando) y un toque sobre ellos abre la ficha. */
  .ucard .fcar__puntos { pointer-events: none; }
  .ucard .fcar__puntos button { width: 12px; }
  /* En la tira de tipologías el dedo mueve la tira, no la foto. */
  .fcar--tira { touch-action: auto; }
}
@media (prefers-reduced-motion: reduce) { .fcar__pista { transition: none; } }

/* Recorrido: mientras la cámara "camina" hacia una flecha, las flechas se apagan y no se toca nada. */
.tour-caminando .fl { opacity: 0; transition: opacity 160ms ease; }
.tour-caminando .capa--tour { pointer-events: none; }

/* Amenidades: el plano del conjunto (última diapositiva) con sus números y la lista al lado. */
.galeria__foto--plano { background: var(--c-etapa); }
.amen-plano { position: absolute; top: calc(var(--hud-top) + var(--ctrl-h) + 48px); bottom: calc(var(--hud-x) + 12px); left: calc(var(--hud-x) + 64px); right: calc(var(--hud-x) + 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 20px; align-items: center; }
.amen-plano__lienzo { min-width: 0; height: 100%; display: grid; place-items: center; }
.amen-plano__mapa { position: relative; width: min(100%, calc((100dvh - var(--hud-top) - var(--ctrl-h) - 72px - var(--hud-x)) * 1.538)); container-type: inline-size;
  background: #fff; border-radius: var(--r-panel); box-shadow: var(--sombra); }
.amen-plano__mapa img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
  /* el borde derecho del brochure trae una franja del color de la página: se recorta */
  clip-path: inset(0 1% 0 0 round var(--r-panel)); }
.amen-pin { --s: clamp(22px, 3.6cqw, 36px); position: absolute; z-index: 1; width: var(--s); height: var(--s); transform: translate(-50%, -50%); display: grid; place-items: center;
  border-radius: 50%; background: var(--c-acento); color: var(--c-acento-tinta); font-family: var(--f-ui); font-size: calc(var(--s) * .42); font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, .3); transition: transform var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease); }
/* La punta tapa la del número del brochure, que queda debajo. */
.amen-pin::after { content: ""; position: absolute; left: 50%; top: calc(100% - 3px); transform: translateX(-50%); border: calc(var(--s) * .24) solid transparent; border-top: calc(var(--s) * .42) solid var(--c-acento); border-bottom: 0; z-index: -1; }
.amen-pin--extra { background: #fff; color: var(--c-tinta); box-shadow: 0 0 0 2px var(--c-tinta-2), 0 4px 12px rgba(0, 0, 0, .25); }
.amen-pin--extra::after { border-top-color: var(--c-tinta-2); }
.amen-pin.on, .amen-pin:hover { transform: translate(-50%, -50%) scale(1.16); z-index: 3; }
.amen-pin.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c-acento), 0 6px 16px rgba(0, 0, 0, .35); }
.amen-pin__tip { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 220px; padding: 5px 10px; border-radius: 8px;
  background: var(--c-oscuro); color: var(--c-oscuro-tinta); font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-rapida) var(--ease); }
.amen-pin.on .amen-pin__tip, .amen-pin:hover .amen-pin__tip, .amen-pin:focus-visible .amen-pin__tip { opacity: 1; }
.amen-lista { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 12px; background: var(--c-panel); border-radius: var(--r-panel); box-shadow: var(--sombra);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.amen-lista__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amen-lista__nav { display: none; gap: 8px; }
.amen-lista__nav .circ { width: 36px; height: 36px; }
.amen-lista__h { margin: 0 4px 4px; font-family: var(--f-display); font-weight: 300; font-size: 19px; letter-spacing: .02em; }
.amen-lista__h:focus { outline: none; }
.amen-lista__sub { margin: 0 4px 12px; font-size: 12.5px; line-height: 1.4; color: var(--c-tinta-2); }
.amen-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.amen-item { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px; border-radius: 10px; text-align: left; color: var(--c-tinta);
  transition: background var(--dur-rapida) var(--ease); }
.amen-item:hover, .amen-item.on { background: var(--c-acento-suave); }
.amen-mini { position: relative; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--c-etapa); box-shadow: inset 0 0 0 1px var(--c-linea); }
.amen-mini img { width: 100%; height: 100%; object-fit: cover; }
.amen-mini__plano { position: absolute; inset: 0; background-repeat: no-repeat; }
.amen-mini__n { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--c-acento); color: var(--c-acento-tinta);
  font-size: 11px; font-weight: 700; box-shadow: 0 0 0 1.5px #fff; }
.amen-mini__n--otro { width: 13px; height: 13px; font-size: 7.5px; background: color-mix(in srgb, var(--c-acento) 70%, #fff); box-shadow: 0 0 0 1px #fff; }
.amen-mini--ic { display: grid; place-items: center; background: var(--c-acento-suave); }
.amen-mini__ic { font-size: 24px; color: var(--c-icono, var(--c-acento)); }
.amen-item__t { display: grid; gap: 2px; min-width: 0; }
.amen-item__t b { font-size: 13.5px; font-weight: 600; }
.amen-item__t small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-tinta-2); }
.amen-item__t small .ic { font-size: 14px; }
.amen-item--foto small { color: var(--c-acento-texto, var(--c-acento)); font-weight: 600; }
.amen-item__txt { display: none; font-size: 12.5px; line-height: 1.4; color: var(--c-tinta); }
.amen-item.on .amen-item__txt { display: block; }
.amen-ir-plano { position: absolute; z-index: 2; right: calc(var(--hud-x) + 64px); bottom: 32px; }
@media (max-width: 760px) {
  .amen-plano { top: calc(var(--hud-top) + var(--ctrl-h) + 44px); left: 12px; right: 12px; bottom: 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .amen-plano__lienzo { height: auto; }
  .amen-plano__mapa { width: 100%; }
  .amen-pin__tip { font-size: 11.5px; max-width: 160px; white-space: normal; }
  .amen-lista { padding: 14px 10px 10px; }
  /* En el plano, las flechas de la galería se esconden: van en la cabecera de la lista (fija al
     desplazarla), que no tapa ni números del plano ni texto. */
  .capa--amenidades.en-plano .galeria > .flecha { display: none; }
  .amen-lista__cab { position: sticky; top: -14px; z-index: 1; margin: -14px -10px 4px; padding: 12px 10px 6px 14px;
    background: var(--c-menu, var(--c-panel)); border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .amen-lista__cab .amen-lista__h { margin: 0; }
  .amen-lista__nav { display: inline-flex; }
  .amen-ir-plano { right: 12px; bottom: auto; top: calc(var(--hud-top) + var(--ctrl-h) + 12px); height: 34px; padding: 0 12px; font-size: 12px; }
}

/* Controles segmentados (EN/ES, Mapa/Satélite, Rutas/Alrededores, Día/Noche, tipo de comprador):
   la opción que no está elegida se lee en la tinta plena (≥ 4,5:1 en los tres temas, también con
   una foto o un mapa detrás); la elegida sigue siendo la píldora llena. */
.seg button:not([aria-pressed="true"]):not([disabled]) { color: var(--c-seg-inactiva, var(--c-seg-tinta)); }
.menu .seg button:not([aria-pressed="true"]), .pag__tipos button:not([aria-pressed="true"]) { color: var(--c-tinta); }
.portada .seg { --c-seg-inactiva: var(--c-oscuro-tinta); }

/* Ubicación: el fondo de Satélite mientras llega la foto (un solo valor, también lo lee ubicacion.js). */
.ubic--satelite { background: var(--mapa-satelite-fondo); }

/* ------------------------------------------------------------------ maqueta 3D */
/* maqueta.js: unas 250 caras de HTML con transformaciones 3D dentro de .mq__mundo (la cámara).
   Cada cara lleva su material (--mq-color) y una sombra según hacia dónde mira (--sombra): el
   sol cae del lado del mar (el frente), así que el frente va a pleno, los costados un poco más
   oscuros y el fondo, lo más oscuro. Las unidades se tiñen por disponibilidad. */
.mq {
  --mq-blanco: #f4f2ed; --mq-vidrio: #9dc0d0; --mq-lobby: #5f8193; --mq-baranda: rgba(160, 212, 220, .55); --mq-marco: rgba(38, 52, 62, .5);
  --mq-pergola: #6f6259; --mq-ventana: rgba(70, 92, 108, .5);
  --mq-mar: #5aa6c7; --mq-playa: #eadcbf; --mq-jardin: #b8cf9f; --mq-deck: #b98d5f; --mq-parqueo: #c9cccd;
  --mq-piscina: #3cb8da; --mq-entorno: #dfe6d6; --mq-tinta: rgba(11, 45, 69, .55);
  --mq-ok: #7fae8a; --mq-no: #c47a70; --mq-hold: #d8bf85;
  --mq-ok: color-mix(in srgb, var(--c-ok) 62%, var(--mq-vidrio)); --mq-no: color-mix(in srgb, var(--c-no) 62%, var(--mq-vidrio));
  --mq-hold: color-mix(in srgb, var(--c-hold) 70%, var(--mq-vidrio));
  --mq-cielo-1: #cfe3ee; --mq-cielo-2: #eef5f7; --mq-cielo-3: #f3f1ea;
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--mq-cielo-1) 0%, var(--mq-cielo-2) 55%, var(--mq-cielo-3) 100%);
}
#app[data-modo="noche"] .mq {
  --mq-blanco: #5c6a77; --mq-vidrio: #f1d7a2; --mq-lobby: #f6e2b5; --mq-baranda: rgba(160, 190, 210, .35);
  --mq-mar: #10304a; --mq-playa: #3d4650; --mq-jardin: #2c3e36; --mq-deck: #4a3a2b; --mq-parqueo: #3a434b;
  --mq-piscina: #2aa7d0; --mq-entorno: #25323c; --mq-tinta: rgba(230, 240, 247, .6);
  --mq-ok: #9fe0ad; --mq-no: #e58576; --mq-hold: #f3d38a;
  --mq-cielo-1: #06101a; --mq-cielo-2: #10243a; --mq-cielo-3: #1b2f42;
}
.mq__escena { position: absolute; inset: 0; perspective: 1800px; perspective-origin: 50% 38%; touch-action: none;
  user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.mq__escena:active { cursor: grabbing; }
.mq__escena:focus-visible { box-shadow: inset 0 0 0 3px var(--c-foco); }
.mq__mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.mq-c, .mq-r { position: absolute; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mq-c { --sombra: 0; --mq-color: var(--mq-blanco);
  background-color: var(--mq-color); background-image: linear-gradient(rgba(6, 18, 30, var(--sombra)), rgba(6, 18, 30, var(--sombra))); }
.mq-c--der { --sombra: .1; } .mq-c--izq { --sombra: .2; } .mq-c--atras { --sombra: .3; }
#app[data-modo="noche"] .mq-c { --sombra: .15; }
#app[data-modo="noche"] .mq-c--der { --sombra: .25; } #app[data-modo="noche"] .mq-c--izq { --sombra: .32; } #app[data-modo="noche"] .mq-c--atras { --sombra: .4; }
/* Materiales del terreno. */
.mq-c--entorno { --mq-color: var(--mq-entorno); } .mq-c--mar { --mq-color: var(--mq-mar); } .mq-c--playa { --mq-color: var(--mq-playa); }
.mq-c--jardin { --mq-color: var(--mq-jardin); } .mq-c--deck { --mq-color: var(--mq-deck); } .mq-c--parqueo { --mq-color: var(--mq-parqueo); }
.mq-c--piscina { --mq-color: var(--mq-piscina); box-shadow: inset 0 0 0 3px var(--mq-blanco); }
.mq-c--parqueo { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 20px); }
.mq-c--mar { background-image: linear-gradient(0deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .18)); }
/* El edificio: vidrio por unidad (teñido por estado, con parantes cada 1,6 m), lobby oscuro y
   barandas de vidrio que se ven de los dos lados. */
.mq-c--vidrio { --mq-color: var(--mq-vidrio); }
.mq-c--vidrio.mq-c--frente, .mq-c--vidrio.mq-c--izq, .mq-c--vidrio.mq-c--der {
  background-image: linear-gradient(rgba(6, 18, 30, var(--sombra)), rgba(6, 18, 30, var(--sombra))),
    repeating-linear-gradient(90deg, var(--mq-marco) 0 1.2px, transparent 1.2px 13px); }
/* Las puntas del edificio son muro blanco con ventanas angostas (así se ve el costado en el
   render); el color del estado queda en el frente y en las barandas. */
.mq-c--vidrio.mq-c--izq, .mq-c--vidrio.mq-c--der { --mq-color: var(--mq-blanco);
  background-image: linear-gradient(rgba(6, 18, 30, var(--sombra)), rgba(6, 18, 30, var(--sombra))),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--mq-ventana) 20px 34px, transparent 34px 56px); }
.mq-c--vidrio.mq-c--ok { --mq-color: var(--mq-ok); } .mq-c--vidrio.mq-c--no { --mq-color: var(--mq-no); }
.mq-c--vidrio.mq-c--hold { --mq-color: var(--mq-hold); }
.mq-c--lobby { --mq-color: var(--mq-lobby); }
.mq-c--baranda { --mq-color: var(--mq-baranda); background-image: none; border-top: 1px solid rgba(255, 255, 255, .85);
  backface-visibility: visible; -webkit-backface-visibility: visible; }
/* Hover y unidad elegida: la unidad se aclara con borde blanco; la elegida va en el acento y el
   resto del edificio se apaga un poco para que se note cuál es. */
.mq-c.mq-on { --sombra: -.18; outline: 1.5px solid #fff; outline-offset: -1.5px; }
.mq-c--baranda.mq-c--ok { --mq-color: color-mix(in srgb, color-mix(in srgb, var(--mq-ok) 45%, rgb(160, 212, 220)) 62%, transparent); }
.mq-c--baranda.mq-c--no { --mq-color: color-mix(in srgb, color-mix(in srgb, var(--mq-no) 55%, rgb(160, 212, 220)) 66%, transparent); }
.mq-c--baranda.mq-c--hold { --mq-color: color-mix(in srgb, color-mix(in srgb, var(--mq-hold) 55%, rgb(160, 212, 220)) 66%, transparent); }
/* Del render: pérgolas de listones oscuros y ventanas angostas, una por piso, en los costados de
   las torres de escaleras. */
.mq-c--pergola { --mq-color: var(--mq-pergola);
  background-image: linear-gradient(rgba(6, 18, 30, var(--sombra)), rgba(6, 18, 30, var(--sombra))),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 5px); }
.mq-c--nucleo.mq-c--izq, .mq-c--nucleo.mq-c--der {
  background-image: linear-gradient(rgba(6, 18, 30, var(--sombra)), rgba(6, 18, 30, var(--sombra))),
    repeating-linear-gradient(90deg, transparent 0 9px, var(--mq-ventana) 9px 22px, transparent 22px 24.8px);
  background-size: 100% 100%, 100% 18%; background-position: 0 0, 0 70%; background-repeat: no-repeat; }
.mq-c--baranda.mq-on { --mq-color: rgba(255, 255, 255, .85); }
.mq-c--vidrio.mq-sel { --mq-color: var(--c-acento); --sombra: 0; outline: 2px solid #fff; outline-offset: -2px; }
.mq-c--baranda.mq-sel { --mq-color: color-mix(in srgb, var(--c-acento) 85%, transparent); }
.mq--con-sel .mq-c--vidrio:not(.mq-sel):not(.mq-on) { opacity: .72; }
/* Rótulos: en el suelo (planos, en versalitas tenues) y los números de piso parados. */
.mq-r { pointer-events: none; white-space: nowrap; }
.mq-r span { display: block; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mq-tinta); }
.mq-r--mar span, .mq-r--playa span { font-size: 16px; letter-spacing: .3em; }
.mq-r--parado span { font-size: 10px; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; background: var(--c-panel); color: var(--c-tinta); box-shadow: var(--sombra-chica); }
/* Lo de encima de la escena. */
.mq__foto { position: absolute; z-index: 1; max-width: none; pointer-events: none; will-change: opacity; }
.mq--desde-foto .mq__pista, .mq--desde-foto .mq__leyenda, .mq--desde-foto .flecha { opacity: 0; }
/* Al terminar el vuelo, la leyenda y las flechas llegan con un fundido (antes aparecían de golpe). */
.mq .mq__leyenda, .mq .flecha { transition: opacity 600ms var(--ease); }
.mq__pista { position: absolute; z-index: 3; left: 50%; top: calc(var(--hud-top) + 64px); transform: translateX(-50%); margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12px; background: var(--c-chip); color: var(--c-chip-tinta);
  border-radius: var(--r-ctrl); pointer-events: none; transition: opacity var(--dur) var(--ease); white-space: nowrap;
  font-family: var(--f-ui); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.mq__pista .ic { font-size: 16px; }
.mq--tocada .mq__pista { opacity: 0; }
.mq__leyenda b { font-weight: 700; margin-left: 2px; font-variant-numeric: tabular-nums; }
.mq__nota { margin: 0; padding: 4px 12px; font-size: 11px; color: var(--c-tinta-2); background: var(--c-panel); border-radius: var(--r-ctrl); }
.mq__tag { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 12.5px;
  background: var(--c-panel); color: var(--c-tinta); border-radius: 10px; box-shadow: var(--sombra-chica); pointer-events: none; opacity: 0;
  transition: opacity var(--dur-rapida) ease; white-space: nowrap; }
.mq__tag.on { opacity: 1; }
.mq__tag-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--c-tinta-2); }
.mq__estado { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; background: var(--c-panel); color: var(--c-tinta); border-radius: 12px; box-shadow: var(--sombra-chica); }
.mq__estado:empty { display: none; }
.mq__rueda { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-linea-fuerte); border-top-color: var(--c-acento); animation: mq-gira .9s linear infinite; }
@keyframes mq-gira { to { transform: rotate(360deg); } }
.mq:not(.mq--lista) .flecha, .mq:not(.mq--lista) .mq__pista, .mq:not(.mq--lista) .mq__leyenda { display: none; }
#app.con-preview .mq .flecha--izq { left: calc(var(--preview-w) + var(--hud-x) * 2); }
@media (max-width: 760px) {
  .mq__pista { top: calc(var(--hud-top) + 96px); }
  #app.con-preview .mq .flecha--izq { left: var(--hud-x); }
  #app.con-preview .mq__leyenda, #app.con-preview .mq .flecha { display: none; }
  .mq__nota { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .mq__rueda { animation: none; } }

/* Prueba: unidades tocables sobre la foto del edificio (datos.exterior.fachada). Cada una se pinta
   suave con su color de disponibilidad; al pasar el mouse o tocarla se marca fuerte. La silueta y
   el punto "Ingresar" no van cuando están las unidades. */
.con-unidades-foto .silueta { display: none; }
.uf__u { pointer-events: all; cursor: pointer; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  fill-opacity: .3; transition: fill-opacity var(--dur-rapida) ease, stroke var(--dur-rapida) ease; }
.uf__u--ok { fill: var(--c-ok); } .uf__u--no { fill: var(--c-no); } .uf__u--hold { fill: var(--c-hold); }
.uf__u.on, .uf__u:hover { fill-opacity: .55; stroke: #fff; stroke-width: 2.5; }
.uf-tag { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 12.5px;
  background: var(--c-panel); color: var(--c-tinta); border-radius: 10px; box-shadow: var(--sombra-chica); pointer-events: none; opacity: 0;
  transition: opacity var(--dur-rapida) ease; white-space: nowrap; }
.uf-tag.on { opacity: 1; }
.uf-tag span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-tinta-2); }

/* ------------------------------------------------ proyecto de demostración */
/* datos.demo (motor.js, rotuloDemo): "Proyecto ficticio de demostración · … · Showroom por Nuva ia",
   abajo en la portada y en el pie del menú y de Contacto. Claro y legible, sin competir con "Ingresar". */
.rotulo-demo { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--c-tinta-2); }
.rotulo-demo .ic { font-size: 15px; flex: none; margin-top: 1px; color: var(--c-icono, var(--c-acento)); }
.rotulo-demo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rotulo-demo a:hover { text-decoration-thickness: 2px; }
.rotulo-demo a:focus-visible { outline: 2px solid var(--c-foco, var(--c-acento)); outline-offset: 2px; border-radius: 3px; }
.portada__demo { position: absolute; z-index: 3; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); padding: 7px 14px; border-radius: 999px; font-size: 12.5px;
  color: #fff; background: rgba(6, 14, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.portada__demo .ic { color: #fff; }
.portada__demo a { color: #fff; }
.menu__demo, .contacto__demo { margin: 14px 0 10px; }
/* portada.fondoMismoEncuadre: la foto de atrás es la misma toma con otra luz; se acerca igual que la
   de adelante, así al fundirse cambia solo la luz. */
@media (prefers-reduced-motion: no-preference) {
  .portada--encuadre .portada__img--b { animation: kenburns 18s var(--ease) infinite alternate, atardecer 18s ease-in-out infinite; }
}
@media (max-width: 760px) {
  .portada__demo { border-radius: 14px; font-size: 11.5px; text-align: left; }
}