/* ============================================================ MAREA RESIDENCES — CAPA MÓVIL / TÁCTIL (mobile.css) ============================================================ Hoja ADITIVA. Todavía NO la carga el sitio: la inyecta VER_MOVIL.html en cada iframe para poder revisarla sin tocar index.html. Cuando el resultado convenza, se engancha con una sola línea: Todo va dentro de media queries o de (hover:none), así que en escritorio no cambia absolutamente nada aunque se cargue. ============================================================ */ /* ─── 0. MARCA DE VERSIÓN ──────────────────────────────────── Sirve para saber, DESDE EL TELÉFONO, qué copia de esta hoja está viva. Un navegador puede estar sirviendo una versión vieja desde su caché y entonces ninguna corrección se ve, por muy bien que esté hecha. Abriendo el sitio con ?diag=1 aparece un recuadro que lee este valor (ver mobile.js). */ :root { --altiva-movil: "20260914b"; } /* ─── 1. PUNTERO TÁCTIL ────────────────────────────────────── El sitio pone `cursor:none` en body y en cada button para dibujar su propio cursor (.cursor-ring/.cursor-dot, que sigue al mousemove). En un teléfono no hay mousemove: el cursor personalizado se queda clavado donde apareció y `cursor:none` no aporta nada. Se devuelve el comportamiento nativo. */ @media (hover: none), (pointer: coarse) { body, button, a, .avail-unit, .unit-card { cursor: auto !important; } .cursor-ring, .cursor-dot { display: none !important; } /* Sin :hover no hay forma de "previsualizar": el resaltado pasa al toque. */ * { -webkit-tap-highlight-color: rgba(44,93,143,0.18); } } /* Mismo trato cuando el visor fuerza el modo táctil desde escritorio (ver .forzar-tactil en mobile.js): si no, el cursor personalizado seguiría dibujándose dentro del iframe y estorbaría al simular gestos. */ .forzar-tactil body, .forzar-tactil button, .forzar-tactil a { cursor: auto !important; } .forzar-tactil .cursor-ring, .forzar-tactil .cursor-dot { display: none !important; } .forzar-tactil .building-stage { touch-action: pan-y; } .forzar-tactil .lb-stage, .forzar-tactil .ugp-stage { touch-action: none; } /* ─── 1b. SIN BARRAS DE DESPLAZAMIENTO ─────────────────────── Roban ancho (crítico en 360 px) y se ven mal sobre contenido a sangre. En un teléfono real las barras ya son flotantes y desaparecen solas; las clásicas que se ven en el visor son de Chrome de escritorio. Se ocultan en todos los contenedores, sin quitar la capacidad de desplazarse. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } body, .stage-drawer, .ug-sidebar, #floor-panel, .lightbox-strip, .ugp-strip, .fp-grid-wrap, #unitGalleryOverlay, .pm, .modal-card, .avail-panel, #rail, .brochure-frame-wrap, .ug-floor-picker, [class*="-scroll"], [class*="scroll-"] { scrollbar-width: none; -ms-overflow-style: none; } body::-webkit-scrollbar, .stage-drawer::-webkit-scrollbar, .ug-sidebar::-webkit-scrollbar, #floor-panel::-webkit-scrollbar, .lightbox-strip::-webkit-scrollbar, .ugp-strip::-webkit-scrollbar, #unitGalleryOverlay::-webkit-scrollbar, .pm::-webkit-scrollbar, .modal-card::-webkit-scrollbar, .avail-panel::-webkit-scrollbar, #rail::-webkit-scrollbar, .ug-floor-picker::-webkit-scrollbar, .brochure-frame-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; } } /* ─── 2. ÁREAS DE TOQUE ────────────────────────────────────── Mínimo recomendado 44x44 px reales. Varios controles se quedaban cortos o estaban pegados al borde, donde el pulgar no llega bien. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* ── FRANJA DE ABAJO: marca a la izquierda, flechas encima ── La marca MAREA RESIDENCES se queda en la esquina de abajo-izquierda, que es donde ha estado siempre (.idx-brand en styles.css). Las flechas del recorrido van también abajo, cada una pegada a su borde, pero en la franja de JUSTO ENCIMA de la marca, para que ninguna de las dos la tape. Las cuentas, sobre un teléfono de 390x844: marca 12 px de margen + 46 px de alto -> ocupa hasta 58 px flechas 58 + 12 de aire -> bottom: 70 px ── OJO CON env() ────────────────────────────────────────────── Esto estuvo escrito con variables encadenadas: --borde-abajo: calc(12px + env(safe-area-inset-bottom)); .stage-chevron { bottom: calc(var(--borde-abajo) + var(--marca-alto) + 12px); } y en el teléfono las dos flechas SALTABAN ARRIBA A LA IZQUIERDA. El motivo: varios Safari de iOS no resuelven env() cuando está metido dentro de una variable que luego se usa en otro calc(). Al no resolverse, `bottom` queda inválida y se descarta; como `top` ya estaba en auto, las flechas se quedaban sin ningún anclaje vertical y caían a su posición estática, que es justo debajo del mando de arriba. En Chrome de escritorio funcionaba, así que la comprobación no lo detectó. La regla que sale de ahí: primero el valor LLANO, que funciona siempre, y solo después la mejora con env(). Si la mejora falla, la flecha se queda abajo igual -- pierde el margen de la barra de gestos, nada más. Y env() va SIEMPRE directo dentro del calc() de su propiedad, nunca a través de una variable. */ .stage-chevron { width: 42px; height: 42px; top: auto; transform: none; bottom: 70px; /* 12 del margen + 46 del logo + 12 de aire */ } .stage-chevron svg { width: 14px; height: 14px; } .stage-chevron-left { left: 14px; } .stage-chevron-right { right: 14px; } /* La marca, en su esquina de siempre. .shift (el corrimiento con el cajón abierto) se recalcula al ancho nuevo del cajón -- ver 2f. */ .idx-brand { left: 12px; right: auto; bottom: 12px; } .idx-brand.shift { left: calc(min(38vw, 172px) + 10px); } /* La mejora, aparte y al final: deja pasar la barra de gestos del iPhone. Si el navegador no la aplica, arriba ya quedaron los valores buenos. */ @supports (bottom: env(safe-area-inset-bottom)) { .stage-chevron { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .idx-brand { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } .stage-icon-btn, .stage-drawer-toggle { width: 37px; height: 37px; } .stage-icon-btn svg, .stage-drawer-toggle svg { width: 13px; height: 13px; } /* El punto "Entrar al masterplan" es diminuto para un dedo: se le da un área de toque invisible alrededor sin agrandar el gráfico. */ .stage-masterplan-cta { width: 67px; height: 67px; } /* Menú lateral: ver la sección 2f, que lo deja en un tercio de la pantalla. */ } /* ─── 2f. CAJÓN LATERAL: UN TERCIO, NO LA PANTALLA ENTERA ──── Venía en min(84vw, 300px): en un teléfono de 390 px eso son 328, o sea el 84% del ancho. Al abrirlo desaparecía el edificio -- que es justamente lo que se está navegando -- y el menú se sentía una pantalla aparte en vez de un cajón. Ahora ocupa alrededor de un TERCIO del ancho, y su contenido baja de tamaño en la misma proporción para que siga entrando la palabra más larga ("Disponibilidad") sin partirse: tipografía, iconos, círculos de redes y el pie de "Powered by Spectra", todos escalados a la vez. La cuenta: 38vw de 390 px son 148; menos 20 de relleno, 14 del icono y 7 de separación quedan 107 px de texto, y "DISPONIBILIDAD" a 9.5 px mide unos 85. El min-width de 132 px es el suelo para teléfonos muy angostos (320 px). Los once renglones + logo + redes + pie suman ~480 px de alto: en 844 sobra sitio, así que lo que se recorta es ancho, no legibilidad vertical. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .stage-drawer { width: min(38vw, 172px); min-width: 132px; padding: 64px 10px 16px; gap: 2px; } .sd-logo { padding-bottom: 9px; margin-bottom: 4px; } .sd-item { padding: 9px 2px; gap: 7px; font-size: 9.5px; letter-spacing: 0.02em; } .sd-ico { width: 14px; } .sd-ico svg { width: 14px; height: 14px; } .sd-social { gap: 7px; margin-top: 9px; padding-top: 10px; } .sd-social-btn { width: 30px; height: 30px; } .sd-social-btn svg { width: 13px; height: 13px; } .sd-powered { font-size: 8px; gap: 4px; padding-top: 10px; } .sd-powered-iso { width: 12px; height: 12px; } } /* ─── 2b. ZONA DE LA CÁMARA FRONTAL ────────────────────────── Hoy todo el mando de arriba vive en top:20px: el toggle del menú a la izquierda, las píldoras en right:72px y pantalla completa en right:20px. En un teléfono esa franja es justo donde va la muesca / isla dinámica / perforación, y tapa las píldoras. SOLUCIÓN: los controles se quedan ARRIBA, donde estaban, pero cada lado se apila en VERTICAL contra su borde en vez de extenderse hacia el centro. El resultado es una columna a la izquierda y otra a la derecha, con toda la franja central libre — que es justo por donde pasa la cámara. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* ── SEPARACIÓN REAL ENTRE BOTONES ─────────────────────── Los círculos dibujados miden 37 px, pero cada uno lleva una zona sensible invisible que lo desborda 6 px por lado (ver 2e): 49 px de área de toque. Con la separación que había -- 8 px entre píldoras, 10 px en los rieles -- el paso quedaba en 45 y 47 px, así que las áreas de DOS botones vecinos se montaban una sobre otra y un toque cerca del borde podía activar el de al lado. Se ven separados, pero no lo estaban donde importa. 13 px de separación dejan el paso en 50 px: las zonas se tocan sin solaparse. Es la variable que hay que respetar si se cambia el tamaño de los botones: separación >= 13 px mientras el círculo mida 37. */ .stage-rail { gap: 13px; } .stage-pills-right { gap: 13px; } /* ── ÍNDEX ────────────────────────────────────────────── Derecha: "Galería" y "Disponibilidad" pasan de fila a columna y se pegan al borde. Como el botón de pantalla completa ya vive en right:20 / top:20, las píldoras arrancan justo debajo de él para no encimarse. Los tops llevan el inset de seguridad de arriba porque el escenario tiene botón de pantalla completa: en pantalla completa la muesca / isla dinámica SÍ se come esa franja, y sin el inset la primera fila queda debajo. Fuera de pantalla completa el inset vale 0 y no cambia nada. */ /* ── UNA SOLA REJILLA PARA LAS DOS COLUMNAS ──────────────── Cada columna son tres círculos de 37 px con 13 px entre ellos, o sea un paso de 50: 16 → 66 → 116. Antes la derecha arrancaba sus píldoras en 74 (21 px bajo pantalla completa y 13 entre Contacto y Galería) y la izquierda en 70 (17 y 13): el botón del medio quedaba más pegado al de abajo que al de arriba y se leía descuadrado. Ahora las dos columnas caen exactamente a la misma altura, botón por botón. */ .stage-pills-right { right: 12px; top: 66px; flex-direction: column; align-items: flex-end; } .stage-rail-right { right: 12px; top: 16px; } /* Izquierda: el toggle del menú y "reiniciar" ya estaban uno debajo del otro; solo se acercan al borde para ganar centro. */ .stage-drawer-toggle { left: 12px; top: 16px; } .stage-rail-left { left: 12px; top: 66px; } /* El margen de la muesca va aparte, igual que abajo: valor llano primero, mejora después. Ver la nota sobre env() en la sección 2. */ @supports (top: env(safe-area-inset-top)) { .stage-pills-right { top: calc(66px + env(safe-area-inset-top, 0px)); } .stage-rail-right { top: calc(16px + env(safe-area-inset-top, 0px)); } .stage-drawer-toggle { top: calc(16px + env(safe-area-inset-top, 0px)); } .stage-rail-left { top: calc(66px + env(safe-area-inset-top, 0px)); } } /* Las píldoras en columna necesitan ancho propio para no quedar desalineadas entre sí (una dice "Galería" y otra "Disponibilidad"). */ /* Antes se estiraban al 100% para alinear "Galería" con "Disponibilidad". Ya no hay texto que alinear: son cuadradas como el resto de iconos. */ .stage-pills-right .stage-pill { width: 37px; } /* NOTA: esto aplica SOLO al index. En el masterplan los controles se quedan como están — revisados y aprobados tal cual. */ } /* ─── 2d. PÍLDORAS DE TEXTO → BOTONES DE ICONO ─────────────── "Contacto", "Galería" y "Disponibilidad" eran píldoras con la palabra escrita. En un teléfono de 360 px cada una medía entre 90 y 150 px de ancho según lo larga que fuera su palabra, así que la columna de la derecha se comía casi la mitad de la pantalla y las tres quedaban desiguales entre sí. Ahora enseñan solo su icono y quedan idénticas al botón de Ubicación (.stage-icon-btn): mismo círculo, mismo tamaño, misma rejilla. El texto no se borra del HTML — se oculta — así que el lector de pantalla lo sigue anunciando, y además cada botón lleva su aria-label y su title. En ESCRITORIO no cambia nada: allí el icono es el que está oculto (.stage-pill .pill-ico en styles.css) y se sigue leyendo la palabra. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .stage-pill .pill-txt { display: none; } .stage-pill .pill-ico { display: block; width: 13px; height: 13px; } .stage-pill { width: 37px; height: 37px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } } /* ─── 2e. ÁREA DE TOQUE TRAS BAJAR EL MANDO AL 80% ─────────── Los controles pasaron de 46 a 37 px (y de 52 a 42 los chevrones) porque se veían demasiado grandes. El problema es que 37 px queda por debajo de los 44x44 reales que recomienda la guía táctil, y la sección 2 de esta hoja existía justamente para respetar ese mínimo. No hay que elegir entre las dos cosas: el DIBUJO se queda en 37 px y la ZONA SENSIBLE se devuelve a ~49 px con un pseudo-elemento transparente que desborda el botón. El dedo acierta igual que antes y la interfaz se ve tan ligera como se pidió. inset negativo en vez de padding porque el padding cambiaría el tamaño del círculo dibujado, que es exactamente lo que no queremos tocar. */ @media (hover: none), (pointer: coarse) { .stage-icon-btn, .stage-drawer-toggle, .stage-pill, .stage-chevron { position: relative; } .stage-icon-btn::after, .stage-drawer-toggle::after, .stage-pill::after, .stage-chevron::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; } } /* ─── 2c. MASTERPLAN: PANEL DE NIVEL ───────────────────────── Mide 380 px de ancho y hasta 480 de alto: en un teléfono de 360 px tapaba la pantalla entera y ya no se veía el edificio, que es lo que se está eligiendo. Se encoge a poco más de la mitad de la altura y se ancla abajo, como una ficha, dejando el render a la vista. mobile.js añade además el cierre al tocar fuera. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { #floor-panel { right: 10px; left: 10px; width: auto; max-width: none; top: auto !important; bottom: 12px; max-height: 46vh; max-height: 46svh; transform-origin: bottom center; } /* La animación de apertura venía de la derecha (anclada al riel); ahora que el panel entra por abajo, se corrige el sentido. */ #floor-panel { transform: translateY(14px) scale(.97); } #floor-panel.open { transform: translateY(0) scale(1); } .fp-head { padding: 12px 14px 10px; } .fp-title { font-size: 17px; } .fp-sub { font-size: 11.5px; } .fp-stat-n { font-size: 18px; } /* Las tarjetas de unidad en dos columnas: caben dos por fila en 360 px */ .fp-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .unit-card { padding: 9px 10px; } .uc-id { font-size: 14px; } .uc-model, .uc-specs { font-size: 10.5px; } } /* ─── 2c-bis. MASTERPLAN: EL AVISO "SELECCIONA UN NIVEL" ───── Vive en bottom:36px, centrado. En un teléfono esa esquina la ocupan el logo MAREA RESIDENCES (abajo-izquierda) y el "Powered by Spectra" (abajo-derecha), y los tres se enciman. Se sube justo debajo de la fila de botones de arriba, donde hay sitio libre y además queda a la vista al entrar. El vaivén (@keyframes bob) mueve translateY sobre translateX(-50%): al conservar left:50% + translateX(-50%) la animación sigue funcionando igual. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* Arriba tampoco cabía: #glass-actions ("Vista Aérea" / "Galería") está centrado en top:13px y el aviso le quedaba justo debajo, encimándose con él en cuanto el texto pasaba a dos líneas. Se devuelve abajo, pero POR ENCIMA del logo MAREA RESIDENCES: ese mide 69px de alto desde bottom:20px, o sea que ocupa hasta los 89px — de ahí que antes se solaparan. A 100px queda libre de los dos. */ #hint { top: auto; bottom: 100px; font-size: 11.5px; padding: 7px 15px; max-width: calc(100vw - 32px); white-space: normal; text-align: center; } } /* ─── 2d. MASTERPLAN: RENDER DEL NIVEL MÁS CERCA ───────────── .lv-img se limita a max-width:min(1200px,88vw). En un teléfono de 360 px eso son 317 px de ancho para un edificio entero: se ve lejano y pequeño, y encima anclado abajo. Se deja crecer bastante por encima del ancho de pantalla (el contenedor recorta los lados, que son cielo) y se sube un poco para que el edificio quede centrado en la mirada. Los hotspots NO se desalinean: syncHotspotBoxes() mide el rect real de la imagen y redrawHotspots() ya se re-ejecuta en cada `resize`; mobile.js dispara uno tras aplicar esto. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .lv-img { max-width: 118vw; max-height: 78vh; max-height: 78svh; bottom: 8vh; } } @media (max-width: 480px) { .lv-img { max-width: 128vw; bottom: 7vh; } } /* ─── 2e. MASTERPLAN: VISTA AÉREA (LUMA) ───────────────────── El visor es un iframe de lumalabs.ai: su cámara no la controlamos. Lo que sí controla el encuadre es la CAJA donde renderiza. Un visor 3D fija el campo de visión VERTICAL y deriva el horizontal de la relación de aspecto. En un teléfono vertical esa relación es ~0.46, así que el campo horizontal queda estrechísimo y el edificio llena el cuadro: por eso se ve "encima". La solución no es alejar la cámara (no podemos), sino darle una caja APAISADA: con relación ~16:9 el campo horizontal se multiplica por casi cuatro y entra muchísimo más escena. El iframe pasa a ocupar todo el ancho con altura de banda, centrado; el resto del wrap queda con su fondo. --luma-alto se puede subir o bajar para ajustar cuánto se ve. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* El intento anterior (una banda apaisada centrada) salió mal: dejaba franjas muertas arriba y abajo, el edificio quedaba pequeño dentro del recuadro negro del visor y encima se veía el usuario de Luma en la esquina. Ahora el iframe ocupa TODA la caja y se amplía con transform: el contenedor recorta lo que sobra por los bordes — que es margen vacío y las etiquetas del propio Luma. --luma-zoom se sube o baja para ajustar el encuadre. */ #modelluma-wrap { --luma-zoom: 1.5; } #modelluma-wrap iframe { inset: 0; top: 0; left: 0; width: 100%; height: 100%; transform: scale(var(--luma-zoom)); transform-origin: center center; } /* El aviso "Arrastra para navegar" vive en bottom:36px, donde ya están el isotipo de Luma (abajo-izq) y el "Powered by" (abajo-der): en un teléfono los tres se encimaban. Se sube arriba, que está despejado. */ #hint-luma { bottom: auto; top: 64px; font-size: 11.5px; padding: 7px 15px 7px 12px; } /* "Powered by Spectra" de la Vista Aérea: es el más grande de los tres (13.89px frente a 10.5px de los otros dos). En pantalla estrecha compite con el isotipo de Luma, así que se iguala al resto. */ #lumaPowered.luma-powered { font-size: 10px; padding: 5px 11px; right: 12px; bottom: 12px; } /* El isotipo de Luma también encoge para no quedar desproporcionado */ .luma-badge-left img { height: 40px; } .luma-badge-left { left: 12px; bottom: 12px; } } /* ─── 2f. MASTERPLAN: CABECERA DEL DETALLE DE DEPARTAMENTO ─── .ug-stage-top mete en UNA fila: volver + "Nivel N" a la izquierda, y "Powered by" + "Cambiar planta" + QR a la derecha. Suman bastante más que el ancho de un teléfono, así que se encimaban. Se deja que la fila envuelva y se recorta lo prescindible: el "Powered by" se oculta aquí (ya aparece en la esquina inferior derecha del masterplan y en el index, no hace falta repetirlo en una cabecera apretada) y los controles bajan de tamaño. Con eso entra todo sin encimarse. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .ug-stage-top { flex-wrap: wrap; gap: 6px; align-items: center; } .ug-stage-top-left, .ug-stage-top-right { gap: 6px; flex-wrap: wrap; } .ug-stage-top-right { margin-left: auto; } #ugPowered { display: none !important; } .ug-level-pill { height: 32px; padding: 0 11px; font-size: 11.5px; } .ug-pill-btn { height: 32px; padding: 0 11px; font-size: 11.5px; } .ug-icon-btn { width: 32px; height: 32px; } /* Los desplegables cuelgan de top:64px, medida para la cabecera de escritorio: al encoger, quedaban despegados. */ .ug-floor-picker, .ug-qr-pop { top: 52px; right: 10px; } .ug-floor-picker { width: 148px; max-height: 44vh; max-height: 44svh; } .ug-stage-wrap { padding: 10px; } } /* ─── 3. ALTURA REAL EN MÓVIL ──────────────────────────────── 100vh en un móvil incluye la barra del navegador, que aparece y desaparece: el hero "salta" al hacer scroll. svh/dvh miden el viewport visible. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .building-stage { height: 100vh; height: 100svh; min-height: 520px; } @supports (height: 100dvh) { .building-stage { height: 100dvh; } } } /* ─── 4. EFECTOS CAROS ─────────────────────────────────────── Los desenfoques grandes son lo primero que hace sudar a una GPU de teléfono. Se recortan sin quitar la idea visual. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* Carrete de galería: el blur de las diapositivas vecinas baja de 6px a 2px y se apoya más en la opacidad, que es gratis. */ .lb-slide, .ugp-slide { filter: blur(2px); opacity: 0.26; } .lb-slide.act, .ugp-slide.act { filter: none; opacity: 1; } /* Fondo ambiental del visor: 48px de blur a pantalla completa es carísimo. */ .lightbox-backdrop, .ugp-backdrop { filter: blur(22px) brightness(0.5) saturate(1.2); } /* Galería en reposo de la entrada. */ .idleshow-bg { filter: blur(24px) brightness(0.55); } } /* ─── 5. CARRETE DE GALERÍA EN VERTICAL ────────────────────── La tira de miniaturas se oculta por debajo de 860px (no cabe al lado), así que en móvil la única navegación eran los botones. mobile.js añade el deslizamiento con el dedo; aquí se ajusta la caja para que la foto activa ocupe lo que debe y se sigan viendo trozos de la anterior/siguiente. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { .lightbox-body, .ugp-body { height: 74vh; height: 74svh; gap: 8px; } .lightbox-body { --lb-slide-h: 48vh; --lb-slide-h: 48svh; } .ugp-body { --ugp-slide-h: 48vh; --ugp-slide-h: 48svh; } /* Botones ↑/↓ superpuestos, no en fila: en 360px cada píxel de ancho cuenta. */ .lightbox-nav, .ugp-nav { position: absolute; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; z-index: 3; } .lightbox-nav.prev, #ugpPrev { top: 4px; } .lightbox-nav.next, #ugpNext { bottom: 4px; } /* ── LOS BOTONES NO SE MUEVEN AL TOCARLOS ────────────────── Aquí se centran con transform:translateX(-50%). El sitio, para escritorio, tiene `.lightbox-nav:hover{transform:scale(1.06)}` y lo mismo en .ugp-nav: transform es UNA sola propiedad, así que el hover no le añade la escala al centrado -- lo SUSTITUYE, y el botón pierde su -50% y salta 23 px a la derecha. En escritorio no se nota porque ahí no van centrados con transform. En un teléfono no hay hover de verdad: al tocar se queda pegado, y el botón se movía justo cuando el dedo iba hacia él. Se fija el centrado en los tres estados. El realce se queda solo en el color, que no mueve nada. */ .lightbox-nav, .ugp-nav, .lightbox-nav:hover, .ugp-nav:hover, .lightbox-nav:active, .ugp-nav:active, .lightbox-nav:focus, .ugp-nav:focus { transform: translateX(-50%) !important; } } /* ─── 6. TEXTO Y RITMO ─────────────────────────────────────── Amerigo es una fuente ancha; en 360px los títulos largos se desbordan. */ @media (max-width: 480px) { h1 { font-size: clamp(26px, 8vw, 38px); line-height: 1.08; } h2 { font-size: clamp(22px, 6.5vw, 30px); } h3 { font-size: clamp(18px, 5vw, 24px); } /* Palabras largas ("Angelópolis", "Disponibilidad") no deben cortar la caja */ h1, h2, h3, .stage-caption .sc-label { overflow-wrap: break-word; hyphens: auto; } } /* ─── 7. GESTOS ────────────────────────────────────────────── El navegador no debe secuestrar el arrastre horizontal sobre el escenario (lo usamos para cambiar de fotograma) ni el vertical sobre el carrete. */ @media (hover: none), (pointer: coarse) { .building-stage { touch-action: pan-y; } /* ── LOS DOS VISORES DE FOTOS, EN touch-action:none ────────── El del index (.lightbox) y el del masterplan (#unitGalleryPhotosOverlay) son la misma pieza con las mismas fotos, pero el gesto de pasar foto solo respondía en el del index. La causa es el reparto del gesto. Con `manipulation` el navegador se reserva el arrastre para desplazar, y en cuanto decide que el dedo está desplazando manda `pointercancel` y deja de informar del movimiento: el gesto llega cortado y no alcanza el mínimo para contar como deslizamiento. En el index casi siempre se acierta sobre .lb-stage, que tiene `pan-x` y por tanto NO cede el eje vertical; en el masterplan la caja de la foto es más chica y queda mucho más overlay alrededor, así que el dedo cae fuera y el navegador se queda el gesto. Estos dos visores son ventanas modales: no hay nada que desplazar dentro de ellas. `none` le dice al navegador que no se reserve ningún eje, y entonces el arrastre entero llega a nuestro manejador -- que es quien pasa de foto. De paso sigue sin haber zoom por doble toque, que es lo que `manipulation` venía a resolver. El escenario del index NO entra aquí: ahí sí hace falta que el navegador conserve el desplazamiento vertical de la página (`pan-y`). */ .lightbox, #unitGalleryPhotosOverlay, .lb-stage, .ugp-stage { touch-action: none; } } /* ═══════════════════════════════════════════════════════════════ 8. TELÉFONO TUMBADO (HORIZONTAL) ═══════════════════════════════════════════════════════════════ Un iPhone en horizontal mide 956x440 y un Galaxy 915x412: son ANCHOS pero muy BAJOS. Por eso aquí el recurso escaso es la altura, al revés que en vertical, y los controles anclados arriba y abajo se encimaban. Ojo: estas medidas superan el `max-width:860px` del resto de la hoja — por eso la condición de todos los bloques lleva también `(max-height:560px) and (orientation:landscape)`. Sin eso, en horizontal no se aplicaba NADA de la capa móvil y se veía el diseño de escritorio aplastado. Primero se prueba con el mando un 10% más chico; donde aun así no cabe, se apila o se reparte, no se deja encimado. */ @media (max-height: 560px) and (orientation: landscape) { /* ── 8a. Mando un 10% más chico ─────────────────────────── */ .stage-icon-btn, .stage-drawer-toggle { width: 33px; height: 33px; } .stage-pill { width: 33px; height: 33px; } .stage-chevron { width: 38px; height: 38px; } .stage-icon-btn svg, .stage-drawer-toggle svg, .stage-pill .pill-ico { width: 12px; height: 12px; } .stage-chevron svg { width: 13px; height: 13px; } /* Tumbado el recurso escaso es la ALTURA: los renglones del cajón se aprietan por arriba y por abajo, no de ancho (el ancho ya lo fija 2f). */ .sd-item { padding: 7px 2px; font-size: 9.5px; } .stage-drawer { padding: 46px 10px 12px; } .ug-level-pill, .ug-pill-btn { height: 29px; padding: 0 10px; font-size: 10.5px; } .ug-icon-btn { width: 29px; height: 29px; } #hint, #hint-luma { font-size: 10.5px; padding: 6px 13px; } .stage-caption .sc-label { font-size: 13px; } .stage-caption .sc-desc { font-size: 11px; } /* ── 8b. Margen para la cámara, que ahora está en un LATERAL ── Al girar, la muesca queda a un lado; cuál depende del sentido del giro, así que se reserva sitio en AMBOS bordes y así vale para los dos casos. */ .stage-drawer-toggle, .stage-rail-left { left: 52px; } .stage-rail-right, .stage-pills-right { right: 52px; } .stage-chevron-left { left: 52px; } .stage-chevron-right { right: 52px; } .mp-logo { left: 52px; } #tbPowered.tb-powered { right: 52px; } /* ── 8c. Con tan poca altura, el mando vuelve a fila ───────── En vertical se apilaban para librar la cámara de arriba; tumbado la cámara ya no está arriba y sí sobra ancho, así que la columna solo comería altura inútilmente. Vuelven a fila, pegadas al borde superior. */ .stage-pills-right { top: 10px; flex-direction: row; align-items: center; gap: 6px; } .stage-pills-right .stage-pill { width: 33px; } .stage-drawer-toggle { top: 10px; } .stage-rail-left { top: 10px; left: 104px; } /* a la derecha del toggle */ /* Pantalla completa se va al grupo de la IZQUIERDA. Antes estaba a la derecha en right:108px, "a la izquierda de las píldoras" — pero las píldoras en fila miden lo que midan sus textos ("Galería" + "Disponibilidad"), así que se le echaban encima. En el lado izquierdo hay sitio de sobra y el solape deja de depender de cuánto ocupe el texto. */ .stage-rail-right { top: 10px; right: auto; left: 156px; } /* Flechas del recorrido: con 440 px de alto, "abajo" y "centro" casi coinciden -> se centran verticalmente, que es donde cae el pulgar al sujetar el teléfono tumbado. */ .stage-chevron { top: 50%; bottom: auto; transform: translateY(-50%); } /* El aviso no cabe bajo el mando: se va abajo del todo, centrado. */ #hint, #hint-luma { top: auto; bottom: 10px; } /* ── 8d. Paneles: aprovechar el ancho, no la altura ────────── 46svh de 440 px son 200 px: ilegible. Tumbado sobra ancho, así que el panel de nivel pasa a columna lateral de altura completa. */ #floor-panel { left: auto; right: 58px; width: 340px; max-width: 46vw; top: 10px !important; bottom: 10px; max-height: none; transform-origin: right center; } #floor-panel { transform: translateX(12px) scale(.97); } #floor-panel.open { transform: translateX(0) scale(1); } .fp-grid { grid-template-columns: 1fr 1fr; } /* Render del nivel: aquí manda la altura, así que se le da casi toda. */ .lv-img { max-width: 62vw; max-height: 94vh; max-height: 94svh; bottom: 2vh; } /* ── 8e. Vista Aérea CUADRADA A LA PANTALLA ────────────────── En vertical se le daba una caja apaisada para ensanchar el campo de visión. Tumbado la pantalla YA es apaisada (2.17:1), así que la caja recortada solo dejaría bandas muertas arriba y abajo: el visor pasa a ocupar la pantalla completa. */ #modelluma-wrap iframe { inset: 0; top: 0; height: 100%; transform: none; } .luma-badge-left { left: 52px; bottom: 8px; } .luma-badge-left img { height: 32px; } #lumaPowered.luma-powered { right: 52px; bottom: 8px; } /* ── 8f. Galerías: la foto manda, el resto se aprieta ───────── */ .lightbox-body, .ugp-body { height: 88vh; height: 88svh; gap: 6px; } .lightbox-body { --lb-slide-h: 62vh; --lb-slide-h: 62svh; } .ugp-body { --ugp-slide-h: 62vh; --ugp-slide-h: 62svh; } .lightbox-close, .ugp-close { top: 10px; right: 52px; width: 36px; height: 36px; } /* ── 8g. Detalle de departamento ───────────────────────────── Tumbado vuelve a caber el formato de dos columnas del escritorio: la ficha a un lado y la planta al otro, en vez de apilarse y obligar a desplazarse por una pantalla de 440 px. */ #unitGalleryOverlay { flex-direction: row; overflow: hidden; } .ug-sidebar { width: 270px; max-width: 38vw; border-right: 1px solid rgba(17,17,16,.08); border-bottom: none; max-height: none; overflow-y: auto; } .ug-hero { height: 120px; } .ug-title { font-size: 18px; } /* Simetrico. Estaba en "8px 8px 8px 4px": 4px por la izquierda y 8 por la derecha, asi que la planta quedaba 2px descentrada hacia la derecha dentro de su hueco. Con la barra lateral al lado se notaba mas de lo que suena. */ .ug-stage-wrap { padding: 8px; } .ug-style-float { padding: 5px 12px; } .ug-style-pill.act .ug-style-thumb { width: 68px; height: 50px; } } /* ═══════════════════════════════════════════════════════════════ 8b. VISTA AEREA (LUMA) EN MOVIL — QUITAR LOS DESENFOQUES ═══════════════════════════════════════════════════════════════ La vista aerea es un visor de splats de Luma corriendo en un iframe: pinta en WebGL a pantalla completa y se come el GPU entero del telefono. Encima de el se quedan visibles varios elementos con backdrop-filter (el riel, las insignias, el velo .dimmed). Un backdrop-filter obliga al navegador a copiar lo que hay DEBAJO y desenfocarlo EN CADA CUADRO -- y debajo hay un WebGL que cambia constantemente, asi que no se puede cachear nada. En escritorio se nota poco; en un telefono es la diferencia entre ir fluido y ir a tirones. Se apagan solo aqui: solo en movil y solo mientras esta abierta esta vista. El resto del sitio conserva su vidrio esmerilado intacto. Es el mismo criterio que ya usa el proyecto en `body.viz3d .pm` (masterplan.html) y en `.building-stage.transitioning` (site.js): cuando algo pinta a 60fps por debajo, los desenfoques de encima se apagan. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { body.vizluma *, body.vizluma *::before, body.vizluma *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ═══════════════════════════════════════════════════════════════ 8b-2. GALERIA DEL DEPA — CORRER LA IMAGEN A LA DERECHA ═══════════════════════════════════════════════════════════════ La planta (y el 3D y el sketch) se veian pegadas a la izquierda: la barra lateral esta a ese lado y le come sitio al hueco, asi que el centro optico no coincide con el centro real del recuadro. Se corrige con padding-left, NO con un transform. Es deliberado: el zoom escribe su propio transform en linea sobre .ug-stage-inner (applyUgZoom en masterplan.html), asi que cualquier transform que se pusiera aqui se lo pisaria el primer pellizco. El relleno vive en el contenedor de fuera y no se toca con nada de eso. Tampoco afecta a los gestos: los manejadores cuelgan de .ug-stage, que es el hijo, y el touch-action de .ug-stage-wrap (seccion 11) sigue igual. PARA AJUSTARLO: subir o bajar --encuadre-derecha. Mas alto = mas a la derecha. Solo movil; en escritorio no se toca nada. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* Los tres estilos (Planta Arq., 3D y Sketch) comparten desplazamiento: 6px. Hubo un momento en que la planta llevaba 9px y los otros dos 6px, con un :has() sobre la pildora activa para distinguirlos. Ya no hace falta -- los tres se leen centrados con el mismo valor, asi que se deja UN solo numero en vez de dos reglas que podian desincronizarse. */ #unitGalleryOverlay .ug-stage-wrap { --encuadre-derecha: 6px; padding-left: calc(8px + var(--encuadre-derecha)); } } /* ═══════════════════════════════════════════════════════════════ 8c. VISTA AEREA (LUMA) EN MOVIL — MARCO QUE ENCOGE TODO ═══════════════════════════════════════════════════════════════ El visor de Luma es un iframe de otro dominio: no se le puede tocar la camara ni la distancia desde aqui, y su embed no expone parametro de zoom. Para alejar la vista hay que encogerla desde fuera. COMO SE HACE: una sola transformacion de escala sobre el contenedor entero. Al escalar el contenedor, TODO lo que vive dentro se encoge y se recoloca solo y en proporcion -- el iframe de Luma, los degradados, el velo de carga, el isotipo de MAREA RESIDENCES y la pildora de "Powered by Spectra". Ninguno se sale del marco ni hay que reposicionarlos a mano. POR QUE NO CON MARGENES (el intento anterior, que estaba mal): recortar el iframe con `inset` solo movia SUS bordes. Luma seguia dibujando su escena al tamano que el creia tener, asi que la imagen se salia por detras del marco en vez de meterse dentro, y las insignias se quedaban donde estaban. Con la escala eso no pasa: el navegador encoge el resultado ya pintado. El borde va SOLIDO y con overflow:hidden, asi que nada puede asomar fuera. PARA AJUSTARLO basta el numero de --luma-escala: mas bajo = se ve mas pequeno y mas alejado, con mas marco alrededor. 1 = pantalla completa. */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { #modelluma-wrap { --luma-escala: 0.69; transform: scale(var(--luma-escala)); transform-origin: center center; /* El marco. overflow:hidden ya venia en la regla base; se repite aqui junto al radio para que el redondeo recorte de verdad el contenido. */ overflow: hidden; border-radius: 18px; border: 1px solid rgba(17, 17, 16, 0.14); box-shadow: 0 14px 44px rgba(17, 17, 16, 0.22); } /* NO ESCALAR EL IFRAME POR SEPARADO -- se intento y se descarto. Pintar Luma a menos resolucion (iframe mas pequeno + escala inversa) daba mas fluidez, pero rompia algo que importa mas: el isotipo de MAREA RESIDENCES y la pildora de "Powered by Spectra" no son adorno, estan colocados justo encima del logo de Luma y del nombre de usuario para que no se vean. Al escalar solo el iframe, la marca de Luma crecia con el y las insignias se quedaban a su tamano, asi que dejaban de taparla. Con la escala en el CONTENEDOR (arriba) eso no puede pasar: el iframe y las insignias encogen juntos y en la misma proporcion, asi que lo que tapaba antes sigue tapando igual. Si algun dia se reintenta lo de la resolucion, hay que resolver la tapa en el mismo cambio. */ } /* ═══════════════════════════════════════════════════════════════ 9. SUGERENCIA DE GIRAR LA PANTALLA (solo móvil, solo masterplan) ═══════════════════════════════════════════════════════════════ El masterplan se aprovecha mucho mejor en horizontal. Al entrar se muestra una capa a pantalla completa con el fondo desenfocado y un icono de girar; dura 3 segundos y se va sola. No bloquea: es una sugerencia, el usuario decide. Solo aparece una vez por sesión (ver mobile.js). */ .girar-aviso { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: rgba(17, 17, 16, 0.42); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .girar-aviso.visible { opacity: 1; } .girar-icono { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); color: #fff; animation: girarVaiven 2.1s ease-in-out infinite; } .girar-icono svg { width: 46px; height: 46px; } /* El icono bascula como un teléfono girando: comunica la acción sin texto */ @keyframes girarVaiven { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-82deg); } 70% { transform: rotate(-82deg); } } .girar-texto { color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); max-width: 260px; } .girar-texto small { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; opacity: 0.78; } /* Ya está en horizontal: no tiene sentido sugerir nada. */ @media (orientation: landscape) { .girar-aviso { display: none; } } /* A quien pidió menos animación se le quita el vaivén, no el aviso. */ @media (prefers-reduced-motion: reduce) { .girar-icono { animation: none; } } /* ═══════════════════════════════════════════════════════════════ 9b. AVISO DE DOBLE CLIC, DENTRO DEL VISOR DE UN RECORRIDO (movil) ═══════════════════════════════════════════════════════════════ INDEPENDIENTE del aviso de girar de la seccion 9. A proposito: son dos avisos distintos, para dos sitios distintos, y tocar uno no debe cambiar el otro. No comparten NI UNA clase NI UN @keyframes -- todo aqui empieza por .dclic- y su animacion propia es dobleToque. La seccion 9 (.girar-*, girarVaiven) es solo para la entrada al masterplan y no se toca desde aqui. Si algun dia hay que cambiar el aspecto de uno de los dos, se cambia el suyo y el otro se queda como esta. Dos diferencias con el de la seccion 9: 1. NO cubre la pantalla entera. Va DENTRO del visor (position:absolute sobre el contenedor del iframe), asi que tapa solo el marco del recorrido y no el resto de la interfaz. Los tres contenedores -- #ugTour, #ugMaterialTour y #amenityTourOverlay -- ya estan posicionados, y los dos primeros llevan overflow:hidden con esquinas redondeadas, asi que el aviso se recorta solo a la forma del marco. 2. Lleva pointer-events:none SIEMPRE y en toda la capa. Va encima de un tour 360 que se maneja arrastrando el dedo, y bajo ningun concepto debe comerse un gesto -- el tour tiene que funcionar igual con el aviso puesto. Por eso tampoco se cierra al tocarlo: se cierra solo a los 3 s. Solo lo llevan tres: cambio de material, recorrido de los niveles y el de PB (amenidades). El de "Ubicacion 360" del index queda fuera, que ya se abre a pantalla completa (ver mobile.js). */ .dclic-aviso { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: rgba(17, 17, 16, 0.42); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .dclic-aviso.visible { opacity: 1; } .dclic-icono { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); color: #fff; position: relative; } .dclic-icono svg { width: 44px; height: 44px; } /* El punto que "toca" dos veces seguidas y descansa: comunica el doble clic sin necesidad de leer el texto. Animacion propia, no la de la seccion 9. */ .dclic-punto { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); animation: dobleToque 2.2s ease-in-out infinite; } @keyframes dobleToque { 0% { transform: scale(0.2); opacity: 0; } 8% { transform: scale(1); opacity: 0.85; } 16% { transform: scale(0.2); opacity: 0; } 24% { transform: scale(1); opacity: 0.85; } 32%, 100% { transform: scale(0.2); opacity: 0; } } .dclic-texto { color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); max-width: 260px; } .dclic-texto small { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; opacity: 0.78; } @media (prefers-reduced-motion: reduce) { .dclic-punto { animation: none; opacity: 0.85; } } /* ═══════════════════════════════════════════════════════════════ 10. AJUSTES FINOS DE MÓVIL ═══════════════════════════════════════════════════════════════ */ @media (max-width: 860px), (max-height: 560px) and (orientation: landscape) { /* ── 10a. DISPONIBILIDAD: el contador deja de estorbar al cerrar ── La tarjeta de conteo va arriba a la derecha y coloca en HORIZONTAL el número, un separador y el carrusel de 150-210px. En un teléfono eso la estira hasta media pantalla y se acerca al botón de cerrar, que está arriba a la izquierda. Se apila en vertical: mucho más estrecha, deja libre toda la franja del cerrar y el carrusel sigue completo. */ .stage-avail-legendcard .acw { flex-direction: column; align-items: stretch; gap: 7px; } .stage-avail-legendcard .acw-count { flex-direction: row; align-items: baseline; gap: 6px; } /* El separador era una línea vertical entre columnas; apilado va horizontal */ .stage-avail-legendcard .acw-sep { width: auto; height: 1px; align-self: stretch; } /* Se ensancha para que las opciones vecinas ASOMEN a los lados: sin eso parecía un cuadro fijo con una sola opción y nadie adivinaba que giraba. El difuminado de los bordes remata la idea de "hay más a los lados". */ .stage-avail-legendcard .acw-carousel { width: 172px; height: 26px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); touch-action: pan-y; /* el arrastre horizontal es nuestro */ } /* Las no activas se atenúan, como en el carrete de estilos: se ve de un vistazo cuál manda. */ .stage-avail-legendcard .acw-opt { opacity: .45; transition: opacity .25s ease; } .stage-avail-legendcard .acw-opt.active { opacity: 1; } .stage-avail-legendcard .acw-number { font-size: 17px; } .stage-avail-legendcard .acw-word { font-size: 9px; } .stage-avail-legendcard { padding: 9px 11px; max-width: calc(100vw - 82px); /* nunca alcanza al botón de cerrar */ } /* Botón de cerrar por encima de todo y con área de toque cómoda */ .stage-avail-close { width: 40px; height: 40px; z-index: 12; } /* ── 10b. RECORRIDO 360: separarlo de la interfaz ──────────────── En modo recorrido el reproductor va a sangre (padding:0) y queda pegado al render de la unidad que tiene encima en la columna. Un margen pequeño los despega y deja claro dónde acaba uno y empieza el otro. */ #unitGalleryOverlay.tour-mode .ug-stage-wrap { padding: 10px; } #unitGalleryOverlay.tour-mode .ug-tour { border-radius: 14px; box-shadow: 0 8px 26px rgba(17, 17, 16, 0.22); } /* La barra flotante del 360 cuelga del borde del wrap: se reajusta al margen */ #unitGalleryOverlay.tour-mode .ug-stage-top { padding: 16px 18px; } } /* ─── 10c. MASTERPLAN: las píldoras del centro no caben ────── #glass-actions ("Vista Aérea" / "Galería") va centrado arriba, y a los lados tiene el riel de iconos (izquierda, hasta los 62px) y el riel de niveles (derecha, 96px de ancho). En un teléfono de 412px eso deja 254px libres en el centro, y las píldoras a tamaño de escritorio se salían de esa banda: se montaban sobre los dos rieles — que es lo que se veía en pantalla. No se reorganizan (quedaron aprobadas tal cual): solo se ajustan para caber en la banda central. */ @media (max-width: 860px) { #glass-actions { gap: 6px; max-width: calc(100vw - 168px); } .glass-btn { height: 30px; padding: 0 10px; font-size: 10.5px; gap: 4px; white-space: nowrap; } .glass-btn svg { width: 13px; height: 13px; } } /* ─── 10d. HORIZONTAL: el "powered by" fuera del riel ──────── Tumbado quedan 440px de alto y los 15 niveles del riel se reparten hasta el borde inferior — justo donde vive el "Powered by Spectra" (right:52px), que cae dentro de la banda de 96px del riel y se monta sobre los números. Se aparta lo justo para librarlo. */ @media (max-height: 560px) and (orientation: landscape) { #tbPowered.tb-powered { right: 112px; bottom: 8px; } } /* ─── 10e. MASTERPLAN: alinear el mando superior ───────────── Las píldoras "Vista Aérea" / "Galería" (#glass-actions) iban en top:13px y el botón "← Sitio" del topbar a media altura de una barra de 60px, o sea centrado en ~30px: no estaban a la misma altura y se veía descuadrado. Se suben al mismo eje, centradas horizontalmente. */ @media (max-width: 860px) { /* CUIDADO: #glass-actions es position:fixed, así que un top:50% lo mandaba a la mitad de la PANTALLA, no del topbar — que es lo que pasaba y por eso las píldoras salían flotando a media altura sobre el edificio. El botón "← Sitio" vive en un topbar de 60px con los hijos centrados: su borde superior cae en ~14px. Se iguala ese valor. */ #glass-actions { top: 14px; left: 50%; transform: translateX(-50%); z-index: 51; /* el topbar es z-index:50; hay que quedar por encima */ } #topbar { height: 60px; } } /* ─── 10f. MASTERPLAN: logo más pequeño y a ras del "powered by" ── El logo MAREA RESIDENCES mide 69px de alto desde bottom:20px (llega hasta los 89) y quedaba muy por encima del "Powered by Spectra", que es una píldora de ~24px en bottom:20px. Se iguala su base y se reduce para que no compita. */ @media (max-width: 860px) { .mp-logo { height: 40px; bottom: 10px; left: 12px; } #tbPowered.tb-powered { bottom: 12px; } } /* ─── 10g. DISPONIBILIDAD: encuadrar con el edificio ───────── .stage-avail-media va a width:100% con proporción 1360x768. En un teléfono vertical eso da una franja de 412x232 en medio de una pantalla negra, y el edificio —que ocupa solo el 18% del ancho de esa imagen— queda diminuto. Se aplica el mismo criterio que el hero del index: LLENAR en vez de ajustar. Fijando la altura al 100%, la proporción calcula el ancho (1.77x la altura) y el contenedor, que ya es overflow:hidden y centra, recorta los lados —que son ciudad, no edificio. En 412x915 el edificio entra completo y grande. La malla SVG va en inset:0 dentro del mismo contenedor, así que escala con él y los polígonos siguen calzando exactos; además, al ser más grandes, se vuelven mucho más fáciles de tocar con el dedo. */ @media (max-width: 860px) and (orientation: portrait) { .stage-avail-media { width: auto; height: 100%; max-width: none; } } /* Tumbado la pantalla ya es apaisada como la imagen: basta con llenar el ancho y dejar que la altura la ponga la proporción. */ @media (max-height: 560px) and (orientation: landscape) { .stage-avail-media { width: 100%; height: auto; } } /* ═══════════════════════════════════════════════════════════════ 11. QUE EL NAVEGADOR NO SE QUEDE LOS GESTOS ═══════════════════════════════════════════════════════════════ `touch-action` le dice al navegador qué desplazamientos son SUYOS. Lo que no le cedas, te lo deja a ti. Si no se declara, en cuanto detecta un arrastre se lo queda, deja de mandar `touchend` y manda `touchcancel` — y el gesto se perdía. mobile.js ya contempla `touchcancel`, pero declararlo aquí evita además el tirón de que la página se mueva un poco antes de rendirse. El criterio es: se cede el eje por el que NO navegamos. */ @media (hover: none), (pointer: coarse) { /* Recorrido del index: navegamos en horizontal -> el vertical es del navegador (hay que poder seguir bajando por la página). */ .building-stage { touch-action: pan-y; } /* Masterplan: se cambia de nivel en vertical y la página no se desplaza (html y body van en overflow:hidden) -> ningún eje es del navegador. */ body.mp-tactil, #level-img-wrap, #modelluma-wrap { touch-action: none; } /* Visores de fotos: se pasa foto en vertical -> el horizontal se cede. */ #galleryLightbox, #unitGalleryPhotosOverlay { touch-action: pan-x; } /* Disponibilidad: el carrusel se gira en horizontal; el resto de la vista no tiene nada que desplazar. */ #stageAvailCarousel { touch-action: pan-y; } #stageAvailFullscreen { touch-action: none; } /* Detalle de departamento: se cambia de estilo en horizontal y de nivel en vertical, pero la ficha lateral SÍ necesita desplazarse. */ #unitGalleryOverlay .ug-stage-wrap { touch-action: none; } #unitGalleryOverlay .ug-sidebar { touch-action: pan-y; } /* El recorrido 360 lo gobierna su propio reproductor: no se le toca. */ #unitGalleryOverlay.tour-mode .ug-stage-wrap, .ug-tour, .ug-tour iframe { touch-action: auto; } } /* ═══════════════════════════════════════════════════════════════ 12. DISPONIBILIDAD EN MÓVIL — REORGANIZACIÓN DE LA CABECERA ═══════════════════════════════════════════════════════════════ Problemas que se veían en pantalla: · El botón de música se reubica en top:20/right:20 mientras esta vista está abierta (regla body.avail-open de styles.css) — justo encima de la tarjeta de conteo. · La tarjeta competía por el mismo hueco que el botón de cerrar, y con el ancho recortado el texto salía cortado ("18 DEPARTAMENT…"). · Con tan poco sitio, el carrusel solo mostraba una opción: no había forma de llegar a Reservado, Ocupado ni Todos. Solución: la tarjeta deja de pelear por una esquina y pasa a ser una BARRA de ancho completo bajo el botón de cerrar. Ahí caben el conteo y el carrusel en horizontal, con sitio de sobra para ver 2-3 opciones a la vez. */ @media (max-width: 860px) { /* Barra de ancho completo, debajo del cerrar */ .stage-avail-legendcard { top: 64px; left: 14px; right: 14px; bottom: auto; max-width: none; width: auto; padding: 9px 12px; } /* Vuelve a fila: ahora sí hay ancho para el conteo y el carrusel juntos */ .stage-avail-legendcard .acw { flex-direction: row; align-items: center; gap: 10px; } .stage-avail-legendcard .acw-count { flex-direction: column; align-items: flex-start; gap: 1px; flex: 0 0 auto; } .stage-avail-legendcard .acw-sep { width: 1px; height: auto; align-self: stretch; } .stage-avail-legendcard .acw-number { font-size: 19px; } .stage-avail-legendcard .acw-word { font-size: 8.5px; letter-spacing: .05em; } /* El carrusel se queda con TODO el ancho sobrante: con eso se ven la opción activa y sus vecinas, y se puede tocar cualquiera o deslizar para girar. */ .stage-avail-legendcard .acw-carousel { flex: 1 1 auto; width: auto; min-width: 0; height: 28px; } .stage-avail-legendcard .acw-opt { font-size: 11px; padding: 6px 11px; } /* El detalle sube un poco para no quedar bajo la barra del navegador */ .stage-avail-detailcard { bottom: 16px; } } /* ═══════════════════════════════════════════════════════════════ 13. MASTERPLAN: QUE LA PLANTA SE VEA CON EL PANEL ABIERTO ═══════════════════════════════════════════════════════════════ El render del nivel (.lv-img) está anclado abajo, y el panel de nivel ocupa justo esa mitad inferior: al abrirlo tapaba la planta entera y solo asomaba un filo por el costado. Se estaba eligiendo un nivel sin poder verlo. Concepto que se aplica (el mismo del análisis por unidad): el panel manda abajo y el contenido sube. Mientras el panel está abierto, el render se levanta por encima de él y se ajusta al hueco que queda libre. Al cerrarlo vuelve a su sitio de siempre. Se detecta con :has() y, para navegadores que aún no lo soporten, con una clase que pone mobile.js. */ @media (max-width: 860px) and (orientation: portrait) { body:has(#floor-panel.open) .lv-img, body.panel-nivel-abierto .lv-img { bottom: 50svh; /* justo por encima del panel */ max-height: 40svh; max-width: 96vw; } /* La transición hace que el salto se lea como un movimiento, no como un corte. Va en .lv-img directamente para no tocar el masterplan. */ .lv-img { transition: opacity .25s ease, bottom .28s ease, max-height .28s ease; } /* El panel un poco más bajo, para dejarle aún más aire a la planta */ #floor-panel { max-height: 44vh; max-height: 44svh; } } /* Tumbado el panel es una columna lateral, así que el render no queda tapado: ahí no hace falta moverlo. */ @media (max-height: 560px) and (orientation: landscape) { body:has(#floor-panel.open) .lv-img, body.panel-nivel-abierto .lv-img { bottom: 2vh; max-height: 94svh; } } /* ═══════════════════════════════════════════════════════════════ 14. GALERÍAS EN MÓVIL: SIN CARRETE, LA FOTO A PANTALLA ═══════════════════════════════════════════════════════════════ En escritorio el carrete tiene sentido: se ven la foto activa y trozos de las vecinas, que invitan a seguir. En un teléfono ese mismo recurso solo quita sitio — la foto acaba pequeña y las vecinas son dos manchas borrosas. Aquí se cambia por lo simple: UNA foto, encuadrada a la pantalla, y las demás ocultas. Se pasa con el gesto o con los botones, y el cambio es un fundido en vez de un desplazamiento. La cinta lleva !important porque layout() le escribe un transform en línea para centrar el carrete: sin eso la seguiría desplazando. */ @media (max-width: 860px) { .lb-track, .ugp-track { position: absolute; inset: 0; display: block; row-gap: 0; transform: none !important; transition: none; } .lb-slide, .ugp-slide { position: absolute; inset: 0; height: auto; width: auto; padding: 0; opacity: 0; filter: none; transform: none; transition: opacity .32s ease; pointer-events: none; } /* La activa se queda ENCIMA (z-index) pero CONSERVA su transicion. Hubo un intento de ponerle `transition: none` para que apareciera de golpe y no se cruzaran dos capas semitransparentes. Salio peor: si el JS deja un solo fotograma sin ninguna diapositiva marcada como activa -- entre quitar la clase a una y ponersela a la otra -- ese hueco antes lo disimulaba el fundido, y sin transicion se ve como un parpadeo seco al fondo del visor. Se deja la transicion; el z-index basta para que la entrante mande. */ .lb-slide.act, .ugp-slide.act { opacity: 1; filter: none; transform: none; z-index: 2; pointer-events: auto; } /* SIN DECORACION DE CAJA EN NINGUNA CAPA DEL VISOR. Con object-fit:contain la caja de cada capa es mas grande que la foto que se ve dentro, asi que cualquier sombra, borde o fondo se dibuja en el aire alrededor de la imagen y se lee como un marco fantasma -- el borde que se veia bajo la flecha de bajar. Se barren TODAS las capas implicadas en vez de ir una por una: son elementos que solo deben aportar la foto, ninguno tiene por que pintar decoracion propia. Solo en movil; en escritorio la sombra se conserva, que alli la caja si se cine a la foto. */ .lb-track, .ugp-track, .lb-slide, .ugp-slide, .lb-slide img, .ugp-slide img, .lb-stage, .ugp-stage { box-shadow: none !important; border: 0 !important; outline: none !important; border-radius: 0 !important; background: none !important; } /* La foto se ajusta al encuadre completo de la pantalla, sin recortar. SIN SOMBRA NI ESQUINAS REDONDEADAS, y no es un capricho: con object-fit:contain la CAJA del ocupa el 100% del hueco, pero la foto de verdad queda mas pequena dentro, con bandas vacias arriba y abajo. La sombra que hereda de escritorio (.ugp-slide img / .lb-slide img, en masterplan.html e index) se dibuja alrededor de esa CAJA, no de la foto: el resultado era un rectangulo redondeado flotando en el aire por debajo de la imagen -- el "marco raro" que se veia bajo la flecha de bajar. Lo mismo con el border-radius: redondeaba las esquinas de la caja, que estan donde no hay nada que redondear. En escritorio la sombra si vale, porque alli la imagen se dimensiona con max-width/max-height y la caja se cine a la foto. */ .lb-slide img, .ugp-slide img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; } /* El panel ocupa la pantalla; ya no hace falta reservar hueco para la tira */ .lightbox-body, .ugp-body { height: 82svh; padding-right: 0; } /* La tira ya estaba oculta en móvil; se confirma por si alguna regla la devolviera. */ .lightbox-strip, .ugp-strip { display: none !important; } /* La foto sigue al dedo (ver galeriaConGestos en mobile.js): su capa se promueve para que ese arrastre no repinte nada. */ .lb-slide.act img, .ugp-slide.act img { will-change: transform; } } /* ═══════════════════════════════════════════════════════════════ 15. CONTACTO EN EL TELÉFONO: HOJA A PANTALLA COMPLETA ═══════════════════════════════════════════════════════════════ Era la tarjeta de escritorio encogida: 88vh de alto (que en un teléfono incluye la barra del navegador, así que el pie quedaba cortado), la "X" montada sobre el renglón de "Aparta tu departamento", y los campos a 14.5 px. Ese último detalle era el más dañino: Safari de iOS AMPLÍA LA PÁGINA al enfocar cualquier campo con letra menor de 16 px, y no la devuelve al salir. Tras escribir el nombre, la ventana entera quedaba ampliada: los textos se salían por los lados y los desplegables se veían cortados. Ahora es una hoja que sube desde abajo y ocupa la pantalla: la cabecera queda fija arriba con su "X" y lo que se desplaza es solo el formulario. Los campos van a 16 px, a 48 px de alto (cómodos para el pulgar) y los desplegables se dibujan propios -- flecha de marca, texto que se recorta con "…" en vez de desbordar -- para verse igual en iPhone y en Android. */ @media (max-width: 860px) { #contactModal { padding: 0; align-items: flex-end; } #contactModal .contact-modal-card { width: 100%; max-width: none; height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: none; padding: 0; gap: 0; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(28px); transition: transform .42s cubic-bezier(.32, .72, 0, 1); } #contactModal.open .contact-modal-card { transform: none; } #contactModal .modal-x { top: 12px; right: 12px; width: 38px; height: 38px; z-index: 3; } /* La cabecera no se desplaza: se reserva sitio a los dos lados para la "X" y el texto queda centrado de verdad, sin chocar con ella. */ #contactModal .cm-head { flex-shrink: 0; margin: 0; padding: 18px 56px 12px; border-bottom: 1px solid rgba(17, 17, 16, .07); } #contactModal .cm-head .eyebrow { font-size: 10px; letter-spacing: .14em; gap: 7px; justify-content: center; flex-wrap: wrap; } #contactModal .eyebrow-iso-img { width: 18px; height: 18px; } #contactModal .cm-head h2 { font-size: 21px; line-height: 1.15; margin: 6px 0; } #contactModal .cm-head p { font-size: 12.5px; line-height: 1.45; } #contactModal .form-card { flex: 1; min-height: 0; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 18px 24px; scrollbar-width: none; } #contactModal .form-card::-webkit-scrollbar { display: none; } @supports (padding-bottom: env(safe-area-inset-bottom)) { #contactModal .form-card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } } /* Los campos entraban uno a uno al aparecer en pantalla (site.js, con un retraso de 0.055 s por campo): en escritorio es un detalle, pero dentro de una hoja que se desplaza con el dedo el último campo tardaba casi un segundo en verse y se leía como un hueco en blanco -- el "Mensaje" que no salía. En el teléfono están ahí desde el principio. */ #contactModal #leadForm .field, #contactModal .form-foot { opacity: 1; transform: none; transition: none; } #contactModal .form-grid { grid-template-columns: 1fr; gap: 14px; } #contactModal .field { gap: 6px; min-width: 0; } #contactModal .field label { font-size: 12px; } #contactModal .field input, #contactModal .field select, #contactModal .field textarea { font-size: 16px; width: 100%; min-width: 0; } #contactModal .field input, #contactModal .field select { height: 48px; padding: 0 14px; } #contactModal .field textarea { min-height: 96px; padding: 12px 14px; } #contactModal .field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3B5F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--ink); } #contactModal .form-foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 18px; } #contactModal .consent { font-size: 12.5px; line-height: 1.45; } #contactModal .consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0; } /* El envío es LA acción de la hoja: botón lleno, a lo ancho y a la altura del pulgar, en vez de la píldora blanca de escritorio. */ #contactModal .form-foot .btn { width: 100%; min-height: 52px; justify-content: center; background: var(--accent); color: #fff; border-color: var(--accent); } } /* ═══════════════════════════════════════════════════════════════ 16. MASTERPLAN EN TELÉFONO VERTICAL: 3/4 PARA VER, 1/4 PARA LA HOJA ═══════════════════════════════════════════════════════════════ La pantalla se parte en horizontal: los tres cuartos de arriba son para lo que se mira (el plano del nivel, o la lámina del departamento) y el cuarto de abajo es una HOJA que se arrastra. Tiene tres alturas: · oculta -- solo asoma el asa, para dejar la vista entera · cuarto -- la de reposo: 1/4 de la pantalla · completa -- sube hasta arriba para leer con calma Se arrastra desde el asa (o la cabecera), un toque en el asa alterna entre cuarto y completa, y un gesto rápido basta aunque no llegue lejos (ver crearHoja en mobile.js). Son DOS hojas con el mismo mecanismo: · en el masterplan, #floor-panel (la ficha del nivel). Los dos indicadores de nivel de siempre -- el riel de la derecha y la regla de la izquierda -- SE QUEDAN (el cliente los pidió de vuelta: una fila de números en la hoja no le gustó), compactos y dentro de los 3/4 de arriba, y el plano se ajusta al hueco que dejan entre los dos. Se sigue cambiando de nivel deslizando arriba/abajo sobre el plano; · en el análisis por nivel, .ug-sidebar (toda la ficha que antes iba al costado) sobre la lámina, que se queda con los 3/4 de arriba. Todo cuelga de html.hoja-movil, que pone mobile.js SOLO en teléfono vertical. Tumbado y en escritorio no cambia nada. */ .hoja-asa { display: none; } html:not(.hoja-movil) .hs-torre-movil { display: none; } html.hoja-movil #hint, html.hoja-movil .tb-rail-right { display: none !important; } /* ── Los dos indicadores de nivel, compactos y sobre la vista ────── Mismo aspecto y mismo comportamiento que siempre (tocar un número cambia de nivel; deslizar sobre el plano también), solo que más estrechos y limitados a los 3/4 de arriba: terminan donde empieza la hoja y la acompañan cuando sube o baja. */ html.hoja-movil #rail { top: 70px; bottom: calc(var(--hoja-vis, 25svh) + 6px); width: 44px; padding: 0; justify-content: center; overflow-y: auto; background: linear-gradient(270deg, rgba(246, 244, 240, .92) 45%, transparent); transition: bottom .4s cubic-bezier(.32, .72, 0, 1); } html.hoja-movil .rail-inner { max-height: 100%; padding: 6px 4px; gap: 4px; } html.hoja-movil .ri { width: 32px; height: 26px; border-radius: 8px; font-size: 10.5px; } html.hoja-movil .ri.am { font-size: 9.5px; } html.hoja-movil #floor-beacon { left: 6px; top: calc((100% - var(--hoja-vis, 25svh)) / 2); transition: opacity .4s, top .4s cubic-bezier(.32, .72, 0, 1); } html.hoja-movil .fb-line { height: 24px; gap: 5px; padding: 0 3px; } html.hoja-movil .fb-tick { width: 9px; } html.hoja-movil .fb-line.act .fb-tick { width: 17px; height: 2px; } html.hoja-movil .fb-lbl { font-size: 9px; } html.hoja-movil .fb-line.act .fb-lbl { font-size: 10px; } /* ── El asa ─────────────────────────────────────────────────── */ html.hoja-movil .hoja-asa { display: flex; align-items: center; justify-content: center; height: 32px; flex-shrink: 0; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; } .hoja-asa-barra { width: 42px; height: 5px; border-radius: 3px; background: rgba(17, 17, 16, .22); transition: background .2s ease, width .2s ease; } html.hoja-movil .hoja-asa:active .hoja-asa-barra { background: rgba(27, 59, 95, .5); width: 50px; } /* ── Hoja del masterplan (#floor-panel) ─────────────────────── */ html.hoja-movil #floor-panel { left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; max-height: none; border-radius: 22px 22px 0 0; border-bottom: 0; opacity: 1 !important; pointer-events: auto !important; /* Casi sólida: el mar turquesa de detrás teñía de verde el texto. */ background: rgba(255, 255, 255, .93); box-shadow: 0 -12px 34px rgba(11, 32, 56, .16); z-index: 60; will-change: transform; } html.hoja-movil .fp-head { padding: 0 16px 8px; border-bottom: 0; touch-action: none; } html.hoja-movil .fp-title { font-size: 16px; } html.hoja-movil .fp-sub { font-size: 11px; margin-top: 1px; } html.hoja-movil .fp-close { display: none; } html.hoja-movil .fp-stats { padding: 8px 12px; border-top: 1px solid rgba(17, 17, 16, .07); } html.hoja-movil .fp-stat-n { font-size: 16px; } html.hoja-movil .fp-stat-l { font-size: 8.5px; letter-spacing: .06em; } html.hoja-movil .fp-grid-wrap { padding: 12px 12px 16px; overscroll-behavior: contain; } html.hoja-movil .fp-grid-label { margin-bottom: 8px; } /* ── La vista de arriba ───────────────────────────────────────── El plano se centra en el hueco que deja la hoja (--hoja-vis lo publica mobile.js) y cabe ENTERO entre la regla de la izquierda y el riel de la derecha (54 px por lado). Antes iba al 128 % del ancho: se recortaban los extremos, los dos indicadores le caían encima y las ocho píldoras quedaban una encima de otra. */ html.hoja-movil .lv-img { top: calc((100% - var(--hoja-vis, 25svh)) / 2) !important; bottom: auto !important; max-width: calc(100vw - 108px) !important; max-height: calc(100% - var(--hoja-vis, 25svh) - 150px) !important; transition: opacity .25s ease, top .4s cubic-bezier(.32, .72, 0, 1) !important; } /* Píldoras de departamento a la escala del plano: entre los dos indicadores cada unidad mide ~28 px de ancho en pantalla, así que la píldora tiene que caber en eso ("1704" a 8 px ocupa ~25). El nombre de torre deja de repetirse ocho veces: va UNA vez sobre cada torre. */ html.hoja-movil .hs-label { min-width: 0; height: 16px; padding: 0 3px; font-size: 8px; letter-spacing: 0; border-width: 0; box-shadow: 0 2px 6px rgba(11, 32, 56, .34); } html.hoja-movil .hs-torre { display: none; } .hs-torre-movil { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 7px)); padding: 4px 10px; border-radius: 999px; background: rgba(27, 59, 95, .78); font: 700 8.5px/1 var(--font-b); letter-spacing: .2em; text-transform: uppercase; color: #EDD8C4; white-space: nowrap; pointer-events: none; } /* ── Mando de arriba: la misma rejilla que el index ──────────── Círculos de 37 px con paso de 50 (16 → 66 → 116), igual que las dos columnas del index. "← Sitio" arriba a la izquierda, Consultar y Brochure debajo; Galería pasa a la derecha como icono, que es donde vive en el index. */ html.hoja-movil #topbar { height: auto; top: 16px; padding: 0 12px; } html.hoja-movil .tb-back { height: 37px; padding: 0 15px; font-size: 12.5px; display: inline-flex; align-items: center; } html.hoja-movil .tb-rail-left { top: 66px; left: 12px; gap: 13px; } html.hoja-movil .tb-icon-btn { width: 37px; height: 37px; } html.hoja-movil .tb-icon-btn svg { width: 15px; height: 15px; } html.hoja-movil .tb-icon-label { display: none; } html.hoja-movil #glass-actions { left: auto; right: 12px; top: 16px; transform: none; width: auto; max-width: none; } html.hoja-movil .glass-btn { width: 37px; height: 37px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; font-size: 0; /* el texto "Galería" se oculta; queda el icono */ } html.hoja-movil .glass-btn svg { width: 15px; height: 15px; opacity: .85; } @supports (top: env(safe-area-inset-top)) { html.hoja-movil #topbar { top: calc(16px + env(safe-area-inset-top, 0px)); } html.hoja-movil .tb-rail-left { top: calc(66px + env(safe-area-inset-top, 0px)); } html.hoja-movil #glass-actions { top: calc(16px + env(safe-area-inset-top, 0px)); } } /* Marca y "Powered by": encima de la hoja, acompañándola. */ html.hoja-movil .mp-logo { height: 38px; left: 12px; bottom: calc(var(--hoja-vis, 25svh) + 10px); transition: bottom .4s cubic-bezier(.32, .72, 0, 1); } html.hoja-movil #tbPowered.tb-powered { right: 12px; font-size: 9.5px; padding: 4px 10px; bottom: calc(var(--hoja-vis, 25svh) + 16px); transition: bottom .4s cubic-bezier(.32, .72, 0, 1); } /* ── Análisis por nivel: la lámina arriba, la ficha en la hoja ── */ html.hoja-movil #unitGalleryOverlay { flex-direction: column; overflow: hidden; } html.hoja-movil #unitGalleryOverlay .ug-stage-wrap { position: absolute; left: 0; right: 0; top: 0; flex: none; order: 0; height: calc(100% - var(--ug-vis, 25svh)); padding: 12px 10px 10px; transition: height .4s cubic-bezier(.32, .72, 0, 1); } @supports (padding-top: env(safe-area-inset-top)) { html.hoja-movil #unitGalleryOverlay .ug-stage-wrap { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } } /* El carrete de estilos se va: las tres láminas ya están en la hoja, siempre a la vista, y además se cambia de lámina deslizando sobre ella. Así la lámina se queda con todo el hueco. */ html.hoja-movil #unitGalleryOverlay .ug-style-float { display: none; } html.hoja-movil #unitGalleryOverlay .ug-stage { margin-top: 8px; } html.hoja-movil #unitGalleryOverlay .ug-zoom { right: 12px; bottom: 12px; } html.hoja-movil #unitGalleryOverlay .ug-sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: none; order: 0; z-index: 5; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(17, 17, 16, .08); border-bottom: 0; border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, .9); box-shadow: 0 -12px 34px rgba(17, 17, 16, .14); will-change: transform; } html.hoja-movil .ug-sidebar > * { flex-shrink: 0; } html.hoja-movil .ug-sidebar .hoja-asa { position: sticky; top: 0; z-index: 3; background: rgba(255, 255, 255, .96); border-radius: 22px 22px 0 0; } html.hoja-movil .ug-info { order: 1; padding: 0 16px 18px; gap: 12px; } html.hoja-movil .ug-id-row { align-items: center; touch-action: none; } html.hoja-movil .ug-title { font-size: 22px; } html.hoja-movil .ug-sub { font-size: 11.5px; } /* Las cinco pestañas en UNA fila, para que en el cuarto de reposo se vean todas: las tres láminas y los dos medios. */ html.hoja-movil .ug-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } html.hoja-movil .ug-tab-row { display: contents; } html.hoja-movil .ug-tab { gap: 5px; padding: 2px 0; } html.hoja-movil .ug-tab-ico { width: 42px; height: 42px; } html.hoja-movil .ug-tab-ico svg { width: 17px; height: 17px; } html.hoja-movil .ug-tab-lbl { font-size: 9px; line-height: 1.15; } /* El render ambientado pasa al final de la ficha, como tarjeta. */ html.hoja-movil .ug-hero { order: 2; height: 170px; margin: 0 16px 18px; border-radius: 16px; } @supports (padding-bottom: env(safe-area-inset-bottom)) { html.hoja-movil .ug-hero { margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } } /* ── Galería y video del departamento, DENTRO del visor de 3/4 ───── En el análisis por nivel, "Galería" y "Video" ya no tapan la pantalla: se abren en el mismo visor donde está la lámina, debajo de su barra de arriba, y la ficha sigue abajo. mobile.js muda las dos capas dentro de .ug-stage-wrap al abrirlas desde la ficha y las devuelve al cerrarlas; la galería del botón del masterplan sigue abriéndose a pantalla completa. z-index 4: por debajo de la hoja (5), que así puede subir por encima. */ html.hoja-movil .ug-stage-wrap > #unitGalleryPhotosOverlay.en-visor, html.hoja-movil .ug-stage-wrap > #videoOverlay.en-visor { position: absolute; top: 52px; left: 10px; right: 10px; bottom: 10px; z-index: 4; padding: 0; gap: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(8, 22, 40, .28); } @supports (top: env(safe-area-inset-top)) { html.hoja-movil .ug-stage-wrap > #unitGalleryPhotosOverlay.en-visor, html.hoja-movil .ug-stage-wrap > #videoOverlay.en-visor { top: calc(52px + env(safe-area-inset-top, 0px)); } } html.hoja-movil #unitGalleryPhotosOverlay.en-visor .ugp-body { height: 100%; } html.hoja-movil #unitGalleryPhotosOverlay.en-visor .ugp-close { top: 10px; right: 10px; width: 36px; height: 36px; } html.hoja-movil #unitGalleryPhotosOverlay.en-visor .ugp-nav { width: 38px; height: 38px; } html.hoja-movil #videoOverlay.en-visor { background: #0B2038; backdrop-filter: none; -webkit-backdrop-filter: none; } html.hoja-movil #videoOverlay.en-visor .video-panel { width: 100%; height: 100%; border-radius: 0; box-shadow: none; display: flex; align-items: center; } html.hoja-movil #videoOverlay.en-visor .video-panel video { width: 100%; height: 100%; max-height: none; object-fit: contain; } /* Con un medio abierto, la pestaña encendida es la del medio (Galería o Video), no la lámina que quedó debajo. */ html.hoja-movil #unitGalleryOverlay.con-medio .ug-tab[data-style].act .ug-tab-ico { background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .4)); border-color: rgba(255, 255, 255, .8); color: inherit; animation: none; } html.hoja-movil #unitGalleryOverlay.con-medio .ug-tab[data-style].act .ug-tab-lbl { color: inherit; } /* ═══════════════════════════════════════════════════════════════ 17. BROCHURE: ZOOM CON LOS DEDOS ═══════════════════════════════════════════════════════════════ El visor es el mismo de siempre; solo se le suma pellizcar para acercar y doble toque para alternar entre 1x y 2.5x (ver zoomBrochure en mobile.js). touch-action deja al navegador el desplazamiento normal y le quita el pellizco, que lo maneja la página: así se amplía el documento y no la ventana entera. */ @media (hover: none), (pointer: coarse) { #brochurePages { touch-action: pan-x pan-y; } } /* ═══════════════════════════════════════════════════════════════ 18. AVISO DE GIRAR: BOTÓN "ENTENDIDO" ═══════════════════════════════════════════════════════════════ El aviso llevaba pointer-events:none TAMBIÉN encendido, así que el "un toque lo quita" de mobile.js nunca llegaba: había que esperar los 3 s. Ahora recibe el toque mientras se ve (y mientras se desvanece, para que ese mismo toque no atraviese y pulse algo del masterplan) y lleva un botón en el azul de marca que lo corta en el acto. */ .girar-aviso.visible, .girar-aviso.cerrando { pointer-events: auto; } .girar-ok { margin-top: 4px; min-width: 150px; height: 46px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: #1B3B5F; color: #fff; font: 700 13px/1 var(--font-b, "Montserrat", system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(8, 22, 40, .38); cursor: pointer; transition: transform .16s ease-out, background .2s ease; } .girar-ok:active { transform: scale(.96); background: #264F7C; }