/* origen: agente; job_id: inmobec-maqueta-aerea-20261104. Maqueta del ático: vídeo de construcción → visor 3D. */
/* La lámina es siempre clara: el vídeo está compuesto sobre #F5EFF4 y debe fundirse con ella en los dos temas. */
.mq{margin:28px 0 0;border-radius:22px;overflow:hidden;background:#F5EFF4;border:1px solid var(--line);color:#1E1521}
.mq__escena{position:relative;aspect-ratio:16/10;user-select:none;-webkit-user-select:none;overflow:hidden}
.mq__escena video,.mq__escena img,.mq__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.mq__escena video,.mq__escena img{object-fit:contain}
.mq__escena img,.mq__gl{opacity:0;transition:opacity .6s ease;pointer-events:none}
/* pan-y: en móvil, deslizar en vertical sigue moviendo la página; girar en horizontal y pellizcar van a la maqueta. */
.mq__gl{touch-action:pan-y;cursor:grab}
.mq__gl:active{cursor:grabbing}
.mq[data-mq-fase="final"] .mq__escena img{opacity:1}
.mq[data-mq-fase="giro"] .mq__escena img{opacity:1;pointer-events:auto;cursor:grab}
.mq[data-mq-fase="giro"] .mq__escena{touch-action:pan-y}
.mq[data-mq-fase="3d"] .mq__gl{opacity:1;pointer-events:auto}
.mq[data-mq-fase="3d"] .mq__escena video,.mq[data-mq-fase="giro"] .mq__escena video{opacity:0;transition:opacity .6s ease}
.mq__pista{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.88);font-size:.8rem;color:#4A3D4E;opacity:0;transition:opacity .4s ease .3s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.mq[data-mq-fase="3d"] .mq__pista,.mq[data-mq-fase="giro"] .mq__pista{opacity:1}
.mq__etiqueta{position:absolute;left:0;top:0;margin:0;padding:6px 10px;border-radius:10px;background:#4E1254;color:#fff;font-size:.82rem;font-weight:600;pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(30,21,33,.18)}
.mq__barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 18px;border-top:1px solid rgba(78,18,84,.11);background:#fff}
.mq__giro{display:none;align-items:center;gap:10px;flex:1 1 240px;font-size:.9rem;color:#4A3D4E}
.mq[data-mq-fase="giro"] .mq__giro{display:flex}
.mq__giro input[type=range]{flex:1;accent-color:#7A1F82;min-height:44px}
.mq__barra .btn{white-space:nowrap}
.mq__nota{margin:0;padding:0 18px 14px;background:#fff;font-size:.8rem;color:#74667A}
.mq__otra{background:none;border:1px solid rgba(78,18,84,.2);border-radius:999px;padding:10px 16px;min-height:44px;font:inherit;font-size:.88rem;color:#4E1254;cursor:pointer}
.mq__otra:hover{background:#F3E6F1}
.mq__otra[data-mq-reset]{display:none}
.mq[data-mq-fase="3d"] .mq__otra[data-mq-reset]{display:inline-block}
.mq__otra:focus-visible,.mq__giro input:focus-visible{outline:2px solid #7A1F82;outline-offset:2px}
.mq-entorno{margin:44px 0 0}
.mq__360 small{font-size:.75em;opacity:.8}
/* Visor 360 (recreación con IA) */
.p360{margin:auto;width:min(1200px,96vw);max-width:none;height:min(820px,92vh);padding:0;border:0;border-radius:18px;background:#1A0F1C;color:#fff;overflow:hidden;display:none;flex-direction:column}
.p360[open]{display:flex}
.p360::backdrop{background:rgba(18,11,20,.72)}
.p360__cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 6px}
.p360__antetitulo{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#E0A6D2}
.p360__titulo{margin:2px 0 0;font-size:1.15rem;font-weight:600}
.p360__acciones{display:flex;align-items:center;gap:10px}
.p360__fotos{min-height:44px;padding:8px 16px;border-radius:999px;border:0;background:#fff;color:#1A0F1C;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.p360__fotos:focus-visible{outline:2px solid #E0A6D2;outline-offset:2px}
.p360__cerrar{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:1.5rem;cursor:pointer}
.p360__tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 18px 12px;scrollbar-width:thin}
.p360__tabs button{flex:none;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.85rem;cursor:pointer}
.p360__tabs button[aria-selected="true"]{background:#fff;color:#1A0F1C}
.p360__escena{position:relative;flex:1;min-height:0;cursor:grab;touch-action:none}
.p360__escena:active{cursor:grabbing}
.p360__escena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p360__cargando{position:absolute;inset:auto 0 50% 0;text-align:center;margin:0;color:rgba(255,255,255,.8)}
.p360__aviso{margin:0;padding:10px 18px 14px;font-size:.78rem;color:rgba(255,255,255,.75)}
.p360__aviso strong{color:#E0A6D2}
.p360__cerrar:focus-visible,.p360__tabs button:focus-visible,.p360__escena:focus-visible{outline:2px solid #E0A6D2;outline-offset:2px}
.sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.mq__pista{display:none}}
@media (prefers-reduced-motion: reduce){.mq__otra[data-mq-otra]{display:none}.mq__escena img,.mq__gl,.mq__pista{transition:none}}
