From 429602c1e22b176603ff2d062d7c7e358d531591 Mon Sep 17 00:00:00 2001
From: komkida91 <gustavokachle@gmail.com>
Date: Thu, 12 Feb 2026 19:29:07 +0100
Subject: [PATCH] feat(builder): fase 1 navbar y hero premium con tokens
 visuales

---
 elementor/templates/elementor_builder.html | 77 +++++++++++++++-------
 1 file changed, 53 insertions(+), 24 deletions(-)
diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html
index ac3cebc..bac5761 100644
--- a/elementor/templates/elementor_builder.html
+++ b/elementor/templates/elementor_builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="es">
 <head>
   <meta charset="UTF-8" />
@@ -7,7 +7,7 @@
   <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">
   <style>
-    :root { --bg:#0b0f16; --panel:#121826; --panel2:#1a2234; --text:#e5e7eb; --muted:#8a93a5; --accent:#59d9c8; --border:#263043; }
+    :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); }
     *{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}
@@ -36,7 +36,7 @@
     body.ub24 #btnAlign, 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}
+    body.ub24 .block-item:before{content:"â–£";color:#6b7280;font-size:12px}
     body.ub24 .inspector .section-title{margin-top:0}
     body.ub24 .inspector .acc{background:#f9fafb;border-color:#e5e7eb}
     body.ub24 .inspector label{color:#6b7280}
@@ -45,8 +45,8 @@
     .apple-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px}
     .apple-dot{width:9px;height:9px;border-radius:50%}
     .red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80}
-    .canvas{min-height:700px;padding:32px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
-    .block{background:var(--site-card,#fff);border-radius:14px;padding:14px;margin-bottom:16px;border:1px solid transparent;box-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;will-change:transform;cursor:grab}
+    .canvas{min-height:700px;padding:34px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
+    .block{background:var(--site-card,#fff);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid transparent;box-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;will-change:transform;cursor:grab}
     .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)}
@@ -88,11 +88,18 @@
     .calendar-day{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 0;text-align:center;font-size:12px;color:var(--site-text)}
     .calendar-day.muted{color:#94a3b8;background:#f1f5f9}
     .calendar-day.today{border-color:var(--site-primary);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
-    .hero-pro{display:grid;gap:12px}
+    .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-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}
+    .hero-media-empty{height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center;font-size:13px;color:var(--site-muted)}
+    .hero-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
     .hero-kicker{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:var(--site-primary);font-weight:700}
     .hero-pro h2.editable{margin:0;line-height:1.08;font-size:clamp(30px,4.5vw,58px);font-weight:700;max-width:16ch}
     .hero-pro p.editable{margin:0;max-width:58ch;color:var(--site-muted);font-size:clamp(15px,1.6vw,19px);line-height:1.55}
     .hero-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;background:var(--site-primary);color:#0b0f16;text-decoration:none;font-weight:700;line-height:1}
+    .hero-cta-secondary{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid #dbe3ee;background:transparent;color:var(--site-text);text-decoration:none;font-weight:600;line-height:1}
     .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
     .feature-pill{background:var(--site-card);padding:12px;border-radius:12px;text-align:center;font-weight:600;border:1px solid #e5e7eb}
     .block .cards-grid{margin-top:10px}
@@ -115,12 +122,21 @@
     .contact-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;background:var(--site-primary);color:#0b0f16;font-weight:700;cursor:pointer}
     .contact-send i{font-size:12px}
     @media (max-width:860px){.contact-pro{grid-template-columns:1fr}}
+    .site-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 12px;border:1px solid #dde4ef;border-radius:var(--radius-md);background:rgba(255,255,255,.72);backdrop-filter:blur(8px)}
+    .site-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:0}
+    .site-brand img{height:28px;width:auto;border-radius:8px;border:1px solid #dbe3ee}
+    .site-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .site-nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
+    .site-nav-link{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-size:13px;color:var(--site-text);transition:background .2s ease,border-color .2s ease,transform .2s ease}
+    .site-nav-link:hover{background:#f1f5f9;border-color:#dbe3ee;transform:translateY(-1px)}
+    .site-nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;background:var(--site-primary);color:#0b0f16;text-decoration:none;font-weight:700;white-space:nowrap}
+    .menu-empty{font-size:12px;color:var(--site-muted)}
     .menu-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
-    .menu-accordion{display:none;border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;background:var(--site-card);width:100%}
+    .menu-accordion{display:none;border:1px solid #e5e7eb;border-radius:var(--radius-md);padding:8px 10px;background:var(--site-card);width:100%}
     .menu-accordion summary{list-style:none;cursor:pointer;font-weight:600}
     .menu-accordion summary::-webkit-details-marker{display:none}
     .menu-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
-    .menu-accordion summary::after{content:"▾";float:right;color:var(--site-muted)}
+    .menu-accordion summary::after{content:"â–¾";float:right;color:var(--site-muted)}
     .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)}
     @media (max-width:980px){
@@ -131,6 +147,10 @@
     .preview-shell.size-tablet .menu-inline{display:none}
     .preview-shell.size-phone .menu-accordion,
     .preview-shell.size-tablet .menu-accordion{display:block}
+    .preview-shell.size-phone .hero-layout,
+    .preview-shell.size-tablet .hero-layout{grid-template-columns:1fr}
+    .preview-shell.size-phone .hero-media,
+    .preview-shell.size-tablet .hero-media{min-height:220px}
     @keyframes slowGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
     .free-drag a{pointer-events:none}
     .block-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px}
@@ -158,8 +178,8 @@
     details.acc{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:#0f172a}
     details.acc summary{list-style:none;cursor:pointer;font-weight:600}
     details.acc summary::-webkit-details-marker{display:none}
-    details.acc summary:after{content:"▾";float:right;color:var(--muted)}
-    details.acc[open] summary:after{content:"▴"}
+    details.acc summary:after{content:"â–¾";float:right;color:var(--muted)}
+    details.acc[open] summary:after{content:"â–´"}
     .acc-body{margin-top:8px}
     .danger{background:transparent;border:1px solid #f87171;color:#f87171;padding:8px;border-radius:999px;width:100%;cursor:pointer}
     @media (max-width:1100px){.app{grid-template-columns:220px 1fr}.inspector{display:none}}
@@ -199,7 +219,7 @@
         <div class="block-item" draggable="true" data-type="button" data-multi="true">Boton</div>
         <div class="block-item" draggable="true" data-type="video" data-multi="true">Video</div>
         <div class="block-item" draggable="true" data-type="social" data-multi="false">Redes</div>
-        <div class="block-item" draggable="true" data-type="review" data-multi="true">Reseña</div>
+        <div class="block-item" draggable="true" data-type="review" data-multi="true">ReseÃ±a</div>
         <div class="block-item" draggable="true" data-type="calendar" data-multi="false">Calendario</div>
       </div>
     </aside>
@@ -450,7 +470,7 @@ const state = {
         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:"" };
-        case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card" };
+        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:"" };
         default: return {};
       }
@@ -647,23 +667,32 @@ const state = {
             const title = (b.data && (b.data.title || b.data.text || b.type)) || b.type;
             return { id: b.id, label: String(title).slice(0, 24), index: i+1 };
           });
-        const links = items.map(it=>`<a href="#${it.id}" style="text-decoration:none;color:var(--site-text);font-size:13px">${escapeHtml(it.label)}</a>`).join('<span style="color:var(--site-muted)">•</span>');
-        const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" style="height:22px;border-radius:6px" />` : "";
-        return `<div style="display:flex;align-items:center;gap:10px;justify-content:space-between">
-          <div style="display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.5px">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
-          <div class="menu-inline">${links || '<span style="color:var(--site-muted);font-size:12px">Sin secciones</span>'}</div>
+        const links = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
+        const mobileLinks = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
+        const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" alt="Logo" />` : "";
+        return `<div class="site-nav">
+          <div class="site-brand">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
+          <div class="menu-inline site-nav-links">${links || '<span class="menu-empty">Sin secciones</span>'}</div>
+          <a href="#contacto" class="site-nav-cta">Contactar</a>
           <details class="menu-accordion">
             <summary>Menu</summary>
-            <div class="menu-links">${links || '<span style="color:var(--site-muted);font-size:12px">Sin secciones</span>'}</div>
+            <div class="menu-links">${mobileLinks || '<span class="menu-empty">Sin secciones</span>'}</div>
           </details>
         </div>`;
       }
       if (block.type==="hero"){
-        return `<div class="hero-pro">
-          <div class="hero-kicker">${escapeHtml(state.settings.site_name||"GKACHELE")}</div>
-          ${editable("h2","title",block.data.title,"Titulo",false,"")}
-          ${editable("p","subtitle",block.data.subtitle,"Subtitulo",true,"")}
-          <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>
+        const image = block.data.image_url ? `<img src="${escapeHtml(block.data.image_url)}" alt="Hero image">` : `<div class="hero-media-empty">Agrega imagen en "Imagen URL" para completar el hero.</div>`;
+        return `<div class="hero-pro hero-layout">
+          <div class="hero-copy">
+            <div class="hero-kicker">${escapeHtml(state.settings.site_name||"GKACHELE")}</div>
+            ${editable("h2","title",block.data.title,"Titulo",false,"")}
+            ${editable("p","subtitle",block.data.subtitle,"Subtitulo",true,"")}
+            <div class="hero-actions">
+              <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="#servicios" class="hero-cta-secondary">Ver servicios</a>
+            </div>
+          </div>
+          <div class="hero-media">${image}</div>
         </div>`;
       }
       if (block.type==="text"){ return editable("p","text",block.data.text,"Escribe aqui...",true,"margin:0;color:var(--site-text)"); }
@@ -738,7 +767,7 @@ const state = {
               <div class="contact-form">
                 <input placeholder="Nombre completo">
                 <input placeholder="Email de contacto">
-                <textarea placeholder="Cuéntanos brevemente en qué te ayudamos"></textarea>
+                <textarea placeholder="CuÃ©ntanos brevemente en quÃ© te ayudamos"></textarea>
                 <button class="contact-send"><i class="fa-solid fa-paper-plane"></i>Enviar consulta</button>
               </div>
             </div>
