{"id":271,"date":"2026-06-03T09:07:17","date_gmt":"2026-06-03T09:07:17","guid":{"rendered":"https:\/\/restaurantemipueblito.com\/?page_id=271"},"modified":"2026-10-19T21:44:14","modified_gmt":"2026-10-19T21:44:14","slug":"la-carta","status":"publish","type":"page","link":"https:\/\/restaurantemipueblito.com\/en\/la-carta\/","title":{"rendered":"La Carta"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"271\" class=\"elementor elementor-271\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a977036 e-flex e-con-boxed e-con e-parent\" data-id=\"a977036\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62257f2 elementor-widget elementor-widget-spacer\" data-id=\"62257f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4f50a94a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4f50a94a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7fbf3e03\" data-id=\"7fbf3e03\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f34e02c elementor-widget elementor-widget-html\" data-id=\"f34e02c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CARTA EN PDF (ESPA\u00d1OL) \u00b7 Restaurante Mi Pueblito\r\n     Pegar entero en un widget \"HTML\" de Elementor.\r\n     Para cambiar de carta: sustituye la URL en data-pdf.\r\n     ============================================================ -->\r\n<div id=\"mp-carta\" data-pdf=\"https:\/\/restaurantemipueblito.com\/wp-content\/uploads\/2026\/10\/Carta-en-Espanol-2026.pdf\">\r\n\r\n  <header class=\"mp-head\">\r\n    <p class=\"mp-eyebrow\">Aut\u00e9ntica cocina colombiana<\/p>\r\n    <h2 class=\"mp-title\">Nuestra Carta<\/h2>\r\n  <\/header>\r\n\r\n  <nav class=\"mp-nav\" aria-label=\"Secciones de la carta\">\r\n    <div class=\"mp-chips\"><\/div>\r\n    <div class=\"mp-actions\">\r\n      <button class=\"mp-btn mp-open\" type=\"button\" aria-pressed=\"false\">Pantalla completa<\/button>\r\n      <a class=\"mp-btn mp-btn-solid mp-download\" download>Descargar PDF<\/a>\r\n    <\/div>\r\n  <\/nav>\r\n\r\n  <div class=\"mp-pages\" aria-live=\"polite\">\r\n    <p class=\"mp-status\">Cargando la carta\u2026<\/p>\r\n  <\/div>\r\n\r\n  <button class=\"mp-top\" type=\"button\" aria-label=\"Volver arriba\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M5 12l7-7 7 7\"\/><\/svg><\/button>\r\n<\/div>\r\n\r\n<style>\r\n  #mp-carta{\r\n    --mp-bg:#000000; --mp-bg-2:#000000; --mp-orange:#F5C518; --mp-orange-2:#DDB015; --mp-text:#FFFFFF;\r\n    position:relative; max-width:900px; margin:0 auto; font-family:inherit; color:var(--mp-text);\r\n  }\r\n  #mp-carta *{box-sizing:border-box}\r\n  #mp-carta .mp-head{background:#000; text-align:center; padding:28px 16px 6px; border-radius:10px 10px 0 0}\r\n  #mp-carta .mp-eyebrow{margin:0 0 6px; color:var(--mp-orange); font:600 13px\/1.2 inherit; font-family:inherit; letter-spacing:.18em; text-transform:uppercase}\r\n  #mp-carta .mp-title{margin:0; color:#fff; font-family:inherit; font-weight:800; font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:.01em}\r\n  #mp-carta .mp-title::after{content:\"\"; display:block; width:56px; height:3px; margin:14px auto 0; background:var(--mp-orange); border-radius:2px}\r\n  #mp-carta .mp-nav{\r\n    position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;\r\n    padding:10px 12px; background:#000; border-radius:0;\r\n    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);\r\n  }\r\n  #mp-carta .mp-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; flex:1 1 auto}\r\n  #mp-carta .mp-chips::-webkit-scrollbar{display:none}\r\n  #mp-carta .mp-chip{\r\n    flex:0 0 auto; border:1px solid var(--mp-orange); background:transparent; color:var(--mp-text);\r\n    font:600 13px\/1 inherit; font-family:inherit; letter-spacing:.02em; padding:9px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;\r\n    transition:background .2s,color .2s;\r\n  }\r\n  #mp-carta .mp-chip.is-active{background:var(--mp-orange); color:#000; border-color:var(--mp-orange)}\r\n  @media (hover:hover){ #mp-carta .mp-chip:hover{background:var(--mp-orange); color:#000; border-color:var(--mp-orange)} }\r\n  #mp-carta .mp-actions{display:flex; gap:8px; flex:0 0 auto}\r\n  #mp-carta .mp-btn{\r\n    display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:999px; text-decoration:none !important;\r\n    font:600 13px\/1 inherit; font-family:inherit; color:var(--mp-orange) !important; border:1px solid var(--mp-orange); white-space:nowrap;\r\n  }\r\n  #mp-carta button.mp-btn{background:transparent; cursor:pointer}\r\n  #mp-carta .mp-btn:hover{background:var(--mp-orange) !important; color:#000 !important}\r\n  #mp-carta .mp-btn-solid{background:var(--mp-orange); border-color:var(--mp-orange); color:#000 !important}\r\n  #mp-carta .mp-btn-solid:hover{background:var(--mp-orange-2) !important; border-color:var(--mp-orange-2)}\r\n\r\n  #mp-carta .mp-pages{background:var(--mp-bg); padding:12px; border-radius:0 0 10px 10px; display:flex; flex-direction:column; gap:12px}\r\n  #mp-carta .mp-page{\r\n    position:relative; width:100%; aspect-ratio:595\/842; background:var(--mp-bg-2); border-radius:4px; overflow:hidden;\r\n    scroll-margin-top:72px; box-shadow:none;\r\n  }\r\n  #mp-carta .mp-page canvas{display:block; width:100% !important; height:100% !important}\r\n  #mp-carta .mp-page.is-loading::after{\r\n    content:\"\"; position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%;\r\n    border:3px solid rgba(245,197,24,.25); border-top-color:var(--mp-orange); animation:mp-spin .8s linear infinite;\r\n  }\r\n  @keyframes mp-spin{to{transform:rotate(360deg)}}\r\n  #mp-carta .mp-status{text-align:center; padding:40px 10px; margin:0; color:var(--mp-text)}\r\n  #mp-carta .mp-status a{color:var(--mp-orange)}\r\n\r\n  #mp-carta .mp-top{\r\n    position:fixed; right:16px; bottom:16px; z-index:30; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;\r\n    background:var(--mp-orange); color:#000; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.35);\r\n    opacity:0; pointer-events:none; transition:opacity .25s;\r\n  }\r\n  #mp-carta .mp-top.is-visible{opacity:1; pointer-events:auto}\r\n\r\n  \/* Pantalla completa dentro de la propia web *\/\r\n  #mp-carta.is-expanded{\r\n    position:fixed; inset:0; z-index:999999; max-width:none; margin:0; overflow-y:auto; overscroll-behavior:contain;\r\n    background:#000; -webkit-overflow-scrolling:touch;\r\n  }\r\n  #mp-carta.is-expanded .mp-head{border-radius:0}\r\n  #mp-carta.is-expanded .mp-nav{top:0 !important; border-radius:0; max-width:none}\r\n  #mp-carta.is-expanded .mp-pages{max-width:1000px; margin:0 auto; border-radius:0; background:transparent}\r\n  #mp-carta.is-expanded .mp-top{z-index:1000000}\r\n  html.mp-carta-lock, html.mp-carta-lock body{overflow:hidden !important}\r\n\r\n  @media (max-width:640px){\r\n    #mp-carta .mp-head{padding:22px 12px 4px; border-radius:0}\r\n    #mp-carta .mp-eyebrow{font-size:11px; letter-spacing:.12em}\r\n    #mp-carta .mp-nav{padding:8px; gap:8px; border-radius:0}\r\n    #mp-carta .mp-actions{width:100%}\r\n    #mp-carta .mp-btn{flex:1}\r\n    #mp-carta .mp-pages{padding:6px; gap:8px; border-radius:0}\r\n    #mp-carta .mp-page{scroll-margin-top:104px; border-radius:2px}\r\n  }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n<script>\r\n(function () {\r\n  var root = document.getElementById('mp-carta');\r\n  if (!root || root.dataset.ready) return;\r\n  root.dataset.ready = '1';\r\n\r\n  var PDF_URL = root.getAttribute('data-pdf');\r\n  \/\/ Nombres de las secciones, en el orden de las p\u00e1ginas del PDF (se pueden editar).\r\n  var SECTIONS = ['Desayunos', 'Para picar', 'Platos a la carta', 'Arepas y patacones', 'Bebidas y postres'];\r\n\r\n  \/\/ Si la web tiene cabecera fija, pon aqu\u00ed su altura en px (por ejemplo 80).\r\n  var STICKY_OFFSET = 0;\r\n  root.querySelector('.mp-nav').style.top = STICKY_OFFSET + 'px';\r\n\r\n  var pagesEl = root.querySelector('.mp-pages');\r\n  var chipsEl = root.querySelector('.mp-chips');\r\n  var topBtn  = root.querySelector('.mp-top');\r\n  var openBtn = root.querySelector('.mp-open');\r\n  root.querySelector('.mp-download').href = PDF_URL;\r\n\r\n  function fail() {\r\n    pagesEl.innerHTML = '<p class=\"mp-status\">No se ha podido mostrar la carta aqu\u00ed. ' +\r\n      '<a href=\"' + PDF_URL + '\" target=\"_blank\" rel=\"noopener\">Abrir la carta (PDF)<\/a><\/p>';\r\n  }\r\n  if (!window.pdfjsLib) { fail(); return; }\r\n  pdfjsLib.GlobalWorkerOptions.workerSrc =\r\n    'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n  var pdf, pages = [], expanded = false;\r\n\r\n  \/\/ ---- Pantalla completa sin salir de la web ----\r\n  \/\/ Se mueve la carta al final de <body> mientras est\u00e1 ampliada, para que ning\u00fan\r\n  \/\/ contenedor de Elementor la recorte; al cerrar vuelve a su sitio.\r\n  var placeholder = document.createComment('mp-carta');\r\n  var savedScroll = 0;\r\n  function rerenderAll() {\r\n    pages.forEach(function (it) { it.rendered = 0; if (it.visible) renderPage(it); });\r\n  }\r\n  function setExpanded(on) {\r\n    if (on === expanded) return;\r\n    expanded = on;\r\n    if (on) {\r\n      savedScroll = window.pageYOffset;\r\n      root.parentNode.insertBefore(placeholder, root);\r\n      document.body.appendChild(root);\r\n      root.classList.add('is-expanded');\r\n      document.documentElement.classList.add('mp-carta-lock');\r\n      root.scrollTop = 0;\r\n      openBtn.textContent = 'Cerrar \\u00D7';\r\n    } else {\r\n      root.classList.remove('is-expanded');\r\n      document.documentElement.classList.remove('mp-carta-lock');\r\n      placeholder.parentNode.insertBefore(root, placeholder);\r\n      placeholder.parentNode.removeChild(placeholder);\r\n      window.scrollTo(0, savedScroll);\r\n      requestAnimationFrame(function () { window.scrollTo(0, savedScroll); });\r\n      openBtn.textContent = 'Pantalla completa';\r\n    }\r\n    openBtn.setAttribute('aria-pressed', on ? 'true' : 'false');\r\n    topBtn.classList.remove('is-visible');\r\n    setTimeout(rerenderAll, 50);\r\n  }\r\n  openBtn.addEventListener('click', function () { setExpanded(!expanded); });\r\n  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') setExpanded(false); });\r\n  root.addEventListener('scroll', function () {\r\n    if (expanded) topBtn.classList.toggle('is-visible', root.scrollTop > 400);\r\n  }, { passive: true });\r\n\r\n  function renderPage(item) {\r\n    var width = item.el.clientWidth;\r\n    if (!width) return;\r\n    \/\/ Resoluci\u00f3n: ancho real \u00d7 densidad de pantalla (con margen para hacer zoom en m\u00f3vil).\r\n    var dpr = Math.min(window.devicePixelRatio || 1, 2) * (width < 700 ? 1.6 : 1.15);\r\n    var target = Math.round(width * dpr);\r\n    if (item.rendered === target || item.busy) return;\r\n    item.busy = true;\r\n    pdf.getPage(item.num).then(function (page) {\r\n      var base = page.getViewport({ scale: 1 });\r\n      var vp = page.getViewport({ scale: target \/ base.width });\r\n      var canvas = document.createElement('canvas');\r\n      canvas.width = Math.floor(vp.width);\r\n      canvas.height = Math.floor(vp.height);\r\n      canvas.setAttribute('role', 'img');\r\n      canvas.setAttribute('aria-label', 'P\u00e1gina de la carta ' + item.num + (SECTIONS[item.num - 1] ? ' \u2013 ' + SECTIONS[item.num - 1] : ''));\r\n      return page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise.then(function () {\r\n        item.el.innerHTML = '';\r\n        item.el.appendChild(canvas);\r\n        item.el.classList.remove('is-loading');\r\n        item.rendered = target;\r\n      });\r\n    }).catch(function () {}).then(function () { item.busy = false; });\r\n  }\r\n\r\n  pdfjsLib.getDocument({ url: PDF_URL }).promise.then(function (doc) {\r\n    pdf = doc;\r\n    pagesEl.innerHTML = '';\r\n    for (var i = 1; i <= pdf.numPages; i++) {\r\n      var el = document.createElement('div');\r\n      el.className = 'mp-page is-loading';\r\n      el.id = 'mp-carta-p' + i;\r\n      pagesEl.appendChild(el);\r\n      pages.push({ num: i, el: el, rendered: 0, visible: false });\r\n\r\n      var chip = document.createElement('button');\r\n      chip.type = 'button';\r\n      chip.className = 'mp-chip';\r\n      chip.textContent = SECTIONS[i - 1] || ('P\u00e1gina ' + i);\r\n      chip.dataset.page = i;\r\n      chip.addEventListener('click', function () {\r\n        var target = document.getElementById('mp-carta-p' + this.dataset.page);\r\n        var navH = root.querySelector('.mp-nav').offsetHeight + 8;\r\n        if (expanded) {\r\n          root.scrollTo({ top: target.offsetTop - navH, behavior: 'smooth' });\r\n        } else {\r\n          window.scrollTo({ top: target.getBoundingClientRect().top + window.pageYOffset - navH - STICKY_OFFSET, behavior: 'smooth' });\r\n        }\r\n      });\r\n      chipsEl.appendChild(chip);\r\n    }\r\n    \/\/ La primera p\u00e1gina asigna el tama\u00f1o real (por si el PDF no es A4).\r\n    pdf.getPage(1).then(function (p) {\r\n      var v = p.getViewport({ scale: 1 });\r\n      pages.forEach(function (it) { it.el.style.aspectRatio = v.width + ' \/ ' + v.height; });\r\n    });\r\n\r\n    var chips = chipsEl.querySelectorAll('.mp-chip');\r\n    if ('IntersectionObserver' in window) {\r\n      var lazy = new IntersectionObserver(function (entries) {\r\n        entries.forEach(function (e) {\r\n          var it = pages[+e.target.id.split('-p')[1] - 1];\r\n          it.visible = e.isIntersecting;\r\n          if (e.isIntersecting) renderPage(it);\r\n        });\r\n      }, { rootMargin: '600px 0px' });\r\n      var active = new IntersectionObserver(function (entries) {\r\n        entries.forEach(function (e) {\r\n          if (!e.isIntersecting) return;\r\n          var n = +e.target.id.split('-p')[1];\r\n          chips.forEach(function (c) { c.classList.toggle('is-active', +c.dataset.page === n); });\r\n          var c = chips[n - 1];\r\n          if (c) chipsEl.scrollTo({ left: c.offsetLeft - chipsEl.clientWidth \/ 2 + c.clientWidth \/ 2, behavior: 'smooth' });\r\n        });\r\n      }, { rootMargin: '-45% 0px -50% 0px' });\r\n      pages.forEach(function (it) { lazy.observe(it.el); active.observe(it.el); });\r\n    } else {\r\n      pages.forEach(renderPage);\r\n    }\r\n\r\n    var t, lastW = pagesEl.clientWidth;\r\n    window.addEventListener('resize', function () {\r\n      clearTimeout(t);\r\n      t = setTimeout(function () {\r\n        if (Math.abs(pagesEl.clientWidth - lastW) < 40) return; \/\/ ignora la barra del navegador m\u00f3vil\r\n        lastW = pagesEl.clientWidth;\r\n        rerenderAll();\r\n      }, 250);\r\n    });\r\n  }).catch(fail);\r\n\r\n  window.addEventListener('scroll', function () {\r\n    if (expanded) return;\r\n    var r = root.getBoundingClientRect();\r\n    topBtn.classList.toggle('is-visible', r.top < -400 && r.bottom > 0);\r\n  }, { passive: true });\r\n  topBtn.addEventListener('click', function () {\r\n    if (expanded) root.scrollTo({ top: 0, behavior: 'smooth' });\r\n    else window.scrollTo({ top: root.getBoundingClientRect().top + window.pageYOffset - STICKY_OFFSET, behavior: 'smooth' });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aut\u00e9ntica cocina colombiana Nuestra Carta Pantalla completa Descargar PDF Cargando la carta\u2026<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-271","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/pages\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":16,"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/pages\/271\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/pages\/271\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/restaurantemipueblito.com\/en\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}