{"id":1413,"date":"2026-05-08T20:23:58","date_gmt":"2026-05-08T20:23:58","guid":{"rendered":"https:\/\/ocelotlmx.com\/?page_id=1413"},"modified":"2026-06-03T20:48:37","modified_gmt":"2026-06-03T20:48:37","slug":"artesanias","status":"publish","type":"page","link":"https:\/\/ocelotlmx.com\/?page_id=1413","title":{"rendered":"Artesan\u00edas"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\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\r\n\r\n\r\n\r\n\r\nArtesan\u00edas \u2014 Ocelotl<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n@font-face{font-family:\"Type Machine\";src:url(\".\/Type%20Machine.ttf\") format(\"truetype\");font-weight:400 900;font-style:normal;font-display:swap}\r\n@font-face{font-family:\"Veteran Typewriter\";src:url(\".\/veteran%20typewriter.ttf\") format(\"truetype\");font-weight:400 900;font-style:normal;font-display:swap}\r\n\r\n\/* \u2500\u2500 SCOPED RESET \u2500\u2500 *\/\r\n#ocelotl-art-app,#ocelotl-art-app *,#ocelotl-art-app *::before,#ocelotl-art-app *::after{box-sizing:border-box;margin:0;padding:0}\r\n#ocelotl-art-app button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}\r\n#ocelotl-art-app a{color:inherit;text-decoration:none}\r\n#ocelotl-art-app img{display:block;max-width:100%;height:auto}\r\n#ocelotl-art-app ul{list-style:none}\r\n\r\n\/* \u2500\u2500 TOKENS \u2014 terracota\/tierra palette \u2500\u2500 *\/\r\n#ocelotl-art-app{\r\n --bg:#0e0a07;\r\n --panel:#130f0a;\r\n --text:#f0e6d3;\r\n --muted:#ddd0ba;\r\n --soft:#a89070;\r\n --line:rgba(240,230,211,.11);\r\n --line2:rgba(160,100,40,.32);\r\n \/* accent *\/\r\n --acc:#8b3a10;\r\n --acc2:#c8702a;\r\n --acc-rgb:139,58,16;\r\n --gold:#a07840;\r\n --gold2:#c8a060;\r\n --amber:#b07820;\r\n --amber2:#d4a040;\r\n --shine:rgba(255,255,255,.09);\r\n --glass:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 46%,rgba(139,58,16,.1));\r\n --title:\"Type Machine\",\"Veteran Typewriter\",\"Courier New\",monospace;\r\n --ui:\"Poppins\",system-ui,sans-serif;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n --ease-out:cubic-bezier(.33,1,.68,1);\r\n --nav:110px;\r\n --px:clamp(20px,5.5vw,80px);\r\n --space:clamp(70px,8vw,118px);\r\n font-family:var(--ui);color:var(--text);background:var(--bg);\r\n -webkit-font-smoothing:antialiased;position:relative;z-index:1;min-height:100vh;overflow-x:hidden;\r\n}\r\n\r\n\/* background *\/\r\n#ocelotl-art-app .app-bg{position:fixed;inset:0;z-index:0;pointer-events:none;\r\n background:\r\n radial-gradient(ellipse 70% 42% at 5% 0%,rgba(139,58,16,.15),transparent 62%),\r\n radial-gradient(ellipse 55% 38% at 96% 92%,rgba(160,120,64,.12),transparent 64%),\r\n repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 52px),\r\n repeating-linear-gradient(0deg,rgba(255,255,255,.011) 0 1px,transparent 1px 52px)}\r\n\r\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n#ocelotl-art-app .nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:99999!important;height:var(--nav);display:flex!important;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--px);background:rgba(8,5,2,.9)!important;backdrop-filter:blur(28px) saturate(160%)!important;-webkit-backdrop-filter:blur(28px) saturate(160%)!important;border-bottom:1px solid rgba(160,100,40,.2)!important;box-shadow:0 2px 24px rgba(0,0,0,.3)!important}\r\n#ocelotl-art-app .brand{display:flex;align-items:center;gap:13px;min-width:0;line-height:0}\r\n#ocelotl-art-app .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);flex-shrink:0}\r\n#ocelotl-art-app .brand:hover img{transform:scale(1.04)}\r\n#ocelotl-art-app .brand strong{font-size:20px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}\r\n#ocelotl-art-app .nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,36px)}\r\n#ocelotl-art-app .nav-links a{color:var(--muted)!important;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;position:relative;transition:color .2s;white-space:nowrap}\r\n#ocelotl-art-app .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--gold2),var(--amber2));transition:width .3s var(--ease)}\r\n#ocelotl-art-app .nav-links a:hover,#ocelotl-art-app .nav-links a.active{color:var(--gold2)!important}\r\n#ocelotl-art-app .nav-links a:hover::after,#ocelotl-art-app .nav-links a.active::after{width:100%}\r\n#ocelotl-art-app .nav-r{display:flex;align-items:center;gap:10px}\r\n#ocelotl-art-app .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)}\r\n#ocelotl-art-app .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);cursor:pointer}\r\n#ocelotl-art-app .lang-toggle button.on{background:linear-gradient(135deg,#6b2e0c,#3d1606)!important;color:#f0e6d3!important;box-shadow:0 2px 6px rgba(0,0,0,.2)}\r\n#ocelotl-art-app .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;cursor:pointer;transition:.2s;flex-shrink:0;padding:0}\r\n#ocelotl-art-app .hamburger:hover{border-color:var(--gold2)!important}\r\n#ocelotl-art-app .hamburger-icon{width:24px;height:24px;position:relative;display:flex;align-items:center;justify-content:center}\r\n#ocelotl-art-app .hamburger-icon span{position:absolute;width:24px;height:2px;background-color:var(--text);border-radius:2px;transition:all .3s ease-in-out}\r\n#ocelotl-art-app .hamburger-icon span:nth-child(1){transform:translateY(-8px)}\r\n#ocelotl-art-app .hamburger-icon span:nth-child(3){transform:translateY(8px)}\r\n#ocelotl-art-app .hamburger.open .hamburger-icon span:nth-child(1){transform:translateY(0) rotate(45deg)}\r\n#ocelotl-art-app .hamburger.open .hamburger-icon span:nth-child(2){opacity:0;transform:scaleX(0)}\r\n#ocelotl-art-app .hamburger.open .hamburger-icon span:nth-child(3){transform:translateY(0) rotate(-45deg)}\r\n\r\n\/* \u2500\u2500 DRAWER \u2500\u2500 *\/\r\n#ocelotl-art-app .drawer{position:fixed;inset:0;z-index:99998;display:flex;flex-direction:column;background:rgba(8,5,2,.98);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:calc(var(--nav) + 32px) var(--px) 40px;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.4,1.1);overflow-y:auto}\r\n#ocelotl-art-app .drawer.open{transform:translateX(0)}\r\n#ocelotl-art-app .drawer-links a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(240,230,211,.11);color:var(--text);font-size:clamp(20px,6vw,26px);font-family:var(--title);font-weight:900;text-decoration:none;opacity:0;transform:translateX(20px);transition:opacity .3s ease,transform .3s ease,color .2s,padding-left .2s}\r\n#ocelotl-art-app .drawer.open .drawer-links a{opacity:1;transform:translateX(0)}\r\n#ocelotl-art-app .drawer.open .drawer-links a:nth-child(1){transition-delay:.05s}\r\n#ocelotl-art-app .drawer.open .drawer-links a:nth-child(2){transition-delay:.1s}\r\n#ocelotl-art-app .drawer.open .drawer-links a:nth-child(3){transition-delay:.15s}\r\n#ocelotl-art-app .drawer.open .drawer-links a:nth-child(4){transition-delay:.2s}\r\n#ocelotl-art-app .drawer.open .drawer-links a:nth-child(5){transition-delay:.25s}\r\n#ocelotl-art-app .drawer-links a:hover{color:var(--gold2);padding-left:10px}\r\n#ocelotl-art-app .drawer-links a svg{width:22px;height:22px;stroke:var(--gold2);fill:none;stroke-width:2;opacity:.7}\r\n#ocelotl-art-app .drawer-links a:hover svg{transform:translateX(5px)}\r\n@media(max-width:1024px){#ocelotl-art-app{--nav:90px}#ocelotl-art-app .nav-links{display:none!important}#ocelotl-art-app .hamburger{display:flex!important}#ocelotl-art-app .brand img{width:62px;height:62px}#ocelotl-art-app .brand strong{font-size:17px}}\r\n@media(max-width:620px){#ocelotl-art-app{--nav:64px;--px:18px}#ocelotl-art-app .brand img{width:46px;height:46px}#ocelotl-art-app .brand strong{font-size:13px;letter-spacing:.12em}#ocelotl-art-app .lang-toggle button{min-height:34px;padding:6px 12px;font-size:10px}#ocelotl-art-app .hamburger{width:44px;height:44px}#ocelotl-art-app .hamburger-icon{width:20px;height:20px}#ocelotl-art-app .hamburger-icon span{width:20px}#ocelotl-art-app .hamburger-icon span:nth-child(1){transform:translateY(-7px)}#ocelotl-art-app .hamburger-icon span:nth-child(3){transform:translateY(7px)}}\r\n\r\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\r\n#ocelotl-art-app .page{position:relative;z-index:1;margin-top:var(--nav)}\r\n#ocelotl-art-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 22px;border-radius:999px;border:1px solid rgba(160,100,40,.38);background:rgba(139,58,16,.14);color:var(--text);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:.24s var(--ease);cursor:pointer;backdrop-filter:blur(20px)}\r\n#ocelotl-art-app .btn:hover{transform:translateY(-2px);border-color:var(--gold2);color:#fff}\r\n#ocelotl-art-app .btn.primary{background:linear-gradient(135deg,rgba(139,58,16,.96),rgba(80,30,10,.92));color:#fff!important;border-color:rgba(192,112,42,.52)}\r\n#ocelotl-art-app .btn.primary:hover{background:linear-gradient(135deg,var(--acc2),var(--acc));box-shadow:0 8px 22px rgba(139,58,16,.4)}\r\n#ocelotl-art-app .kicker{display:flex;align-items:center;gap:13px;color:var(--gold2);font-size:11px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}\r\n#ocelotl-art-app .kicker::before{content:\"\";width:36px;height:1px;background:linear-gradient(90deg,var(--gold2),transparent)}\r\n\r\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n#ocelotl-art-app .hero{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:calc(var(--nav)+60px) var(--px) clamp(48px,7vw,90px)}\r\n#ocelotl-art-app .hero-bg{position:absolute;inset:0;z-index:0}\r\n#ocelotl-art-app .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.05) contrast(1.02) brightness(.85);transform:scale(1.04);transition:transform 12s var(--ease)}\r\n#ocelotl-art-app .hero-overlay{position:absolute;inset:0;z-index:1;\r\n background:\r\n linear-gradient(105deg,rgba(8,5,2,.72) 0%,rgba(8,5,2,.32) 42%,rgba(8,5,2,.04) 100%),\r\n linear-gradient(0deg,rgba(8,5,2,.88) 0%,rgba(8,5,2,0) 42%),\r\n radial-gradient(ellipse 70% 50% at 0% 90%,rgba(139,58,16,.15),transparent 58%)}\r\n#ocelotl-art-app .hero-c{position:relative;z-index:2;max-width:680px}\r\n#ocelotl-art-app .hero h1{font-family:var(--title);font-size:clamp(52px,8vw,108px);line-height:.88;font-weight:900;color:#fff7e6;text-shadow:0 2px 0 rgba(255,255,255,.08),0 24px 56px rgba(0,0,0,.7)}\r\n#ocelotl-art-app .hero h1 em{font-style:normal;color:var(--gold2)}\r\n#ocelotl-art-app .hero-copy{margin-top:22px;color:#e0d6c4;font-size:clamp(15px,1.7vw,17px);line-height:1.78;font-weight:300;max-width:560px}\r\n#ocelotl-art-app .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}\r\n\r\n\/* \u2500\u2500 STORY SECTION \u2500\u2500 *\/\r\n#ocelotl-art-app .section{padding:var(--space) var(--px);position:relative}\r\n#ocelotl-art-app .section h2{font-family:var(--title);font-size:clamp(38px,5vw,66px);line-height:.92;font-weight:900;color:#fff7e8}\r\n#ocelotl-art-app .section h2 em{font-style:normal;color:var(--gold2)}\r\n#ocelotl-art-app .lead{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.8;font-weight:300}\r\n#ocelotl-art-app .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(28px,6vw,82px);align-items:center}\r\n\r\n\/* Glass panel \u2014 terracota tint *\/\r\n#ocelotl-art-app .glass-panel{\r\n position:relative;\r\n border:1px solid rgba(240,220,180,.12);\r\n border-radius:28px;\r\n background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 40%,rgba(139,58,16,.1) 100%);\r\n backdrop-filter:blur(40px) saturate(160%);\r\n -webkit-backdrop-filter:blur(40px) saturate(160%);\r\n padding:clamp(28px,4vw,48px);\r\n box-shadow:inset 0 2px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.3),0 28px 70px rgba(0,0,0,.3);\r\n overflow:hidden;\r\n}\r\n#ocelotl-art-app .glass-panel::before{\r\n content:\"\";position:absolute;inset:0;border-radius:28px;\r\n background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(255,255,255,.07),transparent 60%),\r\n radial-gradient(ellipse 50% 40% at 80% 90%,rgba(139,58,16,.1),transparent 60%);\r\n pointer-events:none;\r\n}\r\n#ocelotl-art-app .glass-panel h2{font-size:clamp(36px,5vw,58px)}\r\n#ocelotl-art-app .glass-panel p{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.86;font-weight:300}\r\n#ocelotl-art-app .compact-note{margin-top:22px;display:inline-flex;padding:10px 16px;border:1px solid rgba(160,100,40,.35);border-radius:999px;color:#fff1d8;background:rgba(139,58,16,.12);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(12px)}\r\n#ocelotl-art-app .photo-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px}\r\n#ocelotl-art-app .photo-tile{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(240,220,180,.09);background:#050606;min-height:260px;box-shadow:inset 0 2px 0 rgba(255,255,255,.07),0 22px 62px rgba(0,0,0,.28)}\r\n#ocelotl-art-app .photo-tile.large{grid-column:1\/-1;min-height:330px}\r\n#ocelotl-art-app .photo-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04) brightness(.8);transition:transform .6s var(--ease),filter .4s}\r\n#ocelotl-art-app .photo-tile:hover img{transform:scale(1.04);filter:saturate(1) brightness(.9)}\r\n#ocelotl-art-app .photo-tile::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,2,.45),transparent 60%)}\r\n\r\n\/* \u2500\u2500 FILTERS \u2500\u2500 *\/\r\n#ocelotl-art-app .section-head{max-width:880px;margin-bottom:34px}\r\n#ocelotl-art-app .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}\r\n#ocelotl-art-app .filter{\r\n border:1px solid rgba(240,220,180,.1);\r\n border-radius:999px;\r\n background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));\r\n backdrop-filter:blur(20px);\r\n color:var(--muted);padding:11px 18px;\r\n font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;\r\n transition:.22s var(--ease);\r\n box-shadow:inset 0 1px 0 rgba(255,255,255,.08);\r\n}\r\n#ocelotl-art-app .filter:hover{color:#fff;border-color:rgba(200,160,96,.4);transform:translateY(-2px)}\r\n#ocelotl-art-app .filter.on{\r\n background:linear-gradient(135deg,rgba(139,58,16,.32),rgba(160,100,40,.28));\r\n color:#fff;border-color:rgba(200,160,96,.54);\r\n box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 8px 24px rgba(139,58,16,.2);\r\n}\r\n\r\n\/* \u2500\u2500 GALLERY CARDS \u2500\u2500 *\/\r\n#ocelotl-art-app .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}\r\n#ocelotl-art-app .craft-card{\r\n position:relative;overflow:hidden;min-height:460px;\r\n border-radius:26px;border:1px solid rgba(240,220,180,.08);\r\n background:#0a0705;color:inherit;text-align:left;\r\n box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 22px 58px rgba(0,0,0,.26);\r\n transition:.28s var(--ease);isolation:isolate;cursor:pointer;\r\n}\r\n#ocelotl-art-app .craft-card[hidden]{display:none}\r\n#ocelotl-art-app .craft-card img{\r\n position:absolute;left:10px;right:10px;top:10px;\r\n width:calc(100% - 20px);height:calc(100% - 130px);\r\n object-fit:cover;object-position:center;border-radius:18px;\r\n filter:saturate(.9) contrast(1.04) brightness(.78);\r\n transition:.55s var(--ease);\r\n}\r\n#ocelotl-art-app .craft-card::before{\r\n content:\"\";position:absolute;inset:0;z-index:1;\r\n background:linear-gradient(0deg,rgba(8,5,2,.97),rgba(8,5,2,.72) 28%,rgba(8,5,2,.1) 68%,rgba(8,5,2,.14))\r\n}\r\n#ocelotl-art-app .craft-card:hover{\r\n transform:translateY(-7px) scale(1.01);\r\n border-color:rgba(200,160,96,.4);\r\n box-shadow:inset 0 2px 0 rgba(255,255,255,.09),0 32px 80px rgba(0,0,0,.38),0 0 40px rgba(139,58,16,.08);\r\n}\r\n#ocelotl-art-app .craft-card:hover img{filter:saturate(1) brightness(.88);transform:scale(1.04)}\r\n#ocelotl-art-app .card-body{position:absolute;left:18px;right:18px;bottom:20px;z-index:2}\r\n#ocelotl-art-app .craft-card small{display:block;color:var(--gold2);font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}\r\n#ocelotl-art-app .craft-card h3{font-family:var(--title);font-size:clamp(26px,2.4vw,36px);line-height:.98;font-weight:900;color:#fff7e6}\r\n#ocelotl-art-app .craft-card p{margin-top:8px;color:#ddd3c0;font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\r\n#ocelotl-art-app .open-hint{\r\n display:inline-flex;margin-top:13px;\r\n border:1px solid rgba(240,220,180,.14);border-radius:999px;\r\n background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));\r\n backdrop-filter:blur(20px);\r\n color:#fff1d8;padding:8px 14px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;\r\n box-shadow:inset 0 1px 0 rgba(255,255,255,.18);\r\n transition:.2s var(--ease);\r\n}\r\n#ocelotl-art-app .craft-card:hover .open-hint{background:rgba(160,100,40,.28);border-color:rgba(200,160,96,.5)}\r\n\r\n\/* \u2500\u2500 SOLD OUT \u2500\u2500 *\/\r\n#ocelotl-art-app .soldout-badge{position:absolute;top:18px;left:18px;z-index:3;background:rgba(160,40,40,.92);color:#fff;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);pointer-events:none}\r\n#ocelotl-art-app .craft-card.sold-out{cursor:default;opacity:.86}\r\n#ocelotl-art-app .craft-card.sold-out:hover{transform:none;border-color:rgba(240,220,180,.08)}\r\n#ocelotl-art-app .craft-card.sold-out:hover img{filter:saturate(.9) brightness(.78);transform:none}\r\n#ocelotl-art-app .craft-card.sold-out .open-hint{display:none}\r\n\r\n\/* \u2500\u2500 MODAL \u2500\u2500 *\/\r\n#ocelotl-art-app .modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,1,0,.82);backdrop-filter:blur(28px) saturate(150%);opacity:0;pointer-events:none;transition:.25s var(--ease)}\r\n#ocelotl-art-app .modal.on{opacity:1;pointer-events:auto}\r\n#ocelotl-art-app .pop{\r\n position:relative;width:min(1080px,100%);max-height:90svh;overflow:auto;\r\n border-radius:28px;\r\n border:1px solid rgba(240,220,180,.12);\r\n background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(14,10,7,.97) 40%,rgba(139,58,16,.12));\r\n backdrop-filter:blur(40px) saturate(160%);\r\n box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4),0 40px 100px rgba(0,0,0,.68);\r\n transform:translateY(18px) scale(.97);transition:.3s var(--ease);\r\n}\r\n#ocelotl-art-app .modal.on .pop{transform:none}\r\n#ocelotl-art-app .pop-body{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr);gap:0;min-height:min(680px,88svh)}\r\n#ocelotl-art-app .pop-image{background:#0a0705;min-height:520px;padding:18px}\r\n#ocelotl-art-app .pop-image img{width:100%;height:100%;object-fit:cover;border-radius:18px;filter:saturate(.94) brightness(.9)}\r\n#ocelotl-art-app .pop-copy{padding:clamp(24px,4vw,48px);display:grid;align-content:center;position:relative}\r\n#ocelotl-art-app .pop-copy small{display:block;color:var(--gold2);font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}\r\n#ocelotl-art-app .pop-copy h3{font-family:var(--title);font-size:clamp(36px,5vw,64px);line-height:.94;color:#fff7e6}\r\n#ocelotl-art-app .pop-copy p{margin-top:18px;color:var(--muted);font-size:15px;line-height:1.86;font-weight:300}\r\n#ocelotl-art-app .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}\r\n#ocelotl-art-app .chips span{\r\n border:1px solid rgba(240,220,180,.12);border-radius:999px;\r\n background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));\r\n backdrop-filter:blur(16px);\r\n color:#fff1d8;padding:8px 13px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;\r\n box-shadow:inset 0 1px 0 rgba(255,255,255,.12);\r\n}\r\n#ocelotl-art-app .pop-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}\r\n#ocelotl-art-app .close{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(240,220,180,.16);background:rgba(8,5,2,.65);color:#fff;font-size:20px;line-height:1;backdrop-filter:blur(12px);transition:.2s var(--ease);display:flex;align-items:center;justify-content:center;cursor:pointer}\r\n#ocelotl-art-app .close:hover{transform:scale(1.06) rotate(90deg);background:rgba(139,58,16,.8)}\r\n\r\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n#ocelotl-art-app .footer{padding:42px var(--px) 60px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--soft);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)}\r\n#ocelotl-art-app .footer-logo{width:52px;height:52px;object-fit:contain;filter:brightness(0) invert(1);opacity:.7;transition:opacity .2s}\r\n#ocelotl-art-app .footer-logo:hover{opacity:1}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:1200px){#ocelotl-art-app .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}\r\n@media(max-width:1024px){#ocelotl-art-app .split,#ocelotl-art-app .pop-body{grid-template-columns:1fr}#ocelotl-art-app .pop-image{min-height:360px}}\r\n@media(max-width:800px){\r\n #ocelotl-art-app{--nav:80px}\r\n #ocelotl-art-app .brand img{width:58px;height:58px}\r\n #ocelotl-art-app .brand strong{font-size:16px}\r\n}\r\n@media(max-width:620px){\r\n #ocelotl-art-app{--space:60px}\r\n #ocelotl-art-app .brand img{width:46px;height:46px}\r\n #ocelotl-art-app .brand strong{font-size:13px;letter-spacing:.12em}\r\n #ocelotl-art-app .lang-toggle button{min-height:34px;padding:6px 12px;font-size:10px}\r\n #ocelotl-art-app .hamburger{width:44px;height:44px}\r\n #ocelotl-art-app .hamburger-icon{width:20px;height:20px}\r\n #ocelotl-art-app .hamburger-icon span{width:20px}\r\n #ocelotl-art-app .hamburger-icon span:nth-child(1){transform:translateY(-7px)}\r\n #ocelotl-art-app .hamburger-icon span:nth-child(3){transform:translateY(7px)}\r\n #ocelotl-art-app .hero{padding:calc(var(--nav)+40px) var(--px) 56px}\r\n #ocelotl-art-app .gallery{grid-template-columns:1fr;gap:14px}\r\n #ocelotl-art-app .craft-card{min-height:390px}\r\n #ocelotl-art-app .filters{overflow-x:auto;flex-wrap:nowrap;margin-left:-16px;margin-right:-16px;padding:0 16px 6px;scrollbar-width:none}\r\n #ocelotl-art-app .filters::-webkit-scrollbar{display:none}\r\n #ocelotl-art-app .filter{flex:0 0 auto}\r\n #ocelotl-art-app .pop{width:100%;height:100svh;max-height:100svh;border-radius:0}\r\n #ocelotl-art-app .modal{padding:0}\r\n #ocelotl-art-app .pop-body{min-height:100svh;grid-template-columns:1fr}\r\n #ocelotl-art-app .pop-image{min-height:42svh}\r\n #ocelotl-art-app .pop-copy{padding:24px 18px 36px;align-content:start}\r\n #ocelotl-art-app .footer{flex-direction:column;text-align:center;padding:28px var(--px) 60px;gap:14px}\r\n #ocelotl-art-app .photo-stack{grid-template-columns:1fr}\r\n #ocelotl-art-app .photo-tile,#ocelotl-art-app .photo-tile.large{min-height:220px}\r\n}\r\n@media(prefers-reduced-motion:reduce){#ocelotl-art-app *{transition-duration:.01ms!important;animation-duration:.01ms!important}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"ocelotl-art-app\">\r\n<div class=\"app-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n<header class=\"nav\">\r\n <a class=\"brand\" href=\"https:\/\/ocelotlmx.com\/?page_id=1262\">\r\n <img decoding=\"async\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"76\" height=\"76\">\r\n <strong>Ocelotl<\/strong>\r\n <\/a>\r\n <nav><ul class=\"nav-links\">\r\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\">Men\u00fa<\/a><\/li>\r\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\">Mezcales<\/a><\/li>\r\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\">Carta de Mezcales<\/a><\/li>\r\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" class=\"active\">Artesan\u00edas<\/a><\/li>\r\n <li><a href=\"https:\/\/ocelotlmx.com\/?page_id=1262#visitanos\">Vis\u00edtanos<\/a><\/li>\r\n <\/ul><\/nav>\r\n <div class=\"nav-r\">\r\n <div class=\"lang-toggle\">\r\n <button class=\"on\" id=\"langEs\" type=\"button\" onclick=\"artSetLang('es')\">ES<\/button>\r\n <button id=\"langEn\" type=\"button\" onclick=\"artSetLang('en')\">EN<\/button>\r\n <\/div>\r\n <button class=\"hamburger\" id=\"artHbtn\" type=\"button\" aria-label=\"Men\u00fa\" onclick=\"artToggleDrawer()\">\r\n <div class=\"hamburger-icon\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n<\/header>\r\n\r\n<div class=\"drawer\" id=\"artDrawer\">\r\n <nav class=\"drawer-links\">\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" onclick=\"artCloseDrawer()\">Men\u00fa <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" onclick=\"artCloseDrawer()\">Mezcales <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=2151\" onclick=\"artCloseDrawer()\">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>\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1413\" onclick=\"artCloseDrawer()\">Artesan\u00edas <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1262#visitanos\" onclick=\"artCloseDrawer()\">Vis\u00edtanos <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n <\/nav>\r\n<\/div>\r\n\r\n<div class=\"page\">\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\" id=\"inicio\">\r\n <div class=\"hero-bg\">\r\n <img decoding=\"async\" src=\"https:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8639.jpg\"\r\n alt=\"Artesan\u00edas mexicanas Ocelotl\" loading=\"eager\">\r\n <\/div>\r\n <div class=\"hero-overlay\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero-c\">\r\n <div class=\"kicker\" data-es=\"Hecho en M\u00e9xico\" data-en=\"Made in Mexico\">Hecho en M\u00e9xico<\/div>\r\n <h1 data-es=\"Artesan\u00edas <em>con origen<\/em>\" data-en=\"Crafts <em>with origin<\/em>\">Artesan\u00edas <em>con origen<\/em><\/h1>\r\n <p class=\"hero-copy\"\r\n data-es=\"De diferentes estados de la Rep\u00fablica, traemos artesan\u00edas representativas y significativas, trabajando junto con artesanos para mantener un precio justo para ambas partes.\"\r\n data-en=\"From different states of Mexico, we bring representative and meaningful crafts, working alongside artisans to maintain fair prices for both sides.\">\r\n De diferentes estados de la Rep\u00fablica, traemos artesan\u00edas representativas y significativas, trabajando junto con artesanos para mantener un precio justo para ambas partes.\r\n <\/p>\r\n <div class=\"hero-btns\">\r\n <a class=\"btn primary\" href=\"#galeria\" data-es=\"Ver piezas\" data-en=\"See pieces\">Ver piezas<\/a>\r\n <a class=\"btn\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\" target=\"_blank\" rel=\"noopener\"\r\n data-es=\"C\u00f3mo llegar\" data-en=\"Get directions\">C\u00f3mo llegar<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- STORY -->\r\n<section class=\"section\">\r\n <div class=\"split\">\r\n <div class=\"glass-panel\">\r\n <div class=\"kicker\" data-es=\"Artesan\u00edas Ocelotl\" data-en=\"Ocelotl crafts\">Artesan\u00edas Ocelotl<\/div>\r\n <h2 data-es=\"Artesan\u00edas <em>con historia<\/em>\" data-en=\"Crafts <em>with history<\/em>\">Artesan\u00edas <em>con historia<\/em><\/h2>\r\n <p data-es=\"De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales. Trabajamos directamente con artesanos para mantener un precio justo tanto para ellos como para quienes visitan Ocelotl.\"\r\n data-en=\"From different regions of Mexico, we select representative crafts based on their history, materials and traditional techniques. We work directly with artisans to maintain fair prices for both makers and visitors.\">\r\n De diferentes estados de la Rep\u00fablica Mexicana, seleccionamos artesan\u00edas representativas por su historia, materiales y t\u00e9cnicas tradicionales. Trabajamos directamente con artesanos para mantener un precio justo tanto para ellos como para quienes visitan Ocelotl.\r\n <\/p>\r\n <p data-es=\"Estos son solo algunos ejemplos de la colecci\u00f3n disponible en Ocelotl. La historia y elaboraci\u00f3n de cada pieza aparece al abrir su tarjeta.\"\r\n data-en=\"These are only some examples of the collection available at Ocelotl. Each piece's story and making process appears when opening its card.\">\r\n Estos son solo algunos ejemplos de la colecci\u00f3n disponible en Ocelotl. La historia y elaboraci\u00f3n de cada pieza aparece al abrir su tarjeta.\r\n <\/p>\r\n <span class=\"compact-note\" data-es=\"Conoce el proceso de cada pieza\" data-en=\"Discover each piece's process\">Conoce el proceso de cada pieza<\/span>\r\n <\/div>\r\n <div class=\"photo-stack\" aria-hidden=\"true\">\r\n <div class=\"photo-tile large\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8655.jpg\" alt=\"Artesan\u00eda barro Ocelotl\"><\/div>\r\n <div class=\"photo-tile\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8660.jpg\" alt=\"Artesan\u00eda mexicana Ocelotl\"><\/div>\r\n <div class=\"photo-tile\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8632.jpg\" alt=\"Piedra \u00f3nix\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- GALER\u00cdA -->\r\n<section class=\"section\" id=\"galeria\">\r\n <div class=\"section-head\">\r\n <div class=\"kicker\" data-es=\"Colecci\u00f3n de artesan\u00edas\" data-en=\"Craft collection\">Colecci\u00f3n de artesan\u00edas<\/div>\r\n <h2 data-es=\"Explora por <em>material<\/em>\" data-en=\"Explore by <em>material<\/em>\">Explora por <em>material<\/em><\/h2>\r\n <p class=\"lead\"\r\n data-es=\"Filtra la colecci\u00f3n y abre cada tarjeta para conocer la historia de cada pieza.\"\r\n data-en=\"Filter the collection and open each card to learn the story behind each piece.\">\r\n Filtra la colecci\u00f3n y abre cada tarjeta para conocer la historia de cada pieza.\r\n <\/p>\r\n <\/div>\r\n <div class=\"filters\">\r\n <button class=\"filter on\" type=\"button\" data-filter=\"all\" onclick=\"artFilter('all')\" data-es=\"Todo\" data-en=\"All\">Todo<\/button>\r\n <button class=\"filter\" type=\"button\" data-filter=\"barro\" onclick=\"artFilter('barro')\" data-es=\"Barro\" data-en=\"Clay\">Barro<\/button>\r\n <button class=\"filter\" type=\"button\" data-filter=\"piedra\" onclick=\"artFilter('piedra')\" data-es=\"Piedra\" data-en=\"Stone\">Piedra<\/button>\r\n <button class=\"filter\" type=\"button\" data-filter=\"temporada\" onclick=\"artFilter('temporada')\" data-es=\"Temporada\" data-en=\"Seasonal\">Temporada<\/button>\r\n <\/div>\r\n <div class=\"gallery\" id=\"craftGrid\"><\/div>\r\n<\/section>\r\n\r\n<\/div><!-- \/page -->\r\n\r\n<footer class=\"footer\">\r\n <div data-es=\"Ocelotl \u00b7 Artesan\u00edas y Caf\u00e9 Mexicano\" data-en=\"Ocelotl \u00b7 Mexican Crafts and Coffee\">Ocelotl \u00b7 Artesan\u00edas y Caf\u00e9 Mexicano<\/div>\r\n <img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\"footer-logo\" src=\"http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/02\/cropped-Asset-1.png\" alt=\"Ocelotl\" width=\"52\" height=\"52\">\r\n <div>\r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1174\" data-es=\"Men\u00fa\" data-en=\"Menu\">Men\u00fa<\/a>\r\n  \u00b7 \r\n <a href=\"https:\/\/ocelotlmx.com\/?page_id=1357\" data-es=\"Mezcales\" data-en=\"Mezcals\">Mezcales<\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<!-- MODAL -->\r\n<div class=\"modal\" id=\"craftModal\" role=\"dialog\" aria-modal=\"true\">\r\n <div class=\"pop\">\r\n <button class=\"close\" type=\"button\" onclick=\"artCloseCraft()\" aria-label=\"Cerrar\">\u2715<\/button>\r\n <div class=\"pop-body\">\r\n <div class=\"pop-image\"><img decoding=\"async\" id=\"modalImg\" src=\"\" alt=\"\"><\/div>\r\n <div class=\"pop-copy\">\r\n <small id=\"modalCat\"><\/small>\r\n <h3 id=\"modalTitle\"><\/h3>\r\n <p id=\"modalText\"><\/p>\r\n <div class=\"chips\" id=\"modalChips\"><\/div>\r\n <div class=\"pop-actions\">\r\n <a class=\"btn primary\" href=\"https:\/\/ocelotlmx.com\/?page_id=1262#visitanos\"\r\n data-es=\"Vis\u00edtanos\" data-en=\"Visit us\">Vis\u00edtanos<\/a>\r\n <a class=\"btn\" href=\"https:\/\/maps.app.goo.gl\/K4rdaktjiBRr7Cyb7?g_st=ic\"\r\n target=\"_blank\" rel=\"noopener\"\r\n data-es=\"C\u00f3mo llegar\" data-en=\"Get directions\">C\u00f3mo llegar<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/div><!-- \/ocelotl-art-app -->\r\n\r\n<script>\r\n(function(){\r\n\"use strict\";\r\nvar app=document.getElementById('ocelotl-art-app');\r\nvar LANG='es',activeFilter='all';\r\nvar $=function(s){return app.querySelector(s)};\r\nvar esc=function(v){return String(v||'').replace(\/[&<>\"']\/g,function(m){return{'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[m]})};\r\nfunction t(obj){return obj[LANG]||obj.es}\r\n\r\nvar CRAFTS=[\r\n {cat:'barro',img:'http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8655.jpg',\r\n es:{title:'Catrinas',cat:'Barro',\r\n text:'Hechas a base de tres barros, mezclados y purgados para evitar impurezas. Despu\u00e9s se amasa el barro y se fabrica pieza por pieza. Tiempo aproximado de elaboraci\u00f3n: 10 d\u00edas.',\r\n chips:['3 barros','10 d\u00edas','Pieza a pieza']},\r\n en:{title:'Catrinas',cat:'Clay',\r\n text:'Made with a blend of three clays purified to remove impurities. Each piece is kneaded and shaped by hand. Approximate production time: 10 days.',\r\n chips:['3 clays','10 days','Piece by piece']}},\r\n\r\n {cat:'barro',img:'http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8600.jpg',\r\n es:{title:'Jarros cafeteros',cat:'Barro',\r\n text:'Hechos en barro, decorados a mano y horneados a alta temperatura para mejorar la calidad y resistencia del material. Tiempo aproximado de elaboraci\u00f3n: 8 d\u00edas.',\r\n chips:['Decorados a mano','8 d\u00edas','Alta temperatura']},\r\n en:{title:'Coffee mugs',cat:'Clay',\r\n text:'Clay mugs decorated by hand and fired at high temperature to improve quality and resistance. Approximate production time: 8 days.',\r\n chips:['Hand painted','8 days','High-fired']}},\r\n\r\n {cat:'barro',img:'http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8613.jpg',\r\n es:{title:'R\u00e9plicas prehisp\u00e1nicas',cat:'Barro',\r\n text:'Hechas en barro con proceso mixto: molde y pastillaje. Pintadas con colores vegetales y horneadas para mayor resistencia. Tiempo aproximado: 1 a 2 semanas.',\r\n chips:['Barro','1\u20132 semanas','Colores vegetales']},\r\n en:{title:'Pre-Hispanic replicas',cat:'Clay',\r\n text:'Made in clay with a mixed process: mold and hand-built details. Painted with vegetal colors and fired for greater resistance.',\r\n chips:['Clay','1\u20132 weeks','Vegetal colors']}},\r\n\r\n {cat:'barro',img:'https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.47.22-2.jpeg',\r\n es:{title:'Cazuelas, platos y jarras',cat:'Barro',\r\n text:'Piezas hechas en barro a mano. Se utilizan moldes, se dejan secar al sol, se decoran y se hornean a altas temperaturas. Tiempo aproximado: 8 d\u00edas.',\r\n chips:['Mesa','8 d\u00edas','Secado al sol']},\r\n en:{title:'Casseroles, plates & jars',cat:'Clay',\r\n text:'Handmade clay pieces shaped with molds, sun-dried, decorated and fired at high temperature for everyday use.',\r\n chips:['Tableware','8 days','Sun dried']}},\r\n\r\n {cat:'temporada',img:'http:\/\/ocelotlmx.com\/wp-content\/uploads\/2022\/03\/DSC_8597.jpg',\r\n es:{title:'Mezcaleros',cat:'Temporada',\r\n text:'Mezcaleros de diferentes regiones y diferentes materiales.',\r\n chips:['Varias regiones','Diferentes materiales']},\r\n en:{title:'Mezcal cups',cat:'Seasonal',\r\n text:'Mezcal cups from different regions and different materials.',\r\n chips:['Various regions','Different materials']}},\r\n\r\n {cat:'piedra',img:'https:\/\/ocelotlmx.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-03-at-12.28.33.jpeg',\r\n es:{title:'Piezas de piedra \u00f3nix',cat:'Piedra \u00f3nix',\r\n text:'Originarias de Puebla y hechas a mano. Desde la selecci\u00f3n de la piedra en bruto, tallado y armado de piezas como m\u00e1scaras, l\u00e1mparas, pipas y juegos de ajedrez. Tiempo aproximado: 15 d\u00edas.',\r\n chips:['Puebla','15 d\u00edas','\u00d3nix']},\r\n en:{title:'Onyx stone pieces',cat:'Stone',\r\n text:'Originally from Puebla, made by hand. The process goes from selecting raw stone to carving and assembling masks, lamps, pipes and chess sets.',\r\n chips:['Puebla','15 days','Onyx']}},\r\n];\r\n\r\nfunction renderCrafts(){\r\n $('#craftGrid').innerHTML=CRAFTS.map(function(craft,i){\r\n var d=t(craft);\r\n var hidden=activeFilter!=='all'&&activeFilter!==craft.cat;\r\n var soldOut=craft.soldOut===true;\r\n return '<button class=\"craft-card'+(soldOut?' sold-out':'')+'\" type=\"button\"'\r\n +(hidden?' hidden':'')\r\n +' '+(soldOut?'disabled':'')\r\n +' onclick=\"'+(soldOut?'':'artOpenCraft('+i+')')+'\"><img decoding=\"async\" loading=\"lazy\" src=\"'+esc(craft.img)+'\" alt=\"'+esc(d.title)+'\">'\r\n +(soldOut?'<span class=\"soldout-badge\">'+(LANG==='es'?'AGOTADO':'SOLD OUT')+'<\/span>':'')\r\n +'<span class=\"card-body\">'\r\n +'<small>'+esc(d.cat)+'<\/small>'\r\n +'<h3>'+esc(d.title)+'<\/h3>'\r\n +'<p>'+esc(d.text)+'<\/p>'\r\n +'<span class=\"open-hint\">'+(LANG==='es'?'Ver detalles \u2192':'View details \u2192')+'<\/span>'\r\n +'<\/span>'\r\n +'<\/button>';\r\n }).join('');\r\n}\r\n\r\nwindow.artFilter=function(filter){\r\n activeFilter=filter;\r\n app.querySelectorAll('.filter').forEach(function(b){b.classList.toggle('on',b.dataset.filter===filter)});\r\n renderCrafts();\r\n};\r\n\r\nwindow.artOpenCraft=function(i){\r\n var craft=CRAFTS[i],d=t(craft);\r\n $('#modalImg').src=craft.img;$('#modalImg').alt=d.title;\r\n $('#modalCat').textContent=d.cat;\r\n $('#modalTitle').textContent=d.title;\r\n $('#modalText').textContent=d.text;\r\n $('#modalChips').innerHTML=d.chips.map(function(c){return'<span>'+esc(c)+'<\/span>'}).join('');\r\n var modal=$('#craftModal');\r\n modal.classList.add('on');\r\n modal.setAttribute('aria-hidden','false');\r\n};\r\n\r\nwindow.artCloseCraft=function(){\r\n var modal=$('#craftModal');\r\n modal.classList.remove('on');\r\n modal.setAttribute('aria-hidden','true');\r\n};\r\n\r\nwindow.artSetLang=function(l){\r\n LANG=l;document.documentElement.lang=l;\r\n document.title=l==='en'?'Crafts \u2014 Ocelotl':'Artesan\u00edas \u2014 Ocelotl';\r\n $('#langEs').classList.toggle('on',l==='es');\r\n $('#langEn').classList.toggle('on',l==='en');\r\n app.querySelectorAll('[data-es][data-en]').forEach(function(el){\r\n var v=el.getAttribute('data-'+l);if(!v)return;\r\n if(v.indexOf('<')>=0)el.innerHTML=v;else el.textContent=v;\r\n });\r\n renderCrafts();\r\n};\r\n\r\nwindow.artToggleDrawer=function(){\r\n var d=$('#artDrawer'),h=$('#artHbtn');\r\n if(!d||!h)return;\r\n var open=d.classList.toggle('open');\r\n h.classList.toggle('open',open);\r\n document.body.style.overflow=open?'hidden':'';\r\n};\r\nwindow.artCloseDrawer=function(){\r\n var d=$('#artDrawer'),h=$('#artHbtn');\r\n if(d)d.classList.remove('open');\r\n if(h)h.classList.remove('open');\r\n document.body.style.overflow='';\r\n};\r\n\r\n$('#craftModal').addEventListener('click',function(e){if(e.target===$('#craftModal'))artCloseCraft()});\r\nwindow.addEventListener('resize',function(){if(window.innerWidth>900)artCloseDrawer()});\r\ndocument.addEventListener('keydown',function(e){\r\n if(e.key==='Escape'){\r\n if($('#craftModal').classList.contains('on'))artCloseCraft();\r\n else artCloseDrawer();\r\n }\r\n});\r\n\r\nrenderCrafts();\r\n})();\r\n<\/script>\r\n<\/body>\r\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>Artesan\u00edas \u2014 Ocelotl Ocelotl Men\u00fa Mezcales Carta de Mezcales Artesan\u00edas Vis\u00edtanos ES EN Men\u00fa Mezcales Carta de Mezcales Artesan\u00edas Vis\u00edtanos Hecho en M\u00e9xico<\/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-1413","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1413","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=1413"}],"version-history":[{"count":30,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1413\/revisions"}],"predecessor-version":[{"id":2693,"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=\/wp\/v2\/pages\/1413\/revisions\/2693"}],"wp:attachment":[{"href":"https:\/\/ocelotlmx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}