/* ============ Capa de integración ============ Cierra los contratos entre los módulos que trabajaron en paralelo: viaje.js (estados de carga del video) · motion.js (reveal, stagger, pines, lazy-img, cue) · explorador.js. Va DESPUÉS de styles.css y no lo pisa. Regla de oro: si el JS no corre, nada puede quedar invisible. */ /* ---- 1. Blindaje del reveal ---------------------------------------------- styles.css define .reveal{opacity:0}. motion.js marca al arrancar; si el módulo fallara (o el visitante no tuviera JS), el contenido DEBE verse igual. Por eso el estado oculto solo vive con JS. */ html:not(.motion-on) .reveal{opacity:1!important;transform:none!important;filter:none!important} /* NOTA: la colisión de transform en los pines YA está resuelta en styles.css con la propiedad independiente `translate` (se compone antes que transform) + `translate:none` para pines y marcadores. No duplicar aquí: añadir un transform propio volvería a descolocarlos. */ /* ---- 2. Estados del video del recorrido (viaje.js) ---------------------- Mientras no hay datos manda el póster (nítido, ya cargado): nunca un hueco negro. Si el video falla, el póster se queda como fallback digno. */ .seg.cap-cargando video{opacity:0;transition:opacity var(--t-base,.4s) var(--curva,ease)} .seg video{transition:opacity var(--t-base,.4s) var(--curva,ease)} .seg.cap-sin-video video{display:none} .seg.cap-cargando::after{ content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3; background:linear-gradient(90deg,transparent,var(--amapola,#C9A24B),transparent); animation:cargando-barra 1.4s linear infinite} @keyframes cargando-barra{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* ---- 3. Modo cine: la experiencia manda ------------------------------- Las herramientas comerciales vuelven al terminar el recorrido. Dentro del POV no compiten con el texto, el encuadre ni la navegación por scroll. */ body.en-viaje #va-dock, body.en-viaje #vdla-cq-lanzador, body.en-viaje #adap-control, body.en-viaje #va-atajo, body.en-viaje #toast-resume, body.en-viaje #va-hoja-tab{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body.en-viaje #va-dock{transform:translate(-50%,16px)!important} body.en-viaje #vdla-cq-lanzador, body.en-viaje #adap-control, body.en-viaje #va-atajo{transform:translateY(10px)!important} /* El CTA entra en modo cine SOLO en escritorio (allí el minimapa ocupa la esquina y el ratón siempre tiene el CTA del nav a mano). En móvil la barra inferior es el ÚNICO camino de conversión persistente: no puede evaporarse durante el recorrido, que es la mayor parte del scroll. */ @media (min-width:901px){ body.en-viaje #cta-fijo{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(10px)!important; } } /* ---- 3b. Carril inferior en móvil: la barra CTA lo ocupa entera --------- Los módulos que se cuelgan del borde inferior (leads, sonic, adaptativo) se apoyan ENCIMA de la barra. #va-dock y el lanzador del concierge ya se miden solos contra #cta-fijo, así que no se tocan. */ @media (max-width:900px){ #cta-social{ bottom:calc(var(--carril-inferior) + var(--s-3))!important; left:12px;right:12px;max-width:none;text-align:center; } body.en-viaje #cta-social{bottom:calc(var(--carril-inferior) + var(--s-3))!important} #sonic-toggle{bottom:calc(var(--carril-inferior) + var(--s-3))!important} #adap-pager{bottom:calc(var(--carril-inferior) + var(--s-3))!important} #adap-aviso{bottom:calc(var(--carril-inferior) + 68px)!important} } /* ---- 3c. El minimapa también en móvil (una sola experiencia) ------------- css/styles.css lo apagaba por debajo de 820px porque en la esquina inferior competía con la barra de conversión y con las bandas de texto (que en móvil ocupan todo el ancho, `bottom:calc(96px + 4svh)`). El recorrido vuelve a ser la columna vertebral de la home y el explorador es su navegación: en vez de apagarlo, se le da un carril propio y medido —la esquina inferior derecha, ENTRE la barra de conversión y el borde inferior de las bandas: · suelo = var(--carril-inferior) (la barra CTA) + 4px · techo = 104px × 224/368 + 2px de borde ≈ 66px de alto → borde superior ≈ 120px sobre el borde inferior de la ventana · las bandas .abajo-izq arrancan en calc(96px + 4svh) ≈ 130px → ~10px de aire garantizados, sin tocar ni una regla de css/styles.css. El centro-derecha NO sirve: .cap-texto.centro es inset:0 y su H1 lo cruza. */ @media (max-width:820px){ #minimapa{ display:block!important; right:12px;left:auto;top:auto; bottom:calc(var(--carril-inferior,60px) + 4px); width:104px;transform:none} #minimapa:not(.visible){display:none!important} } /* ---- 4. Imágenes lazy: fade-in en vez de aparición seca (motion.js) ---- */ img.cargando{opacity:0} img{transition:opacity var(--t-base,.4s) var(--curva,ease)} /* ---- 5. Pines del masterplan: foco en uno, calma en el resto ------------ */ .mp-pin{transition:opacity var(--t-fast,.25s) var(--curva,ease), transform var(--t-fast,.25s) var(--curva,ease)} .mp-pin.atenuado{opacity:.38} .mp-pin.resaltado{z-index:5} .mp-pin.resaltado .punto{transform:scale(1.12)} /* ---- 6. Cue ambiental "hay más abajo" (motion.js) ----------------------- */ .cue-oculto{opacity:0!important;pointer-events:none; transition:opacity var(--t-slow,.6s) var(--curva,ease)} /* ---- 6b. Legibilidad 55-75 en los módulos inyectados -------------------- leads.js escribe sus estilos en un