Ocelotl \u2014 Caf\u00e9 \u00b7 Mezcal \u00b7 Artesan\u00edas \u00b7 La Ciudadela CDMX<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\nhtml{scroll-behavior:smooth;overflow-x:hidden}\nbody{overflow-x:hidden}\nbutton{font:inherit;cursor:pointer;background:none;border:none;color:inherit}\na{color:inherit;text-decoration:none}\nimg{display:block;max-width:100%}\nul{list-style:none}\n@font-face{font-family:\"Type Machine\";src:url(\".\/Type%20Machine.ttf\") format(\"truetype\");font-display:swap}\n\n:root{\n --bg:#120b06;--bg1:#1a1008;\n --text:#fff2df;--muted:#ead7b8;--soft:#cbb28d;\n --line:rgba(255,242,223,.18);--line2:rgba(210,132,66,.42);\n --acc:#a04010;--acc2:#d06030;--acc3:#e88040;--acc-rgb:160,64,16;\n --gold:#b08040;--gold2:#d4a860;--gold3:#f0c878;\n --shine:rgba(255,255,255,.14);--glass:rgba(31,18,9,.82);\n --ui:\"Poppins\",system-ui,sans-serif;\n --title:\"Type Machine\",\"Georgia\",\"Times New Roman\",serif;\n --nav:110px;\n --px:clamp(18px,5.5vw,80px);\n --sec:clamp(44px,7vw,120px);\n --ease:cubic-bezier(.22,1,.36,1);\n font-family:var(--ui);color:var(--text);background:var(--bg);\n -webkit-font-smoothing:antialiased;overflow-x:hidden;\n}\n\n\/* \u2500\u2500\u2500 APP BG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.app-bg{position:fixed;inset:0;z-index:0;pointer-events:none;\n background:\n radial-gradient(ellipse 55% 38% at 3% 0%,rgba(160,64,16,.16),transparent 58%),\n radial-gradient(ellipse 45% 32% at 98% 96%,rgba(176,128,64,.12),transparent 60%),\n repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 56px),\n repeating-linear-gradient(0deg,rgba(255,255,255,.01) 0 1px,transparent 1px 56px)}\n\n\/* \u2500\u2500\u2500 REVEAL ANIMATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal.in{opacity:1;transform:none}\n.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal-left.in{opacity:1;transform:none}\n.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal-right.in{opacity:1;transform:none}\n.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)}\n.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:.04s}\n.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:.10s}\n.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:.16s}\n.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:.22s}\n.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:.28s}\n.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:.34s}\n@media(prefers-reduced-motion:reduce){.reveal,.reveal-left,.reveal-right,.stagger>*{opacity:1!important;transform:none!important}}\n\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#ocelotl-home{\n --nav:110px;--px:clamp(18px,5vw,72px);\n --text:#f0e6d3;--muted:#ddd0ba;--line2:rgba(160,100,40,.32);\n --amber2:#d4a040;\n --ui:\"Poppins\",system-ui,sans-serif;\n --ease:cubic-bezier(.22,1,.36,1)\n}\n#ocelotl-home .nav{\n position:fixed!important;top:0!important;left:0!important;right:0!important;\n width:100vw;max-width:100vw;z-index:99999!important;\n height:var(--nav)!important;\n display:flex!important;align-items:center;justify-content:space-between;gap:20px;\n padding:16px var(--px);\n background:rgba(8,5,2,.9)!important;\n backdrop-filter:blur(28px) saturate(160%)!important;\n -webkit-backdrop-filter:blur(28px) saturate(160%)!important;\n border-bottom:1px solid rgba(160,100,40,.2)!important;\n box-shadow:0 2px 24px rgba(0,0,0,.3)!important;\n font-family:var(--ui)\n}\n#ocelotl-home .brand{display:flex;align-items:center;gap:13px;line-height:1;flex-shrink:0;text-decoration:none}\n#ocelotl-home .brand img{width:76px;height:76px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.4));transition:transform .3s var(--ease)}\n#ocelotl-home .brand:hover img{transform:scale(1.04)}\n#ocelotl-home .brand strong{font-size:20px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}\n#ocelotl-home .nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,36px);list-style:none}\n#ocelotl-home .nav-links a{\n color:var(--muted)!important;font-size:13px;font-weight:700;\n letter-spacing:.16em;text-transform:uppercase;position:relative;\n transition:color .2s;text-decoration:none;white-space:nowrap\n}\n#ocelotl-home .nav-links a::after{content:\"\";position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--amber2),#d4a040);transition:width .3s var(--ease)}\n#ocelotl-home .nav-links a:hover,#ocelotl-home .nav-links a.active{color:var(--amber2)!important}\n#ocelotl-home .nav-links a:hover::after,#ocelotl-home .nav-links a.active::after{width:100%}\n#ocelotl-home .nav-r{display:flex;align-items:center;gap:10px;flex-shrink:0}\n#ocelotl-home .lang-toggle{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.04)}\n#ocelotl-home .lang-toggle button{min-height:40px;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--muted);padding:9px 16px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transition:.2s var(--ease);font-family:var(--ui)}\n#ocelotl-home .lang-toggle button.on{background:linear-gradient(135deg,#6b2e0c,#3d1606)!important;color:#f0e6d3!important;box-shadow:0 2px 6px rgba(0,0,0,.2)}\n#ocelotl-home .hamburger{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;border:1px solid var(--line2)!important;background:rgba(255,255,255,.04)!important;transition:all .25s var(--ease);flex-shrink:0;padding:0}\n#ocelotl-home .hamburger:hover{border-color:var(--amber2)!important;background:rgba(160,100,40,.15)!important}\n#ocelotl-home .hamburger-icon{width:24px;height:24px;position:relative;display:flex;align-items:center;justify-content:center}\n#ocelotl-home .hamburger-icon span{position:absolute;width:24px;height:2px;background-color:var(--text);border-radius:2px;transition:all .3s ease-in-out}\n#ocelotl-home .hamburger-icon span:nth-child(1){transform:translateY(-8px)}\n#ocelotl-home .hamburger-icon span:nth-child(3){transform:translateY(8px)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(1){transform:translateY(0) rotate(45deg)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(2){opacity:0;transform:scaleX(0)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(3){transform:translateY(0) rotate(-45deg)}\n#ocelotl-home .drawer{\n position:fixed;inset:0;z-index:99998;\n display:flex;flex-direction:column;\n background:rgba(8,5,2,.98);\n backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);\n padding:calc(var(--nav) + 32px) var(--px) 40px;\n transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.4,1.1);\n overflow-y:auto\n}\n#ocelotl-home .drawer.open{transform:translateX(0)}\n#ocelotl-home .drawer-links a{\n display:flex;align-items:center;justify-content:space-between;\n padding:20px 0;border-bottom:1px solid rgba(240,230,211,.11);\n color:var(--text);font-size:clamp(20px,6vw,26px);\n font-family:var(--title);font-weight:900;text-decoration:none;\n opacity:0;transform:translateX(20px);\n transition:opacity .3s ease,transform .3s ease,color .2s,padding-left .2s\n}\n#ocelotl-home .drawer.open .drawer-links a{opacity:1;transform:translateX(0)}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(1){transition-delay:.05s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(2){transition-delay:.1s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(3){transition-delay:.15s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(4){transition-delay:.2s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(5){transition-delay:.25s}\n#ocelotl-home .drawer-links a:hover{color:var(--amber2);padding-left:10px}\n#ocelotl-home .drawer-links a svg{width:22px;height:22px;stroke:var(--amber2);fill:none;stroke-width:2;opacity:.7}\n#ocelotl-home .drawer-links a:hover svg{transform:translateX(5px)}\n\n\/* NAV responsive *\/\n@media(max-width:1024px){\n #ocelotl-home{--nav:90px}\n #ocelotl-home .nav-links{display:none!important}\n #ocelotl-home .hamburger{display:flex!important}\n #ocelotl-home .brand img{width:62px;height:62px}\n #ocelotl-home .brand strong{font-size:17px}\n}\n@media(max-width:620px){\n #ocelotl-home{--nav:64px;--px:18px}\n #ocelotl-home .brand img{width:44px;height:44px}\n #ocelotl-home .brand strong{font-size:13px;letter-spacing:.12em}\n #ocelotl-home .lang-toggle button{min-height:34px;padding:6px 12px;font-size:10px}\n #ocelotl-home .hamburger{width:44px;height:44px}\n #ocelotl-home .hamburger-icon{width:20px;height:20px}\n #ocelotl-home .hamburger-icon span{width:20px}\n #ocelotl-home .hamburger-icon span:nth-child(1){transform:translateY(-7px)}\n #ocelotl-home .hamburger-icon span:nth-child(3){transform:translateY(7px)}\n}\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero{\n position:relative;min-height:100svh;\n display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden\n}\n.hero-media{position:absolute;inset:0;z-index:0}\n.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.86) saturate(.94) contrast(1.05)}\n.hero-overlay{\n position:absolute;inset:0;z-index:1;\n background:\n linear-gradient(108deg,rgba(10,6,3,.72) 0%,rgba(10,6,3,.3) 44%,rgba(10,6,3,.1) 100%),\n linear-gradient(0deg,rgba(10,6,3,.88) 0%,rgba(10,6,3,.0) 55%),\n radial-gradient(ellipse 55% 50% at 0% 98%,rgba(160,64,16,.22),transparent 55%)\n}\n.hero-content{\n position:relative;z-index:2;\n padding:0 var(--px) clamp(48px,7vw,100px);\n display:grid;\n \/* Logo col fijo, texto col con min-width:0 para que nunca desborde *\/\n grid-template-columns:minmax(0,300px) minmax(0,1fr);\n gap:clamp(24px,4vw,64px);\n align-items:center;\n margin-top:var(--nav);\n \/* Contener cualquier overflow dentro del hero *\/\n overflow:hidden\n}\n\/* LA CLAVE: la columna de texto DEBE tener min-width:0 para respetar el grid *\/\n.hero-content > *{min-width:0}\n.hero-logo-col{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.hero-logo-wrap{\n width:min(260px,38vw);aspect-ratio:1;position:relative;\n filter:drop-shadow(0 24px 56px rgba(0,0,0,.8))\n}\n.hero-logo-wrap::before{\n content:\"\";position:absolute;inset:14%;border-radius:50%;\n background:radial-gradient(circle,rgba(160,64,16,.22),transparent 66%);\n filter:blur(20px);animation:logoglw 4s ease-in-out infinite\n}\n@keyframes logoglw{0%,100%{opacity:.4}50%{opacity:.9}}\n.hero-logo-wrap img{\n width:100%;height:100%;object-fit:contain;position:relative;z-index:1;\n filter:brightness(0) invert(1);opacity:.96;transition:transform .5s var(--ease)\n}\n.hero-logo-wrap:hover img{transform:scale(1.025)}\n.hero-kicker{\n display:inline-flex;align-items:center;gap:10px;\n font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;\n color:var(--gold2);margin-bottom:16px;\n \/* nunca desborda *\/\n max-width:100%;overflow:hidden\n}\n.hero-kicker::before{content:\"\";width:30px;height:1.5px;flex-shrink:0;background:linear-gradient(90deg,var(--gold2),transparent)}\n.hero-title{\n font-family:var(--title);\n \/* Reducido: de 8vw a 5.5vw \u2014 nunca se sale en desktop *\/\n font-size:clamp(42px,5.5vw,96px);\n line-height:.9;font-weight:700;color:#fff8ee;\n letter-spacing:-.02em;\n \/* Asegura que el texto rompa l\u00ednea antes de desbordar *\/\n word-break:break-word;\n overflow-wrap:break-word;\n max-width:100%;\n text-shadow:0 4px 0 rgba(255,255,255,.06),0 28px 64px rgba(0,0,0,.65)\n}\n.hero-title em{\n display:block;font-style:italic;color:var(--gold3);\n font-size:clamp(28px,3.8vw,64px);font-weight:400;margin-top:8px;\n word-break:break-word;overflow-wrap:break-word\n}\n.hero-copy{\n margin-top:16px;\n font-size:clamp(14px,1.5vw,17px);line-height:1.78;\n color:rgba(255,242,223,.95);max-width:100%;font-weight:400;\n word-break:break-word\n}\n.hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}\n\n\/* Hero tablet \u2014 stack vertical *\/\n@media(max-width:860px){\n .hero-content{\n grid-template-columns:1fr;\n gap:0;\n padding-bottom:clamp(40px,6vw,72px);\n align-items:flex-end;\n overflow:hidden\n }\n .hero-logo-col{justify-content:flex-start;margin-bottom:18px}\n .hero-logo-wrap{width:min(140px,28vw)}\n .hero-title{font-size:clamp(40px,8.5vw,72px)}\n .hero-title em{font-size:clamp(28px,6vw,54px)}\n}\n@media(max-width:500px){\n .hero-logo-wrap{width:min(110px,26vw)}\n .hero-title{font-size:clamp(36px,9.5vw,56px)}\n .hero-title em{font-size:clamp(26px,7vw,42px)}\n .hero-btns{gap:8px}\n .hero-kicker{font-size:10px;letter-spacing:.18em}\n}\n\n\/* \u2500\u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.btn{\n display:inline-flex;align-items:center;gap:8px;\n border-radius:999px;font-size:12px;font-weight:800;\n letter-spacing:.13em;text-transform:uppercase;\n transition:all .26s var(--ease);cursor:pointer;white-space:nowrap\n}\n.btn-prim{\n padding:14px 28px;\n background:linear-gradient(135deg,var(--acc2),var(--acc));\n color:#fff;border:none;\n box-shadow:0 0 0 1px rgba(var(--acc-rgb),.42),0 8px 28px rgba(var(--acc-rgb),.3),inset 0 1px 0 rgba(255,255,255,.14)\n}\n.btn-prim:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.58),0 14px 36px rgba(var(--acc-rgb),.4)}\n.btn-ghost{\n padding:13px 24px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(180,110,50,.42);color:var(--gold2)\n}\n.btn-ghost:hover{background:rgba(var(--acc-rgb),.14);border-color:rgba(180,110,50,.68);transform:translateY(-2px);color:var(--gold3)}\n@media(max-width:500px){\n .btn{font-size:11px}\n .btn-prim{padding:12px 22px}\n .btn-ghost{padding:11px 20px}\n}\n\n\/* \u2500\u2500\u2500 LOC STRIP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.loc-strip{\n position:relative;z-index:1;\n display:flex;align-items:center;justify-content:center;\n gap:clamp(14px,3vw,48px);\n padding:clamp(14px,2vw,20px) var(--px);\n background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.07),rgba(var(--acc-rgb),.16));\n border-top:1px solid rgba(180,110,50,.24);\n border-bottom:1px solid rgba(180,110,50,.24);\n flex-wrap:wrap;\n row-gap:10px\n}\n.loc-item{\n display:flex;align-items:center;gap:8px;\n font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold2)\n}\n.loc-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}\n.loc-sep{width:4px;height:4px;border-radius:50%;background:rgba(180,110,50,.4)}\n@media(max-width:600px){\n .loc-sep{display:none}\n .loc-strip{justify-content:flex-start;gap:12px}\n .loc-item{font-size:10px}\n}\n\n\/* \u2500\u2500\u2500 LAYOUT BASE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.page{position:relative;z-index:1;overflow-x:hidden;max-width:100vw}\n.section{padding:var(--sec) var(--px);position:relative}\n.divider{height:1px;background:var(--line);margin:0 var(--px)}\n.kicker{\n display:flex;align-items:center;gap:12px;\n font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;\n color:var(--gold2);margin-bottom:16px\n}\n.kicker::before{content:\"\";width:32px;height:1.5px;background:linear-gradient(90deg,var(--gold2),transparent)}\n.kicker.center{justify-content:center}\n.kicker.center::before{display:none}\nh2.display{font-family:var(--title);font-size:clamp(34px,4.5vw,68px);font-weight:700;line-height:.92;color:#fff8ee;word-break:break-word;overflow-wrap:break-word}\nh2.display em{font-style:italic;color:var(--gold3)}\n.lead-text{margin-top:14px;color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.84;font-weight:600;max-width:680px}\n.mini-label{color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;display:block}\n\n\/* \u2500\u2500\u2500 REELS SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.reels-layout{\n display:grid;\n grid-template-columns:1fr minmax(260px,320px);\n gap:clamp(28px,4.5vw,70px);\n align-items:start\n}\n@media(max-width:900px){\n .reels-layout{grid-template-columns:1fr}\n}\n\n\/* Social aside *\/\n.social-aside{\n border:1px solid var(--line);border-radius:24px;\n background:rgba(35,22,12,.84);backdrop-filter:blur(26px);\n padding:clamp(20px,3vw,30px);\n box-shadow:0 2px 0 var(--shine) inset\n}\n@media(max-width:900px){\n .social-aside{max-width:480px}\n}\n.map-embed-wrap{overflow:hidden;border-radius:14px;border:1px solid rgba(180,110,50,.3);box-shadow:0 8px 26px rgba(0,0,0,.38)}\n.map-embed-wrap iframe{display:block;width:100%;height:200px;border:0;filter:saturate(.72) contrast(1.1) brightness(.84) hue-rotate(8deg)}\n.map-btn{\n display:flex;align-items:center;justify-content:center;gap:10px;\n margin-top:12px;width:100%;min-height:48px;border-radius:13px;\n border:1px solid rgba(180,110,50,.4);background:rgba(180,110,50,.08);\n color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;\n transition:all .26s var(--ease);text-decoration:none\n}\n.map-btn:hover{background:rgba(180,110,50,.18);transform:translateY(-2px);color:var(--gold3)}\n.map-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}\n.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}\n\n\/* Reel grid *\/\n.reel-grid{\n display:grid;\n grid-template-columns:repeat(5,minmax(0,1fr));\n gap:12px;\n margin-top:28px;\n overflow-x:auto;\n scroll-snap-type:x mandatory;\n padding-bottom:10px;\n scrollbar-width:thin;scrollbar-color:rgba(180,110,50,.3) transparent;\n -webkit-overflow-scrolling:touch\n}\n.reel-grid::-webkit-scrollbar{height:3px}\n.reel-grid::-webkit-scrollbar-thumb{background:rgba(180,110,50,.3);border-radius:2px}\n\n\/* Tablet: mostrar 3 reels visibles, scroll el resto *\/\n@media(max-width:900px){\n .reel-grid{\n grid-template-columns:repeat(5,minmax(140px,1fr));\n \/* No forced columns \u2014 scroll natural *\/\n }\n}\n\/* Mobile: 2.5 reels visibles para dar hint de scroll *\/\n@media(max-width:600px){\n .reel-grid{\n grid-template-columns:repeat(5,minmax(130px,1fr));\n }\n}\n\n.reel{\n scroll-snap-align:start;position:relative;overflow:hidden;\n aspect-ratio:9\/14;border-radius:18px;\n border:1px solid rgba(242,232,216,.1);\n background:#100804;cursor:pointer;text-align:left;\n transition:all .32s var(--ease);\n box-shadow:0 18px 44px rgba(0,0,0,.34)\n}\n.reel:hover{transform:translateY(-7px) scale(1.02);border-color:rgba(180,110,50,.38)}\n.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.9);transition:transform .55s var(--ease)}\n.reel:hover video{transform:scale(1.04)}\n.reel-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.86),transparent 55%,rgba(8,5,2,.16))}\n.reel-play{\n position:absolute;left:12px;top:12px;z-index:3;\n width:36px;height:36px;border-radius:50%;\n border:1.5px solid rgba(255,255,255,.3);\n background:rgba(8,5,2,.55);backdrop-filter:blur(10px);\n display:flex;align-items:center;justify-content:center;transition:all .22s\n}\n.reel:hover .reel-play{background:rgba(var(--acc-rgb),.78);border-color:var(--gold2);transform:scale(1.06)}\n.reel-play svg{width:12px;height:12px;fill:#fff8e6;margin-left:2px}\n.reel-label{\n position:absolute;left:12px;right:12px;bottom:12px;z-index:3;\n color:#f4eadb;font-size:9px;font-weight:800;letter-spacing:.14em;\n text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.65)\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DEST CARDS \u2014 redise\u00f1o mobile-first total\n Mobile: card horizontal compacta (texto izq, imagen der)\n Desktop >860px: grid 2 col, cards verticales con imagen\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.dest-intro{max-width:800px;margin-bottom:clamp(24px,4vw,48px)}\n\n.dest-grid{\n display:grid;\n grid-template-columns:1fr;\n gap:10px\n}\n@media(min-width:861px){\n .dest-grid{\n grid-template-columns:1fr 1fr;\n gap:4px\n }\n}\n\n\/* \u2500\u2500 MOBILE: card horizontal \u2500\u2500 *\/\n.dest-card{\n position:relative;\n display:grid;\n grid-template-columns:1fr 140px;\n min-height:140px;\n border-radius:18px;\n overflow:hidden;\n text-decoration:none;\n cursor:pointer;\n -webkit-tap-highlight-color:transparent;\n background:#1a0f07;\n border:1px solid rgba(180,110,50,.2);\n transition:border-color .3s var(--ease)\n}\n.dest-card:hover{border-color:rgba(180,110,50,.45)}\n.dest-card.large{min-height:160px}\n\n\/* imagen \u2014 columna derecha en mobile *\/\n.dest-card-img{\n grid-column:2;grid-row:1;\n width:100%;height:100%;\n object-fit:cover;\n filter:saturate(.88) brightness(.78);\n transition:transform .6s var(--ease),filter .4s\n}\n.dest-card:hover .dest-card-img{transform:scale(1.06);filter:saturate(1) brightness(.88)}\n\n\/* overlay solo en la imagen *\/\n.dest-card::after{\n content:\"\";\n position:absolute;\n top:0;right:0;bottom:0;\n width:160px;\n z-index:1;\n background:linear-gradient(270deg,rgba(6,3,1,.0) 0%,rgba(6,3,1,.85) 100%)\n}\n\n\/* glow \u2014 oculto en mobile *\/\n.dest-glow{display:none}\n\n\/* body \u2014 columna izquierda *\/\n.dest-body{\n grid-column:1;grid-row:1;\n position:relative;z-index:2;\n padding:16px 14px 16px 18px;\n display:flex;flex-direction:column;\n justify-content:center;\n gap:4px;\n background:linear-gradient(90deg,rgba(12,6,2,.96) 75%,rgba(12,6,2,.0))\n}\n\n.dest-tag{\n display:inline-flex;align-items:center;\n font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;\n color:var(--gold2);\n border:1px solid rgba(180,110,50,.35);\n background:rgba(10,5,0,.6);\n border-radius:999px;padding:4px 10px;\n align-self:flex-start;\n white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis\n}\n.dest-title{\n font-family:var(--title);\n font-size:clamp(22px,5.5vw,32px);\n line-height:.95;font-weight:700;color:#fff7e6;\n text-shadow:0 1px 8px rgba(0,0,0,.6);\n word-break:break-word;\n margin-top:4px\n}\n.dest-desc{\n font-size:12px;line-height:1.55;\n color:rgba(240,225,200,.82);font-weight:400;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;\n margin-top:4px\n}\n.dest-chips{\n display:flex;flex-wrap:wrap;gap:3px;\n margin-top:5px\n}\n.dest-chip{\n font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;\n color:var(--gold2);background:rgba(10,5,0,.55);\n border:1px solid rgba(180,110,50,.28);border-radius:999px;padding:3px 8px;\n white-space:nowrap\n}\n.dest-cta{\n display:inline-flex;align-items:center;gap:6px;\n margin-top:8px;\n font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;\n color:var(--gold2);border:1px solid rgba(180,110,50,.35);\n background:rgba(10,5,0,.55);border-radius:999px;padding:6px 14px;\n align-self:flex-start;\n transition:.22s var(--ease)\n}\n.dest-cta svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0;transition:transform .22s}\n.dest-card:hover .dest-cta{background:rgba(var(--acc-rgb),.32);border-color:rgba(180,110,50,.65);color:#fff}\n.dest-card:hover .dest-cta svg{transform:translateX(3px)}\n\n\/* \u2500\u2500 DESKTOP: vuelve a card vertical con imagen de fondo \u2500\u2500 *\/\n@media(min-width:861px){\n .dest-card{\n display:flex;flex-direction:column;justify-content:flex-end;\n grid-template-columns:unset;\n min-height:unset;\n height:clamp(400px,38vw,540px);\n border-radius:0;border:none;background:transparent\n }\n .dest-card.large{height:clamp(460px,42vw,580px)}\n .dest-card:hover{border-color:transparent}\n\n .dest-card-img{\n grid-column:unset;grid-row:unset;\n position:absolute;inset:0;width:100%;height:100%\n }\n .dest-card::after{\n width:unset;\n inset:0;\n background:linear-gradient(\n 0deg,\n rgba(6,3,1,.92) 0%,\n rgba(6,3,1,.55) 38%,\n rgba(6,3,1,.12) 68%,\n rgba(6,3,1,.0) 100%\n )\n }\n .dest-glow{\n display:block;\n position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s\n }\n .dest-card:hover .dest-glow{opacity:1}\n .dest-card[data-g=\"a\"] .dest-glow{background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(160,64,16,.25),transparent 60%)}\n .dest-card[data-g=\"b\"] .dest-glow{background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(176,128,64,.22),transparent 60%)}\n\n .dest-body{\n grid-column:unset;grid-row:unset;\n position:relative;z-index:2;\n padding:clamp(20px,2.5vw,36px);\n background:none;\n justify-content:flex-end;\n gap:0\n }\n .dest-tag{font-size:9px;padding:5px 12px;margin-bottom:6px}\n .dest-title{font-size:clamp(28px,3.2vw,52px);margin-top:0}\n .dest-desc{font-size:14px;-webkit-line-clamp:3;margin-top:8px}\n .dest-chips{margin-top:8px;gap:4px}\n .dest-chip{font-size:9px;padding:4px 10px}\n .dest-cta{font-size:10px;padding:8px 18px;margin-top:12px}\n .dest-cta svg{width:10px;height:10px}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ARTESAN\u00cdAS \u2014 mobile first\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.arts-intro{\n display:grid;grid-template-columns:1fr;\n gap:24px;margin-bottom:clamp(24px,4vw,48px)\n}\n@media(min-width:761px){\n .arts-intro{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}\n}\n.arts-intro-img{\n position:relative;overflow:hidden;border-radius:18px;\n border:1px solid rgba(242,232,216,.14);aspect-ratio:4\/3;\n box-shadow:0 16px 40px rgba(0,0,0,.3)\n}\n.arts-intro-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1) brightness(.88)}\n.arts-intro-img::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.2),transparent 55%)}\n.arts-grid{display:grid;grid-template-columns:1fr;gap:10px}\n@media(min-width:561px){.arts-grid{grid-template-columns:repeat(2,1fr);gap:13px}}\n@media(min-width:961px){.arts-grid{grid-template-columns:repeat(3,1fr);gap:16px}}\n.art-card{\n border-radius:16px;border:1px solid rgba(242,232,216,.1);background:#1a1008;\n overflow:hidden;cursor:pointer;display:flex;flex-direction:row;text-decoration:none;\n min-height:110px;transition:border-color .3s var(--ease),transform .3s var(--ease);\n box-shadow:0 8px 24px rgba(0,0,0,.24)\n}\n.art-card:hover{border-color:rgba(180,110,50,.36);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.36)}\n.art-card-thumb{position:relative;flex-shrink:0;width:110px;overflow:hidden}\n.art-card-thumb img{\n position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;filter:saturate(.88) brightness(.82);transition:transform .6s var(--ease)\n}\n.art-card:hover .art-card-thumb img{transform:scale(1.08)}\n.art-card-thumb::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(90deg,transparent 55%,rgba(22,13,4,.95))\n}\n.art-body{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:3px}\n.art-tag{color:var(--gold2);font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;display:block}\n.art-title{\n font-family:var(--title);font-size:clamp(17px,4vw,21px);\n font-weight:700;color:var(--text);line-height:1.05;display:block;word-break:break-word\n}\n.art-desc{\n margin-top:3px;color:rgba(230,212,186,.78);font-size:11px;line-height:1.5;\n font-weight:400;display:block;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden\n}\n.art-cta{\n display:inline-flex;align-items:center;gap:4px;margin-top:8px;\n border:1px solid rgba(180,110,50,.34);border-radius:999px;\n background:rgba(180,110,50,.1);color:#ffe8c0;\n padding:4px 11px;font-size:8px;font-weight:900;\n letter-spacing:.1em;text-transform:uppercase;transition:all .22s;align-self:flex-start\n}\n.art-card:hover .art-cta{background:rgba(180,110,50,.24);border-color:rgba(180,110,50,.58)}\n@media(min-width:561px){\n .art-card{flex-direction:column;min-height:300px;position:relative}\n .art-card-thumb{width:100%;height:190px;flex-shrink:unset}\n .art-card-thumb img{position:absolute}\n .art-card-thumb::after{background:linear-gradient(0deg,rgba(10,6,2,.9) 0%,rgba(10,6,2,.15) 55%,transparent 75%)}\n .art-body{position:absolute;inset:auto 0 0 0;padding:14px 18px 18px;background:none}\n .art-title{font-size:clamp(19px,2vw,25px)}\n .art-desc{-webkit-line-clamp:3;font-size:12px}\n}\n@media(min-width:961px){.art-card-thumb{height:210px}}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SPLIT (Origen) \u2014 mobile first\n Mobile: 1 col, foto arriba texto abajo\n Desktop: 2 col lado a lado\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.split{\n display:grid;\n grid-template-columns:1fr;\n gap:20px\n}\n@media(min-width:761px){\n .split{\n grid-template-columns:1fr 1fr;\n gap:clamp(24px,5vw,72px);\n align-items:center\n }\n}\n\n.photo-frame{\n position:relative;overflow:hidden;border-radius:20px;\n border:1px solid rgba(242,232,216,.1);\n aspect-ratio:16\/9; \/* m\u00e1s ancho en mobile \u2014 no tan alto *\/\n box-shadow:0 20px 48px rgba(0,0,0,.36);isolation:isolate;\n transition:border-color .4s\n}\n@media(min-width:761px){\n .photo-frame{aspect-ratio:4\/3}\n}\n.photo-frame:hover{border-color:rgba(180,110,50,.24)}\n.photo-frame img{\n width:100%;height:100%;object-fit:cover;\n filter:saturate(.88) brightness(.85);transition:transform .7s var(--ease)\n}\n.photo-frame:hover img{transform:scale(1.03)}\n.photo-frame::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.45),transparent 55%)}\n\n.text-panel{\n border:1px solid rgba(242,232,216,.1);border-radius:20px;\n background:rgba(30,18,8,.88);backdrop-filter:blur(20px);\n padding:clamp(22px,4vw,40px);\n box-shadow:0 2px 0 var(--shine) inset,0 18px 44px rgba(0,0,0,.24);\n transition:border-color .3s\n}\n.text-panel:hover{border-color:rgba(180,110,50,.22)}\n.text-panel h3{\n font-family:var(--title);\n font-size:clamp(28px,5vw,52px);\n line-height:.96;font-weight:700;color:var(--gold3);margin-top:10px;\n word-break:break-word\n}\n.text-panel p{\n margin-top:14px;color:#f0dcc0;\n font-size:clamp(14px,1.5vw,16px);line-height:1.82;font-weight:400\n}\n\n\/* \u2500\u2500\u2500 REVIEWS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n@media(max-width:900px){.review-grid{grid-template-columns:repeat(2,1fr);gap:14px}}\n@media(max-width:500px){.review-grid{grid-template-columns:1fr;gap:12px}}\n\n.review{\n position:relative;overflow:hidden;\n border:1px solid rgba(255,242,223,.2);border-radius:22px;\n background:rgba(40,24,12,.92);padding:clamp(18px,2.5vw,26px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 48px rgba(0,0,0,.35);\n transition:all .3s var(--ease)\n}\n.review::before{content:\"\";position:absolute;inset:auto 18px 0 18px;height:2px;background:linear-gradient(90deg,transparent,var(--gold3),var(--acc2),transparent);opacity:.5}\n.review:hover{transform:translateY(-5px);border-color:rgba(240,200,120,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 60px rgba(0,0,0,.4)}\n.review-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}\n.review-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,rgba(240,200,120,.3),rgba(160,64,16,.4));border:1px solid rgba(255,242,223,.2);color:#fff7e6;font-size:15px;font-weight:900}\n.review-name{display:block;color:#fff8ee;font-size:14px;font-weight:800;line-height:1.2}\n.review-meta{display:block;margin-top:2px;color:rgba(212,180,140,.65);font-size:11px;font-weight:600;letter-spacing:.06em}\n.review p{color:#f0e4cc;font-size:clamp(13px,1.3vw,14px);line-height:1.7;font-weight:400}\n.review-quote{font-family:var(--title);font-size:34px;line-height:1;color:rgba(240,200,120,.3);margin-bottom:4px}\n.stars{display:flex;gap:3px;margin-bottom:8px}\n.stars span{color:#ffb22c;font-size:15px}\n.review-source{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,242,223,.14);color:rgba(240,200,120,.7);background:rgba(255,255,255,.05);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}\n\n\/* \u2500\u2500\u2500 HORARIOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.horarios-section{\n padding:var(--sec) var(--px);\n background:linear-gradient(135deg,rgba(var(--acc-rgb),.07),rgba(var(--acc-rgb),.02));\n border-top:1px solid var(--line);border-bottom:1px solid var(--line)\n}\n.horarios-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:start}\n@media(max-width:860px){.horarios-inner{grid-template-columns:1fr;gap:40px}}\n\n.sec-kicker{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}\n.sec-kicker::before{content:\"\";width:32px;height:1.5px;background:linear-gradient(90deg,var(--gold2),transparent)}\n.sec-title{font-family:var(--title);font-size:clamp(34px,4.8vw,72px);line-height:.9;font-weight:700;color:#fff7e8;word-break:break-word;overflow-wrap:break-word}\n.sec-title em{font-style:italic;color:var(--gold3)}\n.sec-lead{margin-top:14px;color:var(--muted);font-size:clamp(14px,1.5vw,17px);line-height:1.82;font-weight:500;max-width:640px}\n\n.h-table{margin-top:30px}\n.h-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(180,110,50,.1);gap:14px}\n.h-row:last-child{border-bottom:none}\n.h-day{font-family:var(--title);font-size:clamp(14px,1.8vw,20px);font-weight:700;color:rgba(242,232,216,.55);letter-spacing:.04em;min-width:120px}\n.h-row.today .h-day{color:var(--gold2)}\n.h-time{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(210,190,160,.55)}\n.h-row.today .h-time{color:var(--muted)}\n.h-now{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;border-radius:999px;padding:4px 10px;box-shadow:0 2px 8px rgba(var(--acc-rgb),.38);flex-shrink:0}\n\n.h-info-cards{display:flex;flex-direction:column;gap:16px;padding-top:8px}\n.h-info-card{padding:20px 22px;border:1px solid rgba(180,110,50,.2);border-radius:16px;background:rgba(var(--acc-rgb),.07)}\n.h-info-title{font-family:var(--title);font-size:18px;font-weight:700;color:var(--gold2);margin-bottom:8px}\n.h-info-text{font-size:14px;line-height:1.72;font-weight:400;color:rgba(212,196,168,.78)}\n.h-info-text a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px;opacity:.88}\n\n\/* \u2500\u2500\u2500 VIS\u00cdTANOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.visit-grid{\n display:grid;\n grid-template-columns:1fr minmax(260px,360px);\n gap:20px;align-items:stretch\n}\n@media(max-width:860px){.visit-grid{grid-template-columns:1fr;gap:16px}}\n\n.visit-card{\n border:1px solid var(--line);border-radius:22px;\n background:rgba(16,10,5,.82);backdrop-filter:blur(24px);\n padding:clamp(24px,3.5vw,40px);transition:all .3s\n}\n.visit-card:hover{border-color:rgba(180,110,50,.26);transform:translateY(-2px)}\n.visit-card h2{font-family:var(--title);font-size:clamp(28px,4vw,54px);line-height:.94;margin-bottom:12px;color:var(--text);font-weight:700}\n.contact-lines{display:grid;gap:12px;margin-top:20px}\n.contact-line{display:flex;align-items:flex-start;gap:13px;color:rgba(240,226,208,.86);font-size:clamp(13px,1.4vw,15px);line-height:1.6;transition:all .22s;text-decoration:none}\na.contact-line:hover{color:var(--gold2);transform:translateX(5px)}\n.contact-line svg{width:18px;height:18px;stroke:var(--gold2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}\n.cta-row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}\n\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.footer{\n padding:clamp(44px,6vw,72px) var(--px) clamp(28px,4vw,48px);\n display:grid;grid-template-columns:1fr auto 1fr;\n align-items:start;gap:40px;\n border-top:1px solid var(--line)\n}\n@media(max-width:860px){\n .footer{grid-template-columns:1fr 1fr;gap:24px}\n .footer-center{display:none}\n .footer-nav{align-items:flex-start}\n .footer-copy{grid-column:1\/-1}\n}\n@media(max-width:500px){\n .footer{grid-template-columns:1fr;gap:28px}\n .footer-nav{align-items:flex-start}\n .footer-copy{grid-column:1}\n}\n\n.footer-brand{display:flex;flex-direction:column;gap:12px}\n.footer-brand img{width:54px;height:54px;object-fit:contain;filter:brightness(0) invert(1);opacity:.65}\n.footer-brand p{font-size:13px;line-height:1.7;color:rgba(200,185,165,.7);font-weight:400;max-width:270px}\n.footer-social{display:flex;gap:10px;margin-top:4px}\n.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(160,100,40,.28);background:rgba(160,64,16,.1);color:var(--soft);transition:all .22s}\n.footer-social a:hover{background:rgba(160,64,16,.22);border-color:rgba(160,100,40,.55);color:var(--gold2);transform:translateY(-2px)}\n.footer-social a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}\n.footer-center{text-align:center}\n.footer-logo{width:68px;height:68px;object-fit:contain;filter:brightness(0) invert(1);opacity:.48;margin:0 auto 14px;display:block}\n.footer-tagline{font-family:var(--title);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}\n.footer-nav{display:flex;flex-direction:column;align-items:flex-end;gap:9px}\n.footer-nav a{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(180,158,130,.65);transition:color .22s}\n.footer-nav a:hover{color:var(--gold2)}\n.footer-copy{grid-column:1\/-1;text-align:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(160,140,120,.3);padding-top:clamp(20px,3vw,34px);border-top:1px solid var(--line)}\n\n\/* \u2500\u2500\u2500 VIDEO MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.video-modal{\n position:fixed;inset:0;z-index:100000;\n display:flex;align-items:center;justify-content:center;\n padding:clamp(12px,3vw,36px);\n background:rgba(5,2,0,.92);backdrop-filter:blur(30px);\n opacity:0;pointer-events:none;transition:opacity .3s var(--ease)\n}\n.video-modal.on{opacity:1;pointer-events:auto}\n.video-pop{\n position:relative;width:min(400px,92vw);max-height:92svh;\n border-radius:20px;border:1px solid rgba(242,232,216,.14);\n background:#0a0502;overflow:hidden;\n transform:translateY(22px) scale(.97);\n transition:transform .34s var(--ease);\n display:flex;flex-direction:column\n}\n.video-modal.on .video-pop{transform:translateY(0) scale(1)}\n.video-pop video{display:block;width:100%;max-height:calc(92svh - 56px);object-fit:contain;background:#000}\n.video-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 10px;border-bottom:1px solid rgba(242,232,216,.08);flex-shrink:0}\n.video-title{color:#fff5df;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}\n.video-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(5,2,0,.72);color:#fff;font-size:15px;backdrop-filter:blur(12px);cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.video-close:hover{background:rgba(var(--acc-rgb),.85)}\n<\/style>\n<\/head>\n<body>\n<div id=\"ocelotl-home\">\n<div class=\"app-bg\" aria-hidden=\"true\"><\/div>\n\n<header class=\"nav\" id=\"nav\">\n <a class=\"brand\" href=\"https:\/\/ocelotlmx.com\/?page_id=1262\" aria-label=\"Ocelotl inicio\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"76\" height=\"76\">\n <strong>Ocelotl<\/strong>\n <\/a>\n <nav>\n <ul class=\"nav-links\">\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a><\/li>\n <li><a href=\"#visitanos\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/a><\/li>\n <\/ul>\n <\/nav>\n <div class=\"nav-r\">\n <div class=\"lang-toggle\">\n <button class=\"on\" id=\"btnEs\" type=\"button\" onclick=\"setLang('es')\">ES<\/button>\n <button id=\"btnEn\" type=\"button\" onclick=\"setLang('en')\">EN<\/button>\n <\/div>\n <button class=\"hamburger\" id=\"hbtn\" type=\"button\" aria-label=\"Men\u00fa\" onclick=\"toggleDrawer()\">\n <div class=\"hamburger-icon\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/button>\n <\/div>\n<\/header>\n\n<div class=\"drawer\" id=\"drawer\">\n <nav class=\"drawer-links\">\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" onclick=\"closeDrawer()\">Men\u00fa <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" onclick=\"closeDrawer()\">Carta de Mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" onclick=\"closeDrawer()\">Mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" onclick=\"closeDrawer()\">Artesan\u00edas <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"#visitanos\" onclick=\"closeDrawer()\">Vis\u00edtanos <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <\/nav>\n<\/div>\n<\/div>\n\n<div class=\"page\">\n\n\n<section class=\"hero\" id=\"inicio\">\n <div class=\"hero-media\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_M3.jpeg\" alt=\"Ocelotl\" id=\"heroBg\" loading=\"eager\">\n <\/div>\n <div class=\"hero-overlay\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-logo-col reveal-left\">\n <div class=\"hero-logo-wrap\">\n <img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"300\" height=\"300\">\n <\/div>\n <\/div>\n <div class=\"reveal-right\">\n <div class=\"hero-kicker\" data-es=\"Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal\" data-en=\"Crafts \u00b7 Coffee \u00b7 Mezcal\">Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal<\/div>\n <h1 class=\"hero-title\" data-es=\"Dignos representantes <em>de M\u00e9xico<\/em>\" data-en=\"Worthy representatives <em>of Mexico<\/em>\">Dignos representantes <em>de M\u00e9xico<\/em><\/h1>\n <p class=\"hero-copy\" data-es=\"Ven por un caf\u00e9 de olla, un Xocolatl, una degustaci\u00f3n de Mexcalli o una pieza artesanal para llevar.\" data-en=\"Come for a caf\u00e9 de olla, a Xocolatl, a Mexcalli tasting or a handcrafted piece to take home.\">Ven por un caf\u00e9 de olla, un Xocolatl, una degustaci\u00f3n de Mexcalli o una pieza artesanal para llevar.<\/p>\n <div class=\"hero-btns\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de mezcales\" data-en=\"Mezcal menu\">Carta de mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Conocer mezcales\" data-en=\"Explore mezcals\">Conocer mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"loc-strip\">\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" fill=\"currentColor\" opacity=\".85\"\/><\/svg>\n <span data-es=\"Emilio Dond\u00e9 104, Pasillo 8 y Central\" data-en=\"Emilio Dond\u00e9 104, Aisle 8 & Central\">Emilio Dond\u00e9 104, Pasillo 8 y Central<\/span>\n <\/div>\n <div class=\"loc-sep\"><\/div>\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\n <span data-es=\"Lun\u2013Dom 10AM\u20136PM \u00b7 Dom 10AM\u20135PM\" data-en=\"Mon\u2013Sun 10AM\u20136PM \u00b7 Sun 10AM\u20135PM\">Lun\u2013S\u00e1b 10AM\u20136PM \u00b7 Dom 10AM\u20135PM<\/span>\n <\/div>\n <div class=\"loc-sep\"><\/div>\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n <span>La Ciudadela \u00b7 CDMX<\/span>\n <\/div>\n<\/div>\n\n\n<section class=\"section\" id=\"redes\">\n <div class=\"reels-layout\">\n <div class=\"reveal\">\n <div class=\"kicker\" data-es=\"Ocelotl en movimiento\" data-en=\"Ocelotl in motion\">Ocelotl en movimiento<\/div>\n <h2 class=\"display\" data-es=\"Ven a vivir <em>Ocelotl<\/em>\" data-en=\"Come live <em>Ocelotl<\/em>\">Ven a vivir <em>Ocelotl<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"El caf\u00e9 de olla, el Xocolatl, el Mexcalli y las piezas mexicanas se entienden mejor cuando se viven de cerca.\" data-en=\"The caf\u00e9 de olla, Xocolatl, Mexcalli and Mexican pieces are best understood when experienced up close.\">El caf\u00e9 de olla, el Xocolatl, el Mexcalli y las piezas mexicanas se entienden mejor cuando se viven de cerca.<\/p>\n <div class=\"social-links\">\n <a class=\"btn btn-ghost\" href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n <\/div>\n <\/div>\n <aside class=\"social-aside reveal-right\">\n <span class=\"mini-label\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/span>\n <p style=\"font-size:14px;margin-bottom:14px;color:var(--muted);font-weight:500\" data-es=\"Pasillo 8 y Central, dentro de La Ciudadela.\" data-en=\"Aisle 8 and Central, inside La Ciudadela.\">Pasillo 8 y Central, dentro de La Ciudadela.<\/p>\n <div class=\"map-embed-wrap\">\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3763.4057407698716!2d-99.15270492394285!3d19.432016640418363!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1f85976557517%3A0xa7c85b00b1a4d583!2sMercado%20de%20Artesanias%20La%20Ciudadela!5e0!3m2!1ses-419!2smx!4v1715000000000!5m2!1ses-419!2smx\" width=\"100%\" height=\"200\" style=\"border:0;display:block;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n <\/div>\n <a class=\"map-btn\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-7.3 7-12a7 7 0 1 0-14 0c0 4.7 7 12 7 12Z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n <span data-es=\"Abrir en Google Maps\" data-en=\"Open in Google Maps\">Abrir en Google Maps<\/span>\n <\/a>\n <\/aside>\n <\/div>\n\n \n <div class=\"reel-grid stagger\">\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/PLAYERA_MEXICO.mp4','Playera M\u00e9xico')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/PLAYERA_MEXICO.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Playera M\u00e9xico<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_OLLA.mp4','Caf\u00e9 de olla')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_OLLA.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Caf\u00e9 de olla<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/TOMAR_MEZCAL.mp4','Tomar Mexcalli')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/TOMAR_MEZCAL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Tomar Mexcalli<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CATAR_MEZCAL.mp4','Catar Mexcalli')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CATAR_MEZCAL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Catar Mexcalli<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/OCELOTL.mp4','Ocelotl')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/OCELOTL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Ocelotl<\/span>\n <\/button>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"secciones\">\n <div class=\"dest-intro reveal\">\n <div class=\"kicker\" data-es=\"Explora Ocelotl\" data-en=\"Explore Ocelotl\">Explora Ocelotl<\/div>\n <h2 class=\"display\" data-es=\"Todo lo que <em>somos<\/em>\" data-en=\"Everything that <em>we are<\/em>\">Todo lo que <em>somos<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"Cuatro experiencias \u00fanicas bajo un mismo techo.\" data-en=\"Four unique experiences under one roof.\">Cuatro experiencias \u00fanicas bajo un mismo techo.<\/p>\n <\/div>\n <div class=\"dest-grid\">\n <a class=\"dest-card large\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-g=\"a\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/MEZCAL1.jpeg\" alt=\"Men\u00fa Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Caf\u00e9 & Bebidas\" data-en=\"Coffee & Drinks\">Caf\u00e9 & Bebidas<\/div>\n <div class=\"dest-title\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/div>\n <p class=\"dest-desc\" data-es=\"Caf\u00e9 de origen, xocolatl, t\u00e9s, aguas frescas y bebidas con piquete. Caf\u00e9 con mezcal, Xolotl, Tepache y mucho m\u00e1s.\" data-en=\"Single-origin coffee, xocolatl, teas, fresh waters and spirited drinks. Mezcal coffee, Xolotl, Tepache and more.\">Caf\u00e9 de origen, xocolatl, t\u00e9s, aguas frescas y bebidas con piquete.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\" data-es=\"Caf\u00e9 de origen\" data-en=\"Single-origin\">Caf\u00e9 de origen<\/span>\n <span class=\"dest-chip\">Xocolatl<\/span>\n <span class=\"dest-chip\" data-es=\"Con piquete\" data-en=\"Spirited\">Con piquete<\/span>\n <span class=\"dest-chip\">Tepache<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card large\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-g=\"a\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/MEZCAL15.jpeg\" alt=\"Mezcales Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih\" data-en=\"Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih\">Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih<\/div>\n <div class=\"dest-title\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/div>\n <p class=\"dest-desc\" data-es=\"Mezcales mexicanos seleccionados por agave, regi\u00f3n y perfil. Cada etiqueta con su historia.\" data-en=\"Mexican mezcals selected by agave, region and profile. Each label with its story.\">Mezcales mexicanos seleccionados por agave, regi\u00f3n y perfil.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\">Cupreata<\/span>\n <span class=\"dest-chip\">Espad\u00edn<\/span>\n <span class=\"dest-chip\">Cenizo<\/span>\n <span class=\"dest-chip\" data-es=\"Silvestres\" data-en=\"Wild\">Silvestres<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Explorar mezcales\" data-en=\"Explore mezcals\">Explorar mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-g=\"b\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/06\/espadin-azul-bco-y-reposd.jpg\" alt=\"Carta de Mezcales\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Shots & Degustaciones\" data-en=\"Shots & Tastings\">Shots & Degustaciones<\/div>\n <div class=\"dest-title\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/div>\n <p class=\"dest-desc\" data-es=\"Consulta shots disponibles y encuentra tu mezcal por agave, regi\u00f3n y perfil.\" data-en=\"Check available shots and find your mezcal by agave, region and profile.\">Consulta shots disponibles y encuentra tu mezcal por agave, regi\u00f3n y perfil.<\/p>\n <div class=\"dest-chips\"><span class=\"dest-chip\">Madurado en vidrio<\/span><\/div>\n <div class=\"dest-cta\" data-es=\"Ver carta\" data-en=\"See menu\">Ver carta <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-g=\"b\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8639.jpg\" alt=\"Artesan\u00edas Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Hecho en M\u00e9xico\" data-en=\"Made in Mexico\">Hecho en M\u00e9xico<\/div>\n <div class=\"dest-title\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/div>\n <p class=\"dest-desc\" data-es=\"Artesan\u00eda mexicana con origen en diferentes regiones de la Rep\u00fablica.\" data-en=\"Mexican crafts from different regions, selected to represent the work of their creators.\">Artesan\u00eda mexicana con origen en diferentes regiones de la Rep\u00fablica.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\" data-es=\"Precio justo\" data-en=\"Fair price\">Precio justo<\/span>\n <span class=\"dest-chip\" data-es=\"Hecho a mano\" data-en=\"Handmade\">Hecho a mano<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Ver artesan\u00edas\" data-en=\"See crafts\">Ver artesan\u00edas <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"artesanias-preview\">\n <div class=\"arts-intro\">\n <div class=\"reveal\">\n <div class=\"kicker\" data-es=\"Hecho en M\u00e9xico\" data-en=\"Made in Mexico\">Hecho en M\u00e9xico<\/div>\n <h2 class=\"display\" data-es=\"Artesan\u00edas <em>con origen<\/em>\" data-en=\"Crafts <em>with origin<\/em>\">Artesan\u00edas <em>con origen<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales, trabajando directamente con artesanos para mantener precios justos.\" data-en=\"From different regions of Mexico, we select representative crafts based on their history, materials and traditional techniques, working directly with artisans to maintain fair prices.\">De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales, trabajando directamente con artesanos para mantener precios justos.<\/p>\n <div style=\"margin-top:24px\"><a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Ver colecci\u00f3n completa\" data-en=\"See full collection\">Ver colecci\u00f3n completa<\/a><\/div>\n <\/div>\n <div class=\"arts-intro-img reveal-right\">\n <img decoding=\"async\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.47.22-2-1.jpeg\" alt=\"Artesan\u00edas mexicanas\" loading=\"lazy\">\n <\/div>\n <\/div>\n <div class=\"arts-grid stagger\">\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8655.jpg\" alt=\"Catrinas\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Barro\" data-en=\"Clay\">Barro<\/span>\n <div class=\"art-title\" data-es=\"Catrinas\" data-en=\"Catrinas\">Catrinas<\/div>\n <p class=\"art-desc\" data-es=\"Hechas a base de tres barros mezclados y purgados. Tiempo aprox: 10 d\u00edas.\" data-en=\"Made with three purified clays. Approx. 10 days.\">Hechas a base de tres barros mezclados y purgados. Tiempo aprox: 10 d\u00edas.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.28.33.jpeg\" alt=\"Piedra \u00f3nix\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Piedra \u00f3nix\" data-en=\"Onyx\">Piedra \u00f3nix<\/span>\n <div class=\"art-title\" data-es=\"Piezas de piedra \u00f3nix\" data-en=\"Onyx stone pieces\">Piezas de piedra \u00f3nix<\/div>\n <p class=\"art-desc\" data-es=\"Originarias de Puebla, hechas a mano. Tiempo aprox: 15 d\u00edas.\" data-en=\"From Puebla, handmade. Approx. 15 days.\">Originarias de Puebla, hechas a mano. Tiempo aprox: 15 d\u00edas.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8597.jpg\" alt=\"Mezcaleros\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Temporada\" data-en=\"Seasonal\">Temporada<\/span>\n <div class=\"art-title\" data-es=\"Mezcaleros\" data-en=\"Mezcal cups\">Mezcaleros<\/div>\n <p class=\"art-desc\" data-es=\"Mezcaleros de diferentes regiones y materiales.\" data-en=\"Mezcal cups from different regions and materials.\">Mezcaleros de diferentes regiones y materiales.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <\/div>\n <div style=\"display:flex;justify-content:center;margin-top:30px\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Ver todas las artesan\u00edas\" data-en=\"See all crafts\">Ver todas las artesan\u00edas<\/a>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"origen\">\n <div class=\"split\">\n <div class=\"photo-frame reveal-left\">\n <img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/todas-titicih-humo-web-scaled.jpg\" alt=\"Ocelotl \u2014 Do\u00f1a Nicolasa Titicih\">\n <\/div>\n <div class=\"text-panel reveal-right\">\n <div class=\"kicker\" data-es=\"Nuestro origen\" data-en=\"Our origin\">Nuestro origen<\/div>\n <h3 style=\"font-family:var(--title);font-size:clamp(30px,4vw,56px);line-height:.94;font-weight:700;color:var(--gold3);margin-top:12px\" data-es=\"Nuestro prop\u00f3sito\" data-en=\"Our purpose\">Nuestro prop\u00f3sito<\/h3>\n <p data-es=\"Nuestra marca nace con el prop\u00f3sito de ser dignos representantes de nuestro pa\u00eds a trav\u00e9s de la venta de artesan\u00eda con origen en diferentes regiones de la rep\u00fablica y preparaci\u00f3n de bebidas tradicionales.\" data-en=\"Our brand was born with the purpose of being worthy representatives of our country through the sale of crafts from different regions of the republic and the preparation of traditional beverages.\">Nuestra marca nace con el prop\u00f3sito de ser dignos representantes de nuestro pa\u00eds a trav\u00e9s de la venta de artesan\u00eda con origen en diferentes regiones de la rep\u00fablica y preparaci\u00f3n de bebidas tradicionales.<\/p>\n <p data-es=\"Con precios justos tanto para el artesano como para el p\u00fablico en general, evitando el abuso al comprador y la denigraci\u00f3n al trabajo del artesano.\" data-en=\"With fair prices for both the artisan and the general public, avoiding abuse of the buyer and denigration of the artisan's work.\">Con precios justos tanto para el artesano como para el p\u00fablico en general, evitando el abuso al comprador y la denigraci\u00f3n al trabajo del artesano.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\">\n <div style=\"max-width:820px;margin:0 auto clamp(30px,4vw,50px);text-align:center\" class=\"reveal\">\n <div class=\"kicker center\" data-es=\"Opiniones reales\" data-en=\"Real reviews\">Opiniones reales<\/div>\n <h2 class=\"display\" data-es=\"Lo que dicen <em>en Google<\/em>\" data-en=\"What they say <em>on Google<\/em>\">Lo que dicen <em>en Google<\/em><\/h2>\n <p class=\"lead-text\" style=\"margin-left:auto;margin-right:auto;text-align:center\" data-es=\"Rese\u00f1as reales de visitantes que destacan el caf\u00e9, el chocolate, los mezcales, el servicio y las artesan\u00edas.\" data-en=\"Real visitor reviews highlighting coffee, chocolate, mezcals, service and crafts.\">Rese\u00f1as reales de visitantes que destacan el caf\u00e9, el chocolate, los mezcales y las artesan\u00edas.<\/p>\n <\/div>\n <div class=\"review-grid stagger\">\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">JM<\/div><div><strong class=\"review-name\">J Mndz<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 3 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Excelente lugar con un gran men\u00fa a disposici\u00f3n, caf\u00e9, mezcal, cerveza, botana, todo lo tiene y nada se guarda!!! Peque\u00f1o y c\u00f3modo en medio del mercado de la ciudadela, de ambiente tranquilo...<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">IR<\/div><div><strong class=\"review-name\">Itzel Ramirez<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 7 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Este lugar en el mercado de la ciudadela tiene ALMA y MAGIA pura. Es mi 100 de 10 para el aut\u00e9ntico caf\u00e9 de olla y chocolate con agua. Las artesan\u00edas son de la mejor calidad.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">AL<\/div><div><strong class=\"review-name\">Alberto Lozano<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 7 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Un cafe chiquito dentro del mercado, est\u00e1 rico el cafe y el chocolate, le puedes agregar mezcal y queda muy bueno, el personal muy amable.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">SA<\/div><div><strong class=\"review-name\">Say Avenda\u00f1o<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 6 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Las bebidas preparadas est\u00e1n muy ricas y frescas, s\u00faper recomendable. Las degustaciones de mezcal, muy rico 100 pesitos por caballitos.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">S<\/div><div><strong class=\"review-name\">Sveta<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 4 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Dentro del mercado de artesanias esta escondido este lugarcito, donde preparan maravillosos cafes y chocolates. Tambien puedes encontrar mescales, pulques y otras delicias mexicanas. Un must!<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">SM<\/div><div><strong class=\"review-name\">Sandra Munzert<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 2 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Un lugarcito maravilloso con un ambiente encantador y un buen servicio que nos ense\u00f1\u00f3 c\u00f3mo debe ser el mezcal. Nos encant\u00f3 tanto que volveremos.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"horarios-section\" id=\"horarios\">\n <div class=\"horarios-inner\">\n <div class=\"reveal-left\">\n <div class=\"sec-kicker\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/div>\n <h2 class=\"sec-title\" data-es=\"Horarios & <em>ubicaci\u00f3n<\/em>\" data-en=\"Hours & <em>location<\/em>\">Horarios & <em>ubicaci\u00f3n<\/em><\/h2>\n <p class=\"sec-lead\" data-es=\"Estamos en La Ciudadela, uno de los mercados de artesan\u00edas m\u00e1s importantes de M\u00e9xico. Ven a tomarte un caf\u00e9, un mezcal, o llevarte una pieza \u00fanica.\" data-en=\"We are at La Ciudadela, one of Mexico's most important craft markets. Come for a coffee, a mezcal, or take home a unique piece.\">Estamos en La Ciudadela, uno de los mercados de artesan\u00edas m\u00e1s importantes de M\u00e9xico. Ven a tomarte un caf\u00e9, un mezcal, o llevarte una pieza \u00fanica.<\/p>\n <div class=\"h-table\" id=\"hTable\"><\/div>\n <\/div>\n <div class=\"h-info-cards reveal-right\">\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"D\u00f3nde encontrarnos\" data-en=\"Where to find us\">D\u00f3nde encontrarnos<\/div>\n <div class=\"h-info-text\">Emilio Dond\u00e9 104, Pasillo 8 y Central<br>Colonia Centro, CDMX<br><br><a href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"Abrir en Google Maps \u2192\" data-en=\"Open in Google Maps \u2192\">Abrir en Google Maps \u2192<\/a><\/div>\n <\/div>\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"Degustaciones de mezcal\" data-en=\"Mezcal tastings\">Degustaciones de mezcal<\/div>\n <div class=\"h-info-text\" data-es=\"Ofrecemos degustaciones guiadas. Pregunta en tienda por disponibilidad y precios.\" data-en=\"We offer guided tastings. Ask in store for availability and prices.\">Ofrecemos degustaciones guiadas. Pregunta en tienda por disponibilidad y precios.<\/div>\n <\/div>\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"Caf\u00e9 de origen\" data-en=\"Single-origin coffee\">Caf\u00e9 de origen<\/div>\n <div class=\"h-info-text\" data-es=\"Selecci\u00f3n de caf\u00e9s de diferentes estados de M\u00e9xico. Prueba el Caf\u00e9 con Piquete \u2014 un cl\u00e1sico de la casa.\" data-en=\"Selection of coffees from different Mexican states. Try the Coffee with a Kick \u2014 a house classic.\">Selecci\u00f3n de caf\u00e9s de diferentes estados de M\u00e9xico. Prueba el Caf\u00e9 con Piquete \u2014 un cl\u00e1sico de la casa.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section\" id=\"visitanos\">\n <div class=\"visit-grid\">\n <div class=\"visit-card reveal-left\">\n <div class=\"kicker\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/div>\n <h2 data-es=\"Estamos listos para recibirte\" data-en=\"We're ready to welcome you\">Estamos listos para recibirte<\/h2>\n <p style=\"margin-top:13px;color:#f0e4cc;font-size:clamp(14px,1.5vw,16px);line-height:1.8;font-weight:400\" data-es=\"Encu\u00e9ntranos en Emilio Dond\u00e9 104, Pasillo 8 y Central, dentro del mercado de artesan\u00edas.\" data-en=\"Find us at Emilio Dond\u00e9 104, Aisle 8 and Central, inside the craft market.\">Encu\u00e9ntranos en Emilio Dond\u00e9 104, Pasillo 8 y Central, dentro del mercado de artesan\u00edas.<\/p>\n <div class=\"contact-lines\">\n <a class=\"contact-line\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-7.3 7-12a7 7 0 1 0-14 0c0 4.7 7 12 7 12Z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n <span>Emilio Dond\u00e9 104, Pasillo 8 y Central, Centro Hist\u00f3rico<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"tel:+525572025037\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6.4 6.4l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6A2 2 0 0 1 22 16.9Z\"\/><\/svg>\n <span>+52 55 7202 5037<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n <span>Facebook<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\n <span>Instagram @ocelotlcafe<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"visit-card reveal-right\">\n <div class=\"kicker\" data-es=\"Explora\" data-en=\"Explore\">Explora<\/div>\n <div class=\"cta-row\" style=\"flex-direction:column;gap:10px;margin-top:16px\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de mezcales\" data-en=\"Mezcal menu\">Carta de mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div class=\"footer-brand\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"54\" height=\"54\">\n <p data-es=\"Caf\u00e9, mezcal y artesan\u00edas mexicanas en La Ciudadela, CDMX.\" data-en=\"Mexican coffee, mezcal and crafts in La Ciudadela, CDMX.\">Caf\u00e9, mezcal y artesan\u00edas mexicanas en La Ciudadela, CDMX.<\/p>\n <div class=\"footer-social\">\n <a href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"footer-center\" id=\"footerCenter\">\n <img loading=\"lazy\" decoding=\"async\" class=\"footer-logo\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"68\" height=\"68\">\n <div class=\"footer-tagline\">Ocelotl \u00b7 CDMX<\/div>\n <\/div>\n <nav class=\"footer-nav\">\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a>\n <a href=\"#visitanos\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/a>\n <\/nav>\n <div class=\"footer-copy\">\u00a9 Ocelotl \u00b7 Artesan\u00edas y Caf\u00e9 Mexicano \u00b7 La Ciudadela \u00b7 CDMX \u00b7 <span id=\"footerYear\"><\/span><\/div>\n<\/footer>\n\n<\/div>\n\n\n<div class=\"video-modal\" id=\"videoModal\" onclick=\"if(event.target===this)closeVideo()\">\n <div class=\"video-pop\">\n <div class=\"video-header\">\n <span class=\"video-title\" id=\"videoTitle\">Ocelotl<\/span>\n <button class=\"video-close\" type=\"button\" onclick=\"closeVideo()\">\u2715<\/button>\n <\/div>\n <video id=\"videoPlayer\" controls playsinline><\/video>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n\"use strict\";\nvar DAYS_ES=[\"Lunes\",\"Martes\",\"Mi\u00e9rcoles\",\"Jueves\",\"Viernes\",\"S\u00e1bado\",\"Domingo\"];\nvar DAYS_EN=[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"];\nvar HOURS=[\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 5PM\"];\nvar jsDay=new Date().getDay();\nvar TODAY=jsDay===0?6:jsDay-1;\nvar LANG=\"es\";\n\nfunction renderHorarios(){\n var days=LANG===\"es\"?DAYS_ES:DAYS_EN;\n var today=LANG===\"es\"?\"Hoy\":\"Today\";\n var ht=document.getElementById(\"hTable\");\n if(ht)ht.innerHTML=days.map(function(d,i){\n var isT=i===TODAY;\n return'<div class=\"h-row'+(isT?\" today\":\"\")+'\"><span class=\"h-day\">'+d+'<\/span>'+(isT?'<span class=\"h-now\">'+today+'<\/span>':'')+'<span class=\"h-time\">'+HOURS[i]+'<\/span><\/div>';\n }).join(\"\");\n}\nrenderHorarios();\n\nfunction setLang(lang){\n LANG=lang;\n document.getElementById(\"btnEs\").classList.toggle(\"on\",lang===\"es\");\n document.getElementById(\"btnEn\").classList.toggle(\"on\",lang===\"en\");\n document.querySelectorAll(\"[data-es][data-en]\").forEach(function(el){\n var v=el.getAttribute(\"data-\"+lang);\n if(!v)return;\n if(v.indexOf(\"<\")>=0)el.innerHTML=v;else el.textContent=v;\n });\n renderHorarios();\n}\nwindow.setLang=setLang;\n\nfunction toggleDrawer(){\n var d=document.getElementById(\"drawer\"),h=document.getElementById(\"hbtn\");\n var open=d.classList.toggle(\"open\");\n h.classList.toggle(\"open\",open);\n document.body.style.overflow=open?\"hidden\":\"\";\n}\nfunction closeDrawer(){\n var d=document.getElementById(\"drawer\"),h=document.getElementById(\"hbtn\");\n if(d)d.classList.remove(\"open\");if(h)h.classList.remove(\"open\");\n document.body.style.overflow=\"\";\n}\nwindow.toggleDrawer=toggleDrawer;\nwindow.closeDrawer=closeDrawer;\nwindow.addEventListener(\"resize\",function(){if(window.innerWidth>1024)closeDrawer();});\n\nwindow.openVideo=function(src,title){\n var modal=document.getElementById(\"videoModal\"),player=document.getElementById(\"videoPlayer\"),titleEl=document.getElementById(\"videoTitle\");\n if(!modal||!player)return;\n if(titleEl)titleEl.textContent=title||\"Ocelotl\";\n player.pause();player.removeAttribute(\"src\");player.load();\n player.src=src;player.controls=true;player.playsInline=true;\n modal.classList.add(\"on\");document.body.style.overflow=\"hidden\";\n player.addEventListener(\"loadedmetadata\",function(){player.play().catch(function(){});},{once:true});\n};\nwindow.closeVideo=function(){\n var modal=document.getElementById(\"videoModal\"),player=document.getElementById(\"videoPlayer\");\n if(modal)modal.classList.remove(\"on\");\n if(player){player.pause();player.removeAttribute(\"src\");player.load();}\n document.body.style.overflow=\"\";\n};\n\ndocument.addEventListener(\"keydown\",function(e){if(e.key===\"Escape\"){closeDrawer();closeVideo();}});\n\nvar fy=document.getElementById(\"footerYear\");\nif(fy)fy.textContent=new Date().getFullYear();\n\n\/* Scroll reveal *\/\nif(window.IntersectionObserver){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(e.isIntersecting){e.target.classList.add(\"in\");io.unobserve(e.target);}\n });\n },{threshold:.08,rootMargin:\"0px 0px -20px 0px\"});\n document.querySelectorAll(\".reveal,.reveal-left,.reveal-right,.stagger\").forEach(function(el){io.observe(el);});\n\n var cards=document.querySelectorAll(\".dest-card\");\n cards.forEach(function(c,i){\n c.style.cssText+=\"opacity:0;transform:translateY(22px);transition:opacity .55s ease \"+(i*.08)+\"s,transform .55s ease \"+(i*.08)+\"s\";\n });\n var obs=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(e.isIntersecting){e.target.style.opacity=\"1\";e.target.style.transform=\"none\";obs.unobserve(e.target);}\n });\n },{threshold:.1});\n cards.forEach(function(c){obs.observe(c);});\n}else{\n document.querySelectorAll(\".reveal,.reveal-left,.reveal-right,.stagger\").forEach(function(el){el.classList.add(\"in\");});\n}\n\n\/* Hero parallax *\/\n(function(){\n var bg=document.getElementById(\"heroBg\");\n if(!bg)return;\n var ticking=false;\n window.addEventListener(\"scroll\",function(){\n if(!ticking){\n requestAnimationFrame(function(){\n bg.style.transform=\"scale(1.04) translateY(\"+(window.scrollY*.1)+\"px)\";\n ticking=false;\n });\n ticking=true;\n }\n },{passive:true});\n})();\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>Ocelotl \u2014 Caf\u00e9 \u00b7 Mezcal \u00b7 Artesan\u00edas \u00b7 La Ciudadela CDMX Ocelotl Men\u00fa Carta de Mezcales Mezcales Artesan\u00edas Vis\u00edtanos ES EN Men\u00fa Carta de Mezcales Mezcales Artesan\u00edas Vis\u00edtanos Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-1262","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1262"}],"version-history":[{"count":120,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262\/revisions"}],"predecessor-version":[{"id":2783,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262\/revisions\/2783"}],"wp:attachment":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nOcelotl \u2014 Caf\u00e9 \u00b7 Mezcal \u00b7 Artesan\u00edas \u00b7 La Ciudadela CDMX<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\nhtml{scroll-behavior:smooth;overflow-x:hidden}\nbody{overflow-x:hidden}\nbutton{font:inherit;cursor:pointer;background:none;border:none;color:inherit}\na{color:inherit;text-decoration:none}\nimg{display:block;max-width:100%}\nul{list-style:none}\n@font-face{font-family:\"Type Machine\";src:url(\".\/Type%20Machine.ttf\") format(\"truetype\");font-display:swap}\n\n:root{\n --bg:#120b06;--bg1:#1a1008;\n --text:#fff2df;--muted:#ead7b8;--soft:#cbb28d;\n --line:rgba(255,242,223,.18);--line2:rgba(210,132,66,.42);\n --acc:#a04010;--acc2:#d06030;--acc3:#e88040;--acc-rgb:160,64,16;\n --gold:#b08040;--gold2:#d4a860;--gold3:#f0c878;\n --shine:rgba(255,255,255,.14);--glass:rgba(31,18,9,.82);\n --ui:\"Poppins\",system-ui,sans-serif;\n --title:\"Type Machine\",\"Georgia\",\"Times New Roman\",serif;\n --nav:110px;\n --px:clamp(18px,5.5vw,80px);\n --sec:clamp(44px,7vw,120px);\n --ease:cubic-bezier(.22,1,.36,1);\n font-family:var(--ui);color:var(--text);background:var(--bg);\n -webkit-font-smoothing:antialiased;overflow-x:hidden;\n}\n\n\/* \u2500\u2500\u2500 APP BG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.app-bg{position:fixed;inset:0;z-index:0;pointer-events:none;\n background:\n radial-gradient(ellipse 55% 38% at 3% 0%,rgba(160,64,16,.16),transparent 58%),\n radial-gradient(ellipse 45% 32% at 98% 96%,rgba(176,128,64,.12),transparent 60%),\n repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 56px),\n repeating-linear-gradient(0deg,rgba(255,255,255,.01) 0 1px,transparent 1px 56px)}\n\n\/* \u2500\u2500\u2500 REVEAL ANIMATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal.in{opacity:1;transform:none}\n.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal-left.in{opacity:1;transform:none}\n.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}\n.reveal-right.in{opacity:1;transform:none}\n.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)}\n.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:.04s}\n.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:.10s}\n.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:.16s}\n.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:.22s}\n.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:.28s}\n.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:.34s}\n@media(prefers-reduced-motion:reduce){.reveal,.reveal-left,.reveal-right,.stagger>*{opacity:1!important;transform:none!important}}\n\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#ocelotl-home{\n --nav:110px;--px:clamp(18px,5vw,72px);\n --text:#f0e6d3;--muted:#ddd0ba;--line2:rgba(160,100,40,.32);\n --amber2:#d4a040;\n --ui:\"Poppins\",system-ui,sans-serif;\n --ease:cubic-bezier(.22,1,.36,1)\n}\n#ocelotl-home .nav{\n position:fixed!important;top:0!important;left:0!important;right:0!important;\n width:100vw;max-width:100vw;z-index:99999!important;\n height:var(--nav)!important;\n display:flex!important;align-items:center;justify-content:space-between;gap:20px;\n padding:16px var(--px);\n background:rgba(8,5,2,.9)!important;\n backdrop-filter:blur(28px) saturate(160%)!important;\n -webkit-backdrop-filter:blur(28px) saturate(160%)!important;\n border-bottom:1px solid rgba(160,100,40,.2)!important;\n box-shadow:0 2px 24px rgba(0,0,0,.3)!important;\n font-family:var(--ui)\n}\n#ocelotl-home .brand{display:flex;align-items:center;gap:13px;line-height:1;flex-shrink:0;text-decoration:none}\n#ocelotl-home .brand img{width:76px;height:76px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.4));transition:transform .3s var(--ease)}\n#ocelotl-home .brand:hover img{transform:scale(1.04)}\n#ocelotl-home .brand strong{font-size:20px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}\n#ocelotl-home .nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,36px);list-style:none}\n#ocelotl-home .nav-links a{\n color:var(--muted)!important;font-size:13px;font-weight:700;\n letter-spacing:.16em;text-transform:uppercase;position:relative;\n transition:color .2s;text-decoration:none;white-space:nowrap\n}\n#ocelotl-home .nav-links a::after{content:\"\";position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--amber2),#d4a040);transition:width .3s var(--ease)}\n#ocelotl-home .nav-links a:hover,#ocelotl-home .nav-links a.active{color:var(--amber2)!important}\n#ocelotl-home .nav-links a:hover::after,#ocelotl-home .nav-links a.active::after{width:100%}\n#ocelotl-home .nav-r{display:flex;align-items:center;gap:10px;flex-shrink:0}\n#ocelotl-home .lang-toggle{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.04)}\n#ocelotl-home .lang-toggle button{min-height:40px;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--muted);padding:9px 16px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transition:.2s var(--ease);font-family:var(--ui)}\n#ocelotl-home .lang-toggle button.on{background:linear-gradient(135deg,#6b2e0c,#3d1606)!important;color:#f0e6d3!important;box-shadow:0 2px 6px rgba(0,0,0,.2)}\n#ocelotl-home .hamburger{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;border:1px solid var(--line2)!important;background:rgba(255,255,255,.04)!important;transition:all .25s var(--ease);flex-shrink:0;padding:0}\n#ocelotl-home .hamburger:hover{border-color:var(--amber2)!important;background:rgba(160,100,40,.15)!important}\n#ocelotl-home .hamburger-icon{width:24px;height:24px;position:relative;display:flex;align-items:center;justify-content:center}\n#ocelotl-home .hamburger-icon span{position:absolute;width:24px;height:2px;background-color:var(--text);border-radius:2px;transition:all .3s ease-in-out}\n#ocelotl-home .hamburger-icon span:nth-child(1){transform:translateY(-8px)}\n#ocelotl-home .hamburger-icon span:nth-child(3){transform:translateY(8px)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(1){transform:translateY(0) rotate(45deg)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(2){opacity:0;transform:scaleX(0)}\n#ocelotl-home .hamburger.open .hamburger-icon span:nth-child(3){transform:translateY(0) rotate(-45deg)}\n#ocelotl-home .drawer{\n position:fixed;inset:0;z-index:99998;\n display:flex;flex-direction:column;\n background:rgba(8,5,2,.98);\n backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);\n padding:calc(var(--nav) + 32px) var(--px) 40px;\n transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.4,1.1);\n overflow-y:auto\n}\n#ocelotl-home .drawer.open{transform:translateX(0)}\n#ocelotl-home .drawer-links a{\n display:flex;align-items:center;justify-content:space-between;\n padding:20px 0;border-bottom:1px solid rgba(240,230,211,.11);\n color:var(--text);font-size:clamp(20px,6vw,26px);\n font-family:var(--title);font-weight:900;text-decoration:none;\n opacity:0;transform:translateX(20px);\n transition:opacity .3s ease,transform .3s ease,color .2s,padding-left .2s\n}\n#ocelotl-home .drawer.open .drawer-links a{opacity:1;transform:translateX(0)}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(1){transition-delay:.05s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(2){transition-delay:.1s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(3){transition-delay:.15s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(4){transition-delay:.2s}\n#ocelotl-home .drawer.open .drawer-links a:nth-child(5){transition-delay:.25s}\n#ocelotl-home .drawer-links a:hover{color:var(--amber2);padding-left:10px}\n#ocelotl-home .drawer-links a svg{width:22px;height:22px;stroke:var(--amber2);fill:none;stroke-width:2;opacity:.7}\n#ocelotl-home .drawer-links a:hover svg{transform:translateX(5px)}\n\n\/* NAV responsive *\/\n@media(max-width:1024px){\n #ocelotl-home{--nav:90px}\n #ocelotl-home .nav-links{display:none!important}\n #ocelotl-home .hamburger{display:flex!important}\n #ocelotl-home .brand img{width:62px;height:62px}\n #ocelotl-home .brand strong{font-size:17px}\n}\n@media(max-width:620px){\n #ocelotl-home{--nav:64px;--px:18px}\n #ocelotl-home .brand img{width:44px;height:44px}\n #ocelotl-home .brand strong{font-size:13px;letter-spacing:.12em}\n #ocelotl-home .lang-toggle button{min-height:34px;padding:6px 12px;font-size:10px}\n #ocelotl-home .hamburger{width:44px;height:44px}\n #ocelotl-home .hamburger-icon{width:20px;height:20px}\n #ocelotl-home .hamburger-icon span{width:20px}\n #ocelotl-home .hamburger-icon span:nth-child(1){transform:translateY(-7px)}\n #ocelotl-home .hamburger-icon span:nth-child(3){transform:translateY(7px)}\n}\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero{\n position:relative;min-height:100svh;\n display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden\n}\n.hero-media{position:absolute;inset:0;z-index:0}\n.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.86) saturate(.94) contrast(1.05)}\n.hero-overlay{\n position:absolute;inset:0;z-index:1;\n background:\n linear-gradient(108deg,rgba(10,6,3,.72) 0%,rgba(10,6,3,.3) 44%,rgba(10,6,3,.1) 100%),\n linear-gradient(0deg,rgba(10,6,3,.88) 0%,rgba(10,6,3,.0) 55%),\n radial-gradient(ellipse 55% 50% at 0% 98%,rgba(160,64,16,.22),transparent 55%)\n}\n.hero-content{\n position:relative;z-index:2;\n padding:0 var(--px) clamp(48px,7vw,100px);\n display:grid;\n \/* Logo col fijo, texto col con min-width:0 para que nunca desborde *\/\n grid-template-columns:minmax(0,300px) minmax(0,1fr);\n gap:clamp(24px,4vw,64px);\n align-items:center;\n margin-top:var(--nav);\n \/* Contener cualquier overflow dentro del hero *\/\n overflow:hidden\n}\n\/* LA CLAVE: la columna de texto DEBE tener min-width:0 para respetar el grid *\/\n.hero-content > *{min-width:0}\n.hero-logo-col{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.hero-logo-wrap{\n width:min(260px,38vw);aspect-ratio:1;position:relative;\n filter:drop-shadow(0 24px 56px rgba(0,0,0,.8))\n}\n.hero-logo-wrap::before{\n content:\"\";position:absolute;inset:14%;border-radius:50%;\n background:radial-gradient(circle,rgba(160,64,16,.22),transparent 66%);\n filter:blur(20px);animation:logoglw 4s ease-in-out infinite\n}\n@keyframes logoglw{0%,100%{opacity:.4}50%{opacity:.9}}\n.hero-logo-wrap img{\n width:100%;height:100%;object-fit:contain;position:relative;z-index:1;\n filter:brightness(0) invert(1);opacity:.96;transition:transform .5s var(--ease)\n}\n.hero-logo-wrap:hover img{transform:scale(1.025)}\n.hero-kicker{\n display:inline-flex;align-items:center;gap:10px;\n font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;\n color:var(--gold2);margin-bottom:16px;\n \/* nunca desborda *\/\n max-width:100%;overflow:hidden\n}\n.hero-kicker::before{content:\"\";width:30px;height:1.5px;flex-shrink:0;background:linear-gradient(90deg,var(--gold2),transparent)}\n.hero-title{\n font-family:var(--title);\n \/* Reducido: de 8vw a 5.5vw \u2014 nunca se sale en desktop *\/\n font-size:clamp(42px,5.5vw,96px);\n line-height:.9;font-weight:700;color:#fff8ee;\n letter-spacing:-.02em;\n \/* Asegura que el texto rompa l\u00ednea antes de desbordar *\/\n word-break:break-word;\n overflow-wrap:break-word;\n max-width:100%;\n text-shadow:0 4px 0 rgba(255,255,255,.06),0 28px 64px rgba(0,0,0,.65)\n}\n.hero-title em{\n display:block;font-style:italic;color:var(--gold3);\n font-size:clamp(28px,3.8vw,64px);font-weight:400;margin-top:8px;\n word-break:break-word;overflow-wrap:break-word\n}\n.hero-copy{\n margin-top:16px;\n font-size:clamp(14px,1.5vw,17px);line-height:1.78;\n color:rgba(255,242,223,.95);max-width:100%;font-weight:400;\n word-break:break-word\n}\n.hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}\n\n\/* Hero tablet \u2014 stack vertical *\/\n@media(max-width:860px){\n .hero-content{\n grid-template-columns:1fr;\n gap:0;\n padding-bottom:clamp(40px,6vw,72px);\n align-items:flex-end;\n overflow:hidden\n }\n .hero-logo-col{justify-content:flex-start;margin-bottom:18px}\n .hero-logo-wrap{width:min(140px,28vw)}\n .hero-title{font-size:clamp(40px,8.5vw,72px)}\n .hero-title em{font-size:clamp(28px,6vw,54px)}\n}\n@media(max-width:500px){\n .hero-logo-wrap{width:min(110px,26vw)}\n .hero-title{font-size:clamp(36px,9.5vw,56px)}\n .hero-title em{font-size:clamp(26px,7vw,42px)}\n .hero-btns{gap:8px}\n .hero-kicker{font-size:10px;letter-spacing:.18em}\n}\n\n\/* \u2500\u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.btn{\n display:inline-flex;align-items:center;gap:8px;\n border-radius:999px;font-size:12px;font-weight:800;\n letter-spacing:.13em;text-transform:uppercase;\n transition:all .26s var(--ease);cursor:pointer;white-space:nowrap\n}\n.btn-prim{\n padding:14px 28px;\n background:linear-gradient(135deg,var(--acc2),var(--acc));\n color:#fff;border:none;\n box-shadow:0 0 0 1px rgba(var(--acc-rgb),.42),0 8px 28px rgba(var(--acc-rgb),.3),inset 0 1px 0 rgba(255,255,255,.14)\n}\n.btn-prim:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.58),0 14px 36px rgba(var(--acc-rgb),.4)}\n.btn-ghost{\n padding:13px 24px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(180,110,50,.42);color:var(--gold2)\n}\n.btn-ghost:hover{background:rgba(var(--acc-rgb),.14);border-color:rgba(180,110,50,.68);transform:translateY(-2px);color:var(--gold3)}\n@media(max-width:500px){\n .btn{font-size:11px}\n .btn-prim{padding:12px 22px}\n .btn-ghost{padding:11px 20px}\n}\n\n\/* \u2500\u2500\u2500 LOC STRIP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.loc-strip{\n position:relative;z-index:1;\n display:flex;align-items:center;justify-content:center;\n gap:clamp(14px,3vw,48px);\n padding:clamp(14px,2vw,20px) var(--px);\n background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.07),rgba(var(--acc-rgb),.16));\n border-top:1px solid rgba(180,110,50,.24);\n border-bottom:1px solid rgba(180,110,50,.24);\n flex-wrap:wrap;\n row-gap:10px\n}\n.loc-item{\n display:flex;align-items:center;gap:8px;\n font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold2)\n}\n.loc-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}\n.loc-sep{width:4px;height:4px;border-radius:50%;background:rgba(180,110,50,.4)}\n@media(max-width:600px){\n .loc-sep{display:none}\n .loc-strip{justify-content:flex-start;gap:12px}\n .loc-item{font-size:10px}\n}\n\n\/* \u2500\u2500\u2500 LAYOUT BASE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.page{position:relative;z-index:1;overflow-x:hidden;max-width:100vw}\n.section{padding:var(--sec) var(--px);position:relative}\n.divider{height:1px;background:var(--line);margin:0 var(--px)}\n.kicker{\n display:flex;align-items:center;gap:12px;\n font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;\n color:var(--gold2);margin-bottom:16px\n}\n.kicker::before{content:\"\";width:32px;height:1.5px;background:linear-gradient(90deg,var(--gold2),transparent)}\n.kicker.center{justify-content:center}\n.kicker.center::before{display:none}\nh2.display{font-family:var(--title);font-size:clamp(34px,4.5vw,68px);font-weight:700;line-height:.92;color:#fff8ee;word-break:break-word;overflow-wrap:break-word}\nh2.display em{font-style:italic;color:var(--gold3)}\n.lead-text{margin-top:14px;color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.84;font-weight:600;max-width:680px}\n.mini-label{color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;display:block}\n\n\/* \u2500\u2500\u2500 REELS SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.reels-layout{\n display:grid;\n grid-template-columns:1fr minmax(260px,320px);\n gap:clamp(28px,4.5vw,70px);\n align-items:start\n}\n@media(max-width:900px){\n .reels-layout{grid-template-columns:1fr}\n}\n\n\/* Social aside *\/\n.social-aside{\n border:1px solid var(--line);border-radius:24px;\n background:rgba(35,22,12,.84);backdrop-filter:blur(26px);\n padding:clamp(20px,3vw,30px);\n box-shadow:0 2px 0 var(--shine) inset\n}\n@media(max-width:900px){\n .social-aside{max-width:480px}\n}\n.map-embed-wrap{overflow:hidden;border-radius:14px;border:1px solid rgba(180,110,50,.3);box-shadow:0 8px 26px rgba(0,0,0,.38)}\n.map-embed-wrap iframe{display:block;width:100%;height:200px;border:0;filter:saturate(.72) contrast(1.1) brightness(.84) hue-rotate(8deg)}\n.map-btn{\n display:flex;align-items:center;justify-content:center;gap:10px;\n margin-top:12px;width:100%;min-height:48px;border-radius:13px;\n border:1px solid rgba(180,110,50,.4);background:rgba(180,110,50,.08);\n color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;\n transition:all .26s var(--ease);text-decoration:none\n}\n.map-btn:hover{background:rgba(180,110,50,.18);transform:translateY(-2px);color:var(--gold3)}\n.map-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}\n.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}\n\n\/* Reel grid *\/\n.reel-grid{\n display:grid;\n grid-template-columns:repeat(5,minmax(0,1fr));\n gap:12px;\n margin-top:28px;\n overflow-x:auto;\n scroll-snap-type:x mandatory;\n padding-bottom:10px;\n scrollbar-width:thin;scrollbar-color:rgba(180,110,50,.3) transparent;\n -webkit-overflow-scrolling:touch\n}\n.reel-grid::-webkit-scrollbar{height:3px}\n.reel-grid::-webkit-scrollbar-thumb{background:rgba(180,110,50,.3);border-radius:2px}\n\n\/* Tablet: mostrar 3 reels visibles, scroll el resto *\/\n@media(max-width:900px){\n .reel-grid{\n grid-template-columns:repeat(5,minmax(140px,1fr));\n \/* No forced columns \u2014 scroll natural *\/\n }\n}\n\/* Mobile: 2.5 reels visibles para dar hint de scroll *\/\n@media(max-width:600px){\n .reel-grid{\n grid-template-columns:repeat(5,minmax(130px,1fr));\n }\n}\n\n.reel{\n scroll-snap-align:start;position:relative;overflow:hidden;\n aspect-ratio:9\/14;border-radius:18px;\n border:1px solid rgba(242,232,216,.1);\n background:#100804;cursor:pointer;text-align:left;\n transition:all .32s var(--ease);\n box-shadow:0 18px 44px rgba(0,0,0,.34)\n}\n.reel:hover{transform:translateY(-7px) scale(1.02);border-color:rgba(180,110,50,.38)}\n.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.9);transition:transform .55s var(--ease)}\n.reel:hover video{transform:scale(1.04)}\n.reel-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.86),transparent 55%,rgba(8,5,2,.16))}\n.reel-play{\n position:absolute;left:12px;top:12px;z-index:3;\n width:36px;height:36px;border-radius:50%;\n border:1.5px solid rgba(255,255,255,.3);\n background:rgba(8,5,2,.55);backdrop-filter:blur(10px);\n display:flex;align-items:center;justify-content:center;transition:all .22s\n}\n.reel:hover .reel-play{background:rgba(var(--acc-rgb),.78);border-color:var(--gold2);transform:scale(1.06)}\n.reel-play svg{width:12px;height:12px;fill:#fff8e6;margin-left:2px}\n.reel-label{\n position:absolute;left:12px;right:12px;bottom:12px;z-index:3;\n color:#f4eadb;font-size:9px;font-weight:800;letter-spacing:.14em;\n text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.65)\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DEST CARDS \u2014 redise\u00f1o mobile-first total\n Mobile: card horizontal compacta (texto izq, imagen der)\n Desktop >860px: grid 2 col, cards verticales con imagen\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.dest-intro{max-width:800px;margin-bottom:clamp(24px,4vw,48px)}\n\n.dest-grid{\n display:grid;\n grid-template-columns:1fr;\n gap:10px\n}\n@media(min-width:861px){\n .dest-grid{\n grid-template-columns:1fr 1fr;\n gap:4px\n }\n}\n\n\/* \u2500\u2500 MOBILE: card horizontal \u2500\u2500 *\/\n.dest-card{\n position:relative;\n display:grid;\n grid-template-columns:1fr 140px;\n min-height:140px;\n border-radius:18px;\n overflow:hidden;\n text-decoration:none;\n cursor:pointer;\n -webkit-tap-highlight-color:transparent;\n background:#1a0f07;\n border:1px solid rgba(180,110,50,.2);\n transition:border-color .3s var(--ease)\n}\n.dest-card:hover{border-color:rgba(180,110,50,.45)}\n.dest-card.large{min-height:160px}\n\n\/* imagen \u2014 columna derecha en mobile *\/\n.dest-card-img{\n grid-column:2;grid-row:1;\n width:100%;height:100%;\n object-fit:cover;\n filter:saturate(.88) brightness(.78);\n transition:transform .6s var(--ease),filter .4s\n}\n.dest-card:hover .dest-card-img{transform:scale(1.06);filter:saturate(1) brightness(.88)}\n\n\/* overlay solo en la imagen *\/\n.dest-card::after{\n content:\"\";\n position:absolute;\n top:0;right:0;bottom:0;\n width:160px;\n z-index:1;\n background:linear-gradient(270deg,rgba(6,3,1,.0) 0%,rgba(6,3,1,.85) 100%)\n}\n\n\/* glow \u2014 oculto en mobile *\/\n.dest-glow{display:none}\n\n\/* body \u2014 columna izquierda *\/\n.dest-body{\n grid-column:1;grid-row:1;\n position:relative;z-index:2;\n padding:16px 14px 16px 18px;\n display:flex;flex-direction:column;\n justify-content:center;\n gap:4px;\n background:linear-gradient(90deg,rgba(12,6,2,.96) 75%,rgba(12,6,2,.0))\n}\n\n.dest-tag{\n display:inline-flex;align-items:center;\n font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;\n color:var(--gold2);\n border:1px solid rgba(180,110,50,.35);\n background:rgba(10,5,0,.6);\n border-radius:999px;padding:4px 10px;\n align-self:flex-start;\n white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis\n}\n.dest-title{\n font-family:var(--title);\n font-size:clamp(22px,5.5vw,32px);\n line-height:.95;font-weight:700;color:#fff7e6;\n text-shadow:0 1px 8px rgba(0,0,0,.6);\n word-break:break-word;\n margin-top:4px\n}\n.dest-desc{\n font-size:12px;line-height:1.55;\n color:rgba(240,225,200,.82);font-weight:400;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;\n margin-top:4px\n}\n.dest-chips{\n display:flex;flex-wrap:wrap;gap:3px;\n margin-top:5px\n}\n.dest-chip{\n font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;\n color:var(--gold2);background:rgba(10,5,0,.55);\n border:1px solid rgba(180,110,50,.28);border-radius:999px;padding:3px 8px;\n white-space:nowrap\n}\n.dest-cta{\n display:inline-flex;align-items:center;gap:6px;\n margin-top:8px;\n font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;\n color:var(--gold2);border:1px solid rgba(180,110,50,.35);\n background:rgba(10,5,0,.55);border-radius:999px;padding:6px 14px;\n align-self:flex-start;\n transition:.22s var(--ease)\n}\n.dest-cta svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0;transition:transform .22s}\n.dest-card:hover .dest-cta{background:rgba(var(--acc-rgb),.32);border-color:rgba(180,110,50,.65);color:#fff}\n.dest-card:hover .dest-cta svg{transform:translateX(3px)}\n\n\/* \u2500\u2500 DESKTOP: vuelve a card vertical con imagen de fondo \u2500\u2500 *\/\n@media(min-width:861px){\n .dest-card{\n display:flex;flex-direction:column;justify-content:flex-end;\n grid-template-columns:unset;\n min-height:unset;\n height:clamp(400px,38vw,540px);\n border-radius:0;border:none;background:transparent\n }\n .dest-card.large{height:clamp(460px,42vw,580px)}\n .dest-card:hover{border-color:transparent}\n\n .dest-card-img{\n grid-column:unset;grid-row:unset;\n position:absolute;inset:0;width:100%;height:100%\n }\n .dest-card::after{\n width:unset;\n inset:0;\n background:linear-gradient(\n 0deg,\n rgba(6,3,1,.92) 0%,\n rgba(6,3,1,.55) 38%,\n rgba(6,3,1,.12) 68%,\n rgba(6,3,1,.0) 100%\n )\n }\n .dest-glow{\n display:block;\n position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s\n }\n .dest-card:hover .dest-glow{opacity:1}\n .dest-card[data-g=\"a\"] .dest-glow{background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(160,64,16,.25),transparent 60%)}\n .dest-card[data-g=\"b\"] .dest-glow{background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(176,128,64,.22),transparent 60%)}\n\n .dest-body{\n grid-column:unset;grid-row:unset;\n position:relative;z-index:2;\n padding:clamp(20px,2.5vw,36px);\n background:none;\n justify-content:flex-end;\n gap:0\n }\n .dest-tag{font-size:9px;padding:5px 12px;margin-bottom:6px}\n .dest-title{font-size:clamp(28px,3.2vw,52px);margin-top:0}\n .dest-desc{font-size:14px;-webkit-line-clamp:3;margin-top:8px}\n .dest-chips{margin-top:8px;gap:4px}\n .dest-chip{font-size:9px;padding:4px 10px}\n .dest-cta{font-size:10px;padding:8px 18px;margin-top:12px}\n .dest-cta svg{width:10px;height:10px}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ARTESAN\u00cdAS \u2014 mobile first\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.arts-intro{\n display:grid;grid-template-columns:1fr;\n gap:24px;margin-bottom:clamp(24px,4vw,48px)\n}\n@media(min-width:761px){\n .arts-intro{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}\n}\n.arts-intro-img{\n position:relative;overflow:hidden;border-radius:18px;\n border:1px solid rgba(242,232,216,.14);aspect-ratio:4\/3;\n box-shadow:0 16px 40px rgba(0,0,0,.3)\n}\n.arts-intro-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1) brightness(.88)}\n.arts-intro-img::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.2),transparent 55%)}\n.arts-grid{display:grid;grid-template-columns:1fr;gap:10px}\n@media(min-width:561px){.arts-grid{grid-template-columns:repeat(2,1fr);gap:13px}}\n@media(min-width:961px){.arts-grid{grid-template-columns:repeat(3,1fr);gap:16px}}\n.art-card{\n border-radius:16px;border:1px solid rgba(242,232,216,.1);background:#1a1008;\n overflow:hidden;cursor:pointer;display:flex;flex-direction:row;text-decoration:none;\n min-height:110px;transition:border-color .3s var(--ease),transform .3s var(--ease);\n box-shadow:0 8px 24px rgba(0,0,0,.24)\n}\n.art-card:hover{border-color:rgba(180,110,50,.36);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.36)}\n.art-card-thumb{position:relative;flex-shrink:0;width:110px;overflow:hidden}\n.art-card-thumb img{\n position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;filter:saturate(.88) brightness(.82);transition:transform .6s var(--ease)\n}\n.art-card:hover .art-card-thumb img{transform:scale(1.08)}\n.art-card-thumb::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(90deg,transparent 55%,rgba(22,13,4,.95))\n}\n.art-body{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:3px}\n.art-tag{color:var(--gold2);font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;display:block}\n.art-title{\n font-family:var(--title);font-size:clamp(17px,4vw,21px);\n font-weight:700;color:var(--text);line-height:1.05;display:block;word-break:break-word\n}\n.art-desc{\n margin-top:3px;color:rgba(230,212,186,.78);font-size:11px;line-height:1.5;\n font-weight:400;display:block;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden\n}\n.art-cta{\n display:inline-flex;align-items:center;gap:4px;margin-top:8px;\n border:1px solid rgba(180,110,50,.34);border-radius:999px;\n background:rgba(180,110,50,.1);color:#ffe8c0;\n padding:4px 11px;font-size:8px;font-weight:900;\n letter-spacing:.1em;text-transform:uppercase;transition:all .22s;align-self:flex-start\n}\n.art-card:hover .art-cta{background:rgba(180,110,50,.24);border-color:rgba(180,110,50,.58)}\n@media(min-width:561px){\n .art-card{flex-direction:column;min-height:300px;position:relative}\n .art-card-thumb{width:100%;height:190px;flex-shrink:unset}\n .art-card-thumb img{position:absolute}\n .art-card-thumb::after{background:linear-gradient(0deg,rgba(10,6,2,.9) 0%,rgba(10,6,2,.15) 55%,transparent 75%)}\n .art-body{position:absolute;inset:auto 0 0 0;padding:14px 18px 18px;background:none}\n .art-title{font-size:clamp(19px,2vw,25px)}\n .art-desc{-webkit-line-clamp:3;font-size:12px}\n}\n@media(min-width:961px){.art-card-thumb{height:210px}}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SPLIT (Origen) \u2014 mobile first\n Mobile: 1 col, foto arriba texto abajo\n Desktop: 2 col lado a lado\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.split{\n display:grid;\n grid-template-columns:1fr;\n gap:20px\n}\n@media(min-width:761px){\n .split{\n grid-template-columns:1fr 1fr;\n gap:clamp(24px,5vw,72px);\n align-items:center\n }\n}\n\n.photo-frame{\n position:relative;overflow:hidden;border-radius:20px;\n border:1px solid rgba(242,232,216,.1);\n aspect-ratio:16\/9; \/* m\u00e1s ancho en mobile \u2014 no tan alto *\/\n box-shadow:0 20px 48px rgba(0,0,0,.36);isolation:isolate;\n transition:border-color .4s\n}\n@media(min-width:761px){\n .photo-frame{aspect-ratio:4\/3}\n}\n.photo-frame:hover{border-color:rgba(180,110,50,.24)}\n.photo-frame img{\n width:100%;height:100%;object-fit:cover;\n filter:saturate(.88) brightness(.85);transition:transform .7s var(--ease)\n}\n.photo-frame:hover img{transform:scale(1.03)}\n.photo-frame::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.45),transparent 55%)}\n\n.text-panel{\n border:1px solid rgba(242,232,216,.1);border-radius:20px;\n background:rgba(30,18,8,.88);backdrop-filter:blur(20px);\n padding:clamp(22px,4vw,40px);\n box-shadow:0 2px 0 var(--shine) inset,0 18px 44px rgba(0,0,0,.24);\n transition:border-color .3s\n}\n.text-panel:hover{border-color:rgba(180,110,50,.22)}\n.text-panel h3{\n font-family:var(--title);\n font-size:clamp(28px,5vw,52px);\n line-height:.96;font-weight:700;color:var(--gold3);margin-top:10px;\n word-break:break-word\n}\n.text-panel p{\n margin-top:14px;color:#f0dcc0;\n font-size:clamp(14px,1.5vw,16px);line-height:1.82;font-weight:400\n}\n\n\/* \u2500\u2500\u2500 REVIEWS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n@media(max-width:900px){.review-grid{grid-template-columns:repeat(2,1fr);gap:14px}}\n@media(max-width:500px){.review-grid{grid-template-columns:1fr;gap:12px}}\n\n.review{\n position:relative;overflow:hidden;\n border:1px solid rgba(255,242,223,.2);border-radius:22px;\n background:rgba(40,24,12,.92);padding:clamp(18px,2.5vw,26px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 48px rgba(0,0,0,.35);\n transition:all .3s var(--ease)\n}\n.review::before{content:\"\";position:absolute;inset:auto 18px 0 18px;height:2px;background:linear-gradient(90deg,transparent,var(--gold3),var(--acc2),transparent);opacity:.5}\n.review:hover{transform:translateY(-5px);border-color:rgba(240,200,120,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 60px rgba(0,0,0,.4)}\n.review-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}\n.review-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,rgba(240,200,120,.3),rgba(160,64,16,.4));border:1px solid rgba(255,242,223,.2);color:#fff7e6;font-size:15px;font-weight:900}\n.review-name{display:block;color:#fff8ee;font-size:14px;font-weight:800;line-height:1.2}\n.review-meta{display:block;margin-top:2px;color:rgba(212,180,140,.65);font-size:11px;font-weight:600;letter-spacing:.06em}\n.review p{color:#f0e4cc;font-size:clamp(13px,1.3vw,14px);line-height:1.7;font-weight:400}\n.review-quote{font-family:var(--title);font-size:34px;line-height:1;color:rgba(240,200,120,.3);margin-bottom:4px}\n.stars{display:flex;gap:3px;margin-bottom:8px}\n.stars span{color:#ffb22c;font-size:15px}\n.review-source{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,242,223,.14);color:rgba(240,200,120,.7);background:rgba(255,255,255,.05);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}\n\n\/* \u2500\u2500\u2500 HORARIOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.horarios-section{\n padding:var(--sec) var(--px);\n background:linear-gradient(135deg,rgba(var(--acc-rgb),.07),rgba(var(--acc-rgb),.02));\n border-top:1px solid var(--line);border-bottom:1px solid var(--line)\n}\n.horarios-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:start}\n@media(max-width:860px){.horarios-inner{grid-template-columns:1fr;gap:40px}}\n\n.sec-kicker{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}\n.sec-kicker::before{content:\"\";width:32px;height:1.5px;background:linear-gradient(90deg,var(--gold2),transparent)}\n.sec-title{font-family:var(--title);font-size:clamp(34px,4.8vw,72px);line-height:.9;font-weight:700;color:#fff7e8;word-break:break-word;overflow-wrap:break-word}\n.sec-title em{font-style:italic;color:var(--gold3)}\n.sec-lead{margin-top:14px;color:var(--muted);font-size:clamp(14px,1.5vw,17px);line-height:1.82;font-weight:500;max-width:640px}\n\n.h-table{margin-top:30px}\n.h-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(180,110,50,.1);gap:14px}\n.h-row:last-child{border-bottom:none}\n.h-day{font-family:var(--title);font-size:clamp(14px,1.8vw,20px);font-weight:700;color:rgba(242,232,216,.55);letter-spacing:.04em;min-width:120px}\n.h-row.today .h-day{color:var(--gold2)}\n.h-time{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(210,190,160,.55)}\n.h-row.today .h-time{color:var(--muted)}\n.h-now{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;border-radius:999px;padding:4px 10px;box-shadow:0 2px 8px rgba(var(--acc-rgb),.38);flex-shrink:0}\n\n.h-info-cards{display:flex;flex-direction:column;gap:16px;padding-top:8px}\n.h-info-card{padding:20px 22px;border:1px solid rgba(180,110,50,.2);border-radius:16px;background:rgba(var(--acc-rgb),.07)}\n.h-info-title{font-family:var(--title);font-size:18px;font-weight:700;color:var(--gold2);margin-bottom:8px}\n.h-info-text{font-size:14px;line-height:1.72;font-weight:400;color:rgba(212,196,168,.78)}\n.h-info-text a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px;opacity:.88}\n\n\/* \u2500\u2500\u2500 VIS\u00cdTANOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.visit-grid{\n display:grid;\n grid-template-columns:1fr minmax(260px,360px);\n gap:20px;align-items:stretch\n}\n@media(max-width:860px){.visit-grid{grid-template-columns:1fr;gap:16px}}\n\n.visit-card{\n border:1px solid var(--line);border-radius:22px;\n background:rgba(16,10,5,.82);backdrop-filter:blur(24px);\n padding:clamp(24px,3.5vw,40px);transition:all .3s\n}\n.visit-card:hover{border-color:rgba(180,110,50,.26);transform:translateY(-2px)}\n.visit-card h2{font-family:var(--title);font-size:clamp(28px,4vw,54px);line-height:.94;margin-bottom:12px;color:var(--text);font-weight:700}\n.contact-lines{display:grid;gap:12px;margin-top:20px}\n.contact-line{display:flex;align-items:flex-start;gap:13px;color:rgba(240,226,208,.86);font-size:clamp(13px,1.4vw,15px);line-height:1.6;transition:all .22s;text-decoration:none}\na.contact-line:hover{color:var(--gold2);transform:translateX(5px)}\n.contact-line svg{width:18px;height:18px;stroke:var(--gold2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}\n.cta-row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}\n\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.footer{\n padding:clamp(44px,6vw,72px) var(--px) clamp(28px,4vw,48px);\n display:grid;grid-template-columns:1fr auto 1fr;\n align-items:start;gap:40px;\n border-top:1px solid var(--line)\n}\n@media(max-width:860px){\n .footer{grid-template-columns:1fr 1fr;gap:24px}\n .footer-center{display:none}\n .footer-nav{align-items:flex-start}\n .footer-copy{grid-column:1\/-1}\n}\n@media(max-width:500px){\n .footer{grid-template-columns:1fr;gap:28px}\n .footer-nav{align-items:flex-start}\n .footer-copy{grid-column:1}\n}\n\n.footer-brand{display:flex;flex-direction:column;gap:12px}\n.footer-brand img{width:54px;height:54px;object-fit:contain;filter:brightness(0) invert(1);opacity:.65}\n.footer-brand p{font-size:13px;line-height:1.7;color:rgba(200,185,165,.7);font-weight:400;max-width:270px}\n.footer-social{display:flex;gap:10px;margin-top:4px}\n.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(160,100,40,.28);background:rgba(160,64,16,.1);color:var(--soft);transition:all .22s}\n.footer-social a:hover{background:rgba(160,64,16,.22);border-color:rgba(160,100,40,.55);color:var(--gold2);transform:translateY(-2px)}\n.footer-social a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}\n.footer-center{text-align:center}\n.footer-logo{width:68px;height:68px;object-fit:contain;filter:brightness(0) invert(1);opacity:.48;margin:0 auto 14px;display:block}\n.footer-tagline{font-family:var(--title);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}\n.footer-nav{display:flex;flex-direction:column;align-items:flex-end;gap:9px}\n.footer-nav a{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(180,158,130,.65);transition:color .22s}\n.footer-nav a:hover{color:var(--gold2)}\n.footer-copy{grid-column:1\/-1;text-align:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(160,140,120,.3);padding-top:clamp(20px,3vw,34px);border-top:1px solid var(--line)}\n\n\/* \u2500\u2500\u2500 VIDEO MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.video-modal{\n position:fixed;inset:0;z-index:100000;\n display:flex;align-items:center;justify-content:center;\n padding:clamp(12px,3vw,36px);\n background:rgba(5,2,0,.92);backdrop-filter:blur(30px);\n opacity:0;pointer-events:none;transition:opacity .3s var(--ease)\n}\n.video-modal.on{opacity:1;pointer-events:auto}\n.video-pop{\n position:relative;width:min(400px,92vw);max-height:92svh;\n border-radius:20px;border:1px solid rgba(242,232,216,.14);\n background:#0a0502;overflow:hidden;\n transform:translateY(22px) scale(.97);\n transition:transform .34s var(--ease);\n display:flex;flex-direction:column\n}\n.video-modal.on .video-pop{transform:translateY(0) scale(1)}\n.video-pop video{display:block;width:100%;max-height:calc(92svh - 56px);object-fit:contain;background:#000}\n.video-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 10px;border-bottom:1px solid rgba(242,232,216,.08);flex-shrink:0}\n.video-title{color:#fff5df;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}\n.video-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(5,2,0,.72);color:#fff;font-size:15px;backdrop-filter:blur(12px);cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.video-close:hover{background:rgba(var(--acc-rgb),.85)}\n<\/style>\n<\/head>\n<body>\n<div id=\"ocelotl-home\">\n<div class=\"app-bg\" aria-hidden=\"true\"><\/div>\n\n<header class=\"nav\" id=\"nav\">\n <a class=\"brand\" href=\"https:\/\/ocelotlmx.com\/?page_id=1262\" aria-label=\"Ocelotl inicio\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"76\" height=\"76\">\n <strong>Ocelotl<\/strong>\n <\/a>\n <nav>\n <ul class=\"nav-links\">\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a><\/li>\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a><\/li>\n <li><a href=\"#visitanos\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/a><\/li>\n <\/ul>\n <\/nav>\n <div class=\"nav-r\">\n <div class=\"lang-toggle\">\n <button class=\"on\" id=\"btnEs\" type=\"button\" onclick=\"setLang('es')\">ES<\/button>\n <button id=\"btnEn\" type=\"button\" onclick=\"setLang('en')\">EN<\/button>\n <\/div>\n <button class=\"hamburger\" id=\"hbtn\" type=\"button\" aria-label=\"Men\u00fa\" onclick=\"toggleDrawer()\">\n <div class=\"hamburger-icon\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/button>\n <\/div>\n<\/header>\n\n<div class=\"drawer\" id=\"drawer\">\n <nav class=\"drawer-links\">\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" onclick=\"closeDrawer()\">Men\u00fa <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" onclick=\"closeDrawer()\">Carta de Mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" onclick=\"closeDrawer()\">Mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" onclick=\"closeDrawer()\">Artesan\u00edas <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <a href=\"#visitanos\" onclick=\"closeDrawer()\">Vis\u00edtanos <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n <\/nav>\n<\/div>\n<\/div>\n\n<div class=\"page\">\n\n\n<section class=\"hero\" id=\"inicio\">\n <div class=\"hero-media\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_M3.jpeg\" alt=\"Ocelotl\" id=\"heroBg\" loading=\"eager\">\n <\/div>\n <div class=\"hero-overlay\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-logo-col reveal-left\">\n <div class=\"hero-logo-wrap\">\n <img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"300\" height=\"300\">\n <\/div>\n <\/div>\n <div class=\"reveal-right\">\n <div class=\"hero-kicker\" data-es=\"Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal\" data-en=\"Crafts \u00b7 Coffee \u00b7 Mezcal\">Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal<\/div>\n <h1 class=\"hero-title\" data-es=\"Dignos representantes <em>de M\u00e9xico<\/em>\" data-en=\"Worthy representatives <em>of Mexico<\/em>\">Dignos representantes <em>de M\u00e9xico<\/em><\/h1>\n <p class=\"hero-copy\" data-es=\"Ven por un caf\u00e9 de olla, un Xocolatl, una degustaci\u00f3n de Mexcalli o una pieza artesanal para llevar.\" data-en=\"Come for a caf\u00e9 de olla, a Xocolatl, a Mexcalli tasting or a handcrafted piece to take home.\">Ven por un caf\u00e9 de olla, un Xocolatl, una degustaci\u00f3n de Mexcalli o una pieza artesanal para llevar.<\/p>\n <div class=\"hero-btns\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de mezcales\" data-en=\"Mezcal menu\">Carta de mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Conocer mezcales\" data-en=\"Explore mezcals\">Conocer mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"loc-strip\">\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" fill=\"currentColor\" opacity=\".85\"\/><\/svg>\n <span data-es=\"Emilio Dond\u00e9 104, Pasillo 8 y Central\" data-en=\"Emilio Dond\u00e9 104, Aisle 8 & Central\">Emilio Dond\u00e9 104, Pasillo 8 y Central<\/span>\n <\/div>\n <div class=\"loc-sep\"><\/div>\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\n <span data-es=\"Lun\u2013Dom 10AM\u20136PM \u00b7 Dom 10AM\u20135PM\" data-en=\"Mon\u2013Sun 10AM\u20136PM \u00b7 Sun 10AM\u20135PM\">Lun\u2013S\u00e1b 10AM\u20136PM \u00b7 Dom 10AM\u20135PM<\/span>\n <\/div>\n <div class=\"loc-sep\"><\/div>\n <div class=\"loc-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n <span>La Ciudadela \u00b7 CDMX<\/span>\n <\/div>\n<\/div>\n\n\n<section class=\"section\" id=\"redes\">\n <div class=\"reels-layout\">\n <div class=\"reveal\">\n <div class=\"kicker\" data-es=\"Ocelotl en movimiento\" data-en=\"Ocelotl in motion\">Ocelotl en movimiento<\/div>\n <h2 class=\"display\" data-es=\"Ven a vivir <em>Ocelotl<\/em>\" data-en=\"Come live <em>Ocelotl<\/em>\">Ven a vivir <em>Ocelotl<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"El caf\u00e9 de olla, el Xocolatl, el Mexcalli y las piezas mexicanas se entienden mejor cuando se viven de cerca.\" data-en=\"The caf\u00e9 de olla, Xocolatl, Mexcalli and Mexican pieces are best understood when experienced up close.\">El caf\u00e9 de olla, el Xocolatl, el Mexcalli y las piezas mexicanas se entienden mejor cuando se viven de cerca.<\/p>\n <div class=\"social-links\">\n <a class=\"btn btn-ghost\" href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n <\/div>\n <\/div>\n <aside class=\"social-aside reveal-right\">\n <span class=\"mini-label\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/span>\n <p style=\"font-size:14px;margin-bottom:14px;color:var(--muted);font-weight:500\" data-es=\"Pasillo 8 y Central, dentro de La Ciudadela.\" data-en=\"Aisle 8 and Central, inside La Ciudadela.\">Pasillo 8 y Central, dentro de La Ciudadela.<\/p>\n <div class=\"map-embed-wrap\">\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3763.4057407698716!2d-99.15270492394285!3d19.432016640418363!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1f85976557517%3A0xa7c85b00b1a4d583!2sMercado%20de%20Artesanias%20La%20Ciudadela!5e0!3m2!1ses-419!2smx!4v1715000000000!5m2!1ses-419!2smx\" width=\"100%\" height=\"200\" style=\"border:0;display:block;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n <\/div>\n <a class=\"map-btn\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-7.3 7-12a7 7 0 1 0-14 0c0 4.7 7 12 7 12Z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n <span data-es=\"Abrir en Google Maps\" data-en=\"Open in Google Maps\">Abrir en Google Maps<\/span>\n <\/a>\n <\/aside>\n <\/div>\n\n \n <div class=\"reel-grid stagger\">\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/PLAYERA_MEXICO.mp4','Playera M\u00e9xico')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/PLAYERA_MEXICO.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Playera M\u00e9xico<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_OLLA.mp4','Caf\u00e9 de olla')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CAFE_OLLA.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Caf\u00e9 de olla<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/TOMAR_MEZCAL.mp4','Tomar Mexcalli')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/TOMAR_MEZCAL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Tomar Mexcalli<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CATAR_MEZCAL.mp4','Catar Mexcalli')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/CATAR_MEZCAL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Catar Mexcalli<\/span>\n <\/button>\n <button class=\"reel\" type=\"button\" onclick=\"openVideo('http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/OCELOTL.mp4','Ocelotl')\">\n <video src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/OCELOTL.mp4#t=0.2\" muted playsinline preload=\"metadata\"><\/video>\n <div class=\"reel-overlay\"><\/div>\n <div class=\"reel-play\"><svg viewBox=\"0 0 24 24\"><polygon points=\"5,3 19,12 5,21\"\/><\/svg><\/div>\n <span class=\"reel-label\">Ocelotl<\/span>\n <\/button>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"secciones\">\n <div class=\"dest-intro reveal\">\n <div class=\"kicker\" data-es=\"Explora Ocelotl\" data-en=\"Explore Ocelotl\">Explora Ocelotl<\/div>\n <h2 class=\"display\" data-es=\"Todo lo que <em>somos<\/em>\" data-en=\"Everything that <em>we are<\/em>\">Todo lo que <em>somos<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"Cuatro experiencias \u00fanicas bajo un mismo techo.\" data-en=\"Four unique experiences under one roof.\">Cuatro experiencias \u00fanicas bajo un mismo techo.<\/p>\n <\/div>\n <div class=\"dest-grid\">\n <a class=\"dest-card large\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-g=\"a\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/MEZCAL1.jpeg\" alt=\"Men\u00fa Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Caf\u00e9 & Bebidas\" data-en=\"Coffee & Drinks\">Caf\u00e9 & Bebidas<\/div>\n <div class=\"dest-title\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/div>\n <p class=\"dest-desc\" data-es=\"Caf\u00e9 de origen, xocolatl, t\u00e9s, aguas frescas y bebidas con piquete. Caf\u00e9 con mezcal, Xolotl, Tepache y mucho m\u00e1s.\" data-en=\"Single-origin coffee, xocolatl, teas, fresh waters and spirited drinks. Mezcal coffee, Xolotl, Tepache and more.\">Caf\u00e9 de origen, xocolatl, t\u00e9s, aguas frescas y bebidas con piquete.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\" data-es=\"Caf\u00e9 de origen\" data-en=\"Single-origin\">Caf\u00e9 de origen<\/span>\n <span class=\"dest-chip\">Xocolatl<\/span>\n <span class=\"dest-chip\" data-es=\"Con piquete\" data-en=\"Spirited\">Con piquete<\/span>\n <span class=\"dest-chip\">Tepache<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card large\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-g=\"a\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/05\/MEZCAL15.jpeg\" alt=\"Mezcales Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih\" data-en=\"Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih\">Mexcalli \u00b7 Do\u00f1a Nicolasa Titicih<\/div>\n <div class=\"dest-title\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/div>\n <p class=\"dest-desc\" data-es=\"Mezcales mexicanos seleccionados por agave, regi\u00f3n y perfil. Cada etiqueta con su historia.\" data-en=\"Mexican mezcals selected by agave, region and profile. Each label with its story.\">Mezcales mexicanos seleccionados por agave, regi\u00f3n y perfil.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\">Cupreata<\/span>\n <span class=\"dest-chip\">Espad\u00edn<\/span>\n <span class=\"dest-chip\">Cenizo<\/span>\n <span class=\"dest-chip\" data-es=\"Silvestres\" data-en=\"Wild\">Silvestres<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Explorar mezcales\" data-en=\"Explore mezcals\">Explorar mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-g=\"b\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/06\/espadin-azul-bco-y-reposd.jpg\" alt=\"Carta de Mezcales\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Shots & Degustaciones\" data-en=\"Shots & Tastings\">Shots & Degustaciones<\/div>\n <div class=\"dest-title\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/div>\n <p class=\"dest-desc\" data-es=\"Consulta shots disponibles y encuentra tu mezcal por agave, regi\u00f3n y perfil.\" data-en=\"Check available shots and find your mezcal by agave, region and profile.\">Consulta shots disponibles y encuentra tu mezcal por agave, regi\u00f3n y perfil.<\/p>\n <div class=\"dest-chips\"><span class=\"dest-chip\">Madurado en vidrio<\/span><\/div>\n <div class=\"dest-cta\" data-es=\"Ver carta\" data-en=\"See menu\">Ver carta <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <a class=\"dest-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-g=\"b\">\n <img decoding=\"async\" class=\"dest-card-img\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8639.jpg\" alt=\"Artesan\u00edas Ocelotl\" loading=\"lazy\">\n <div class=\"dest-glow\"><\/div>\n <div class=\"dest-body\">\n <div class=\"dest-tag\" data-es=\"Hecho en M\u00e9xico\" data-en=\"Made in Mexico\">Hecho en M\u00e9xico<\/div>\n <div class=\"dest-title\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/div>\n <p class=\"dest-desc\" data-es=\"Artesan\u00eda mexicana con origen en diferentes regiones de la Rep\u00fablica.\" data-en=\"Mexican crafts from different regions, selected to represent the work of their creators.\">Artesan\u00eda mexicana con origen en diferentes regiones de la Rep\u00fablica.<\/p>\n <div class=\"dest-chips\">\n <span class=\"dest-chip\" data-es=\"Precio justo\" data-en=\"Fair price\">Precio justo<\/span>\n <span class=\"dest-chip\" data-es=\"Hecho a mano\" data-en=\"Handmade\">Hecho a mano<\/span>\n <\/div>\n <div class=\"dest-cta\" data-es=\"Ver artesan\u00edas\" data-en=\"See crafts\">Ver artesan\u00edas <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"artesanias-preview\">\n <div class=\"arts-intro\">\n <div class=\"reveal\">\n <div class=\"kicker\" data-es=\"Hecho en M\u00e9xico\" data-en=\"Made in Mexico\">Hecho en M\u00e9xico<\/div>\n <h2 class=\"display\" data-es=\"Artesan\u00edas <em>con origen<\/em>\" data-en=\"Crafts <em>with origin<\/em>\">Artesan\u00edas <em>con origen<\/em><\/h2>\n <p class=\"lead-text\" data-es=\"De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales, trabajando directamente con artesanos para mantener precios justos.\" data-en=\"From different regions of Mexico, we select representative crafts based on their history, materials and traditional techniques, working directly with artisans to maintain fair prices.\">De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales, trabajando directamente con artesanos para mantener precios justos.<\/p>\n <div style=\"margin-top:24px\"><a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Ver colecci\u00f3n completa\" data-en=\"See full collection\">Ver colecci\u00f3n completa<\/a><\/div>\n <\/div>\n <div class=\"arts-intro-img reveal-right\">\n <img decoding=\"async\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.47.22-2-1.jpeg\" alt=\"Artesan\u00edas mexicanas\" loading=\"lazy\">\n <\/div>\n <\/div>\n <div class=\"arts-grid stagger\">\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8655.jpg\" alt=\"Catrinas\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Barro\" data-en=\"Clay\">Barro<\/span>\n <div class=\"art-title\" data-es=\"Catrinas\" data-en=\"Catrinas\">Catrinas<\/div>\n <p class=\"art-desc\" data-es=\"Hechas a base de tres barros mezclados y purgados. Tiempo aprox: 10 d\u00edas.\" data-en=\"Made with three purified clays. Approx. 10 days.\">Hechas a base de tres barros mezclados y purgados. Tiempo aprox: 10 d\u00edas.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.28.33.jpeg\" alt=\"Piedra \u00f3nix\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Piedra \u00f3nix\" data-en=\"Onyx\">Piedra \u00f3nix<\/span>\n <div class=\"art-title\" data-es=\"Piezas de piedra \u00f3nix\" data-en=\"Onyx stone pieces\">Piezas de piedra \u00f3nix<\/div>\n <p class=\"art-desc\" data-es=\"Originarias de Puebla, hechas a mano. Tiempo aprox: 15 d\u00edas.\" data-en=\"From Puebla, handmade. Approx. 15 days.\">Originarias de Puebla, hechas a mano. Tiempo aprox: 15 d\u00edas.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <a class=\"art-card\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\">\n <div class=\"art-card-thumb\"><img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8597.jpg\" alt=\"Mezcaleros\" loading=\"lazy\"><\/div>\n <div class=\"art-body\">\n <span class=\"art-tag\" data-es=\"Temporada\" data-en=\"Seasonal\">Temporada<\/span>\n <div class=\"art-title\" data-es=\"Mezcaleros\" data-en=\"Mezcal cups\">Mezcaleros<\/div>\n <p class=\"art-desc\" data-es=\"Mezcaleros de diferentes regiones y materiales.\" data-en=\"Mezcal cups from different regions and materials.\">Mezcaleros de diferentes regiones y materiales.<\/p>\n <span class=\"art-cta\" data-es=\"Ver detalles \u2192\" data-en=\"View details \u2192\">Ver detalles \u2192<\/span>\n <\/div>\n <\/a>\n <\/div>\n <div style=\"display:flex;justify-content:center;margin-top:30px\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Ver todas las artesan\u00edas\" data-en=\"See all crafts\">Ver todas las artesan\u00edas<\/a>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\" id=\"origen\">\n <div class=\"split\">\n <div class=\"photo-frame reveal-left\">\n <img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/todas-titicih-humo-web-scaled.jpg\" alt=\"Ocelotl \u2014 Do\u00f1a Nicolasa Titicih\">\n <\/div>\n <div class=\"text-panel reveal-right\">\n <div class=\"kicker\" data-es=\"Nuestro origen\" data-en=\"Our origin\">Nuestro origen<\/div>\n <h3 style=\"font-family:var(--title);font-size:clamp(30px,4vw,56px);line-height:.94;font-weight:700;color:var(--gold3);margin-top:12px\" data-es=\"Nuestro prop\u00f3sito\" data-en=\"Our purpose\">Nuestro prop\u00f3sito<\/h3>\n <p data-es=\"Nuestra marca nace con el prop\u00f3sito de ser dignos representantes de nuestro pa\u00eds a trav\u00e9s de la venta de artesan\u00eda con origen en diferentes regiones de la rep\u00fablica y preparaci\u00f3n de bebidas tradicionales.\" data-en=\"Our brand was born with the purpose of being worthy representatives of our country through the sale of crafts from different regions of the republic and the preparation of traditional beverages.\">Nuestra marca nace con el prop\u00f3sito de ser dignos representantes de nuestro pa\u00eds a trav\u00e9s de la venta de artesan\u00eda con origen en diferentes regiones de la rep\u00fablica y preparaci\u00f3n de bebidas tradicionales.<\/p>\n <p data-es=\"Con precios justos tanto para el artesano como para el p\u00fablico en general, evitando el abuso al comprador y la denigraci\u00f3n al trabajo del artesano.\" data-en=\"With fair prices for both the artisan and the general public, avoiding abuse of the buyer and denigration of the artisan's work.\">Con precios justos tanto para el artesano como para el p\u00fablico en general, evitando el abuso al comprador y la denigraci\u00f3n al trabajo del artesano.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"section\">\n <div style=\"max-width:820px;margin:0 auto clamp(30px,4vw,50px);text-align:center\" class=\"reveal\">\n <div class=\"kicker center\" data-es=\"Opiniones reales\" data-en=\"Real reviews\">Opiniones reales<\/div>\n <h2 class=\"display\" data-es=\"Lo que dicen <em>en Google<\/em>\" data-en=\"What they say <em>on Google<\/em>\">Lo que dicen <em>en Google<\/em><\/h2>\n <p class=\"lead-text\" style=\"margin-left:auto;margin-right:auto;text-align:center\" data-es=\"Rese\u00f1as reales de visitantes que destacan el caf\u00e9, el chocolate, los mezcales, el servicio y las artesan\u00edas.\" data-en=\"Real visitor reviews highlighting coffee, chocolate, mezcals, service and crafts.\">Rese\u00f1as reales de visitantes que destacan el caf\u00e9, el chocolate, los mezcales y las artesan\u00edas.<\/p>\n <\/div>\n <div class=\"review-grid stagger\">\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">JM<\/div><div><strong class=\"review-name\">J Mndz<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 3 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Excelente lugar con un gran men\u00fa a disposici\u00f3n, caf\u00e9, mezcal, cerveza, botana, todo lo tiene y nada se guarda!!! Peque\u00f1o y c\u00f3modo en medio del mercado de la ciudadela, de ambiente tranquilo...<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">IR<\/div><div><strong class=\"review-name\">Itzel Ramirez<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 7 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Este lugar en el mercado de la ciudadela tiene ALMA y MAGIA pura. Es mi 100 de 10 para el aut\u00e9ntico caf\u00e9 de olla y chocolate con agua. Las artesan\u00edas son de la mejor calidad.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">AL<\/div><div><strong class=\"review-name\">Alberto Lozano<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 7 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Un cafe chiquito dentro del mercado, est\u00e1 rico el cafe y el chocolate, le puedes agregar mezcal y queda muy bueno, el personal muy amable.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">SA<\/div><div><strong class=\"review-name\">Say Avenda\u00f1o<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 6 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Las bebidas preparadas est\u00e1n muy ricas y frescas, s\u00faper recomendable. Las degustaciones de mezcal, muy rico 100 pesitos por caballitos.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">S<\/div><div><strong class=\"review-name\">Sveta<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 4 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Dentro del mercado de artesanias esta escondido este lugarcito, donde preparan maravillosos cafes y chocolates. Tambien puedes encontrar mescales, pulques y otras delicias mexicanas. Un must!<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <article class=\"review\">\n <div class=\"review-top\"><div class=\"review-avatar\">SM<\/div><div><strong class=\"review-name\">Sandra Munzert<\/strong><span class=\"review-meta\">Local Guide \u00b7 Hace 2 meses<\/span><\/div><\/div>\n <div class=\"stars\"><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><\/div>\n <div class=\"review-quote\">\"<\/div>\n <p>Un lugarcito maravilloso con un ambiente encantador y un buen servicio que nos ense\u00f1\u00f3 c\u00f3mo debe ser el mezcal. Nos encant\u00f3 tanto que volveremos.<\/p>\n <span class=\"review-source\">Google Reviews<\/span>\n <\/article>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n\n<section class=\"horarios-section\" id=\"horarios\">\n <div class=\"horarios-inner\">\n <div class=\"reveal-left\">\n <div class=\"sec-kicker\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/div>\n <h2 class=\"sec-title\" data-es=\"Horarios & <em>ubicaci\u00f3n<\/em>\" data-en=\"Hours & <em>location<\/em>\">Horarios & <em>ubicaci\u00f3n<\/em><\/h2>\n <p class=\"sec-lead\" data-es=\"Estamos en La Ciudadela, uno de los mercados de artesan\u00edas m\u00e1s importantes de M\u00e9xico. Ven a tomarte un caf\u00e9, un mezcal, o llevarte una pieza \u00fanica.\" data-en=\"We are at La Ciudadela, one of Mexico's most important craft markets. Come for a coffee, a mezcal, or take home a unique piece.\">Estamos en La Ciudadela, uno de los mercados de artesan\u00edas m\u00e1s importantes de M\u00e9xico. Ven a tomarte un caf\u00e9, un mezcal, o llevarte una pieza \u00fanica.<\/p>\n <div class=\"h-table\" id=\"hTable\"><\/div>\n <\/div>\n <div class=\"h-info-cards reveal-right\">\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"D\u00f3nde encontrarnos\" data-en=\"Where to find us\">D\u00f3nde encontrarnos<\/div>\n <div class=\"h-info-text\">Emilio Dond\u00e9 104, Pasillo 8 y Central<br>Colonia Centro, CDMX<br><br><a href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"Abrir en Google Maps \u2192\" data-en=\"Open in Google Maps \u2192\">Abrir en Google Maps \u2192<\/a><\/div>\n <\/div>\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"Degustaciones de mezcal\" data-en=\"Mezcal tastings\">Degustaciones de mezcal<\/div>\n <div class=\"h-info-text\" data-es=\"Ofrecemos degustaciones guiadas. Pregunta en tienda por disponibilidad y precios.\" data-en=\"We offer guided tastings. Ask in store for availability and prices.\">Ofrecemos degustaciones guiadas. Pregunta en tienda por disponibilidad y precios.<\/div>\n <\/div>\n <div class=\"h-info-card\">\n <div class=\"h-info-title\" data-es=\"Caf\u00e9 de origen\" data-en=\"Single-origin coffee\">Caf\u00e9 de origen<\/div>\n <div class=\"h-info-text\" data-es=\"Selecci\u00f3n de caf\u00e9s de diferentes estados de M\u00e9xico. Prueba el Caf\u00e9 con Piquete \u2014 un cl\u00e1sico de la casa.\" data-en=\"Selection of coffees from different Mexican states. Try the Coffee with a Kick \u2014 a house classic.\">Selecci\u00f3n de caf\u00e9s de diferentes estados de M\u00e9xico. Prueba el Caf\u00e9 con Piquete \u2014 un cl\u00e1sico de la casa.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section\" id=\"visitanos\">\n <div class=\"visit-grid\">\n <div class=\"visit-card reveal-left\">\n <div class=\"kicker\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/div>\n <h2 data-es=\"Estamos listos para recibirte\" data-en=\"We're ready to welcome you\">Estamos listos para recibirte<\/h2>\n <p style=\"margin-top:13px;color:#f0e4cc;font-size:clamp(14px,1.5vw,16px);line-height:1.8;font-weight:400\" data-es=\"Encu\u00e9ntranos en Emilio Dond\u00e9 104, Pasillo 8 y Central, dentro del mercado de artesan\u00edas.\" data-en=\"Find us at Emilio Dond\u00e9 104, Aisle 8 and Central, inside the craft market.\">Encu\u00e9ntranos en Emilio Dond\u00e9 104, Pasillo 8 y Central, dentro del mercado de artesan\u00edas.<\/p>\n <div class=\"contact-lines\">\n <a class=\"contact-line\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-7.3 7-12a7 7 0 1 0-14 0c0 4.7 7 12 7 12Z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n <span>Emilio Dond\u00e9 104, Pasillo 8 y Central, Centro Hist\u00f3rico<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"tel:+525572025037\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6.4 6.4l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6A2 2 0 0 1 22 16.9Z\"\/><\/svg>\n <span>+52 55 7202 5037<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n <span>Facebook<\/span>\n <\/a>\n <a class=\"contact-line\" href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\n <span>Instagram @ocelotlcafe<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"visit-card reveal-right\">\n <div class=\"kicker\" data-es=\"Explora\" data-en=\"Explore\">Explora<\/div>\n <div class=\"cta-row\" style=\"flex-direction:column;gap:10px;margin-top:16px\">\n <a class=\"btn btn-prim\" href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Ver men\u00fa\" data-en=\"See menu\">Ver men\u00fa<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de mezcales\" data-en=\"Mezcal menu\">Carta de mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a>\n <a class=\"btn btn-ghost\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\" data-es=\"C\u00f3mo llegar\" data-en=\"How to get here\">C\u00f3mo llegar<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div class=\"footer-brand\">\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"54\" height=\"54\">\n <p data-es=\"Caf\u00e9, mezcal y artesan\u00edas mexicanas en La Ciudadela, CDMX.\" data-en=\"Mexican coffee, mezcal and crafts in La Ciudadela, CDMX.\">Caf\u00e9, mezcal y artesan\u00edas mexicanas en La Ciudadela, CDMX.<\/p>\n <div class=\"footer-social\">\n <a href=\"https:\/\/www.instagram.com\/ocelotlcafe\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/OcelotArtesaniasyCafeMexicano\/?locale=es_LA\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"footer-center\" id=\"footerCenter\">\n <img loading=\"lazy\" decoding=\"async\" class=\"footer-logo\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"68\" height=\"68\">\n <div class=\"footer-tagline\">Ocelotl \u00b7 CDMX<\/div>\n <\/div>\n <nav class=\"footer-nav\">\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" data-es=\"Carta de Mezcales\" data-en=\"Mezcal Menu\">Carta de Mezcales<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a>\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" data-es=\"Artesan\u00edas\" data-en=\"Crafts\">Artesan\u00edas<\/a>\n <a href=\"#visitanos\" data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/a>\n <\/nav>\n <div class=\"footer-copy\">\u00a9 Ocelotl \u00b7 Artesan\u00edas y Caf\u00e9 Mexicano \u00b7 La Ciudadela \u00b7 CDMX \u00b7 <span id=\"footerYear\"><\/span><\/div>\n<\/footer>\n\n<\/div>\n\n\n<div class=\"video-modal\" id=\"videoModal\" onclick=\"if(event.target===this)closeVideo()\">\n <div class=\"video-pop\">\n <div class=\"video-header\">\n <span class=\"video-title\" id=\"videoTitle\">Ocelotl<\/span>\n <button class=\"video-close\" type=\"button\" onclick=\"closeVideo()\">\u2715<\/button>\n <\/div>\n <video id=\"videoPlayer\" controls playsinline><\/video>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n\"use strict\";\nvar DAYS_ES=[\"Lunes\",\"Martes\",\"Mi\u00e9rcoles\",\"Jueves\",\"Viernes\",\"S\u00e1bado\",\"Domingo\"];\nvar DAYS_EN=[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"];\nvar HOURS=[\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 6PM\",\"10AM \u2013 5PM\"];\nvar jsDay=new Date().getDay();\nvar TODAY=jsDay===0?6:jsDay-1;\nvar LANG=\"es\";\n\nfunction renderHorarios(){\n var days=LANG===\"es\"?DAYS_ES:DAYS_EN;\n var today=LANG===\"es\"?\"Hoy\":\"Today\";\n var ht=document.getElementById(\"hTable\");\n if(ht)ht.innerHTML=days.map(function(d,i){\n var isT=i===TODAY;\n return'<div class=\"h-row'+(isT?\" today\":\"\")+'\"><span class=\"h-day\">'+d+'<\/span>'+(isT?'<span class=\"h-now\">'+today+'<\/span>':'')+'<span class=\"h-time\">'+HOURS[i]+'<\/span><\/div>';\n }).join(\"\");\n}\nrenderHorarios();\n\nfunction setLang(lang){\n LANG=lang;\n document.getElementById(\"btnEs\").classList.toggle(\"on\",lang===\"es\");\n document.getElementById(\"btnEn\").classList.toggle(\"on\",lang===\"en\");\n document.querySelectorAll(\"[data-es][data-en]\").forEach(function(el){\n var v=el.getAttribute(\"data-\"+lang);\n if(!v)return;\n if(v.indexOf(\"<\")>=0)el.innerHTML=v;else el.textContent=v;\n });\n renderHorarios();\n}\nwindow.setLang=setLang;\n\nfunction toggleDrawer(){\n var d=document.getElementById(\"drawer\"),h=document.getElementById(\"hbtn\");\n var open=d.classList.toggle(\"open\");\n h.classList.toggle(\"open\",open);\n document.body.style.overflow=open?\"hidden\":\"\";\n}\nfunction closeDrawer(){\n var d=document.getElementById(\"drawer\"),h=document.getElementById(\"hbtn\");\n if(d)d.classList.remove(\"open\");if(h)h.classList.remove(\"open\");\n document.body.style.overflow=\"\";\n}\nwindow.toggleDrawer=toggleDrawer;\nwindow.closeDrawer=closeDrawer;\nwindow.addEventListener(\"resize\",function(){if(window.innerWidth>1024)closeDrawer();});\n\nwindow.openVideo=function(src,title){\n var modal=document.getElementById(\"videoModal\"),player=document.getElementById(\"videoPlayer\"),titleEl=document.getElementById(\"videoTitle\");\n if(!modal||!player)return;\n if(titleEl)titleEl.textContent=title||\"Ocelotl\";\n player.pause();player.removeAttribute(\"src\");player.load();\n player.src=src;player.controls=true;player.playsInline=true;\n modal.classList.add(\"on\");document.body.style.overflow=\"hidden\";\n player.addEventListener(\"loadedmetadata\",function(){player.play().catch(function(){});},{once:true});\n};\nwindow.closeVideo=function(){\n var modal=document.getElementById(\"videoModal\"),player=document.getElementById(\"videoPlayer\");\n if(modal)modal.classList.remove(\"on\");\n if(player){player.pause();player.removeAttribute(\"src\");player.load();}\n document.body.style.overflow=\"\";\n};\n\ndocument.addEventListener(\"keydown\",function(e){if(e.key===\"Escape\"){closeDrawer();closeVideo();}});\n\nvar fy=document.getElementById(\"footerYear\");\nif(fy)fy.textContent=new Date().getFullYear();\n\n\/* Scroll reveal *\/\nif(window.IntersectionObserver){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(e.isIntersecting){e.target.classList.add(\"in\");io.unobserve(e.target);}\n });\n },{threshold:.08,rootMargin:\"0px 0px -20px 0px\"});\n document.querySelectorAll(\".reveal,.reveal-left,.reveal-right,.stagger\").forEach(function(el){io.observe(el);});\n\n var cards=document.querySelectorAll(\".dest-card\");\n cards.forEach(function(c,i){\n c.style.cssText+=\"opacity:0;transform:translateY(22px);transition:opacity .55s ease \"+(i*.08)+\"s,transform .55s ease \"+(i*.08)+\"s\";\n });\n var obs=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(e.isIntersecting){e.target.style.opacity=\"1\";e.target.style.transform=\"none\";obs.unobserve(e.target);}\n });\n },{threshold:.1});\n cards.forEach(function(c){obs.observe(c);});\n}else{\n document.querySelectorAll(\".reveal,.reveal-left,.reveal-right,.stagger\").forEach(function(el){el.classList.add(\"in\");});\n}\n\n\/* Hero parallax *\/\n(function(){\n var bg=document.getElementById(\"heroBg\");\n if(!bg)return;\n var ticking=false;\n window.addEventListener(\"scroll\",function(){\n if(!ticking){\n requestAnimationFrame(function(){\n bg.style.transform=\"scale(1.04) translateY(\"+(window.scrollY*.1)+\"px)\";\n ticking=false;\n });\n ticking=true;\n }\n },{passive:true});\n})();\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>Ocelotl \u2014 Caf\u00e9 \u00b7 Mezcal \u00b7 Artesan\u00edas \u00b7 La Ciudadela CDMX Ocelotl Men\u00fa Carta de Mezcales Mezcales Artesan\u00edas Vis\u00edtanos ES EN Men\u00fa Carta de Mezcales Mezcales Artesan\u00edas Vis\u00edtanos Artesan\u00edas \u00b7 Caf\u00e9 \u00b7 Mezcal<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-1262","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1262"}],"version-history":[{"count":120,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262\/revisions"}],"predecessor-version":[{"id":2783,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1262\/revisions\/2783"}],"wp:attachment":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}