/* MP360 · Jacarandá — capa externa * Entrega 1. Sólo lo necesario para el tooltip de lote y el contenedor del tour. * Tokens tomados del design system del proyecto. */ /* Utilidad compartida: texto que existe para los lectores de pantalla y no se dibuja. Vivia en mp360-legend.css; se mudo aca cuando el proyector de cuota paso a necesitarla, porque no pertenece a ningun componente en particular. */ .mp360-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :root { /* Primary */ --primary-50: #F3F4FF; --primary-700: #4742A1; --primary-800: #332F7B; /* Neutral */ --neutral-50: #FEFEFE; --neutral-200: #E8E8E8; --neutral-950: #151515; --white: #FFFFFF; /* Shape */ --radius-compact: 6px; --radius-control: 8px; --radius-badge: var(--radius-control); --radius-tooltip: var(--radius-compact); /* Tipografía del tour */ /* ---- Curvas del lenguaje de movimiento (FUNCIONES/LENGUAJE-DE-MOVIMIENTO-TERRENE.md) Los dos valores son los del recurso, no elegidos acá: --mp360-ease-ui hover del boton principal AnimatedButton.css --mp360-ease-shape morfologia del boton de menu MenuBtn.css Cualquier transicion perceptible —transform, height, clip-path, width— usa una de las dos. `ease` generico queda solo para cambios de color, donde la curva no se percibe. */ --mp360-ease-ui: cubic-bezier(0.65, 0, 0.076, 1); --mp360-ease-shape: cubic-bezier(0.075, 0.82, 0.165, 1); --mp360-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Superficie del tooltip */ --mp360-tip-bg: var(--primary-700); --mp360-tip-fg: var(--primary-50); } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* la experiencia no scrollea en ningún viewport */ overscroll-behavior: none; background: var(--neutral-950); } .mp360-app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; } .mp360-tour { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; } /* La capa MP360 cubre el viewport pero es transparente al puntero: el tour se sigue arrastrando donde MP360 no ocupa nada. */ .mp360-root { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--mp360-font); } .mp360-root > * { pointer-events: auto; } /* ---------------- Superficie temporal abierta ---------------- Servicios y Galeria son modales: mientras una esta abierta, el recorrido queda subordinado de verdad, no solo tapado. El bloqueo funcional lo hace `inert` sobre navbar, dock y ficha desde mp360-superficies.js. Al panorama lo bloquea EL VELO, que cubre el viewport entero por encima del iframe: comprobado muestreando 352 puntos de la pantalla con una superficie abierta, ninguno llega al iframe. ANTES ACA HABIA `pointer-events: none` SOBRE EL IFRAME. Se retiro. Era redundante —el velo ya bloqueaba— y ademas rompia el tour: al abrir una superficie DESDE UN HOTSPOT, el handler corre dentro del despacho de eventos del propio player, y apagarle los eventos de puntero al iframe en ese momento le arranca el gesto de las manos. El player se queda con su maquina de estados de puntero a medio camino y despues de cerrar la superficie ya no responde al arrastre, aunque la interfaz externa siga funcionando. Reportado tocando el hotspot de Tipuana. La regla de mas abajo no vuelve: si alguna vez hiciera falta reforzar el bloqueo, el lugar es el velo, no el documento del tour. */ /* ---------------- Transición entre panoramas ---------------- "Page Name Transition (Wipe)" de Osmo. Se conservan las tres reglas del recurso —.transition, .transition__panel, .transition__label— con su geometría intacta. Lo adaptado es sólo el color, la tipografía y el posicionamiento dentro de .mp360-app. `position: absolute` en vez de `fixed`: el original vive en el y acá el ancla es .mp360-app, que además es el elemento de fullscreen. Con fixed, el panel se quedaría atado al viewport y no al contenedor. z-index 60: por encima de la navbar (25/30) y del dock, porque es una transición de la experiencia entera, no de la escena sola. */ .transition { z-index: 60; pointer-events: none; position: absolute; inset: 0; overflow: clip; } .transition[hidden] { display: none !important; } .transition__panel { background-color: var(--primary-700, #4742A1); justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; top: 100%; left: 0; } /* Manrope en lugar del mono del recurso, y el violeta/blanco de Jacarandá. Contraste #FEFEFE sobre #4742A1: 8.6:1, muy por encima de AA. El tamaño usa clamp() para no romper la composición en mobile: el original fija 2.5em, que a 390px de ancho parte en dos líneas un rótulo como "Dentro del barrio · 1/7". El margen lateral evita que el texto toque el borde y `text-wrap: balance` reparte si igual tuviera que cortar. */ .transition__label { color: var(--neutral-50, #FEFEFE); text-transform: uppercase; font-family: "Manrope", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.02em; font-size: clamp(1.125rem, 4.2vw, 2.5rem); line-height: 1.15; text-align: center; text-wrap: balance; max-width: min(90%, 46rem); padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right)); } /* Móvil apaisado: queda poca altura y el rótulo no puede comerse la pantalla. */ @media (max-height: 480px) and (orientation: landscape) { .transition__label { font-size: clamp(1rem, 3.2vh, 1.75rem); } } /* ---------------- Tooltip de lote ---------------- */ .mp360-tip { position: fixed; top: 0; left: 0; z-index: 30; max-width: min(78vw, 320px); padding: 10px 12px; border-radius: var(--radius-tooltip); /* El fondo lo fija el módulo con el color del plan del lote. El valor de acá es sólo el estado inicial. */ background: var(--mp360-tip-bg); color: var(--mp360-tip-fg); border: 1px solid var(--mp360-tip-edge, transparent); box-shadow: 0 6px 24px rgba(21, 21, 21, .38), 0 1px 2px rgba(21, 21, 21, .30); font-family: var(--mp360-font); line-height: 1.35; /* El globo no debe robar el puntero al hotspot que lo abrió. */ pointer-events: none; will-change: transform; } .mp360-tip[hidden] { display: none !important; } .mp360-tip__title { font-size: 15px; font-weight: 700; color: var(--mp360-tip-fg); letter-spacing: -0.01em; } .mp360-tip__state { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--mp360-tip-ink-soft, var(--mp360-tip-fg)); } .mp360-tip__plan { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mp360-tip-rule, rgba(255, 255, 255, .22)); font-size: 13px; font-weight: 600; color: var(--mp360-tip-fg); } @media (max-width: 480px) { .mp360-tip { padding: 9px 11px; } .mp360-tip__title { font-size: 14px; } .mp360-tip__state, .mp360-tip__plan { font-size: 12.5px; } } /* Altura reducida (teléfono apaisado): el globo no puede comerse el panorama. */ @media (max-height: 480px) and (orientation: landscape) { .mp360-tip { padding: 7px 10px; max-width: min(60vw, 300px); } .mp360-tip__title { font-size: 13px; } .mp360-tip__state, .mp360-tip__plan { font-size: 12px; } .mp360-tip__plan { margin-top: 4px; padding-top: 4px; } } @media (prefers-reduced-motion: reduce) { .mp360-tip { transition: none !important; } } /* ---------------- Aviso de datos ---------------- */ .mp360-notice { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); padding: 10px 14px; border-radius: var(--radius-control); background: var(--neutral-950); color: var(--neutral-50); box-shadow: 0 6px 24px rgba(21, 21, 21, .45); font-family: var(--mp360-font); font-size: 13px; } .mp360-notice[hidden] { display: none !important; } .mp360-notice__action { flex: none; min-height: 32px; padding: 6px 12px; border: 0; border-radius: var(--radius-button, var(--radius-control)); background: var(--primary-700); color: var(--primary-50); font: inherit; font-weight: 600; cursor: pointer; } .mp360-notice__action:hover { background: var(--primary-800); } .mp360-notice__action:focus-visible { outline: 2px solid var(--primary-50); outline-offset: 2px; } /* ========================================================================== Tooltip de los hotspots externos (POI y proyectos hermanos) Sustituye al globo nativo de 3DVista SOLO en esas 42 áreas. Dice la ACCIÓN —"Ver el recorrido desde Jacarandá"— en lugar de repetir el rótulo que la placa ya muestra en grande. Motion: entrada breve desde 6px con la curva del sistema. Es un elemento secundario que aparece y desaparece; no necesita más que eso, y no debe competir con el recorrido. ========================================================================== */ .mp360-hstip { position: fixed; top: 0; left: 0; z-index: 30; max-width: min(70vw, 22rem); padding: 8px 12px; border-radius: var(--radius-tooltip); background: var(--neutral-950); color: var(--neutral-50); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 24px rgba(21, 21, 21, .38), 0 1px 2px rgba(21, 21, 21, .30); font-family: var(--mp360-font); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; /* El globo no le roba el puntero al hotspot que lo abrió. */ pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); transition: opacity 0.18s var(--mp360-ease-ui), translate 0.18s var(--mp360-ease-ui); translate: 0 6px; will-change: transform, opacity; } .mp360-hstip.is-open { opacity: 1; translate: 0 0; } .mp360-hstip[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .mp360-hstip { transition: none !important; translate: 0 0 !important; } }