{"id":4322,"date":"2026-10-08T18:36:11","date_gmt":"2026-10-08T18:36:11","guid":{"rendered":"https:\/\/anigami.studio\/?page_id=4322"},"modified":"2026-10-10T01:57:02","modified_gmt":"2026-10-10T01:57:02","slug":"inicio","status":"publish","type":"page","link":"https:\/\/anigami.studio\/en\/","title":{"rendered":"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho"},"content":{"rendered":"\n<!-- Home de anigami.studio. Generado por scripts\/build-home.js desde home\/: no editar aqu\u00ed. -->\n<script>\/[?&]trp-edit-translation=preview\/.test(location.search)||document.documentElement.classList.add('js')<\/script>\n<link rel=\"preload\" as=\"image\" type=\"image\/avif\" href=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-website-hero-bg-1600.avif\" onload=\"document.documentElement.classList.add('tx-ok')\">\n<style>\n:root{--tx:#F4F4F6;--dim:#9C9CA8;--ac:#FEB406;--ink:#0C0C0F;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--gut:clamp(16px,6vw,96px)}\n\/* Temas de color por tramo. home.js pone data-tema en <html> al cruzar cada punto de cambio y la\n   transici\u00f3n corre sola, en .55 s, sin depender de cu\u00e1nto se desplace. Sin data-tema la p\u00e1gina es\n   tinta y deja ver la ret\u00edcula de puntos. Los colores son propiedades registradas para animarlas.\n     claro \u2192 blanco: \u00abANIGAMI Studio re\u00fane lo necesario\u00bb y \u00abUn solo partner\u00bb\n     ambar \u2192 metodolog\u00eda: \u00abresultados, no en horas\u00bb y Output \u2192 Outcome (el texto \u00e1mbar pasa a\n             tinta: sobre \u00e1mbar no se leer\u00eda) *\/\n@property --tx{syntax:'<color>';inherits:true;initial-value:#F4F4F6}\n@property --dim{syntax:'<color>';inherits:true;initial-value:#9C9CA8}\n@property --line{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.12)}\n@property --line2{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.2)}\n@property --bgt{syntax:'<color>';inherits:true;initial-value:rgba(12,12,15,0)}\n:root{--cv:cubic-bezier(.7,0,.3,1);transition:--tx .55s var(--cv),--dim .55s var(--cv),--line .55s var(--cv),--line2 .55s var(--cv),--bgt .55s var(--cv)}\n#tema{position:fixed;inset:0;z-index:0;background:var(--bgt);pointer-events:none}\nhtml[data-tema=claro]{--bgt:#FFFFFF;--tx:#0C0C0F;--dim:#5A5A66;--line:rgba(12,12,15,.14);--line2:rgba(12,12,15,.24)}\nhtml[data-tema=ambar]{--bgt:#FEB406;--tx:#0C0C0F;--dim:#3B2C05;--line:rgba(12,12,15,.18);--line2:rgba(12,12,15,.3)}\nhtml[data-tema] .cab{background:color-mix(in srgb,var(--bgt) 94%,transparent);border-bottom:1px solid var(--line)}\nhtml[data-tema=ambar] .ac,html[data-tema=ambar] .ola .ch{color:var(--tx)}\nhtml[data-tema=ambar] .tx,html[data-tema=ambar] .cifra .ac{background-image:none;-webkit-text-fill-color:var(--tx)}\nhtml[data-tema=ambar] .oo-f{color:var(--tx)}\nhtml[data-tema=ambar] .cab .btn-primary{background:var(--ink);color:var(--ac)!important}\n\/* Sobre fondos claros el \u00e1mbar plano no se lee (1.7:1 sobre blanco): los textos peque\u00f1os pasan a\n   un dorado oscuro y la textura se oscurece y satura. *\/\nhtml[data-tema=claro] .mas,html[data-tema=claro] .item .area{color:#8A6100;border-color:rgba(138,97,0,.4)}\nhtml[data-tema=claro] .tx,html[data-tema=claro] .cifra .ac{filter:brightness(.78) saturate(1.35)}\nhtml[data-tema=claro] .ola .tx{filter:brightness(calc(.78 + var(--k,0) * .4)) saturate(1.35)}\n*{box-sizing:border-box}\nbody{margin:0}\n\/* El reset va acotado al home: el footer del tema (fuera de <main>) conserva sus m\u00e1rgenes. *\/\n:where(main,.cab,[id=menu]),:where(main,.cab,[id=menu]) *{margin:0;padding:0}\n\/* Dentro de WordPress (plantilla Canvas) el CSS del tema sigue cargando: da m\u00e1rgenes a h1\u2013h6, p y\n   listas, interlineado 1.5 al body y vuelve \u00e1mbar con !important cualquier enlace en :hover, :focus\n   y :active. El reset con * no les gana (especificidad 0); estas reglas s\u00ed, y las clases propias\n   del home siguen gan\u00e1ndoles a ellas: especificidad (0,0,2), por eso el :where(). *\/\nhtml :where(main,.cab,[id=menu]) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,blockquote){margin:0}\nhtml :where(main,.cab,[id=menu]) :is(ul,ol){padding:0}\n.prod,.prod:hover,.prod:focus,.prod:active{color:var(--tx)!important}\n\/* El tema deja una franja fija de 60 px arriba (.header-backdrop) con desenfoque y que captura los\n   clics, aunque la plantilla Canvas no pinte su cabecera. El home tiene la suya. *\/\n.header-backdrop{display:none!important}\n.claro .cab-nav > a:hover,.claro .cab-nav > a:focus,.claro .cab-nav > a:active{color:#8A6100!important}\nhtml[data-tema=ambar] .cab-nav > a:hover,html[data-tema=ambar] .cab-nav > a:focus,html[data-tema=ambar] .cab-nav > a:active,html[data-tema=ambar] .idioma a:hover{color:var(--ink)!important}\nhtml{background:var(--ink);-webkit-text-size-adjust:100%}\nbody{background:var(--ink);color:var(--tx);font-family:Manrope,system-ui,sans-serif;font-weight:500;line-height:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}\n:where(main,.cab,[id=menu]) a{color:inherit}\nimg{max-width:100%}\n.ac{color:var(--ac)}\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}\n\n\/* ---------- cabecera ---------- *\/\n.cab{position:fixed;z-index:20;left:0;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(16px,3.4vw,48px);background:linear-gradient(180deg,rgba(6,6,8,.7),rgba(6,6,8,0));transition:background .3s}\n.fin .cab{background:rgba(12,12,15,.94);border-bottom:1px solid var(--line)}\n\/* Con sesi\u00f3n iniciada en WordPress la barra de administraci\u00f3n ocupa los primeros 32 px (46 px en m\u00f3vil). *\/\n.admin-bar .cab{top:32px}\n@media (max-width:782px){.admin-bar .cab{top:46px}}\n.cab-logo{display:block;flex:none;line-height:0}\n.cab-logo img{height:clamp(30px,2.5vw,38px);width:auto}\n.cab nav{display:flex;align-items:center;gap:clamp(12px,1.3vw,28px);font-weight:700;font-size:13.5px !important;letter-spacing:-.005em}\n.cab-nav > a,.desp-b{position:relative;text-decoration:none;opacity:.86;white-space:nowrap;padding:6px 0}\n.cab-nav > a:hover,.desp:hover .desp-b,.desp-b[aria-expanded=true]{opacity:1;color:var(--ac)}\n\/* Secci\u00f3n actual (home.js): filete \u00e1mbar bajo el enlace; en el desplegable, bajo \u00ab\u00bfQu\u00e9 hacemos?\u00bb. *\/\n.cab-nav > a::after,.desp-b::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}\n.cab-nav > a.aqui,.desp-b.aqui{opacity:1}\n.cab-nav > a.aqui::after,.desp-b.aqui::after{transform:scaleX(1)}\nhtml[data-tema=ambar] .cab-nav > a:hover,html[data-tema=ambar] .desp:hover .desp-b{color:var(--ink)}\nhtml[data-tema=ambar] .cab-nav > a::after,html[data-tema=ambar] .desp-b::after{background:var(--ink)}\n.desp{position:relative}\n.desp-b{display:flex;align-items:center;gap:6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}\n.desp-b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}\n.desp:hover .desp-b svg,.desp-b[aria-expanded=true] svg{transform:rotate(180deg)}\n\/* Submen\u00fa: tres botones sobre un panel oscuro, igual en cualquier tema. El ::before cubre el hueco\n   entre el bot\u00f3n y el panel para que el hover no se pierda al bajar el cursor. *\/\n.desp-p{position:absolute;left:50%;top:calc(100% + 16px);display:grid;gap:8px;min-width:320px;padding:10px;background:#0C0C0F;border:1px solid rgba(255,255,255,.12);border-radius:6px;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}\n.desp-p::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}\n.desp:hover .desp-p,.desp:focus-within .desp-p,.desp.abierto .desp-p{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}\n.cab nav .desp .desp-p a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 16px;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#F4F4F6;opacity:1;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}\n.cab nav .desp .desp-p a:hover,.cab nav .desp .desp-p a:focus-visible,.cab nav .desp .desp-p a.aqui{border-color:var(--ac);color:var(--ac);background:rgba(254,180,6,.06)}\n.desp-p svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}\n.desp-p a:hover svg{transform:translateX(3px)}\n.cab-der{display:flex;align-items:center;gap:12px;flex:none}\n\/* ES | EN. home.js calcula los enlaces (TranslatePress sirve el ingl\u00e9s en \/en\/). *\/\n.idioma{display:flex;align-items:center;font-weight:800;font-size:13px !important;letter-spacing:.08em}\n\/* Activo: color pleno y filete debajo (\u00e1mbar sobre oscuro, tinta sobre claro). Inactivo: el mismo\n   color muy atenuado y sin filete. Separador \u00ab\/\u00bb, como en el men\u00fa del resto del sitio. *\/\n.idioma a{position:relative;padding:6px 4px;text-decoration:none;opacity:.62;font-weight:600;transition:opacity .2s,color .2s}\n.idioma a::after{content:'';position:absolute;left:4px;right:4px;bottom:1px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .3s}\n.idioma a:hover{opacity:.85}\n.idioma a.aqui{opacity:1;font-weight:800;color:var(--ac)}\n.idioma a.aqui::after{transform:none}\n.idioma .sep{padding:0 2px;opacity:.35;font-weight:400}\n.claro .idioma a.aqui{color:var(--ink)}\n.claro .idioma a.aqui::after{background:var(--ac)}\nhtml[data-tema=ambar] .idioma a.aqui{color:var(--ink)}\n.idioma-menu{margin:clamp(20px,4vh,40px) auto 0;width:100%;max-width:1600px;font-size:16px !important;color:#F4F4F6}\n.idioma-menu a{padding:6px 8px}\n.idioma-menu a:first-child{padding-left:0}\n.idioma-menu a:first-child::after{left:0}\n\/* Dentro del men\u00fa a pantalla completa (fondo siempre oscuro): tama\u00f1o propio y activo en \u00e1mbar,\n   aunque el hero blanco haya puesto .claro en <html>. *\/\n[id=menu] .idioma a{display:inline-block;font-size:16px !important;font-weight:600;letter-spacing:.08em;line-height:1.4}\n[id=menu] .idioma a.aqui{color:var(--ac);font-weight:800}\n[id=menu] .idioma a.aqui::after{background:var(--ac)}\n.menu-abierto [id=menu] .idioma a:not(.aqui){opacity:.62}\n@media (max-width:760px){.cab .idioma{display:none}}\n.cab-menu{display:none;position:relative;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.9}\n.cab-menu i{position:absolute;left:13px;right:13px;height:2px;background:currentColor;border-radius:1px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}\n.cab-menu i:first-child{top:17px}\n.cab-menu i:last-child{top:24px}\n.menu-abierto .cab-menu i:first-child{transform:translateY(3.5px) rotate(45deg)}\n.menu-abierto .cab-menu i:last-child{transform:translateY(-3.5px) rotate(-45deg)}\n\/* Men\u00fa a pantalla completa *\/\n[id=menu]{position:fixed;z-index:19;inset:0;display:flex;flex-direction:column;justify-content:center;padding:96px var(--gut) 40px;background:#0C0C0F;color:#F4F4F6;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}\n.menu-abierto [id=menu]{opacity:1;visibility:visible;transition:opacity .35s ease}\n[id=menu] ul{list-style:none}\n[id=menu] > ul{display:grid;gap:clamp(8px,1.6vh,16px);width:100%;max-width:1600px;margin:0 auto}\n[id=menu] a,.menu-g{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:clamp(1.4rem,min(4.4vh,7.4vw),2.6rem) !important;letter-spacing:-.035em;line-height:1.15;transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .4s ease,color .2s}\n.menu-abierto [id=menu] a,.menu-abierto .menu-g{transform:none;opacity:1;transition-delay:calc(var(--i,0) * 35ms + .08s)}\n.menu-g{color:rgba(244,244,246,.5)}\n.menu-sub{display:grid;gap:clamp(4px,1vh,10px);margin:clamp(6px,1.2vh,12px) 0 clamp(2px,.6vh,6px);padding-left:18px;border-left:2px solid var(--ac)}\n.menu-sub a{font-weight:700;font-size:clamp(1.05rem,min(3vh,5vw),1.6rem) !important;letter-spacing:-.02em}\n[id=menu] a svg{flex:none;width:.7em;height:.7em;fill:none;stroke:var(--ac);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}\n[id=menu] a:hover,[id=menu] a:focus-visible,[id=menu] a.aqui{color:var(--ac)}\n.menu-abierto{overflow:hidden}\nhtml.menu-abierto .cab{color:#F4F4F6;background:#0C0C0F;border-bottom-color:rgba(255,255,255,.08)}\nhtml.menu-abierto .cab-logo img{filter:none}\nhtml.menu-abierto .cab .btn-primary{background:var(--ac);color:var(--ink)!important}\n\/* Las secciones con contenido fluido quedan bajo la cabecera fija; las fijadas (pin) se ven\n   completas desde su borde superior. *\/\nsection[id]:not(.pin){scroll-margin-top:72px}\n.btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;padding:0 20px;border-radius:3px;font-weight:800;font-size:15px !important;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}\n.btn-primary,.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--ac);color:var(--ink)!important}\n.btn-line{border:1px solid rgba(255,255,255,.28)}\n.btn-line:hover{border-color:var(--ac)}\n@media (max-width:1279px){.cab nav{display:none}.cab-menu{display:block}}\n@media (max-width:420px){.cab .btn{height:40px;padding:0 14px;font-size:14px !important}.cab-logo img{height:26px}}\n#avance{position:fixed;z-index:21;left:0;top:0;height:2px;width:100%;background:var(--ac);transform-origin:0 0;transform:scaleX(0)}\n#puntos{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}\n\/* El footer del tema va fuera de <main>: sin posici\u00f3n quedar\u00eda debajo de las capas fijas (#tema, #puntos). *\/\nmain,.site-footer{position:relative;z-index:1}\n\n\/* ---------- palabras: m\u00e1scara y aparici\u00f3n ---------- *\/\n\/* La m\u00e1scara de cada palabra se extiende arriba (acentos de may\u00fascula: \u00c1, \u00c9) y abajo (descendentes:\n   g, j, p, q, y) con un margen negativo igual, para no cortarlos sin mover el texto. *\/\n.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .03em .28em;margin:-.12em 0 -.28em}\n.wi{display:inline-block}\n.js .rv .wi,.js .rw .wi,.js .cr .wi{transform:translateY(112%)}\n.rv.in .wi,.h-inicio.in .wi{transform:none;transition:transform 1s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*55ms)}\n.ch{display:inline-block;transform-origin:0 100%}\n.listo .wm,.wm.listo{overflow:visible}\n\/* bloques con enlaces, botones o cifras (no se parten en palabras): suben enteros *\/\n.mk{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}\n.mk-in{display:inline-block;vertical-align:top}\nspan.mki{display:block}\n.js .mki{transform:translateY(110%)}\n.in .mki{transform:none;transition:transform 1.1s cubic-bezier(.19,1,.22,1) calc(var(--d,0)*110ms + var(--k,0)*90ms + .25s)}\n\/* listas: el filete se dibuja de izquierda a derecha y despu\u00e9s sube el texto *\/\n.item,.kpis li{position:relative}\n.js .item,.js .kpis li{border-top-color:transparent!important}\n.js .item::before,.js .kpis li::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line2);transform:scaleX(0);transform-origin:0 0}\n.item.in::before,.kpis li.in::before{transform:scaleX(1);transition:transform 1.3s cubic-bezier(.65,0,.35,1) calc(var(--d,0)*110ms)}\n.js .fu .wi{transform:translateY(112%)}\n.fu.in .wi{transform:none;transition:transform 1s cubic-bezier(.19,1,.22,1) calc(var(--d,0)*110ms + var(--k,0)*160ms + var(--i,0)*22ms + .1s)}\n\/* Texto \u00e1mbar con textura dorada (bg-sticker). home.js marca con .tx la unidad m\u00e1s peque\u00f1a que\n   contiene ese texto: la letra en los titulares con luz bajo el cursor, la palabra en el resto.\n   La textura no se aplica al contenedor porque el recorte al texto (background-clip) no alcanza a\n   los hijos que se mueven con transform: se quedar\u00edan transparentes. El desplazamiento por --j\/--i\n   hace que cada letra muestre un tramo distinto de la textura. *\/\n.tx,.cifra .ac{background-image:url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-bg-sticker.jpg);background-image:image-set(url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-bg-sticker.avif) type(\"image\/avif\"),url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-bg-sticker.jpg) type(\"image\/jpeg\"));background-size:620px auto;background-position:calc(var(--j,var(--i,0)) * -41px) calc(var(--j,var(--i,0)) * -17px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}\n\/* El relleno con textura solo pinta dentro de la caja de la letra o palabra; sin este margen, las\n   descendentes y los acentos que sobresalen de la caja quedaban transparentes (la \u00abg\u00bb cortada). *\/\n.tx,.cifra .ac,.hero .h1b .ch{padding:.12em .04em .28em;margin:-.12em -.04em -.28em}\n.ola .tx{text-shadow:none!important;filter:brightness(calc(1 + var(--k,0) * .45))}\n\n\/* luz bajo el cursor: home.js da a cada letra --k (0 a 1) seg\u00fan su distancia al puntero *\/\n.ola .ch{translate:0 calc(var(--k,0) * -.09em);text-shadow:0 0 calc(var(--k,0) * .5em) rgb(254 180 6 \/ calc(var(--k,0) * .75))}\n.ola.ac .ch,.ola .ac .ch{color:color-mix(in srgb,#FFE9AE calc(var(--k,0) * 100%),var(--ac))}\n\n\/* ---------- bloques fijos (sticky) ---------- *\/\n.js .pin{position:relative;height:calc(var(--alto) * var(--vh,1vh))}\n.pin-in{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px var(--gut)}\n.js .pin-in{position:sticky;top:0;height:100vh;height:100svh;height:calc(var(--vh,1svh) * 100);min-height:0;padding:0 var(--gut);overflow:hidden}\n.etapa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;padding:48px 0}\n.js .etapa{position:absolute;inset:0;padding:0 var(--gut);visibility:hidden}\n.d1{font-weight:800;font-size:clamp(1.85rem,4.4vw,5.25rem) !important;line-height:1.1;letter-spacing:-.045em;text-wrap:balance}\n.d2,.d-zoom{font-weight:800;font-size:clamp(2.6rem,6.6vw,7.6rem) !important;line-height:1.04;letter-spacing:-.055em}\n\n\/* hero: fondo blanco; \u00abLo construimos.\u00bb lleva la imagen como textura dentro de las letras *\/\n@property --dx{syntax:'<length>';inherits:true;initial-value:0px}\n.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);background:#fff;color:var(--ink)}\n\/* Con JavaScript, el alto sale de --vh (home.js): un alto de pantalla fijo en p\u00edxeles que no cambia\n   cuando la barra del navegador m\u00f3vil aparece o se oculta. Ver \u00abVH\u00bb en home.js. *\/\n.js .hero{height:calc(var(--vh,1svh) * 100)}\n.hero h1{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;font-size:1rem !important;font-weight:800}\n.hero .h1a{font-size:clamp(1.85rem,4.4vw,5.25rem) !important;line-height:1.12;letter-spacing:-.045em}\n\/* \u00abLo construimos.\u00bb entra letra por letra con un zoom out: cada letra llega grande y se reduce\n   hasta su lugar, y la siguiente arranca antes de que la anterior termine. Aqu\u00ed no hay m\u00e1scara por\n   palabra (la letra ampliada se recortar\u00eda). El relleno \u00abbackwards\u00bb solo cubre la espera y la\n   animaci\u00f3n: al terminar, la letra vuelve a sus estilos (textura, luz bajo el cursor). *\/\n.js .hero .h1b .wi{transform:none;transition:none}\n.hero .h1b .wm{overflow:visible}\n.hero .h1b .ch{transform-origin:50% 55%}\n.js .hero h1:not(.in) .h1b .ch{opacity:0}\n.hero h1.in .h1b .ch{animation:letra-zoom .7s cubic-bezier(.16,1,.3,1) calc(.15s + var(--j,0) * 30ms) backwards}\n@keyframes letra-zoom{0%{opacity:0;transform:scale(3.6);filter:blur(10px)}35%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}\n.hero .h1b{white-space:nowrap;font-size:clamp(2.3rem,9.4vw,11rem) !important;line-height:1.02;letter-spacing:-.055em;padding-bottom:.04em;color:var(--ink)}\n\/* Cada letra pinta su tramo de la misma imagen: --x\/--y son su posici\u00f3n dentro de la l\u00ednea (los\n   calcula home.js) y --dx desplaza la textura despacio para que no se vea fija.\n   La textura entra cuando la \u00faltima letra ya lleg\u00f3 (.tx-on, la pone home.js): mientras se animan,\n   las letras van en tinta y al final la tinta se desvanece sobre la imagen. As\u00ed las letras se pintan\n   como texto y no como imagen, y el LCP de la p\u00e1gina queda en el primer cuadro: con la textura desde\n   el inicio, cada letra contaba como imagen de fondo y Lighthouse llevaba el LCP en m\u00f3vil a ~14 s. *\/\n.hero .h1b .ch{-webkit-text-fill-color:var(--ink);transition:-webkit-text-fill-color .9s ease}\n.hero h1.tx-on .h1b .ch{background-image:url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-website-hero-bg.jpg);background-image:image-set(url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-website-hero-bg-1600.avif) type(\"image\/avif\"),url(https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-website-hero-bg.jpg) type(\"image\/jpeg\"));background-repeat:no-repeat;background-size:var(--bw,1200px) auto;background-position:calc(var(--dx) + var(--ox,0px) - var(--x,0px)) calc(var(--oy,0px) - var(--y,0px))}\n.tx-ok .hero h1.tx-on .h1b .ch{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}\n.tx-ok .hero h1.tx-on .h1b{animation:deriva 16s ease-in-out infinite alternate;filter:saturate(1.3) brightness(1.12)}\n@keyframes deriva{from{--dx:var(--rx,100px)}to{--dx:calc(var(--rx,100px) * -1)}}\n.tx-ok .hero h1.tx-on .h1b.ola .ch{color:transparent;text-shadow:none;filter:brightness(calc(1 + var(--k,0) * .45)) saturate(calc(1 + var(--k,0) * .3))}\n.hero .pista{z-index:1;color:rgba(12,12,15,.6)}\n\/* Imago sobre el titular y, debajo, los servicios uno por uno: cada palabra sube desde abajo y sale\n   por arriba (home.js alterna .on y .sale). Arranca cuando termina \u00abLo construimos.\u00bb. *\/\n.hero-c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}\n.hero-logo{width:clamp(120px,12vw,200px);height:auto;aspect-ratio:1012\/680;margin-bottom:clamp(14px,2.6vh,32px);overflow:visible}\n.hero-logo polygon{stroke:currentColor;stroke-width:.8px;stroke-linejoin:bevel;vector-effect:non-scaling-stroke}\n.hero-logo .f{fill:var(--hbg,#fff)}\n.hero-logo .o{fill:#FFA500}\n.hero-logo polygon:first-child{stroke:none}\n.js .hero-logo{opacity:0;transform:translateY(14px) scale(.92)}\n.hero-c.in .hero-logo{opacity:1;transform:none;transition:opacity .8s ease,transform 1.1s cubic-bezier(.19,1,.22,1)}\n\/* Servicios en marquesina, como los logotipos: de derecha a izquierda y en gris claro (mezcla del\n   color del texto con transparencia, para seguir el paso a oscuro). El hueco va en margin-right,\n   no en gap, para que el 50 % caiga justo al inicio de la segunda serie. *\/\n.hero-mq{width:calc(100% + var(--gut) * 2);margin:clamp(18px,3.2vh,40px) calc(var(--gut) * -1) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}\n.hero-pista{display:flex;width:max-content;font-weight:700;font-size:clamp(1.3rem,1.7vw,1.75rem) !important;line-height:1.3;letter-spacing:-.025em;white-space:nowrap}\n.hero-pista span{display:flex;align-items:center;margin-right:.8em;color:color-mix(in srgb,currentColor 52%,transparent)}\n.hero-pista span::after{content:'';flex:none;width:.2em;height:.2em;margin-left:.8em;background:var(--ac);transform:rotate(45deg)}\n.hero-pista.corre{animation:marquesina var(--dur,40s) linear infinite}\n.js .hero-mq{opacity:0;transform:translateY(12px)}\n.hero-c.in .hero-mq{opacity:1;transform:none;transition:opacity 1s ease 2.1s,transform 1.2s cubic-bezier(.19,1,.22,1) 2.1s}\n\/* Sobre el blanco la cabecera va en tinta. *\/\n.claro .cab{background:none}\n.claro .cab-nav > a,.claro .desp-b,.claro .cab-menu,.claro .cab .idioma{color:var(--ink)}\n.claro .cab-nav > a:hover,.claro .desp:hover .desp-b,.claro .desp-b[aria-expanded=true]{color:#8A6100}\n.claro .cab-nav > a::after,.claro .desp-b::after{background:#8A6100}\nhtml.menu-abierto .cab-menu{color:#F4F4F6}\n.claro .cab-logo img{filter:brightness(0)}\n\/* \u00abNo imaginamos el futuro.\u00bb termina hacia 1.05 s; \u00abLo construimos.\u00bb arranca justo despu\u00e9s. *\/\n.hero h1.in .wi{transform:none;transition:transform .8s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*60ms + .1s)}\n\n\/* inicio *\/\n.h-inicio{font-size:1rem !important;display:flex;flex-direction:column;align-items:center;font-weight:800;letter-spacing:-.045em;transform-origin:50% 100%}\n.h-inicio .l1,.h-inicio .l3{font-size:clamp(1.85rem,4.4vw,5.25rem) !important;line-height:1.12;text-wrap:balance}\n.h-inicio .l2{font-size:clamp(2.6rem,6.2vw,7.4rem) !important;line-height:1.08;letter-spacing:-.055em}\n.rot-caja{position:relative;width:100%;margin-top:.25em}\n.rot{position:relative;width:100%;overflow:hidden;font-weight:800;letter-spacing:-.05em;text-transform:uppercase}\n.rot .ri{display:flex;align-items:center;justify-content:center;line-height:1.1}\n.js .rot .ri{position:absolute;inset:0;opacity:0}\n.js .rot-inicio{height:1.5em}\n.rot-inicio{font-size:clamp(2.3rem,6vw,6.6rem) !important}\n.ecos{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}\n.eco{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);text-align:center;white-space:nowrap;font-weight:800;letter-spacing:-.05em;text-transform:uppercase;font-size:clamp(3.4rem,9.6vw,10.5rem) !important;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.45);opacity:0}\n.eco.ac{-webkit-text-stroke-color:rgba(254,180,6,.6)}\n.no-js .ecos,html:not(.js) .ecos{display:none}\n.pista{position:absolute;left:50%;bottom:clamp(20px,3.5vh,36px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;font-size:13px !important;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,244,246,.7)}\n\/* Indicador de scroll: un rat\u00f3n con la rueda bajando. *\/\n.raton{position:relative;display:block;width:26px;height:40px;border:2px solid currentColor;border-radius:14px}\n.raton i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ac);animation:rueda 1.8s cubic-bezier(.65,0,.35,1) infinite}\n@keyframes rueda{0%{transform:none;opacity:0}20%{opacity:1}75%{transform:translateY(13px);opacity:0}100%{transform:translateY(13px);opacity:0}}\n\n.capac li{transition:border-color .3s}\n.capac li+li{border-left-color:var(--line2)}\n\/* retos *\/\n.verbos{display:flex;flex-wrap:nowrap;justify-content:center;gap:0 .4em;white-space:nowrap;font-weight:800;font-size:clamp(1.8rem,3.1vw,4.4rem) !important;letter-spacing:-.045em;text-transform:uppercase;line-height:1.1}\n.vb{display:inline-block;overflow:hidden;padding:.12em .03em .28em;margin:-.12em 0 -.28em}\n.verbos.listo .vb{overflow:visible}\n.js .vb .wi{transform:translateY(112%)}\n.capac{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin-top:1.4em;font-weight:700;font-size:clamp(.8rem,1.25vw,1.3rem) !important;letter-spacing:.18em;text-transform:uppercase}\n.capac li{padding:.2em 1.6em}\n.capac li+li{border-left:1px solid rgba(254,180,6,.5)}\n.js .capac .wi{transform:translateY(112%)}\n\n\/* AI Enablement *\/\n#ai-enablement .d1{margin-top:.5em;font-size:clamp(1.3rem,2.9vw,3.4rem) !important}\n.rot-frases{font-size:clamp(1.9rem,5.2vw,5.8rem) !important;margin-top:.4em}\n.js .rot-frases{height:1.5em}\n\n\/* plataformas de IA bajo AI Enablement *\/\n.ia-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(36px,5.5vw,88px);margin-top:clamp(28px,5vh,56px);max-width:980px}\n.ia-logos li{display:flex;opacity:.9}\n.ia-logos img{width:clamp(34px,3.8vw,58px);height:auto;filter:brightness(0) invert(1)}\n.ia-logos a{position:relative;display:block;line-height:0;text-decoration:none}\n\/* Tooltip propio con el nombre del producto (en lugar del title nativo): sube y aparece al pasar el\n   mouse o al enfocar con teclado. *\/\n.ia-logos a::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,8px);padding:8px 13px;border-radius:3px;background:var(--ac);color:var(--ink);font-weight:800;font-size:14px !important;letter-spacing:-.005em;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .35s cubic-bezier(.2,.8,.2,1)}\n.ia-logos a::before{content:'';position:absolute;left:50%;bottom:calc(100% + 8px);width:12px;height:6px;background:var(--ac);clip-path:polygon(0 0,100% 0,50% 100%);transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .35s cubic-bezier(.2,.8,.2,1)}\n.ia-logos a:hover::after,.ia-logos a:focus-visible::after{opacity:1;transform:translate(-50%,0)}\n.ia-logos a:hover::before,.ia-logos a:focus-visible::before{opacity:1;transform:translate(-50%,0)}\n.ia-logos img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}\n.ia-logos a:hover img,.ia-logos a:focus-visible img{transform:scale(1.15)}\n.ia-logos li:has(a:hover),.ia-logos li:has(a:focus-visible){opacity:1!important}\n.js .ia-logos li{opacity:0}\n\/* Sin tooltip ni clic mientras los logos se acomodan: home.js pone .listos al terminar. *\/\n.js .ia-logos:not(.listos) a{pointer-events:none}\n.js .ia-logos:not(.listos) a::after,.js .ia-logos:not(.listos) a::before{opacity:0!important}\n\/* Entrada: los seis llegan grandes al centro, uno tras otro, se reducen ah\u00ed y luego se abren hacia\n   su lugar. --dx\/--dy (home.js) es la distancia de cada logo al centro de la fila. *\/\n.ia-logos.abre li{animation:logos-abre 1.5s cubic-bezier(.7,0,.25,1) calc(var(--n,0) * 70ms) both}\n@keyframes logos-abre{\n  0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(3.2)}\n  12%{opacity:.9}\n  48%{opacity:.9;transform:translate(var(--dx,0),var(--dy,0)) scale(1)}\n  100%{opacity:.9;transform:none}}\n@media (max-width:600px){.ia-logos{gap:16px 17px;flex-wrap:nowrap}.ia-logos img{width:31px}}\n\n\/* Output \/ Outcome *\/\n.oo-h{font-size:clamp(1.3rem,2.6vw,2.8rem) !important;margin-bottom:.9em}\n.oo{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(20px,4vw,72px)}\n.oo-c{width:min(38vw,560px)}\n.oo-t{font-weight:800;font-size:clamp(2.6rem,6.4vw,7.4rem) !important;letter-spacing:-.05em;line-height:1.05}\n.oo-d{margin-top:.5em;font-weight:700;font-size:clamp(1rem,2vw,2.2rem) !important;letter-spacing:-.02em;line-height:1.3}\n.oo-l{list-style:none;margin-top:1.4em;display:grid;gap:.45em;font-weight:700;font-size:clamp(1rem,1.7vw,1.7rem) !important;letter-spacing:-.02em;line-height:1.25}\n.oo-l .n{opacity:.55;font-variant-numeric:tabular-nums}\n.js .oo-l .wi{transform:translateY(112%)}\n.oo-f{color:var(--ac);flex:none;width:clamp(56px,6vw,120px);height:auto}\n.js .oo-f{opacity:0}\n\n\/* cierre *\/\n.c-logo{width:clamp(220px,36vw,640px);height:auto}\n.c-lema{margin:1.4em 0 1.2em;font-weight:700;font-size:clamp(.75rem,1.2vw,1.2rem) !important;letter-spacing:.22em;text-transform:uppercase}\n.js .c-logo{opacity:0}\n#cierre .e-b .d1{font-size:clamp(1.7rem,3.8vw,4.6rem) !important}\n\n@media (max-width:700px){\n  .js .rot-frases{height:2.6em}\n  .rot-frases .ri{white-space:normal;text-wrap:balance}\n  .oo{flex-direction:column;gap:20px}\n  .oo-h{margin-bottom:.4em}\n  .oo-c{width:100%}\n  .oo-f{transform:rotate(90deg);width:48px}\n  .capac{display:grid;grid-template-columns:1fr 1fr;row-gap:.6em}\n  .capac li,.capac li+li{border:0}\n}\n\n\/* ---------- secciones de lista (t\u00edtulo fijo a la izquierda) ---------- *\/\n.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);max-width:1600px;margin:0 auto;padding:clamp(120px,16vw,220px) var(--gut)}\n.split-izq{position:sticky;top:clamp(104px,16vh,150px);align-self:start}\n.split h2{font-weight:800;font-size:clamp(2rem,4vw,3.9rem) !important;line-height:1.05;letter-spacing:-.042em;text-wrap:balance}\n.intro{margin-top:24px;max-width:44ch;font-size:clamp(1rem,1.25vw,1.2rem) !important;line-height:1.65;color:var(--dim)}\n.der{display:grid;gap:clamp(48px,6vw,80px);min-width:0;align-content:start}\n.lista{list-style:none}\n.lista.dos{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}\n.item{padding:30px 0 40px;border-top:1px solid var(--line)}\n.item h3{font-weight:800;font-size:clamp(1.4rem,2.3vw,2.25rem) !important;letter-spacing:-.032em;line-height:1.12}\n.item p{margin-top:12px;max-width:52ch;color:var(--dim);line-height:1.62}\n\/* Numeral de etapa: va dentro del <h3>, as\u00ed entra con la primera palabra del t\u00edtulo. *\/\n.item h3 .n{color:var(--ac);margin-right:.12em;font-variant-numeric:tabular-nums}\nhtml[data-tema=claro] .item h3 .n{color:#8A6100}\n.item .area{margin-top:10px;font-weight:700;font-size:12px !important;letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}\n.item .area+p{margin-top:6px}\n.lista.dos .item h3{font-size:clamp(1.2rem,1.7vw,1.6rem) !important}\n.equipo{margin-top:6px}\n\/* En las tarjetas de servicio el enlace va al pie (las de ERP y CRM llevan antes el sello). *\/\n.serv .mas{align-self:flex-start;margin-top:auto}\n.serv .sello + .mas{margin-top:14px}\n.mas{display:inline-block;margin-top:18px;font-weight:800;font-size:.95rem !important;text-decoration:none;color:var(--ac);border-bottom:1px solid rgba(254,180,6,.4);padding-bottom:2px}\n.mas:hover{border-color:var(--ac)}\n.sub h3{font-weight:800;font-size:clamp(1.5rem,2.5vw,2.4rem) !important;letter-spacing:-.035em;line-height:1.1}\n.sub p{margin-top:14px;max-width:52ch;color:var(--dim);line-height:1.62}\n.sub+.lista{margin-top:calc(-1 * clamp(16px,2vw,32px))}\n.hex svg{display:block;width:100%;height:auto}\n.hex svg text{font-family:Manrope}\n.ciclo{display:grid;gap:6px}\n.pasos-3d{display:block;width:100%;height:clamp(130px,13vw,180px)}\n.fp-caja{position:relative;font-weight:800;font-size:clamp(1.7rem,3.4vw,3.4rem) !important;letter-spacing:-.04em;line-height:1.15}\n.js .fp-caja{height:1.3em}\n.js .fp{position:absolute;left:0;right:0;top:0;white-space:nowrap}\n.js .fp .wi{transform:translateY(112%);transition:transform .75s cubic-bezier(.19,1,.22,1) calc(var(--i,0) * 55ms)}\n.js .fp.on .wi{transform:none}\n.js .fp.fuera .wi{transform:translateY(-112%);transition-duration:.5s;transition-delay:calc(var(--i,0) * 35ms)}\n@media (max-width:600px){.js .fp{white-space:normal}.js .fp-caja{height:2.4em}}\n.pasos{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:34px}\n.pasos::before,.pasos::after{content:'';position:absolute;left:12.5%;width:75%;top:9px;height:2px;background:var(--line2)}\n.pasos::after{background:var(--ac);transform-origin:0 0;transform:scaleX(var(--p,0))}\n.pasos li{position:relative;text-align:center;font-weight:700;font-size:clamp(11px,1vw,14px) !important;letter-spacing:.16em;text-transform:uppercase}\n.pasos li::before{content:'';position:absolute;z-index:1;left:50%;top:-34px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:2px solid var(--line2);background:var(--ink);transition:background .35s,border-color .35s}\nhtml[data-tema] .pasos li::before{background:var(--bgt)}\n.pasos li.on::before{background:var(--ac);border-color:var(--ac)}\n.tarjetas{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.tarjeta{border:1px solid var(--line2);border-radius:4px;padding:22px 22px 24px;border-top:2px solid var(--ac)}\n.tarjeta h3{font-weight:800;font-size:clamp(1.1rem,1.5vw,1.4rem) !important;letter-spacing:-.025em;line-height:1.15}\n.tarjeta p{margin-top:10px;color:var(--dim);line-height:1.55;font-size:.95rem !important}\n@media (max-width:480px){.tarjetas{grid-template-columns:1fr}}\n.kpis{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}\n.kpis li{border-top:1px solid var(--line);padding:28px 0 44px}\n.cifra{font-weight:800;font-size:clamp(3.4rem,7vw,7.2rem) !important;line-height:1;letter-spacing:-.05em}\n.cifra+p{margin-top:14px;font-weight:700;font-size:13px !important;letter-spacing:.16em;text-transform:uppercase}\n.mapa{position:relative;z-index:1;max-width:1240px;margin:clamp(56px,8vw,128px) auto 0;padding:0 var(--gut) clamp(80px,10vw,140px)}\n.mapa img{display:block;width:100%;height:auto}\n.js .mapa img{opacity:0;transform:scale(.94)}\n.mapa.in img{opacity:1;transform:none;transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.19,1,.22,1)}\n.logos-sec{position:relative;z-index:1;margin-top:calc(-1*clamp(40px,8vw,120px))}\n.mq-t{max-width:1600px;margin:0 auto 6px;padding:0 var(--gut);font-weight:800;font-size:clamp(1.4rem,2.2vw,2.1rem) !important;line-height:1.15;letter-spacing:-.03em}\n.clientes + .mq-t{margin-top:clamp(36px,4vw,60px)}\n.clientes{position:relative;z-index:1;overflow:hidden;padding-bottom:clamp(16px,2vw,32px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}\n.pista-logos{display:flex;align-items:center;width:max-content;height:90px}\n.pista-logos img{flex:none;max-width:none;margin-right:80px;opacity:.85}\n.pista-logos.corre{animation:marquesina 40s linear infinite}\n.pista-logos.inversa{animation-direction:reverse}\n.tec .pista-logos img{margin-right:64px;filter:brightness(0) invert(1)}\n\/* En silueta perder\u00edan el detalle interior (la A de Angular, las dos serpientes de Python): van en escala de grises aclarada. *\/\n.tec .pista-logos img.gris{filter:grayscale(1) brightness(1.8) contrast(1.1)}\n@keyframes marquesina{to{transform:translateX(-50%)}}\n@media (max-width:900px){\n  .verbos{flex-direction:column;align-items:center;font-size:clamp(2rem,7vw,3.4rem) !important}\n  .split{grid-template-columns:1fr}\n  .split-izq{position:static}\n}\n@media (max-width:600px){.lista.dos{grid-template-columns:1fr}}\n\n\/* ---------- contacto y pie ---------- *\/\n\/* Compacto, como casos\/servicios\/productos: en una laptop deben verse a la vez los datos y el mapa. *\/\n.contacto{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,2vw,32px) clamp(40px,6vw,112px);align-items:start;max-width:1600px;margin:0 auto;padding:clamp(56px,6vw,96px) var(--gut) clamp(48px,5vw,80px);border-top:1px solid var(--line);background:var(--ink)}\n.contacto h2{font-weight:800;font-size:clamp(1.6rem,2.3vw,2.4rem) !important;line-height:1.1;letter-spacing:-.035em}\n.contacto .intro{margin-top:14px;font-size:1rem !important;line-height:1.6;max-width:44ch}\n.contacto .ctas{margin-top:22px}\n.ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}\n.datos{display:grid;gap:28px;font-weight:700;line-height:1.6}\n.datos dt{font-size:12px !important;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}\n.datos a{text-decoration:none}\n.datos a:hover{color:var(--ac)}\n@media (max-width:900px){.contacto{grid-template-columns:1fr}}\n\/* ---------- nuestros productos y casos de \u00e9xito ---------- *\/\n.propios{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:clamp(100px,12vw,180px) var(--gut) clamp(60px,8vw,120px)}\n\/* Titulares compactos: casos, servicios y productos deben leerse juntos en una pantalla de laptop. *\/\n.propios h2{font-weight:800;font-size:clamp(1.6rem,2.3vw,2.4rem) !important;line-height:1.1;letter-spacing:-.035em}\n.prod{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2vw,32px);border:1px solid var(--line2);border-radius:4px;text-decoration:none;color:var(--tx);transition:border-color .3s,background .3s}\n.prod:hover{border-color:var(--ac);background:rgba(254,180,6,.04)}\n.prod-logo{display:flex;align-items:center;gap:12px;height:44px}\n.prod-logo .marca{height:38px;width:auto;filter:brightness(0) invert(1)}\n.prod-logo .texto{font-weight:800;font-size:26px !important;letter-spacing:-.04em;line-height:1}\n.prod-logo img:only-child{height:34px;width:auto}\n.prod p{color:var(--dim);font-size:.92rem !important;line-height:1.55}\n.prod .mas{margin-top:auto;align-self:flex-start}\n.prod-logo img.zoho{height:44px;width:auto}\n.prod-ctas{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}\n.prod-ctas .mas{margin-top:0}\n.casos{position:relative;isolation:isolate;margin-top:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;padding:clamp(18px,1.8vw,26px) clamp(22px,2vw,32px);border:1px solid var(--line2);border-radius:4px;text-decoration:none;color:var(--tx);overflow:hidden;transition:border-color .3s,color .3s}\n.casos::before{content:'';position:absolute;inset:0;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.7,0,.25,1);z-index:-1}\n.casos:hover,.casos:focus-visible{border-color:var(--ac);color:var(--ink)!important}\n.casos:hover::before,.casos:focus-visible::before{transform:scaleX(1)}\n.casos-t{font-weight:800;font-size:clamp(1.6rem,2.3vw,2.4rem) !important;letter-spacing:-.035em;line-height:1.1}\n.casos-d{grid-column:1;color:inherit;opacity:.7;font-weight:700}\n.casos-f{grid-row:1\/span 2;grid-column:2;width:clamp(36px,3vw,48px);height:auto;color:var(--ac);transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s}\n.casos:hover .casos-f{transform:translateX(8px);color:var(--ink)}\n.propios + .propios{padding-top:clamp(28px,3vw,44px)}\n#casos,#nuestros-servicios{padding-bottom:0}\n\/* El cierre termina con su texto al centro y media pantalla vac\u00eda debajo: #casos sube sobre ese\n   hueco para quedar cerca de \u00abConstruy\u00e1moslo juntos\u00bb. *\/\n.js #casos{margin-top:calc(var(--vh,1vh) * -24)}\n#casos{padding-top:clamp(40px,5vw,80px)}\n#casos .casos{margin-top:0}\n.serv{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,1.8vw,30px);border:1px solid var(--line2);border-radius:4px;transition:border-color .3s,background .3s}\n.serv:hover{border-color:rgba(254,180,6,.5);background:rgba(254,180,6,.03)}\n.serv h3{font-weight:800;font-size:clamp(1.1rem,1.35vw,1.35rem) !important;line-height:1.15;letter-spacing:-.03em}\n.serv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px}\n.serv-ic{width:clamp(30px,2.4vw,36px);height:auto;color:var(--ac);overflow:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}\n.serv-ic *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}\n.js .serv-ic *{stroke-dasharray:1 1;stroke-dashoffset:1}\n.serv.in .serv-ic *{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) calc(var(--d,0)*120ms + .35s)}\n.serv:hover .serv-ic{transform:translateY(-3px)}\n.serv .n{font-weight:800;font-size:.8rem !important;letter-spacing:.04em;color:var(--dim);font-variant-numeric:tabular-nums}\n.serv p{color:var(--dim);font-size:.92rem !important;line-height:1.55}\n.serv-marcas{display:flex;align-items:center;gap:clamp(20px,2vw,28px)}\n.serv-marcas img{height:clamp(32px,2.5vw,40px);width:auto}\n.serv-marcas img[alt=SAP]{height:clamp(26px,2vw,32px)}\n.sello{display:block;margin-top:auto;align-self:flex-start;height:34px;width:auto;border-radius:5px}\n\/* Carruseles de servicios y productos: la pista se mueve con transform (home.js, carrusel()).\n   Se extiende hasta el borde de la pantalla y los bordes se difuminan con mask-image. *\/\n.carr-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}\n.carr-nav{display:flex;gap:10px;flex:none}\n.carr-b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--tx);cursor:pointer;transition:background .3s,border-color .3s,color .3s,opacity .3s}\n.carr-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}\n.carr-b:hover:not(:disabled),.carr-b:focus-visible{background:var(--ac);border-color:var(--ac);color:var(--ink)}\n.carr-b:disabled{opacity:.3;cursor:default}\n.carr{margin:clamp(18px,2vw,28px) calc(var(--gut)*-1) 0;padding:0 var(--gut) 4px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent)}\n.pista-c{position:relative;display:flex;gap:16px;align-items:stretch;touch-action:pan-y;cursor:grab;will-change:transform;user-select:none;-webkit-user-select:none}\n.carr.arrastra .pista-c{cursor:grabbing}\n.carr.arrastra .pista-c a{pointer-events:none}\n.pista-c img{-webkit-user-drag:none;user-select:none}\n.carr-barra{margin-top:18px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}\n.carr-barra i{display:block;height:100%;width:var(--an,30%);background:var(--ac);transform:translateX(var(--bx,0));border-radius:2px}\n.carr.cabe + .carr-barra,.carr-cab:has(+ .carr.cabe) .carr-nav{display:none}\n\/* Ancho de tarjeta = fracci\u00f3n de la pista: cuatro completas en laptop y escritorio, dos y media en\n   tablet (la tercera asoma), una en celular. width repite flex-basis por WebKit (ver CLAUDE.md). *\/\n.serv,.prod{flex:0 0 calc((100% - 48px)\/4);width:calc((100% - 48px)\/4)}\n@media (max-width:1099px){.serv,.prod{flex-basis:calc((100% - 32px)\/2.5);width:calc((100% - 32px)\/2.5)}}\n@media (max-width:640px){.serv,.prod{flex-basis:82vw;width:82vw}.carr-b{width:44px;height:44px}}\n\n\/* ---------- contacto: datos con \u00edconos, redes y mapa ---------- *\/\n.contactos{list-style:none;display:grid;gap:12px}\n.contactos li{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:14px;font-weight:500;font-size:.95rem !important;line-height:1.45}\n.contactos b{font-weight:700}\n.contactos svg{width:22px;height:22px;fill:none;stroke:var(--ac);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\n.contactos svg.relleno{fill:var(--ac);stroke:none}\n.contactos a{text-decoration:none}\n.contactos a:hover{color:var(--ac)}\n.redes{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}\n.redes a{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .3s,transform .3s cubic-bezier(.2,.8,.2,1)}\n.redes a:hover,.redes a:focus-visible{background:var(--ac);transform:translateY(-3px)}\n.redes img{width:18px;height:18px;filter:brightness(0) invert(1);transition:filter .3s}\n.redes a:hover img,.redes a:focus-visible img{filter:brightness(0)}\n.redes a::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);padding:7px 11px;border-radius:3px;background:var(--ac);color:var(--ink);font-weight:800;font-size:13px !important;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}\n.redes a:hover::after,.redes a:focus-visible::after{opacity:1;transform:translate(-50%,0)}\n.gmap{grid-column:1\/-1;border:1px solid var(--line2);border-radius:4px;overflow:hidden;height:clamp(240px,24vw,340px)}\n.gmap iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.88) brightness(.95)}\n.js .cont-der{opacity:0;transform:translateY(24px)}\n.cont-der.in{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.19,1,.22,1)}\n.js .prod,.js .casos,.js .serv{opacity:0;transform:translateY(24px)}\n.prod.in,.casos.in,.serv.in{opacity:1;transform:none;transition:opacity .9s ease calc(var(--d,0)*120ms),transform 1.1s cubic-bezier(.19,1,.22,1) calc(var(--d,0)*120ms),border-color .3s,background .3s,color .3s}\n\n@media (prefers-reduced-motion:reduce){\n  .js .rv .wi,.js .h-inicio .wi,.js .hero .wi,.js .mki,.js .fu .wi{transform:none;transition:none}\n  .js .item::before,.js .kpis li::before{transform:none}\n  .tx-ok .hero h1.tx-on .h1b,.hero h1.in .h1b .ch,.ia-logos.abre li{animation:none}\n  .js .ia-logos li{opacity:.9}\n  .js .cont-der,.js .prod,.js .casos,.js .serv{opacity:1;transform:none}\n  .js .hero-logo{opacity:1;transform:none}\n  .js .hero-mq{opacity:1;transform:none}\n  .hero-pista.corre{animation:none}\n  .js .serv-ic *{stroke-dashoffset:0}\n  .js .hero h1:not(.in) .h1b .ch{opacity:1}\n  .h-inicio.in .l2{animation:none;opacity:1}\n  .raton i,.pista-logos.corre{animation:none}\n}\n<\/style>\n<header class=\"cab\">\n  <a class=\"cab-logo\" href=\"\/\" aria-label=\"ANIGAMI Studio, inicio\"><img decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png\" alt=\"ANIGAMI Studio\" width=\"153\" height=\"26\"><\/a>\n  <!-- Mismo men\u00fa que #menu (m\u00f3vil): Nosotros, \u00bfQu\u00e9 hacemos? con tres secciones, Metodolog\u00eda,\n       Trayectoria y clientes, Servicios y productos y Casos de \u00e9xito (p\u00e1gina aparte). -->\n  <nav class=\"cab-nav\" aria-label=\"Secciones\">\n    <a href=\"#servicios\">Nosotros<\/a>\n    <div class=\"desp\">\n      <button type=\"button\" class=\"desp-b\" aria-expanded=\"false\" aria-controls=\"desp-p\">\u00bfQu\u00e9 hacemos?<svg viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M2.5 4.5 6 8l3.5-3.5\"\/><\/svg><\/button>\n      <div class=\"desp-p\" id=\"desp-p\">\n        <a href=\"#ai-enablement\">AI Enablement<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/a>\n        <a href=\"#operacion\">ERP, CRM y Agentes IA<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/a>\n        <a href=\"#productos\">Desarrollo de software y plataformas<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/a>\n      <\/div>\n    <\/div>\n    <a href=\"#metodologia\" data-p=\".92\">Metodolog\u00eda<\/a>\n    <a href=\"#resultados\">Trayectoria y clientes<\/a>\n    <a href=\"#casos\">Servicios y productos<\/a>\n    <a href=\"https:\/\/anigami.studio\/casos-de-exito\/\">Casos de \u00e9xito<\/a>\n  <\/nav>\n  <div class=\"cab-der\">\n    <div class=\"idioma\" data-no-translation aria-label=\"Idioma\"><a href=\"\/\" hreflang=\"es\" lang=\"es\">ES<\/a><span class=\"sep\" aria-hidden=\"true\">\/<\/span><a href=\"\/en\/\" hreflang=\"en\" lang=\"en\">EN<\/a><\/div>\n    <a class=\"btn btn-primary\" href=\"https:\/\/bookings.anigami.studio\/sales\">Agendar sesi\u00f3n<\/a>\n    <button type=\"button\" class=\"cab-menu\" aria-expanded=\"false\" aria-controls=\"menu\" aria-label=\"Men\u00fa\"><i><\/i><i><\/i><\/button>\n  <\/div>\n<\/header>\n<!-- Men\u00fa a pantalla completa (por debajo de 1280 px): las mismas entradas que la barra. -->\n<nav class=\"menu\" id=\"menu\" aria-label=\"Secciones del inicio\">\n  <ul>\n    <li><a href=\"#servicios\">Nosotros<\/a><\/li>\n    <li><span class=\"menu-g\">\u00bfQu\u00e9 hacemos?<\/span>\n      <ul class=\"menu-sub\">\n        <li><a href=\"#ai-enablement\">AI Enablement<\/a><\/li>\n        <li><a href=\"#operacion\">ERP, CRM y Agentes IA<\/a><\/li>\n        <li><a href=\"#productos\">Desarrollo de software y plataformas<\/a><\/li>\n      <\/ul>\n    <\/li>\n    <li><a href=\"#metodologia\" data-p=\".92\">Metodolog\u00eda<\/a><\/li>\n    <li><a href=\"#resultados\">Trayectoria y clientes<\/a><\/li>\n    <li><a href=\"#casos\">Servicios y productos<\/a><\/li>\n    <li><a href=\"https:\/\/anigami.studio\/casos-de-exito\/\">Casos de \u00e9xito<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 16 16 8M9 8h7v7\"\/><\/svg><\/a><\/li>\n  <\/ul>\n  <div class=\"idioma idioma-menu\" data-no-translation aria-label=\"Idioma\"><a href=\"\/\" hreflang=\"es\" lang=\"es\">ES<\/a><span class=\"sep\" aria-hidden=\"true\">\/<\/span><a href=\"\/en\/\" hreflang=\"en\" lang=\"en\">EN<\/a><\/div>\n<\/nav>\n<div id=\"avance\" aria-hidden=\"true\"><\/div>\n<canvas id=\"puntos\" aria-hidden=\"true\"><\/canvas>\n<div id=\"tema\" aria-hidden=\"true\"><\/div>\n\n<main>\n  <!-- ============ HERO \u00b7 fondo blanco ============\n       La textura de \u00abLo construimos.\u00bb es assets\/website-hero-bg.* (ver README). -->\n  <section class=\"hero\" id=\"hero\">\n    <div class=\"hero-c\">\n      <!-- Imago de anigami_studio_imago.svg, en l\u00ednea: caras del color del fondo (--hbg) y filetes\n           finos en currentColor, como el original; as\u00ed acompa\u00f1an el paso del hero a oscuro. -->\n      <svg class=\"hero-logo\" viewBox=\"6 192 1012 680\" role=\"img\" aria-label=\"ANIGAMI Studio\">\n        <polygon class=\"o\" points=\"189.4 374 490.8 374 337 529.5 337 855.5 346.6 864.8 346.6 532.5 512.5 365.6 179.1 366.4 189.4 374\"\/>\n        <polygon class=\"f\" points=\"678.2 531.5 678.2 199.2 345.8 531.5\"\/>\n        <polygon class=\"f o\" points=\"678.2 531.5 1010.5 199.2 678.2 199.2\"\/>\n        <polygon class=\"f\" points=\"345.8 863.8 678.2 531.5 345.8 531.5\"\/>\n        <polygon class=\"f\" points=\"678.2 199.2 13.5 199.2 179.6 365.3 512 365.3\"\/>\n      <\/svg>\n      <h1 class=\"h-hero\">\n        <span class=\"h1a rw ola\">No imaginamos el futuro.<\/span>\n        <span class=\"h1b ac cr ola\">Lo construimos.<\/span>\n      <\/h1>\n      <div class=\"hero-mq\" role=\"note\" aria-label=\"Transformaci\u00f3n digital, Agentes IA, AI Enablement, ERP y CRM con Zoho y SAP, software a la medida, apps m\u00f3viles, SaaS y e-commerce.\">\n        <div class=\"hero-pista\" aria-hidden=\"true\">\n          <span>Transformaci\u00f3n digital<\/span>\n          <span>Agentes IA<\/span>\n          <span>AI Enablement<\/span>\n          <span>ERP y CRM: Zoho \u00b7 SAP<\/span>\n          <span>Software a la medida<\/span>\n          <span>Apps m\u00f3viles<\/span>\n          <span>SaaS<\/span>\n          <span>E-Commerce<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"pista\" aria-hidden=\"true\"><span class=\"raton\"><i><\/i><\/span>Desliza<\/div>\n  <\/section>\n\n  <!-- ============ INICIO \u00b7 bloque fijo: titular \u2192 rotador ============ -->\n  <section class=\"pin\" id=\"inicio\" data-pin=\"inicio\" style=\"--alto:280\">\n    <div class=\"pin-in\">\n      <h2 class=\"h-inicio\">\n        <span class=\"l1 rw ola\">El futuro de las empresas exige<\/span>\n        <span class=\"l2 ac cr ola\">una nueva forma<\/span>\n        <span class=\"l3 rw ola\">de operar.<\/span>\n      <\/h2>\n      <div class=\"rot-caja\" aria-hidden=\"true\">\n        <div class=\"ecos\"><div class=\"eco\">Conectada<\/div><div class=\"eco\">Inteligente<\/div><div class=\"eco\">\u00c1gil<\/div><div class=\"eco\">Aut\u00f3noma<\/div><div class=\"eco\">Segura<\/div><div class=\"eco ac\">Escalable<\/div><\/div>\n        <div class=\"rot rot-inicio\"><div class=\"ri\">Conectada<\/div><div class=\"ri\">Inteligente<\/div><div class=\"ri\">\u00c1gil<\/div><div class=\"ri\">Aut\u00f3noma<\/div><div class=\"ri\">Segura<\/div><div class=\"ri ac\">Escalable<\/div><\/div>\n      <\/div>\n      <p class=\"sr\">Una operaci\u00f3n conectada, inteligente, \u00e1gil, aut\u00f3noma, segura y escalable.<\/p>\n    <\/div>\n  <\/section>\n\n  <!-- ============ RETOS \u00b7 bloque fijo en tres tiempos ============ -->\n  <section class=\"pin\" id=\"retos\" data-pin=\"retos\" style=\"--alto:380\">\n    <div class=\"pin-in\">\n      <div class=\"etapa\">\n        <h2 class=\"d1 rw ola\">Llegar a ese futuro implica<\/h2>\n        <p class=\"d2 ac cr ola\">nuevos retos.<\/p>\n      <\/div>\n      <div class=\"etapa\">\n        <p class=\"verbos\"><span class=\"vb\"><span class=\"wi\">Integrar.<\/span><\/span> <span class=\"vb\"><span class=\"wi\">Automatizar.<\/span><\/span> <span class=\"vb\"><span class=\"wi\">Construir.<\/span><\/span> <span class=\"vb ac\"><span class=\"wi tx\">Innovar.<\/span><\/span><\/p>\n      <\/div>\n      <div class=\"etapa\">\n        <p class=\"d1 rw ola\"><span class=\"ac\">ANIGAMI Studio<\/span> re\u00fane lo necesario para resolverlos.<\/p>\n        <ul class=\"capac\"><li>Talento<\/li><li>Tecnolog\u00eda<\/li><li>Experiencia<\/li><li>Visi\u00f3n<\/li><\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ UN SOLO PARTNER \u00b7 etapas de una iniciativa ============\n       Para a\u00f1adir una etapa, otro <li class=\"item\"> dentro de .lista. -->\n  <section class=\"split\" id=\"servicios\" aria-labelledby=\"servicios-t\">\n    <div class=\"split-izq\">\n      <h2 id=\"servicios-t\" class=\"rv ola\">Todas tus iniciativas tecnol\u00f3gicas. <span class=\"ac\">Un solo partner.<\/span><\/h2>\n      <p class=\"intro fu\">Combinamos estrategia, tecnolog\u00eda e IA para identificar oportunidades, implementar soluciones y acompa\u00f1arlas hasta generar resultados y escalar.<\/p>\n      <p class=\"equipo fu\"><a class=\"mas\" href=\"https:\/\/anigami.studio\/team\/\">Conoce al equipo<\/a><\/p>\n    <\/div>\n    <ol class=\"lista\">\n      <li class=\"item fu\">\n        <h3><span class=\"n\">1.<\/span> Idea y Estrategia<\/h3>\n        <p>Identificamos oportunidades donde la tecnolog\u00eda puede generar valor para el negocio. Definimos la iniciativa, el resultado esperado, la estrategia, el roadmap y los KPIs para medirlo.<\/p>\n      <\/li>\n      <li class=\"item fu\">\n        <h3><span class=\"n\">2.<\/span> Implementaci\u00f3n<\/h3>\n        <p>Dise\u00f1amos y construimos las soluciones necesarias para llevar la estrategia a producci\u00f3n: software, productos digitales, agentes IA, automatizaci\u00f3n, datos e integraciones.<\/p>\n      <\/li>\n      <li class=\"item fu\">\n        <h3><span class=\"n\">3.<\/span> Operaci\u00f3n y Resultados<\/h3>\n        <p>Acompa\u00f1amos la iniciativa despu\u00e9s del lanzamiento para impulsar adopci\u00f3n, supervisar desempe\u00f1o y asegurar el cumplimiento de los objetivos definidos.<\/p>\n      <\/li>\n      <li class=\"item fu\">\n        <h3><span class=\"n\">4.<\/span> Escala<\/h3>\n        <p>Optimizamos lo implementado y extendemos las capacidades a nuevas \u00e1reas, procesos, mercados o iniciativas.<\/p>\n      <\/li>\n    <\/ol>\n  <\/section>\n\n  <!-- ============ AI ENABLEMENT \u00b7 bloque fijo ============ -->\n  <section class=\"pin\" id=\"ai-enablement\" data-pin=\"enablement\" style=\"--alto:260\">\n    <div class=\"pin-in\">\n      <h2 class=\"d-zoom ac cr ola\">AI Enablement<\/h2>\n      <p class=\"d1 rw ola\">Preparamos a tus equipos para trabajar con <span class=\"ac\">IA.<\/span><\/p>\n      <div class=\"rot rot-frases\" aria-hidden=\"true\">\n        <div class=\"ri\">M\u00e1s productivos.<\/div><div class=\"ri\">M\u00e1s r\u00e1pidos.<\/div><div class=\"ri\"><span>Y con <span class=\"ac\">mejores resultados.<\/span><\/span><\/div>\n      <\/div>\n      <p class=\"sr\">Equipos m\u00e1s productivos, m\u00e1s r\u00e1pidos y con mejores resultados.<\/p>\n      <!-- Plataformas de IA con las que trabajamos, m\u00e1s imajin (producto propio). \u00cdconos de Simple\n           Icons (ChatGPT, Claude, Gemini, GitHub Copilot), de Wikimedia Commons (Microsoft Copilot,\n           Grok) y del repo imajin-app (imajin), en negro; el CSS los pasa a blanco. Cada uno enlaza\n           al sitio del producto en otra pesta\u00f1a. -->\n      <ul class=\"ia-logos\" aria-label=\"Plataformas de IA con las que trabajamos\">\n        <li><a href=\"https:\/\/chatgpt.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"ChatGPT\" data-tip=\"ChatGPT\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-openai.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/claude.ai\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Claude\" data-tip=\"Claude\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-claude.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/gemini.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Gemini\" data-tip=\"Gemini\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-googlegemini.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/copilot.microsoft.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Microsoft Copilot\" data-tip=\"Microsoft Copilot\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-microsoftcopilot.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/github.com\/features\/copilot\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"GitHub Copilot\" data-tip=\"GitHub Copilot\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-githubcopilot.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/grok.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Grok\" data-tip=\"Grok\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-grok.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n        <li><a href=\"https:\/\/imajin.app\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"imajin\" data-tip=\"imajin\"><img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-imajin.svg\" alt=\"\" width=\"36\" height=\"36\" loading=\"lazy\" decoding=\"async\"><\/a><\/li>\n      <\/ul>\n    <\/div>\n  <\/section>\n\n  <!-- ============ AI ENABLEMENT \u00b7 detalle ============\n       Para a\u00f1adir una capacidad, otro <li class=\"item\"> dentro de .lista. -->\n  <section class=\"split\" id=\"enablement-detalle\" aria-labelledby=\"enablement-t\">\n    <div class=\"split-izq\">\n      <h2 id=\"enablement-t\" class=\"rv ola\">IA como capacidad de <span class=\"ac\">toda la organizaci\u00f3n.<\/span><\/h2>\n      <p class=\"intro fu\">Habilitamos herramientas, personas y reglas de operaci\u00f3n para integrar la IA al trabajo diario de forma segura, medible y escalable.<\/p>\n    <\/div>\n    <ul class=\"lista dos\">\n        <li class=\"item fu\"><h3>Estrategia de adopci\u00f3n<\/h3><p>Identificamos oportunidades, priorizamos iniciativas y definimos los casos de uso con mayor potencial para la organizaci\u00f3n.<\/p><\/li>\n        <li class=\"item fu\"><h3>Herramientas y acceso<\/h3><p>Implementamos y configuramos ChatGPT, Claude, Gemini, Copilot y otras plataformas para uso empresarial, con acceso a informaci\u00f3n y herramientas internas.<\/p><\/li>\n        <li class=\"item fu\"><h3>Capacitaci\u00f3n por rol<\/h3><p>Preparamos a cada equipo para incorporar IA en su trabajo diario con casos de uso, workflows y mejores pr\u00e1cticas espec\u00edficas para su funci\u00f3n.<\/p><\/li>\n        <li class=\"item fu\"><h3>Gobernanza y seguridad<\/h3><p>Definimos pol\u00edticas, permisos, manejo de informaci\u00f3n y est\u00e1ndares para utilizar IA de forma segura y controlada.<\/p><\/li>\n        <li class=\"item fu\"><h3>Adopci\u00f3n y Resultados<\/h3><p>Medimos uso, desempe\u00f1o y resultados para mejorar continuamente y escalar lo que genera mejores resultados.<\/p><\/li>\n    <\/ul>\n  <\/section>\n\n  <!-- ============ OPERACI\u00d3N \u00b7 lista con diagrama ============\n       Las \u00e1reas del diagrama viven en home.js (AREAS); la lista de agentes, aqu\u00ed. -->\n  <section class=\"split\" id=\"operacion\" aria-labelledby=\"operacion-t\">\n    <div class=\"split-izq\">\n      <h2 id=\"operacion-t\" class=\"rv ola\">Integramos y conectamos la organizaci\u00f3n para <span class=\"ac\">escalar con IA.<\/span><\/h2>\n      <p class=\"intro fu\">Implementamos e integramos CRM, ERP, datos y sistemas para crear una base com\u00fan de operaci\u00f3n. Sobre ella desplegamos automatizaci\u00f3n y Agentes IA que ejecutan trabajo, coordinan procesos y ampl\u00edan la capacidad de tus equipos.<\/p>\n    <\/div>\n    <div class=\"der\">\n      <div id=\"hex-textos\" hidden><ul><li>Ventas<\/li><li>Finanzas<\/li><li>Operaciones<\/li><li>Recursos humanos<\/li><li>Servicio<\/li><li>Compras<\/li><\/ul><p><span>Una sola<\/span> <span>operaci\u00f3n<\/span><\/p><\/div>\n      <div class=\"hex\"><svg id=\"hex\" viewBox=\"-640 -430 1280 860\" role=\"img\" aria-label=\"Una sola operaci\u00f3n conecta seis \u00e1reas; tres agentes IA recorren el anillo.\"><\/svg><\/div>\n      <div class=\"sub fu\">\n        <h3>Agentes IA sobre una operaci\u00f3n conectada<\/h3>\n        <p>Una vez que sistemas, datos y procesos trabajan juntos, podemos desplegar agentes especializados que entienden el contexto del negocio y ejecutan trabajo directamente sobre la operaci\u00f3n.<\/p>\n      <\/div>\n      <ul class=\"lista dos\">\n        <li class=\"item fu\"><h3>Agente SDR<\/h3><p class=\"area\">Ventas<\/p><p>Investiga, califica y da seguimiento a prospectos.<\/p><\/li>\n        <li class=\"item fu\"><h3>Agente de cobranza<\/h3><p class=\"area\">Finanzas<\/p><p>Prioriza cartera y gestiona el seguimiento de cobros.<\/p><\/li>\n        <li class=\"item fu\"><h3>Agente de pedidos<\/h3><p class=\"area\">Operaciones<\/p><p>Interpreta pedidos, valida informaci\u00f3n y los registra.<\/p><\/li>\n        <li class=\"item fu\"><h3>Agente de servicio<\/h3><p class=\"area\">Servicio<\/p><p>Resuelve solicitudes y escala excepciones.<\/p><\/li>\n        <li class=\"item fu\"><h3>Agente de onboarding<\/h3><p class=\"area\">Recursos humanos<\/p><p>Coordina altas, documentaci\u00f3n y onboarding.<\/p><\/li>\n        <li class=\"item fu\"><h3>Agente de compras<\/h3><p class=\"area\">Compras<\/p><p>Analiza requisiciones, compara proveedores y da seguimiento.<\/p><\/li>\n      <\/ul>\n    <\/div>\n  <\/section>\n\n  <!-- ============ PRODUCTOS \u00b7 lista con l\u00ednea de pasos ============ -->\n  <section class=\"split\" id=\"productos\" aria-labelledby=\"productos-t\">\n    <div class=\"split-izq\">\n      <h2 id=\"productos-t\" class=\"rv ola\">Convertimos ideas <span class=\"ac\">en productos digitales<\/span> que generan valor.<\/h2>\n      <p class=\"intro fu\">Creamos soluciones digitales, desde software interno que transforma la operaci\u00f3n hasta aplicaciones comerciales que abren nuevos modelos de negocio y oportunidades de crecimiento.<\/p>\n    <\/div>\n    <div class=\"der\">\n      <!-- Dos frases que se relevan sobre la l\u00ednea de pasos: la primera con Idear \u2192 Construir, la\n           segunda con Validar \u2192 Escalar (home.js, seg\u00fan el avance de #pasos). -->\n      <div class=\"ciclo\">\n      <div class=\"fp-caja\" id=\"fp\">\n        <p class=\"fp\">De la idea al <span class=\"ac\">producto.<\/span><\/p>\n        <p class=\"fp\">Del producto al <span class=\"ac\">mercado.<\/span><\/p>\n      <\/div>\n      <!-- Objeto 3D en wireframe que viaja de paso en paso y se transforma: foco (idear), bloques\n           (construir), palomita (validar) y flecha (escalar). Lo dibuja home.js. -->\n      <canvas class=\"pasos-3d\" id=\"pasos3d\" aria-hidden=\"true\"><\/canvas>\n      <ol class=\"pasos\" id=\"pasos\" aria-label=\"Ciclo de producto\">\n        <li>Idear<\/li><li>Construir<\/li><li>Validar<\/li><li class=\"ac\">Escalar<\/li>\n      <\/ol>\n      <\/div>\n      <ul class=\"lista dos\">\n        <li class=\"item fu\"><h3>Software interno<\/h3><p>Construimos plataformas para digitalizar y transformar la operaci\u00f3n, integradas con los sistemas y procesos existentes.<\/p><\/li>\n        <li class=\"item fu\"><h3>Aplicaciones comerciales<\/h3><p>Dise\u00f1amos aplicaciones web y m\u00f3viles para clientes, socios y usuarios finales, desde portales empresariales hasta nuevas experiencias digitales.<\/p><\/li>\n        <li class=\"item fu\"><h3>SaaS<\/h3><p>Creamos productos de software comercializables y escalables, desde la definici\u00f3n y el MVP hasta su evoluci\u00f3n y crecimiento.<\/p><\/li>\n        <li class=\"item fu\"><h3>E-commerce<\/h3><p>Dise\u00f1amos canales de venta digitales conectados con inventario, pagos, facturaci\u00f3n, CRM y la operaci\u00f3n del negocio.<\/p><\/li>\n      <\/ul>\n    <\/div>\n  <\/section>\n\n  <!-- ============ METODOLOG\u00cdA \u00b7 bloque fijo: resultados \u2192 Output \/ Outcome ============ -->\n  <section class=\"pin\" id=\"metodologia\" data-pin=\"metodologia\" style=\"--alto:360\">\n    <div class=\"pin-in\">\n      <div class=\"etapa\">\n        <h2 class=\"d1 rw ola\">Una metodolog\u00eda enfocada en<\/h2>\n        <p class=\"d-zoom ac cr ola\">resultados<\/p>\n        <p class=\"d1 rw ola\">no en horas.<\/p>\n      <\/div>\n      <div class=\"etapa\">\n        <p class=\"d1 rw ola oo-h\">Donde combinamos<\/p>\n        <div class=\"oo\">\n        <div class=\"oo-c\"><p class=\"oo-t ac cr ola\">Output<\/p><p class=\"oo-d rw\">Lo que construimos y entregamos.<\/p>\n          <ol class=\"oo-l\">\n          <li><span class=\"n\">1.<\/span> Desarrollo<\/li>\n          <li><span class=\"n\">2.<\/span> Implementaci\u00f3n<\/li>\n          <li><span class=\"n\">3.<\/span> Entregables<\/li>\n          <li><span class=\"n\">4.<\/span> Soluci\u00f3n<\/li>\n          <\/ol><\/div>\n        <svg class=\"oo-f\" viewBox=\"0 0 120 60\" aria-hidden=\"true\"><path d=\"M6 30H108M92 14l16 16-16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n        <div class=\"oo-c\"><p class=\"oo-t ac cr ola\">Outcome<\/p><p class=\"oo-d rw\">El valor medible que generamos.<\/p>\n          <ol class=\"oo-l\">\n          <li><span class=\"n\">1.<\/span> Productividad<\/li>\n          <li><span class=\"n\">2.<\/span> Eficiencia<\/li>\n          <li><span class=\"n\">3.<\/span> Velocidad<\/li>\n          <li><span class=\"n\">4.<\/span> Crecimiento<\/li>\n          <\/ol><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ RESULTADOS \u00b7 cifras y clientes ============ -->\n  <section class=\"split\" id=\"resultados\" aria-labelledby=\"resultados-t\">\n    <div class=\"split-izq\">\n      <h2 id=\"resultados-t\" class=\"rv ola\">Un equipo experto, <span class=\"ac\">potenciado por IA,<\/span> detr\u00e1s de cada implementaci\u00f3n.<\/h2>\n      <div class=\"tarjetas\">\n        <div class=\"tarjeta fu\"><h3>AI-Native Software Engineering<\/h3><p>IA integrada a todo el ciclo de desarrollo.<\/p><\/div>\n        <div class=\"tarjeta fu\"><h3>Secure SDLC<\/h3><p>Seguridad desde el dise\u00f1o.<\/p><\/div>\n      <\/div>\n      <p class=\"equipo fu\"><a class=\"mas\" href=\"https:\/\/anigami.studio\/team\/\">Conoce al equipo<\/a><\/p>\n    <\/div>\n    <ul class=\"kpis\">\n      <li class=\"fu\"><p class=\"cifra\"><span class=\"ac\">+<\/span><span data-n=\"10\">10<\/span><\/p><p>A\u00f1os de trayectoria<\/p><\/li>\n      <li class=\"fu\"><p class=\"cifra\"><span data-n=\"50\">50<\/span><span class=\"ac\">+<\/span><\/p><p>Organizaciones<\/p><\/li>\n      <li class=\"fu\"><p class=\"cifra\"><span data-n=\"5\">5<\/span><span class=\"ac\">\u00d7<\/span><\/p><p>Velocidad de ejecuci\u00f3n<\/p><\/li>\n      <li class=\"fu\"><p class=\"cifra\"><span class=\"ac\">+<\/span><span data-n=\"3\">3<\/span><span class=\"ac\">\u00d7<\/span><\/p><p>ROI<\/p><\/li>\n    <\/ul>\n  <\/section>\n  <section class=\"logos-sec\" id=\"clientes\" aria-label=\"Tecnolog\u00edas y clientes\">\n    <h2 class=\"mq-t rv\">Tecnolog\u00edas con las que <span class=\"ac\">trabajamos<\/span><\/h2>\n    <div class=\"clientes tec\">\n      <div class=\"pista-logos inversa\">\n        <img data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-openai.png\" alt=\"OpenAI\" width=\"126\" height=\"35\">\n        <img data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-claude.png\" alt=\"Claude\" width=\"143\" height=\"31\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-gemini.png\" alt=\"Gemini\" width=\"109\" height=\"41\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-mcp.png\" alt=\"Model Context Protocol\" width=\"42\" height=\"46\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-zoho.svg\" alt=\"Zoho\" width=\"100\" height=\"44\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-sap.svg\" alt=\"SAP\" width=\"80\" height=\"40\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-azure.png\" alt=\"Microsoft Azure\" width=\"170\" height=\"26\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-aws.png\" alt=\"Amazon Web Services\" width=\"107\" height=\"41\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-vercel.png\" alt=\"Vercel\" width=\"140\" height=\"31\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-supabase.png\" alt=\"Supabase\" width=\"152\" height=\"29\">\n        <img loading=\"lazy\" class=\"gris\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-python.png\" alt=\"Python\" width=\"123\" height=\"36\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-nodejs.png\" alt=\"Node.js\" width=\"74\" height=\"46\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-laravel.png\" alt=\"Laravel\" width=\"137\" height=\"32\">\n        <img loading=\"lazy\" class=\"gris\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-angular.png\" alt=\"Angular\" width=\"127\" height=\"35\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-reactnative.png\" alt=\"React Native\" width=\"52\" height=\"46\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-android.png\" alt=\"Android\" width=\"168\" height=\"26\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-apple.png\" alt=\"Apple\" width=\"113\" height=\"39\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-docker.png\" alt=\"Docker\" width=\"129\" height=\"34\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-shopify.png\" alt=\"Shopify\" width=\"124\" height=\"35\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-tec-wordpress.png\" alt=\"WordPress\" width=\"162\" height=\"27\">\n      <\/div>\n    <\/div>\n    <h2 class=\"mq-t rv\">Organizaciones con las que hemos <span class=\"ac\">trabajado<\/span><\/h2>\n    <div class=\"clientes\">\n      <div class=\"pista-logos\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_imeplan.png\" alt=\"IMEPLAN\" width=\"131\" height=\"46\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_gea.png\" alt=\"Grupo El\u00e9ctrico Aconcagua\" width=\"111\" height=\"48\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_aeromexico.png\" alt=\"Aerom\u00e9xico\" width=\"165\" height=\"30\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_pisa.png\" alt=\"PISA\" width=\"71\" height=\"40\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_local.png\" alt=\"Local Adventures\" width=\"109\" height=\"37\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_odonnell.png\" alt=\"O'Donnell\" width=\"187\" height=\"21\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_giz.png\" alt=\"GIZ\" width=\"145\" height=\"36\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_gdl.png\" alt=\"Gobierno de Guadalajara\" width=\"49\" height=\"66\">\n        <img loading=\"lazy\" data-src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-clients-n_dmi.png\" alt=\"Grupo DMI\" width=\"130\" height=\"37\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Mapa triangulado en vectores, fondo transparente; en \u00e1mbar, los pa\u00edses donde hemos\n       trabajado. Lo genera tools\/mapa.js (ver README). -->\n  <div class=\"mapa fu\">\n    <img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-mapa.svg\" alt=\"Mapa con los pa\u00edses donde ha trabajado ANIGAMI Studio: Estados Unidos, M\u00e9xico, Honduras, Colombia, Francia, Alemania y Jap\u00f3n\" width=\"1600\" height=\"618\" loading=\"lazy\" decoding=\"async\">\n  <\/div>\n\n  <!-- ============ CIERRE \u00b7 bloque fijo ============ -->\n  <section class=\"pin\" id=\"cierre\" data-pin=\"cierre\" style=\"--alto:240\">\n    <div class=\"pin-in\">\n      <div class=\"etapa\">\n        <p class=\"d1 rw ola\">No imaginamos el futuro.<\/p>\n        <p class=\"d-zoom ac cr ola\">Lo construimos.<\/p>\n      <\/div>\n      <div class=\"etapa\">\n        <img loading=\"lazy\" class=\"c-logo\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo.png\" alt=\"ANIGAMI Studio\" width=\"1675\" height=\"285\" loading=\"lazy\" decoding=\"async\">\n        <p class=\"c-lema rw\">Estrategia \u00b7 Innovaci\u00f3n \u00b7 Tecnolog\u00eda<\/p>\n        <p class=\"d1 rw ola\">Construy\u00e1moslo <span class=\"ac\">juntos.<\/span><\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ CASOS DE \u00c9XITO, SERVICIOS y PRODUCTOS ============ -->\n  <section class=\"propios\" id=\"casos\" aria-label=\"Casos de \u00e9xito\">\n    <a class=\"casos fu\" href=\"https:\/\/anigami.studio\/casos-de-exito\/\">\n      <span class=\"casos-t\">Casos de \u00e9xito<\/span>\n      <span class=\"casos-d\">Proyectos implementados por ANIGAMI Studio.<\/span>\n      <svg class=\"casos-f\" viewBox=\"0 0 48 24\" aria-hidden=\"true\"><path d=\"M2 12h42M34 3l10 9-10 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n    <\/a>\n  <\/section>\n\n  <section class=\"propios\" id=\"nuestros-servicios\" aria-labelledby=\"servs-t\">\n    <div class=\"carr-cab\">\n      <h2 id=\"servs-t\" class=\"rv ola\">Nuestros <span class=\"ac\">servicios<\/span><\/h2>\n      <div class=\"carr-nav\">\n        <button type=\"button\" class=\"carr-b\" data-dir=\"-1\" aria-label=\"Anterior servicio\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 5l-7 7 7 7\"\/><\/svg><\/button>\n        <button type=\"button\" class=\"carr-b\" data-dir=\"1\" aria-label=\"Siguiente servicio\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n    <div class=\"carr\" data-carr aria-roledescription=\"carrusel\" aria-label=\"Servicios\">\n      <div class=\"servs pista-c\">\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><circle pathLength=\"1\" cx=\"12\" cy=\"12\" r=\"9.5\"\/><path pathLength=\"1\" d=\"M15.6 8.4l-2.1 5.1-5.1 2.1 2.1-5.1z\"\/><\/svg><span class=\"n\">01<\/span><\/span>\n          <h3>Consultor\u00eda y estrategia tecnol\u00f3gica<\/h3>\n          <p>Analizamos tu operaci\u00f3n, tus sistemas y tus prioridades para definir una hoja de ruta tecnol\u00f3gica con iniciativas priorizadas, alcances e inversi\u00f3n estimada por fase.<\/p>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><path pathLength=\"1\" d=\"M10 2.5c.8 5.3 3.4 7.9 8.5 8.5-5.1.6-7.7 3.2-8.5 8.5-.8-5.3-3.4-7.9-8.5-8.5 5.1-.6 7.7-3.2 8.5-8.5z\"\/><path pathLength=\"1\" d=\"M19.5 14.5c.3 1.9.9 2.6 2.8 3-1.9.4-2.5 1.1-2.8 3-.3-1.9-.9-2.6-2.8-3 1.9-.4 2.5-1.1 2.8-3z\"\/><\/svg><span class=\"n\">02<\/span><\/span>\n          <h3>Implementaci\u00f3n de IA<\/h3>\n          <p>Dise\u00f1amos y desplegamos agentes y flujos de IA integrados a tus sistemas y datos, con supervisi\u00f3n humana, trazabilidad y m\u00e9tricas de desempe\u00f1o.<\/p>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><circle pathLength=\"1\" cx=\"9\" cy=\"7.5\" r=\"3.8\"\/><path pathLength=\"1\" d=\"M2 21c0-4 3.1-6.8 7-6.8s7 2.8 7 6.8\"\/><path pathLength=\"1\" d=\"M19 2c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3z\"\/><\/svg><span class=\"n\">03<\/span><\/span>\n          <h3>AI Enablement<\/h3>\n          <p>Preparamos a tus equipos para trabajar con IA: habilitamos herramientas, definimos lineamientos de uso y gobernanza, y medimos la adopci\u00f3n en cada \u00e1rea.<\/p>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><path pathLength=\"1\" d=\"M12 3l9 4.5-9 4.5-9-4.5z\"\/><path pathLength=\"1\" d=\"M3 12l9 4.5 9-4.5\"\/><path pathLength=\"1\" d=\"M3 16.5l9 4.5 9-4.5\"\/><\/svg><span class=\"n\">04<\/span><\/span>\n          <h3>Implementaci\u00f3n de ERP y CRM<\/h3>\n          <p>Implementamos Zoho y SAP, los integramos con tus sistemas y migramos tus datos para unificar ventas, finanzas y operaci\u00f3n.<\/p>\n          <span class=\"serv-marcas\">\n            <img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-partners-zoho.svg\" alt=\"Zoho\" width=\"1024\" height=\"450\" loading=\"lazy\" decoding=\"async\">\n            <img loading=\"lazy\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-partners-sap.svg\" alt=\"SAP\" width=\"48\" height=\"24\" loading=\"lazy\" decoding=\"async\">\n          <\/span>\n          <img loading=\"lazy\" class=\"sello\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-partners-zoho-advanced-partner.png\" alt=\"Zoho Advanced Partner\" width=\"520\" height=\"137\" loading=\"lazy\" decoding=\"async\">\n          <a class=\"mas\" href=\"https:\/\/anigami.studio\/landings\/zoho\/\">Conocer implementaci\u00f3n Zoho<\/a>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><path pathLength=\"1\" d=\"M8.5 7l-5 5 5 5\"\/><path pathLength=\"1\" d=\"M15.5 7l5 5-5 5\"\/><path pathLength=\"1\" d=\"M13.6 4.5l-3.2 15\"\/><\/svg><span class=\"n\">05<\/span><\/span>\n          <h3>Desarrollo de software a la medida<\/h3>\n          <p>Construimos plataformas, portales y sistemas internos a partir de tus procesos, con arquitectura escalable, pruebas automatizadas y pr\u00e1cticas de desarrollo seguro.<\/p>\n          <a class=\"mas\" href=\"https:\/\/anigami.studio\/landings\/software\/\">Conocer desarrollo de software<\/a>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><rect pathLength=\"1\" x=\"6.5\" y=\"2.5\" width=\"11\" height=\"19\" rx=\"2\"\/><path pathLength=\"1\" d=\"M10.5 18.5h3\"\/><\/svg><span class=\"n\">06<\/span><\/span>\n          <h3>Apps m\u00f3viles<\/h3>\n          <p>Desarrollamos aplicaciones para iOS y Android conectadas a tus sistemas, desde el dise\u00f1o de la experiencia hasta la publicaci\u00f3n en las tiendas y su mantenimiento.<\/p>\n        <\/article>\n        <article class=\"serv fu\">\n          <span class=\"serv-top\" aria-hidden=\"true\"><svg class=\"serv-ic\" viewBox=\"0 0 24 24\"><path pathLength=\"1\" d=\"M2.5 3.5h2.8l2.4 11.2h11l2-8H6.3\"\/><circle pathLength=\"1\" cx=\"9.5\" cy=\"19.5\" r=\"1.4\"\/><circle pathLength=\"1\" cx=\"17.5\" cy=\"19.5\" r=\"1.4\"\/><\/svg><span class=\"n\">07<\/span><\/span>\n          <h3>E-Commerce<\/h3>\n          <p>Implementamos tiendas en l\u00ednea integradas con inventario, facturaci\u00f3n, pagos y log\u00edstica, para operar el canal digital sobre los mismos datos que el resto de la empresa.<\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n    <div class=\"carr-barra\" aria-hidden=\"true\"><i><\/i><\/div>\n  <\/section>\n\n  <section class=\"propios\" id=\"nuestros-productos\" aria-labelledby=\"propios-t\">\n    <div class=\"carr-cab\">\n      <h2 id=\"propios-t\" class=\"rv ola\">Nuestros <span class=\"ac\">productos<\/span><\/h2>\n      <div class=\"carr-nav\">\n        <button type=\"button\" class=\"carr-b\" data-dir=\"-1\" aria-label=\"Anterior producto\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 5l-7 7 7 7\"\/><\/svg><\/button>\n        <button type=\"button\" class=\"carr-b\" data-dir=\"1\" aria-label=\"Siguiente producto\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n    <div class=\"carr\" data-carr aria-roledescription=\"carrusel\" aria-label=\"Productos\">\n      <div class=\"prods pista-c\">\n        <!-- Lleva dos enlaces, as\u00ed que es <article> y no <a>: un enlace no puede contener otro. -->\n        <article class=\"prod prod-zoho fu\">\n          <span class=\"prod-logo\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-partners-zoho.svg\" alt=\"\" width=\"1024\" height=\"450\" class=\"zoho\"><\/span>\n          <h3 class=\"sr\">Zoho<\/h3>\n          <p>Suite de aplicaciones CRM y ERP en la nube para operar ventas, finanzas, servicio, personas y otras \u00e1reas desde un mismo ecosistema.<\/p>\n          <span class=\"prod-ctas\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/store.zoho.com\/ResellerCustomerSignUp.do?id=6c0d65da2c48543f01e7725dcc501a9e&amp;locale=es\" target=\"_blank\" rel=\"noopener noreferrer\">Probar gratis<\/a>\n            <a class=\"mas\" href=\"https:\/\/anigami.studio\/soluciones-zoho\/\">Conocer Zoho<\/a>\n          <\/span>\n        <\/article>\n        <a class=\"prod fu\" href=\"https:\/\/imajin.app\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"prod-logo\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-ai-imajin.svg\" alt=\"\" width=\"44\" height=\"44\" class=\"marca\"><span class=\"texto\" aria-hidden=\"true\">imajin<span class=\"ac\">.<\/span><\/span><\/span>\n          <h3 class=\"sr\">imajin<\/h3>\n          <p>Plataforma de IA que convierte la metodolog\u00eda de tu empresa en procesos ejecutables por personas y agentes IA, para operar con mayor consistencia, de forma aut\u00f3noma y a escala.<\/p>\n          <span class=\"mas\">Conocer imajin<\/span>\n        <\/a>\n        <a class=\"prod fu\" href=\"https:\/\/axenda.mx\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"prod-logo\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-productos-axenda.svg\" alt=\"\" width=\"190\" height=\"41\"><\/span>\n          <h3 class=\"sr\">Axenda<\/h3>\n          <p>Plataforma inteligente potenciada con IA para administrar proyectos de construcci\u00f3n, conectando avances, recursos, compras, costos y programaci\u00f3n en una sola operaci\u00f3n.<\/p>\n          <span class=\"mas\">Conocer Axenda<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n    <div class=\"carr-barra\" aria-hidden=\"true\"><i><\/i><\/div>\n  <\/section>\n\n  <section id=\"contacto\" class=\"contacto\" aria-labelledby=\"cont-t\">\n    <div>\n      <h2 id=\"cont-t\" class=\"rv ola\">Transformemos tu idea en <span class=\"ac\">resultados<\/span><\/h2>\n      <p class=\"intro fu\">Partimos de tus objetivos para entender el reto, identificar d\u00f3nde la tecnolog\u00eda puede generar mayor valor y definir una primera ruta de soluci\u00f3n, alcance y siguientes pasos.<\/p>\n      <div class=\"ctas fu\">\n        <a class=\"btn btn-primary\" href=\"https:\/\/bookings.anigami.studio\/sales\">Agendar sesi\u00f3n<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"cont-der fu\">\n      <ul class=\"contactos\">\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 3.5h3.2l1.6 4.2-2.1 1.4a11 11 0 0 0 7.2 7.2l1.4-2.1 4.2 1.6V19a1.5 1.5 0 0 1-1.6 1.5C10.9 20 4 13.1 3.5 5.1A1.5 1.5 0 0 1 5 3.5z\"\/><path d=\"M14.5 3.8a6 6 0 0 1 5.7 5.7M14.3 7.2a2.7 2.7 0 0 1 2.5 2.5\"\/><\/svg><span><b>MX\/LATAM:<\/b> <a href=\"tel:+5215629162161\">+52 1 56 2916 2161<\/a><\/span><\/li>\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 3.5h3.2l1.6 4.2-2.1 1.4a11 11 0 0 0 7.2 7.2l1.4-2.1 4.2 1.6V19a1.5 1.5 0 0 1-1.6 1.5C10.9 20 4 13.1 3.5 5.1A1.5 1.5 0 0 1 5 3.5z\"\/><path d=\"M14.5 3.8a6 6 0 0 1 5.7 5.7M14.3 7.2a2.7 2.7 0 0 1 2.5 2.5\"\/><\/svg><span><b>USA\/GLOBAL:<\/b> <a href=\"tel:+17372412844\">+1 737 241 2844<\/a><\/span><\/li>\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"relleno\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z\"\/><\/svg><span><a href=\"https:\/\/wa.me\/5215629162161\" target=\"_blank\" rel=\"noopener noreferrer\">+52 1 56 2916 2161<\/a><\/span><\/li>\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"1.5\"\/><path d=\"m3.5 6.5 8.5 7 8.5-7\"\/><\/svg><span><a href=\"mailto:contacto@anigami.studio\">contacto@anigami.studio<\/a><\/span><\/li>\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.4\"\/><\/svg><span><a href=\"https:\/\/g.page\/Ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\">Calle Marsella 155-Int 105 A, Col. Americana, Lafayette, 44160 Guadalajara, Jal., MX<\/a><\/span><\/li>\n        <li><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.4\"\/><\/svg><span>2021 Guadalupe Street, Suite 260, Austin, TX 78705<\/span><\/li>\n      <\/ul>\n      <div class=\"redes\">\n        <a href=\"https:\/\/twitter.com\/ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"X (Twitter)\" data-tip=\"X\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-x.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n        <a href=\"https:\/\/www.facebook.com\/ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\" data-tip=\"Facebook\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-facebook.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n        <a href=\"https:\/\/www.linkedin.com\/company\/ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn\" data-tip=\"LinkedIn\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-linkedin.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n        <a href=\"https:\/\/www.instagram.com\/ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\" data-tip=\"Instagram\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-instagram.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n        <a href=\"https:\/\/www.youtube.com\/@ANIGAMIStudio\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"YouTube\" data-tip=\"YouTube\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-youtube.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n        <a href=\"https:\/\/g.page\/Ignuscorp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Maps\" data-tip=\"Google Maps\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-social-googlemaps.svg\" alt=\"\" width=\"22\" height=\"22\" loading=\"lazy\"><\/a>\n      <\/div>\n    <\/div>\n    <div class=\"gmap\">\n      <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d14931.704156566308!2d-103.3684978!3d20.6725878!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8428af2252e19397%3A0x8cace07dec78d00a!2sIgnus%20Creative%20Solutions!5e0!3m2!1ses-419!2smx!4v1606771754086!5m2!1ses-419!2smx\" title=\"Ubicaci\u00f3n de la oficina de ANIGAMI Studio en Guadalajara\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\" allowfullscreen><\/iframe>\n    <\/div>\n  <\/section>\n<\/main>\n<!-- El footer es el del tema: lo imprime el fragmento \u00abFooter del tema en p\u00e1ginas Canvas\u00bb de Code Snippets. -->\n<script>\n\/* ANIGAMI Studio \u00b7 home.\n   Dos tipos de secci\u00f3n:\n   - .pin  \u2192 bloque fijo (sticky). Su animaci\u00f3n se mide con el avance del scroll dentro de la\n             secci\u00f3n (p de 0 a 1) y vive en ESC[data-pin]. Son los momentos del video corporativo.\n   - .split \u2192 t\u00edtulo fijo a la izquierda y lista a la derecha. Cada elemento aparece una vez al\n             entrar en pantalla. Aqu\u00ed se puede a\u00f1adir texto sin tocar el JavaScript.\n   Toda entrada de texto usa la misma m\u00e1scara: el texto sube desde abajo de su propia l\u00ednea.\n   - Palabra por palabra en titulares, p\u00e1rrafos y rotadores (.rv, .rw, .cr, .fu).\n   - Por bloque solo donde partir romper\u00eda algo: botones, enlaces dentro de un dato, cifras (.mk).\n   Con el texto ya quieto, en los titulares .ola las letras cercanas al cursor se elevan y brillan. *\/\n(function () {\n'use strict';\n\/\/ Dentro del editor de TranslatePress (iframe con ?trp-edit-translation=preview) el home se queda\n\/\/ quieto y sin JavaScript: partir() reescribe los titulares palabra por palabra y borrar\u00eda las\n\/\/ marcas con las que el editor encuentra cada texto.\nif (\/[?&]trp-edit-translation=preview\/.test(location.search)) return;\nconst $ = (s, r = document) => r.querySelector(s), $$ = (s, r = document) => [...r.querySelectorAll(s)];\nconst clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v)), P = (x, a, d) => clamp((x - a) \/ d), L = (a, b, p) => a + (b - a) * p;\nconst oc = x => 1 - Math.pow(1 - x, 3), ox = x => x >= 1 ? 1 : 1 - Math.pow(2, -10 * x), io = x => x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) \/ 2;\nconst REDUCIDO = matchMedia('(prefers-reduced-motion: reduce)').matches;\n\/\/ Alto de pantalla estable. En iPhone (Chrome y Safari) la barra del navegador se expande o se\n\/\/ contrae al cambiar de direcci\u00f3n; eso cambia innerHeight y, en Chrome, tambi\u00e9n las unidades vh\/svh.\n\/\/ Las secciones fijas miden ~15 pantallas en total, as\u00ed que la p\u00e1gina cambiaba de alto cientos de\n\/\/ p\u00edxeles y saltaba. El alto se mide una vez y se publica como --vh (px) para el CSS: hero, bloques\n\/\/ fijos y el ajuste de #casos. En pantallas t\u00e1ctiles solo se vuelve a medir si cambia el ancho (girar\n\/\/ el tel\u00e9fono); con mouse, en cada resize.\nconst TACTIL = matchMedia('(pointer: coarse)').matches;\nlet VH = innerHeight, anchoVH = innerWidth;\nconst fijarVH = () => document.documentElement.style.setProperty('--vh', (VH \/ 100).toFixed(3) + 'px');\nfijarVH();\naddEventListener('resize', () => {\n  if (TACTIL) { if (innerWidth === anchoVH) return; }\n  anchoVH = innerWidth; VH = innerHeight; fijarVH();\n});\n\n\/\/ ---------- palabras y letras ----------\n\/\/ partir(): <span.wm> (m\u00e1scara) > <span.wi> (palabra) > <span.ch> (letra, solo en .ola). La palabra conserva la\n\/\/ clase del <span> que la envolv\u00eda (p. ej. .ac). Cada letra lleva --j, su \u00edndice en el elemento,\n\/\/ para escalonar la entrada y la onda.\nfunction partir(el) {\n  if (el._w) return el._w;\n  const pal = [];\n  (function rec(n, cls) {\n    n.childNodes.forEach(c => {\n      if (c.nodeType === 3) c.textContent.split(\/\\s+\/).filter(Boolean).forEach(w => pal.push([w, cls]));\n      else if (c.nodeType === 1) rec(c, (cls + ' ' + c.className).trim());\n    });\n  })(el, '');\n  el.textContent = '';\n  let j = 0; const letrasSi = el.classList.contains('ola');\n  \/\/ Texto \u00e1mbar: textura dorada (.tx). \u00abLo construimos.\u00bb del hero tiene su propia textura.\n  const amb = cls => \/(^|\\s)ac(\\s|$)\/.test(cls) || !!el.closest('.ac'), sinTx = el.closest('.h1b');\n  pal.forEach(([w, cls], i) => {\n    const m = document.createElement('span'), s = document.createElement('span');\n    m.className = 'wm'; s.className = 'wi' + (cls ? ' ' + cls : ''); s.style.setProperty('--i', i);\n    \/\/ Solo los titulares .ola necesitan cada letra por separado (la luz bajo el cursor); en el\n    \/\/ resto basta la palabra y as\u00ed el DOM no crece con cada p\u00e1rrafo.\n    const tx = amb(cls) && !sinTx;\n    if (letrasSi) for (const c of w) { const ch = document.createElement('span'); ch.className = 'ch' + (tx ? ' tx' : ''); ch.style.setProperty('--j', j++); ch.textContent = c; s.appendChild(ch); }\n    else { s.textContent = w; if (tx) s.classList.add('tx'); }\n    m.appendChild(s); el.appendChild(m); if (i < pal.length - 1) el.appendChild(document.createTextNode(' '));\n  });\n  el._c = $$('.ch', el);\n  return (el._w = $$('.wi', el));\n}\n\/\/ Envuelve un bloque (p\u00e1rrafo, enlace, dato) en una m\u00e1scara para que suba desde abajo.\nfunction mascara(el, k) {\n  const m = document.createElement('span'), inl = getComputedStyle(el).display.startsWith('inline');\n  m.className = 'mk' + (inl ? ' mk-in' : '');\n  if (el.matches('a.btn, a.mas')) { el.parentNode.insertBefore(m, el); m.appendChild(el); el.classList.add('mki'); el.style.setProperty('--k', k); return; }\n  const i = document.createElement('span'); i.className = 'mki'; i.style.setProperty('--k', k);\n  while (el.firstChild) i.appendChild(el.firstChild);\n  m.appendChild(i); el.appendChild(m);\n}\n\n\/\/ ---------- entradas ligadas al scroll ----------\n\/\/ Palabras: q de 0 a 1 las va subiendo en orden.\nfunction rwP(el, q) {\n  const ws = partir(el), k = ws.length + 2;\n  ws.forEach((w, i) => { const e = ox(clamp((q - i \/ k) * k \/ 3)); w.style.transform = e >= 1 ? 'none' : `translateY(${((1 - e) * 112).toFixed(1)}%)`; });\n  el.classList.toggle('listo', q >= 1);\n}\n\/\/ Los titulares \u00e1mbar (.cr) entran igual que los blancos: palabra por palabra.\nconst crP = rwP;\n\/\/ Etapa dentro de un bloque fijo: visible de a a b; sale subiendo y apag\u00e1ndose.\nfunction etapa(el, p, a, b, fi = .03, fo = .05) {\n  const o = (fi ? P(p, a - fi, fi) : 1) * (1 - P(p, b - fo, fo));\n  el.style.opacity = o.toFixed(3); el.style.visibility = o > 0 ? 'visible' : 'hidden';\n  el.style.transform = `translateY(${(-P(p, b - fo, fo) * 6).toFixed(2)}vh)`;\n}\n\/\/ Rotador: cada frase ocupa un tramo de [a, b]; sus palabras entran desde abajo, una tras otra,\n\/\/ y salen hacia arriba en el mismo orden.\nfunction rotP(el, p, a, b, quedarse) {\n  const ks = el._k || (el._k = [...el.children]), n = ks.length, x = (p - a) \/ (b - a) * n;\n  ks.forEach((k, i) => {\n    const q = x - i, ult = quedarse && i === n - 1, activo = q > 0 && (q < 1 || ult);\n    k.style.opacity = activo ? 1 : 0; if (!activo) return;\n    \/\/ .ri es flex: las palabras van en un envoltorio para que los espacios entre ellas se conserven.\n    if (!k._r) { const w = document.createElement('span'); w.className = 'rl'; while (k.firstChild) w.appendChild(k.firstChild); k.appendChild(w); k._r = w; }\n    partir(k._r).forEach((w, j) => {\n      const e = ox(clamp((q - j * .05) \/ .3)), s = ult ? 0 : io(clamp((q - .76 - j * .03) \/ .2));\n      w.style.transform = `translateY(${((1 - e) * 112 - s * 112).toFixed(1)}%)`;\n    });\n  });\n  return x;\n}\n\n\/\/ ---------- bloques fijos ----------\nconst ESC = {\n  inicio(p, s) {\n    const h = $('.h-inicio', s), a = io(P(p, .03, .14));\n    h.style.transform = `translateY(${(-a * 4).toFixed(2)}vh) scale(${L(1, .74, a).toFixed(4)})`;\n    const x = rotP($('.rot-inicio', s), p, .12, .96, true);\n    $$('.eco', s).forEach((e, i) => {\n      const q = x - i, ult = i === 5, o = q > 0 && (q < 1 || ult) ? oc(clamp(q \/ .6)) * (ult ? 1 : 1 - io(clamp((q - .8) \/ .2))) : 0;\n      e.style.opacity = (o * .55).toFixed(3); e.style.transform = `translateY(-50%) scale(${L(.86, 1.04, clamp(q)).toFixed(3)})`;\n    });\n  },\n  retos(p, s) {\n    const [A, B, C] = $$('.etapa', s);\n    etapa(A, p, 0, .3, 0); rwP($('.d1', A), P(p, 0, .1)); crP($('.d2', A), P(p, .06, .1));\n    etapa(B, p, .32, .6);\n    \/\/ Como en el video: la l\u00ednea arranca ampliada siguiendo al verbo que entra y se aleja hasta\n    \/\/ mostrar los cuatro. Si la l\u00ednea va en columna (pantallas angostas), solo suben en su lugar.\n    const v = $('.verbos', B), ws = $$('.vb', v);\n    ws.forEach((w, i) => { const e = ox(P(p, .33 + i * .05, .07)); w.firstElementChild.style.transform = e >= 1 ? 'none' : `translateY(${((1 - e) * 112).toFixed(1)}%)`; });\n    if (ws[0].offsetTop === ws[ws.length - 1].offsetTop) {\n      const S0 = 2, s2 = L(S0, 1, io(P(p, .33, .24))), k = (s2 - 1) \/ (S0 - 1), C = v.offsetLeft + v.offsetWidth \/ 2;\n      const cs = ws.map(w => w.offsetLeft + w.offsetWidth \/ 2); \/\/ offsetParent de ambos: la etapa\n      let f = 0; for (let i = 1; i < ws.length; i++) f += io(P(p, .33 + i * .05 - .012, .03));\n      const i0 = Math.min(ws.length - 2, Math.floor(f)), fx = L(cs[i0], cs[i0 + 1], f - i0);\n      v.style.transform = `translateX(${(-(fx - C) * s2 * k).toFixed(1)}px) scale(${s2.toFixed(4)})`;\n    } else v.style.transform = 'none';\n    etapa(C, p, .62, 1.1); rwP($('.d1', C), P(p, .64, .12));\n    $$('.capac li', C).forEach((li, i) => rwP(li, P(p, .76 + i * .04, .08)));\n  },\n  enablement(p, s) {\n    crP($('.d-zoom', s), P(p, 0, .12));\n    rwP($('.d1', s), P(p, .08, .12));\n    rotP($('.rot-frases', s), p, .24, .94, true);\n    \/\/ Plataformas de IA: la entrada completa (CSS, 1.5 s) corre cuando el subt\u00edtulo ya termin\u00f3 de\n    \/\/ entrar (rwP de .08 a .2); al regresar por encima del punto se reinicia para verla otra vez.\n    const ul = $('.ia-logos', s);\n    \/\/ .listos habilita el tooltip y el clic cuando el \u00faltimo logo termin\u00f3 de llegar (1.5 s m\u00e1s\n    \/\/ 70 ms por cada uno que sale despu\u00e9s del primero); mientras se mueven no responden al cursor.\n    if (p >= .21 && !ul.classList.contains('abre')) {\n      centrarLogos(ul); ul.classList.add('abre');\n      clearTimeout(ul._t); ul._t = setTimeout(() => ul.classList.add('listos'), REDUCIDO ? 0 : 1500 + (ul.children.length - 1) * 70);\n    } else if (.15 > p && ul.classList.contains('abre')) { clearTimeout(ul._t); ul.classList.remove('abre', 'listos'); }\n  },\n  metodologia(p, s) {\n    const [A, B] = $$('.etapa', s), [l1, l3] = $$('.d1', A);\n    etapa(A, p, 0, .42, 0); rwP(l1, P(p, 0, .1)); crP($('.d-zoom', A), P(p, .06, .12)); rwP(l3, P(p, .15, .08));\n    etapa(B, p, .45, 1.1);\n    const [c1, c2] = $$('.oo-c', B), f = $('.oo-f', B);\n    \/\/ \u00abDonde combinamos\u00bb, luego Output con su descripci\u00f3n y sus cuatro puntos; despu\u00e9s la flecha y\n    \/\/ lo mismo para Outcome.\n    rwP($('.oo-h', B), P(p, .44, .06));\n    crP($('.oo-t', c1), P(p, .48, .07)); rwP($('.oo-d', c1), P(p, .5, .07));\n    $$('.oo-l li', c1).forEach((li, i) => rwP(li, P(p, .55 + i * .025, .05)));\n    crP($('.oo-t', c2), P(p, .7, .08)); rwP($('.oo-d', c2), P(p, .75, .07));\n    $$('.oo-l li', c2).forEach((li, i) => rwP(li, P(p, .8 + i * .025, .05)));\n    const fa = io(P(p, .65, .06)); f.style.opacity = fa > 0 ? 1 : 0; f.style.clipPath = `inset(0 ${((1 - fa) * 100).toFixed(1)}% 0 0)`;\n  },\n  cierre(p, s) {\n    const [A, B] = $$('.etapa', s);\n    etapa(A, p, 0, .5, 0); rwP($('.d1', A), P(p, 0, .12)); crP($('.d-zoom', A), P(p, .14, .14));\n    etapa(B, p, .52, 1.1);\n    const g = ox(P(p, .54, .12)), lg = $('.c-logo', B); lg.style.opacity = g.toFixed(3); lg.style.clipPath = `inset(${((1 - g) * 100).toFixed(1)}% 0 0 0)`; lg.style.transform = `translateY(${((1 - g) * 30).toFixed(1)}px)`;\n    rwP($('.c-lema', B), P(p, .62, .1));\n    rwP($('.d1', B), P(p, .68, .12));\n  }\n};\n\/\/ Distancia de cada logo al centro de la fila, para que la entrada arranque ah\u00ed.\nfunction centrarLogos(ul) {\n  const cx = ul.offsetLeft + ul.offsetWidth \/ 2, cy = ul.offsetTop + ul.offsetHeight \/ 2, lis = [...ul.children];\n  const orden = lis.map((li, i) => [i, Math.abs(li.offsetLeft + li.offsetWidth \/ 2 - cx)]).sort((a, b) => a[1] - b[1]);\n  orden.forEach(([i], n) => lis[i].style.setProperty('--n', n));   \/\/ del centro hacia afuera\n  lis.forEach(li => {\n    li.style.setProperty('--dx', (cx - li.offsetLeft - li.offsetWidth \/ 2).toFixed(1) + 'px');\n    li.style.setProperty('--dy', (cy - li.offsetTop - li.offsetHeight \/ 2).toFixed(1) + 'px');\n  });\n}\nconst PINS = $$('[data-pin]').map(s => ({ s, fn: ESC[s.dataset.pin], pre: s.dataset.pin === 'inicio' ? 0 : .6 }));\nconst RETOS = PINS.find(o => o.s.id === 'retos');\n\/\/ Tramos de color, en orden de la p\u00e1gina. '' es la tinta de base.\nconst arriba = (id, vh) => document.getElementById(id).getBoundingClientRect().top <= vh * .6;\nconst TRAMOS = [\n  ['claro', () => progreso(RETOS) >= .6],      \/\/ \u00abANIGAMI Studio re\u00fane lo necesario\u00bb y \u00abUn solo partner\u00bb\n  ['', vh => arriba('ai-enablement', vh)],\n  ['ambar', vh => arriba('metodologia', vh)],   \/\/ \u00abUna metodolog\u00eda enfocada en resultados\u00bb y Output \u2192 Outcome\n  ['', vh => arriba('resultados', vh)]\n];\nconst CLAROS = ['claro', 'ambar'];       \/\/ temas claros: la cabecera va en tinta\n\/\/ p arranca cuando el borde superior de la secci\u00f3n llega al 60 % de la pantalla (el inicio, cuando\n\/\/ llega arriba) y termina cuando la secci\u00f3n suelta el bloque fijo.\nfunction progreso(o) {\n  const r = o.s.getBoundingClientRect(), vh = VH;\n  return clamp((vh * o.pre - r.top) \/ (o.s.offsetHeight - vh * (1 - o.pre)));\n}\n\n\/\/ ---------- diagrama de operaci\u00f3n (escena 6 del video, centrada en 0,0) ----------\n\/\/ Los textos del diagrama viven en el HTML (#hex-textos) para que TranslatePress los traduzca:\n\/\/ lo que se escribe desde JavaScript no lo ve.\nconst HEXT = $('#hex-textos');\nconst AREAS = HEXT ? $$('li', HEXT).map(li => li.textContent.trim().toLocaleUpperCase()) : ['VENTAS', 'FINANZAS', 'OPERACIONES', 'RECURSOS HUMANOS', 'SERVICIO', 'COMPRAS'];\nconst CENTRO = HEXT ? $$('p span', HEXT).map(e => e.textContent.trim()) : ['Una sola', 'operaci\u00f3n'];\nconst NS = 'http:\/\/www.w3.org\/2000\/svg';\nconst sv = (tag, at, par) => { const e = document.createElementNS(NS, tag); for (const k in at) e.setAttribute(k, at[k]); if (par) par.appendChild(e); return e; };\nconst BOT = '<rect x=\"1\" y=\"1\" width=\"32\" height=\"32\" rx=\"9\" fill=\"#2A2210\" stroke=\"#FEB406\" stroke-width=\"1.6\"\/><line x1=\"17\" y1=\"6\" x2=\"17\" y2=\"10\" stroke=\"#FEB406\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><circle cx=\"17\" cy=\"5.5\" r=\"1.8\" fill=\"#FEB406\"\/><rect x=\"8\" y=\"10.5\" width=\"18\" height=\"14\" rx=\"4.5\" fill=\"none\" stroke=\"#FEB406\" stroke-width=\"1.6\"\/><circle cx=\"13.2\" cy=\"17\" r=\"1.9\" fill=\"#FEB406\"\/><circle cx=\"20.8\" cy=\"17\" r=\"1.9\" fill=\"#FEB406\"\/><line x1=\"13.5\" y1=\"21.3\" x2=\"20.5\" y2=\"21.3\" stroke=\"#FEB406\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><line x1=\"6\" y1=\"15\" x2=\"6\" y2=\"20\" stroke=\"#FEB406\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><line x1=\"28\" y1=\"15\" x2=\"28\" y2=\"20\" stroke=\"#FEB406\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>';\nfunction hexagono(v) {\n  const R = 300, cx = 0, cy = 0;\n  const nd = AREAS.map((_, i) => { const a = -Math.PI \/ 2 + i * Math.PI \/ 3; return { a, x: Math.cos(a) * R, y: Math.sin(a) * R }; });\n  const ring = nd.map((_, i) => ({ l: sv('line', { x1: nd[i].x, y1: nd[i].y, x2: nd[i].x, y2: nd[i].y, stroke: 'rgba(254,180,6,.6)', 'stroke-width': 2.2 }, v), i, j: (i + 1) % 6 }));\n  const sp = nd.map(() => sv('line', { x1: cx, y1: cy, x2: cx, y2: cy, stroke: 'rgba(254,180,6,.3)', 'stroke-width': 1.6, 'stroke-dasharray': '3 9' }, v));\n  const hub = sv('g', {}, v), hh = sv('circle', { cx, cy, r: 160, fill: 'rgba(254,180,6,.05)', stroke: 'rgba(254,180,6,.15)', 'stroke-width': 1 }, hub);\n  sv('circle', { cx, cy, r: 118, fill: '#18160F', stroke: 'rgba(254,180,6,.7)', 'stroke-width': 2.4 }, hub);\n  [[CENTRO[0], -6], [CENTRO[1], 30]].forEach(([tx, dy]) => { sv('text', { x: cx, y: cy + dy, 'text-anchor': 'middle', fill: '#F4F4F6', 'font-size': 31, 'font-weight': 800 }, hub).textContent = tx; });\n  const G = nd.map((p, i) => {\n    const g = sv('g', {}, v), r2 = sv('circle', { cx: p.x, cy: p.y, r: 56, fill: 'none', stroke: 'rgba(254,180,6,0)', 'stroke-width': 2 }, g);\n    sv('circle', { cx: p.x, cy: p.y, r: 40, fill: '#15151A', stroke: 'rgba(244,244,246,.55)', 'stroke-width': 1.8 }, g); sv('circle', { cx: p.x, cy: p.y, r: 11, fill: '#FEB406' }, g);\n    const dx = Math.cos(p.a), mid = Math.abs(dx) < .3;\n    sv('text', { x: mid ? p.x : p.x + dx * 62, y: mid ? (i === 0 ? p.y - 62 : p.y + 84) : p.y + 9, 'text-anchor': mid ? 'middle' : (dx > 0 ? 'start' : 'end'), fill: '#F4F4F6', 'font-size': 26, 'font-weight': 700, 'letter-spacing': '3.5' }, g).textContent = AREAS[i];\n    return { g, r2 };\n  });\n  const pul = ring.map(() => sv('circle', { r: 5.5, fill: '#FEB406', opacity: 0 }, v));\n  const spp = nd.map(() => sv('circle', { r: 5, fill: '#FEB406', opacity: 0 }, v));\n  const bots = [0, 1, 2].map(() => { const g = sv('g', { opacity: 0 }, v); g.innerHTML = `<circle cx=\"0\" cy=\"0\" r=\"42\" fill=\"rgba(254,180,6,.12)\"\/><g transform=\"translate(-32,-32) scale(1.88)\">${BOT}<\/g>`; return g; });\n  \/\/ t en segundos desde que el diagrama entra en pantalla: se arma y los agentes recorren el anillo.\n  return function (t) {\n    const B0 = 2.2, T = 1.25;\n    const hp = ox(P(t, .1, .7)); hub.style.opacity = hp; hub.setAttribute('transform', `scale(${L(.7, 1, hp)})`);\n    sp.forEach((l, i) => { const p = io(P(t, .35 + i * .1, .6)); l.setAttribute('x2', L(cx, nd[i].x, p)); l.setAttribute('y2', L(cy, nd[i].y, p)); });\n    ring.forEach((r, i) => { const p = io(P(t, .8 + i * .13, .5)), A = nd[r.i], Bn = nd[r.j]; r.l.setAttribute('x2', L(A.x, Bn.x, p)); r.l.setAttribute('y2', L(A.y, Bn.y, p)); });\n    ring.forEach((r, i) => { const ph = ((t - 1.8) * .5 + i * .137) % 1, A = nd[r.i], Bn = nd[r.j], d = i % 2 ? ph : 1 - ph;\n      pul[i].setAttribute('opacity', t > 1.8 ? Math.sin(ph * Math.PI).toFixed(2) : 0); pul[i].setAttribute('cx', L(A.x, Bn.x, d)); pul[i].setAttribute('cy', L(A.y, Bn.y, d)); });\n    const act = [0, 0, 0, 0, 0, 0], ba = ox(P(t, B0, .6));\n    bots.forEach((g, b) => {\n      const u = Math.max(0, t - B0 - b * .18), hop = Math.floor(u \/ T), f = (u % T) \/ T, k = (b * 2 + hop) % 6, k2 = (k + 1) % 6;\n      let x, y; if (f < .36) { x = nd[k].x; y = nd[k].y; act[k] = Math.max(act[k], Math.sin(f \/ .36 * Math.PI)); } else { const q = io((f - .36) \/ .64); x = L(nd[k].x, nd[k2].x, q); y = L(nd[k].y, nd[k2].y, q); }\n      g.setAttribute('transform', `translate(${x},${y}) scale(${L(.4, 1, ba) * (f < .36 ? 1 + .08 * Math.sin(f \/ .36 * Math.PI) : 1)})`); g.setAttribute('opacity', (t >= B0 ? ba : 0).toFixed(3));\n    });\n    G.forEach((k, i) => {\n      k.g.style.opacity = ox(P(t, .2 + i * .12, .6)); const a = t >= B0 ? act[i] : 0;\n      k.r2.setAttribute('r', (56 + a * 16).toFixed(1)); k.r2.setAttribute('stroke', `rgba(254,180,6,${(.7 * a).toFixed(2)})`);\n      sp[i].setAttribute('stroke', `rgba(254,180,6,${(.3 + .5 * a).toFixed(2)})`);\n      const d = spp[i]; if (a > .02) { const ph = (t * 1.6 + i * .3) % 1; d.setAttribute('opacity', (a * Math.sin(ph * Math.PI)).toFixed(2)); d.setAttribute('cx', L(nd[i].x, cx, ph)); d.setAttribute('cy', L(nd[i].y, cy, ph)); } else d.setAttribute('opacity', 0);\n    });\n    hh.setAttribute('r', 160 + Math.sin(t * 2) * 6);\n  };\n}\nconst HEX = $('#hex') && hexagono($('#hex'));\nlet hexVisible = false, hexT0 = 0, hexRaf = 0;\nfunction hexCuadro(now) { hexRaf = 0; if (!hexVisible) return; HEX((now - hexT0) \/ 1000); hexRaf = requestAnimationFrame(hexCuadro); }\n\n\/\/ ---------- objeto 3D sobre la l\u00ednea de pasos ----------\n\/\/ Cada figura es una lista de segmentos [x1,y1,z1,x2,y2,z2] en coordenadas de -1 a 1. Todas se\n\/\/ rellenan al mismo n\u00famero de segmentos para que la transformaci\u00f3n sea un simple interpolado\n\/\/ segmento a segmento: en el camino las l\u00edneas vuelan de una figura a la otra.\nconst FIG = (() => {\n  const seg = [];\n  const anillo = (pts, out) => pts.forEach((p, i) => out.push([...p, ...pts[(i + 1) % pts.length]]));\n  const sub = (a, b, n, out) => { for (let i = 0; i < n; i++) { const t0 = i \/ n, t1 = (i + 1) \/ n; out.push([L(a[0], b[0], t0), L(a[1], b[1], t0), L(a[2], b[2], t0), L(a[0], b[0], t1), L(a[1], b[1], t1), L(a[2], b[2], t1)]); } };\n  \/\/ Foco: superficie de revoluci\u00f3n (anillos y meridianos) y rayos arriba.\n  const foco = [];\n  const perfil = [[0, 1], [.38, .92], [.6, .72], [.67, .45], [.6, .18], [.44, -.08], [.3, -.28], [.3, -.48], [.3, -.62], [.24, -.78], [0, -.88]];\n  const M = 10, ring = r => perfil.map(([rr, y]) => [...Array(M)].map((_, k) => { const a = k \/ M * Math.PI * 2; return [Math.cos(a) * rr, y, Math.sin(a) * rr]; }));\n  const R = ring();\n  R.forEach((pts, i) => { if (perfil[i][0] > 0) anillo(pts, foco); });\n  for (let k = 0; k < M; k++) for (let i = 0; i < R.length - 1; i++) foco.push([...R[i][k], ...R[i + 1][k]]);\n  \/\/ rayos: salen del centro del globo (0, .42) hacia arriba y a los lados\n  [-1.2, -.6, 0, .6, 1.2].forEach(a => { const dx = Math.sin(a), dy = Math.cos(a); foco.push([dx * .82, .42 + dy * .82, 0, dx * 1.15, .42 + dy * 1.15, 0]); });\n  \/\/ Bloques: cubo reticulado 3\u00d73\u00d73 (l\u00edneas paralelas a cada eje).\n  const cubo = [], g = [-.75, -.25, .25, .75];\n  for (const u of g) for (const v of g) { sub([-.75, u, v], [.75, u, v], 3, cubo); sub([u, -.75, v], [u, .75, v], 3, cubo); sub([u, v, -.75], [u, v, .75], 3, cubo); }\n  \/\/ Extrusi\u00f3n de un contorno 2D en z, con capas y aristas subdivididas.\n  const extruir = (pol, z, out) => {\n    const capas = [-z, 0, z];\n    capas.forEach(zz => pol.forEach((p, i) => { const q = pol[(i + 1) % pol.length]; sub([p[0], p[1], zz], [q[0], q[1], zz], 3, out); }));\n    pol.forEach(p => sub([p[0], p[1], -z], [p[0], p[1], z], 2, out));\n  };\n  const palomita = []; extruir([[-.95, .05], [-.62, .38], [-.3, .06], [.6, .95], [.93, .62], [-.3, -.6]], .22, palomita);\n  const flecha = []; extruir([[-.22, -.95], [.22, -.95], [.22, .15], [.6, .15], [0, .95], [-.6, .15], [-.22, .15]], .22, flecha);\n  const todas = [foco, cubo, palomita, flecha], N = Math.max(...todas.map(f => f.length));\n  return todas.map(f => [...Array(N)].map((_, i) => f[i % f.length]));\n})();\nconst C3 = $('#pasos3d'), c3 = C3 && C3.getContext('2d');\nlet paso3 = 0, ver3 = 0, raf3 = 0, t3 = 0, vis3 = false, ult3 = 0;\nfunction dibujo3(now) {\n  raf3 = 0; if (!vis3) return;\n  const dt = Math.min(.05, (now - (ult3 || now)) \/ 1000); ult3 = now; t3 += dt;\n  const d = Math.min(devicePixelRatio || 1, 2), W = C3.clientWidth, H = C3.clientHeight;\n  if (C3.width !== Math.round(W * d) || C3.height !== Math.round(H * d)) { C3.width = Math.round(W * d); C3.height = Math.round(H * d); }\n  c3.setTransform(d, 0, 0, d, 0, 0); c3.clearRect(0, 0, W, H);\n  \/\/ Meta: el \u00faltimo paso encendido. El objeto lo persigue con una amortiguaci\u00f3n en el tiempo, as\u00ed\n  \/\/ termina cada transformaci\u00f3n aunque el scroll se detenga a medias.\n  const lis = $$('li', PASOS), on = lis.filter(li => li.classList.contains('on')).length;\n  const meta = Math.max(0, on - 1), mostrar = on > 0 ? 1 : 0;\n  paso3 += (meta - paso3) * (1 - Math.exp(-dt * 3.2)); if (Math.abs(meta - paso3) < .002) paso3 = meta;\n  ver3 += (mostrar - ver3) * (1 - Math.exp(-dt * 6));\n  const i0 = Math.min(2, Math.floor(paso3)), f = paso3 - i0, m = REDUCIDO ? Math.round(f) : io(clamp((f - .1) \/ .8));\n  const rc = C3.getBoundingClientRect(), xs = lis.map(li => { const b = li.getBoundingClientRect(); return b.left + b.width \/ 2 - rc.left; });\n  const x = L(xs[i0], xs[i0 + 1], io(f)), y = H * .52 - Math.sin(f * Math.PI) * H * .18 + (REDUCIDO ? 0 : Math.sin(t3 * 1.6) * 3);\n  const S = Math.min(H * .34, 64), A = REDUCIDO ? .5 : Math.sin(t3 * .8) * .62 + .35, B = -.38, ca = Math.cos(A), sa = Math.sin(A), cb = Math.cos(B), sb = Math.sin(B);\n  const pr = (px, py, pz) => { const x1 = px * ca + pz * sa, z1 = -px * sa + pz * ca, y1 = py * cb - z1 * sb, z2 = py * sb + z1 * cb, k = 3.4 \/ (3.4 + z2); return [x + x1 * S * k, y - y1 * S * k, z2]; };\n  const A0 = FIG[i0], A1 = FIG[i0 + 1];\n  c3.lineWidth = 1.25; c3.lineCap = 'round';\n  for (let i = 0; i < A0.length; i++) {\n    const a = A0[i], b = A1[i], q = [0, 1, 2, 3, 4, 5].map(k => L(a[k], b[k], m));\n    const p1 = pr(q[0], q[1], q[2]), p2 = pr(q[3], q[4], q[5]), z = (p1[2] + p2[2]) \/ 2;\n    c3.strokeStyle = `rgba(254,180,6,${(ver3 * (.38 + .5 * clamp(.5 - z * .45))).toFixed(3)})`;\n    c3.beginPath(); c3.moveTo(p1[0], p1[1]); c3.lineTo(p2[0], p2[1]); c3.stroke();\n  }\n  raf3 = requestAnimationFrame(dibujo3);\n}\nif (C3) new IntersectionObserver(es => es.forEach(e => { vis3 = e.isIntersecting; if (vis3 && !raf3) { ult3 = 0; raf3 = requestAnimationFrame(dibujo3); } })).observe(C3);\n\n\/\/ ---------- fondo: ret\u00edcula de puntos con una franja de luz que avanza con el scroll ----------\nconst CV = $('#puntos'), ctx = CV.getContext('2d');\nfunction puntos() {\n  const d = Math.min(devicePixelRatio || 1, 2), W = innerWidth, H = innerHeight;\n  if (CV.width !== Math.round(W * d) || CV.height !== Math.round(H * d)) { CV.width = Math.round(W * d); CV.height = Math.round(H * d); }\n  ctx.setTransform(d, 0, 0, d, 0, 0); ctx.clearRect(0, 0, W, H);\n  const sp = 44, off = (scrollY * .12) % sp, band = ((scrollY * .55) % (W + H + 900)) - 450;\n  for (let y = -off; y < H + sp; y += sp) for (let x = 0; x < W + sp; x += sp) {\n    const dd = (x + y) - band, k = Math.exp(-(dd * dd) \/ (2 * 160 * 160));\n    ctx.fillStyle = `rgba(244,244,246,${(.05 + .16 * k).toFixed(3)})`; ctx.beginPath(); ctx.arc(x, y, 1.1 + k * .6, 0, 6.283); ctx.fill();\n  }\n}\n\n\/\/ ---------- scroll ----------\nconst AV = $('#avance'), PASOS = $('#pasos'), DOC = document.documentElement, FP = $$('#fp .fp');\nFP.forEach(partir);\nconst HERO = $('#hero'), HH1 = $('.h-hero'), HTX = $('.h1b', HERO), HC = $('.hero-c', HERO);\nlet raf = 0;\nfunction cuadro() {\n  raf = 0; const y = scrollY, vh = VH;\n  PINS.forEach(o => { const r = o.s.getBoundingClientRect(); if (r.bottom > -vh * .2 && vh * 1.2 > r.top) o.fn(progreso(o), o.s); });\n  \/\/ Hero: al bajar, el blanco se apaga hasta la tinta de la p\u00e1gina y el negro del texto pasa a\n  \/\/ blanco; el bloque (imago, titular y servicios) baja un poco m\u00e1s lento que la p\u00e1gina y se desvanece al salir.\n  if (HERO && y < vh * 1.2) {\n    const q = io(clamp(y \/ (vh * .75))), f = Math.round(L(255, 12, q)), t = Math.round(L(12, 244, q));\n    const fondo = `rgb(${f},${f},${Math.round(L(255, 15, q))})`; HERO.style.background = fondo; HERO.style.setProperty('--hbg', fondo); HC.style.color = `rgb(${t},${t},${Math.round(L(15, 246, q))})`;\n    if (!REDUCIDO) { HC.style.transform = `translateY(${(y * .18).toFixed(1)}px)`; HC.style.opacity = (1 - P(y \/ vh, .3, .45)).toFixed(3); }\n  }\n  \/\/ Tema de color: gana el \u00faltimo tramo cuyo punto de cambio ya se cruz\u00f3. Solo se cambia el\n  \/\/ atributo; el CSS hace la transici\u00f3n completa.\n  let tema = '';\n  TRAMOS.forEach(([t, cruzado]) => { if (cruzado(vh)) tema = t; });\n  if (tema) DOC.dataset.tema = tema; else delete DOC.dataset.tema;\n  DOC.classList.toggle('claro', (HERO && y < vh * .4) || CLAROS.includes(tema));\n  AV.style.transform = `scaleX(${clamp(y \/ (DOC.scrollHeight - vh)).toFixed(4)})`;\n  marcarSeccion(vh);\n  DOC.classList.toggle('avanzado', y > 40); DOC.classList.toggle('fin', y > vh * .9);\n  if (PASOS) {\n    \/\/ Arranca tarde a prop\u00f3sito: cuando la l\u00ednea ya subi\u00f3 a ~55 % de la pantalla, el titular de la\n    \/\/ secci\u00f3n ya se acomod\u00f3 arriba y la animaci\u00f3n se ve completa.\n    const r = PASOS.getBoundingClientRect(), q = clamp((vh * .72 - r.top) \/ (vh * .3));\n    \/\/ Arranca con la l\u00ednea al 74 % de la pantalla y termina (Escalar) al 42 %: el objeto 3D, que va\n    \/\/ encima, se ve completo todo el recorrido.\n    const vistoP = r.top < vh * .74;\n    PASOS.style.setProperty('--p', q.toFixed(3)); $$('li', PASOS).forEach((li, i) => li.classList.toggle('on', vistoP && q >= i \/ 3 - .01));\n    \/\/ Frases sobre la l\u00ednea: \u00abDe la idea al producto.\u00bb entra cuando la l\u00ednea llega al 74 % y, al llegar a\n    \/\/ Validar (q \u2265 .5), sale hacia arriba y entra \u00abDel producto al mercado.\u00bb. Al volver, al rev\u00e9s.\n    \/\/ El scroll solo decide el momento; las palabras se animan con transiciones de CSS.\n    const [f1, f2] = FP, visto = vistoP, segunda = q >= .5;\n    f1.classList.toggle('on', visto && !segunda); f1.classList.toggle('fuera', segunda);\n    f2.classList.toggle('on', segunda);\n  }\n  puntos();\n}\nconst pedir = () => { if (!raf) raf = requestAnimationFrame(cuadro); };\naddEventListener('scroll', pedir, { passive: true });\naddEventListener('resize', pedir);\n\n\/\/ ---------- apariciones al entrar en pantalla ----------\n\/\/ .rv: titular palabra por palabra. .fu: bloque de lista; dibuja su filete y suben su <h3>\n\/\/ (por palabras) y sus p\u00e1rrafos, enlaces y datos (por bloque).\n$$('.rv').forEach(partir);\n$$('.lista, .kpis, .prods, .servs').forEach(l => [...l.children].forEach((c, i) => c.style.setProperty('--d', i % 4)));\n$$('.fu').forEach(el => {\n  const bloques = el.matches('p') ? [el] : el.matches('.ctas') ? [...el.children] : $$('h3, p, a.mas, dt, dd', el);\n  bloques.forEach((b, k) => {\n    if (b.matches('a.btn') || b.querySelector('a, [data-n], img, svg')) mascara(b, k);\n    else { partir(b); b.style.setProperty('--k', k); }\n  });\n});\nconst contar = el => {\n  const n = +el.dataset.n; if (REDUCIDO) return;\n  const t0 = performance.now(); el.textContent = '0';\n  (function f(now) { const q = oc(clamp((now - t0) \/ 1400)); el.textContent = Math.round(n * q); if (q < 1) requestAnimationFrame(f); })(t0);\n};\n\/\/ Al terminar la entrada, .listo quita la m\u00e1scara para que la onda pueda brillar sin recortarse.\nconst listo = el => setTimeout(() => el.classList.add('listo'), 1500 + (el._c ? el._c.length : 10) * 35);\nconst IO = new IntersectionObserver(es => es.forEach(e => {\n  if (!e.isIntersecting) return;\n  e.target.classList.add('in'); IO.unobserve(e.target); listo(e.target);\n  $$('[data-n]', e.target).forEach(contar);\n}), { rootMargin: '0px 0px -12% 0px', threshold: .15 });\n$$('.rv, .fu').forEach(el => IO.observe(el));\n\n\/\/ ---------- men\u00fa de secciones ----------\n\/\/ Las mismas entradas en la barra (desde 1280 px) y en el men\u00fa a pantalla completa. Los enlaces\n\/\/ son anclas (#seccion) con desplazamiento suave, salvo con movimiento reducido; la cabecera fija\n\/\/ se descuenta en las secciones fluidas y las fijadas (pin) se abren desde su borde. Un data-p\n\/\/ lleva a ese punto del recorrido de la secci\u00f3n fijada: Metodolog\u00eda abre en Output \u2192 Outcome.\nconst MENU = $('#menu'), BMENU = $('.cab-menu'), DESP = $('.desp'), DESPB = $('.desp-b');\nconst abrirMenu = si => {\n  DOC.classList.toggle('menu-abierto', si);\n  BMENU.setAttribute('aria-expanded', si);\n  if (si) $('a', MENU).focus({ preventScroll: true });\n};\nconst abrirDesp = si => { DESP.classList.toggle('abierto', si); DESPB.setAttribute('aria-expanded', si); };\n$$('a, .menu-g', MENU).forEach((a, i) => a.style.setProperty('--i', i));\nBMENU.addEventListener('click', () => abrirMenu(!DOC.classList.contains('menu-abierto')));\nDESPB.addEventListener('click', () => abrirDesp(!DESP.classList.contains('abierto')));\ndocument.addEventListener('click', e => { if (!DESP.contains(e.target)) abrirDesp(false); });\naddEventListener('keydown', e => {\n  if (e.key !== 'Escape') return;\n  if (DESP.classList.contains('abierto')) { abrirDesp(false); DESPB.focus(); }\n  if (DOC.classList.contains('menu-abierto')) { abrirMenu(false); BMENU.focus(); }\n});\nconst destino = (t, p) => {\n  const top = t.getBoundingClientRect().top + scrollY;\n  if (!t.classList.contains('pin')) return top - 72;\n  if (p == null) return top;\n  \/\/ progreso() al rev\u00e9s: el punto del recorrido en el que la secci\u00f3n fijada vale p\n  const vh = VH, pre = .6;\n  return top - vh * pre + p * (t.offsetHeight - vh * (1 - pre));\n};\n\/\/ Al llegar desde otra p\u00e1gina (el men\u00fa de WordPress enlaza a https:\/\/anigami.studio\/#seccion), se\n\/\/ aplica el mismo destino que al hacer clic aqu\u00ed: as\u00ed Metodolog\u00eda abre en Output \u2192 Outcome.\nif (location.hash.length > 1) {\n  const t = document.getElementById(location.hash.slice(1));\n  const a = $$('.cab-nav a').find(x => x.getAttribute('href') === location.hash);\n  const p = a ? a.dataset.p : undefined;\n  if (t) addEventListener('load', () => setTimeout(() => scrollTo({ top: destino(t, p != null ? +p : null), behavior: 'auto' }), 60));\n}\n$$('a[href^=\"#\"]').forEach(a => a.addEventListener('click', e => {\n  const t = document.getElementById(a.getAttribute('href').slice(1)); if (!t) return;\n  e.preventDefault(); abrirMenu(false); abrirDesp(false); a.blur();\n  scrollTo({ top: destino(t, a.dataset.p != null ? +a.dataset.p : null), behavior: REDUCIDO ? 'auto' : 'smooth' });\n  history.replaceState(null, '', '#' + t.id);\n}));\n\/\/ Secci\u00f3n actual: la \u00faltima de las del men\u00fa cuyo borde superior ya pas\u00f3 el 35 % de la pantalla.\nconst NAVS = [...$$('.cab-nav a[href^=\"#\"]'), ...$$('a[href^=\"#\"]', MENU)].map(a => ({ a, t: document.getElementById(a.getAttribute('href').slice(1)) })).filter(o => o.t);\nconst SECS = [...new Set(NAVS.map(o => o.t))];\nfunction marcarSeccion(vh) {\n  let actual = null, mejor = -Infinity;\n  SECS.forEach(t => { const top = t.getBoundingClientRect().top; if (vh * .35 >= top && top > mejor) { mejor = top; actual = t; } });\n  NAVS.forEach(o => o.a.classList.toggle('aqui', o.t === actual));\n  DESPB.classList.toggle('aqui', !!$('.desp-p a.aqui'));\n}\n\n\/\/ ---------- idioma ----------\n\/\/ TranslatePress sirve el ingl\u00e9s en \/en\/\u2026 y reescribe los enlaces internos de la p\u00e1gina traducida,\n\/\/ as\u00ed que un enlace fijo a la versi\u00f3n en espa\u00f1ol acabar\u00eda apuntando a \/en\/. Los dos enlaces se\n\/\/ calculan aqu\u00ed, a partir de la direcci\u00f3n actual.\n{\n  const ruta = location.pathname, en = \/^\\\/en(\\\/|$)\/.test(ruta), es = en ? ruta.replace(\/^\\\/en\/, '') || '\/' : ruta;\n  $$('.idioma a').forEach(a => {\n    const l = a.getAttribute('hreflang');\n    a.href = l === 'en' ? '\/en' + (es === '\/' ? '\/' : es) : es;\n    a.classList.toggle('aqui', (l === 'en') === en);\n    if ((l === 'en') === en) a.setAttribute('aria-current', 'true');\n  });\n}\n\n\/\/ ---------- carruseles de servicios y productos ----------\n\/\/ Arrastre con el dedo o el rat\u00f3n al estilo iOS: la pista sigue al puntero, fuera de los extremos\n\/\/ opone resistencia (rubber band), al soltar proyecta la inercia (desaceleraci\u00f3n .998 por ms, la de\n\/\/ UIScrollView) y se asienta con un resorte cr\u00edticamente amortiguado en el inicio de la tarjeta m\u00e1s\n\/\/ cercana a ese punto. Se mueve con transform, as\u00ed que no hay scroll nativo que pelee con el gesto;\n\/\/ touch-action: pan-y deja el desplazamiento vertical de la p\u00e1gina al navegador.\nfunction carrusel(c) {\n  const pista = $('.pista-c', c), tarjetas = [...pista.children];\n  const nav = c.previousElementSibling.querySelector('.carr-nav'), btns = nav ? $$('.carr-b', nav) : [];\n  const barra = c.nextElementSibling && $('i', c.nextElementSibling);\n  let x = 0, min = 0, paradas = [0], anim = 0, meta = 0, gesto = null, arrastrado = false;\n  const goma = (d, D) => (1 - 1 \/ (Math.abs(d) * .55 \/ D + 1)) * D * Math.sign(d);\n  const pintar = () => {\n    pista.style.transform = `translate3d(${x.toFixed(2)}px,0,0)`;\n    const q = min < 0 ? clamp(x \/ min) : 0;\n    btns.forEach(b => b.disabled = +b.dataset.dir < 0 ? x > -2 : x < min + 2);\n    if (barra) { const an = min < 0 ? pista.clientWidth \/ (pista.clientWidth - min) : 1; barra.style.setProperty('--an', (an * 100).toFixed(2) + '%'); barra.style.setProperty('--bx', ((1 \/ an - 1) * q * 100).toFixed(2) + '%'); }\n  };\n  const medir = () => {\n    min = Math.min(0, pista.clientWidth - pista.scrollWidth);\n    paradas = [...new Set(tarjetas.map(t => Math.max(min, -t.offsetLeft)).concat(min).map(v => Math.round(v)))].sort((a, b) => b - a);\n    c.classList.toggle('cabe', min > -1);\n    x = clamp(x, min, 0); pintar();\n  };\n  const parar = () => { cancelAnimationFrame(anim); anim = 0; };\n  \/\/ Resorte cr\u00edticamente amortiguado: x(t) = destino + (d0 + (v0 + w\u00b7d0)\u00b7t)\u00b7e^(\u2212w\u00b7t).\n  const asentar = (destino, v0 = 0) => {\n    parar(); meta = destino;\n    if (REDUCIDO) { x = destino; pintar(); return; }\n    const d0 = x - destino, w = .011, t0 = performance.now();\n    (function f(now) {\n      const t = now - t0, d = (d0 + (v0 + w * d0) * t) * Math.exp(-w * t);\n      x = destino + d; pintar();\n      if (Math.abs(d) > .3 || t < 60) anim = requestAnimationFrame(f); else { x = destino; pintar(); anim = 0; }\n    })(t0);\n  };\n  const cercana = v => paradas.reduce((a, b) => Math.abs(b - v) < Math.abs(a - v) ? b : a);\n  pista.addEventListener('pointerdown', e => {\n    if (e.button !== 0) return;\n    parar();\n    gesto = { id: e.pointerId, sx: e.clientX, sy: e.clientY, x0: x, decidido: false, muestras: [[e.timeStamp, x]] };\n    arrastrado = false;\n  });\n  pista.addEventListener('pointermove', e => {\n    if (!gesto || e.pointerId !== gesto.id) return;\n    const dx = e.clientX - gesto.sx, dy = e.clientY - gesto.sy;\n    if (!gesto.decidido) {\n      if (6 > Math.abs(dx) && 6 > Math.abs(dy)) return;\n      if (Math.abs(dy) > Math.abs(dx)) { gesto = null; return; }   \/\/ gesto vertical: es de la p\u00e1gina\n      gesto.decidido = arrastrado = true; gesto.sx = e.clientX; gesto.x0 = x;\n      pista.setPointerCapture(e.pointerId); c.classList.add('arrastra');\n      return;\n    }\n    e.preventDefault();\n    const D = c.clientWidth, crudo = gesto.x0 + (e.clientX - gesto.sx);\n    x = crudo > 0 ? goma(crudo, D) : crudo < min ? min + goma(crudo - min, D) : crudo;\n    pintar();\n    gesto.muestras.push([e.timeStamp, x]); if (gesto.muestras.length > 6) gesto.muestras.shift();\n  });\n  const soltar = e => {\n    if (!gesto || e.pointerId !== gesto.id) return;\n    const g = gesto; gesto = null; c.classList.remove('arrastra');\n    if (!g.decidido) return;\n    \/\/ velocidad con las muestras de los \u00faltimos ~80 ms\n    const fin = g.muestras[g.muestras.length - 1], ini = g.muestras.find(m => fin[0] - m[0] < 80) || fin;\n    let v = fin[0] > ini[0] ? (fin[1] - ini[1]) \/ (fin[0] - ini[0]) : 0;\n    if (e.timeStamp - fin[0] > 90) v = 0;                            \/\/ se detuvo antes de soltar\n    v = clamp(v, -6, 6);\n    const proyectado = x + v * .998 \/ (1 - .998);\n    asentar(x > 0 ? 0 : x < min ? min : cercana(clamp(proyectado, min, 0)), v);\n  };\n  pista.addEventListener('pointerup', soltar);\n  pista.addEventListener('pointercancel', soltar);\n  \/\/ Tras arrastrar, el clic que dispara el navegador al soltar no debe abrir el enlace.\n  pista.addEventListener('click', e => { if (arrastrado) { e.preventDefault(); e.stopPropagation(); arrastrado = false; } }, true);\n  pista.addEventListener('dragstart', e => e.preventDefault());\n  \/\/ Trackpad o rueda horizontal: desplaza directo y se asienta al dejar de girar.\n  let reposo;\n  c.addEventListener('wheel', e => {\n    if (Math.abs(e.deltaX) <= Math.abs(e.deltaY) || min > -1) return;\n    e.preventDefault(); parar();\n    x = clamp(x - e.deltaX, min - 40, 40); pintar();\n    clearTimeout(reposo); reposo = setTimeout(() => asentar(cercana(clamp(x, min, 0))), 140);\n  }, { passive: false });\n  btns.forEach(b => b.addEventListener('click', () => {\n    \/\/ si sigue en camino, el siguiente paso parte del destino y no de donde va: los clics r\u00e1pidos no se pierden\n    const dir = +b.dataset.dir, actual = anim ? meta : cercana(x), i = paradas.indexOf(actual);\n    asentar(paradas[clamp(i + dir, 0, paradas.length - 1)]);\n  }));\n  \/\/ Con teclado, la tarjeta enfocada entra completa a la vista.\n  pista.addEventListener('focusin', e => {\n    const t = tarjetas.find(t => t.contains(e.target)); if (!t || !e.target.matches(':focus-visible')) return;\n    const izq = t.offsetLeft + x, der = izq + t.offsetWidth;\n    if (izq < 0 || der > pista.clientWidth) asentar(clamp(-t.offsetLeft, min, 0));\n  });\n  addEventListener('resize', medir);\n  document.fonts && document.fonts.ready.then(medir);\n  medir();\n}\n$$('[data-carr]').forEach(carrusel);\n\n\/\/ ---------- luz bajo el cursor ----------\n\/\/ Cada letra de un titular .ola recibe --k (0 a 1) seg\u00fan su distancia al puntero, con ca\u00edda\n\/\/ gaussiana; el CSS la traduce en elevaci\u00f3n y brillo \u00e1mbar. --k se suaviza aqu\u00ed, cuadro a cuadro,\n\/\/ para que la luz siga al cursor y se apague despacio al alejarse. Solo en equipos con mouse y\n\/\/ sobre titulares ya revelados (.listo) y en pantalla (.vivo).\nconst OLAS = $$('.ola');\nOLAS.forEach(partir);\nconst VIVO = new IntersectionObserver(es => es.forEach(e => e.target.classList.toggle('vivo', e.isIntersecting)));\nOLAS.forEach(el => VIVO.observe(el));\nconst RATON = matchMedia('(hover: hover) and (pointer: fine)').matches && !REDUCIDO;\nlet mx = -1e5, my = -1e5, luzRaf = 0;\nconst encendidas = new Set();\nfunction luz() {\n  luzRaf = 0; let sigue = false;\n  OLAS.forEach(el => {\n    const listo = el.classList.contains('listo') || el.closest('.listo');\n    let cerca = false;\n    if (listo && el.classList.contains('vivo')) {\n      const r = el.getBoundingClientRect(), fs = el._fs || (el._fs = parseFloat(getComputedStyle(el.querySelector('.ch') || el).fontSize));\n      const sg = Math.max(46, fs * .9), m = sg * 3;\n      cerca = mx > r.left - m && r.right + m > mx && my > r.top - m && r.bottom + m > my;\n      if (cerca || encendidas.has(el)) {\n        const rs = el._c.map(c => c.getBoundingClientRect());     \/\/ primero todas las lecturas\n        el._c.forEach((c, j) => {\n          const b = rs[j], dx = mx - (b.left + b.width \/ 2), dy = my - (b.top + b.height \/ 2);\n          const meta = cerca ? Math.exp(-(dx * dx + dy * dy) \/ (2 * sg * sg)) : 0;\n          const k = (c._k || 0) + (meta - (c._k || 0)) * .22;\n          const kk = Math.abs(k - meta) < .004 ? meta : k;\n          if (Math.abs(kk - (c._k || 0)) > .001) { c._k = kk; c.style.setProperty('--k', kk.toFixed(3)); }\n          if (kk !== meta) sigue = true;\n        });\n      }\n    }\n    if (cerca) encendidas.add(el);\n    else if (encendidas.has(el) && !el._c.some(c => c._k > .001)) encendidas.delete(el);\n  });\n  if (sigue) luzRaf = requestAnimationFrame(luz);\n}\nconst pedirLuz = () => { if (RATON && !luzRaf) luzRaf = requestAnimationFrame(luz); };\nif (RATON) {\n  addEventListener('pointermove', e => { mx = e.clientX; my = e.clientY; pedirLuz(); }, { passive: true });\n  document.documentElement.addEventListener('pointerleave', () => { mx = my = -1e5; pedirLuz(); });\n  addEventListener('scroll', pedirLuz, { passive: true });\n}\n\nif (HEX) {\n  if (REDUCIDO) HEX(6);\n  else new IntersectionObserver(es => es.forEach(e => {\n    hexVisible = e.isIntersecting;\n    if (hexVisible) { if (!hexT0) hexT0 = performance.now(); if (!hexRaf) hexRaf = requestAnimationFrame(hexCuadro); }\n  }), { threshold: .1 }).observe($('#hex'));\n}\n\n\/\/ Logotipos: las im\u00e1genes se piden al acercarse y la serie se duplica para el bucle. No llevan\n\/\/ loading=\"lazy\": el primero de una pista que se desplaza con transform nunca se cargar\u00eda.\n\/\/ WordPress se lo a\u00f1ade a toda imagen del contenido al mostrar la p\u00e1gina, as\u00ed que aqu\u00ed se fuerza\n\/\/ \u00abeager\u00bb antes de pedirlas: con lazy, los logos que quedan a la derecha, fuera de pantalla, no se\n\/\/ descargaban, decode() no terminaba y la pista nunca arrancaba.\n\/\/ Hay dos pistas: tecnolog\u00edas (en sentido inverso) y clientes.\n$$('.pista-logos').forEach(pl => {\n  new IntersectionObserver((es, o) => es.forEach(e => {\n    if (!e.isIntersecting) return; o.disconnect();\n    $$('img', pl).forEach(im => { im.loading = 'eager'; im.src = im.dataset.src; });\n    [...pl.children].forEach(im => { const c = im.cloneNode(); c.alt = ''; c.setAttribute('aria-hidden', 'true'); pl.appendChild(c); });\n    \/\/ 50 px\/s sin importar cu\u00e1ntos logotipos haya. Arranca cuando todas las im\u00e1genes est\u00e1n listas o,\n    \/\/ si alguna tarda, a los 4 s: los width\/height del HTML ya reservan su espacio.\n    const correr = () => {\n      if (pl.classList.contains('corre')) return;\n      pl.style.animationDuration = (pl.scrollWidth \/ 2 \/ 50).toFixed(1) + 's'; pl.classList.add('corre');\n    };\n    Promise.all($$('img', pl).map(im => im.decode ? im.decode().catch(() => {}) : 0)).then(correr);\n    setTimeout(correr, 4000);\n  }), { rootMargin: '600px 0px' }).observe(pl);\n});\n\n\/\/ Titular \u00abEl futuro de las empresas\u2026\u00bb: sus tres l\u00edneas se numeran seguidas y entra al llegar a\n\/\/ pantalla, palabra por palabra.\nconst hi = $('.h-inicio');\nlet base = 0; $$('.rw, .cr', hi).forEach(l => { partir(l).forEach(w => w.style.setProperty('--i', base++)); base += 2; });\nIO.observe(hi);\n\/\/ Hero: entra al cargar, sin esperar al scroll.\nlet bh = 0; $$('.rw, .cr', HH1).forEach(l => { partir(l).forEach(w => w.style.setProperty('--i', bh++)); bh += 2; });\n\/\/ Textura de \u00abLo construimos.\u00bb: cada letra recibe su posici\u00f3n dentro de la l\u00ednea para pintar su\n\/\/ tramo de la imagen. Hasta que la imagen carga, las letras se ven en tinta.\nfunction textura() {\n  \/\/ La l\u00ednea cubre la franja x 20\u201384 % de la imagen (los bordes de la foto son negros) y queda a la\n  \/\/ altura donde se mezclan el azul y el amarillo, ~46 % del alto. La deriva recorre \u00b16 % del ancho.\n  const w = HTX.offsetWidth, h = HTX.offsetHeight, bw = w \/ .64, bh = bw * 1280 \/ 1920;\n  HTX.style.setProperty('--bw', bw.toFixed(0) + 'px'); HTX.style.setProperty('--rx', (w * .06).toFixed(0) + 'px');\n  HTX.style.setProperty('--ox', (-bw * .2).toFixed(0) + 'px'); HTX.style.setProperty('--oy', (-(bh * .46 - h \/ 2)).toFixed(0) + 'px');\n  \/\/ Con el filtro de .tx-ok, WebKit toma la propia l\u00ednea como offsetParent de las letras; sin \u00e9l,\n  \/\/ el <h1>. Se mide relativo a la l\u00ednea en ambos casos.\n  HTX._c.forEach(c => {\n    const enLinea = c.offsetParent === HTX;\n    c.style.setProperty('--x', (c.offsetLeft - (enLinea ? 0 : HTX.offsetLeft)) + 'px');\n    c.style.setProperty('--y', (c.offsetTop - (enLinea ? 0 : HTX.offsetTop)) + 'px');\n  });\n}\ntextura(); document.fonts && document.fonts.ready.then(textura); addEventListener('resize', textura);\n\/\/ .tx-ok la pone el onload del <link rel=\"preload\"> de la imagen, en el <head>: as\u00ed no se pide dos\n\/\/ veces. Si el navegador no decodifica AVIF ignora ese preload y las letras se quedan en tinta.\nrequestAnimationFrame(() => { HH1.classList.add('in'); HC.classList.add('in'); listo(HH1); pedir(); });\n\/\/ La textura de \u00abLo construimos.\u00bb entra cuando la \u00faltima letra termin\u00f3 su animaci\u00f3n (0.15 s de\n\/\/ espera, 30 ms entre letras y 0.7 s de duraci\u00f3n, como en el CSS). Ver .tx-on en index.html.\nsetTimeout(() => HH1.classList.add('tx-on'), REDUCIDO ? 0 : 150 + (HTX._c.length - 1) * 30 + 700);\n\/\/ Servicios bajo \u00abLo construimos.\u00bb: marquesina como la de logotipos. La serie se duplica para el\n\/\/ bucle y la velocidad se fija en 50 px\/s sin importar el largo.\nconst HP = $('.hero-pista', HERO);\nif (HP) {\n  [...HP.children].forEach(el => HP.appendChild(el.cloneNode(true)));\n  \/\/ Arranca con \u00abTransformaci\u00f3n digital\u00bb al centro: as\u00ed lo primero que se lee a su derecha son\n  \/\/ Agentes IA, AI Enablement y Zoho \u00b7 SAP. La pista va de 0 a \u221250 % (una serie, S); se busca el\n  \/\/ desplazamiento que centra el primer servicio de la segunda serie y se convierte en un retraso\n  \/\/ negativo de la animaci\u00f3n.\n  const correr = () => {\n    const S = HP.scrollWidth \/ 2, dur = S \/ 50, uno = HP.children[0];\n    const fs = parseFloat(getComputedStyle(uno).fontSize), texto = uno.offsetWidth - fs * 1.0;   \/\/ sin el rombo y su margen\n    const x = HP.parentElement.clientWidth \/ 2 - (S + uno.offsetLeft + texto \/ 2);           \/\/ en (\u2212S, 0]\n    HP.style.setProperty('--dur', dur.toFixed(2) + 's');\n    HP.style.animationDelay = (x \/ S * dur).toFixed(2) + 's';\n    HP.classList.add('corre');\n  };\n  \/\/ Empieza a correr justo antes de aparecer (2.1 s), para que se vea centrada desde el primer cuadro.\n  const t0 = performance.now(), ya = () => setTimeout(correr, Math.max(0, 2000 - (performance.now() - t0)));\n  document.fonts ? document.fonts.ready.then(ya) : ya();\n}\n})();\n<\/script>\n<script>\n  (function () {\n    'use strict';\n    \/\/ Medici\u00f3n de los CTA de salida: Bookings, WhatsApp y llamada. El env\u00edo del\n    \/\/ formulario NO se mide aqu\u00ed \u2014la p\u00e1gina se descarga a media petici\u00f3n hacia\n    \/\/ Zoho\u2014: ya lo cuenta el fragmento de p\u00e1gina de conversi\u00f3n que hay en\n    \/\/ \/landings\/gracias\/, que adem\u00e1s es la prueba de que el alta se cre\u00f3.\n    \/\/\n    \/\/ Cada CTA dispara su propia acci\u00f3n de conversi\u00f3n de Google Ads (las cuatro\n    \/\/ son principales, valen 1 y cuentan \u00abUna\u00bb por clic): WhatsApp, llamada y\n    \/\/ Bookings. gtag lo carga Site Kit en todas las p\u00e1ginas con\n    \/\/ AW-18466838236. Adem\u00e1s se empuja el evento ag_conversion al dataLayer\n    \/\/ para GTM; si alg\u00fan d\u00eda GTM dispara estas mismas etiquetas, hay que quitar\n    \/\/ la llamada directa o contar\u00edan doble.\n    \/\/\n    \/\/ Sin event_callback a prop\u00f3sito: Bookings y WhatsApp abren en otra pesta\u00f1a y\n    \/\/ los `tel:` no descargan la p\u00e1gina, as\u00ed que no hace falta retrasar la\n    \/\/ navegaci\u00f3n.\n    var ACCIONES = [\n      { nombre: 'bookings', sel: 'a[href*=\"bookings.anigami.studio\"]' },\n      { nombre: 'whatsapp', sel: 'a[href*=\"api.whatsapp.com\"], a[href*=\"wa.me\"]' },\n      { nombre: 'llamada',  sel: 'a[href^=\"tel:\"]' }\n    ];\n    var ETIQUETAS = {\n      whatsapp: 'AW-18466838236\/PuzpCJqWsZcdENyt1uVE',\n      llamada:  'AW-18466838236\/bho6CJ2WsZcdENyt1uVE',\n      bookings: 'AW-18466838236\/TYBECKCWsZcdENyt1uVE'\n    };\n\n    document.addEventListener('click', function (e) {\n      var origen = e.target;\n      var enlace = origen && origen.closest ? origen.closest('a[href]') : null;\n      if (!enlace) return;\n      for (var i = 0; i !== ACCIONES.length; i++) {\n        if (!enlace.matches(ACCIONES[i].sel)) continue;\n        window.dataLayer = window.dataLayer || [];\n        window.dataLayer.push({\n          event: 'ag_conversion',\n          ag_accion: ACCIONES[i].nombre,\n          ag_destino: enlace.getAttribute('href') || ''\n        });\n        if (typeof window.gtag === 'function') {\n          window.gtag('event', 'conversion', {\n            send_to: ETIQUETAS[ACCIONES[i].nombre],\n            value: 1.0,\n            currency: 'MXN'\n          });\n        }\n        return;\n      }\n    });\n  }());\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Estudio de ingenier\u00eda y consultor\u00eda en Guadalajara y Austin. Software a la medida, Agentes IA e implementaci\u00f3n de Zoho para organizaciones que operan a escala.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4322","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio<\/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:\/\/anigami.studio\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio\" \/>\n<meta property=\"og:description\" content=\"Estudio de ingenier\u00eda y consultor\u00eda en Guadalajara y Austin. Software a la medida, Agentes IA e implementaci\u00f3n de Zoho para organizaciones que operan a escala.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/anigami.studio\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"ANIGAMI Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ignuscorp\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-10T01:57:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ignuscorp\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/\",\"url\":\"https:\\\/\\\/anigami.studio\\\/\",\"name\":\"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/anigami.studio\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/anigami-home-logo-cab.png\",\"datePublished\":\"2026-10-08T18:36:11+00:00\",\"dateModified\":\"2026-10-10T01:57:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/anigami.studio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/anigami.studio\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/anigami-home-logo-cab.png\",\"contentUrl\":\"https:\\\/\\\/anigami.studio\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/anigami-home-logo-cab.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/anigami.studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/#website\",\"url\":\"https:\\\/\\\/anigami.studio\\\/\",\"name\":\"ANIGAMI Studio\",\"description\":\"ANIGAMI Studio is your on-demand Software Agency and Zoho Partner\",\"publisher\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/anigami.studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/#organization\",\"name\":\"ANIGAMI Studio\",\"url\":\"https:\\\/\\\/anigami.studio\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/anigami.studio\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/anigami.studio\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/cropped-anigami_studio_imago-1.png\",\"contentUrl\":\"https:\\\/\\\/anigami.studio\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/cropped-anigami_studio_imago-1.png\",\"width\":512,\"height\":512,\"caption\":\"ANIGAMI Studio\"},\"image\":{\"@id\":\"https:\\\/\\\/anigami.studio\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ignuscorp\",\"https:\\\/\\\/x.com\\\/ignuscorp\",\"https:\\\/\\\/www.instagram.com\\\/ignuscorp\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ignuscorp\"],\"description\":\"ANIGAMI Studio is a Zoho Advanced Partner and software studio with offices in Guadalajara, Mexico and Austin, Texas. We implement Zoho CRM, Books and Zoho One, build AI agents and develop custom software.\",\"email\":\"contacto@anigami.studio\",\"telephone\":\"+52 1 56 2916 2161\",\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"Calle Marsella 155, Int. 105 A, Col. Americana, Lafayette\",\"addressLocality\":\"Guadalajara\",\"addressRegion\":\"Jalisco\",\"postalCode\":\"44160\",\"addressCountry\":\"MX\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"2021 Guadalupe Street, Suite 260\",\"addressLocality\":\"Austin\",\"addressRegion\":\"TX\",\"postalCode\":\"78705\",\"addressCountry\":\"US\"}],\"contactPoint\":[{\"@type\":\"ContactPoint\",\"contactType\":\"sales\",\"telephone\":\"+52 1 56 2916 2161\",\"email\":\"contacto@anigami.studio\",\"areaServed\":[\"MX\",\"LATAM\"],\"availableLanguage\":[\"Spanish\",\"English\"]},{\"@type\":\"ContactPoint\",\"contactType\":\"sales\",\"telephone\":\"+1 737 241 2844\",\"email\":\"contacto@anigami.studio\",\"areaServed\":[\"US\"],\"availableLanguage\":[\"English\",\"Spanish\"]}],\"areaServed\":[{\"@type\":\"Country\",\"name\":\"Mexico\"},{\"@type\":\"Country\",\"name\":\"United States\"},{\"@type\":\"Place\",\"name\":\"Latin America\"}],\"knowsAbout\":[\"Zoho CRM\",\"Zoho One\",\"Zoho Books\",\"Zoho implementation\",\"AI agents\",\"Business process automation\",\"Custom software development\",\"React\",\"Next.js\",\"Nearshore software development\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio","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:\/\/anigami.studio\/en\/","og_locale":"en_US","og_type":"article","og_title":"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio","og_description":"Estudio de ingenier\u00eda y consultor\u00eda en Guadalajara y Austin. Software a la medida, Agentes IA e implementaci\u00f3n de Zoho para organizaciones que operan a escala.","og_url":"https:\/\/anigami.studio\/en\/","og_site_name":"ANIGAMI Studio","article_publisher":"https:\/\/www.facebook.com\/ignuscorp","article_modified_time":"2026-10-10T01:57:02+00:00","og_image":[{"url":"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@ignuscorp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/anigami.studio\/","url":"https:\/\/anigami.studio\/","name":"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho | ANIGAMI Studio","isPartOf":{"@id":"https:\/\/anigami.studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/anigami.studio\/#primaryimage"},"image":{"@id":"https:\/\/anigami.studio\/#primaryimage"},"thumbnailUrl":"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png","datePublished":"2026-10-08T18:36:11+00:00","dateModified":"2026-10-10T01:57:02+00:00","breadcrumb":{"@id":"https:\/\/anigami.studio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/anigami.studio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/anigami.studio\/#primaryimage","url":"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png","contentUrl":"https:\/\/anigami.studio\/wp-content\/uploads\/2026\/10\/anigami-home-logo-cab.png"},{"@type":"BreadcrumbList","@id":"https:\/\/anigami.studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/anigami.studio\/"},{"@type":"ListItem","position":2,"name":"Ingenier\u00eda de software, IA e implementaci\u00f3n de Zoho"}]},{"@type":"WebSite","@id":"https:\/\/anigami.studio\/#website","url":"https:\/\/anigami.studio\/","name":"ANIGAMI Studio","description":"ANIGAMI Studio is your on-demand Software Agency and Zoho Partner","publisher":{"@id":"https:\/\/anigami.studio\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/anigami.studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/anigami.studio\/#organization","name":"ANIGAMI Studio","url":"https:\/\/anigami.studio\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/anigami.studio\/#\/schema\/logo\/image\/","url":"https:\/\/anigami.studio\/wp-content\/uploads\/2025\/07\/cropped-anigami_studio_imago-1.png","contentUrl":"https:\/\/anigami.studio\/wp-content\/uploads\/2025\/07\/cropped-anigami_studio_imago-1.png","width":512,"height":512,"caption":"ANIGAMI Studio"},"image":{"@id":"https:\/\/anigami.studio\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ignuscorp","https:\/\/x.com\/ignuscorp","https:\/\/www.instagram.com\/ignuscorp","https:\/\/www.linkedin.com\/company\/ignuscorp"],"description":"ANIGAMI Studio is a Zoho Advanced Partner and software studio with offices in Guadalajara, Mexico and Austin, Texas. We implement Zoho CRM, Books and Zoho One, build AI agents and develop custom software.","email":"contacto@anigami.studio","telephone":"+52 1 56 2916 2161","address":[{"@type":"PostalAddress","streetAddress":"Calle Marsella 155, Int. 105 A, Col. Americana, Lafayette","addressLocality":"Guadalajara","addressRegion":"Jalisco","postalCode":"44160","addressCountry":"MX"},{"@type":"PostalAddress","streetAddress":"2021 Guadalupe Street, Suite 260","addressLocality":"Austin","addressRegion":"TX","postalCode":"78705","addressCountry":"US"}],"contactPoint":[{"@type":"ContactPoint","contactType":"sales","telephone":"+52 1 56 2916 2161","email":"contacto@anigami.studio","areaServed":["MX","LATAM"],"availableLanguage":["Spanish","English"]},{"@type":"ContactPoint","contactType":"sales","telephone":"+1 737 241 2844","email":"contacto@anigami.studio","areaServed":["US"],"availableLanguage":["English","Spanish"]}],"areaServed":[{"@type":"Country","name":"Mexico"},{"@type":"Country","name":"United States"},{"@type":"Place","name":"Latin America"}],"knowsAbout":["Zoho CRM","Zoho One","Zoho Books","Zoho implementation","AI agents","Business process automation","Custom software development","React","Next.js","Nearshore software development"]}]}},"_links":{"self":[{"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/pages\/4322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/comments?post=4322"}],"version-history":[{"count":21,"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/pages\/4322\/revisions"}],"predecessor-version":[{"id":4408,"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/pages\/4322\/revisions\/4408"}],"wp:attachment":[{"href":"https:\/\/anigami.studio\/en\/wp-json\/wp\/v2\/media?parent=4322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}