{"id":538,"date":"2026-08-05T21:57:20","date_gmt":"2026-08-05T21:57:20","guid":{"rendered":"https:\/\/togrowagencia.com\/en\/?page_id=538"},"modified":"2026-08-14T21:47:32","modified_gmt":"2026-08-14T21:47:32","slug":"cases","status":"publish","type":"page","link":"https:\/\/togrowagencia.com\/en\/cases\/","title":{"rendered":"Cases"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"538\" class=\"elementor elementor-538\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ed8e88 e-flex e-con-boxed e-con e-parent\" data-id=\"9ed8e88\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6616b3e elementor-widget elementor-widget-html\" data-id=\"6616b3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  TGUS SUCCESS CASES \u2014 10-cases-hero.html\r\n  Banner = SOLO el carrusel cil\u00edndrico 3D (im\u00e1genes rotando) + leyenda de\r\n  categor\u00edas abajo. Sin ning\u00fan texto de encabezado dentro del banner.\r\n  Prefijo CSS: #tgus-cases-hero\r\n  Pegar en widget HTML de Elementor\r\n\r\n  IM\u00c1GENES: siguen siendo placeholders de Unsplash \u2014 el usuario va a\r\n  pasar las URLs reales para reemplazar cada src de .tgus-case-card__img\r\n  (hay un comentario \"IMG i\" antes de cada <img> para ubicarlas r\u00e1pido).\r\n\r\n  Categor\u00edas enlazan a:\r\n    - https:\/\/togrowagencia.com\/nuevo-casos-de-exito\/            (todos)\r\n    - https:\/\/togrowagencia.com\/casos-exito-desarrollo-software\/ (software)\r\n    - https:\/\/togrowagencia.com\/casos-exito-diseno-web\/          (dise\u00f1o web)\r\n    - https:\/\/togrowagencia.com\/casos-exito-marketing-digital\/   (marketing)\r\n============================================================= -->\r\n<section id=\"tgus-cases-hero\">\r\n  <div class=\"tgus-cases-bg\" id=\"tgusCasesBg\"><\/div>\r\n  <style>\r\n    #tgus-cases-hero{\r\n      --tgus-bg-0:#05050a;\r\n      --tgus-blue:#3b82f6;\r\n      --tgus-violet:#8b7cf6;\r\n      --tgus-cyan:#5ec8f2;\r\n      --tgus-font-body:'Plus Jakarta Sans', sans-serif;\r\n      --tgus-card-radius:38px;\r\n      background:var(--tgus-bg-0);\r\n      color:#f4f4f7;\r\n      font-family:var(--tgus-font-body);\r\n      padding:96px 0 72px;\r\n      position:relative;\r\n      overflow:hidden;\r\n      \/* full-bleed: rompe cualquier contenedor de Elementor *\/\r\n      width:100vw;\r\n      margin-left:calc(50% - 50vw);\r\n      margin-right:calc(50% - 50vw);\r\n    }\r\n    #tgus-cases-hero *{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n    \/* ---------- fondo: t\u00fanel de luz WebGL (adaptado de LightTunnel\/ogl) ---------- *\/\r\n    #tgus-cases-hero .tgus-cases-bg{\r\n      position:absolute;inset:0;\r\n      width:100%;height:100%;\r\n      overflow:hidden;\r\n      z-index:0;\r\n      pointer-events:none;\r\n    }\r\n    #tgus-cases-hero .tgus-cases-bg canvas{\r\n      display:block;width:100%;height:100%;\r\n    }\r\n\r\n    #tgus-cases-hero::before{\r\n      content:\"\";position:absolute;top:-260px;left:50%;\r\n      transform:translateX(-50%);\r\n      width:1000px;height:700px;\r\n      background:radial-gradient(circle, rgba(139,124,246,0.14), rgba(59,130,246,0.07) 45%, transparent 70%);\r\n      filter:blur(10px);\r\n      pointer-events:none;\r\n      z-index:1;\r\n    }\r\n\r\n    \/* ---------- 3D cylinder stage \u2014 ancho completo, sin texto ---------- *\/\r\n    #tgus-cases-hero .tgus-cases-stage{\r\n      position:relative;z-index:2;\r\n      width:100%;\r\n      height:640px;\r\n      display:flex;align-items:center;justify-content:center;\r\n      overflow:hidden;\r\n      perspective:1700px;\r\n      -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);\r\n      mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);\r\n    }\r\n    #tgus-cases-hero .tgus-cases-tilt{\r\n      height:100%;\r\n      transform-style:preserve-3d;\r\n    }\r\n    #tgus-cases-hero .tgus-cases-cylinder{\r\n      position:relative;\r\n      height:100%;\r\n      transform-style:preserve-3d;\r\n      will-change:transform;\r\n      cursor:grab;\r\n      touch-action:pan-y;\r\n    }\r\n    #tgus-cases-hero .tgus-cases-cylinder.is-dragging{ cursor:grabbing; }\r\n\r\n    #tgus-cases-hero .tgus-case-face{\r\n      position:absolute;\r\n      top:0;left:50%;\r\n      height:100%;\r\n      display:flex;align-items:center;justify-content:center;\r\n      padding:0 5px;\r\n      \/* respaldo por si el JS no llega a correr: sin esto, las caras no\r\n         tienen ancho (solo lo fija initCylinder) y el carrusel completo\r\n         queda invisible aunque el resto de la secci\u00f3n s\u00ed se vea *\/\r\n      width:320px;\r\n      margin-left:-160px;\r\n    }\r\n\r\n    \/*\r\n      FIX border-radius bajo 3D: en Chrome, overflow:hidden + border-radius\r\n      sobre un elemento cuyo ancestro tiene transform-style:preserve-3d a\r\n      veces deja de recortar (el compositor pinta la capa sin aplicar el\r\n      clip). clip-path S\u00cd se respeta de forma consistente en ese escenario,\r\n      as\u00ed que el recorte real lo hace clip-path (en la card y en la img),\r\n      y el border-radius\/overflow quedan solo como refuerzo visual.\r\n    *\/\r\n    #tgus-cases-hero .tgus-case-card{\r\n      position:relative;\r\n      display:block;\r\n      width:100%;\r\n      aspect-ratio:1\/1;\r\n      max-height:100%;\r\n      border-radius:var(--tgus-card-radius);\r\n      overflow:hidden;\r\n      clip-path:inset(0 round var(--tgus-card-radius));\r\n      -webkit-clip-path:inset(0 round var(--tgus-card-radius));\r\n      border:1px solid rgba(255,255,255,.12);\r\n      background:#0b0b14;\r\n      box-shadow:0 30px 60px -30px rgba(0,0,0,.65);\r\n      -webkit-user-drag:none;\r\n      user-select:none;\r\n    }\r\n    #tgus-cases-hero .tgus-case-card__img{\r\n      position:absolute;inset:0;width:100%;height:100%;\r\n      object-fit:cover;\r\n      border-radius:var(--tgus-card-radius);\r\n      clip-path:inset(0 round var(--tgus-card-radius));\r\n      -webkit-clip-path:inset(0 round var(--tgus-card-radius));\r\n      pointer-events:none;\r\n      -webkit-user-drag:none;\r\n    }\r\n\r\n    \/* ---------- legend \/ categories row ---------- *\/\r\n    #tgus-cases-hero .tgus-cases-legend{\r\n      position:relative;z-index:2;\r\n      display:flex;flex-wrap:wrap;\r\n      align-items:center;justify-content:center;\r\n      gap:14px 10px;\r\n      margin-top:44px;\r\n      padding:0 24px;\r\n    }\r\n    #tgus-cases-hero .tgus-cases-legend__item{\r\n      display:inline-flex;align-items:center;gap:9px;\r\n      font-size:14px;font-weight:600;color:#dcdce4;\r\n      padding:11px 20px;\r\n      border-radius:999px;\r\n      border:1px solid rgba(255,255,255,.1);\r\n      background:rgba(255,255,255,.03);\r\n      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);\r\n      text-decoration:none;\r\n      transition:border-color .3s ease, background .3s ease, color .3s ease;\r\n    }\r\n    #tgus-cases-hero .tgus-cases-legend__item:hover{\r\n      color:#fff;\r\n      border-color:rgba(139,124,246,.55);\r\n      background:linear-gradient(90deg, rgba(59,130,246,.14), rgba(139,124,246,.14));\r\n    }\r\n    #tgus-cases-hero .tgus-cases-legend__item svg{\r\n      width:16px;height:16px;flex-shrink:0;\r\n      stroke:var(--tgus-cyan);\r\n    }\r\n\r\n    @media(max-width:1024px){\r\n      #tgus-cases-hero .tgus-cases-stage{ height:520px; }\r\n    }\r\n    @media(max-width:768px){\r\n      #tgus-cases-hero{ padding:72px 0 56px; --tgus-card-radius:26px; }\r\n      #tgus-cases-hero .tgus-cases-stage{ height:360px; }\r\n      #tgus-cases-hero .tgus-cases-tilt{ transform:none; }\r\n      #tgus-cases-hero .tgus-cases-legend{ margin-top:32px;gap:10px 8px; }\r\n      #tgus-cases-hero .tgus-cases-legend__item{ padding:9px 16px;font-size:13px; }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- carrusel cil\u00edndrico 3D \u2014 ancho completo, cards cuadradas, sin texto -->\r\n  <div class=\"tgus-cases-stage\" id=\"tgusCasesStage\">\r\n    <div class=\"tgus-cases-tilt\">\r\n      <div class=\"tgus-cases-cylinder\" id=\"tgusCasesCylinder\">\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"0\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-de-exito\/azucantillo\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 1 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522199755839-a2bacb67c546?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito Azucantillo\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"1\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-de-exito\/paco-pack\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 2 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1553413077-190dd305871c?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito Paco Pack\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"2\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-de-exito\/laboratorio-sorel\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 3 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556228720-195a672e8a03?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito Laboratorio Sorel\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"3\">\r\n        <a href=\"https:\/\/togrowagencia.com\/nuevo-casos-de-exito\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 4 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito automatizaci\u00f3n con IA\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"4\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-exito-diseno-web\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 5 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito dise\u00f1o web techado\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"5\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-exito-marketing-digital\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 6 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito marketing digital\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"6\">\r\n        <a href=\"https:\/\/togrowagencia.com\/casos-exito-desarrollo-software\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 7 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518186285589-2f7649de83e0?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito desarrollo de software\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"tgus-case-face\" data-i=\"7\">\r\n        <a href=\"https:\/\/togrowagencia.com\/nuevo-casos-de-exito\/\" class=\"tgus-case-card\" draggable=\"false\">\r\n          <!-- IMG 8 -->\r\n          <img class=\"tgus-case-card__img\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504384308090-c894fdcc538d?q=80&w=1000&auto=format&fit=crop\" alt=\"Caso de \u00e9xito equipo\" draggable=\"false\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- leyenda de categor\u00edas -->\r\n  <div class=\"tgus-cases-legend\">\r\n    <a href=\"https:\/\/togrowagencia.com\/nuevo-casos-de-exito\/\" class=\"tgus-cases-legend__item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9s1.3-6.4 3.8-9z\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><\/svg>\r\n      All cases\r\n    <\/a>\r\n    <a href=\"https:\/\/togrowagencia.com\/casos-exito-desarrollo-software\/\" class=\"tgus-cases-legend__item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M8 9l-4 3 4 3M16 9l4 3-4 3M13 6l-2 12\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n      Software development\r\n    <\/a>\r\n    <a href=\"https:\/\/togrowagencia.com\/casos-exito-diseno-web\/\" class=\"tgus-cases-legend__item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M3 9h18M8 21h8\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n      Web design\r\n    <\/a>\r\n    <a href=\"https:\/\/togrowagencia.com\/casos-exito-marketing-digital\/\" class=\"tgus-cases-legend__item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 11l18-7-7 18-3-8-8-3z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>\r\n      Digital marketing\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    try{\r\n    var stage     = document.getElementById('tgusCasesStage');\r\n    var cylinder  = document.getElementById('tgusCasesCylinder');\r\n    if(!stage || !cylinder) return;\r\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    \/* -------- carrusel cil\u00edndrico 3D (drag + inercia + auto-rotaci\u00f3n) --------\r\n       Las caras (cards) son cuadradas: su ancho se calcula a partir de la\r\n       altura real del stage, no del ancho del cilindro \u2014 as\u00ed siempre\r\n       quedan cuadradas sin importar cu\u00e1ntas haya. El cilindro (radio) se\r\n       dimensiona aparte, seg\u00fan el ancho del stage, para ocupar toda la\r\n       pantalla al girar. *\/\r\n    function initCylinder(){\r\n      var faces = Array.prototype.slice.call(cylinder.querySelectorAll('.tgus-case-face'));\r\n      var count = faces.length;\r\n      if(!count) return;\r\n\r\n      var cylinderWidth, faceWidth, radius;\r\n      var faceAngles = [];\r\n\r\n      function measure(){\r\n        var stageRect = stage.getBoundingClientRect();\r\n        var stageHeight = stageRect.height;\r\n\r\n        \/\/ ancho de card = alto del stage (cuadrada), dejando margen vertical\r\n        \/\/ a prop\u00f3sito: bajo perspectiva 3D, la card que queda al frente del\r\n        \/\/ cilindro se ve m\u00e1s grande (m\u00e1s cerca de la \"c\u00e1mara\") que las de\r\n        \/\/ los costados \u2014 sin este margen, esa ampliaci\u00f3n la cortaba arriba\r\n        \/\/ y abajo contra el alto fijo del stage.\r\n        faceWidth = stageHeight * 0.6;\r\n\r\n        \/\/ el cilindro se dimensiona casi pegado al ancho total de las\r\n        \/\/ cards (poco espacio vac\u00edo entre ellas al girar)\r\n        cylinderWidth = faceWidth * count * 1.1;\r\n        radius = cylinderWidth \/ (2 * Math.PI);\r\n\r\n        cylinder.style.width = cylinderWidth + 'px';\r\n        faces.forEach(function(face, i){\r\n          var baseAngle = i * (360\/count);\r\n          faceAngles[i] = baseAngle;\r\n          face.style.width = faceWidth + 'px';\r\n          face.style.left = '50%';\r\n          face.style.marginLeft = (-faceWidth\/2) + 'px';\r\n          face.style.transform = 'rotateY(' + baseAngle + 'deg) translateZ(' + radius + 'px)';\r\n        });\r\n      }\r\n      measure();\r\n\r\n      var rotation = 0;\r\n      var isDragging = false;\r\n      var startX = 0;\r\n      var startRotation = 0;\r\n      var lastX = 0;\r\n      var lastT = 0;\r\n      var velocity = 0;\r\n\r\n      function apply(){\r\n        cylinder.style.transform = 'rotateY(' + rotation + 'deg)';\r\n      }\r\n\r\n      function autoRotate(){\r\n        if(!isDragging && !reduceMotion){\r\n          rotation += 0.05;\r\n          apply();\r\n        }\r\n        requestAnimationFrame(autoRotate);\r\n      }\r\n\r\n      function onDown(e){\r\n        isDragging = true;\r\n        cylinder.classList.add('is-dragging');\r\n        var x = e.touches ? e.touches[0].clientX : e.clientX;\r\n        startX = x; lastX = x;\r\n        startRotation = rotation;\r\n        lastT = performance.now();\r\n        velocity = 0;\r\n      }\r\n      function onMove(e){\r\n        if(!isDragging) return;\r\n        var x = e.touches ? e.touches[0].clientX : e.clientX;\r\n        var deltaFromStart = x - startX;\r\n        rotation = startRotation + deltaFromStart * 0.06;\r\n        apply();\r\n\r\n        var now = performance.now();\r\n        var dt = now - lastT;\r\n        if(dt > 0){ velocity = ((x - lastX) * 0.06) \/ dt * 16; }\r\n        lastX = x; lastT = now;\r\n      }\r\n      function onUp(){\r\n        if(!isDragging) return;\r\n        isDragging = false;\r\n        cylinder.classList.remove('is-dragging');\r\n\r\n        var v = velocity;\r\n        function inertia(){\r\n          if(Math.abs(v) < 0.01) return;\r\n          rotation += v;\r\n          v *= 0.94;\r\n          apply();\r\n          requestAnimationFrame(inertia);\r\n        }\r\n        inertia();\r\n      }\r\n\r\n      cylinder.addEventListener('mousedown', onDown);\r\n      window.addEventListener('mousemove', onMove);\r\n      window.addEventListener('mouseup', onUp);\r\n      cylinder.addEventListener('touchstart', onDown, {passive:true});\r\n      window.addEventListener('touchmove', onMove, {passive:true});\r\n      window.addEventListener('touchend', onUp);\r\n\r\n      apply();\r\n      if(!reduceMotion) autoRotate();\r\n\r\n      var resizeTimer;\r\n      window.addEventListener('resize', function(){\r\n        clearTimeout(resizeTimer);\r\n        resizeTimer = setTimeout(measure, 150);\r\n      });\r\n    }\r\n\r\n    \/\/ el carrusel es JS puro, no depende de ninguna librer\u00eda externa\r\n    initCylinder();\r\n    }catch(err){\r\n      \/\/ si algo falla ac\u00e1, el error queda visible en la consola del navegador (F12)\r\n      console.error('[tgus-cases-hero] error inicializando el carrusel:', err);\r\n    }\r\n  })();\r\n  <\/script>\r\n\r\n  <!-- script aparte e independiente para el fondo: si esto falla por lo que\r\n       sea, el carrusel de arriba ya corri\u00f3 y se ve igual -->\r\n  <script>\r\n  (function(){\r\n    try{\r\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    \/* -------- fondo: LightTunnel (WebGL, ogl) \u2014 vanilla, portado del\r\n       componente React de referencia. Colores mapeados a la paleta\r\n       #tgus- (cian=cables, violeta=pulso, azul=t\u00fanel). Opacidad baja\r\n       para no competir con el carrusel. Se pausa fuera de viewport y\r\n       respeta prefers-reduced-motion (no se inicia). *\/\r\n    function initLightTunnel(){\r\n      var container = document.getElementById('tgusCasesBg');\r\n      if(!container || reduceMotion) return;\r\n\r\n      import('https:\/\/esm.sh\/ogl@1.0.11').then(function(ogl){\r\n        var Renderer = ogl.Renderer, Program = ogl.Program, Mesh = ogl.Mesh, Triangle = ogl.Triangle;\r\n\r\n        var vertex = '#version 300 es\\nin vec2 position;\\nvoid main(){ gl_Position = vec4(position,0.0,1.0); }';\r\n        var fragment = '#version 300 es\\nprecision highp float;\\n' +\r\n          'uniform vec2 iResolution; uniform float iTime; uniform float uSpeed; uniform float uFlowDir;\\n' +\r\n          'uniform float uPulseSpeed; uniform float uPulseLength; uniform float uPulseBlend; uniform float uPulseWidth;\\n' +\r\n          'uniform float uCableCount; uniform float uThickness; uniform float uRimWidth; uniform float uWaviness;\\n' +\r\n          'uniform float uSway; uniform float uSize; uniform vec2 uCenter; uniform vec2 uMouseOffset;\\n' +\r\n          'uniform float uGlow; uniform float uFadeNear; uniform float uFadeFar; uniform float uBrightness;\\n' +\r\n          'uniform float uColorVariance; uniform float uOpacity; uniform vec3 uCableColor; uniform vec3 uPulseColor;\\n' +\r\n          'uniform vec3 uTunnelColor; uniform float uTunnelOpacity; uniform float uGrain; uniform float uGrainIntensity;\\n' +\r\n          'out vec4 fragColor;\\n' +\r\n          'void mainImage(out vec4 o, in vec2 fragCoord){\\n' +\r\n          '  float size = uSize * 2.0;\\n' +\r\n          '  float speedBase = uSpeed * 4.0 * uFlowDir;\\n' +\r\n          '  float waviness = uWaviness * 0.15;\\n' +\r\n          '  float rotationOsc = uSway * 0.5;\\n' +\r\n          '  float baseThick = uThickness * 0.35 + 0.05;\\n' +\r\n          '  float borderWeight = uRimWidth * 0.15 + 0.01;\\n' +\r\n          '  float cablesCount = floor(uCableCount);\\n' +\r\n          '  vec2 res = iResolution.xy;\\n' +\r\n          '  vec2 uv = (fragCoord - 0.5*res) \/ min(res.y,res.x);\\n' +\r\n          '  uv -= (uCenter + uMouseOffset);\\n' +\r\n          '  uv \/= (size + 0.0001);\\n' +\r\n          '  float r = length(uv);\\n' +\r\n          '  float angle = atan(uv.y, uv.x);\\n' +\r\n          '  float depth = -log(r + 0.0001);\\n' +\r\n          '  float swing = sin(iTime*(uSpeed*0.5+0.1))*rotationOsc;\\n' +\r\n          '  float waveOffset = sin(depth*1.2 + iTime*speedBase*0.25)*waviness;\\n' +\r\n          '  float angleNormalized = (angle\/6.2831853)+0.5;\\n' +\r\n          '  float finalAngle = fract(angleNormalized+waveOffset+swing);\\n' +\r\n          '  float cableID = floor(finalAngle*cablesCount);\\n' +\r\n          '  float gvX = (fract(finalAngle*cablesCount)-0.5);\\n' +\r\n          '  float rand = fract(sin(cableID*12.9898)*43758.5453);\\n' +\r\n          '  float randSpeed = (0.4+rand*0.6)*speedBase*uPulseSpeed;\\n' +\r\n          '  float cableThick = baseThick*(0.6+rand*0.4);\\n' +\r\n          '  vec3 cableCol = uCableColor;\\n' +\r\n          '  cableCol *= 1.0+(rand-0.5)*0.4*uColorVariance;\\n' +\r\n          '  cableCol = mix(cableCol, uPulseColor, rand*0.25*uColorVariance);\\n' +\r\n          '  float scroll = depth+(iTime*randSpeed);\\n' +\r\n          '  float pulseFact = fract(scroll);\\n' +\r\n          '  float distToCore = abs(gvX);\\n' +\r\n          '  float wireMask = smoothstep(cableThick, cableThick-0.05, distToCore);\\n' +\r\n          '  float rimGlow = smoothstep(borderWeight, 0.0, abs(distToCore-cableThick));\\n' +\r\n          '  float pulseThick = cableThick*uPulseWidth;\\n' +\r\n          '  float pulseMask = smoothstep(pulseThick, pulseThick-0.05*uPulseWidth, distToCore);\\n' +\r\n          '  float pulseDist = abs(pulseFact-0.5);\\n' +\r\n          '  float pulseTotal = uPulseLength;\\n' +\r\n          '  float pulseCore = pulseTotal*(1.0-uPulseBlend);\\n' +\r\n          '  float pulseLo = min(pulseCore, pulseTotal - max(fwidth(scroll), 1e-4));\\n' +\r\n          '  float dataPulse = 1.0 - smoothstep(pulseLo, pulseTotal, pulseDist);\\n' +\r\n          '  float aBody = wireMask*uTunnelOpacity;\\n' +\r\n          '  float aRim = rimGlow;\\n' +\r\n          '  float aPulse = clamp(dataPulse*pulseMask, 0.0, 1.0);\\n' +\r\n          '  vec3 fiberCol = uTunnelColor*aBody + cableCol*aRim*1.3*uGlow + uPulseColor*dataPulse*3.0*pulseMask;\\n' +\r\n          '  float distFade = smoothstep(0.0,uFadeNear,r) * smoothstep(uFadeFar, uFadeFar-0.9, r);\\n' +\r\n          '  float inten = clamp(aBody+aRim+aPulse, 0.0, 1.0) * distFade;\\n' +\r\n          '  vec3 finalCol = fiberCol*uBrightness;\\n' +\r\n          '  float alpha = clamp(inten,0.0,1.0)*uOpacity;\\n' +\r\n          '  vec3 outRgb = finalCol*alpha;\\n' +\r\n          '  if(uGrain > 0.5){\\n' +\r\n          '    float gv = (fract(sin(dot(gl_FragCoord.xy, vec2(12.9898,78.233))+iTime)*43758.5453)-0.5)*uGrainIntensity;\\n' +\r\n          '    outRgb = clamp(outRgb+gv, 0.0, 1.0);\\n' +\r\n          '    alpha = clamp(alpha+gv, 0.0, 1.0);\\n' +\r\n          '  }\\n' +\r\n          '  o = vec4(outRgb, alpha);\\n' +\r\n          '}\\n' +\r\n          'void main(){ vec4 o = vec4(0.0); mainImage(o, gl_FragCoord.xy); fragColor = o; }';\r\n\r\n        var renderer = new Renderer({ webgl:2, alpha:true, premultipliedAlpha:true, antialias:false, dpr:Math.min(window.devicePixelRatio||1,2) });\r\n        var gl = renderer.gl;\r\n        gl.clearColor(0,0,0,0);\r\n        var canvas = gl.canvas;\r\n        container.appendChild(canvas);\r\n\r\n        var geometry = new Triangle(gl);\r\n        var program = new Program(gl, {\r\n          vertex: vertex,\r\n          fragment: fragment,\r\n          uniforms:{\r\n            iTime:{ value:0 },\r\n            iResolution:{ value:new Float32Array([1,1]) },\r\n            uSpeed:{ value:0.08 },\r\n            uFlowDir:{ value:-1.0 },\r\n            uPulseSpeed:{ value:1.6 },\r\n            uPulseLength:{ value:0.3 },\r\n            uPulseBlend:{ value:1.0 },\r\n            uPulseWidth:{ value:1.0 },\r\n            uCableCount:{ value:26 },\r\n            uThickness:{ value:0.3 },\r\n            uRimWidth:{ value:0.16 },\r\n            uWaviness:{ value:0.28 },\r\n            uSway:{ value:0.4 },\r\n            uSize:{ value:1.15 },\r\n            uCenter:{ value:new Float32Array([0,0]) },\r\n            uMouseOffset:{ value:new Float32Array([0,0]) },\r\n            uGlow:{ value:1.0 },\r\n            uFadeNear:{ value:0.35 },\r\n            uFadeFar:{ value:2.1 },\r\n            uBrightness:{ value:0.55 },\r\n            uColorVariance:{ value:1.0 },\r\n            uOpacity:{ value:0.24 },\r\n            \/\/ cian \/ violeta \/ azul \u2014 paleta #tgus-, tono oscurecido\r\n            uCableColor:{ value:new Float32Array([0.16,0.34,0.42]) },      \/\/ --tgus-cyan oscurecido\r\n            uPulseColor:{ value:new Float32Array([0.22,0.19,0.40]) },      \/\/ --tgus-violet oscurecido\r\n            uTunnelColor:{ value:new Float32Array([0.10,0.22,0.42]) },     \/\/ --tgus-blue oscurecido\r\n            uTunnelOpacity:{ value:0.08 },\r\n            uGrain:{ value:1.0 },\r\n            uGrainIntensity:{ value:0.035 }\r\n          }\r\n        });\r\n\r\n        var mesh = new Mesh(gl, { geometry:geometry, program:program });\r\n\r\n        function setSize(){\r\n          var rect = container.getBoundingClientRect();\r\n          var w = Math.max(1, Math.floor(rect.width));\r\n          var h = Math.max(1, Math.floor(rect.height));\r\n          renderer.setSize(w, h);\r\n          var res = program.uniforms.iResolution.value;\r\n          res[0] = gl.drawingBufferWidth;\r\n          res[1] = gl.drawingBufferHeight;\r\n          renderer.render({ scene:mesh });\r\n        }\r\n        var ro = new ResizeObserver(setSize);\r\n        ro.observe(container);\r\n        setSize();\r\n\r\n        var currentMouse = [0.5,0.5];\r\n        var targetMouse = [0.5,0.5];\r\n        \/\/ sin seguimiento al mouse a prop\u00f3sito \u2014 el fondo queda est\u00e1tico\/centrado\r\n\r\n        var raf = 0;\r\n        var isVisible = true;\r\n        var t0 = performance.now();\r\n\r\n        function loop(t){\r\n          program.uniforms.iTime.value = (t - t0) * 0.001;\r\n          currentMouse[0] += 0.05 * (targetMouse[0] - currentMouse[0]);\r\n          currentMouse[1] += 0.05 * (targetMouse[1] - currentMouse[1]);\r\n          var off = program.uniforms.uMouseOffset.value;\r\n          off[0] = (currentMouse[0]-0.5) * 0.08;\r\n          off[1] = (currentMouse[1]-0.5) * 0.08;\r\n          renderer.render({ scene:mesh });\r\n          raf = requestAnimationFrame(loop);\r\n        }\r\n        function tryStart(){ if(isVisible && raf===0) raf = requestAnimationFrame(loop); }\r\n        function tryStop(){ if(raf!==0){ cancelAnimationFrame(raf); raf=0; } }\r\n\r\n        var io = new IntersectionObserver(function(entries){\r\n          isVisible = entries[0].isIntersecting;\r\n          isVisible ? tryStart() : tryStop();\r\n        }, { threshold:0 });\r\n        io.observe(container);\r\n\r\n        document.addEventListener('visibilitychange', function(){\r\n          document.hidden ? tryStop() : tryStart();\r\n        });\r\n\r\n        tryStart();\r\n      }).catch(function(){\r\n        \/\/ si el CDN de ogl no carga, el fondo simplemente no aparece\r\n        \/\/ (el degradado radial existente sigue funcionando como fondo base)\r\n      });\r\n    }\r\n    initLightTunnel();\r\n    }catch(err){\r\n      console.error('[tgus-cases-hero] error inicializando el fondo LightTunnel:', err);\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-781c49d elementor-widget elementor-widget-html\" data-id=\"781c49d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  TGUS SUCCESS CASES \u2014 11-cases-logos-marquee.html\r\n  Secci\u00f3n \"Trusted by...\" \u2014 3 filas de logos en marquee infinito,\r\n  cada fila en direcci\u00f3n opuesta, se frena al hacer hover.\r\n  Logos reales de clientes (15), 5 por fila. Cada logo aparece\r\n  2 veces (grupo visible + duplicado aria-hidden para el loop).\r\n  Solo se muestra el logo (sin \u00edcono ni nombre en texto).\r\n  Prefijo CSS: #tgus-cases-logos\r\n  Pegar en widget HTML de Elementor (va despu\u00e9s de 10-cases-hero.html)\r\n============================================================= -->\r\n<section id=\"tgus-cases-logos\">\r\n  <style>\r\n    #tgus-cases-logos{\r\n      --tgus-bg-0:#05050a;\r\n      --tgus-blue:#3b82f6;\r\n      --tgus-violet:#8b7cf6;\r\n      --tgus-cyan:#5ec8f2;\r\n      --tgus-font-display:'Bricolage Grotesque', sans-serif;\r\n      --tgus-font-body:'Plus Jakarta Sans', sans-serif;\r\n      background:var(--tgus-bg-0);\r\n      color:#f4f4f7;\r\n      font-family:var(--tgus-font-body);\r\n      padding:88px 24px 96px;\r\n      position:relative;\r\n      overflow:hidden;\r\n    }\r\n    #tgus-cases-logos *{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n    #tgus-cases-logos::before{\r\n      content:\"\";position:absolute;top:50%;right:6%;\r\n      transform:translateY(-50%);\r\n      width:460px;height:320px;\r\n      background:radial-gradient(circle, rgba(59,130,246,0.09), rgba(139,124,246,0.045) 45%, transparent 70%);\r\n      filter:blur(10px);\r\n      pointer-events:none;\r\n      z-index:1;\r\n      -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);\r\n      mask-image:linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);\r\n    }\r\n\r\n    #tgus-cases-logos .tgus-cases-logos__wrap{\r\n      max-width:1360px;margin:0 auto;\r\n      position:relative;z-index:2;\r\n      display:grid;\r\n      grid-template-columns:0.85fr 1.15fr;\r\n      gap:56px;\r\n      align-items:center;\r\n    }\r\n\r\n    \/* columna izquierda: eyebrow + heading + descripci\u00f3n breve *\/\r\n    #tgus-cases-logos .tgus-cases-logos__head{\r\n      max-width:420px;\r\n    }\r\n    #tgus-cases-logos h2.tgus-reveal{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:600;\r\n      font-size:clamp(28px,3.6vw,44px);\r\n      line-height:1.14;\r\n      letter-spacing:-0.02em;\r\n      padding-bottom:.15em;\r\n    }\r\n    #tgus-cases-logos .tgus-reveal-line{\r\n      display:block;\r\n      background-image:linear-gradient(90deg,#f4f4f7 0%,#f4f4f7 40%, rgba(244,244,247,.15) 55%, #f4f4f7 70%, #f4f4f7 100%);\r\n      background-size:250% 100%;\r\n      background-position:150% 0;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n    }\r\n    #tgus-cases-logos .tgus-grad-word{\r\n      background-image:linear-gradient(90deg,var(--tgus-blue),var(--tgus-violet),var(--tgus-cyan),var(--tgus-blue));\r\n      background-size:300% 100%;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n      animation:tgusCasesLogosGrad 6s linear infinite;\r\n      padding-bottom:.15em;\r\n    }\r\n    @keyframes tgusCasesLogosGrad{ to{ background-position:300% 0; } }\r\n\r\n    #tgus-cases-logos .tgus-cases-logos__desc{\r\n      margin-top:18px;\r\n      font-size:15.5px;line-height:1.65;color:#a9a9b8;\r\n      max-width:38ch;\r\n    }\r\n\r\n    \/* columna derecha: filas de marquee *\/\r\n    #tgus-cases-logos .tgus-logo-rows-col{\r\n      min-width:0;\r\n    }\r\n\r\n    #tgus-cases-logos .tgus-logo-rows{\r\n      display:flex;flex-direction:column;gap:34px;\r\n    }\r\n    #tgus-cases-logos .tgus-logo-row{\r\n      position:relative;\r\n      overflow:hidden;\r\n      -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);\r\n      mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);\r\n    }\r\n    #tgus-cases-logos .tgus-logo-row__track{\r\n      display:flex;\r\n      width:max-content;\r\n      will-change:transform;\r\n    }\r\n    #tgus-cases-logos .tgus-logo-group{\r\n      display:flex;align-items:center;\r\n      gap:64px;\r\n      padding-right:64px;\r\n      flex-shrink:0;\r\n    }\r\n\r\n    \/* logo real: solo imagen, atenuada en escala de grises, a color en hover *\/\r\n    #tgus-cases-logos .tgus-logo{\r\n      display:flex;align-items:center;justify-content:center;\r\n      white-space:nowrap;\r\n      text-decoration:none;\r\n      cursor:default;\r\n      min-width:0;\r\n    }\r\n    #tgus-cases-logos .tgus-logo__img{\r\n      height:34px;\r\n      width:auto;\r\n      max-width:140px;\r\n      object-fit:contain;\r\n      filter:grayscale(1) brightness(1.6);\r\n      opacity:.55;\r\n      transition:opacity .3s ease, filter .3s ease;\r\n    }\r\n    #tgus-cases-logos .tgus-logo:hover .tgus-logo__img{\r\n      opacity:1;\r\n      filter:grayscale(0) brightness(1);\r\n    }\r\n\r\n    @media(prefers-reduced-motion:reduce){\r\n      #tgus-cases-logos .tgus-reveal-line,\r\n      #tgus-cases-logos .tgus-grad-word{ animation:none !important; background-position:0 0 !important; -webkit-text-fill-color:currentColor; }\r\n    }\r\n\r\n    @media(max-width:1024px){\r\n      #tgus-cases-logos .tgus-cases-logos__wrap{\r\n        grid-template-columns:1fr;\r\n        gap:36px;\r\n      }\r\n      #tgus-cases-logos .tgus-cases-logos__head{ max-width:100%; }\r\n    }\r\n    @media(max-width:768px){\r\n      #tgus-cases-logos{ padding:64px 20px 72px; }\r\n      #tgus-cases-logos .tgus-cases-logos__wrap{ gap:28px; }\r\n      #tgus-cases-logos .tgus-logo-rows{ gap:26px; }\r\n      #tgus-cases-logos .tgus-logo-group{ gap:44px;padding-right:44px; }\r\n      #tgus-cases-logos .tgus-logo__img{ height:26px; max-width:110px; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"tgus-cases-logos__wrap\">\r\n    <div class=\"tgus-cases-logos__head\">\r\n      <h2 class=\"tgus-reveal\">\r\n        <span class=\"tgus-reveal-line\">Trusted by growing<\/span>\r\n        <span class=\"tgus-reveal-line\"><span class=\"tgus-grad-word\">businesses<\/span><\/span>\r\n      <\/h2>\r\n      <p class=\"tgus-cases-logos__desc\">\r\n        From local shops to multi-country operations \u2014 teams that trusted us to build, automate and grow their digital presence. [CONTENIDO DE PRUEBA]\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"tgus-logo-rows-col\">\r\n    <div class=\"tgus-logo-rows\">\r\n\r\n      <!-- fila 1 \u2192 hacia la izquierda -->\r\n      <div class=\"tgus-logo-row\">\r\n        <div class=\"tgus-logo-row__track\" data-dir=\"left\">\r\n          <div class=\"tgus-logo-group\" data-logo-group>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/descarga.png\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-6-e1684512931169.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logo-Color-Adatec.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-01-e1684512985926.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Cliente-Carlos-Recio.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n          <div class=\"tgus-logo-group\" data-logo-group aria-hidden=\"true\">\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/descarga.png\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-6-e1684512931169.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logo-Color-Adatec.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-01-e1684512985926.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Cliente-Carlos-Recio.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- fila 2 \u2192 hacia la derecha -->\r\n      <div class=\"tgus-logo-row\">\r\n        <div class=\"tgus-logo-row__track\" data-dir=\"right\">\r\n          <div class=\"tgus-logo-group\" data-logo-group>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-09-e1684512900285-1.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-7-e1684512919254.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-5-e1684512943709.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Ecar.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/logo-verde-cliente-Notaria-1.avif\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n          <div class=\"tgus-logo-group\" data-logo-group aria-hidden=\"true\">\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-09-e1684512900285-1.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-7-e1684512919254.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Logos-de-Clientes-Buho_.-5-e1684512943709.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Ecar.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/logo-verde-cliente-Notaria-1.avif\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- fila 3 \u2192 hacia la izquierda -->\r\n      <div class=\"tgus-logo-row\">\r\n        <div class=\"tgus-logo-row__track\" data-dir=\"left\">\r\n          <div class=\"tgus-logo-group\" data-logo-group>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/tecnology_video-02_230x_2x_54db5cda-5d07-4a87-86af-bdb318f76bd9-_3_0.webp\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/LOGO-TyJ-1-e1758750570813.webp\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Recurso-1-1.webp\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/logo-3.webp\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-16-jun-2026-15_01_39.webp\" alt=\"Client logo\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n          <div class=\"tgus-logo-group\" data-logo-group aria-hidden=\"true\">\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/tecnology_video-02_230x_2x_54db5cda-5d07-4a87-86af-bdb318f76bd9-_3_0.webp\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/LOGO-TyJ-1-e1758750570813.webp\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Recurso-1-1.webp\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/logo-3.webp\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n            <a href=\"#\" class=\"tgus-logo\">\r\n              <img class=\"tgus-logo__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-16-jun-2026-15_01_39.webp\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    try{\r\n      var root = document.getElementById('tgus-cases-logos');\r\n      if(!root) return;\r\n      var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      \/\/ reveal del heading\r\n      var lines = root.querySelectorAll('.tgus-reveal-line');\r\n      if(reduceMotion){\r\n        lines.forEach(function(l){ l.style.backgroundPosition='0 0'; l.style.webkitTextFillColor='currentColor'; });\r\n      } else if(typeof gsap !== 'undefined'){\r\n        gsap.registerPlugin(ScrollTrigger);\r\n        gsap.to(lines, {\r\n          backgroundPosition:'-50% 0', duration:1.2, ease:'power3.out', stagger:0.15,\r\n          scrollTrigger:{ trigger:root, start:'top 85%', once:true }\r\n        });\r\n      } else {\r\n        lines.forEach(function(l){ l.style.backgroundPosition='0 0'; l.style.webkitTextFillColor='currentColor'; });\r\n      }\r\n\r\n      \/\/ marquees por fila \u2014 cada una en su direcci\u00f3n, JS puro (sin GSAP)\r\n      var rows = root.querySelectorAll('.tgus-logo-row__track');\r\n      if(!reduceMotion){\r\n        rows.forEach(function(track){\r\n          var groups = track.querySelectorAll('[data-logo-group]');\r\n          if(!groups.length) return;\r\n          var dir = track.getAttribute('data-dir') === 'right' ? 1 : -1;\r\n          var speed = 32; \/\/ px\/seg\r\n          var pos = dir === -1 ? 0 : -groups[0].getBoundingClientRect().width;\r\n          var groupWidth = groups[0].getBoundingClientRect().width;\r\n          var lastT = null;\r\n          var paused = false;\r\n\r\n          track.addEventListener('mouseenter', function(){ paused = true; });\r\n          track.addEventListener('mouseleave', function(){ paused = false; });\r\n\r\n          function frame(t){\r\n            if(lastT === null) lastT = t;\r\n            var dt = (t - lastT) \/ 1000;\r\n            lastT = t;\r\n            if(!paused){\r\n              pos += dir * speed * dt;\r\n              if(dir === -1 && pos <= -groupWidth) pos += groupWidth;\r\n              if(dir === 1 && pos >= 0) pos -= groupWidth;\r\n              track.style.transform = 'translateX(' + pos + 'px)';\r\n            }\r\n            requestAnimationFrame(frame);\r\n          }\r\n          requestAnimationFrame(frame);\r\n        });\r\n      }\r\n    }catch(err){\r\n      console.error('[tgus-cases-logos] error:', err);\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee9296d elementor-widget elementor-widget-html\" data-id=\"ee9296d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  TGUS SUCCESS CASES \u2014 12-cases-folders.html (CONECTADO a WordPress\/JetEngine)\r\n  Layout de 2 columnas:\r\n    - izquierda (angosta): carpetas por categor\u00eda (componente \"Folder\"\r\n      portado a vanilla JS\/CSS), controlan qu\u00e9 categor\u00eda est\u00e1 activa.\r\n    - derecha (ancha): fila de filtros (sincronizada con las carpetas)\r\n      + grid de project-cards de la categor\u00eda activa.\r\n  Prefijo CSS: #tgus-cases-folders\r\n  Pegar en widget HTML de Elementor (va despu\u00e9s de 11-cases-logos-marquee.html)\r\n\r\n  REQUIERE: tgus-cases-connect.php instalado (Code Snippets, Run everywhere).\r\n  El grid ([tgus_cases_grid]) y los contadores ([tgus_case_count]) se llenan\r\n  con los casos reales publicados como CPT \"case\" en cada categor\u00eda.\r\n============================================================= -->\r\n<section id=\"tgus-cases-folders\">\r\n  <style>\r\n    #tgus-cases-folders{\r\n      --tgus-bg-0:#05050a;\r\n      --tgus-blue:#3b82f6;\r\n      --tgus-violet:#8b7cf6;\r\n      --tgus-cyan:#5ec8f2;\r\n      --tgus-rose:#f472b6;\r\n      --tgus-font-display:'Bricolage Grotesque', sans-serif;\r\n      --tgus-font-body:'Plus Jakarta Sans', sans-serif;\r\n      background:var(--tgus-bg-0);\r\n      color:#f4f4f7;\r\n      font-family:var(--tgus-font-body);\r\n      padding:96px 24px 110px;\r\n      position:relative;\r\n      overflow:hidden;\r\n    }\r\n    #tgus-cases-folders *{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n    #tgus-cases-folders .tgus-cf__wrap{ max-width:1360px;margin:0 auto; }\r\n\r\n    \/* head *\/\r\n    #tgus-cases-folders .tgus-cf__head{\r\n      max-width:640px;\r\n      margin-bottom:48px;\r\n    }\r\n    #tgus-cases-folders h2.tgus-reveal{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:600;\r\n      font-size:clamp(28px,3.6vw,44px);\r\n      line-height:1.14;\r\n      letter-spacing:-0.02em;\r\n      padding-bottom:.15em;\r\n    }\r\n    #tgus-cases-folders .tgus-reveal-line{\r\n      display:block;\r\n      background-image:linear-gradient(90deg,#f4f4f7 0%,#f4f4f7 40%, rgba(244,244,247,.15) 55%, #f4f4f7 70%, #f4f4f7 100%);\r\n      background-size:250% 100%;\r\n      background-position:150% 0;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n    }\r\n    #tgus-cases-folders .tgus-grad-word{\r\n      background-image:linear-gradient(90deg,var(--tgus-blue),var(--tgus-violet),var(--tgus-cyan),var(--tgus-blue));\r\n      background-size:300% 100%;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n      animation:tgusCfGrad 6s linear infinite;\r\n      padding-bottom:.15em;\r\n    }\r\n    @keyframes tgusCfGrad{ to{ background-position:300% 0; } }\r\n    #tgus-cases-folders .tgus-cf__lead{\r\n      margin-top:16px;font-size:15.5px;line-height:1.6;color:#a9a9b8;\r\n      max-width:52ch;\r\n    }\r\n\r\n    \/* ---------- layout de 2 columnas ---------- *\/\r\n    #tgus-cases-folders .tgus-cf__layout{\r\n      display:grid;\r\n      grid-template-columns:0.34fr 0.66fr;\r\n      gap:48px;\r\n      align-items:start;\r\n    }\r\n\r\n    \/* columna izquierda: carpetas apiladas verticalmente *\/\r\n    #tgus-cases-folders .tgus-cf__folders{\r\n      display:flex;flex-direction:column;\r\n      gap:52px;\r\n      padding:8px 0;\r\n      position:sticky;\r\n      top:100px;\r\n    }\r\n    #tgus-cases-folders .tgus-folder-item{\r\n      display:flex;align-items:center;gap:22px;\r\n      cursor:pointer;\r\n      margin:0;\r\n      transition:margin .35s cubic-bezier(.16,1,.3,1);\r\n    }\r\n    #tgus-cases-folders .tgus-folder-item.is-active{\r\n      margin:60px 0 76px;\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-folder{\r\n      --folder-color:#3b82f6;\r\n      --folder-back:#2f6fd6;\r\n      --paper-1:#e9e9ee;\r\n      --paper-2:#f4f4f7;\r\n      --paper-3:#ffffff;\r\n      position:relative;\r\n      width:92px;height:74px;\r\n      flex-shrink:0;\r\n      transition:transform .2s ease-in;\r\n    }\r\n    #tgus-cases-folders .tgus-folder-item:hover .tgus-folder{ transform:translateY(-6px); }\r\n    #tgus-cases-folders .tgus-folder.is-open{ transform:translateY(-6px); }\r\n    #tgus-cases-folders .tgus-folder:focus-visible{\r\n      outline:2px solid #fff;outline-offset:4px;border-radius:10px;\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-folder__back{\r\n      position:relative;width:100%;height:100%;\r\n      background:var(--folder-back);\r\n      border-radius:0 12px 12px 12px;\r\n    }\r\n    #tgus-cases-folders .tgus-folder__back::after{\r\n      content:\"\";position:absolute;z-index:0;bottom:98%;left:0;\r\n      width:30px;height:10px;\r\n      background:var(--folder-back);\r\n      border-radius:6px 6px 0 0;\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-paper{\r\n      position:absolute;z-index:2;\r\n      bottom:10%;left:50%;\r\n      transform:translate(-50%,10%);\r\n      width:70%;height:80%;\r\n      background:var(--paper-1);\r\n      border-radius:9px;\r\n      box-shadow:0 6px 16px -6px rgba(0,0,0,.4);\r\n      transition:transform .35s cubic-bezier(.16,1,.3,1);\r\n    }\r\n    #tgus-cases-folders .tgus-paper-2{ background:var(--paper-2);width:80%;height:70%; }\r\n    #tgus-cases-folders .tgus-paper-3{ background:var(--paper-3);width:90%;height:60%; }\r\n\r\n    #tgus-cases-folders .tgus-folder-item:hover .tgus-paper{ transform:translate(-50%,0%); }\r\n\r\n    #tgus-cases-folders .tgus-folder.is-open .tgus-paper-1{ transform:translate(-170%,-78%) rotateZ(-20deg); }\r\n    #tgus-cases-folders .tgus-folder.is-open .tgus-paper-2{ transform:translate(28%,-78%) rotateZ(20deg); height:80%; }\r\n    #tgus-cases-folders .tgus-folder.is-open .tgus-paper-3{ transform:translate(-50%,-125%) rotateZ(6deg); height:80%; }\r\n\r\n    #tgus-cases-folders .tgus-folder__front{\r\n      position:absolute;z-index:3;\r\n      width:100%;height:100%;\r\n      background:var(--folder-color);\r\n      border-radius:6px 12px 12px 12px;\r\n      transform-origin:bottom;\r\n      transition:transform .3s ease-in-out;\r\n    }\r\n    #tgus-cases-folders .tgus-folder-item:hover .tgus-folder__front{ transform:skew(15deg) scaleY(.6); }\r\n    #tgus-cases-folders .tgus-folder-item:hover .tgus-folder__front.right{ transform:skew(-15deg) scaleY(.6); }\r\n    #tgus-cases-folders .tgus-folder.is-open .tgus-folder__front{ transform:skew(15deg) scaleY(.6); }\r\n\r\n    \/* sello del logo, sutil, sobre la tapa .right *\/\r\n    #tgus-cases-folders .tgus-folder__front.right::after{\r\n      content:\"\";\r\n      position:absolute;inset:0;\r\n      background-image:url('https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/Capa_1-3.webp');\r\n      background-repeat:no-repeat;\r\n      background-position:center 46%;\r\n      background-size:48% auto;\r\n      filter:brightness(0) invert(1);\r\n      opacity:.34;\r\n      pointer-events:none;\r\n    }\r\n    #tgus-cases-folders .tgus-folder.is-open .tgus-folder__front.right{ transform:skew(-15deg) scaleY(.6); }\r\n\r\n    #tgus-cases-folders .tgus-folder-item[data-category=\"automation\"] .tgus-folder{ --folder-color:var(--tgus-cyan); --folder-back:#2e93b8; }\r\n    #tgus-cases-folders .tgus-folder-item[data-category=\"software\"]   .tgus-folder{ --folder-color:var(--tgus-blue); --folder-back:#2f6fd6; }\r\n    #tgus-cases-folders .tgus-folder-item[data-category=\"web-design\"] .tgus-folder{ --folder-color:var(--tgus-violet); --folder-back:#6f5fd6; }\r\n    #tgus-cases-folders .tgus-folder-item[data-category=\"marketing\"]  .tgus-folder{ --folder-color:var(--tgus-rose); --folder-back:#d4568f; }\r\n\r\n    #tgus-cases-folders .tgus-folder-label{\r\n      display:flex;flex-direction:column;gap:4px;\r\n    }\r\n    #tgus-cases-folders .tgus-folder-label__name{\r\n      font-size:14.5px;font-weight:600;color:#8f8fa0;\r\n      transition:color .3s ease;\r\n    }\r\n    #tgus-cases-folders .tgus-folder-item.is-active .tgus-folder-label__name,\r\n    #tgus-cases-folders .tgus-folder-item:hover .tgus-folder-label__name{ color:#fff; }\r\n    #tgus-cases-folders .tgus-folder-label__count{\r\n      font-size:12px;color:#5f5f70;\r\n    }\r\n\r\n    \/* columna derecha: filtros + grid *\/\r\n    #tgus-cases-folders .tgus-cf__main{ min-width:0; }\r\n\r\n    #tgus-cases-folders .tgus-cf__filters{\r\n      display:flex;align-items:center;gap:16px 20px;\r\n      flex-wrap:wrap;\r\n      margin-bottom:28px;\r\n      padding-bottom:22px;\r\n      border-bottom:1px solid rgba(255,255,255,.08);\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-cf__search{\r\n      position:relative;\r\n      display:flex;align-items:center;\r\n      flex:1 1 220px;\r\n      min-width:200px;\r\n      max-width:320px;\r\n    }\r\n    #tgus-cases-folders .tgus-cf__search svg{\r\n      position:absolute;left:13px;\r\n      width:15px;height:15px;\r\n      color:#8f8fa0;\r\n      pointer-events:none;\r\n    }\r\n    #tgus-cases-folders .tgus-cf__search input{\r\n      width:100%;\r\n      font-family:var(--tgus-font-body);\r\n      font-size:13.5px;color:#f4f4f7;\r\n      background:rgba(255,255,255,.03);\r\n      border:1px solid rgba(255,255,255,.14);\r\n      border-radius:999px;\r\n      padding:10px 14px 10px 36px;\r\n      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);\r\n      outline:none;\r\n      transition:border-color .3s ease, background .3s ease;\r\n    }\r\n    #tgus-cases-folders .tgus-cf__search input::placeholder{ color:#7a7a88; }\r\n    #tgus-cases-folders .tgus-cf__search input:focus{\r\n      border-color:rgba(94,200,242,.5);\r\n      background:rgba(255,255,255,.05);\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-dd{ position:relative;display:inline-block; }\r\n    #tgus-cases-folders .tgus-dd__native{ position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }\r\n    #tgus-cases-folders .tgus-dd__trigger{\r\n      display:flex;align-items:center;justify-content:space-between;\r\n      gap:10px;min-width:150px;\r\n      font-family:var(--tgus-font-body);\r\n      font-size:14px;font-weight:600;\r\n      color:#f4f4f7;\r\n      background:#0a0a10;\r\n      border:1px solid rgba(255,255,255,.14);\r\n      border-radius:18px;\r\n      padding:11px 16px;\r\n      outline:none;cursor:pointer;\r\n      transition:border-color .3s ease, box-shadow .2s ease;\r\n    }\r\n    #tgus-cases-folders .tgus-dd__trigger-label{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }\r\n    #tgus-cases-folders .tgus-dd__trigger:hover{ border-color:rgba(255,255,255,.24); }\r\n    #tgus-cases-folders .tgus-dd.is-open .tgus-dd__trigger,\r\n    #tgus-cases-folders .tgus-dd__trigger:focus-visible{\r\n      border-color:rgba(139,124,246,.55);\r\n      box-shadow:inset 0 1px 3px rgba(0,0,0,.4);\r\n    }\r\n    #tgus-cases-folders .tgus-dd__chevron{\r\n      width:14px;height:14px;color:#9a9aa8;flex-shrink:0;\r\n      transition:transform .3s cubic-bezier(.16,1,.3,1), color .3s ease;\r\n    }\r\n    #tgus-cases-folders .tgus-dd__trigger:hover .tgus-dd__chevron{ color:#c9c9d4; }\r\n    #tgus-cases-folders .tgus-dd.is-open .tgus-dd__chevron{ transform:rotate(180deg); }\r\n\r\n    #tgus-cases-folders .tgus-dd__panel{\r\n      position:absolute;left:0;top:calc(100% + 6px);z-index:20;\r\n      width:max-content;min-width:100%;max-width:220px;\r\n      background:#0f0f18;\r\n      border:1px solid rgba(255,255,255,.14);\r\n      border-radius:18px;\r\n      padding:5px;\r\n      box-shadow:0 16px 36px -18px rgba(0,0,0,.7);\r\n      opacity:0;transform:scale(.94) translateY(-8px);\r\n      transform-origin:top left;\r\n      pointer-events:none;\r\n      transition:opacity .16s ease, transform .22s cubic-bezier(.16,1,.3,1);\r\n    }\r\n    #tgus-cases-folders .tgus-dd.is-open .tgus-dd__panel{ opacity:1;transform:scale(1) translateY(0);pointer-events:auto; }\r\n    #tgus-cases-folders .tgus-dd__list{\r\n      position:relative;max-height:220px;overflow-y:auto;\r\n      list-style:none;scrollbar-gutter:stable;\r\n    }\r\n    #tgus-cases-folders .tgus-dd__hl{\r\n      position:absolute;left:0;right:0;top:0;height:36px;\r\n      border-radius:11px;\r\n      background:rgba(139,124,246,.16);\r\n      opacity:0;pointer-events:none;\r\n      transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .12s ease;\r\n      will-change:transform;\r\n    }\r\n    #tgus-cases-folders .tgus-dd__opt{\r\n      position:relative;z-index:1;\r\n      display:flex;align-items:center;\r\n      height:36px;padding:0 10px;\r\n      border-radius:11px;\r\n      font-size:13.5px;font-weight:500;\r\n      color:#c9c9d4;\r\n      cursor:pointer;user-select:none;white-space:nowrap;\r\n      gap:24px;\r\n    }\r\n    #tgus-cases-folders .tgus-dd__opt.is-active{ color:#fff; }\r\n    #tgus-cases-folders .tgus-dd__opt.is-selected{ color:#fff;font-weight:700; }\r\n    #tgus-cases-folders .tgus-dd__opt-label{ flex:1;min-width:0; }\r\n    #tgus-cases-folders .tgus-dd__opt-check{\r\n      width:14px;height:14px;flex-shrink:0;\r\n      color:var(--tgus-cyan);\r\n      opacity:0;transform:scale(.7);\r\n      transition:opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);\r\n    }\r\n    #tgus-cases-folders .tgus-dd__opt.is-selected .tgus-dd__opt-check{ opacity:1;transform:scale(1); }\r\n\r\n    #tgus-cases-folders .tgus-cf__nomatch{\r\n      display:none;\r\n      font-size:14px;color:#6f6f80;\r\n      padding:32px 0;\r\n    }\r\n    #tgus-cases-folders .tgus-cf__nomatch.is-visible{ display:block; }\r\n\r\n    #tgus-cases-folders .tgus-cf__empty{\r\n      font-size:14px;color:#6f6f80;\r\n      padding:40px 0;\r\n      display:none;\r\n    }\r\n    #tgus-cases-folders .tgus-cf__empty.is-visible{ display:block; }\r\n\r\n    #tgus-cases-folders .tgus-project-group{\r\n      display:none;\r\n      grid-template-columns:repeat(2,1fr);\r\n      gap:22px;\r\n    }\r\n    #tgus-cases-folders .tgus-project-group.is-active{ display:grid; }\r\n    #tgus-cases-folders .tgus-project-card.is-year-hidden{ display:none; }\r\n\r\n    #tgus-cases-folders .tgus-project-card{\r\n      position:relative;\r\n      display:block;\r\n      aspect-ratio:3\/4;\r\n      border-radius:22px;\r\n      overflow:hidden;\r\n      border:1px solid rgba(255,255,255,.1);\r\n      background:#0b0b14;\r\n      text-decoration:none;color:inherit;\r\n      transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card:hover{\r\n      transform:translateY(-6px);\r\n      border-color:rgba(139,124,246,.4);\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__img{\r\n      position:absolute;inset:0;z-index:0;\r\n      width:100%;height:100%;object-fit:cover;\r\n      transform:scale(1.02);\r\n      transition:transform .7s cubic-bezier(.16,1,.3,1);\r\n    }\r\n    #tgus-cases-folders .tgus-project-card:hover .tgus-project-card__img{ transform:scale(1.08); }\r\n\r\n    #tgus-cases-folders .tgus-project-card__badge{\r\n      position:absolute;top:14px;left:14px;z-index:3;\r\n      font-size:11px;font-weight:700;letter-spacing:.04em;\r\n      padding:6px 12px;border-radius:999px;\r\n      color:#f4f4f7;\r\n      background:rgba(20,20,30,.38);\r\n      border:1px solid rgba(255,255,255,.28);\r\n      -webkit-backdrop-filter:blur(10px) saturate(160%);\r\n      backdrop-filter:blur(10px) saturate(160%);\r\n      box-shadow:inset 0 1px 0 rgba(255,255,255,.2);\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-project-card__panel{\r\n      position:absolute;left:0;right:0;bottom:0;top:54%;z-index:2;\r\n      display:flex;flex-direction:column;justify-content:flex-end;\r\n      padding:18px 18px 18px;\r\n      background:linear-gradient(180deg,\r\n        rgba(9,9,16,0) 0%,\r\n        rgba(9,9,16,.3) 26%,\r\n        rgba(9,9,16,.6) 55%,\r\n        rgba(9,9,16,.78) 100%);\r\n      -webkit-backdrop-filter:blur(14px) saturate(160%);\r\n      backdrop-filter:blur(14px) saturate(160%);\r\n      -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 34%);\r\n      mask-image:linear-gradient(180deg, transparent 0%, #000 34%);\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-project-card__title-row{\r\n      display:flex;align-items:flex-end;justify-content:space-between;\r\n      gap:10px;\r\n      margin-bottom:10px;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__title{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:600;font-size:17px;line-height:1.2;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__year{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:700;font-size:14px;\r\n      white-space:nowrap;\r\n    }\r\n\r\n    #tgus-cases-folders .tgus-project-card__client{\r\n      font-size:13px;color:#c3c3ce;\r\n      margin-bottom:12px;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__divider{\r\n      height:1px;background:rgba(255,255,255,.16);\r\n      margin-bottom:12px;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__stats{\r\n      display:flex;align-items:center;justify-content:space-between;\r\n      font-size:12px;color:#a9a9b8;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__stat{\r\n      display:flex;align-items:center;gap:6px;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card__stat svg{ width:14px;height:14px;flex-shrink:0;stroke:var(--tgus-cyan); }\r\n    #tgus-cases-folders .tgus-project-card__stat b{ color:#f4f4f7;font-weight:700; }\r\n    #tgus-cases-folders .tgus-project-card__sep{ width:1px;height:14px;background:rgba(255,255,255,.1); }\r\n\r\n    #tgus-cases-folders .tgus-view-btn{\r\n      --btn-radius:12px;\r\n      --transition:.35s;\r\n      --hue:196deg;\r\n      position:relative;\r\n      display:inline-flex;align-items:center;gap:6px;\r\n      padding:5px 12px 5px 9px;\r\n      background:rgba(16,16,24,.5);\r\n      border:1px solid rgba(255,255,255,.2);\r\n      border-radius:var(--btn-radius);\r\n      -webkit-backdrop-filter:blur(8px) saturate(160%);\r\n      backdrop-filter:blur(8px) saturate(160%);\r\n      box-shadow:\r\n        inset 0 1px 1px rgba(255,255,255,.18),\r\n        inset 0 2px 3px rgba(255,255,255,.08),\r\n        0 -2px 4px rgba(0,0,0,.35);\r\n      overflow:hidden;\r\n      transition:box-shadow var(--transition), border-color var(--transition);\r\n    }\r\n    #tgus-cases-folders .tgus-view-btn::after{\r\n      content:\"\";position:absolute;inset:0;\r\n      background-image:linear-gradient(0deg,#fff,hsl(var(--hue),100%,70%),hsla(var(--hue),100%,70%,.4) 8%,transparent);\r\n      opacity:0;\r\n      -webkit-mask-image:linear-gradient(0deg,#fff,transparent);\r\n      mask-image:linear-gradient(0deg,#fff,transparent);\r\n      transition:opacity var(--transition);\r\n      pointer-events:none;\r\n    }\r\n    #tgus-cases-folders .tgus-project-card:hover .tgus-view-btn::after{ opacity:.55; }\r\n    #tgus-cases-folders .tgus-project-card:hover .tgus-view-btn{\r\n      border-color:hsla(var(--hue),100%,80%,.45);\r\n      box-shadow:\r\n        inset 0 1px 1px rgba(255,255,255,.25),\r\n        inset 0 2px 3px rgba(255,255,255,.12),\r\n        0 -2px 6px rgba(0,0,0,.4);\r\n    }\r\n    #tgus-cases-folders .tgus-view-btn__icon{\r\n      position:relative;z-index:1;\r\n      width:13px;height:13px;flex-shrink:0;\r\n      fill:#cfd8e3;\r\n      filter:drop-shadow(0 0 2px rgba(255,255,255,.4));\r\n      transition:fill var(--transition);\r\n    }\r\n    #tgus-cases-folders .tgus-project-card:hover .tgus-view-btn__icon{ fill:#fff; }\r\n    #tgus-cases-folders .tgus-view-btn__letters{ position:relative;z-index:1; }\r\n    #tgus-cases-folders .tgus-view-btn__letter{\r\n      display:inline-block;color:#c7c7d4;\r\n      animation:tgusViewBtnLetter 2.4s ease-in-out infinite;\r\n    }\r\n    @keyframes tgusViewBtnLetter{\r\n      50%{ color:#fff; text-shadow:0 0 3px rgba(255,255,255,.55); }\r\n    }\r\n\r\n    @media(prefers-reduced-motion:reduce){\r\n      #tgus-cases-folders .tgus-reveal-line,\r\n      #tgus-cases-folders .tgus-grad-word{ animation:none !important; background-position:0 0 !important; -webkit-text-fill-color:currentColor; }\r\n    }\r\n\r\n    @media(max-width:1024px){\r\n      #tgus-cases-folders .tgus-cf__layout{ grid-template-columns:1fr; gap:36px; }\r\n      #tgus-cases-folders .tgus-cf__folders{\r\n        flex-direction:row;flex-wrap:wrap;\r\n        position:static;gap:28px;\r\n      }\r\n      #tgus-cases-folders .tgus-project-group.is-active{ grid-template-columns:repeat(2,1fr); }\r\n    }\r\n    @media(max-width:768px){\r\n      #tgus-cases-folders{ padding:64px 20px 80px; }\r\n      #tgus-cases-folders .tgus-cf__head{ margin-bottom:36px; }\r\n      #tgus-cases-folders .tgus-folder{ width:78px;height:64px; }\r\n      #tgus-cases-folders .tgus-project-group.is-active{ grid-template-columns:1fr;gap:18px; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"tgus-cf__wrap\">\r\n    <div class=\"tgus-cf__head\">\r\n      <h2 class=\"tgus-reveal\">\r\n        <span class=\"tgus-reveal-line\">Browse by<\/span>\r\n        <span class=\"tgus-reveal-line\"><span class=\"tgus-grad-word\">category<\/span><\/span>\r\n      <\/h2>\r\n      <p class=\"tgus-cf__lead\">Open a folder to see every project we've shipped in that area.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"tgus-cf__layout\">\r\n\r\n      <!-- columna izquierda: carpetas -->\r\n      <div class=\"tgus-cf__folders\" id=\"tgusCfFolders\">\r\n\r\n        <div class=\"tgus-folder-item\" data-category=\"automation\">\r\n          <div class=\"tgus-folder\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\" aria-label=\"Open Automation folder\">\r\n            <div class=\"tgus-folder__back\">\r\n              <div class=\"tgus-paper tgus-paper-1\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-2\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-3\"><\/div>\r\n              <div class=\"tgus-folder__front\"><\/div>\r\n              <div class=\"tgus-folder__front right\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"tgus-folder-label\">\r\n            <span class=\"tgus-folder-label__name\">Automation<\/span>\r\n            <span class=\"tgus-folder-label__count\">0 projects<\/span>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"tgus-folder-item\" data-category=\"software\">\r\n          <div class=\"tgus-folder\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\" aria-label=\"Open Software development folder\">\r\n            <div class=\"tgus-folder__back\">\r\n              <div class=\"tgus-paper tgus-paper-1\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-2\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-3\"><\/div>\r\n              <div class=\"tgus-folder__front\"><\/div>\r\n              <div class=\"tgus-folder__front right\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"tgus-folder-label\">\r\n            <span class=\"tgus-folder-label__name\">Software development<\/span>\r\n            <span class=\"tgus-folder-label__count\">1 projects<\/span>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"tgus-folder-item\" data-category=\"web-design\">\r\n          <div class=\"tgus-folder\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\" aria-label=\"Open Web design folder\">\r\n            <div class=\"tgus-folder__back\">\r\n              <div class=\"tgus-paper tgus-paper-1\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-2\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-3\"><\/div>\r\n              <div class=\"tgus-folder__front\"><\/div>\r\n              <div class=\"tgus-folder__front right\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"tgus-folder-label\">\r\n            <span class=\"tgus-folder-label__name\">Web design<\/span>\r\n            <span class=\"tgus-folder-label__count\">0 projects<\/span>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"tgus-folder-item\" data-category=\"marketing\">\r\n          <div class=\"tgus-folder\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\" aria-label=\"Open Digital marketing folder\">\r\n            <div class=\"tgus-folder__back\">\r\n              <div class=\"tgus-paper tgus-paper-1\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-2\"><\/div>\r\n              <div class=\"tgus-paper tgus-paper-3\"><\/div>\r\n              <div class=\"tgus-folder__front\"><\/div>\r\n              <div class=\"tgus-folder__front right\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"tgus-folder-label\">\r\n            <span class=\"tgus-folder-label__name\">Digital marketing<\/span>\r\n            <span class=\"tgus-folder-label__count\">0 projects<\/span>\r\n          <\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- columna derecha: filtros + grid -->\r\n      <div class=\"tgus-cf__main\">\r\n\r\n        <div class=\"tgus-cf__filters\">\r\n          <div class=\"tgus-cf__search\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path stroke-linecap=\"round\" d=\"M21 21l-4.35-4.35\"\/><\/svg>\r\n            <input type=\"text\" id=\"tgusCfSearch\" placeholder=\"Search projects\u2026\" autocomplete=\"off\">\r\n          <\/div>\r\n\r\n          <div class=\"tgus-dd\" data-dd>\r\n            <select class=\"tgus-dd__native\" id=\"tgusCfDateFilter\" tabindex=\"-1\" aria-hidden=\"true\">\r\n              <option value=\"all\">All dates<\/option>\r\n              <option value=\"2026\">2026<\/option>\r\n              <option value=\"2025\">2025<\/option>\r\n            <\/select>\r\n            <button type=\"button\" class=\"tgus-dd__trigger\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\r\n              <span class=\"tgus-dd__trigger-label\">All dates<\/span>\r\n              <svg class=\"tgus-dd__chevron\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M3 4.75 6 7.75 9 4.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n            <\/button>\r\n            <div class=\"tgus-dd__panel\">\r\n              <ul class=\"tgus-dd__list\" role=\"listbox\" tabindex=\"-1\">\r\n                <span class=\"tgus-dd__hl\" aria-hidden=\"true\"><\/span>\r\n                <li class=\"tgus-dd__opt\" role=\"option\" data-value=\"all\">\r\n                  <span class=\"tgus-dd__opt-label\">All dates<\/span>\r\n                  <svg class=\"tgus-dd__opt-check\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7.4 5.8 10.2 11 4.4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/li>\r\n                <li class=\"tgus-dd__opt\" role=\"option\" data-value=\"2026\">\r\n                  <span class=\"tgus-dd__opt-label\">2026<\/span>\r\n                  <svg class=\"tgus-dd__opt-check\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7.4 5.8 10.2 11 4.4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/li>\r\n                <li class=\"tgus-dd__opt\" role=\"option\" data-value=\"2025\">\r\n                  <span class=\"tgus-dd__opt-label\">2025<\/span>\r\n                  <svg class=\"tgus-dd__opt-check\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7.4 5.8 10.2 11 4.4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/li>\r\n              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"tgus-cf__empty\" id=\"tgusCfEmpty\">Open a folder on the left to see its projects.<\/p>\r\n        <p class=\"tgus-cf__nomatch\" id=\"tgusCfNoMatch\">No projects match those filters.<\/p>\r\n\r\n        <div class=\"tgus-project-group\" data-group=\"automation\"><\/div><div class=\"tgus-project-group\" data-group=\"software\"><a href=\"https:\/\/togrowagencia.com\/en\/case\/apple-travel\/\" class=\"tgus-project-card\" data-year=\"2026\"><img class=\"tgus-project-card__img\" src=\"https:\/\/togrowagencia.com\/en\/wp-content\/uploads\/2026\/08\/casoapple12-717x1024.webp\" alt=\"A custom CRM built for how a travel agency actually sells\" loading=\"lazy\" decoding=\"async\"><span class=\"tgus-project-card__badge\">Software development<\/span><div class=\"tgus-project-card__panel\"><div class=\"tgus-project-card__title-row\"><span class=\"tgus-project-card__title\">A custom CRM built for how a travel agency actually sells<\/span><span class=\"tgus-project-card__year\">2026<\/span><\/div><p class=\"tgus-project-card__client\">Apple Travel<\/p><div class=\"tgus-project-card__divider\"><\/div><div class=\"tgus-project-card__stats\"><span class=\"tgus-view-btn\"><svg class=\"tgus-view-btn__icon\" viewBox=\"0 0 24 24\"><path d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z\"\/><\/svg><span class=\"tgus-view-btn__letters\"><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.00s\">V<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.08s\">i<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.16s\">e<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.24s\">w<\/span> <span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.32s\">c<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.40s\">a<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.48s\">s<\/span><span class=\"tgus-view-btn__letter\" style=\"animation-delay:0.56s\">e<\/span><\/span><\/span><span class=\"tgus-project-card__sep\"><\/span><span class=\"tgus-project-card__stat\">Duration: <b>20 weeks<\/b><\/span><\/div><\/div><\/a><\/div><div class=\"tgus-project-group\" data-group=\"web-design\"><\/div><div class=\"tgus-project-group\" data-group=\"marketing\"><\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    try{\r\n      var root = document.getElementById('tgus-cases-folders');\r\n      if(!root) return;\r\n      var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      var lines = root.querySelectorAll('.tgus-reveal-line');\r\n      if(reduceMotion || typeof gsap === 'undefined'){\r\n        lines.forEach(function(l){ l.style.backgroundPosition='0 0'; l.style.webkitTextFillColor='currentColor'; });\r\n      } else {\r\n        gsap.to(lines, { backgroundPosition:'-50% 0', duration:1.2, ease:'power3.out', stagger:0.15 });\r\n      }\r\n\r\n      var folderItems = Array.prototype.slice.call(root.querySelectorAll('.tgus-folder-item'));\r\n      var groups      = root.querySelectorAll('.tgus-project-group');\r\n      var emptyState  = document.getElementById('tgusCfEmpty');\r\n      var noMatchState= document.getElementById('tgusCfNoMatch');\r\n      var allCards    = root.querySelectorAll('.tgus-project-card');\r\n      var searchInput = document.getElementById('tgusCfSearch');\r\n      var dateSelect  = document.getElementById('tgusCfDateFilter');\r\n\r\n      var activeCategory = null;\r\n      var activeYear = 'all';\r\n      var searchQuery = '';\r\n      var searchDebounce;\r\n\r\n      function applyFilters(){\r\n        var visibleInActiveGroup = 0;\r\n        allCards.forEach(function(card){\r\n          var year = card.getAttribute('data-year');\r\n          var yearOk = activeYear === 'all' || year === activeYear;\r\n\r\n          var title = card.querySelector('.tgus-project-card__title');\r\n          var client = card.querySelector('.tgus-project-card__client');\r\n          var haystack = ((title ? title.textContent : '') + ' ' + (client ? client.textContent : '')).toLowerCase();\r\n          var searchOk = !searchQuery || haystack.indexOf(searchQuery) !== -1;\r\n\r\n          var hide = !yearOk || !searchOk;\r\n          card.classList.toggle('is-year-hidden', hide);\r\n\r\n          if(!hide){\r\n            var group = card.closest('.tgus-project-group');\r\n            if(group && group.getAttribute('data-group') === activeCategory) visibleInActiveGroup++;\r\n          }\r\n        });\r\n\r\n        noMatchState.classList.toggle('is-visible', !!activeCategory && visibleInActiveGroup === 0);\r\n      }\r\n\r\n      function render(){\r\n        folderItems.forEach(function(item){\r\n          var isMatch = item.getAttribute('data-category') === activeCategory;\r\n          item.classList.toggle('is-active', isMatch);\r\n          item.querySelector('.tgus-folder').classList.toggle('is-open', isMatch);\r\n          item.querySelector('.tgus-folder').setAttribute('aria-expanded', isMatch ? 'true' : 'false');\r\n        });\r\n        groups.forEach(function(g){\r\n          g.classList.toggle('is-active', g.getAttribute('data-group') === activeCategory);\r\n        });\r\n        emptyState.classList.toggle('is-visible', !activeCategory);\r\n        applyFilters();\r\n      }\r\n\r\n      folderItems.forEach(function(item){\r\n        var category = item.getAttribute('data-category');\r\n        var folder = item.querySelector('.tgus-folder');\r\n        function toggleFolder(){\r\n          activeCategory = (activeCategory === category) ? null : category;\r\n          render();\r\n        }\r\n        item.addEventListener('click', toggleFolder);\r\n        folder.addEventListener('keydown', function(e){\r\n          if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); toggleFolder(); }\r\n        });\r\n      });\r\n\r\n      searchInput.addEventListener('input', function(){\r\n        clearTimeout(searchDebounce);\r\n        var val = searchInput.value;\r\n        searchDebounce = setTimeout(function(){\r\n          searchQuery = val.trim().toLowerCase();\r\n          applyFilters();\r\n        }, 200);\r\n      });\r\n\r\n      dateSelect.addEventListener('change', function(){\r\n        activeYear = dateSelect.value;\r\n        applyFilters();\r\n      });\r\n\r\n      (function initDropdowns(){\r\n        var dds = Array.prototype.slice.call(root.querySelectorAll('[data-dd]'));\r\n        dds.forEach(function(dd){\r\n          var nativeSelect = dd.querySelector('.tgus-dd__native');\r\n          var trigger      = dd.querySelector('.tgus-dd__trigger');\r\n          var triggerLabel = dd.querySelector('.tgus-dd__trigger-label');\r\n          var panel        = dd.querySelector('.tgus-dd__panel');\r\n          var list         = dd.querySelector('.tgus-dd__list');\r\n          var hl           = dd.querySelector('.tgus-dd__hl');\r\n          var opts         = Array.prototype.slice.call(dd.querySelectorAll('.tgus-dd__opt'));\r\n          var activeIndex = -1;\r\n          var open = false;\r\n          var rowH = 36;\r\n\r\n          function selectedIndex(){\r\n            var val = nativeSelect.value;\r\n            for(var i=0;i<opts.length;i++){ if(opts[i].getAttribute('data-value') === val) return i; }\r\n            return -1;\r\n          }\r\n          function paint(){\r\n            var sel = selectedIndex();\r\n            opts.forEach(function(o,i){\r\n              o.classList.toggle('is-selected', i === sel);\r\n              o.classList.toggle('is-active', i === activeIndex);\r\n            });\r\n            if(activeIndex >= 0){\r\n              hl.style.opacity = '1';\r\n              hl.style.transform = 'translateY(' + (activeIndex*rowH) + 'px)';\r\n            } else {\r\n              hl.style.opacity = '0';\r\n            }\r\n          }\r\n          function setLabel(){\r\n            var sel = selectedIndex();\r\n            triggerLabel.textContent = sel >= 0 ? opts[sel].querySelector('.tgus-dd__opt-label').textContent : '';\r\n          }\r\n          function openMenu(){\r\n            if(open) return;\r\n            dds.forEach(function(other){ if(other !== dd) other.classList.remove('is-open'); });\r\n            open = true;\r\n            dd.classList.add('is-open');\r\n            trigger.setAttribute('aria-expanded','true');\r\n            activeIndex = selectedIndex() >= 0 ? selectedIndex() : 0;\r\n            paint();\r\n            list.focus({ preventScroll:true });\r\n          }\r\n          function closeMenu(restoreFocus){\r\n            if(!open) return;\r\n            open = false;\r\n            dd.classList.remove('is-open');\r\n            trigger.setAttribute('aria-expanded','false');\r\n            activeIndex = -1;\r\n            if(restoreFocus) trigger.focus();\r\n          }\r\n          function commit(index){\r\n            var opt = opts[index];\r\n            if(!opt) return;\r\n            var val = opt.getAttribute('data-value');\r\n            if(nativeSelect.value !== val){\r\n              nativeSelect.value = val;\r\n              nativeSelect.dispatchEvent(new Event('change', { bubbles:true }));\r\n            }\r\n            setLabel();\r\n            closeMenu(true);\r\n          }\r\n\r\n          trigger.addEventListener('click', function(){ open ? closeMenu(true) : openMenu(); });\r\n          trigger.addEventListener('keydown', function(e){\r\n            if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' '){\r\n              e.preventDefault(); openMenu();\r\n            }\r\n          });\r\n          opts.forEach(function(opt, i){\r\n            opt.addEventListener('mousemove', function(){ activeIndex = i; paint(); });\r\n            opt.addEventListener('click', function(){ commit(i); });\r\n          });\r\n          list.addEventListener('keydown', function(e){\r\n            if(e.key === 'ArrowDown' || e.key === 'ArrowUp'){\r\n              e.preventDefault();\r\n              var dir = e.key === 'ArrowDown' ? 1 : -1;\r\n              activeIndex = (activeIndex + dir + opts.length) % opts.length;\r\n              paint();\r\n            } else if(e.key === 'Home'){ e.preventDefault(); activeIndex = 0; paint(); }\r\n            else if(e.key === 'End'){ e.preventDefault(); activeIndex = opts.length-1; paint(); }\r\n            else if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); commit(activeIndex); }\r\n            else if(e.key === 'Escape' || e.key === 'Tab'){ e.preventDefault(); closeMenu(true); }\r\n          });\r\n          document.addEventListener('pointerdown', function(e){\r\n            if(open && !dd.contains(e.target)) closeMenu(false);\r\n          }, true);\r\n\r\n          setLabel();\r\n        });\r\n      })();\r\n\r\n      render();\r\n    }catch(err){\r\n      console.error('[tgus-cases-folders] error:', err);\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08b9c1c elementor-widget elementor-widget-html\" data-id=\"08b9c1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  TGUS SUCCESS CASES \u2014 13-cases-stats.html\r\n  Franja de m\u00e9tricas agregadas \u2014 4 stat cards (componente Uiverse.io\r\n  by Spacious74: borde con dot animado + rayo de luz + n\u00famero con\r\n  gradiente), adaptadas a la paleta #tgus- y en fila.\r\n  Prefijo CSS: #tgus-cases-stats\r\n  Pegar en widget HTML de Elementor (va despu\u00e9s de 12-cases-folders.html)\r\n\r\n  Los 4 n\u00fameros son placeholders \u2014 reemplazar por las cifras reales\r\n  de ToGrow (comentario \"STAT n\" en cada card).\r\n============================================================= -->\r\n<section id=\"tgus-cases-stats\">\r\n  <style>\r\n    #tgus-cases-stats{\r\n      --tgus-bg-0:#05050a;\r\n      --tgus-blue:#3b82f6;\r\n      --tgus-violet:#8b7cf6;\r\n      --tgus-cyan:#5ec8f2;\r\n      --tgus-font-display:'Bricolage Grotesque', sans-serif;\r\n      --tgus-font-body:'Plus Jakarta Sans', sans-serif;\r\n      background:var(--tgus-bg-0);\r\n      color:#f4f4f7;\r\n      font-family:var(--tgus-font-body);\r\n      padding:88px 24px 100px;\r\n      position:relative;\r\n      overflow:hidden;\r\n    }\r\n    #tgus-cases-stats *{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n    #tgus-cases-stats .tgus-cs__wrap{ max-width:1360px;margin:0 auto; }\r\n\r\n    #tgus-cases-stats .tgus-cs__head{\r\n      max-width:680px;\r\n      margin:0 auto 52px;\r\n      text-align:center;\r\n    }\r\n    #tgus-cases-stats h2.tgus-reveal{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:600;\r\n      font-size:clamp(28px,3.6vw,44px);\r\n      line-height:1.14;\r\n      letter-spacing:-0.02em;\r\n      padding-bottom:.15em;\r\n    }\r\n    #tgus-cases-stats .tgus-reveal-line{\r\n      display:block;\r\n      background-image:linear-gradient(90deg,#f4f4f7 0%,#f4f4f7 40%, rgba(244,244,247,.15) 55%, #f4f4f7 70%, #f4f4f7 100%);\r\n      background-size:250% 100%;\r\n      background-position:150% 0;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n    }\r\n    #tgus-cases-stats .tgus-grad-word{\r\n      background-image:linear-gradient(90deg,var(--tgus-blue),var(--tgus-violet),var(--tgus-cyan),var(--tgus-blue));\r\n      background-size:300% 100%;\r\n      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\r\n      animation:tgusCsGrad 6s linear infinite;\r\n      padding-bottom:.15em;\r\n    }\r\n    @keyframes tgusCsGrad{ to{ background-position:300% 0; } }\r\n    #tgus-cases-stats .tgus-cs__grid{\r\n      display:grid;\r\n      grid-template-columns:repeat(3, 1fr);\r\n      gap:24px;\r\n    }\r\n\r\n    #tgus-cases-stats .tgus-stat-outer{\r\n      width:100%;\r\n      aspect-ratio:6\/5;\r\n      border-radius:16px;\r\n      padding:1px;\r\n      background:radial-gradient(circle 260px at 0% 0%, rgba(139,124,246,.55), #0c0d14);\r\n      position:relative;\r\n    }\r\n    #tgus-cases-stats .tgus-stat-dot{\r\n      width:5px;aspect-ratio:1;position:absolute;\r\n      background-color:#fff;\r\n      box-shadow:0 0 10px #ffffff;\r\n      border-radius:100px;\r\n      z-index:2;\r\n      right:10%;top:10%;\r\n      animation:tgusStatMoveDot 6s linear infinite;\r\n    }\r\n    @keyframes tgusStatMoveDot{\r\n      0%,100%{ top:10%; right:10%; }\r\n      25%{ top:10%; right:calc(100% - 35px); }\r\n      50%{ top:calc(100% - 30px); right:calc(100% - 35px); }\r\n      75%{ top:calc(100% - 30px); right:10%; }\r\n    }\r\n    #tgus-cases-stats .tgus-stat-card{\r\n      z-index:1;\r\n      width:100%;height:100%;\r\n      border-radius:15px;\r\n      border:solid 1px rgba(139,124,246,.25);\r\n      background-size:20px 20px;\r\n      background:radial-gradient(circle 300px at 0% 0%, rgba(59,130,246,.28), #08080f);\r\n      display:flex;align-items:center;justify-content:center;\r\n      position:relative;flex-direction:column;\r\n      color:#fff;\r\n      overflow:hidden;\r\n    }\r\n    #tgus-cases-stats .tgus-stat-ray{\r\n      width:220px;height:45px;border-radius:100px;\r\n      position:absolute;\r\n      background-color:var(--tgus-cyan);\r\n      opacity:.35;\r\n      box-shadow:0 0 60px var(--tgus-cyan);\r\n      filter:blur(10px);\r\n      transform-origin:10%;\r\n      top:0%;left:0;\r\n      transform:rotate(40deg);\r\n    }\r\n    #tgus-cases-stats .tgus-stat-card .tgus-stat-text{\r\n      font-family:var(--tgus-font-display);\r\n      font-weight:800;\r\n      font-size:4.6rem;\r\n      background:linear-gradient(45deg, var(--tgus-blue) 4%, #fff, var(--tgus-cyan));\r\n      -webkit-background-clip:text;background-clip:text;color:transparent;\r\n      position:relative;z-index:1;\r\n    }\r\n    #tgus-cases-stats .tgus-stat-label{\r\n      position:relative;z-index:1;\r\n      font-size:16px;font-weight:600;color:#dcdce4;\r\n      margin-top:8px;\r\n    }\r\n    #tgus-cases-stats .tgus-stat-line{\r\n      width:100%;height:1px;position:absolute;background-color:rgba(139,124,246,.2);\r\n    }\r\n    #tgus-cases-stats .tgus-stat-line.topl{ top:14%;background:linear-gradient(90deg, var(--tgus-cyan) 30%, transparent 70%); }\r\n    #tgus-cases-stats .tgus-stat-line.bottoml{ bottom:14%; }\r\n    #tgus-cases-stats .tgus-stat-line.leftl{ left:12%;width:1px;height:100%;background:linear-gradient(180deg, var(--tgus-violet) 30%, transparent 70%); }\r\n    #tgus-cases-stats .tgus-stat-line.rightl{ right:12%;width:1px;height:100%; }\r\n\r\n    @media(prefers-reduced-motion:reduce){\r\n      #tgus-cases-stats .tgus-reveal-line,\r\n      #tgus-cases-stats .tgus-grad-word{ animation:none !important; background-position:0 0 !important; -webkit-text-fill-color:currentColor; }\r\n      #tgus-cases-stats .tgus-stat-dot{ animation:none;top:10%;right:10%; }\r\n    }\r\n\r\n    @media(max-width:900px){\r\n      #tgus-cases-stats .tgus-cs__grid{ grid-template-columns:1fr;gap:20px; }\r\n    }\r\n    @media(max-width:768px){\r\n      #tgus-cases-stats{ padding:64px 20px 72px; }\r\n      #tgus-cases-stats .tgus-cs__head{ margin-bottom:32px; }\r\n      #tgus-cases-stats .tgus-stat-card .tgus-stat-text{ font-size:3.2rem; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"tgus-cs__wrap\">\r\n    <div class=\"tgus-cs__head\">\r\n      <h2 class=\"tgus-reveal\">\r\n        <span class=\"tgus-reveal-line\">Numbers that back<\/span>\r\n        <span class=\"tgus-reveal-line\">the <span class=\"tgus-grad-word\">work<\/span><\/span>\r\n      <\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"tgus-cs__grid\">\r\n\r\n      <!-- STAT 1 -->\r\n      <div class=\"tgus-stat-outer\">\r\n        <div class=\"tgus-stat-dot\"><\/div>\r\n        <div class=\"tgus-stat-card\">\r\n          <div class=\"tgus-stat-ray\"><\/div>\r\n          <div class=\"tgus-stat-text\">40+<\/div>\r\n          <div class=\"tgus-stat-label\">Projects shipped<\/div>\r\n          <div class=\"tgus-stat-line topl\"><\/div>\r\n          <div class=\"tgus-stat-line leftl\"><\/div>\r\n          <div class=\"tgus-stat-line bottoml\"><\/div>\r\n          <div class=\"tgus-stat-line rightl\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- STAT 2 -->\r\n      <div class=\"tgus-stat-outer\">\r\n        <div class=\"tgus-stat-dot\"><\/div>\r\n        <div class=\"tgus-stat-card\">\r\n          <div class=\"tgus-stat-ray\"><\/div>\r\n          <div class=\"tgus-stat-text\">12<\/div>\r\n          <div class=\"tgus-stat-label\">Countries served<\/div>\r\n          <div class=\"tgus-stat-line topl\"><\/div>\r\n          <div class=\"tgus-stat-line leftl\"><\/div>\r\n          <div class=\"tgus-stat-line bottoml\"><\/div>\r\n          <div class=\"tgus-stat-line rightl\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- STAT 3 -->\r\n      <div class=\"tgus-stat-outer\">\r\n        <div class=\"tgus-stat-dot\"><\/div>\r\n        <div class=\"tgus-stat-card\">\r\n          <div class=\"tgus-stat-ray\"><\/div>\r\n          <div class=\"tgus-stat-text\">98%<\/div>\r\n          <div class=\"tgus-stat-label\">Client retention<\/div>\r\n          <div class=\"tgus-stat-line topl\"><\/div>\r\n          <div class=\"tgus-stat-line leftl\"><\/div>\r\n          <div class=\"tgus-stat-line bottoml\"><\/div>\r\n          <div class=\"tgus-stat-line rightl\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    try{\r\n      var root = document.getElementById('tgus-cases-stats');\r\n      if(!root) return;\r\n      var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n      var lines = root.querySelectorAll('.tgus-reveal-line');\r\n      if(reduceMotion || typeof gsap === 'undefined'){\r\n        lines.forEach(function(l){ l.style.backgroundPosition='0 0'; l.style.webkitTextFillColor='currentColor'; });\r\n        return;\r\n      }\r\n      gsap.to(lines, { backgroundPosition:'-50% 0', duration:1.2, ease:'power3.out', stagger:0.15 });\r\n    }catch(err){\r\n      console.error('[tgus-cases-stats] error:', err);\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2cd080c elementor-widget elementor-widget-html\" data-id=\"2cd080c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  TGUS SUCCESS CASES \u2014 14-cases-cta.html\r\n  CTA final, adaptado del componente de referencia (fondo con dot-grid +\r\n  glow ambient, botones glass estilo dexter-st, links relacionados).\r\n  Prefijo CSS: #tgus-finalcta-section (mismo prefijo del componente base,\r\n  no choca con #tgus-cases-* del resto de la p\u00e1gina)\r\n  Pegar en widget HTML de Elementor (va al final, despu\u00e9s de 13-cases-stats.html)\r\n\r\n  PENDIENTE:\r\n    - Reemplazar [LINK_WHATSAPP] y [LINK_CONTACT] por las URLs reales.\r\n============================================================= -->\r\n<section id=\"tgus-finalcta-section\" class=\"tgus-finalcta-section\">\r\n  <style>\r\n    #tgus-finalcta-section {\r\n      --tgus-bg-0: #05050a;\r\n      --tgus-bg-2: #15151f;\r\n      --tgus-blue: #3b82f6;\r\n      --tgus-blue-400: #3b82f6;\r\n      --tgus-blue-500: #2563eb;\r\n      --tgus-blue-600: #1d4ed8;\r\n      --tgus-violet: #8b7cf6;\r\n      --tgus-violet-d: #6d5ef0;\r\n      --tgus-cyan: #5ec8f2;\r\n      --tgus-cyan-300: #5ec8f2;\r\n      --tgus-text: #f4f4f8;\r\n      --tgus-text-dim: #9a9aa8;\r\n      --tgus-border: rgba(255,255,255,.08);\r\n      --tgus-ease: cubic-bezier(.16,1,.3,1);\r\n      --tgus-font-display: 'Bricolage Grotesque', system-ui, sans-serif;\r\n      --tgus-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;\r\n\r\n      position: relative;\r\n      background: var(--tgus-bg-0);\r\n      color: var(--tgus-text);\r\n      font-family: var(--tgus-font-body) !important;\r\n      padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);\r\n      overflow: hidden;\r\n      isolation: isolate;\r\n      min-width: 0;\r\n    }\r\n    #tgus-finalcta-section *, #tgus-finalcta-section *::before, #tgus-finalcta-section *::after { box-sizing: border-box; }\r\n\r\n    \/* section backdrop \u2014 faint dot-grid + one centered ambient glow,\r\n       same treatment used across the rest of the page *\/\r\n    #tgus-finalcta-grid {\r\n      position: absolute; inset: 0; z-index: 0;\r\n      background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.4px);\r\n      background-size: 26px 26px;\r\n      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);\r\n      mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);\r\n      pointer-events: none;\r\n    }\r\n    #tgus-finalcta-ambient {\r\n      position: absolute; inset: 0; z-index: 0;\r\n      pointer-events: none;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n    #tgus-finalcta-ambient span {\r\n      width: 58rem; height: 34rem;\r\n      border-radius: 50%;\r\n      background: radial-gradient(ellipse, rgba(37,99,235,.28) 0%, rgba(109,94,240,.14) 45%, transparent 75%);\r\n      filter: blur(28px);\r\n      animation: tgus-finalcta-drift 24s cubic-bezier(.16,1,.3,1) infinite alternate;\r\n    }\r\n    @keyframes tgus-finalcta-drift {\r\n      from { transform: translate(0, 0); }\r\n      to { transform: translate(-2rem, 1.5rem); }\r\n    }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      #tgus-finalcta-ambient span { animation: none !important; }\r\n    }\r\n\r\n    #tgus-finalcta-inner {\r\n      position: relative; z-index: 2;\r\n      max-width: 720px;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n    }\r\n\r\n    #tgus-finalcta-title {\r\n      font-family: var(--tgus-font-display) !important;\r\n      font-size: clamp(2rem, 4vw, 3rem) !important;\r\n      font-weight: 700 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -0.02em !important;\r\n      margin: 0 0 1.1rem !important;\r\n      color: var(--tgus-text) !important;\r\n      text-wrap: balance;\r\n    }\r\n    #tgus-finalcta-inner > p {\r\n      font-size: 1.05rem !important;\r\n      line-height: 1.65 !important;\r\n      color: var(--tgus-text-dim) !important;\r\n      margin: 0 auto clamp(2rem, 4vw, 2.5rem) !important;\r\n      max-width: 56ch;\r\n    }\r\n\r\n    \/* ================================================================\r\n       CTA BUTTONS \u2014 standard project button (Uiverse dexter-st glass\r\n       button, recolored to brand blue). Same component used across\r\n       the hero, dedicated-team, on-demand and other CTAs.\r\n       ================================================================ *\/\r\n    #tgus-finalcta-actions {\r\n      display: flex;\r\n      gap: .9rem;\r\n      justify-content: center;\r\n      flex-wrap: wrap;\r\n      margin-bottom: clamp(3rem, 6vw, 4.5rem);\r\n    }\r\n\r\n    .tgus-finalcta-btn {\r\n      --border-radius: 24px;\r\n      --padding: 4px;\r\n      --transition: .4s;\r\n\r\n      position: relative;\r\n      isolation: isolate;\r\n      user-select: none;\r\n      display: flex !important;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: .6rem;\r\n      padding: .9rem .9rem .9rem 1.5rem !important;\r\n      font-family: var(--tgus-font-body) !important;\r\n      font-size: .95rem !important;\r\n      font-weight: 600 !important;\r\n      text-decoration: none !important;\r\n      color: #fff !important;\r\n      border-radius: var(--border-radius);\r\n      cursor: pointer;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: transparent;\r\n      transition: box-shadow var(--transition), border var(--transition), background-image var(--transition), background-color var(--transition), transform var(--transition);\r\n    }\r\n    .tgus-finalcta-btn::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: calc(0px - var(--padding));\r\n      left: calc(0px - var(--padding));\r\n      width: calc(100% + var(--padding) * 2);\r\n      height: calc(100% + var(--padding) * 2);\r\n      border-radius: calc(var(--border-radius) + var(--padding));\r\n      pointer-events: none;\r\n      background-image: linear-gradient(0deg, #0004, #000a);\r\n      z-index: -1;\r\n      transition: box-shadow var(--transition), filter var(--transition);\r\n      box-shadow:\r\n        1px 1px 1px rgba(255,255,255,.12),\r\n        2px 2px 2px rgba(255,255,255,.06),\r\n        -1px -1px 1px rgba(0,0,0,.13),\r\n        -2px -2px 2px rgba(0,0,0,.06);\r\n    }\r\n    .tgus-finalcta-btn::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0; left: 0;\r\n      width: 100%; height: 100%;\r\n      border-radius: inherit;\r\n      pointer-events: none;\r\n      background-image: linear-gradient(0deg, #fff, var(--tgus-cyan-300), var(--tgus-blue-500) 50%, transparent 85%);\r\n      opacity: 0;\r\n      transition: opacity var(--transition), filter var(--transition);\r\n    }\r\n    .tgus-finalcta-btn:focus-visible {\r\n      outline: 2px solid var(--tgus-cyan-300);\r\n      outline-offset: 3px;\r\n    }\r\n    .tgus-finalcta-btn .tgus-btn-letters {\r\n      position: relative; z-index: 2;\r\n      color: rgba(255,255,255,.92);\r\n      text-shadow: 0 1px 1px rgba(0,0,0,.25);\r\n    }\r\n    .tgus-finalcta-btn svg {\r\n      position: relative; z-index: 2;\r\n      width: 16px; height: 16px;\r\n      flex-shrink: 0;\r\n      fill: none;\r\n      stroke: #fff;\r\n      stroke-width: 2;\r\n      filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));\r\n      transition: transform var(--transition);\r\n    }\r\n    .tgus-finalcta-btn:hover svg { transform: translateX(2px); }\r\n\r\n    \/* primary \u2014 filled blue gradient, same as the rest of the project *\/\r\n    .tgus-finalcta-btn.tgus-primary {\r\n      background-image: linear-gradient(180deg, var(--tgus-blue-400) 0%, var(--tgus-blue-600) 100%);\r\n      box-shadow:\r\n        inset 0px 1px 1px rgba(255,255,255,.45),\r\n        inset 0px 2px 3px rgba(255,255,255,.3),\r\n        inset 0px 4px 6px rgba(255,255,255,.15),\r\n        inset 0px 10px 14px rgba(255,255,255,.08),\r\n        0px -1px 1px rgba(0,0,0,.05),\r\n        0px -3px 4px rgba(0,0,0,.1),\r\n        0px -8px 14px rgba(0,0,0,.18),\r\n        0px 8px 20px -6px rgba(10,40,110,.55);\r\n      border: solid 1px rgba(255,255,255,.28) !important;\r\n    }\r\n    .tgus-finalcta-btn.tgus-primary:hover {\r\n      border-color: rgba(94,200,242,.5) !important;\r\n      background-image: linear-gradient(180deg, var(--tgus-cyan-300) 0%, var(--tgus-blue-500) 100%);\r\n      transform: translateY(-1px);\r\n    }\r\n    .tgus-finalcta-btn.tgus-primary:hover::after {\r\n      opacity: 1;\r\n      -webkit-mask-image: linear-gradient(0deg, #fff, transparent);\r\n      mask-image: linear-gradient(0deg, #fff, transparent);\r\n    }\r\n    .tgus-finalcta-btn.tgus-primary:active {\r\n      border-color: rgba(94,200,242,.7) !important;\r\n      background-image: linear-gradient(180deg, var(--tgus-blue-500) 0%, var(--tgus-blue-600) 100%);\r\n      transform: translateY(0) scale(.99);\r\n    }\r\n    .tgus-finalcta-btn.tgus-primary:active::after {\r\n      opacity: 1;\r\n      filter: brightness(200%);\r\n      -webkit-mask-image: linear-gradient(0deg, #fff, transparent);\r\n      mask-image: linear-gradient(0deg, #fff, transparent);\r\n    }\r\n\r\n    \/* ghost \u2014 same glass mechanics, neutral dark fill instead of the\r\n       blue gradient, so it reads as the secondary action *\/\r\n    .tgus-finalcta-btn.tgus-ghost {\r\n      background-color: #111219;\r\n      box-shadow:\r\n        inset 0px 1px 1px rgba(255,255,255,.16),\r\n        inset 0px 2px 3px rgba(255,255,255,.1),\r\n        inset 0px 4px 6px rgba(255,255,255,.05),\r\n        0px -1px 1px rgba(0,0,0,.05),\r\n        0px -3px 4px rgba(0,0,0,.1);\r\n      border: solid 1px var(--tgus-border) !important;\r\n    }\r\n    .tgus-finalcta-btn.tgus-ghost .tgus-btn-letters {\r\n      color: var(--tgus-text) !important;\r\n    }\r\n    .tgus-finalcta-btn.tgus-ghost:hover {\r\n      border-color: rgba(94,200,242,.4) !important;\r\n      background-color: #15161f;\r\n      transform: translateY(-1px);\r\n    }\r\n    .tgus-finalcta-btn.tgus-ghost:hover::after {\r\n      opacity: .5;\r\n      -webkit-mask-image: linear-gradient(0deg, #fff, transparent);\r\n      mask-image: linear-gradient(0deg, #fff, transparent);\r\n    }\r\n    .tgus-finalcta-btn.tgus-ghost:active {\r\n      transform: translateY(0) scale(.99);\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      #tgus-finalcta-actions { flex-direction: column; align-items: stretch; }\r\n      .tgus-finalcta-btn { justify-content: center; }\r\n    }\r\n  <\/style>\r\n\r\n  <div id=\"tgus-finalcta-grid\" aria-hidden=\"true\"><\/div>\r\n  <div id=\"tgus-finalcta-ambient\" aria-hidden=\"true\"><span><\/span><\/div>\r\n\r\n  <div id=\"tgus-finalcta-inner\">\r\n    <h2 id=\"tgus-finalcta-title\">Ready to be our next success story?<\/h2>\r\n    <p>From automation to full-scale software platforms \u2014 we'd love to hear about what you're building. Free consultation, no pressure, real answers about what it would take to get you results like these.<\/p>\r\n\r\n    <div id=\"tgus-finalcta-actions\">\r\n      <a class=\"tgus-finalcta-btn tgus-primary\" href=\"https:\/\/api.whatsapp.com\/send?phone=573103597580\" target=\"_blank\" rel=\"noopener\">\r\n        <span class=\"tgus-btn-letters\">Book a call<\/span>\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n      <\/a>\r\n      <a class=\"tgus-finalcta-btn tgus-ghost\" href=\"https:\/\/api.whatsapp.com\/send?phone=573103597580\" target=\"_blank\" rel=\"noopener\">\r\n        <span class=\"tgus-btn-letters\">Request a quote<\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>All cases Software development Web design Digital marketing Trusted by growing businesses From local shops to multi-country operations \u2014 teams that trusted us to build, automate and grow their digital presence. [CONTENIDO DE PRUEBA] Browse by category Open a folder to see every project we&#8217;ve shipped in that area. Automation projects Software development projects Web [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-538","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/pages\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":112,"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/pages\/538\/revisions"}],"predecessor-version":[{"id":1292,"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/pages\/538\/revisions\/1292"}],"wp:attachment":[{"href":"https:\/\/togrowagencia.com\/en\/wp-json\/wp\/v2\/media?parent=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}