diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html
index 43e9efa..0a2736b 100644
--- a/elementor/templates/elementor_builder.html
+++ b/elementor/templates/elementor_builder.html
@@ -135,7 +135,7 @@
.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 var(--site-nav-border,#dde4ef);border-radius:var(--site-nav-radius,var(--radius-md));background:var(--site-nav-bg,rgba(255,255,255,.72));backdrop-filter:blur(8px)}
+ .site-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 12px;border:1px solid var(--site-nav-border,#dde4ef);border-radius:var(--site-nav-radius,var(--radius-md));background:var(--site-nav-bg,#ffffff)}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:120px;max-width:320px;flex:0 1 auto}
.site-brand img{height:28px;width:auto;border-radius:8px;border:1px solid #dbe3ee}
.site-brand-badge{height:28px;min-width:28px;padding:0 8px;border-radius:8px;background:var(--site-primary);display:inline-flex;align-items:center;justify-content:center;color:#0b0f16;font-weight:800;font-size:12px}
@@ -148,9 +148,10 @@
.menu-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.menu-drawer-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid #2b2b2b;background:#202020;color:#f5f5f5;cursor:pointer}
.menu-drawer-toggle:hover{border-color:#4b5563}
- .menu-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(8,11,16,.5);z-index:1200}
- .menu-drawer{display:none;position:fixed;top:0;right:0;height:100vh;width:min(92vw,360px);background:#1f1f1f;color:#f5f5f5;border-left:1px solid #2d2d2d;z-index:1201;box-shadow:-14px 0 30px rgba(0,0,0,.25)}
- .menu-drawer.open,.menu-drawer-overlay.open{display:block}
+ .menu-drawer-overlay{position:fixed;inset:0;background:rgba(8,11,16,.5);z-index:1500;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
+ .menu-drawer{position:fixed;top:0;right:0;height:100vh;width:min(92vw,360px);background:#1f1f1f;color:#f5f5f5;border-left:1px solid #2d2d2d;z-index:1510;box-shadow:-14px 0 30px rgba(0,0,0,.25);transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .24s ease,opacity .2s ease,visibility .2s ease}
+ .menu-drawer.open,.menu-drawer-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
+ .menu-drawer.open{transform:translateX(0)}
.menu-drawer-head{height:74px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d2d2d}
.menu-drawer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px}
.menu-drawer-close{width:42px;height:42px;border-radius:10px;border:2px solid #fbbf24;background:transparent;color:#f8fafc;font-size:22px;line-height:1;cursor:pointer}
@@ -211,7 +212,31 @@
.edu-apply ul{margin:0;padding-left:18px;color:#38527f;font-size:13px;line-height:1.5}
.edu-apply .deadline{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;background:#e9f0ff;color:#0a4dcf;font-size:11px;font-weight:700}
@media (max-width:980px){.edu-hero{grid-template-columns:1fr}}
- .site-global-footer{margin-top:26px;padding:16px 18px;border-radius:12px;border:1px solid #dbe3ee;background:rgba(255,255,255,.72);color:var(--site-muted);font-size:12px;line-height:1.4;text-align:center;width:100%;grid-column:1 / -1;justify-self:stretch}
+ .site-global-footer{margin-top:26px;padding:16px 18px;border-radius:12px;border:1px solid #dbe3ee;background:var(--site-footer-bg,#ffffff);color:var(--site-muted);font-size:12px;line-height:1.4;text-align:center;width:100%;grid-column:1 / -1;justify-self:stretch}
+ body.menu-drawer-open{overflow:hidden;touch-action:none}
+ .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[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}
+ .restaurant-site .site-nav-link{font-size:14px}
+ .restaurant-site .block[data-block-type="hero"]{background:linear-gradient(160deg,var(--restaurant-surface,#fff) 0%,var(--restaurant-surface-soft,#f8fafc) 100%);border:1px solid var(--restaurant-border,#dbe3ee);border-radius:20px;padding:26px;box-shadow:0 12px 28px rgba(15,23,42,.07)}
+ .restaurant-site .hero-kicker{letter-spacing:2.2px}
+ .restaurant-site .hero-pro h2.editable{font-size:clamp(40px,5.3vw,72px);line-height:1.02;max-width:13ch}
+ .restaurant-site .hero-pro p.editable{font-size:clamp(16px,1.75vw,21px);line-height:1.58;max-width:54ch}
+ .restaurant-site .hero-media{border-color:var(--restaurant-border,#dbe3ee);border-radius:18px;min-height:360px}
+ .restaurant-site .block[data-block-type="gallery"]{background:var(--restaurant-surface,#fff);border:1px dashed 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="gallery"] .gallery-slot{border:1px solid var(--restaurant-border,#dbe3ee)}
+ .restaurant-site .block[data-block-type="cards"]{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="cards"] .card-pro{background:var(--restaurant-surface-soft,#f8fafc);border:1px solid var(--restaurant-border,#dbe3ee);box-shadow:none}
+ .restaurant-site .block[data-block-type="review"]{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)}
+ .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)}
+ .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)}
@media (max-width:980px){
@@ -532,15 +557,15 @@
]
},
restaurante: {
- settings: { primary_color: '#ef4444', bg_color: '#fff7ed', text_color: '#0b0c10', muted_color: '#6b7280', font_body: 'Poppins', font_heading: 'Playfair Display', bg_gradient: false },
+ 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 },
blocks: [
- { id: makeId(), type: 'menu', data: defaultData('menu') },
- { id: makeId(), type: 'hero', data: { title: 'Sabores que enamoran', subtitle: 'Cocina artesanal, ambiente unico y atencion cercana.', button_text: 'Reservar', button_url: '#contacto', image_url: '' } },
- { id: makeId(), type: 'gallery', data: { title: 'Platos destacados', images: ['','',''], captions: ['','',''], fit: 'cover' } },
- { id: makeId(), type: 'cards', data: { title: 'Especialidades', items: ['Entradas|Frescas y ligeras','Platos fuertes|Hechos al momento','Postres|Dulce final'] } },
- { id: makeId(), type: 'review', data: { title: 'Rese?as', name: 'Cliente feliz', text: 'Excelente sabor y servicio impecable.', rating: 5, style: 'card' } },
- { id: makeId(), type: 'contact', data: { title: 'Reservas', email: '', phone: '', address: '' } },
- { id: makeId(), type: 'map', data: { title: 'Ubicacion', address: '' } }
+ { 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 } }
]
},
cosmeticos: {
@@ -615,6 +640,8 @@ const state = {
let manualDrag = { active: false, id: null, index: null };
let pointerDrag = { active: false, id: null, index: null };
let canvasSortable = null;
+ const menuDrawerState = { activeDrawerId: null, lastFocused: null };
+ let drawerGlobalEventsBound = false;
function hasSortable(){ return typeof Sortable !== "undefined"; }
function isBlockVisibleInCanvas(block){
@@ -639,15 +666,15 @@ 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.", button_text:"Contactar", button_url:"#contacto", image_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", 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"], 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:"", width:100 };
- case "map": return { title:"Ubicacion", address:"", 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 };
@@ -756,6 +783,106 @@ const state = {
if (u.includes("youtu.be/")){ const id=u.split("youtu.be/")[1].split(/[?&]/)[0]; return "https://www.youtube.com/embed/"+id; }
return u;
}
+ function isMobilePreviewContext(){
+ const shell = document.querySelector(".preview-shell");
+ const forced = !!(shell && (shell.classList.contains("size-phone") || shell.classList.contains("size-tablet")));
+ return forced || window.innerWidth <= 980;
+ }
+ function getDrawerNodes(drawerId){
+ if (!drawerId) return { panel: null, overlay: null, toggle: null };
+ return {
+ panel: document.getElementById(drawerId),
+ overlay: document.querySelector(`[data-drawer-overlay="${drawerId}"]`),
+ toggle: document.querySelector(`[data-drawer-toggle="${drawerId}"]`)
+ };
+ }
+ function closeMenuDrawer(drawerId, opts = {}){
+ const { restoreFocus = true } = opts;
+ if (!drawerId) return;
+ const { panel, overlay, toggle } = getDrawerNodes(drawerId);
+ if (panel){
+ panel.classList.remove("open");
+ panel.setAttribute("aria-hidden", "true");
+ }
+ if (overlay){
+ overlay.classList.remove("open");
+ overlay.setAttribute("aria-hidden", "true");
+ }
+ if (toggle){ toggle.setAttribute("aria-expanded", "false"); }
+ document.body.classList.remove("menu-drawer-open");
+ if (menuDrawerState.activeDrawerId === drawerId){
+ menuDrawerState.activeDrawerId = null;
+ const target = (restoreFocus && menuDrawerState.lastFocused && menuDrawerState.lastFocused.isConnected)
+ ? menuDrawerState.lastFocused
+ : toggle;
+ if (restoreFocus && target && typeof target.focus === "function"){ target.focus(); }
+ }
+ }
+ function closeAllMenuDrawers(opts = {}){
+ document.querySelectorAll(".menu-drawer.open").forEach((panel)=>{
+ closeMenuDrawer(panel.id, opts);
+ });
+ document.querySelectorAll(".menu-drawer-overlay.open").forEach((overlay)=>{
+ overlay.classList.remove("open");
+ overlay.setAttribute("aria-hidden", "true");
+ });
+ document.body.classList.remove("menu-drawer-open");
+ menuDrawerState.activeDrawerId = null;
+ }
+ function openMenuDrawer(drawerId, trigger){
+ if (!drawerId || !isMobilePreviewContext()) return;
+ if (menuDrawerState.activeDrawerId && menuDrawerState.activeDrawerId !== drawerId){
+ closeMenuDrawer(menuDrawerState.activeDrawerId, { restoreFocus: false });
+ }
+ const { panel, overlay, toggle } = getDrawerNodes(drawerId);
+ if (!panel || !overlay) return;
+ menuDrawerState.lastFocused = trigger || document.activeElement;
+ panel.classList.add("open");
+ panel.setAttribute("aria-hidden", "false");
+ overlay.classList.add("open");
+ overlay.setAttribute("aria-hidden", "false");
+ if (toggle){ toggle.setAttribute("aria-expanded", "true"); }
+ menuDrawerState.activeDrawerId = drawerId;
+ document.body.classList.add("menu-drawer-open");
+ const focusTarget = panel.querySelector("[data-drawer-close], a, button");
+ if (focusTarget && typeof focusTarget.focus === "function"){ focusTarget.focus(); }
+ }
+ function syncActiveDrawerForViewport(){
+ if (!menuDrawerState.activeDrawerId) return;
+ if (!isMobilePreviewContext()){
+ closeMenuDrawer(menuDrawerState.activeDrawerId, { restoreFocus: false });
+ }
+ }
+ function bindDrawerGlobalEvents(){
+ if (drawerGlobalEventsBound) return;
+ drawerGlobalEventsBound = true;
+ document.addEventListener("keydown",(e)=>{
+ if (!menuDrawerState.activeDrawerId) return;
+ if (e.key === "Escape"){
+ e.preventDefault();
+ closeMenuDrawer(menuDrawerState.activeDrawerId);
+ return;
+ }
+ if (e.key === "Tab"){
+ const { panel } = getDrawerNodes(menuDrawerState.activeDrawerId);
+ if (!panel) return;
+ const focusables = [...panel.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')]
+ .filter((node)=>node && node.offsetParent !== null);
+ if (!focusables.length) return;
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ const active = document.activeElement;
+ if (e.shiftKey && active === first){
+ e.preventDefault();
+ last.focus();
+ } else if (!e.shiftKey && active === last){
+ e.preventDefault();
+ first.focus();
+ }
+ }
+ });
+ window.addEventListener("resize", syncActiveDrawerForViewport);
+ }
function buildCalendarHtml(){
const now = new Date();
const year = now.getFullYear();
@@ -987,14 +1114,18 @@ const state = {
`;
}
const image = block.data.image_url ? `` : `