From 48742a273666c960150aa04dd97f3beb4cf547b0 Mon Sep 17 00:00:00 2001
From: komkida91 <gustavokachle@gmail.com>
Date: Sun, 1 Mar 2026 13:47:14 +0100
Subject: [PATCH] feat(builder): baseline premium campos misiones en elementor

---
 elementor/templates/elementor_builder.html | 249 +++++++++++++++++----
 1 file changed, 211 insertions(+), 38 deletions(-)

diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html
index f97253a..ff7096f 100644
--- a/elementor/templates/elementor_builder.html
+++ b/elementor/templates/elementor_builder.html
@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>GKACHELE Builder</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;600;700&family=Outfit:wght@400;500;700&family=Sora:wght@400;600;700&family=Poppins:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;600;700&family=Outfit:wght@400;500;700&family=Sora:wght@400;600;700&family=Poppins:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;700&family=Merriweather:wght@400;700&family=Oswald:wght@400;600;700&family=Source+Serif+4:wght@400;500;700&display=swap" rel="stylesheet">
   <style>
-    :root { --bg:#0b0f16; --panel:#121826; --panel2:#1a2234; --text:#e5e7eb; --muted:#8a93a5; --accent:#59d9c8; --border:#263043; --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --shadow-soft:0 8px 18px rgba(15,23,42,.06); --shadow-lift:0 16px 36px rgba(15,23,42,.12); }
+    :root { --bg:#0b0f16; --panel:#121826; --panel2:#1a2234; --text:#e5e7eb; --muted:#8a93a5; --accent:#59d9c8; --border:#263043; --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --shadow-soft:0 8px 18px rgba(15,23,42,.06); --shadow-lift:0 16px 36px rgba(15,23,42,.12); --motion-fast:160ms; --motion-base:240ms; --motion-slow:420ms; --ease-standard:cubic-bezier(.22,.61,.36,1); --ease-emphasis:cubic-bezier(.2,.8,.2,1); --block-hover-lift:-4px; --block-shadow-rest:0 12px 30px rgba(15,23,42,.08); --block-shadow-hover:0 22px 44px rgba(15,23,42,.16); --block-ring-hover:0 0 0 1px rgba(37,99,235,.14); }
     *{box-sizing:border-box}
     body{margin:0;font-family:Manrope,system-ui,sans-serif;background:radial-gradient(circle at top left,#101725,#080b12 65%);color:var(--text)}
     .app{display:grid;grid-template-columns:240px 1fr 280px;min-height:100vh}
@@ -50,16 +50,30 @@
     .apple-dot{width:9px;height:9px;border-radius:50%}
     .red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80}
     .canvas{min-height:700px;padding:18px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
-    .canvas-inner{width:min(100%, var(--canvas-max, 1280px));margin:0 auto}
-    .block{background:var(--site-block-bg,var(--site-card,#fff));border-radius:var(--site-block-radius,var(--radius-md));padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--site-block-border,transparent);box-shadow:var(--site-block-shadow,0 12px 30px rgba(15,23,42,.08));transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:fadeUp .25s ease;color:var(--site-text,#0b0c10);position:relative;cursor:grab;touch-action:pan-y}
+    .canvas-inner{width:100%;max-width:none;margin:0 auto}
+    .block{background:var(--site-block-bg,var(--site-card,#fff));border-radius:var(--site-block-radius,var(--radius-md));padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--site-block-border,transparent);box-shadow:var(--site-block-shadow,var(--block-shadow-rest));transition:transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);animation:fadeUp var(--motion-base) var(--ease-standard);color:var(--site-text,#0b0c10);position:relative;cursor:grab;touch-action:pan-y;overflow:hidden;isolation:isolate}
+    .block::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(15,23,42,.04));opacity:var(--site-block-sheen-opacity,.34);transition:opacity var(--motion-base) var(--ease-standard)}
+    .block::after{content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(37,99,235,.16),rgba(37,99,235,0) 64%);opacity:var(--site-block-accent-opacity,0);transition:opacity var(--motion-slow) var(--ease-emphasis),transform var(--motion-slow) var(--ease-emphasis);transform:translate3d(0,8px,0)}
     .block.dragging,.block.resizing{transition:none;cursor:grabbing}
     body.dragging{user-select:none}
-    .block:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(15,23,42,.14)}
+    .block:hover{transform:translate3d(0,var(--block-hover-lift),0);box-shadow:var(--site-block-shadow-hover,var(--block-shadow-hover)),var(--site-block-ring-hover,var(--block-ring-hover))}
+    .block:hover::before{opacity:var(--site-block-sheen-opacity-hover,.48)}
+    .block:hover::after{opacity:var(--site-block-accent-opacity-hover,.22);transform:translate3d(0,0,0)}
     .block.selected{border-color:#7aa7ff}
     .block.anim-in-none{animation:none}
     .block.anim-in-slide{animation:slideIn .28s ease}
     .block.anim-in-zoom{animation:zoomIn .26s ease}
-    .block.hover-none:hover{transform:none;box-shadow:var(--site-block-shadow,0 12px 30px rgba(15,23,42,.08))}
+    .block.hover-none:hover{transform:none;box-shadow:var(--site-block-shadow,var(--block-shadow-rest))}
+    .block.hover-none:hover::after{opacity:var(--site-block-accent-opacity,0)}
+    .block.hover-none:hover::before{opacity:var(--site-block-sheen-opacity,.34)}
+    .block.style-clean-landing{--site-block-bg:#ffffff;--site-block-border:#dbe3ee;--site-block-shadow:0 10px 26px rgba(15,23,42,.09);--site-block-shadow-hover:0 24px 44px rgba(15,23,42,.15);--site-block-ring-hover:0 0 0 1px rgba(15,23,42,.08);--site-block-sheen-opacity:.4;--site-block-sheen-opacity-hover:.52;--site-block-accent-opacity:0;--site-block-accent-opacity-hover:.14}
+    .block.style-dark-glow{--site-block-bg:linear-gradient(165deg,rgba(7,12,22,.92),rgba(3,8,16,.88));--site-block-border:#1f3657;--site-block-shadow:0 16px 36px rgba(2,8,20,.46);--site-block-shadow-hover:0 24px 56px rgba(8,24,56,.58);--site-block-ring-hover:0 0 0 1px rgba(37,99,235,.42);--site-block-sheen-opacity:.08;--site-block-sheen-opacity-hover:.16;--site-block-accent-opacity:.24;--site-block-accent-opacity-hover:.38;color:#e6edf8}
+    .block.style-glass{--site-block-bg:linear-gradient(155deg,rgba(255,255,255,.52),rgba(255,255,255,.28));--site-block-border:rgba(255,255,255,.48);--site-block-shadow:0 16px 34px rgba(15,23,42,.13);--site-block-shadow-hover:0 24px 44px rgba(15,23,42,.2);--site-block-sheen-opacity:.46;--site-block-sheen-opacity-hover:.58;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
+    .block.style-soft-gradient{--site-block-bg:linear-gradient(150deg,#f8fafc 0%,#eef2ff 55%,#e2e8f0 100%);--site-block-border:#d5deef;--site-block-shadow:0 12px 28px rgba(15,23,42,.1);--site-block-sheen-opacity:.36;--site-block-sheen-opacity-hover:.48;--site-block-accent-opacity:.12;--site-block-accent-opacity-hover:.22}
+    .block.bg-motion-flow::before{background:linear-gradient(120deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 34%,rgba(59,130,246,.2) 52%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.25) 100%);background-size:220% 220%;animation:bgFlow var(--block-motion-duration,18s) linear infinite}
+    .block.bg-motion-aurora::after{opacity:var(--site-block-accent-opacity-hover,.26);animation:bgAurora var(--block-motion-duration,22s) var(--ease-emphasis) infinite}
+    .block.bg-motion-parallax::before{animation:bgParallax var(--block-motion-duration,20s) var(--ease-standard) infinite}
+    .block.bg-motion-parallax::after{opacity:var(--site-block-accent-opacity-hover,.2);animation:bgAurora calc(var(--block-motion-duration,20s) * 1.15) var(--ease-emphasis) infinite reverse}
     .block.hover-glow:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,99,235,.24),0 0 0 1px rgba(37,99,235,.28)}
     .block.hover-tilt:hover{transform:translateY(-2px) rotate(-.3deg)}
     .block.has-bg-media{background-size:cover;background-position:center;background-repeat:no-repeat}
@@ -77,6 +91,12 @@
     @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
     @keyframes slideIn{from{opacity:0;transform:translateY(10px) translateX(-8px)}to{opacity:1;transform:translateY(0) translateX(0)}}
     @keyframes zoomIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
+    @keyframes bgFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+    @keyframes bgAurora{0%{transform:translate3d(0,12px,0) scale(.96)}50%{transform:translate3d(-8px,-8px,0) scale(1.04)}100%{transform:translate3d(0,12px,0) scale(.96)}}
+    @keyframes bgParallax{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}100%{transform:translate3d(0,0,0)}}
+    @media (prefers-reduced-motion: reduce){
+      .block,.block::before,.block::after{animation:none !important;transition:none !important}
+    }
     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}
     input[type="color"]{height:36px;padding:4px;background:#0f172a;border-radius:10px}
@@ -121,6 +141,8 @@
     .calendar-day.today{border-color:var(--site-primary);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
     .hero-pro{display:grid;gap:var(--space-4)}
     .hero-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,.92fr);gap:var(--space-5);align-items:stretch}
+    .hero-layout.reverse .hero-copy{order:2}
+    .hero-layout.reverse .hero-media{order:1}
     .hero-copy{display:grid;gap:var(--space-3);align-content:center}
     .hero-media{min-height:320px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid #dbe3ee;background:linear-gradient(130deg,#e8eef6,#dce6f1);box-shadow:var(--shadow-soft)}
     .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
@@ -235,8 +257,9 @@
     .canvas-bg-overlay{position:absolute;inset:0;z-index:0;pointer-events:none}
     .restaurant-site .canvas-bg-overlay{background:linear-gradient(180deg,rgba(10,12,16,.12) 0%,rgba(10,12,16,.06) 40%,rgba(10,12,16,0) 100%);backdrop-filter:blur(1px)}
     .restaurant-site{padding:28px;background:linear-gradient(180deg,var(--restaurant-bg-1,#f8fafc) 0%,var(--restaurant-bg-2,#f1f5f9) 100%)}
-    .restaurant-site .block{transform:none}
-    .restaurant-site .block:hover{transform:none}
+    .restaurant-site .block{transform:translate3d(0,0,0)}
+    .restaurant-site .block:hover{transform:translate3d(0,var(--block-hover-lift),0);box-shadow:var(--site-block-shadow-hover,var(--block-shadow-hover)),var(--site-block-ring-hover,var(--block-ring-hover))}
+    .restaurant-site .block.bg-motion-flow::before{opacity:.5}
     .restaurant-site .block[data-block-type="menu"]{background:var(--restaurant-surface,#fff);border:1px solid var(--restaurant-border,#dbe3ee);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
     .restaurant-site .site-nav{border-color:var(--restaurant-border,#dbe3ee);background:var(--restaurant-surface,#fff)}
     .restaurant-site .site-brand{font-size:clamp(17px,1.9vw,24px);font-family:var(--site-font-heading,Playfair Display),serif}
@@ -254,6 +277,16 @@
     .restaurant-site .block[data-block-type="review"] h3{color:var(--site-text)}
     .restaurant-site .block[data-block-type="contact"]{background:var(--restaurant-surface,#fff);border:1px solid var(--restaurant-border,#dbe3ee);border-radius:20px;padding:22px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
     .restaurant-site .block[data-block-type="map"]{background:var(--restaurant-surface,#fff);border:1px solid var(--restaurant-border,#dbe3ee);border-radius:20px;padding:20px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
+    /* Ensure visual presets override restaurante hardcoded surfaces */
+    .restaurant-site .block.style-clean-landing,
+    .restaurant-site .block.style-dark-glow,
+    .restaurant-site .block.style-glass,
+    .restaurant-site .block.style-soft-gradient{
+      background:var(--site-block-bg,var(--restaurant-surface,#fff));
+      border-color:var(--site-block-border,var(--restaurant-border,#dbe3ee));
+      box-shadow:var(--site-block-shadow,0 8px 20px rgba(15,23,42,.06));
+      color:var(--site-text,#0b0c10);
+    }
     .restaurant-site .site-global-footer{background:var(--restaurant-surface,#fff);border-color:var(--restaurant-border,#dbe3ee)}
     .float-whatsapp{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:999px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.22);z-index:999;text-decoration:none}
     .float-whatsapp:hover{transform:translateY(-2px)}
@@ -301,6 +334,24 @@
       min-height:100vh !important;
       padding:0 !important;
     }
+    body.preview-mode .canvas-inner{
+      gap:0 !important;
+    }
+    body.preview-mode .block{
+      margin:0 !important;
+      border-radius:0 !important;
+      border-left:0 !important;
+      border-right:0 !important;
+      box-shadow:none !important;
+    }
+    body.preview-mode .restaurant-site{
+      padding:0 !important;
+      border-radius:0 !important;
+    }
+    body.preview-mode .canvas-inner{
+      width:100vw !important;
+      max-width:100vw !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}
@@ -459,6 +510,7 @@
               <option value="Poppins">Poppins</option>
               <option value="IBM Plex Sans">IBM Plex Sans</option>
               <option value="Merriweather">Merriweather</option>
+              <option value="Source Serif 4">Source Serif 4</option>
             </select>
           </div>
           <div class="row"><label>Tipografia titulos</label>
@@ -471,6 +523,7 @@
               <option value="Poppins">Poppins</option>
               <option value="Playfair Display">Playfair Display</option>
               <option value="Merriweather">Merriweather</option>
+              <option value="Oswald">Oswald</option>
             </select>
           </div>
         </div>
@@ -496,6 +549,9 @@
       <details class="acc">
         <summary>Layout</summary>
         <div class="acc-body">
+          <div class="row"><label>Preset global bloques</label><select id="globalBlockPresetSelect"><option value="clean-landing">Clean Landing</option><option value="dark-glow">Dark Glow</option><option value="glass">Glass</option><option value="soft-gradient">Soft Gradient</option></select></div>
+          <div class="row"><label>Movimiento fondo global</label><select id="globalBlockMotionSelect"><option value="none">Sin movimiento</option><option value="flow">Gradient Flow</option><option value="aurora">Aurora</option><option value="parallax">Parallax Soft</option></select></div>
+          <div class="row"><label>Velocidad movimiento global</label><select id="globalBlockMotionSpeedSelect"><option value="slow">Lenta</option><option value="normal">Normal</option><option value="fast">Rapida</option></select></div>
           <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>
@@ -548,7 +604,10 @@
       site_author: "",
       registered_brand: "",
       developer_brand: "GKACHELE™",
-      business_rubro: "restaurante"
+      business_rubro: "restaurante",
+      global_block_preset: "clean-landing",
+      global_block_motion: "flow",
+      global_block_motion_speed: "normal"
     };
     const templates = {
       base_otro: {
@@ -575,15 +634,28 @@
         ]
       },
       restaurante: {
-        settings: { primary_color: '#ef4444', bg_color: '#fff7ed', text_color: '#0b0c10', muted_color: '#6b7280', font_body: 'IBM Plex Sans', font_heading: 'Playfair Display', bg_gradient: false },
+        settings: {
+          primary_color: '#9b2f16',
+          bg_color: '#e9e3d5',
+          bg_color2: '#f4efe3',
+          text_color: '#1f1b17',
+          muted_color: '#5f564b',
+          font_body: 'Source Serif 4',
+          font_heading: 'Oswald',
+          bg_gradient: true,
+          global_block_preset: 'soft-gradient',
+          global_block_motion: 'flow',
+          global_block_motion_speed: 'slow'
+        },
         blocks: [
           { id: makeId(), type: 'menu', data: { ...defaultData('menu'), width: 100 } },
-          { id: makeId(), type: 'hero', data: { title: 'Sabores que enamoran', subtitle: 'Cocina artesanal, ambiente unico y atencion cercana.', kicker: 'Restaurante', button_text: 'Reservar', button_url: '#contacto', button_secondary_text: 'Ver menu', button_secondary_url: '#menu', image_url: '', align: 'left', width: 100 } },
-          { id: makeId(), type: 'gallery', data: { title: 'Platos destacados', images: ['','',''], captions: ['','',''], fit: 'cover', width: 100 } },
-          { id: makeId(), type: 'cards', data: { title: 'Especialidades', items: ['Entradas|Frescas y ligeras','Platos fuertes|Hechos al momento','Postres|Dulce final'], columns: 3, width: 100 } },
-          { id: makeId(), type: 'review', data: { title: 'Rese?as', name: 'Cliente feliz', text: 'Excelente sabor y servicio impecable.', rating: 5, style: 'card', width: 100 } },
-          { id: makeId(), type: 'contact', data: { title: 'Reservas', email: '', phone: '', address: '', cta_text: 'Reservar por WhatsApp', cta_url: '#', width: 100 } },
-          { id: makeId(), type: 'map', data: { title: 'Ubicacion', address: '', embed_url: '', height: 320, width: 100 } }
+          { id: makeId(), type: 'hero', data: { title: 'Hectarea en Obera + Chacra en Jardin America', subtitle: 'Presentacion comercial clara con contacto directo, mapas embebidos y cierre por WhatsApp.', kicker: 'Venta Directa', button_text: 'Hablar por WhatsApp', button_url: '#contacto', button_secondary_text: 'Ver propiedades', button_secondary_url: '#menu', image_url: '', align: 'left', width: 60 } },
+          { id: makeId(), type: 'cards', data: { title: 'Propiedades destacadas', items: ['Obera|1 hectarea con excelente proyeccion.','Jardin America|25 hectareas con potencial productivo.','Documentacion|Informacion lista para visita y cierre.'], columns: 3, width: 60 } },
+          { id: makeId(), type: 'gallery', data: { title: 'Galeria referencial', images: ['','',''], captions: ['Zona 1','Zona 2','Zona 3'], fit: 'cover', width: 60 } },
+          { id: makeId(), type: 'review', data: { title: 'Resenas', name: 'Cliente verificado', text: 'Presentacion impecable y proceso de contacto muy claro.', rating: 5, style: 'card', width: 60 } },
+          { id: makeId(), type: 'contact', data: { title: 'Contacto directo', email: '', phone: '', address: '', cta_text: 'Escribir ahora', cta_url: '#', width: 60 } },
+          { id: makeId(), type: 'social', data: { instagram: '', facebook: '', whatsapp: '', tiktok: '', youtube: '', icon_size: 18, icon_color: '#1f1b17', show_text: true, icon_style: 'pill', social_preset: 'pro', width: 60 } },
+          { id: makeId(), type: 'map', data: { title: 'Ubicacion', address: '', embed_url: '', height: 320, width: 60 } }
         ]
       },
       cosmeticos: {
@@ -685,6 +757,24 @@ const state = {
       const a = Math.max(0, Math.min(1, Number(alpha || 0)));
       return `rgba(${r},${g},${b},${a})`;
     }
+    function normalizeBlockPreset(value){
+      const raw = String(value || "").trim().toLowerCase();
+      return ["clean-landing","dark-glow","glass","soft-gradient","inherit"].includes(raw) ? raw : "inherit";
+    }
+    function normalizeBlockMotion(value){
+      const raw = String(value || "").trim().toLowerCase();
+      return ["none","flow","aurora","parallax","inherit"].includes(raw) ? raw : "inherit";
+    }
+    function normalizeMotionSpeed(value){
+      const raw = String(value || "").trim().toLowerCase();
+      return ["slow","normal","fast","inherit"].includes(raw) ? raw : "inherit";
+    }
+    function getMotionDuration(speed){
+      const key = normalizeMotionSpeed(speed);
+      if (key === "slow") return "24s";
+      if (key === "fast") return "12s";
+      return "18s";
+    }
     function getDefaultPos(){
       const base = 20;
       const gap = 120;
@@ -694,20 +784,20 @@ const state = {
     function defaultData(type){
       switch(type){
         case "menu": return { title:"Menu", items:["Inicio","Productos","Blog","La Empresa","Contacto"], menu_mode:"both", menu_mobile_style:"accordion", width:100 };
-        case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", kicker:"", button_text:"Contactar", button_url:"#contacto", button_secondary_text:"Ver mas", button_secondary_url:"#", image_url:"", align:"left", 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:"Propuesta", items:["Titulo 1|Texto breve","Titulo 2|Texto breve","Titulo 3|Texto breve"], columns:3, 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:"", cta_text:"Reservar ahora", cta_url:"#", width:100 };
-        case "map": return { title:"Ubicacion", address:"", embed_url:"", height:320, 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 };
+        case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", kicker:"", button_text:"Contactar", button_url:"#contacto", button_secondary_text:"Ver mas", button_secondary_url:"#", image_url:"", align:"left", layout:"media-right", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "text": return { text:"Describe tu negocio aqui.", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "features": return { title:"Beneficios", items:["Rapido","Profesional","Confiable"], width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "gallery": return { title:"Proyectos", images:["","",""], captions:["","",""], fit:"cover", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "cards": return { title:"Propuesta", items:["Titulo 1|Texto breve","Titulo 2|Texto breve","Titulo 3|Texto breve"], columns:3, width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "iconlist": return { title:"Diferenciales", items:["Rapido|Ahorra tiempo","Seguro|Datos protegidos","Soporte|Respuesta rapida"], width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "contact": return { title:"Hablemos", email:"", phone:"", address:"", cta_text:"Reservar ahora", cta_url:"#", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "map": return { title:"Ubicacion", address:"", embed_url:"", height:320, width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "button": return { text:"Accion", url:"#", style:"primary", size:"md", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit"};
+        case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "video": return { url:"", description:"", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
+        case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"", width:60, visual_preset:"inherit", bg_motion_style:"inherit", bg_motion_speed:"inherit" };
         default: return {};
       }
     }
@@ -1159,8 +1249,8 @@ const state = {
         const kicker = block.data.kicker || state.settings.site_name || "GKACHELE";
         const secondaryText = block.data.button_secondary_text || "Ver servicios";
         const secondaryUrl = block.data.button_secondary_url || "#servicios";
-        return `<div class="hero-pro hero-layout">
-          <div class="hero-copy" style="text-align:${align}">
+        const isMediaLeft = String(block.data.layout || "media-right").toLowerCase() === "media-left";
+        const copyHtml = `<div class="hero-copy" style="text-align:${align}">
             <div class="hero-kicker">${escapeHtml(kicker)}</div>
             ${editable("h2","title",block.data.title,"Titulo",false,"")}
             ${editable("p","subtitle",block.data.subtitle,"Subtitulo",true,"")}
@@ -1168,9 +1258,9 @@ const state = {
               <a href="${escapeHtml(block.data.button_url||"#")}" class="editable hero-cta" data-field="button_text" data-placeholder="Boton" contenteditable="true">${escapeHtml(block.data.button_text)}</a>
               <a href="${escapeHtml(secondaryUrl)}" class="hero-cta-secondary">${escapeHtml(secondaryText)}</a>
             </div>
-          </div>
-          <div class="hero-media">${image}</div>
-        </div>`;
+          </div>`;
+        const mediaHtml = `<div class="hero-media">${image}</div>`;
+        return `<div class="hero-pro hero-layout">${isMediaLeft ? `${mediaHtml}${copyHtml}` : `${copyHtml}${mediaHtml}`}</div>`;
       }
       if (block.type==="text"){ return editable("p","text",block.data.text,"Escribe aqui...",true,"margin:0;color:var(--site-text)"); }
       if (block.type==="image"){
@@ -1528,12 +1618,34 @@ const state = {
           }
         }
         const blockData = block.data || {};
-        const animIn = ["fade","slide","zoom","none"].includes(String(blockData.anim_in || "").toLowerCase()) ? String(blockData.anim_in).toLowerCase() : "fade";
-        const animHover = ["lift","glow","tilt","none"].includes(String(blockData.anim_hover || "").toLowerCase()) ? String(blockData.anim_hover).toLowerCase() : "lift";
+        const globalPreset = normalizeBlockPreset(state.settings.global_block_preset || "clean-landing");
+        const globalMotion = normalizeBlockMotion(state.settings.global_block_motion || "none");
+        const globalMotionSpeed = normalizeMotionSpeed(state.settings.global_block_motion_speed || "normal");
+        const blockPreset = normalizeBlockPreset(blockData.visual_preset || "inherit");
+        const blockMotion = normalizeBlockMotion(blockData.bg_motion_style || "inherit");
+        const blockMotionSpeed = normalizeMotionSpeed(blockData.bg_motion_speed || "inherit");
+        const resolvedPreset = blockPreset === "inherit" ? (globalPreset === "inherit" ? "clean-landing" : globalPreset) : blockPreset;
+        const resolvedMotion = blockMotion === "inherit" ? (globalMotion === "inherit" ? "none" : globalMotion) : blockMotion;
+        const resolvedMotionSpeed = blockMotionSpeed === "inherit" ? (globalMotionSpeed === "inherit" ? "normal" : globalMotionSpeed) : blockMotionSpeed;
+        let animIn = ["fade","slide","zoom","none"].includes(String(blockData.anim_in || "").toLowerCase()) ? String(blockData.anim_in).toLowerCase() : "slide";
+        let animHover = ["lift","glow","tilt","none"].includes(String(blockData.anim_hover || "").toLowerCase()) ? String(blockData.anim_hover).toLowerCase() : "glow";
+        if (PREVIEW_ONLY && state.settings.animations !== false){
+          if (animIn === "none") animIn = "fade";
+          if (animHover === "none") animHover = "glow";
+        }
         const animDuration = Math.max(120, Math.min(900, Number(blockData.anim_duration || 250)));
+        el.classList.add(`style-${resolvedPreset}`);
+        if (resolvedMotion !== "none"){ el.classList.add(`bg-motion-${resolvedMotion}`); }
         el.classList.add(`anim-in-${animIn}`);
         el.classList.add(`hover-${animHover}`);
         el.style.transitionDuration = `${animDuration}ms`;
+        el.style.setProperty("--block-motion-duration", getMotionDuration(resolvedMotionSpeed));
+        const surfaceColor = String(blockData.surface_color || "").trim();
+        const borderColor = String(blockData.border_color || "").trim();
+        const textColor = String(blockData.text_color || "").trim();
+        if (surfaceColor){ el.style.setProperty("--site-block-bg", surfaceColor); } else { el.style.removeProperty("--site-block-bg"); }
+        if (borderColor){ el.style.setProperty("--site-block-border", borderColor); } else { el.style.removeProperty("--site-block-border"); }
+        if (textColor){ el.style.setProperty("--site-text", textColor); } else { el.style.removeProperty("--site-text"); }
         const bgImageUrl = String(blockData.bg_image_url || "").trim();
         if (bgImageUrl){
           const overlayHex = String(blockData.bg_overlay_hex || "#0f172a");
@@ -1896,6 +2008,7 @@ const state = {
       const block=state.blocks.find(b=>b.id===selectedBlockId);
       if (!block){ panel.textContent="Selecciona un bloque para editarlo."; return; }
       let html = `<div style="font-weight:600;margin-bottom:6px;text-transform:capitalize">${block.type}</div>`;
+      html += `<div class="row" style="display:flex;gap:8px"><button class="btn secondary" id="moveBlockUpBtn" type="button" style="flex:1">Mover arriba</button><button class="btn secondary" id="moveBlockDownBtn" type="button" style="flex:1">Mover abajo</button></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>`;
       if (block.type==="menu"){
@@ -1915,6 +2028,8 @@ const state = {
         html+=input("URL boton secundario","heroBtn2Url",data.button_secondary_url);
         const alignVal = escapeHtml((data.align || "left").toLowerCase());
         html+=`<div class="row"><label>Alineacion</label><select id="heroAlign"><option value="left" ${alignVal==="left"?"selected":""}>Izquierda</option><option value="center" ${alignVal==="center"?"selected":""}>Centro</option></select></div>`;
+        const heroLayoutVal = escapeHtml((data.layout || "media-right").toLowerCase());
+        html+=`<div class="row"><label>Posicion contenido</label><select id="heroLayout"><option value="media-right" ${heroLayoutVal==="media-right"?"selected":""}>Texto izquierda / Imagen derecha</option><option value="media-left" ${heroLayoutVal==="media-left"?"selected":""}>Imagen izquierda / Texto derecha</option></select></div>`;
         html+=input("Imagen URL","heroImage",data.image_url);
       } else if (block.type==="text"){
         html+=`<div class="row"><label>Texto</label><textarea id="textBlock">${escapeHtml(data.text||"")}</textarea></div>`;
@@ -2005,6 +2120,15 @@ const state = {
         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>`;
+        const visualPreset = escapeHtml(normalizeBlockPreset(data.visual_preset || "inherit"));
+        html+=`<div class="row"><label>Preset visual bloque</label><select id="blockVisualPreset"><option value="inherit" ${visualPreset==="inherit"?"selected":""}>Heredar global</option><option value="clean-landing" ${visualPreset==="clean-landing"?"selected":""}>Clean Landing</option><option value="dark-glow" ${visualPreset==="dark-glow"?"selected":""}>Dark Glow</option><option value="glass" ${visualPreset==="glass"?"selected":""}>Glass</option><option value="soft-gradient" ${visualPreset==="soft-gradient"?"selected":""}>Soft Gradient</option></select></div>`;
+        const blockMotion = escapeHtml(normalizeBlockMotion(data.bg_motion_style || "inherit"));
+        html+=`<div class="row"><label>Movimiento fondo bloque</label><select id="blockMotionStyle"><option value="inherit" ${blockMotion==="inherit"?"selected":""}>Heredar global</option><option value="none" ${blockMotion==="none"?"selected":""}>Sin movimiento</option><option value="flow" ${blockMotion==="flow"?"selected":""}>Gradient Flow</option><option value="aurora" ${blockMotion==="aurora"?"selected":""}>Aurora</option><option value="parallax" ${blockMotion==="parallax"?"selected":""}>Parallax Soft</option></select></div>`;
+        const blockMotionSpeed = escapeHtml(normalizeMotionSpeed(data.bg_motion_speed || "inherit"));
+        html+=`<div class="row"><label>Velocidad movimiento</label><select id="blockMotionSpeed"><option value="inherit" ${blockMotionSpeed==="inherit"?"selected":""}>Heredar global</option><option value="slow" ${blockMotionSpeed==="slow"?"selected":""}>Lenta</option><option value="normal" ${blockMotionSpeed==="normal"?"selected":""}>Normal</option><option value="fast" ${blockMotionSpeed==="fast"?"selected":""}>Rapida</option></select></div>`;
+        html+=`<div class="row"><label>Color superficie (opcional)</label><input id="blockSurfaceColor" type="color" value="${escapeHtml(data.surface_color || "#ffffff")}"></div>`;
+        html+=`<div class="row"><label>Color borde (opcional)</label><input id="blockBorderColor" type="color" value="${escapeHtml(data.border_color || "#dbe3ee")}"></div>`;
+        html+=`<div class="row"><label>Color texto (opcional)</label><input id="blockTextColor" type="color" value="${escapeHtml(data.text_color || "#0b0c10")}"></div>`;
         html+=`<div class="row"><label>Fondo imagen (URL)</label><input id="blockBgImage" type="text" value="${escapeHtml(data.bg_image_url || "")}" placeholder="https://..."></div>`;
         html+=`<div class="row"><label>Overlay color</label><input id="blockBgOverlayHex" type="color" value="${escapeHtml(data.bg_overlay_hex || "#0f172a")}"></div>`;
         html+=`<div class="row"><label>Overlay opacidad</label><input id="blockBgOverlayOpacity" type="range" min="0" max="0.85" step="0.05" value="${Math.max(0, Math.min(0.85, Number(data.bg_overlay_opacity || 0)))}"></div>`;
@@ -2017,6 +2141,10 @@ const state = {
       }
       html+=`<button class="danger" id="deleteBlockBtn">Eliminar bloque</button>`;
       panel.innerHTML=html;
+      const moveUpBtn = document.getElementById("moveBlockUpBtn");
+      const moveDownBtn = document.getElementById("moveBlockDownBtn");
+      if (moveUpBtn){ moveUpBtn.addEventListener("click",()=>moveBlockByDelta(block.id, -1)); }
+      if (moveDownBtn){ moveDownBtn.addEventListener("click",()=>moveBlockByDelta(block.id, 1)); }
       if (block.type==="image"){
         const drop = document.getElementById("imageDrop");
         const file = document.getElementById("imageFile");
@@ -2077,6 +2205,8 @@ const state = {
         if (hu2){ block.data.button_secondary_url = hu2.value; }
         const ha = document.getElementById("heroAlign");
         if (ha){ block.data.align = ha.value || "left"; }
+        const hl = document.getElementById("heroLayout");
+        if (hl){ block.data.layout = hl.value === "media-left" ? "media-left" : "media-right"; }
         block.data.image_url=document.getElementById("heroImage").value;
       } else if (block.type==="text"){ block.data.text=document.getElementById("textBlock").value; }
       else if (block.type==="image"){
@@ -2169,6 +2299,18 @@ const state = {
       if (widthEl && block.type !== "menu"){
         block.data = block.data || {};
         block.data.width = snapBlockWidth(block.type, Number(widthEl.value || 50));
+        const visualPresetEl = document.getElementById("blockVisualPreset");
+        if (visualPresetEl){ block.data.visual_preset = normalizeBlockPreset(visualPresetEl.value || "inherit"); }
+        const motionStyleEl = document.getElementById("blockMotionStyle");
+        if (motionStyleEl){ block.data.bg_motion_style = normalizeBlockMotion(motionStyleEl.value || "inherit"); }
+        const motionSpeedEl = document.getElementById("blockMotionSpeed");
+        if (motionSpeedEl){ block.data.bg_motion_speed = normalizeMotionSpeed(motionSpeedEl.value || "inherit"); }
+        const surfaceColorEl = document.getElementById("blockSurfaceColor");
+        if (surfaceColorEl){ block.data.surface_color = surfaceColorEl.value || ""; }
+        const borderColorEl = document.getElementById("blockBorderColor");
+        if (borderColorEl){ block.data.border_color = borderColorEl.value || ""; }
+        const textColorEl = document.getElementById("blockTextColor");
+        if (textColorEl){ block.data.text_color = textColorEl.value || ""; }
         const bgImgEl = document.getElementById("blockBgImage");
         if (bgImgEl){ block.data.bg_image_url = bgImgEl.value || ""; }
         const bgOverlayHexEl = document.getElementById("blockBgOverlayHex");
@@ -2599,6 +2741,9 @@ const state = {
       const bgVideo=document.getElementById("bgVideoInput");
       const bgAnim=document.getElementById("bgAnimInput");
       const animToggle=document.getElementById("animToggle");
+      const globalBlockPreset=document.getElementById("globalBlockPresetSelect");
+      const globalBlockMotion=document.getElementById("globalBlockMotionSelect");
+      const globalBlockMotionSpeed=document.getElementById("globalBlockMotionSpeedSelect");
       const canvasMinHeight=document.getElementById("canvasMinHeightInput");
       const canvasBottomSpace=document.getElementById("canvasBottomSpaceInput");
       const registeredBrand=document.getElementById("registeredBrandInput");
@@ -2614,6 +2759,9 @@ const state = {
       bgVideo.value=s.bg_video_url||"";
       bgAnim.value=s.bg_anim_url||"";
       animToggle.checked = s.animations !== false;
+      if (globalBlockPreset){ globalBlockPreset.value = normalizeBlockPreset(s.global_block_preset || "clean-landing"); }
+      if (globalBlockMotion){ globalBlockMotion.value = normalizeBlockMotion(s.global_block_motion || "none"); }
+      if (globalBlockMotionSpeed){ globalBlockMotionSpeed.value = normalizeMotionSpeed(s.global_block_motion_speed || "normal"); }
       canvasMinHeight.value = Math.max(700, Number(s.canvas_min_height || 1200));
       canvasBottomSpace.value = Math.max(0, Number(s.canvas_bottom_space || 180));
       registeredBrand.value = s.registered_brand || s.site_name || "";
@@ -2632,6 +2780,9 @@ 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(); });
+      if (globalBlockPreset){ globalBlockPreset.addEventListener("change",()=>{ s.global_block_preset = normalizeBlockPreset(globalBlockPreset.value || "clean-landing"); renderPreview(); }); }
+      if (globalBlockMotion){ globalBlockMotion.addEventListener("change",()=>{ s.global_block_motion = normalizeBlockMotion(globalBlockMotion.value || "none"); renderPreview(); }); }
+      if (globalBlockMotionSpeed){ globalBlockMotionSpeed.addEventListener("change",()=>{ s.global_block_motion_speed = normalizeMotionSpeed(globalBlockMotionSpeed.value || "normal"); 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(); });
       registeredBrand.addEventListener("input",()=>{ s.registered_brand = registeredBrand.value; renderPreview(); });
@@ -2797,7 +2948,7 @@ const state = {
               data.items = data.items.map((x)=>String(x || "").trim()).filter(Boolean);
             }
           }
-          const fallback = 100;
+          const fallback = b.type === "menu" ? 100 : 60;
           data.width = snapBlockWidth(b.type, (typeof data.width === "number" ? data.width : fallback));
           delete data.full_width;
           return {
@@ -2807,6 +2958,21 @@ const state = {
           };
         });
     }
+    function migrateLegacyFullWidth(blocks){
+      if (!Array.isArray(blocks) || !blocks.length) return false;
+      const nonMenu = blocks.filter((b)=>b && b.type !== "menu");
+      if (!nonMenu.length) return false;
+      const allFull = nonMenu.every((b)=>{
+        const w = Number(b?.data?.width || 0);
+        return w >= 99;
+      });
+      if (!allFull) return false;
+      nonMenu.forEach((b)=>{
+        b.data = b.data || {};
+        b.data.width = 60;
+      });
+      return true;
+    }
     async function saveContent(){
       if (isSaving) return;
       state.settings.free_drag = false;
@@ -2867,6 +3033,13 @@ const state = {
       const initialRubro = normalizeRubro(state.settings.business_rubro || SERVER_RUBRO || "restaurante");
       state.settings.business_rubro = initialRubro;
       state.blocks = normalizeLoadedBlocks(state.blocks);
+      if (!state.settings.legacy_width_migrated_v1){
+        const migrated = migrateLegacyFullWidth(state.blocks);
+        state.settings.legacy_width_migrated_v1 = true;
+        if (migrated){
+          console.log("Legacy widths migrated from 100 to 60 for non-menu blocks");
+        }
+      }
       if (BUILDER_MODE === "ub24"){
         state.blocks.forEach(b=>{ if (!b.page) b.page = "home"; });
       }