diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html
index 285cd54..4c1df92 100644
--- a/elementor/templates/elementor_builder.html
+++ b/elementor/templates/elementor_builder.html
@@ -36,8 +36,8 @@
     body.ub24 .canvas{padding:24px;background:#f8fafc}
     body.ub24 .block{border:1px solid #e5e7eb;box-shadow:0 4px 14px rgba(15,23,42,.06)}
     body.ub24 .block.selected{border-color:#2563eb}
-    body.ub24 .block-actions, body.ub24 .resize-handle, body.ub24 .scroll-btn{display:none !important}
-    body.ub24 #btnAlign, body.ub24 #btnBack{display:none}
+    body.ub24 .block-actions{display:none !important}
+    body.ub24 #btnBack{display:none}
     body.ub24 .topbar .top-meta{display:none}
     body.ub24 .block-item{display:flex;align-items:center;gap:8px}
     body.ub24 .block-item:before{content:"*";color:#6b7280;font-size:12px}
@@ -57,6 +57,14 @@
     .block.selected{border-color:#7aa7ff}
     .empty{padding:32px;border:1px dashed #cbd5e1;border-radius:12px;text-align:center;color:#64748b;background:#fff}
     .drop{height:8px;border-radius:6px;background:rgba(122,167,255,.4);margin:6px 0}
+    .drag-handle{cursor:grab}
+    .block-drag-handle{
+      position:absolute;left:8px;top:8px;z-index:3;
+      width:24px;height:24px;border-radius:8px;border:1px solid #e5e7eb;
+      background:#ffffff;color:#334155;display:flex;align-items:center;justify-content:center;
+      box-shadow:0 8px 18px rgba(15,23,42,.12);cursor:grab
+    }
+    .preview-mode .block-drag-handle{display:none !important}
     @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
     label{font-size:12px;color:var(--muted)}
     input,textarea,select{width:100%;background:#0f172a;border:1px solid #1f2937;color:var(--text);padding:8px;border-radius:10px;font-family:inherit}
@@ -161,8 +169,7 @@
     .block-actions button{border:0;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:4px 6px;cursor:pointer;font-size:12px}
     .block-actions button:hover{background:#1f2937}
     .preview-mode .block-actions,
-    .preview-mode .resize-handle,
-    .preview-mode .scroll-btn{display:none !important}
+    .preview-mode .resize-handle{display:none !important}
     body.preview-mode .app{grid-template-columns:1fr !important}
     body.preview-mode .sidebar,
     body.preview-mode .inspector,
@@ -185,6 +192,8 @@
       min-height:100vh !important;
       padding:0 !important;
     }
+    .preview-back{position:fixed;top:14px;left:14px;z-index:1200;border:1px solid #cbd5e1;background:#fff;color:#0f172a;padding:9px 14px;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.15)}
+    .preview-back:hover{transform:translateY(-1px)}
     .resize-handle{position:absolute;right:8px;bottom:8px;width:14px;height:14px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;cursor:se-resize;opacity:.75}
     .resize-handle.edge{width:10px;height:10px;border:none;background:rgba(148,163,184,.35);border-radius:4px;opacity:.9}
     .resize-handle.e{top:50%;right:-4px;transform:translateY(-50%);cursor:e-resize}
@@ -272,13 +281,10 @@
           </select>
           <button class="btn secondary" id="btnBack">Atras</button>
           <button class="btn secondary" id="btnPreview">Vista previa</button>
-          <button class="btn secondary" id="btnFullPage">Completo</button>
           <button class="btn secondary" id="btnTheme">Claro</button>
           <button class="btn secondary icon" id="btnSizePhone" title="Movil"><i class="fa-solid fa-mobile-screen-button"></i></button>
           <button class="btn secondary icon" id="btnSizeTablet" title="Tablet"><i class="fa-solid fa-tablet-screen-button"></i></button>
           <button class="btn secondary icon active" id="btnSizeDesktop" title="Web"><i class="fa-solid fa-display"></i></button>
-          <button class="btn secondary" id="btnFreeDrag">Modo libre</button>
-          <button class="btn secondary" id="btnAlign">Alinear</button>
           <button class="btn" id="btnSave">Publicar</button>
           <div class="save-status" id="saveStatus">Listo</div>
         </div>
@@ -378,17 +384,20 @@
         <summary>Layout</summary>
         <div class="acc-body">
           <div class="row"><label>Animaciones</label><input id="animToggle" type="checkbox"></div>
+          <div class="row"><label>Alto minimo pagina (px)</label><input id="canvasMinHeightInput" type="number" min="700" max="5000" step="50"></div>
+          <div class="row"><label>Espacio inferior (px)</label><input id="canvasBottomSpaceInput" type="number" min="0" max="1200" step="10"></div>
+          <div class="row"><label>Creado por</label><input id="siteAuthorInput" type="text" placeholder="Tu nombre o marca"></div>
         </div>
       </details>
     </aside>
   </div>
 
+  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
   <script>
     const SITE_ID = {{ site_id }};
     const SITE_SLUG = "{{ slug }}";
     const SERVER_CONTENT = {{ content|tojson }};
     const BUILDER_MODE = "{{ builder_mode or 'default' }}";
-    const FULL_PAGE_MODE = new URLSearchParams(window.location.search).get("full") === "1";
     const defaultSettings = {
       site_name: "{{ slug }}",
       primary_color: "#59d9c8",
@@ -406,7 +415,10 @@
       bg_anim_url: "",
       logo_url: "",
       bg_image_url: "",
-      bg_video_url: ""
+      bg_video_url: "",
+      canvas_min_height: 1200,
+      canvas_bottom_space: 180,
+      site_author: ""
     };
     const templates = {
       servicios: {
@@ -473,10 +485,26 @@ const state = {
     let resizeRaf = 0;
     let pendingMove = null;
     let pendingResize = null;
-    let previewStateBefore = null;
     let isSaving = false;
+    let draggingBlockId = null;
+    let manualDrag = { active: false, id: null, index: null };
+    let pointerDrag = { active: false, id: null, index: null };
+    let canvasSortable = null;
+
+    function hasSortable(){ return typeof Sortable !== "undefined"; }
+    function isBlockVisibleInCanvas(block){
+      return (BUILDER_MODE === "ub24") ? ((block.page || "home") === currentPage) : true;
+    }
+    function widthToSpan(widthPct){
+      const pct = Math.max(30, Math.min(100, Number(widthPct || 50)));
+      return Math.max(4, Math.min(12, Math.round((pct / 100) * 12)));
+    }
 
     function makeId(){ return "block_" + Date.now() + "_" + Math.floor(Math.random()*1000); }
+    function snapBlockWidth(type, raw){
+      if (type === "menu") return 100;
+      return Math.max(30, Math.min(100, Number(raw || 50)));
+    }
     function getDefaultPos(){
       const base = 20;
       const gap = 120;
@@ -485,21 +513,21 @@ const state = {
     }
     function defaultData(type){
       switch(type){
-        case "menu": return { title:"Menu", items:[], menu_mode:"both", full_width:true };
-        case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
-        case "text": return { text:"Describe tu negocio aqui." };
-        case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
-        case "features": return { title:"Beneficios", items:["Rapido","Profesional","Confiable"] };
-        case "gallery": return { title:"Proyectos", images:["","",""], captions:["","",""], fit:"cover" };
-        case "cards": return { title:"Servicios", items:["Titulo 1|Texto breve","Titulo 2|Texto breve","Titulo 3|Texto breve"] };
-        case "iconlist": return { title:"Diferenciales", items:["Rapido|Ahorra tiempo","Seguro|Datos protegidos","Soporte|Respuesta rapida"] };
-        case "contact": return { title:"Hablemos", email:"", phone:"", address:"" };
-        case "map": return { title:"Ubicacion", address:"" };
-        case "button": return { text:"Accion", url:"#", style:"primary", size:"md"};
-        case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill" };
-        case "video": return { url:"", description:"" };
-        case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card" };
-        case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"" };
+        case "menu": return { title:"Menu", items:[], menu_mode:"both", width:100 };
+        case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"", width:100 };
+        case "text": return { text:"Describe tu negocio aqui.", width:100 };
+        case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"", width:100 };
+        case "features": return { title:"Beneficios", items:["Rapido","Profesional","Confiable"], width:100 };
+        case "gallery": return { title:"Proyectos", images:["","",""], captions:["","",""], fit:"cover", width:100 };
+        case "cards": return { title:"Servicios", items:["Titulo 1|Texto breve","Titulo 2|Texto breve","Titulo 3|Texto breve"], width:100 };
+        case "iconlist": return { title:"Diferenciales", items:["Rapido|Ahorra tiempo","Seguro|Datos protegidos","Soporte|Respuesta rapida"], width:100 };
+        case "contact": return { title:"Hablemos", email:"", phone:"", address:"", width:100 };
+        case "map": return { title:"Ubicacion", address:"", width:100 };
+        case "button": return { text:"Accion", url:"#", style:"primary", size:"md", width:100};
+        case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill", width:100 };
+        case "video": return { url:"", description:"", width:100 };
+        case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card", width:100 };
+        case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"", width:100 };
         default: return {};
       }
     }
@@ -895,11 +923,8 @@ const state = {
     }
 
     function updateBlockList(){
-      const used = new Set(state.blocks.map(b=>b.type));
       document.querySelectorAll("#blockList .block-item").forEach((item)=>{
-        const type = item.dataset.type;
-        if (used.has(type)) item.style.display = "none";
-        else item.style.display = "";
+        item.style.display = "";
       });
     }
 
@@ -920,6 +945,10 @@ const state = {
 
     function renderPreview(){
       const canvas = document.getElementById("previewCanvas");
+      if (canvasSortable){
+        canvasSortable.destroy();
+        canvasSortable = null;
+      }
       canvas.innerHTML = "";
       canvas.classList.toggle("free-drag", !!state.settings.free_drag);
       applySiteTheme();
@@ -939,6 +968,7 @@ const state = {
       } else {
         canvas.style.animation = "";
       }
+      canvas.style.paddingBottom = `${Math.max(0, Number(state.settings.canvas_bottom_space || 0))}px`;
       canvas.style.position = "relative";
       if (state.settings.bg_video_url){
         const video = document.createElement("video");
@@ -959,20 +989,25 @@ const state = {
       inner.style.position = "relative";
       inner.style.zIndex = "1";
       if (!state.settings.free_drag){
-        inner.style.display = "flex";
-        inner.style.flexWrap = "wrap";
+        inner.style.display = "grid";
+        inner.style.gridTemplateColumns = "repeat(12, minmax(0, 1fr))";
+        inner.style.alignItems = "stretch";
         inner.style.gap = "16px";
         inner.style.width = "100%";
       }
       canvas.appendChild(inner);
-      if (!state.blocks.length){ inner.innerHTML = '<div class="empty">Arrastra bloques para empezar.</div>'; return; }
-      const visibleBlocks = (BUILDER_MODE === "ub24")
-        ? state.blocks.filter(b=>((b.page || "home") === currentPage))
-        : state.blocks;
+      if (!state.blocks.length){
+        inner.innerHTML = '<div class="empty">Arrastra bloques para empezar.</div>';
+        if (!state.settings.free_drag && hasSortable()){
+          initCanvasSortable(inner);
+        }
+        return;
+      }
+      const visibleBlocks = state.blocks.filter(isBlockVisibleInCanvas);
       visibleBlocks.forEach((block)=>{
         const el = document.createElement("div");
         el.className = "block";
-        if (!state.settings.free_drag){ el.setAttribute("draggable","true"); }
+        if (!state.settings.free_drag){ el.removeAttribute("draggable"); }
         el.dataset.blockId = block.id;
         el.id = block.id;
         if (state.settings.free_drag){
@@ -990,14 +1025,18 @@ const state = {
           el.style.cursor = "grab";
         } else {
           el.style.transform = "";
-          const isFullWidth = block.type === "menu" || !!block.data?.full_width;
+          const widthPct = snapBlockWidth(block.type, block.data?.width);
+          block.data = block.data || {};
+          block.data.width = widthPct;
+          const isFullWidth = block.type === "menu" || widthPct >= 99;
           if (isFullWidth){
-            const w = Math.max(30, Math.min(100, Number(block.data?.width || 100)));
-            el.style.width = `${w}%`;
-            el.style.flex = "0 0 100%";
+            el.style.width = "100%";
+            el.style.gridColumn = "1 / -1";
           } else {
-            el.style.width = "calc(50% - 8px)";
-            el.style.flex = "0 0 calc(50% - 8px)";
+            const span = widthToSpan(widthPct);
+            el.style.width = "100%";
+            el.style.gridColumn = `span ${span}`;
+            el.style.height = "100%";
           }
         }
         el.innerHTML = renderBlockHtml(block);
@@ -1007,6 +1046,42 @@ const state = {
         if (BUILDER_MODE !== "ub24"){
           const actions = document.createElement("div");
           actions.className = "block-actions";
+          const drag = document.createElement("button");
+          drag.className = "drag-handle";
+          drag.innerHTML = '<i class="fa-solid fa-grip-vertical"></i>';
+          drag.title = "Mover bloque";
+          drag.addEventListener("click",(e)=>{ e.preventDefault(); e.stopPropagation(); });
+          if (!hasSortable()){
+            drag.addEventListener("mousedown",(e)=>{
+              e.preventDefault();
+              e.stopPropagation();
+              startPointerDrag(block.id, e);
+            });
+          }
+          const up = document.createElement("button");
+          up.innerHTML = '<i class="fa-solid fa-arrow-up"></i>';
+          up.title = "Subir bloque";
+          up.addEventListener("click",(e)=>{
+            e.stopPropagation();
+            moveBlockByDelta(block.id, -1);
+          });
+          const down = document.createElement("button");
+          down.innerHTML = '<i class="fa-solid fa-arrow-down"></i>';
+          down.title = "Bajar bloque";
+          down.addEventListener("click",(e)=>{
+            e.stopPropagation();
+            moveBlockByDelta(block.id, 1);
+          });
+          const width = document.createElement("button");
+          const widthNow = snapBlockWidth(block.type, block.data?.width);
+          width.innerHTML = widthNow >= 95 ? '<i class="fa-solid fa-arrows-left-right-to-line"></i>' : '<i class="fa-solid fa-table-columns"></i>';
+          width.title = widthNow >= 95 ? "Pasar a 50%" : "Pasar a 100%";
+          width.addEventListener("click",(e)=>{
+            e.stopPropagation();
+            selectedBlockId = block.id;
+            toggleBlockWidth(block.id);
+            renderInspector();
+          });
           const del = document.createElement("button");
           del.innerHTML = '<i class="fa-solid fa-trash"></i>';
           del.addEventListener("click",(e)=>{
@@ -1015,10 +1090,31 @@ const state = {
             if (selectedBlockId === block.id) selectedBlockId = null;
             renderInspector(); renderPreview();
           });
+          actions.appendChild(drag);
+          actions.appendChild(up);
+          actions.appendChild(down);
+          actions.appendChild(width);
           actions.appendChild(del);
           el.appendChild(actions);
+        } else if (!state.settings.free_drag && hasSortable()){
+          const drag = document.createElement("button");
+          drag.className = "block-drag-handle drag-handle";
+          drag.innerHTML = '<i class="fa-solid fa-grip-vertical"></i>';
+          drag.title = "Mover bloque";
+          drag.addEventListener("click",(e)=>{ e.preventDefault(); e.stopPropagation(); });
+          el.appendChild(drag);
         }
         if (block.id === selectedBlockId) el.classList.add("selected");
+        if (!state.settings.free_drag && !hasSortable()){
+          el.style.touchAction = "none";
+          el.addEventListener("pointerdown",(e)=>{
+            if (e.button !== 0) return;
+            if (e.target && (e.target.closest(".resize-handle") || e.target.closest(".editable") || e.target.closest("input") || e.target.closest("textarea") || e.target.closest("select") || e.target.closest("a") || e.target.closest("button"))) return;
+            e.preventDefault();
+            e.stopPropagation();
+            startPointerDrag(block.id, e);
+          });
+        }
         el.addEventListener("click",(e)=>{
           if (e.target && (e.target.closest("details") || e.target.closest("summary") || e.target.closest("a"))) return;
           e.stopPropagation();
@@ -1028,10 +1124,7 @@ const state = {
           }
           selectedBlockId=block.id; renderInspector(); renderPreview();
         });
-        if (!state.settings.free_drag){
-          el.addEventListener("dragstart",(e)=>{ e.dataTransfer.setData("text/block-id", block.id); e.dataTransfer.effectAllowed="move"; });
-          el.addEventListener("dragend",()=>removeDrop());
-        } else {
+        if (state.settings.free_drag) {
           el.addEventListener("mousedown",(e)=>{
             if (e.target && (e.target.closest(".resize-handle") || e.target.closest(".editable"))) return;
             startFreeDrag(e, block);
@@ -1041,7 +1134,15 @@ const state = {
             startFreeDrag(e, block);
           }, { passive: false });
         }
-        if (BUILDER_MODE !== "ub24"){
+        if (!state.settings.free_drag && block.type !== "menu"){
+          const h = document.createElement("div");
+          h.className = "resize-handle edge e";
+          h.setAttribute("data-handle", "e");
+          h.title = "Redimensionar ancho";
+          h.addEventListener("mousedown",(e)=>startFreeResize(e, block));
+          h.addEventListener("touchstart",(e)=>startFreeResize(e, block), { passive: false });
+          el.appendChild(h);
+        } else if (BUILDER_MODE !== "ub24" && state.settings.free_drag){
           const handles = ["n","e","s","w","ne","nw","se","sw"];
           handles.forEach((h)=>{
             const handle = document.createElement("div");
@@ -1055,6 +1156,9 @@ const state = {
         if (!state.settings.animations){ el.style.animation = "none"; }
         inner.appendChild(el);
       });
+      if (!state.settings.free_drag && hasSortable()){
+        initCanvasSortable(inner);
+      }
       if (state.settings.free_drag){
         let maxBottom = 700;
         inner.querySelectorAll(".block").forEach((node)=>{
@@ -1063,12 +1167,31 @@ const state = {
         });
         canvas.style.minHeight = maxBottom + "px";
       } else {
-        canvas.style.minHeight = "700px";
+        const minH = Math.max(700, Number(state.settings.canvas_min_height || 1200));
+        canvas.style.minHeight = `${minH}px`;
+      }
+      if (state.settings.site_author){
+        const credit = document.createElement("div");
+        credit.style.marginTop = "20px";
+        credit.style.padding = "12px 14px";
+        credit.style.borderRadius = "10px";
+        credit.style.background = "rgba(15,23,42,.06)";
+        credit.style.color = "var(--site-muted)";
+        credit.style.fontSize = "12px";
+        credit.style.textAlign = "center";
+        credit.textContent = `Creado por ${state.settings.site_author}`;
+        inner.appendChild(credit);
       }
       const scrollBtn = document.createElement("button");
       scrollBtn.className = "scroll-btn";
       scrollBtn.innerHTML = '<i class="fa-solid fa-arrow-up"></i>';
-      scrollBtn.addEventListener("click",()=>{ window.scrollTo({ top: 0, behavior: "smooth" }); });
+      scrollBtn.addEventListener("click",()=>{
+        const main = document.querySelector(".main");
+        if (main && typeof main.scrollTo === "function"){
+          main.scrollTo({ top: 0, behavior: "smooth" });
+        }
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      });
       canvas.appendChild(scrollBtn);
       const whatsappBlock = state.blocks.find(b=>b.type==="social" && b.data && b.data.whatsapp);
       if (whatsappBlock && whatsappBlock.data && whatsappBlock.data.whatsapp){
@@ -1089,16 +1212,21 @@ const state = {
     }
 
     function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; }
-    function resolveFullWidthByDropX(container, clientX){
-      if (state.settings.free_drag) return null;
-      const rect = container.getBoundingClientRect();
-      if (!rect || !rect.width) return null;
-      const ratio = (clientX - rect.left) / rect.width;
-      return ratio > 0.33 && ratio < 0.67;
-    }
-    function getDropIndex(container,y){
-      const blocks=[...container.querySelectorAll(".block")];
-      for (let i=0;i<blocks.length;i++){ const r=blocks[i].getBoundingClientRect(); if (y < r.top + r.height/2) return i; }
+    function getDropIndex(container,y,x){
+      const blocks=[...container.querySelectorAll(".block")]
+        .filter((n)=>n.dataset.blockId !== draggingBlockId);
+      for (let i=0;i<blocks.length;i++){
+        const r=blocks[i].getBoundingClientRect();
+        const halfY = r.top + r.height/2;
+        if (y >= r.top && y <= r.bottom){
+          if (typeof x === "number"){
+            const halfX = r.left + r.width/2;
+            return x < halfX ? i : i + 1;
+          }
+          return i;
+        }
+        if (y < halfY) return i;
+      }
       return blocks.length;
     }
     function showDrop(container,index){
@@ -1108,24 +1236,140 @@ const state = {
       const blocks=container.querySelectorAll(".block");
       if (index>=blocks.length) container.appendChild(dropIndicator); else container.insertBefore(dropIndicator, blocks[index]);
     }
+    function getSplitTarget(container, y, x){
+      if (typeof x !== "number") return null;
+      const blocks=[...container.querySelectorAll(".block")]
+        .filter((n)=>n.dataset.blockId !== draggingBlockId);
+      for (const n of blocks){
+        const r = n.getBoundingClientRect();
+        if (y < r.top || y > r.bottom) continue;
+        if (x < r.left || x > r.right) continue;
+        const block = state.blocks.find(b=>b.id===n.dataset.blockId);
+        const widthPct = Math.max(30, Math.min(100, Number(block?.data?.width || 100)));
+        if (n.dataset.blockId && widthPct >= 95){
+          const halfX = r.left + r.width / 2;
+          return { id: n.dataset.blockId, before: x < halfX };
+        }
+      }
+      return null;
+    }
+    function startPointerDrag(blockId, e){
+      if (!blockId || state.settings.free_drag) return;
+      const canvas = document.getElementById("previewCanvas");
+      const container = canvas ? (canvas.querySelector("div") || canvas) : null;
+      if (!container) return;
+      pointerDrag = { active: true, id: blockId, index: null, split: null };
+      draggingBlockId = blockId;
+      const node = document.getElementById(blockId);
+      if (node) node.classList.add("dragging");
+      const updateAt = (clientY, clientX)=>{
+        const idx = getDropIndex(container, clientY, clientX);
+        pointerDrag.index = idx;
+        pointerDrag.split = getSplitTarget(container, clientY, clientX);
+        showDrop(container, idx);
+      };
+      updateAt(e.clientY, e.clientX);
+      const onMove = (ev)=>{
+        if (!pointerDrag.active) return;
+        updateAt(ev.clientY, ev.clientX);
+      };
+      const onEnd = ()=>{
+        const current = pointerDrag;
+        pointerDrag = { active: false, id: null, index: null };
+        const n = document.getElementById(blockId);
+        if (n) n.classList.remove("dragging");
+        removeDrop();
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onEnd);
+        window.removeEventListener("pointercancel", onEnd);
+        draggingBlockId = null;
+        if (current.id && current.split && current.split.id){
+          const moving = state.blocks.find(b=>b.id===current.id);
+          const target = state.blocks.find(b=>b.id===current.split.id);
+          if (moving){
+            moving.data = moving.data || {};
+            moving.data.width = 50;
+          }
+          if (target){
+            target.data = target.data || {};
+            target.data.width = 50;
+          }
+          const targetIdx = state.blocks.findIndex(b=>b.id===current.split.id);
+          if (targetIdx >= 0){
+            moveBlock(current.id, current.split.before ? targetIdx : targetIdx + 1);
+            return;
+          }
+        }
+        if (current.id && typeof current.index === "number"){
+          moveBlock(current.id, current.index);
+        }
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onEnd);
+      window.addEventListener("pointercancel", onEnd);
+    }
+    function startManualDrag(blockId, e){
+      if (!blockId || state.settings.free_drag) return;
+      const canvas = document.getElementById("previewCanvas");
+      const container = canvas ? (canvas.querySelector("div") || canvas) : null;
+      if (!container) return;
+      manualDrag = { active: true, id: blockId, index: null };
+      draggingBlockId = blockId;
+      const node = document.getElementById(blockId);
+      if (node) node.classList.add("dragging");
+      const initialIdx = getDropIndex(container, e.clientY, e.clientX);
+      manualDrag.index = initialIdx;
+      showDrop(container, initialIdx);
+      const onMove = (ev)=>{
+        if (!manualDrag.active) return;
+        const idx = getDropIndex(container, ev.clientY, ev.clientX);
+        manualDrag.index = idx;
+        showDrop(container, idx);
+      };
+      const onUp = ()=>{
+        const current = manualDrag;
+        manualDrag = { active: false, id: null, index: null };
+        const n = document.getElementById(blockId);
+        if (n) n.classList.remove("dragging");
+        removeDrop();
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        draggingBlockId = null;
+        if (current.id && typeof current.index === "number"){
+          moveBlock(current.id, current.index);
+        }
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    }
     function addBlock(type,index=state.blocks.length){
       const b={ id: makeId(), type, data: defaultData(type) };
-      if (!state.settings.free_drag && type !== "menu"){
-        b.data.full_width = false;
-      }
+      if (typeof b.data.width === "undefined") b.data.width = snapBlockWidth(type, 100);
       if (BUILDER_MODE === "ub24"){ b.page = currentPage; }
       if (state.settings.free_drag){ b.pos = getDefaultPos(); }
       state.blocks.splice(index,0,b); selectedBlockId=b.id; renderInspector(); renderPreview();
     }
-    function moveBlock(id,toIndex,opts={}){
+    function moveBlock(id,toIndex){
       const from=state.blocks.findIndex(b=>b.id===id);
       if (from<0) return;
+      const clamped = Math.max(0, Math.min(state.blocks.length, Number(toIndex)));
       const [b]=state.blocks.splice(from,1);
-      state.blocks.splice(toIndex,0,b);
-      if (opts && typeof opts.fullWidth === "boolean" && b.type !== "menu"){
-        b.data = b.data || {};
-        b.data.full_width = opts.fullWidth;
-      }
+      const target = clamped > from ? clamped - 1 : clamped;
+      state.blocks.splice(target,0,b);
+      selectedBlockId = b.id;
+      renderPreview();
+    }
+    function moveBlockByDelta(id, delta){
+      const from = state.blocks.findIndex(b=>b.id===id);
+      if (from < 0) return;
+      moveBlock(id, from + delta);
+    }
+    function toggleBlockWidth(id){
+      const block = state.blocks.find(b=>b.id===id);
+      if (!block || block.type === "menu") return;
+      block.data = block.data || {};
+      const current = Math.max(30, Math.min(100, Number(block.data.width || 100)));
+      block.data.width = current >= 95 ? 50 : 100;
       renderPreview();
     }
 
@@ -1136,11 +1380,6 @@ const state = {
       let html = `<div style="font-weight:600;margin-bottom:6px;text-transform:capitalize">${block.type}</div>`;
       const data=block.data||{};
       const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`;
-      const widthVal = Math.max(30, Math.min(100, Number(data.width || 100)));
-      html += `<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" value="${widthVal}"><div id="blockWidthValue" style="margin-top:4px;color:var(--muted);font-size:12px">${widthVal}%</div></div>`;
-      if (!state.settings.free_drag && block.type !== "menu"){
-        html += `<div class="row"><label>Ancho completo</label><input id="blockFullWidth" type="checkbox" ${data.full_width ? "checked" : ""}></div>`;
-      }
       if (block.type==="menu"){
         html+=input("Titulo","menuTitle",data.title);
         const mm = escapeHtml(data.menu_mode || "both");
@@ -1220,6 +1459,11 @@ const state = {
         html+=input("Embed URL","calendarEmbed",data.embed_url);
         html+=`<div class="row"><label>Nota</label><textarea id="calendarNote">${escapeHtml(data.note||"")}</textarea></div>`;
       }
+      if (block.type !== "menu"){
+        const w = snapBlockWidth(block.type, data.width);
+        html+=`<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" step="1" value="${w}"></div>`;
+        html+=`<div class="row"><input id="blockWidthNumber" type="number" min="30" max="100" step="1" value="${w}"></div>`;
+      }
       html+=`<button class="danger" id="deleteBlockBtn">Eliminar bloque</button>`;
       panel.innerHTML=html;
       if (block.type==="image"){
@@ -1246,29 +1490,20 @@ const state = {
           }, "Imagen cargada");
         });
       }
+      const widthRange = document.getElementById("blockWidth");
+      const widthNum = document.getElementById("blockWidthNumber");
+      if (widthRange && widthNum){
+        widthRange.addEventListener("input",()=>{ widthNum.value = widthRange.value; });
+        widthNum.addEventListener("input",()=>{ widthRange.value = widthNum.value; });
+      }
       panel.querySelectorAll("input,textarea,select").forEach((el)=>{
         el.addEventListener("input",()=>applyInspector(block));
         el.addEventListener("change",()=>applyInspector(block));
       });
-      const widthEl = document.getElementById("blockWidth");
-      const widthValueEl = document.getElementById("blockWidthValue");
-      if (widthEl && widthValueEl){
-        const updateWidthLabel = ()=>{ widthValueEl.textContent = `${widthEl.value}%`; };
-        widthEl.addEventListener("input", updateWidthLabel);
-        updateWidthLabel();
-      }
       document.getElementById("deleteBlockBtn").addEventListener("click",()=>{ state.blocks=state.blocks.filter(b=>b.id!==block.id); selectedBlockId=null; renderInspector(); renderPreview(); });
     }
 
     function applyInspector(block){
-      const widthEl = document.getElementById("blockWidth");
-      if (widthEl){
-        block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100)));
-      }
-      const fullWidthEl = document.getElementById("blockFullWidth");
-      if (fullWidthEl && block.type !== "menu"){
-        block.data.full_width = !!fullWidthEl.checked;
-      }
       if (block.type==="menu"){
         block.data.title=document.getElementById("menuTitle").value;
         const mm = document.getElementById("menuMode");
@@ -1343,6 +1578,11 @@ const state = {
         const calEmbed = document.getElementById("calendarEmbed");
         if (calEmbed){ block.data.embed_url = calEmbed.value; }
       }
+      const widthEl = document.getElementById("blockWidth");
+      if (widthEl && block.type !== "menu"){
+        block.data = block.data || {};
+        block.data.width = snapBlockWidth(block.type, Number(widthEl.value || 50));
+      }
       renderPreview();
     }
 
@@ -1351,36 +1591,94 @@ const state = {
         item.addEventListener("dragstart",(e)=>{ e.dataTransfer.setData("text/block-type", item.dataset.type); e.dataTransfer.effectAllowed="copy"; });
       });
     }
+    function getVisibleStateIndices(){
+      const indices = [];
+      state.blocks.forEach((b, i)=>{
+        if (isBlockVisibleInCanvas(b)) indices.push(i);
+      });
+      return indices;
+    }
+    function insertBlockAtVisibleIndex(type, visibleIndex){
+      if (!type) return;
+      const b = { id: makeId(), type, data: defaultData(type) };
+      if (typeof b.data.width === "undefined") b.data.width = snapBlockWidth(type, 100);
+      if (BUILDER_MODE === "ub24"){ b.page = currentPage; }
+      const visible = getVisibleStateIndices();
+      let insertAt = state.blocks.length;
+      if (visible.length){
+        if (visibleIndex <= 0) insertAt = visible[0];
+        else if (visibleIndex >= visible.length) insertAt = visible[visible.length - 1] + 1;
+        else insertAt = visible[visibleIndex];
+      }
+      state.blocks.splice(insertAt, 0, b);
+      selectedBlockId = b.id;
+      renderInspector();
+      renderPreview();
+    }
+    function reorderVisibleBlocks(orderedIds){
+      if (!Array.isArray(orderedIds) || !orderedIds.length) return;
+      const idSet = new Set(orderedIds);
+      const byId = new Map(state.blocks.map((b)=>[b.id, b]));
+      const reordered = orderedIds.map((id)=>byId.get(id)).filter(Boolean);
+      if (!reordered.length) return;
+      let cursor = 0;
+      state.blocks = state.blocks.map((b)=>{
+        if (!idSet.has(b.id)) return b;
+        const next = reordered[cursor];
+        cursor += 1;
+        return next || b;
+      });
+    }
+    function wireSortableDnD(){ return; }
+    function initCanvasSortable(container){
+      if (!hasSortable() || !container) return;
+      canvasSortable = Sortable.create(container, {
+        group: { name: "builderBlocks", pull: false, put: false },
+        draggable: ".block",
+        handle: ".drag-handle",
+        animation: 150,
+        forceFallback: true,
+        fallbackTolerance: 8,
+        delayOnTouchOnly: true,
+        delay: 120,
+        touchStartThreshold: 6,
+        onEnd: (evt)=>{
+          if (!evt || evt.from !== evt.to) return;
+          const orderedIds = [...container.querySelectorAll(".block")].map((n)=>n.dataset.blockId).filter(Boolean);
+          reorderVisibleBlocks(orderedIds);
+          if (evt.item && evt.item.dataset.blockId){ selectedBlockId = evt.item.dataset.blockId; }
+          renderPreview();
+        }
+      });
+    }
     function wirePreviewDrop(){
       const canvas=document.getElementById("previewCanvas");
       canvas.addEventListener("dragover",(e)=>{
         e.preventDefault();
         if (!state.settings.free_drag){
           const container=canvas.querySelector("div")||canvas;
-          const index=getDropIndex(container,e.clientY);
+          const index=getDropIndex(container,e.clientY,e.clientX);
           showDrop(container,index);
         }
       });
       canvas.addEventListener("drop",(e)=>{
         e.preventDefault();
-        const id=e.dataTransfer.getData("text/block-id");
+        const id=(e.dataTransfer && e.dataTransfer.getData("text/block-id")) || "";
         const type=e.dataTransfer.getData("text/block-type");
-        if (id && !state.settings.free_drag){
-          const container=canvas.querySelector("div")||canvas;
-          const index=getDropIndex(container,e.clientY);
-          const fullWidth = resolveFullWidthByDropX(container, e.clientX);
-          moveBlock(id,index,{ fullWidth });
-        } else if (type){
+        if (type){
           const b={ id: makeId(), type, data: defaultData(type) };
+          if (typeof b.data.width === "undefined") b.data.width = snapBlockWidth(type, 100);
           if (state.settings.free_drag){
             const rect = canvas.getBoundingClientRect();
             b.pos = { x: Math.max(0, e.clientX - rect.left - 20), y: Math.max(0, e.clientY - rect.top - 20) };
           } else {
             const container=canvas.querySelector("div")||canvas;
-            const fullWidth = resolveFullWidthByDropX(container, e.clientX);
-            if (typeof fullWidth === "boolean" && type !== "menu"){
-              b.data.full_width = fullWidth;
-            }
+            const index=getDropIndex(container,e.clientY,e.clientX);
+            state.blocks.splice(index,0,b);
+            selectedBlockId=b.id;
+            renderInspector(); renderPreview();
+            removeDrop();
+            return;
           }
           state.blocks.push(b);
           selectedBlockId=b.id;
@@ -1388,6 +1686,7 @@ const state = {
         }
         removeDrop();
       });
+      canvas.addEventListener("dragstart",(e)=>{ e.preventDefault(); });
     }
     function wireInlineEditing(){
       const canvas = document.getElementById("previewCanvas");
@@ -1450,8 +1749,8 @@ const state = {
         }
       });
     }
-    function scheduleBlockResize(id, x, y, widthPct, heightPx){
-      pendingResize = { id, x, y, widthPct, heightPx };
+    function scheduleBlockResize(id, x, y, widthPct, heightPx, freeMode){
+      pendingResize = { id, x, y, widthPct, heightPx, freeMode };
       if (resizeRaf) return;
       resizeRaf = requestAnimationFrame(()=>{
         resizeRaf = 0;
@@ -1459,9 +1758,21 @@ const state = {
         if (!job) return;
         const el = document.getElementById(job.id);
         if (el){
-          el.style.transform = `translate3d(${job.x}px, ${job.y}px, 0)`;
-          el.style.width = `calc(${job.widthPct}% - 8px)`;
-          if (job.heightPx > 60) el.style.height = job.heightPx + "px";
+          if (job.freeMode){
+            el.style.transform = `translate3d(${job.x}px, ${job.y}px, 0)`;
+            el.style.width = `calc(${job.widthPct}% - 8px)`;
+            if (job.heightPx > 60) el.style.height = job.heightPx + "px";
+          } else {
+            el.style.transform = "";
+            if (job.widthPct >= 99){
+              el.style.width = "100%";
+              el.style.gridColumn = "1 / -1";
+            } else {
+              el.style.width = "100%";
+              el.style.gridColumn = `span ${widthToSpan(job.widthPct)}`;
+            }
+            if (job.heightPx > 60) el.style.height = job.heightPx + "px";
+          }
         }
       });
     }
@@ -1531,7 +1842,7 @@ const state = {
       const handle = e.target.getAttribute("data-handle") || "se";
       const aspect = rect.width / Math.max(1, rect.height);
       isResizingFree = true;
-      resizeStart = { x: p.x, y: p.y, width: rect.width, height: rect.height, canvasWidth: canvasRect.width || 1, id: block.id, free: state.settings.free_drag, handle, aspect, left: block.pos?.x || 0, top: block.pos?.y || 0 };
+      resizeStart = { x: p.x, y: p.y, width: rect.width, height: rect.height, canvasWidth: canvasRect.width || 1, id: block.id, free: state.settings.free_drag, handle, aspect, left: block.pos?.x || 0, top: block.pos?.y || 0, widthPctStart: Math.max(30, Math.min(100, Number(block.data?.width || 100))) };
       document.addEventListener("mousemove", onFreeResizeMove, { passive: false });
       document.addEventListener("mouseup", endFreeResize);
       document.addEventListener("touchmove", onFreeResizeMove, { passive: false });
@@ -1562,6 +1873,13 @@ const state = {
       }
       newWidthPx = Math.max(120, newWidthPx);
       newHeightPx = Math.max(80, newHeightPx);
+      if (!resizeStart.free){
+        const deltaPct = (dx / Math.max(120, resizeStart.width)) * 100;
+        const widthPct = Math.max(30, Math.min(100, Math.round(resizeStart.widthPctStart + deltaPct)));
+        block.data.width = widthPct;
+        scheduleBlockResize(block.id, 0, 0, widthPct, 0, false);
+        return;
+      }
       const canvas = document.getElementById("previewCanvas");
       const rect = canvas.getBoundingClientRect();
       const maxX = Math.max(0, rect.width - newWidthPx);
@@ -1575,9 +1893,10 @@ const state = {
       clearGuides();
       addGuide("v", snap(block.pos.x || 0));
       addGuide("h", snap(block.pos.y || 0));
-      scheduleBlockResize(block.id, block.pos.x, block.pos.y, widthPct, block.data.height);
+      scheduleBlockResize(block.id, block.pos.x, block.pos.y, widthPct, block.data.height, true);
     }
     function endFreeResize(){
+      const wasGridResize = !resizeStart.free;
       isResizingFree = false;
       clearGuides();
       const el = document.getElementById(resizeStart.id);
@@ -1586,6 +1905,9 @@ const state = {
       document.removeEventListener("mouseup", endFreeResize);
       document.removeEventListener("touchmove", onFreeResizeMove);
       document.removeEventListener("touchend", endFreeResize);
+      if (wasGridResize){
+        renderPreview();
+      }
     }
     function wireSettings(){
       const s=state.settings;
@@ -1606,6 +1928,9 @@ const state = {
       const bgVideo=document.getElementById("bgVideoInput");
       const bgAnim=document.getElementById("bgAnimInput");
       const animToggle=document.getElementById("animToggle");
+      const canvasMinHeight=document.getElementById("canvasMinHeightInput");
+      const canvasBottomSpace=document.getElementById("canvasBottomSpaceInput");
+      const siteAuthor=document.getElementById("siteAuthorInput");
       siteName.value=s.site_name||""; primary.value=s.primary_color||"#59d9c8";
       bgColor.value=s.bg_color||"#f6f7fb"; bgColor2.value=s.bg_color2||"#e9eef5"; bgGradient.checked=!!s.bg_gradient;
       bgMotion.value=s.bg_motion||"none";
@@ -1616,6 +1941,9 @@ const state = {
       bgVideo.value=s.bg_video_url||"";
       bgAnim.value=s.bg_anim_url||"";
       animToggle.checked = s.animations !== false;
+      canvasMinHeight.value = Math.max(700, Number(s.canvas_min_height || 1200));
+      canvasBottomSpace.value = Math.max(0, Number(s.canvas_bottom_space || 180));
+      siteAuthor.value = s.site_author || "";
       siteName.addEventListener("input",()=>{ s.site_name=siteName.value; renderPreview(); });
       primary.addEventListener("input",()=>{ s.primary_color=primary.value; renderPreview(); });
       bgColor.addEventListener("input",()=>{ s.bg_color=bgColor.value; renderPreview(); });
@@ -1629,29 +1957,13 @@ const state = {
       bgVideo.addEventListener("input",()=>{ s.bg_video_url=bgVideo.value; renderPreview(); });
       bgAnim.addEventListener("input",()=>{ s.bg_anim_url=bgAnim.value; renderPreview(); });
       animToggle.addEventListener("change",()=>{ s.animations=animToggle.checked; renderPreview(); });
+      canvasMinHeight.addEventListener("input",()=>{ s.canvas_min_height = Math.max(700, Number(canvasMinHeight.value || 1200)); renderPreview(); });
+      canvasBottomSpace.addEventListener("input",()=>{ s.canvas_bottom_space = Math.max(0, Number(canvasBottomSpace.value || 0)); renderPreview(); });
+      siteAuthor.addEventListener("input",()=>{ s.site_author = siteAuthor.value; renderPreview(); });
 
       bindDrop(logoDrop, logoFile, (data)=>{ s.logo_url = data; }, "Logo cargado");
       bindDrop(bgDrop, bgFile, (data)=>{ s.bg_image_url = data; }, "Fondo cargado");
     }
-    function wireFreeDragToggle(){
-      const btn = document.getElementById("btnFreeDrag");
-      if (!btn) return;
-      const applyLabel = ()=>{
-        btn.textContent = state.settings.free_drag ? "Modo libre: ON" : "Modo libre";
-        btn.classList.toggle("active", !!state.settings.free_drag);
-      };
-      btn.addEventListener("click", ()=>{
-        state.settings.free_drag = !state.settings.free_drag;
-        if (state.settings.free_drag){
-          state.blocks.forEach((b)=>{
-            if (!b.pos) b.pos = getDefaultPos();
-          });
-        }
-        applyLabel();
-        renderPreview();
-      });
-      applyLabel();
-    }
     function wirePreviewSize(){
       const shell=document.querySelector(".preview-shell");
       if (!shell) return;
@@ -1666,28 +1978,69 @@ const state = {
         shell.classList.add(cls);
       };
       const setSize=(w, btnId)=>{
-        const before = shell.getBoundingClientRect().width || 1;
         shell.style.maxWidth = w;
         setActive(btnId);
         setShellClass(btnId==="btnSizePhone" ? "size-phone" : btnId==="btnSizeTablet" ? "size-tablet" : "size-desktop");
-        setTimeout(()=>{
-          const after = shell.getBoundingClientRect().width || before;
-          if (state.settings.free_drag && after !== before){
-            const ratio = after / before;
-            state.blocks.forEach(b=>{
-              if (b.pos){
-                b.pos = { x: Math.round(b.pos.x * ratio), y: Math.round(b.pos.y * ratio) };
-              }
-            });
-            renderPreview();
-          }
-        }, 30);
       };
       document.getElementById("btnSizePhone").addEventListener("click",()=>setSize("520px","btnSizePhone"));
       document.getElementById("btnSizeTablet").addEventListener("click",()=>setSize("820px","btnSizeTablet"));
       document.getElementById("btnSizeDesktop").addEventListener("click",()=>setSize("100%","btnSizeDesktop"));
       setShellClass("size-desktop");
     }
+    function wirePreviewToggle(){
+      const btn = document.getElementById("btnPreview");
+      if (!btn) return;
+      btn.addEventListener("click", ()=>{
+        const isPreview = document.body.classList.contains("preview-mode");
+        if (isPreview){
+          window.history.back();
+          return;
+        }
+        const previewUrl = new URL(window.location.href);
+        previewUrl.hash = "preview";
+        window.history.pushState({ preview: true }, "", previewUrl.toString());
+        document.body.classList.add("preview-mode");
+        ensurePreviewBackButton();
+      });
+    }
+    function ensurePreviewBackButton(){
+      let back = document.getElementById("previewBackBtn");
+      if (!back){
+        back = document.createElement("button");
+        back.id = "previewBackBtn";
+        back.className = "preview-back";
+        back.textContent = "Atras";
+        back.addEventListener("click", ()=>{
+          if (window.history.length > 1){
+            window.history.back();
+            return;
+          }
+          document.body.classList.remove("preview-mode");
+          const clean = new URL(window.location.href);
+          clean.hash = "";
+          window.history.replaceState({}, "", clean.toString());
+        });
+        document.body.appendChild(back);
+      }
+      return back;
+    }
+    function initStandalonePreviewMode(){
+      const apply = ()=>{
+        const isPreview = window.location.hash === "#preview";
+        document.body.classList.toggle("preview-mode", isPreview);
+        if (isPreview){
+          ensurePreviewBackButton();
+        } else {
+          const back = document.getElementById("previewBackBtn");
+          if (back) back.remove();
+        }
+      };
+      apply();
+      if (!window.__previewPopBound){
+        window.addEventListener("popstate", apply);
+        window.__previewPopBound = true;
+      }
+    }
     function wireThemeToggle(){
       const btn = document.getElementById("btnTheme");
       if (!btn) return;
@@ -1726,16 +2079,6 @@ const state = {
         applyLabel();
       });
     }
-    function alignBlocks(){
-      if (!state.settings.free_drag) return;
-      let y = 20;
-      const x = 20;
-      state.blocks.forEach((b)=>{
-        b.pos = { x, y };
-        y += 120;
-      });
-      renderPreview();
-    }
     function setSaveStatus(msg, kind=""){
       const status = document.getElementById("saveStatus");
       if (!status) return;
@@ -1746,14 +2089,21 @@ const state = {
       if (!Array.isArray(blocks)) return [];
       return blocks
         .filter((b)=>b && typeof b === "object")
-        .map((b)=>({
-          ...b,
-          id: b.id || makeId(),
-          data: (b.data && typeof b.data === "object") ? b.data : {}
-        }));
+        .map((b)=>{
+          const data = (b.data && typeof b.data === "object") ? { ...b.data } : {};
+          const fallback = 100;
+          data.width = snapBlockWidth(b.type, (typeof data.width === "number" ? data.width : fallback));
+          delete data.full_width;
+          return {
+            ...b,
+            id: b.id || makeId(),
+            data
+          };
+        });
     }
     async function saveContent(){
       if (isSaving) return;
+      state.settings.free_drag = false;
       isSaving = true;
       const btn = document.getElementById("btnSave");
       if (btn){
@@ -1797,75 +2147,13 @@ const state = {
         state.settings.free_drag = false;
       }
       selectedBlockId = null;
-      wireSidebar(); wirePreviewDrop(); wireInlineEditing(); wireSettings(); wireFreeDragToggle(); wireJumpSelect(); wirePreviewSize(); wireThemeToggle();
+      wireSidebar();
+      wirePreviewDrop();
+      if (hasSortable()){ wireSortableDnD(); }
+      wireInlineEditing(); wireSettings(); wireJumpSelect(); wirePreviewSize(); wirePreviewToggle(); wireThemeToggle();
+      initStandalonePreviewMode();
       const backBtn = document.getElementById("btnBack");
       if (backBtn){ backBtn.addEventListener("click",()=>{ window.history.back(); }); }
-      const previewBtn = document.getElementById("btnPreview");
-      if (previewBtn){
-        previewBtn.addEventListener("click",()=>{
-          document.body.classList.toggle("preview-mode");
-          const isPreview = document.body.classList.contains("preview-mode");
-          const sidebar = document.querySelector(".sidebar");
-          const inspector = document.querySelector(".inspector");
-          const main = document.querySelector(".main");
-          const shell = document.querySelector(".preview-shell");
-          const activeSizeBtn = document.querySelector("#btnSizePhone.active, #btnSizeTablet.active, #btnSizeDesktop.active");
-          const activeSizeId = activeSizeBtn ? activeSizeBtn.id : "btnSizeDesktop";
-          if (isPreview && shell){
-            previewStateBefore = {
-              maxWidth: shell.style.maxWidth || "",
-              margin: shell.style.margin || "",
-              activeSizeId
-            };
-          }
-          if (sidebar) sidebar.style.display = isPreview ? "none" : "";
-          if (inspector) inspector.style.display = isPreview ? "none" : "";
-          if (main) main.style.padding = isPreview ? "0" : "";
-          if (shell){
-            if (isPreview){
-              shell.style.maxWidth = "100%";
-              shell.style.margin = "0";
-              shell.classList.remove("size-phone","size-tablet","size-desktop");
-              shell.classList.add("size-desktop");
-              ["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
-                const b=document.getElementById(id);
-                if (b) b.classList.toggle("active", id==="btnSizeDesktop");
-              });
-            } else if (previewStateBefore){
-              shell.style.maxWidth = previewStateBefore.maxWidth;
-              shell.style.margin = previewStateBefore.margin;
-              shell.classList.remove("size-phone","size-tablet","size-desktop");
-              const map = { btnSizePhone: "size-phone", btnSizeTablet: "size-tablet", btnSizeDesktop: "size-desktop" };
-              shell.classList.add(map[previewStateBefore.activeSizeId] || "size-desktop");
-              ["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
-                const b=document.getElementById(id);
-                if (b) b.classList.toggle("active", id===previewStateBefore.activeSizeId);
-              });
-            }
-          }
-          window.scrollTo({ top: 0, behavior: "smooth" });
-          return;
-        });
-      }
-      const fullPageBtn = document.getElementById("btnFullPage");
-      if (fullPageBtn){
-        fullPageBtn.addEventListener("click",()=>{
-          const url = `${window.location.pathname}?full=1`;
-          window.location.href = url;
-        });
-      }
-      if (FULL_PAGE_MODE && !document.body.classList.contains("preview-mode")){
-        document.body.classList.add("preview-mode");
-        const shell = document.querySelector(".preview-shell");
-        const main = document.querySelector(".main");
-        if (main) main.style.padding = "0";
-        if (shell){
-          shell.style.maxWidth = "100%";
-          shell.style.margin = "0";
-          shell.classList.remove("size-phone","size-tablet","size-desktop");
-          shell.classList.add("size-desktop");
-        }
-      }
       const pageSelect = document.getElementById("pageSelect");
       if (pageSelect){
         pageSelect.addEventListener("change",()=>{
@@ -1888,8 +2176,6 @@ const state = {
           applyTemplate(templateSelect.value);
         });
       }
-const alignBtn = document.getElementById("btnAlign");
-      if (alignBtn){ alignBtn.addEventListener("click",alignBlocks); }
       document.getElementById("previewCanvas").addEventListener("click",()=>{ selectedBlockId=null; renderInspector(); renderPreview(); });
       document.getElementById("btnSave").addEventListener("click",saveContent);
       renderInspector(); renderPreview();