{"id":1040,"date":"2026-04-07T14:03:03","date_gmt":"2026-04-07T14:03:03","guid":{"rendered":"https:\/\/digital10post.com\/?page_id=1040"},"modified":"2026-05-20T15:27:20","modified_gmt":"2026-05-20T15:27:20","slug":"produccion-webgl","status":"publish","type":"page","link":"https:\/\/digital10post.com\/en\/produccion-webgl\/","title":{"rendered":"produccion webgl"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nProducci\u00f3n WebGL | Digital 10 \u2014 Estudio 3D<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;900&family=Bebas+Neue&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root{--mg:#d400a8;--mg2:#ff40cc;--pur:#7a00aa;--acc:#00c8ff;--acc2:#80e8ff;--bg:#050008;--bg2:#0a0010;--bg3:#0f0018;--card:#130019;--dim:rgba(255,255,255,.6);--nav:68px}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml {\r\n overflow-x: clip;\r\n overflow-y: scroll;\r\n background: var(--bg);\r\n scroll-behavior: smooth;\r\n max-width: 100%;\r\n}\r\n\r\nbody {\r\n font-family: 'Poppins', sans-serif;\r\n color: #fff;\r\n overflow-x: clip;\r\n background: var(--bg);\r\n min-height: 100%;\r\n -webkit-font-smoothing: antialiased;\r\n max-width: 100%;\r\n width: 100%;\r\n position: relative;\r\n}\r\n \r\nimg{display:block;max-width:100%}\r\nbutton{cursor:pointer;font-family:inherit}\r\na{text-decoration:none;color:inherit}\r\nbody::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");background-size:160px;opacity:.022}\r\n.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);display:flex;justify-content:space-between;align-items:center;padding:0 5%;background:rgba(5,0,8,.88);backdrop-filter:blur(20px);z-index:1000;border-bottom:1px solid rgba(212,0,168,.12)}\r\n.nav-logo{display:flex;align-items:center;height:100%;flex-shrink:0}\r\n.nav-logo img{height:42px;width:auto;object-fit:contain;transition:filter .3s,transform .3s}\r\n.nav-logo:hover img{filter:drop-shadow(0 0 12px rgba(0,200,255,.55));transform:scale(1.04)}\r\n.nav-links{display:flex;gap:5px;list-style:none;align-items:center}\r\n.nav-links a{padding:6px 13px;color:rgba(255,255,255,.7);font-size:.84rem;font-weight:500;border-radius:6px;transition:color .2s,background .2s;position:relative;white-space:nowrap}\r\n.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(212,0,168,.08)}\r\n.nav-links a.active::after{content:'';position:absolute;bottom:-1px;left:13px;width:calc(100% - 26px);height:2px;background:var(--acc);border-radius:2px}\r\n.hamburger{display:none;width:28px;height:18px;flex-direction:column;justify-content:space-between;background:none;border:none;padding:0;flex-shrink:0;z-index:1100}\r\n.hamburger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .35s,opacity .35s}\r\n.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}\r\n.hamburger.open span:nth-child(2){opacity:0}\r\n.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}\r\n.hero{position:relative;width:100%;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg2);padding-top:var(--nav)}\r\n.hero-bg{position:absolute;inset:0;z-index:0}\r\n.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:brightness(.12) saturate(1.5);transform:scale(1.08);animation:hZoom 18s ease-out forwards}\r\n@keyframes hZoom{to{transform:scale(1.01)}}\r\n.hero-vgn{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 65% 75% at 100% 25%,rgba(0,200,255,.15) 0%,transparent 60%),radial-gradient(ellipse 45% 55% at 0% 72%,rgba(212,0,168,.14) 0%,transparent 55%),linear-gradient(180deg,rgba(5,0,8,.82) 0%,rgba(5,0,8,.1) 28%,rgba(5,0,8,.05) 54%,rgba(5,0,8,.58) 74%,var(--bg2) 91%,var(--bg2) 100%)}\r\n.hero-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);opacity:.35}\r\n.hero-pts{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}\r\n.pt{position:absolute;border-radius:50%;will-change:transform}\r\n@keyframes pt1{0%,100%{transform:translate(0,0) scale(1);opacity:.8}33%{transform:translate(38px,-28px) scale(1.3);opacity:.4}66%{transform:translate(-18px,18px) scale(.85);opacity:.9}}\r\n@keyframes pt2{0%,100%{transform:translate(0,0);opacity:.65}50%{transform:translate(-32px,22px);opacity:1}}\r\n@keyframes pt3{0%,100%{transform:translate(0,0) scale(1);opacity:.9}42%{transform:translate(26px,-20px) scale(1.45);opacity:.3}82%{transform:translate(-10px,14px) scale(.75);opacity:.7}}\r\n.pt1{width:5px;height:5px;background:var(--acc);box-shadow:0 0 14px 5px var(--acc);top:38%;left:7%;animation:pt1 7s ease-in-out infinite}\r\n.pt2{width:3px;height:3px;background:#ff80e0;box-shadow:0 0 10px 4px #ff80e0;top:60%;left:53%;animation:pt2 10s ease-in-out infinite 2s}\r\n.pt3{width:4px;height:4px;background:var(--mg);box-shadow:0 0 12px 5px var(--mg);top:22%;left:76%;animation:pt3 8s ease-in-out infinite 1s}\r\n.pt4{width:2px;height:2px;background:var(--acc2);box-shadow:0 0 8px 3px var(--acc2);top:70%;left:30%;animation:pt2 12s ease-in-out infinite 3s}\r\n.pt5{width:4px;height:4px;background:var(--mg2);box-shadow:0 0 12px 5px var(--mg2);top:45%;left:88%;animation:pt1 9s ease-in-out infinite .5s}\r\n.hero-cnt{position:relative;z-index:4;padding:0 5.5% 8%;width:100%}\r\n.hero-crumb{display:flex;align-items:center;gap:8px;font-size:.62rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:22px;opacity:0;animation:fuP .8s .2s forwards}\r\n.hero-crumb a{color:var(--acc);transition:opacity .2s}\r\n.hero-crumb a:hover{opacity:.7}\r\n.hero-crumb .sp{color:rgba(255,255,255,.18)}\r\n.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,10vw,10.5rem);line-height:.9;letter-spacing:-1px;margin-bottom:26px;opacity:0;animation:fuP .9s .35s forwards}\r\n.hero-title .t1{display:block;color:rgba(255,255,255,.08);font-size:.28em;letter-spacing:10px;font-family:'Poppins',sans-serif;font-weight:300;margin-bottom:.18em}\r\n.hero-title .t2{display:block;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 35%,var(--acc2) 62%,var(--acc) 83%,var(--mg) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 28px rgba(0,200,255,.22))}\r\n.hero-sub{max-width:510px;color:var(--dim);font-size:clamp(.8rem,1.3vw,.94rem);line-height:1.8;margin-bottom:38px;opacity:0;animation:fuP .9s .5s forwards}\r\n.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;opacity:0;animation:fuP .9s .65s forwards}\r\n.btn-g{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--acc),#0070aa);color:#fff;font-weight:700;font-size:.83rem;letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 6px 32px rgba(0,200,255,.4);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}\r\n.btn-g::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent);opacity:0;transition:opacity .3s}\r\n.btn-g:hover{transform:translateY(-3px);box-shadow:0 12px 44px rgba(0,200,255,.65)}\r\n.btn-g:hover::before{opacity:1}\r\n.btn-o{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;border:1px solid rgba(0,200,255,.35);background:transparent;color:rgba(255,255,255,.78);font-weight:600;font-size:.83rem;letter-spacing:1.5px;text-transform:uppercase;transition:transform .3s,border-color .3s,color .3s,background .3s,box-shadow .3s}\r\n.btn-o:hover{transform:translateY(-3px);border-color:var(--acc);color:#fff;background:rgba(0,200,255,.06);box-shadow:0 6px 24px rgba(0,200,255,.2)}\r\n.sc-ind{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;animation:fadeIn 1s 1.2s forwards}\r\n.sc-ind span{font-size:.55rem;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.22)}\r\n.sc-line{width:1px;height:38px;background:linear-gradient(to bottom,rgba(0,200,255,.6),transparent);animation:scLine 2s ease-in-out infinite}\r\n@keyframes scLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}\r\n@keyframes fuP{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\r\n.rv{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}\r\n.rv.in{opacity:1;transform:translateY(0)}\r\n.rvl{opacity:0;transform:translateX(-38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}\r\n.rvl.in{opacity:1;transform:translateX(0)}\r\n.rvr{opacity:0;transform:translateX(38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}\r\n.rvr.in{opacity:1;transform:translateX(0)}\r\n.rvs{opacity:0;transform:scale(.92);transition:opacity .65s,transform .65s cubic-bezier(.22,1,.36,1)}\r\n.rvs.in{opacity:1;transform:scale(1)}\r\n.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}\r\n.chip{display:inline-flex;align-items:center;gap:8px;font-size:.6rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--acc);margin-bottom:10px}\r\n.chip::before{content:'';width:22px;height:1px;background:var(--acc)}\r\n.sh{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:800;line-height:1.15;margin-bottom:14px}\r\n.sh span{background:linear-gradient(90deg,var(--acc2),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.proc-sec{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);padding:110px 5.5% 100px;position:relative;overflow:hidden}\r\n.proc-hd{text-align:center;margin-bottom:72px}\r\n.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1}\r\n.pst{position:relative;background:rgba(19,0,25,.72);border:1px solid rgba(0,200,255,.1);border-radius:20px;padding:34px 22px;text-align:center;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;overflow:hidden}\r\n.pst::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(0,200,255,.08) 0%,transparent 62%);opacity:0;transition:opacity .4s}\r\n.pst:hover{transform:translateY(-10px);border-color:rgba(0,200,255,.35);box-shadow:0 24px 60px rgba(0,150,200,.22)}\r\n.pst:hover::before{opacity:1}\r\n.pst:not(:last-child)::after{content:'\u203a';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:rgba(0,200,255,.3);z-index:10;font-weight:900;line-height:1}\r\n.pst-n{font-family:'Bebas Neue',sans-serif;font-size:4.5rem;line-height:1;color:rgba(0,200,255,.06);position:absolute;top:8px;right:12px;transition:color .4s}\r\n.pst:hover .pst-n{color:rgba(0,200,255,.13)}\r\n.pst-ico{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,rgba(0,200,255,.14),rgba(212,0,168,.07));border:1px solid rgba(0,200,255,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:background .4s,box-shadow .4s,transform .4s}\r\n.pst:hover .pst-ico{background:linear-gradient(135deg,rgba(0,200,255,.28),rgba(212,0,168,.18));box-shadow:0 0 22px rgba(0,200,255,.32);transform:rotate(5deg) scale(1.07)}\r\n.pst-ico svg{width:24px;height:24px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}\r\n.pst h4{font-size:.86rem;font-weight:700;color:#fff;margin-bottom:9px;letter-spacing:.3px}\r\n.pst p{font-size:.7rem;color:var(--dim);line-height:1.65}\r\n.viewer-sec{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);padding:110px 5.5% 100px;position:relative;overflow:hidden}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FIX VISOR M\u00d3VIL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* Fuerza que la secci\u00f3n nunca desbore *\/\r\n.viewer-sec {\r\n overflow: hidden !important;\r\n width: 100% !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n\/* El layout en tablet\/mobile: columna \u00fanica *\/\r\n.viewer-layout {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n box-sizing: border-box !important;\r\n overflow: hidden !important;\r\n}\r\n\r\n\/* El visor en s\u00ed nunca sale del padre *\/\r\n.viewer-box {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n min-width: 0 !important;\r\n box-sizing: border-box !important;\r\n overflow: hidden !important;\r\n}\r\n\r\n\/* El canvas respeta el tama\u00f1o del contenedor *\/\r\n.viewer-canvas {\r\n width: 100% !important;\r\n height: 100% !important;\r\n max-width: 100% !important;\r\n display: block !important;\r\n}\r\n\r\n\/* El panel lateral tampoco se desborda *\/\r\n.viewer-panel {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n min-width: 0 !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n\/* En pantallas \u22641024px ya ten\u00edas grid de 1 columna,\r\n pero el ancho fijo de 380px causaba el overflow *\/\r\n@media (max-width: 1024px) {\r\n .viewer-layout {\r\n grid-template-columns: 1fr !important;\r\n }\r\n .viewer-panel {\r\n grid-template-columns: 1fr 1fr;\r\n max-height: none;\r\n overflow-y: visible;\r\n }\r\n}\r\n\r\n\/* En m\u00f3vil peque\u00f1o, el panel va a 1 columna *\/\r\n@media (max-width: 600px) {\r\n .viewer-panel {\r\n grid-template-columns: 1fr !important;\r\n }\r\n .viewer-sec {\r\n padding: 70px 4% 80px !important;\r\n }\r\n \/* Aspect ratio m\u00e1s cuadrado en m\u00f3vil para aprovechar el espacio *\/\r\n .viewer-box {\r\n aspect-ratio: 1 \/ 1 !important;\r\n min-height: 300px !important;\r\n }\r\n}\r\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 *\/\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FIX TAMA\u00d1O DESKTOP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (min-width: 1025px) {\r\n .viewer-layout {\r\n max-width: 980px !important;\r\n grid-template-columns: 1fr 320px !important;\r\n gap: 24px !important;\r\n }\r\n .viewer-box {\r\n aspect-ratio: 4 \/ 3 !important;\r\n min-height: 0 !important;\r\n max-height: 480px !important;\r\n }\r\n .viewer-sec {\r\n padding: 80px 5.5% 80px !important;\r\n }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .viewer-layout {\r\n max-width: 1060px !important;\r\n grid-template-columns: 1fr 340px !important;\r\n }\r\n .viewer-box {\r\n max-height: 520px !important;\r\n }\r\n}\r\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 *\/\r\n.viewer-sec::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.3),transparent)}\r\n.viewer-hd{text-align:center;margin-bottom:52px}\r\n.viewer-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;max-width:1180px;margin:0 auto;align-items:start}\r\n.viewer-box{position:relative;background:rgba(10,0,20,.7);border:1px solid rgba(0,200,255,.18);border-radius:24px;overflow:hidden;aspect-ratio:4\/3;min-height:380px}\r\n.viewer-canvas{display:block;width:100%;height:100%;touch-action:none}\r\n.viewer-default-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(5,0,14,.9);z-index:15;transition:opacity .5s}\r\n.viewer-default-loading.hidden{opacity:0;pointer-events:none}\r\n.vdl-spinner{width:48px;height:48px;border:2px solid rgba(0,200,255,.15);border-top-color:var(--acc);border-radius:50%;animation:spin 0.9s linear infinite}\r\n@keyframes spin{to{transform:rotate(360deg)}}\r\n.vdl-text{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.4)}\r\n.vdl-bar-wrap{width:180px;height:2px;background:rgba(0,200,255,.1);border-radius:2px;overflow:hidden}\r\n.vdl-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--acc),var(--mg));border-radius:2px;transition:width .3s}\r\n.viewer-controls-bar{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:linear-gradient(to top,rgba(5,0,14,.9),transparent);display:flex;align-items:center;justify-content:space-between;gap:8px;opacity:0;transition:opacity .35s}\r\n.viewer-box:hover .viewer-controls-bar,.viewer-box.loaded .viewer-controls-bar{opacity:1}\r\n.vc-hint{font-size:.56rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.25);display:flex;align-items:center;gap:8px}\r\n.vc-hint svg{width:14px;height:14px;stroke:rgba(255,255,255,.25);fill:none;stroke-width:1.8}\r\n.vc-btns{display:flex;gap:6px}\r\n.vc-btn{width:30px;height:30px;border-radius:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.2);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}\r\n.vc-btn:hover{background:rgba(0,200,255,.18);border-color:var(--acc);color:#fff}\r\n.vc-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}\r\n.viewer-panel{background:rgba(13,0,22,.75);border:1px solid rgba(0,200,255,.14);border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:22px;max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,200,255,.2) transparent}\r\n.viewer-panel::-webkit-scrollbar{width:4px}\r\n.viewer-panel::-webkit-scrollbar-thumb{background:rgba(0,200,255,.2);border-radius:2px}\r\n.vp-section h5{font-size:.66rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:13px}\r\n.vp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}\r\n.vp-row label{font-size:.72rem;color:rgba(255,255,255,.55);white-space:nowrap}\r\ninput[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;background:rgba(0,200,255,.15);outline:none;cursor:pointer}\r\ninput[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px rgba(0,200,255,.5);cursor:pointer}\r\ninput[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:none;box-shadow:0 0 8px rgba(0,200,255,.5)}\r\n.vp-val{font-size:.7rem;font-weight:600;color:var(--acc);min-width:28px;text-align:right}\r\n.vp-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}\r\n.vp-toggle-row span{font-size:.72rem;color:rgba(255,255,255,.55)}\r\n.toggle{position:relative;width:34px;height:18px;cursor:pointer}\r\n.toggle input{opacity:0;width:0;height:0}\r\n.tog-sl{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:10px;transition:background .3s}\r\n.tog-sl::before{content:'';position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .3s,background .3s}\r\n.toggle input:checked+.tog-sl{background:var(--acc)}\r\n.toggle input:checked+.tog-sl::before{transform:translateX(16px)}\r\n.vp-colors{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}\r\n.clr{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .2s,border-color .2s}\r\n.clr:hover,.clr.active{transform:scale(1.15);border-color:#fff}\r\n.vp-info{font-size:.64rem;color:rgba(255,255,255,.22);line-height:1.7}\r\n.vp-info strong{color:rgba(255,255,255,.45)}\r\n.default-badge{position:absolute;top:14px;left:14px;z-index:12;background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.35);backdrop-filter:blur(10px);border-radius:20px;padding:5px 13px;font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc2);display:none}\r\n.viewer-box.loaded .default-badge{display:block}\r\n.debug-panel { display: none !important; }\r\n.viewer-box.loaded .debug-panel{display:block}\r\n.debug-panel p{line-height:1.8}\r\n.debug-panel span{color:var(--acc2)}\r\n.lb{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,0,6,.0);backdrop-filter:blur(0px);pointer-events:none;transition:background .38s,backdrop-filter .38s}\r\n.lb.open{background:rgba(2,0,6,.88);backdrop-filter:blur(18px);pointer-events:all}\r\n.lb-inner{position:relative;max-width:min(92vw,1100px);max-height:90svh;display:flex;flex-direction:column;align-items:center;transform:scale(.84) translateY(22px);opacity:0;transition:transform .42s cubic-bezier(.34,1.4,.64,1),opacity .35s}\r\n.lb.open .lb-inner{transform:scale(1) translateY(0);opacity:1}\r\n.lb-img-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,200,255,.22),0 32px 80px rgba(0,0,0,.75),0 0 60px rgba(0,200,255,.1);line-height:0}\r\n.lb-img{display:block;max-width:min(92vw,1100px);max-height:82svh;width:auto;height:auto;object-fit:contain;border-radius:18px}\r\n.cc-sec{background:linear-gradient(180deg,var(--bg) 0%,var(--bg3) 100%);padding:110px 0 90px;overflow:hidden}\r\n.cc-hd{text-align:center;padding:0 5%;margin-bottom:46px}\r\n.cc-wrap {\r\n position: relative;\r\n padding: 18px 0 36px;\r\n overflow: hidden;\r\n}\r\n.cc-wrap::before,.cc-wrap::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:10;pointer-events:none}\r\n.cc-wrap::before{left:0;background:linear-gradient(90deg,var(--bg3),transparent)}\r\n.cc-track::after {\r\n content: '';\r\n flex: 0 0 5%;\r\n display: block;\r\n}\r\n.cc-track {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n gap: 16px;\r\n padding: 10px 2% 10px 14%;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: none;\r\n cursor: default;\r\n justify-content: center;\r\n box-sizing: content-box;\r\n}\r\n.cc-track::-webkit-scrollbar { display: none; }\r\n.cc-track:active { cursor: grabbing; }\r\n.cc {\r\n flex: 0 0 auto;\r\n width: 200px;\r\n scroll-snap-align: start;\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--card);\r\n border: 1px solid rgba(212,0,168,.1);\r\n transition: transform .45s cubic-bezier(.34,1.4,.64,1), box-shadow .45s, border-color .45s;\r\n will-change: transform;\r\n aspect-ratio: 3\/4;\r\n}\r\n@media(max-width:1400px){\r\n .cc-track {\r\n justify-content: flex-start;\r\n cursor: grab;\r\n }\r\n .cc-track:active { cursor: grabbing; }\r\n}\r\n\r\n@media(max-width:650px){\r\n .cc { width: 220px; }\r\n}\r\n.cc:hover{transform:translateY(-14px) scale(1.025);box-shadow:0 28px 60px rgba(0,150,200,.28),0 0 0 1px rgba(0,200,255,.38);border-color:rgba(0,200,255,.42)}\r\n.cc-img{width:100%;aspect-ratio:3\/4;object-fit:cover;transition:filter .45s;filter:saturate(1.1)}\r\n.cc:hover .cc-img{filter:saturate(1.4) brightness(1.06)}\r\n.cc-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none}\r\n.cc:hover .cc-shine{opacity:1}\r\n.cc-info{position:absolute;bottom:0;left:0;right:0;padding:46px 14px 16px;background:linear-gradient(to top,rgba(5,0,14,.96) 0%,transparent 100%)}\r\n.cc-badge{position:absolute;top:12px;right:11px;background:rgba(5,0,14,.75);border:1px solid rgba(0,200,255,.4);backdrop-filter:blur(10px);border-radius:20px;padding:4px 11px;font-size:.56rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc2)}\r\n.cc-name{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.2}\r\n.cc-cli{font-size:.66rem;color:rgba(255,255,255,.42)}\r\n.cc-cli span{color:var(--acc)}\r\n.drag-h{text-align:center;margin-top:14px;padding:0 5%;font-size:.6rem;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;gap:12px}\r\n.drag-h::before,.drag-h::after{content:'';flex:1;max-width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.22))}\r\n.drag-h::after{transform:scaleX(-1)}\r\n.cta-sec{background:var(--bg2);padding:110px 5.5%;text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(0,200,255,.1)}\r\n.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:380px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse,rgba(0,200,255,.07) 0%,transparent 65%)}\r\n.cta-sec h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5.5vw,4.8rem);line-height:1;letter-spacing:1px;background:linear-gradient(90deg,#fff,var(--acc2),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px;position:relative}\r\n.cta-sec p{color:var(--dim);font-size:clamp(.82rem,1.4vw,.96rem);line-height:1.8;max-width:520px;margin:0 auto 38px;position:relative}\r\n.cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;position:relative}\r\n.soc-bar{display:flex;justify-content:center;align-items:center;gap:13px;padding:38px 20px 20px;background:var(--bg);flex-wrap:wrap}\r\n.soc-i{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.2);border-radius:13px;transition:transform .3s,box-shadow .3s,border-color .3s,background .3s}\r\n.soc-i img{width:22px;height:22px;object-fit:contain;transition:transform .3s}\r\n.soc-i:hover{transform:scale(1.13) translateY(-2px);border-color:var(--acc);background:rgba(0,200,255,.12);box-shadow:0 0 22px rgba(0,200,255,.3)}\r\n.soc-i:hover img{transform:scale(1.1)}\r\n.footer{background:var(--bg);text-align:center;padding:34px 20px;color:rgba(255,255,255,.18);font-size:.7rem;border-top:1px solid rgba(0,200,255,.06);line-height:2}\r\n.m-bd{position:fixed;inset:0;z-index:2000;background:rgba(4,0,10,.82);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}\r\n.m-bd.open{opacity:1;pointer-events:all}\r\n.m-box{background:linear-gradient(145deg,#160024,#0d0019);border:1px solid rgba(0,200,255,.22);border-radius:24px;padding:42px 38px 38px;width:100%;max-width:510px;position:relative;box-shadow:0 0 70px rgba(0,200,255,.1),0 30px 80px rgba(0,0,0,.7);transform:translateY(24px) scale(.96);transition:transform .4s cubic-bezier(.34,1.4,.64,1)}\r\n.m-bd.open .m-box{transform:translateY(0) scale(1)}\r\n.m-close{position:absolute;top:15px;right:15px;width:33px;height:33px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.2);border-radius:50%;cursor:pointer;color:rgba(255,255,255,.52);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,border-color .25s;padding:0}\r\n.m-close:hover{background:rgba(0,200,255,.18);color:#fff;border-color:var(--acc)}\r\n.m-close svg{width:14px;height:14px}\r\n.m-chip{font-size:.66rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--acc);margin:0 0 7px}\r\n.m-h{font-size:clamp(1.15rem,2.8vw,1.6rem);font-weight:700;margin:0 0 26px;color:#fff;line-height:1.2}\r\n.m-h span{background:linear-gradient(90deg,var(--acc2),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.m-form{display:flex;flex-direction:column;gap:13px}\r\n.m-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}\r\n.m-f{display:flex;flex-direction:column;gap:5px}\r\n.m-f label{font-size:.68rem;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.42);text-transform:uppercase}\r\n.m-f input,.m-f textarea{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.14);border-radius:10px;padding:11px 13px;color:#fff;font-family:'Poppins',sans-serif;font-size:.86rem;outline:none;resize:none;transition:border-color .25s,box-shadow .25s,background .25s}\r\n.m-f input::placeholder,.m-f textarea::placeholder{color:rgba(255,255,255,.18)}\r\n.m-f input:focus,.m-f textarea:focus{border-color:var(--acc);background:rgba(0,200,255,.04);box-shadow:0 0 0 3px rgba(0,200,255,.09)}\r\n.m-f textarea{min-height:105px;line-height:1.6}\r\n.m-send{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--acc),#0070aa);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.83rem;letter-spacing:1px;text-transform:uppercase;box-shadow:0 6px 28px rgba(0,200,255,.3);transition:transform .25s,box-shadow .25s,opacity .25s;margin-top:3px}\r\n.m-send:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(0,200,255,.5)}\r\n.m-send:disabled{opacity:.5;cursor:not-allowed;transform:none}\r\n.m-ok{display:none;flex-direction:column;align-items:center;text-align:center;padding:18px 0 8px}\r\n.m-ok.show{display:flex}\r\n.m-ok-i{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#0070aa);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 0 28px rgba(0,200,255,.38);animation:glow 2s infinite}\r\n@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(0,200,255,.3)}50%{box-shadow:0 0 38px rgba(0,200,255,.6)}}\r\n.m-ok-i svg{width:26px;height:26px;color:#fff}\r\n.m-ok h4{font-size:1.3rem;font-weight:700;margin:0 0 7px;color:#fff}\r\n.m-ok p{color:var(--dim);font-size:.86rem;line-height:1.7;margin:0}\r\n.hero-tech{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px;max-width:520px}\r\n.hero-tech .tpill{background:rgba(212,0,168,.08);border:1px solid rgba(212,0,168,.25);font-size:.68rem;display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:50px;font-weight:600;color:rgba(255,255,255,.62);transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s}\r\n.hero-tech .tpill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 6px var(--acc);flex-shrink:0;transition:box-shadow .3s,transform .3s}\r\n.hero-tech .tpill:hover{background:rgba(0,200,255,.12);border-color:rgba(0,200,255,.45);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,200,255,.2)}\r\n.hero-tech .tpill:hover::before{box-shadow:0 0 18px var(--acc);transform:scale(1.4)}\r\n.vp-section.stamp-section{border-top:1px solid rgba(0,200,255,.1);padding-top:18px;margin-top:2px}\r\n.stamp-tabs{display:flex;gap:6px;margin-bottom:14px}\r\n.stamp-tab{flex:1;padding:7px 10px;border-radius:8px;border:1px solid rgba(0,200,255,.18);background:transparent;color:rgba(255,255,255,.42);font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}\r\n.stamp-tab.active{background:rgba(0,200,255,.12);border-color:var(--acc);color:var(--acc)}\r\n.stamp-pane{display:none}\r\n.stamp-pane.active{display:flex;flex-direction:column;gap:10px}\r\n.stamp-input{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.14);border-radius:10px;padding:9px 12px;color:#fff;font-family:'Poppins',sans-serif;font-size:.82rem;outline:none;resize:none;transition:border-color .25s,background .25s}\r\n.stamp-input::placeholder{color:rgba(255,255,255,.2)}\r\n.stamp-input:focus{border-color:var(--acc);background:rgba(0,200,255,.04)}\r\n.stamp-color-row{display:flex;align-items:center;gap:8px}\r\n.stamp-color-row label{font-size:.65rem;color:rgba(255,255,255,.4);white-space:nowrap}\r\n.stamp-clr-pick{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,200,255,.25);cursor:pointer;padding:0;background:none;overflow:hidden}\r\n.stamp-clr-pick input[type=color]{width:200%;height:200%;margin:-25%;border:none;cursor:pointer;background:none}\r\n.stamp-font-row{display:flex;gap:6px;flex-wrap:wrap}\r\n.font-btn{padding:4px 9px;border-radius:6px;border:1px solid rgba(0,200,255,.15);background:transparent;color:rgba(255,255,255,.4);font-size:.6rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}\r\n.font-btn.active,.font-btn:hover{background:rgba(0,200,255,.1);border-color:var(--acc);color:#fff}\r\n.stamp-size-row{display:flex;align-items:center;gap:8px}\r\n.stamp-size-row label{font-size:.65rem;color:rgba(255,255,255,.4);white-space:nowrap;min-width:56px}\r\n.stamp-opacity-row{display:flex;align-items:center;gap:8px}\r\n.stamp-opacity-row label{font-size:.65rem;color:rgba(255,255,255,.4);white-space:nowrap;min-width:56px}\r\n.stamp-drop{border:1.5px dashed rgba(0,200,255,.28);border-radius:12px;padding:20px 14px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s;position:relative;overflow:hidden}\r\n.stamp-drop:hover,.stamp-drop.drag-over{border-color:var(--acc);background:rgba(0,200,255,.05)}\r\n.stamp-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}\r\n.stamp-drop-ico{width:32px;height:32px;margin:0 auto 8px;opacity:.4}\r\n.stamp-drop-ico svg{width:32px;height:32px;stroke:var(--acc);fill:none;stroke-width:1.5}\r\n.stamp-drop p{font-size:.65rem;color:rgba(255,255,255,.35);line-height:1.5}\r\n.stamp-drop p strong{color:var(--acc2);display:block;margin-bottom:2px;font-size:.7rem}\r\n.stamp-preview{display:none;position:relative;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.15)}\r\n.stamp-preview.show{display:block}\r\n.stamp-preview img{width:100%;height:80px;object-fit:contain;display:block}\r\n.stamp-preview-del{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(255,0,80,.7);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;line-height:1;transition:background .2s}\r\n.stamp-preview-del:hover{background:rgba(255,0,80,1)}\r\n.stamp-apply{width:100%;padding:9px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--acc),#0070aa);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 18px rgba(0,200,255,.3);transition:transform .2s,box-shadow .2s,opacity .2s;margin-top:4px}\r\n.stamp-apply:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,200,255,.5)}\r\n.stamp-apply:active{transform:translateY(0)}\r\n.stamp-clear{width:100%;padding:7px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.35);font-family:'Poppins',sans-serif;font-size:.68rem;cursor:pointer;transition:border-color .2s,color .2s}\r\n.stamp-clear:hover{border-color:rgba(255,100,100,.4);color:rgba(255,120,120,.7)}\r\n.stamp-hint{font-size:.6rem;color:rgba(255,255,255,.2);line-height:1.5;text-align:center;padding:4px 0}\r\n.back-tip{position:absolute;top:50px;left:14px;z-index:12;background:rgba(212,0,168,.18);border:1px solid rgba(212,0,168,.45);backdrop-filter:blur(10px);border-radius:20px;padding:5px 13px;font-size:.55rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mg2);display:none;animation:fadeIn .4s forwards}\r\n.viewer-box.stamp-active .back-tip{display:block}\r\n@media(max-width:1024px){.viewer-layout{grid-template-columns:1fr}.viewer-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-height:none;overflow-y:visible}}\r\n@media(max-width:900px){\r\n .hamburger{display:flex}\r\n .nav-links{position:fixed;top:0;right:-100%;width:min(285px,84vw);height:100vh;height:100dvh;background:rgba(5,0,10,.97);backdrop-filter:blur(24px);flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;transition:right .4s cubic-bezier(.77,0,.18,1);z-index:1050;padding:calc(var(--nav) + 26px) 0 40px;list-style:none;border-left:1px solid rgba(0,200,255,.16);overflow-y:auto}\r\n .nav-links.open{right:0}\r\n .nav-links li{width:100%;text-align:center}\r\n .nav-links a{font-size:.98rem;letter-spacing:2px;padding:13px 18px;width:100%;justify-content:center;border-bottom:1px solid rgba(0,200,255,.06)}\r\n .proc-grid{grid-template-columns:repeat(2,1fr)}\r\n .pst:nth-child(2)::after,.pst:nth-child(4)::after{display:none}\r\n}\r\n@media(max-width:650px){\r\n :root{--nav:60px}\r\n .nav{padding:0 4%}\r\n .nav-logo img{height:37px}\r\n .hero-title{font-size:clamp(3rem,16vw,6rem)}\r\n .hero-cnt{padding:0 5% 14%}\r\n .proc-grid{grid-template-columns:1fr}\r\n .pst::after{display:none}\r\n .cc{width:205px}\r\n .sc-ind{display:none}\r\n .m-row{grid-template-columns:1fr}\r\n .viewer-panel{grid-template-columns:1fr}\r\n}\r\n@media(max-width:540px){\r\n .m-bd{align-items:flex-end;padding:0}\r\n .m-box{border-radius:22px 22px 0 0;max-height:94dvh;overflow-y:auto;transform:translateY(100%)}\r\n .m-bd.open .m-box{transform:translateY(0)}\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLOBAL FIXES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nhtml {\r\n background: #050008 !important;\r\n height: 100%;\r\n overflow-x: hidden !important;\r\n \/* QUITADO: overscroll-behavior: none \u2014 bloqueaba el scroll con rueda del mouse *\/\r\n}\r\nbody {\r\n background: #050008 !important;\r\n min-height: 100vh;\r\n min-height: 100dvh;\r\n display: flex;\r\n flex-direction: column;\r\n overflow-x: hidden !important;\r\n \/* QUITADO: overscroll-behavior: none \u2014 bloqueaba el scroll con rueda del mouse *\/\r\n -webkit-overflow-scrolling: auto;\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n}\r\n#scrolltop,#scroll-top,#wpfront-scroll-top,.scrolltop,.scroll-to-top,.back-to-top,\r\n[class*=\"scroll-top\"],[id*=\"scroll-top\"],[class*=\"scrolltop\"],a[href=\"#top\"],\r\n.eael-scroll-to-top,.prt-scrollup{display:none!important;visibility:hidden!important;pointer-events:none!important}\r\nsection,.cc-sec,.gal-sec,.proc-sec,.viewer-sec,.fmt-sec,.cap-sec,.cta-sec,.tipos-sec,.metrics-sec{\r\n overflow-x:hidden;max-width:100vw;box-sizing:border-box;\r\n}\r\n.cc-wrap{overflow:hidden}\r\n.soc-bar{\r\n background: #050008;\r\n margin: 0;\r\n padding-bottom: 0;\r\n}\r\n.footer{\r\n background: #050008;\r\n margin: 0;\r\n margin-top: auto;\r\n padding-bottom: max(34px, env(safe-area-inset-bottom, 34px));\r\n padding-top: 34px;\r\n}\r\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<nav class=\"nav\">\r\n <a href=\"https:\/\/digital10post.com\" class=\"nav-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png\" alt=\"Digital 10\">\r\n <\/a>\r\n <button class=\"hamburger\" aria-label=\"Men\u00fa\" aria-expanded=\"false\" type=\"button\" id=\"ham\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <ul class=\"nav-links\" id=\"navL\">\r\n <li><a href=\"https:\/\/digital10post.com\">Inicio<\/a><\/li>\r\n <li><a href=\"https:\/\/digital10post.com\/#servicios\">Servicios<\/a><\/li>\r\n <li><a href=\"https:\/\/digital10post.com\/#proyectos\">Proyectos<\/a><\/li>\r\n <li><a href=\"https:\/\/digital10post.com\/?page_id=418\">Acerca<\/a><\/li>\r\n <li><a href=\"#cta\" class=\"active\">Contacto<\/a><\/li>\r\n <\/ul>\r\n <div translate=\"no\" style=\"display:flex;align-items:center;gap:4px;margin-left:12px;flex-shrink:0;\">\r\n <a href=\"https:\/\/digital10post.com\/produccion-webgl\/\" id=\"btn-es\" style=\"color:white;font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:700;text-decoration:none;\">ES<\/a>\r\n <span style=\"color:rgba(255,255,255,.3);font-size:.8rem;\">|<\/span>\r\n <a href=\"https:\/\/digital10post.com\/en\/produccion-webgl\/\" id=\"btn-en\" style=\"color:white;font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:400;text-decoration:none;\">EN<\/a>\r\n<\/div>\r\n<\/nav>\r\n\r\n<section class=\"hero\" id=\"inicio\">\r\n <div class=\"hero-bg\">\r\n <img decoding=\"async\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/DCHV_1131185538_EN_1080x1080_GEMS_JusticeLeague3D_v3-1-scaled.jpg\" alt=\"Producci\u00f3n WebGL Digital 10\">\r\n <\/div>\r\n <div class=\"hero-vgn\"><\/div>\r\n <div class=\"hero-scan\"><\/div>\r\n <div class=\"hero-pts\">\r\n <span class=\"pt pt1\"><\/span><span class=\"pt pt2\"><\/span><span class=\"pt pt3\"><\/span>\r\n <span class=\"pt pt4\"><\/span><span class=\"pt pt5\"><\/span>\r\n <\/div>\r\n <div class=\"hero-cnt\">\r\n <p class=\"hero-crumb\">\r\n <a href=\"https:\/\/digital10post.com\">Inicio<\/a>\r\n <span class=\"sp\">\/<\/span>Servicios<span class=\"sp\">\/<\/span>Producci\u00f3n WebGL\r\n <\/p>\r\n <h1 class=\"hero-title\">\r\n <span class=\"t1\">Experiencias 3D interactivas para<\/span>\r\n <span class=\"t2\">Producci\u00f3n<br>WebGL<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">Llevamos tus modelos y mundos 3D directamente al navegador. Sin plugins, sin descargas \u2014 experiencias interactivas en tiempo real que funcionan en cualquier dispositivo.<\/p>\r\n <div class=\"hero-tech\">\r\n <span class=\"tpill\">Blender<\/span><span class=\"tpill\">Maya<\/span><span class=\"tpill\">ZBrush<\/span>\r\n <span class=\"tpill\">Substance Designer<\/span><span class=\"tpill\">CLO<\/span>\r\n <span class=\"tpill\">After Effects<\/span><span class=\"tpill\">Premiere<\/span>\r\n <span class=\"tpill\">Unreal Engine<\/span><span class=\"tpill\">Unity<\/span>\r\n <\/div>\r\n <div class=\"hero-ctas\">\r\n <button class=\"btn-g\" id=\"openM\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\r\n Hablemos de tu proyecto\r\n <\/button>\r\n <a href=\"#viewer\" class=\"btn-o\">\r\n Probar visor 3D\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sc-ind\"><span>Scroll<\/span><div class=\"sc-line\"><\/div><\/div>\r\n<\/section>\r\n\r\n<section class=\"proc-sec\" id=\"proceso\">\r\n <div class=\"proc-hd\">\r\n <p class=\"chip rv\">Pipeline WebGL<\/p>\r\n <h2 class=\"sh rv d1\">Del Modelo 3D al <span>Navegador<\/span><\/h2>\r\n <\/div>\r\n <div class=\"proc-grid\">\r\n <div class=\"pst rv d1\">\r\n <span class=\"pst-n\">01<\/span>\r\n <div class=\"pst-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z\"\/><\/svg><\/div>\r\n <h4>Creaci\u00f3n de Modelo 3D<\/h4>\r\n <p>Usamos software como Marvelous Designer o Clo para crear prendas realistas que se acoplen a la muestra f\u00edsica proporcionada. Luego, con ayuda de Maya o Blender, conseguimos una prenda con m\u00e1ximo nivel de detalle sin dejar de lado la optimizaci\u00f3n.<\/p>\r\n <\/div>\r\n <div class=\"pst rv d2\">\r\n <span class=\"pst-n\">02<\/span>\r\n <div class=\"pst-ico\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg><\/div>\r\n <h4>Exportaci\u00f3n y Empaquetado<\/h4>\r\n <p>Tenemos un flujo de trabajo que nos permite transformar el modelo 3D en formato compatible para web, acompa\u00f1ado de texturas pensadas para pesar menos pero dar m\u00e1s calidad.<\/p>\r\n <\/div>\r\n <div class=\"pst rv d3\">\r\n <span class=\"pst-n\">03<\/span>\r\n <div class=\"pst-ico\"><svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg><\/div>\r\n <h4>Shader y Escena WebGL<\/h4>\r\n <p>Setteamos todo para que tu modelo 3D sea completamente funcional en tiempo real, con shaders e iluminaci\u00f3n compatible para no alterar el rendimiento y la experiencia de tus usuarios.<\/p>\r\n <\/div>\r\n <div class=\"pst rv d4\">\r\n <span class=\"pst-n\">04<\/span>\r\n <div class=\"pst-ico\"><svg viewBox=\"0 0 24 24\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg><\/div>\r\n <h4>Personalizaci\u00f3n a otro nivel<\/h4>\r\n <p>Buscamos que cada modelo pueda ser personalizado siguiendo las posibilidades de cada marca, desde bordados en zonas espec\u00edficas hasta patrones o logos a completa elecci\u00f3n del cliente final.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"viewer-sec\" id=\"viewer\">\r\n <div class=\"viewer-hd\">\r\n <p class=\"chip rv\">Demo en vivo<\/p>\r\n <h2 class=\"sh rv d1\">Visor 3D <span>Interactivo<\/span><\/h2>\r\n <p style=\"color:var(--dim);font-size:.84rem;max-width:500px;margin:0 auto;text-align:center;line-height:1.75\" class=\"rv d2\">\r\n Modelo 3D cargado en tiempo real \u2014 arrastra para rotar, rueda para zoom, Shift+drag para paneo.\r\n <\/p>\r\n <\/div>\r\n <div class=\"viewer-layout rv\">\r\n <div class=\"viewer-box\" id=\"viewerBox\">\r\n <canvas class=\"viewer-canvas\" id=\"viewerCanvas\"><\/canvas>\r\n <div class=\"viewer-default-loading\" id=\"defaultLoading\">\r\n <div class=\"vdl-spinner\"><\/div>\r\n <p class=\"vdl-text\">Cargando modelo\u2026<\/p>\r\n <div class=\"vdl-bar-wrap\"><div class=\"vdl-bar\" id=\"defaultBar\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"default-badge\" id=\"defaultBadge\">FinalBaseMesh \u00b7 Digital 10<\/div>\r\n <div class=\"back-tip\" id=\"backTip\">\u21ba Rota para ver el estampado<\/div>\r\n <div class=\"debug-panel\" id=\"debugPanel\">\r\n <p>Abre DevTools \u2192 Consola<br>para ver el orden real de mallas<\/p>\r\n <\/div>\r\n <div class=\"viewer-controls-bar\">\r\n <span class=\"vc-hint\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n Arrastra \u00b7 Rueda = zoom \u00b7 Shift+drag = paneo\r\n <\/span>\r\n <div class=\"vc-btns\">\r\n <button class=\"vc-btn\" id=\"btnReset\" title=\"Resetear c\u00e1mara\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 102.13-9.36L1 10\"\/><\/svg>\r\n <\/button>\r\n <button class=\"vc-btn\" id=\"btnWire\" title=\"Wireframe\">\r\n <svg viewBox=\"0 0 24 24\"><polygon points=\"1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"18\"\/><line x1=\"16\" y1=\"6\" x2=\"16\" y2=\"22\"\/><\/svg>\r\n <\/button>\r\n <button class=\"vc-btn\" id=\"btnAuto\" title=\"Auto-rotar\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-4.3\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"viewer-panel rv d1\">\r\n <div class=\"vp-section\">\r\n <h5>Iluminaci\u00f3n<\/h5>\r\n <div class=\"vp-row\">\r\n <label>Intensidad<\/label>\r\n <input type=\"range\" id=\"slLight\" min=\"0\" max=\"5\" step=\"0.05\" value=\"2\">\r\n <span class=\"vp-val\" id=\"valLight\">2.0<\/span>\r\n <\/div>\r\n <div class=\"vp-row\">\r\n <label>Ambiente<\/label>\r\n <input type=\"range\" id=\"slAmb\" min=\"0\" max=\"4\" step=\"0.05\" value=\"2.5\">\r\n <span class=\"vp-val\" id=\"valAmb\">2.5<\/span>\r\n <\/div>\r\n <div class=\"vp-toggle-row\">\r\n <span>Sombras<\/span>\r\n <label class=\"toggle\"><input type=\"checkbox\" id=\"togShadow\" checked><span class=\"tog-sl\"><\/span><\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"vp-section\">\r\n <h5>Material<\/h5>\r\n <div class=\"vp-toggle-row\">\r\n <span>Wireframe<\/span>\r\n <label class=\"toggle\"><input type=\"checkbox\" id=\"togWire\"><span class=\"tog-sl\"><\/span><\/label>\r\n <\/div>\r\n <div class=\"vp-toggle-row\">\r\n <span>Auto-rotar<\/span>\r\n <label class=\"toggle\"><input type=\"checkbox\" id=\"togAuto\"><span class=\"tog-sl\"><\/span><\/label>\r\n <\/div>\r\n <p style=\"font-size:.66rem;color:rgba(255,255,255,.28);margin-top:6px\">Color de fondo<\/p>\r\n <div class=\"vp-colors\">\r\n <div class=\"clr active\" data-bg=\"#050008\" style=\"background:#050008;border:2px solid rgba(255,255,255,.3)\"><\/div>\r\n <div class=\"clr\" data-bg=\"#0a1628\" style=\"background:#0a1628\"><\/div>\r\n <div class=\"clr\" data-bg=\"#101010\" style=\"background:#101010\"><\/div>\r\n <div class=\"clr\" data-bg=\"#1a0a2e\" style=\"background:#1a0a2e\"><\/div>\r\n <div class=\"clr\" data-bg=\"#ffffff\" style=\"background:#ffffff\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"vp-section stamp-section\">\r\n <h5>Estampado en espalda<\/h5>\r\n <div class=\"stamp-tabs\">\r\n <button class=\"stamp-tab active\" data-tab=\"text\">\u2726 Texto<\/button>\r\n <button class=\"stamp-tab\" data-tab=\"image\">\u2b06 Imagen<\/button>\r\n <\/div>\r\n <div class=\"stamp-pane active\" id=\"stampPaneText\">\r\n <textarea class=\"stamp-input\" id=\"stampText\" rows=\"2\" placeholder=\"Escribe tu estampado\u2026\">DIGITAL 10<\/textarea>\r\n <div class=\"stamp-font-row\">\r\n <button class=\"font-btn active\" data-font=\"Arial Black\">Bold<\/button>\r\n <button class=\"font-btn\" data-font=\"Georgia\">Serif<\/button>\r\n <button class=\"font-btn\" data-font=\"Courier New\">Mono<\/button>\r\n <button class=\"font-btn\" data-font=\"Impact\">Impact<\/button>\r\n <\/div>\r\n <div class=\"stamp-color-row\">\r\n <label>Color texto<\/label>\r\n <div class=\"stamp-clr-pick\"><input type=\"color\" id=\"stampTextColor\" value=\"#ffffff\"><\/div>\r\n <label style=\"margin-left:8px\">Fondo<\/label>\r\n <div class=\"stamp-clr-pick\"><input type=\"color\" id=\"stampBgColor\" value=\"#000000\"><\/div>\r\n <label style=\"margin-left:8px;font-size:.6rem;color:rgba(255,255,255,.25)\">Opac.<\/label>\r\n <input type=\"range\" id=\"stampBgOpacity\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0\" style=\"flex:1;margin-left:4px\">\r\n <\/div>\r\n <div class=\"stamp-size-row\">\r\n <label>Tama\u00f1o<\/label>\r\n <input type=\"range\" id=\"stampFontSize\" min=\"20\" max=\"160\" step=\"2\" value=\"72\" style=\"flex:1\">\r\n <span class=\"vp-val\" id=\"valFontSize\">72<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stamp-pane\" id=\"stampPaneImage\">\r\n <div class=\"stamp-drop\" id=\"stampDrop\">\r\n <input type=\"file\" id=\"stampFile\" accept=\"image\/*\">\r\n <div class=\"stamp-drop-ico\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg><\/div>\r\n <p><strong>Sube tu imagen<\/strong>PNG, JPG, SVG \u2014 con fondo transparente recomendado<\/p>\r\n <\/div>\r\n <div class=\"stamp-preview\" id=\"stampPreview\">\r\n <img decoding=\"async\" id=\"stampPreviewImg\" src=\"\" alt=\"Preview\">\r\n <button class=\"stamp-preview-del\" id=\"stampPreviewDel\">\u2715<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stamp-opacity-row\">\r\n <label>Opacidad<\/label>\r\n <input type=\"range\" id=\"stampOpacity\" min=\"0.1\" max=\"1\" step=\"0.05\" value=\"0.92\" style=\"flex:1\">\r\n <span class=\"vp-val\" id=\"valOpacity\">92%<\/span>\r\n <\/div>\r\n <div class=\"stamp-size-row\">\r\n <label>Escala<\/label>\r\n <input type=\"range\" id=\"stampScale\" min=\"0.1\" max=\"1\" step=\"0.02\" value=\"0.45\" style=\"flex:1\">\r\n <span class=\"vp-val\" id=\"valScale\">45%<\/span>\r\n <\/div>\r\n <p class=\"stamp-hint\">El estampado se aplica como textura sobre la malla de espalda del modelo<\/p>\r\n <button class=\"stamp-apply\" id=\"stampApply\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" style=\"display:inline;vertical-align:middle;margin-right:5px\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"M8 12l2.5 2.5L16 9\"\/><\/svg>\r\n Aplicar estampado\r\n <\/button>\r\n <button class=\"stamp-clear\" id=\"stampClear\">Quitar estampado<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"lb\" id=\"lb\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Imagen ampliada\">\r\n <div class=\"lb-inner\" id=\"lbInner\">\r\n <div class=\"lb-img-wrap\"><img decoding=\"async\" class=\"lb-img\" id=\"lbImg\" src=\"\" alt=\"\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<section class=\"cc-sec\" id=\"proyectos\">\r\n <div class=\"cc-hd\">\r\n <p class=\"chip rv\">Galer\u00eda Completa<\/p>\r\n <h2 class=\"sh rv d1\">Explora m\u00e1s <span>Proyectos<\/span><\/h2>\r\n <\/div>\r\n <div class=\"cc-wrap\">\r\n <div class=\"cc-track\" id=\"ccTrack\">\r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/DCHV_1131185538_EN_1080x1080_GEMS_JusticeLeague3D_v3-1-scaled.jpg\" alt=\"DC\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">DC Justice League<\/p><p class=\"cc-cli\">Cliente <span>JamCity<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/Jam_City_KeyArt_Magic_Match.png\" alt=\"MM\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Magic Match<\/p><p class=\"cc-cli\">Cliente <span>JamCity<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/HP_1241102860_EN_4320x1080_December2023CGBanners_MMHolidayParty-scaled.png\" alt=\"HP\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Emma - HP<\/p><p class=\"cc-cli\">Cliente <span>JamCity<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/CharactersCompo.png\" alt=\"Mad\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Mad Hatter<\/p><p class=\"cc-cli\">Cliente <span>JamCity<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/yagu03.png\" alt=\"Yagu\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Yagu<\/p><p class=\"cc-cli\">Cliente <span>CVS Monter\u00eda<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/2222-scaled.png\" alt=\"PP\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Cookie Jam<\/p><p class=\"cc-cli\">Cliente <span>JamCity<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/KC_Compo.jpg\" alt=\"KK\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Killer Klowns<\/p><p class=\"cc-cli\">Cliente <span>Katapix<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/prime.png\" alt=\"PT\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Prime Time Tactics<\/p><p class=\"cc-cli\">Cliente <span>Katapix<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/dddddd.png\" alt=\"SP\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Sancho Paisa<\/p><p class=\"cc-cli\">Cliente <span>Visualmente<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n \r\n <div class=\"cc\"><img decoding=\"async\" class=\"cc-img\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/PortafolioImprimir_espanol_sinfuente.png\" alt=\"Col\"><span class=\"cc-badge\">WebGL<\/span><div class=\"cc-info\"><p class=\"cc-name\">Yagu<\/p><p class=\"cc-cli\">Cliente <span>CVS Monteria<\/span><\/p><\/div><div class=\"cc-shine\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"drag-h rv\">Desliza para explorar<\/p>\r\n<\/section>\r\n\r\n<section class=\"cta-sec\" id=\"cta\">\r\n <div class=\"cta-glow\"><\/div>\r\n <h2 class=\"rv\">\u00bfListo para llevar<br>tu modelo al navegador?<\/h2>\r\n <p class=\"rv d1\">Dinos qu\u00e9 quieres mostrar, en qu\u00e9 plataforma y cu\u00e1l es tu fecha de lanzamiento. Producimos la experiencia WebGL y te entregamos el embed listo para publicar.<\/p>\r\n <div class=\"cta-btns rv d2\">\r\n <button class=\"btn-g\" id=\"openM2\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\r\n Cotizar experiencia\r\n <\/button>\r\n <a href=\"https:\/\/digital10post.com\/#proyectos\" class=\"btn-o\">Ver todos los proyectos<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"m-bd\" id=\"mBd\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Contacto\">\r\n <div class=\"m-box\">\r\n <button class=\"m-close\" id=\"mClose\" aria-label=\"Cerrar\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\r\n <\/button>\r\n <p class=\"m-chip\">Cu\u00e9ntanos tu experiencia<\/p>\r\n <h3 class=\"m-h\">Hablemos de tu <span>proyecto WebGL<\/span><\/h3>\r\n <div class=\"m-form\" id=\"mForm\">\r\n <div class=\"m-row\">\r\n <div class=\"m-f\"><label for=\"mn\">Nombre<\/label><input type=\"text\" id=\"mn\" placeholder=\"Tu nombre completo\" autocomplete=\"name\"><\/div>\r\n <div class=\"m-f\"><label for=\"mt\">Celular<\/label><input type=\"tel\" id=\"mt\" placeholder=\"+57 300 000 0000\" autocomplete=\"tel\"><\/div>\r\n <\/div>\r\n <div class=\"m-f\"><label for=\"me\">Correo<\/label><input type=\"email\" id=\"me\" placeholder=\"tu@correo.com\" autocomplete=\"email\"><\/div>\r\n <div class=\"m-f\"><label for=\"mm\">Brief del proyecto<\/label><textarea id=\"mm\" rows=\"4\" placeholder=\"Tipo de experiencia, plataforma, modelo, fecha de lanzamiento\u2026\"><\/textarea><\/div>\r\n <button class=\"m-send\" id=\"mSend\">\r\n <span id=\"mTxt\">Enviar mensaje<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"15\" height=\"15\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"m-ok\" id=\"mOk\">\r\n <div class=\"m-ok-i\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <h4>\u00a1Mensaje enviado!<\/h4>\r\n <p>Gracias, revisaremos tu brief y te contactamos pronto.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"soc-bar\">\r\n <a href=\"https:\/\/www.instagram.com\/digital10_post\" target=\"_blank\" class=\"soc-i\">\r\n <img decoding=\"async\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/ig.png\" alt=\"Instagram\">\r\n <\/a>\r\n <a href=\"https:\/\/youtube.com\/@digital10animacion-postpro7\" target=\"_blank\" class=\"soc-i\">\r\n <img decoding=\"async\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/yutu.png\" alt=\"YouTube\">\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/573003041603\" target=\"_blank\" class=\"soc-i\">\r\n <img decoding=\"async\" src=\"https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/wpp.png\" alt=\"WhatsApp\">\r\n <\/a>\r\n<\/div>\r\n<div class=\"footer\">\u00a9 2026 DIGITAL 10 \u2014 ESTUDIO CREATIVO 3D<br>BEYOND THE THIRD DIMENSION<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCRIPTS UI \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/* nav *\/\r\nconst ham=document.getElementById('ham'),navL=document.getElementById('navL');\r\nfunction tNav(f){const o=typeof f==='boolean'?f:!navL.classList.contains('open');navL.classList.toggle('open',o);ham.classList.toggle('open',o);ham.setAttribute('aria-expanded',String(o));document.body.style.overflow=o?'hidden':''}\r\nham.addEventListener('click',e=>{e.stopPropagation();tNav()});\r\nnavL.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>tNav(false)));\r\ndocument.addEventListener('click',e=>{if(navL.classList.contains('open')&&!navL.contains(e.target)&&!ham.contains(e.target))tNav(false)});\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a=>{a.addEventListener('click',function(e){const t=document.getElementById(this.getAttribute('href').slice(1));if(!t)return;e.preventDefault();window.scrollTo({top:t.getBoundingClientRect().top+window.scrollY-document.querySelector('.nav').offsetHeight,behavior:'smooth'})})});\r\n\/* reveal *\/\r\n(function(){const obs=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');obs.unobserve(e.target)}})},{threshold:0.08,rootMargin:'0px 0px -35px 0px'});document.querySelectorAll('.rv,.rvl,.rvr,.rvs').forEach(el=>obs.observe(el))})();\r\n\/* lightbox *\/\r\n(function(){const lb=document.getElementById('lb'),inner=document.getElementById('lbInner'),img=document.getElementById('lbImg');function closeLB(){lb.classList.remove('open');document.body.style.overflow='';setTimeout(()=>{if(!lb.classList.contains('open'))img.src=''},420)}lb.addEventListener('click',e=>{if(!inner.contains(e.target))closeLB()});document.addEventListener('keydown',e=>{if(e.key==='Escape'&&lb.classList.contains('open'))closeLB()})})();\r\n\/* carousel drag *\/\r\n(function(){\r\n const el=document.getElementById('ccTrack');if(!el)return;let d=false,sX=0,sL=0;\r\n el.addEventListener('mousedown', e => {\r\n if (el.scrollWidth <= el.clientWidth) return; \/\/ \u2190 esta l\u00ednea\r\n down = true;\r\n sX = e.pageX - el.offsetLeft;\r\n sL = el.scrollLeft;\r\n el.style.cursor = 'grabbing';\r\n});\r\n document.addEventListener('mouseup',()=>{d=false;el.style.cursor='grab'});\r\n el.addEventListener('mousemove',e=>{if(!d)return;e.preventDefault();el.scrollLeft=sL-(e.pageX-el.offsetLeft-sX)*1.4});\r\n let ts=0,tl=0;el.addEventListener('touchstart',e=>{ts=e.touches[0].clientX;tl=el.scrollLeft},{passive:true});\r\n el.addEventListener('touchmove',e=>{el.scrollLeft=tl+(ts-e.touches[0].clientX)},{passive:true})})();\r\n\/* email modal *\/\r\n(function(){\r\n const WP_ENDPOINT='https:\/\/digital10post.com\/wp-json\/d10\/v1\/contact';\r\n const bd=document.getElementById('mBd'),cl=document.getElementById('mClose'),sB=document.getElementById('mSend'),sT=document.getElementById('mTxt'),fEl=document.getElementById('mForm'),oEl=document.getElementById('mOk');\r\n const open=()=>{bd.classList.add('open');document.body.style.overflow='hidden';setTimeout(()=>document.getElementById('mn').focus(),380)};\r\n const close=()=>{bd.classList.remove('open');document.body.style.overflow=''};\r\n document.getElementById('openM').addEventListener('click',open);\r\n document.getElementById('openM2').addEventListener('click',open);\r\n cl.addEventListener('click',close);\r\n bd.addEventListener('click',e=>{if(e.target===bd)close()});\r\n document.addEventListener('keydown',e=>{if(e.key==='Escape'&&bd.classList.contains('open'))close()});\r\n sB.addEventListener('click',async()=>{\r\n const n=document.getElementById('mn').value.trim(),e_=document.getElementById('me').value.trim(),t=document.getElementById('mt').value.trim(),m=document.getElementById('mm').value.trim();\r\n if(!n||!e_||!m){shk(!n?'mn':!e_?'me':'mm');return}\r\n if(!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(e_)){shk('me');return}\r\n sB.disabled=true;sT.textContent='Enviando\u2026';\r\n try{\r\n const res=await fetch(WP_ENDPOINT,{method:'POST',headers:{'Content-Type':'application\/json'},body:JSON.stringify({from_name:n,from_email:e_,phone:t||'\u2014',message:m})});\r\n const data=await res.json();\r\n if(res.ok&&data.success){\r\n fEl.style.display='none';oEl.classList.add('show');\r\n setTimeout(close,3800);\r\n setTimeout(()=>{fEl.style.display='';oEl.classList.remove('show');['mn','me','mt','mm'].forEach(id=>document.getElementById(id).value='');sB.disabled=false;sT.textContent='Enviar mensaje'},4400)\r\n }else{throw new Error(data.message||'Error del servidor')}\r\n }catch{sT.textContent='Error \u2014 intenta de nuevo';sB.disabled=false;setTimeout(()=>sT.textContent='Enviar mensaje',3000)}\r\n });\r\n function shk(id){const el=document.getElementById(id);el.style.borderColor='#ff4488';el.style.boxShadow='0 0 0 3px rgba(255,68,136,.18)';el.focus();setTimeout(()=>{el.style.borderColor='';el.style.boxShadow=''},1800)}\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 THREE.JS importmap \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.163.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.163.0\/examples\/jsm\/\"\r\n }\r\n}\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VISOR 3D + ESTAMPADO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script type=\"module\">\r\nimport * as THREE from 'three';\r\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\nimport { OBJLoader } from 'three\/addons\/loaders\/OBJLoader.js';\r\nimport { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js';\r\nimport { DRACOLoader } from 'three\/addons\/loaders\/DRACOLoader.js';\r\n\r\nconst MODEL_URL = 'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/03\/prenda.obj';\r\nconst MODEL_EXT = 'obj';\r\n\r\nconst MATERIAL_RULES = [\r\n { nameIncludes: 'personali', visible: false },\r\n { nameIncludes: 'bigstitch',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/stitches_basecolor_01.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/stitches_normal.png',\r\n normalScale:new THREE.Vector2(1.5,1.5), roughness:0.45, metalness:0.0, transparent:true, alphaFromMap:true },\r\n { nameIncludes: 'stitch',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/stitches_basecolor_01.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/stitches_normal.png',\r\n normalScale:new THREE.Vector2(1.5,1.5), roughness:0.45, metalness:0.0, transparent:true, alphaFromMap:true },\r\n { nameIncludes: 'button',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/Button_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/Button_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(1.5,1.5), roughness:0.35, metalness:0.12 },\r\n { nameIncludes: 'back',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/backDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/backDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0), roughness:0.82, metalness:0.0 },\r\n { nameIncludes: 'sleeve',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/sleevesDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/sleevesDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0), roughness:0.82, metalness:0.0 },\r\n { nameIncludes: 'front',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/frontDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/frontDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0), roughness:0.82, metalness:0.0 },\r\n { nameIncludes: 'collar',\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/collarDenimJacket_MAT_Base_color_1002.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/collarDenimJacket_MAT_Normal_OpenGL_1002.png',\r\n normalScale:new THREE.Vector2(2.2,2.2), roughness:0.78, metalness:0.0,\r\n doubleSide:true, depthWrite:true, texRepeat:new THREE.Vector2(1,1), texOffset:new THREE.Vector2(0,0) },\r\n];\r\n\r\nconst FALLBACK_BY_INDEX = [\r\n { visible: false },\r\n { visible: false },\r\n { visible: false },\r\n { roughness:0.35,metalness:0.12,\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/Button_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/Button_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(1.5,1.5) },\r\n { roughness:0.82,metalness:0.0,\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/backDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/backDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0) },\r\n { roughness:0.82,metalness:0.0,\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/sleevesDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/sleevesDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0) },\r\n { roughness:0.82,metalness:0.0,\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/frontDeminJacket_MAT_Base_color_1001.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/frontDeminJacket_MAT_Normal_OpenGL_1001.png',\r\n normalScale:new THREE.Vector2(2.0,2.0) },\r\n { roughness:0.78,metalness:0.0,\r\n baseColor:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/collarDenimJacket_MAT_Base_color_1002.png',\r\n normalMap:'https:\/\/digital10post.com\/wp-content\/uploads\/2026\/04\/collarDenimJacket_MAT_Normal_OpenGL_1002.png',\r\n normalScale:new THREE.Vector2(2.2,2.2) },\r\n];\r\n\r\nconst canvas = document.getElementById('viewerCanvas');\r\nconst box = document.getElementById('viewerBox');\r\nconst defLoading = document.getElementById('defaultLoading');\r\nconst defBar = document.getElementById('defaultBar');\r\n\r\nconst renderer = new THREE.WebGLRenderer({ canvas, antialias:true, alpha:true });\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\nrenderer.shadowMap.enabled = true;\r\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\r\nrenderer.toneMappingExposure = 2.2;\r\nrenderer.outputColorSpace = THREE.SRGBColorSpace;\r\n\r\nconst scene = new THREE.Scene();\r\nscene.background = new THREE.Color('#050008');\r\n\r\nconst camera = new THREE.PerspectiveCamera(60, 1, 0.001, 1000);\r\ncamera.position.set(0, 1, 3);\r\n\r\nconst controls = new OrbitControls(camera, canvas);\r\ncontrols.enableDamping = true;\r\ncontrols.minPolarAngle = Math.PI * 0.15; \/\/ l\u00edmite arriba\r\ncontrols.maxPolarAngle = Math.PI * 0.85; \/\/ l\u00edmite abajo\r\ncontrols.dampingFactor = 0.08;\r\n\r\n\/* \u2500\u2500 SCROLL FIX: el wheel sobre el canvas hace zoom en el modelo,\r\n pero NO debe bloquear el scroll de p\u00e1gina cuando el usuario\r\n est\u00e1 fuera del canvas. OrbitControls usa addEventListener en el\r\n domElement, as\u00ed que solo intercepta eventos dentro del canvas. \u2500\u2500 *\/\r\ncanvas.addEventListener('wheel', e => { e.stopPropagation(); }, { passive: true });\r\n\r\nconst ambLight = new THREE.AmbientLight(0xffffff, 2.5);\r\nscene.add(ambLight);\r\nconst dirLight = new THREE.DirectionalLight(0xffffff, 2.0);\r\ndirLight.position.set(3, 6, 4);\r\ndirLight.castShadow = true;\r\ndirLight.shadow.mapSize.set(1024, 1024);\r\ndirLight.shadow.bias = -0.001;\r\nscene.add(dirLight);\r\nconst fillLight = new THREE.DirectionalLight(0xc8e0ff, 1.2);\r\nfillLight.position.set(-4, 2, -3);\r\nscene.add(fillLight);\r\nconst backLight = new THREE.DirectionalLight(0xffffff, 1.5);\r\nbackLight.position.set(0, 3, -5);\r\nscene.add(backLight);\r\nconst topLight = new THREE.DirectionalLight(0xffffff, 1.0);\r\ntopLight.position.set(0, 8, 0);\r\nscene.add(topLight);\r\n\r\nconst shadowPlane = new THREE.Mesh(\r\n new THREE.PlaneGeometry(40, 40),\r\n new THREE.ShadowMaterial({ opacity: 0.15 })\r\n);\r\nshadowPlane.rotation.x = -Math.PI \/ 2;\r\nshadowPlane.receiveShadow = true;\r\nscene.add(shadowPlane);\r\n\r\nfunction resize() {\r\n const w = box.clientWidth, h = box.clientHeight;\r\n renderer.setSize(w, h, false);\r\n camera.aspect = w \/ h;\r\n camera.updateProjectionMatrix();\r\n}\r\nresize();\r\nnew ResizeObserver(resize).observe(box);\r\n\r\nlet currentModel = null;\r\nlet autoRotate = false;\r\nlet wireframeMode = false;\r\nlet backMesh = null;\r\nlet stampCanvas = null;\r\nlet stampTexture = null;\r\nlet stampImageEl = null;\r\nlet originalBackMap = null;\r\n\r\nconst STAMP_SIZE = 1024;\r\n\r\nfunction createStampCanvas() {\r\n const c = document.createElement('canvas');\r\n c.width = STAMP_SIZE;\r\n c.height = STAMP_SIZE;\r\n return c;\r\n}\r\n\r\nfunction buildStampTexture(opts) {\r\n const { mode, text, fontFamily, fontSize, textColor, bgColor, bgOpacity, stampOpacity, stampScale, imageEl } = opts;\r\n if (!stampCanvas) stampCanvas = createStampCanvas();\r\n const ctx = stampCanvas.getContext('2d');\r\n ctx.clearRect(0, 0, STAMP_SIZE, STAMP_SIZE);\r\n const cx = STAMP_SIZE \/ 2;\r\n const cy = STAMP_SIZE * 0.25;\r\n const maxW = STAMP_SIZE * stampScale;\r\n const maxH = STAMP_SIZE * stampScale;\r\n ctx.save();\r\n ctx.globalAlpha = stampOpacity;\r\n if (mode === 'text') {\r\n const safeFontSize = Math.min(fontSize, 200);\r\n if (bgOpacity > 0) {\r\n const r = parseInt(bgColor.slice(1,3),16);\r\n const g = parseInt(bgColor.slice(3,5),16);\r\n const b = parseInt(bgColor.slice(5,7),16);\r\n ctx.fillStyle = `rgba(${r},${g},${b},${bgOpacity})`;\r\n ctx.beginPath();\r\n ctx.roundRect(cx - maxW\/2 - 20, cy - safeFontSize*0.6, maxW + 40, safeFontSize*1.2 + 20, 12);\r\n ctx.fill();\r\n }\r\n ctx.font = `bold ${safeFontSize}px \"${fontFamily}\", sans-serif`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = 'rgba(0,0,0,0.55)';\r\n ctx.shadowBlur = safeFontSize * 0.12;\r\n ctx.shadowOffsetY = safeFontSize * 0.04;\r\n ctx.fillStyle = textColor;\r\n const lines = text.split('\\n');\r\n const lineH = safeFontSize * 1.22;\r\n const totalH = lineH * lines.length;\r\n lines.forEach((line, i) => {\r\n const y = cy - totalH\/2 + lineH*i + lineH\/2;\r\n ctx.fillText(line, cx, y, maxW);\r\n });\r\n } else if (mode === 'image' && imageEl) {\r\n const iw = imageEl.naturalWidth || imageEl.width || 1;\r\n const ih = imageEl.naturalHeight || imageEl.height || 1;\r\n const aspect = iw \/ ih;\r\n let dw, dh;\r\n if (aspect >= 1) { dw = maxW; dh = maxW \/ aspect; }\r\n else { dh = maxH; dw = maxH * aspect; }\r\n ctx.drawImage(imageEl, cx - dw\/2, cy - dh\/2, dw, dh);\r\n }\r\n ctx.restore();\r\n if (!stampTexture) {\r\n stampTexture = new THREE.CanvasTexture(stampCanvas);\r\n stampTexture.colorSpace = THREE.SRGBColorSpace;\r\n stampTexture.wrapS = THREE.ClampToEdgeWrapping;\r\n stampTexture.wrapT = THREE.ClampToEdgeWrapping;\r\n } else {\r\n stampTexture.needsUpdate = true;\r\n }\r\n return stampTexture;\r\n}\r\n\r\nfunction applyStampToBack(opts) {\r\n if (!backMesh) { console.warn('Malla de espalda no encontrada'); return; }\r\n const tex = buildStampTexture(opts);\r\n const existingMat = Array.isArray(backMesh.material) ? backMesh.material[0] : backMesh.material;\r\n if (!originalBackMap && existingMat && existingMat.map) {\r\n originalBackMap = existingMat.map;\r\n}\r\nconst baseMap = originalBackMap;\r\n const compositeCanvas = document.createElement('canvas');\r\n compositeCanvas.width = STAMP_SIZE;\r\n compositeCanvas.height = STAMP_SIZE;\r\n const cctx = compositeCanvas.getContext('2d');\r\n if (baseMap && baseMap.image) {\r\n cctx.drawImage(baseMap.image, 0, 0, STAMP_SIZE, STAMP_SIZE);\r\n }\r\n cctx.drawImage(stampCanvas, 0, 0);\r\n const compositeTex = new THREE.CanvasTexture(compositeCanvas);\r\n compositeTex.colorSpace = THREE.SRGBColorSpace;\r\n compositeTex.needsUpdate = true;\r\n if (existingMat) {\r\n existingMat.map = compositeTex;\r\n existingMat.needsUpdate = true;\r\n }\r\n box.classList.add('stamp-active');\r\n controls.autoRotate = false;\r\n const startY = currentModel ? currentModel.rotation.y : 0;\r\n let t = 0;\r\n const rotAnim = setInterval(() => {\r\n t += 0.025;\r\n if (currentModel) currentModel.rotation.y = startY + Math.PI * Math.sin(t * Math.PI \/ 2);\r\n if (t >= 1) { clearInterval(rotAnim); if (currentModel) currentModel.rotation.y = startY + Math.PI; }\r\n }, 16);\r\n}\r\n\r\nfunction clearStamp() {\r\n if (!backMesh) return;\r\n const existingMat = Array.isArray(backMesh.material) ? backMesh.material[0] : backMesh.material;\r\n const rule = MATERIAL_RULES.find(r => r.nameIncludes === 'back');\r\n if (rule && existingMat) {\r\n texLoader.load(rule.baseColor, t => { t.colorSpace = THREE.SRGBColorSpace; existingMat.map = t; existingMat.needsUpdate = true; });\r\n }\r\n box.classList.remove('stamp-active');\r\n originalBackMap = null;\r\n stampCanvas = null;\r\n stampTexture = null;\r\n}\r\n\r\nconst texLoader = new THREE.TextureLoader();\r\nfunction loadTex(url, colorSpace) {\r\n if (!url) return null;\r\n const t = texLoader.load(url);\r\n if (colorSpace) t.colorSpace = colorSpace;\r\n return t;\r\n}\r\n\r\nfunction resolveRule(mesh, fallbackIdx) {\r\n const nameLow = (mesh.name || '').toLowerCase();\r\n for (const rule of MATERIAL_RULES) {\r\n const keywords = Array.isArray(rule.nameIncludes) ? rule.nameIncludes : [rule.nameIncludes];\r\n if (keywords.some(k => k && nameLow.includes(k.toLowerCase()))) return rule;\r\n }\r\n if (fallbackIdx < FALLBACK_BY_INDEX.length) {\r\n console.warn(`Malla \"${mesh.name}\" (idx ${fallbackIdx}) \u2192 fallback`);\r\n return FALLBACK_BY_INDEX[fallbackIdx];\r\n }\r\n return { roughness: 0.8, metalness: 0 };\r\n}\r\n\r\nfunction applyTextures(obj) {\r\n console.group('=== MALLAS DEL MODELO ===');\r\n let idx = 0;\r\n obj.traverse(child => { if (!child.isMesh) return; console.log(`[${idx}] name: \"${child.name}\"`); idx++; });\r\n console.groupEnd();\r\n idx = 0;\r\n obj.traverse(child => {\r\n if (!child.isMesh) return;\r\n const rule = resolveRule(child, idx);\r\n idx++;\r\n if (rule.visible === false) { child.visible = false; return; }\r\n const nameLow = (child.name || '').toLowerCase();\r\n if (nameLow.includes('back') || (idx - 1 === 4 && !backMesh)) backMesh = child;\r\n const baseColorTex = loadTex(rule.baseColor, THREE.SRGBColorSpace);\r\n const normalTex = loadTex(rule.normalMap, null);\r\n const nScale = rule.normalScale || new THREE.Vector2(1, 1);\r\n if (baseColorTex && rule.texRepeat) {\r\n baseColorTex.wrapS = baseColorTex.wrapT = THREE.RepeatWrapping;\r\n baseColorTex.repeat.copy(rule.texRepeat);\r\n if (rule.texOffset) baseColorTex.offset.copy(rule.texOffset);\r\n }\r\n if (normalTex && rule.texRepeat) {\r\n normalTex.wrapS = normalTex.wrapT = THREE.RepeatWrapping;\r\n normalTex.repeat.copy(rule.texRepeat);\r\n if (rule.texOffset) normalTex.offset.copy(rule.texOffset);\r\n }\r\n child.material = new THREE.MeshStandardMaterial({\r\n color: new THREE.Color(0xffffff),\r\n map: baseColorTex || undefined,\r\n normalMap: normalTex || undefined,\r\n normalScale: normalTex ? nScale : undefined,\r\n roughness: rule.roughness ?? 0.85,\r\n metalness: rule.metalness ?? 0.0,\r\n envMapIntensity: 0.8,\r\n side: THREE.DoubleSide,\r\n transparent: rule.transparent ?? false,\r\n alphaMap: (rule.alphaFromMap && baseColorTex) ? baseColorTex : undefined,\r\n alphaTest: rule.transparent ? 0.3 : 0.01,\r\n depthWrite: rule.transparent ? false : true,\r\n });\r\n child.castShadow = true;\r\n child.receiveShadow = true;\r\n });\r\n if (!backMesh) {\r\n idx = 0;\r\n obj.traverse(child => {\r\n if (!child.isMesh) return;\r\n if (idx === 4) backMesh = child;\r\n idx++;\r\n });\r\n }\r\n console.log('Back mesh encontrado:', backMesh?.name || 'por \u00edndice');\r\n}\r\n\r\nfunction fitCamera(object) {\r\n const bb = new THREE.Box3().setFromObject(object);\r\n const center = bb.getCenter(new THREE.Vector3());\r\n const size = bb.getSize(new THREE.Vector3());\r\n const maxDim = Math.max(size.x, size.y, size.z);\r\n object.position.sub(center);\r\n shadowPlane.position.y = -size.y \/ 2;\r\n camera.position.set(0, maxDim * 0.15, maxDim * 1.35);\r\n camera.near = maxDim * 0.001;\r\n camera.far = maxDim * 100;\r\n camera.updateProjectionMatrix();\r\n controls.target.set(0, 0, 0);\r\n controls.minDistance = maxDim * 0.5;\r\n controls.maxDistance = maxDim * 1;\r\n controls.update();\r\n dirLight.position.set(maxDim, maxDim * 2, maxDim * 1.2);\r\n dirLight.shadow.camera.near = 0.01;\r\n dirLight.shadow.camera.far = maxDim * 10;\r\n dirLight.shadow.camera.left = -maxDim * 2;\r\n dirLight.shadow.camera.right = maxDim * 2;\r\n dirLight.shadow.camera.top = maxDim * 2;\r\n dirLight.shadow.camera.bottom = -maxDim * 2;\r\n dirLight.shadow.camera.updateProjectionMatrix();\r\n}\r\n\r\nfunction addModel(obj) {\r\n if (currentModel) {\r\n scene.remove(currentModel);\r\n currentModel.traverse(c => {\r\n if (c.isMesh) {\r\n c.geometry.dispose();\r\n (Array.isArray(c.material) ? c.material : [c.material]).forEach(m => m.dispose());\r\n }\r\n });\r\n }\r\n backMesh = null;\r\n applyTextures(obj);\r\n scene.add(obj);\r\n currentModel = obj;\r\n fitCamera(obj);\r\n box.classList.add('loaded');\r\n applyWireframe(wireframeMode);\r\n defLoading.classList.add('hidden');\r\n}\r\n\r\nfunction applyWireframe(on) {\r\n if (!currentModel) return;\r\n currentModel.traverse(c => {\r\n if (c.isMesh && c.visible) {\r\n (Array.isArray(c.material) ? c.material : [c.material]).forEach(m => m.wireframe = on);\r\n }\r\n });\r\n}\r\n\r\nconst dracoLoader = new DRACOLoader();\r\ndracoLoader.setDecoderPath('https:\/\/www.gstatic.com\/draco\/versioned\/decoders\/1.5.7\/');\r\nconst gltfLoader = new GLTFLoader();\r\ngltfLoader.setDRACOLoader(dracoLoader);\r\nconst objLoader = new OBJLoader();\r\n\r\nfunction loadModel() {\r\n const onProgress = xhr => { if (xhr.total) defBar.style.width = ((xhr.loaded \/ xhr.total) * 100).toFixed(0) + '%'; };\r\n const onError = err => { console.error('Error cargando modelo:', err); defLoading.classList.add('hidden'); };\r\n if (MODEL_EXT === 'obj') {\r\n objLoader.load(MODEL_URL, obj => { defBar.style.width = '100%'; setTimeout(() => addModel(obj), 300); }, onProgress, onError);\r\n } else {\r\n gltfLoader.load(MODEL_URL, gltf => { defBar.style.width = '100%'; setTimeout(() => addModel(gltf.scene), 300); }, onProgress, onError);\r\n }\r\n}\r\nloadModel();\r\n\r\ndocument.getElementById('slLight').addEventListener('input', e => {\r\n dirLight.intensity = parseFloat(e.target.value);\r\n document.getElementById('valLight').textContent = parseFloat(e.target.value).toFixed(1);\r\n});\r\ndocument.getElementById('slAmb').addEventListener('input', e => {\r\n ambLight.intensity = parseFloat(e.target.value);\r\n document.getElementById('valAmb').textContent = parseFloat(e.target.value).toFixed(1);\r\n});\r\ndocument.getElementById('togShadow').addEventListener('change', e => {\r\n renderer.shadowMap.enabled = e.target.checked;\r\n renderer.shadowMap.needsUpdate = true;\r\n});\r\nconst togWireEl = document.getElementById('togWire');\r\ntogWireEl.addEventListener('change', e => { wireframeMode = e.target.checked; applyWireframe(wireframeMode); });\r\ndocument.getElementById('togAuto').addEventListener('change', e => { autoRotate = e.target.checked; });\r\ndocument.querySelectorAll('.clr').forEach(clr => {\r\n clr.addEventListener('click', () => {\r\n document.querySelectorAll('.clr').forEach(c => c.classList.remove('active'));\r\n clr.classList.add('active');\r\n scene.background = new THREE.Color(clr.dataset.bg);\r\n });\r\n});\r\ndocument.getElementById('btnReset').addEventListener('click', () => { if (currentModel) fitCamera(currentModel); });\r\nconst btnWireEl = document.getElementById('btnWire');\r\nbtnWireEl.addEventListener('click', () => {\r\n wireframeMode = !wireframeMode;\r\n togWireEl.checked = wireframeMode;\r\n applyWireframe(wireframeMode);\r\n btnWireEl.style.borderColor = wireframeMode ? 'var(--acc)' : '';\r\n btnWireEl.style.background = wireframeMode ? 'rgba(0,200,255,.18)' : '';\r\n});\r\nconst btnAutoEl = document.getElementById('btnAuto');\r\nbtnAutoEl.addEventListener('click', () => {\r\n autoRotate = !autoRotate;\r\n document.getElementById('togAuto').checked = autoRotate;\r\n btnAutoEl.style.borderColor = autoRotate ? 'var(--acc)' : '';\r\n btnAutoEl.style.background = autoRotate ? 'rgba(0,200,255,.18)' : '';\r\n});\r\n\r\ndocument.querySelectorAll('.stamp-tab').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.stamp-tab').forEach(b => b.classList.remove('active'));\r\n document.querySelectorAll('.stamp-pane').forEach(p => p.classList.remove('active'));\r\n btn.classList.add('active');\r\n document.getElementById('stampPane' + btn.dataset.tab.charAt(0).toUpperCase() + btn.dataset.tab.slice(1)).classList.add('active');\r\n });\r\n});\r\ndocument.querySelectorAll('.font-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.font-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n });\r\n});\r\ndocument.getElementById('stampFontSize').addEventListener('input', e => {\r\n document.getElementById('valFontSize').textContent = e.target.value;\r\n});\r\ndocument.getElementById('stampOpacity').addEventListener('input', e => {\r\n document.getElementById('valOpacity').textContent = Math.round(parseFloat(e.target.value) * 100) + '%';\r\n});\r\ndocument.getElementById('stampScale').addEventListener('input', e => {\r\n document.getElementById('valScale').textContent = Math.round(parseFloat(e.target.value) * 100) + '%';\r\n});\r\n\r\nconst stampFile = document.getElementById('stampFile');\r\nconst stampDrop = document.getElementById('stampDrop');\r\nconst stampPreview = document.getElementById('stampPreview');\r\nconst stampPreviewImg = document.getElementById('stampPreviewImg');\r\n\r\n['dragover','dragleave','drop'].forEach(ev => {\r\n stampDrop.addEventListener(ev, e => {\r\n e.preventDefault();\r\n stampDrop.classList.toggle('drag-over', ev === 'dragover');\r\n if (ev === 'drop' && e.dataTransfer.files[0]) loadImageFile(e.dataTransfer.files[0]);\r\n });\r\n});\r\nstampFile.addEventListener('change', e => { if (e.target.files[0]) loadImageFile(e.target.files[0]); });\r\n\r\nfunction loadImageFile(file) {\r\n const reader = new FileReader();\r\n reader.onload = ev => {\r\n stampPreviewImg.src = ev.target.result;\r\n stampPreviewImg.onload = () => {\r\n stampImageEl = stampPreviewImg;\r\n stampPreview.classList.add('show');\r\n stampDrop.style.display = 'none';\r\n };\r\n };\r\n reader.readAsDataURL(file);\r\n}\r\ndocument.getElementById('stampPreviewDel').addEventListener('click', () => {\r\n stampImageEl = null;\r\n stampPreviewImg.src = '';\r\n stampPreview.classList.remove('show');\r\n stampDrop.style.display = '';\r\n stampFile.value = '';\r\n});\r\ndocument.getElementById('stampApply').addEventListener('click', () => {\r\n const activeTab = document.querySelector('.stamp-tab.active').dataset.tab;\r\n const activeFont = document.querySelector('.font-btn.active')?.dataset.font || 'Arial Black';\r\n if (activeTab === 'image' && !stampImageEl) { alert('Por favor sube una imagen primero.'); return; }\r\n if (activeTab === 'text' && !document.getElementById('stampText').value.trim()) { alert('Escribe un texto para el estampado.'); return; }\r\n applyStampToBack({\r\n mode: activeTab,\r\n text: document.getElementById('stampText').value || 'DIGITAL 10',\r\n fontFamily: activeFont,\r\n fontSize: parseInt(document.getElementById('stampFontSize').value),\r\n textColor: document.getElementById('stampTextColor').value,\r\n bgColor: document.getElementById('stampBgColor').value,\r\n bgOpacity: parseFloat(document.getElementById('stampBgOpacity').value),\r\n stampOpacity: parseFloat(document.getElementById('stampOpacity').value),\r\n stampScale: parseFloat(document.getElementById('stampScale').value),\r\n imageEl: stampImageEl,\r\n });\r\n});\r\ndocument.getElementById('stampClear').addEventListener('click', clearStamp);\r\n\r\nconst clock = new THREE.Clock();\r\nfunction animate() {\r\n requestAnimationFrame(animate);\r\n const delta = clock.getDelta();\r\n if (autoRotate && currentModel) currentModel.rotation.y += delta * 0.8;\r\n controls.update();\r\n renderer.render(scene, camera);\r\n}\r\nanimate();\r\n<\/script>\r\n\r\n<script>\r\n(function(){\r\n if(!('ontouchstart' in window)) return;\r\n let sx=0, sy=0, blk=false, dec=false;\r\n document.addEventListener('touchstart', e=>{\r\n sx=e.touches[0].clientX; sy=e.touches[0].clientY; blk=false; dec=false;\r\n }, {passive:true});\r\n document.addEventListener('touchmove', e=>{\r\n if(dec){ if(blk) e.preventDefault(); return; }\r\n const dx=Math.abs(e.touches[0].clientX-sx), dy=Math.abs(e.touches[0].clientY-sy);\r\n if(dx<8 && dy<8) return;\r\n dec=true;\r\n blk=(dx > dy*2.5);\r\n if(blk) e.preventDefault();\r\n }, {passive:false});\r\n document.addEventListener('touchend', ()=>{ blk=false; dec=false; }, {passive:true});\r\n})();\r\n\r\n\/* LANG REDIRECT *\/\r\n(function(){\r\n var path = window.location.pathname;\r\n var isEN = path.indexOf('\/en\/') === 0 || path === '\/en';\r\n var saved = localStorage.getItem('d10lang');\r\n\r\n \/\/ Solo redirige si el idioma guardado no coincide con la p\u00e1gina actual\r\n if (saved === 'en' && !isEN) {\r\n localStorage.setItem('d10lang', 'en');\r\n window.location.replace('\/en' + path);\r\n return;\r\n }\r\n if (saved === 'es' && isEN) {\r\n localStorage.setItem('d10lang', 'es');\r\n window.location.replace(path.replace(\/^\\\/en\/, ''));\r\n return;\r\n }\r\n\r\n \/\/ Si no hay preferencia guardada, guardar la actual\r\n if (!saved) {\r\n localStorage.setItem('d10lang', isEN ? 'en' : 'es');\r\n }\r\n\r\n \/\/ UI botones\r\n document.getElementById('btn-es').style.opacity = isEN ? '0.4' : '1';\r\n document.getElementById('btn-en').style.opacity = isEN ? '1' : '0.4';\r\n document.getElementById('btn-es').style.fontWeight = isEN ? '400' : '700';\r\n document.getElementById('btn-en').style.fontWeight = isEN ? '700' : '400';\r\n\r\n document.getElementById('btn-es').addEventListener('click', function(){\r\n localStorage.setItem('d10lang','es');\r\n });\r\n document.getElementById('btn-en').addEventListener('click', function(){\r\n localStorage.setItem('d10lang','en');\r\n });\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Producci\u00f3n WebGL | Digital 10 \u2014 Estudio 3D Inicio Servicios Proyectos Acerca Contacto ES | EN Inicio \/Servicios\/Producci\u00f3n WebGL Experiencias […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1040","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>produccion webgl - Digital 10 | Estudio de Modelado y Render 3D<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digital10post.com\/en\/produccion-webgl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"produccion webgl - Digital 10 | Estudio de Modelado y Render 3D\" \/>\n<meta property=\"og:description\" content=\"Producci\u00f3n WebGL | Digital 10 \u2014 Estudio 3D Inicio Servicios Proyectos Acerca Contacto ES | EN Inicio \/Servicios\/Producci\u00f3n WebGL Experiencias […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digital10post.com\/en\/produccion-webgl\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital 10 | Estudio de Modelado y Render 3D\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-20T15:27:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/\",\"url\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/\",\"name\":\"produccion webgl - Digital 10 | Estudio de Modelado y Render 3D\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/digital10post.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/LOGOTIPO_DIGITAL_EDITABLE.png\",\"datePublished\":\"2026-04-07T14:03:03+00:00\",\"dateModified\":\"2026-05-20T15:27:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/#primaryimage\",\"url\":\"https:\\\/\\\/digital10post.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/LOGOTIPO_DIGITAL_EDITABLE.png\",\"contentUrl\":\"https:\\\/\\\/digital10post.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/LOGOTIPO_DIGITAL_EDITABLE.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/produccion-webgl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/digital10post.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"produccion webgl\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/#website\",\"url\":\"https:\\\/\\\/digital10post.com\\\/\",\"name\":\"Digital 10 | Estudio de Modelado y Render 3D\",\"description\":\"Estudio especializado en modelado 3D, render y animaci\u00f3n para proyectos digitales.\",\"publisher\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/digital10post.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/#organization\",\"name\":\"Digital 10 | Estudio de Modelado y Render 3D\",\"url\":\"https:\\\/\\\/digital10post.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/digital10post.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/digital10post.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/LOGOTIPO_DIGITAL_EDITABLE.png\",\"contentUrl\":\"https:\\\/\\\/digital10post.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/LOGOTIPO_DIGITAL_EDITABLE.png\",\"width\":2573,\"height\":858,\"caption\":\"Digital 10 | Estudio de Modelado y Render 3D\"},\"image\":{\"@id\":\"https:\\\/\\\/digital10post.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"produccion webgl - Digital 10 | Estudio de Modelado y Render 3D","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/digital10post.com\/en\/produccion-webgl\/","og_locale":"en_US","og_type":"article","og_title":"produccion webgl - Digital 10 | Estudio de Modelado y Render 3D","og_description":"Producci\u00f3n WebGL | Digital 10 \u2014 Estudio 3D Inicio Servicios Proyectos Acerca Contacto ES | EN Inicio \/Servicios\/Producci\u00f3n WebGL Experiencias […]","og_url":"https:\/\/digital10post.com\/en\/produccion-webgl\/","og_site_name":"Digital 10 | Estudio de Modelado y Render 3D","article_modified_time":"2026-05-20T15:27:20+00:00","og_image":[{"url":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digital10post.com\/produccion-webgl\/","url":"https:\/\/digital10post.com\/produccion-webgl\/","name":"produccion webgl - Digital 10 | Estudio de Modelado y Render 3D","isPartOf":{"@id":"https:\/\/digital10post.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digital10post.com\/produccion-webgl\/#primaryimage"},"image":{"@id":"https:\/\/digital10post.com\/produccion-webgl\/#primaryimage"},"thumbnailUrl":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png","datePublished":"2026-04-07T14:03:03+00:00","dateModified":"2026-05-20T15:27:20+00:00","breadcrumb":{"@id":"https:\/\/digital10post.com\/produccion-webgl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digital10post.com\/produccion-webgl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digital10post.com\/produccion-webgl\/#primaryimage","url":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png","contentUrl":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png"},{"@type":"BreadcrumbList","@id":"https:\/\/digital10post.com\/produccion-webgl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digital10post.com\/"},{"@type":"ListItem","position":2,"name":"produccion webgl"}]},{"@type":"WebSite","@id":"https:\/\/digital10post.com\/#website","url":"https:\/\/digital10post.com\/","name":"Digital 10 | Estudio de Modelado y Render 3D","description":"Estudio especializado en modelado 3D, render y animaci\u00f3n para proyectos digitales.","publisher":{"@id":"https:\/\/digital10post.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digital10post.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/digital10post.com\/#organization","name":"Digital 10 | Estudio de Modelado y Render 3D","url":"https:\/\/digital10post.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digital10post.com\/#\/schema\/logo\/image\/","url":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png","contentUrl":"https:\/\/digital10post.com\/wp-content\/uploads\/2025\/03\/LOGOTIPO_DIGITAL_EDITABLE.png","width":2573,"height":858,"caption":"Digital 10 | Estudio de Modelado y Render 3D"},"image":{"@id":"https:\/\/digital10post.com\/#\/schema\/logo\/image\/"}}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"17550pwpadmin","author_link":"https:\/\/digital10post.com\/en\/author\/17550pwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Producci\u00f3n WebGL | Digital 10 \u2014 Estudio 3D Inicio Servicios Proyectos Acerca Contacto ES | EN Inicio \/Servicios\/Producci\u00f3n WebGL Experiencias […]","_links":{"self":[{"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/pages\/1040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/comments?post=1040"}],"version-history":[{"count":164,"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/pages\/1040\/revisions"}],"predecessor-version":[{"id":1759,"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/pages\/1040\/revisions\/1759"}],"wp:attachment":[{"href":"https:\/\/digital10post.com\/en\/wp-json\/wp\/v2\/media?parent=1040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}