{"id":5044,"date":"2026-07-08T01:07:48","date_gmt":"2026-07-08T01:07:48","guid":{"rendered":"https:\/\/openboxdigital.com\/?page_id=5044"},"modified":"2026-07-09T13:02:19","modified_gmt":"2026-07-09T13:02:19","slug":"inicio","status":"publish","type":"page","link":"https:\/\/openboxdigital.com\/","title":{"rendered":"Inicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5044\" class=\"elementor elementor-5044\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60beb075 e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"60beb075\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Diseno-sin-titulo-27.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_privacy_mode&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-114daf7e e-con-full e-flex e-con e-child\" data-id=\"114daf7e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b1d2ab1 elementor-widget elementor-widget-html\" data-id=\"4b1d2ab1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 T\u00cdTULO PRINCIPAL + PALABRA QUE CAMBIA\r\n     (WIDGET INDEPENDIENTE \u2014 pegar en un widget HTML de Elementor)\r\n     \u2705 T\u00edtulo en Bricolage Grotesque 800\r\n     \u2705 Segunda l\u00ednea con gradiente celeste\u2192verde que rota entre frases\r\n     \u2705 Entrada animada (fade + subida) al cargar\r\n     \u2705 min-height en la l\u00ednea rotativa \u2192 NO salta el layout al cambiar\r\n     \u2705 En celular: \"Tu marca puede\" \/ \"ser el pr\u00f3ximo\" en dos l\u00edneas\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar las frases: edit\u00e1 el array \"words\" en el JS.\r\n     Para cambiar la velocidad: HOLD (ms visible) y FADE (ms de transici\u00f3n).\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-rotate\">\r\n  <div class=\"obd-title obd-rise obd-d1\">Tu marca puede <br class=\"obd-br-m\">ser el pr\u00f3ximo<\/div>\r\n  <div class=\"obd-line obd-rise obd-d2\"><span class=\"obd-swap\">negocio imparable<\/span><\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-rotate{\r\n    line-height:1.06;\r\n    font-family:'Bricolage Grotesque',sans-serif;\r\n    letter-spacing:-.02em;\r\n    text-align:center;\r\n  }\r\n  .obd-title{\r\n    font-size: 65px !important;\r\n    font-weight:800; color:#f4f3f7;\r\n  }\r\n  .obd-line{\r\n    margin-top:6px;\r\n    font-size:65px !important;\r\n    font-weight:800;\r\n    min-height:1.15em;   \/* reserva el alto \u2192 el layout no salta al cambiar la palabra *\/\r\n  }\r\n  .obd-swap{\r\n    display:inline-block;\r\n    background:linear-gradient(110deg,#2dc1e5,#5ad6f5 50%,#7df0d0);\r\n    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;\r\n    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .obd-swap.obd-out{ opacity:0; transform:translateY(10px); }\r\n\r\n  \/* Salto de l\u00ednea solo en celular (oculto en desktop; el espacio antes\r\n     del <br> mantiene la separaci\u00f3n entre \"puede\" y \"ser\" en pantallas grandes) *\/\r\n  .obd-br-m{ display:none; }\r\n  @media (max-width:600px){\r\n    .obd-br-m{ display:inline; }\r\n  }\r\n\r\n  \/* ---- Entrada animada al cargar ---- *\/\r\n  .obd-rise{ opacity:0; transform:translateY(22px);\r\n    animation:obdRise .8s cubic-bezier(.16,1,.3,1) forwards; }\r\n  .obd-d1{ animation-delay:.16s; }\r\n  .obd-d2{ animation-delay:.27s; }\r\n  @keyframes obdRise{ to{ opacity:1; transform:none; } }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-rise{ opacity:1; transform:none; animation:none; }\r\n    .obd-swap{ transition:none; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  \/* Frases que rotan en la segunda l\u00ednea. Agreg\u00e1 o sac\u00e1 las que quieras. *\/\r\n  var words = [\"negocio imparable\",\"producto de moda\",\"lanzamiento exitoso\",\"caso de \u00e9xito\"];\r\n  var HOLD = 2600;   \/* ms que cada frase queda visible *\/\r\n  var FADE = 350;    \/* ms de la transici\u00f3n de salida\/entrada (igualar al CSS) *\/\r\n\r\n  function startSwap(scope) {\r\n    var el = (scope || document).querySelector(\".obd-swap\");\r\n    if (!el || el.dataset.swStarted === \"1\") return;\r\n    el.dataset.swStarted = \"1\";\r\n    var i = 0;\r\n    el.textContent = words[0];\r\n    setInterval(function () {\r\n      el.classList.add(\"obd-out\");\r\n      setTimeout(function () {\r\n        i = (i + 1) % words.length;\r\n        el.textContent = words[i];\r\n        el.classList.remove(\"obd-out\");\r\n      }, FADE);\r\n    }, HOLD);\r\n  }\r\n\r\n  \/* ---------- Arranque (normal + editor Elementor) ---------- *\/\r\n  function boot(root) {\r\n    (root || document).querySelectorAll(\".obd-rotate\").forEach(function (r) { startSwap(r); });\r\n  }\r\n  boot(document);\r\n\r\n  if (window.jQuery && window.elementorFrontend) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function ($scope) {\r\n        boot($scope[0]);\r\n      });\r\n    });\r\n  }\r\n  setTimeout(function () { boot(document); }, 800);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-732aa1d8 elementor-widget elementor-widget-spacer\" data-id=\"732aa1d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-452f29fe elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"452f29fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Nosotros\u00a0<b>dise\u00f1amos, mantenemos y escalamos<\/b> tu sitio.<br \/>Vos solo te ocup\u00e1s de vender \u2014 <b>sin armar nada.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a18f73 elementor-widget elementor-widget-spacer\" data-id=\"8a18f73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a6a6a9d elementor-widget elementor-widget-html\" data-id=\"2a6a6a9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BOTONES CTA (WIDGET INDEPENDIENTE)\r\n     Pegar en un widget HTML de Elementor. No necesita JS.\r\n     \u2705 Bot\u00f3n primario con gradiente + borde giratorio (conic)\r\n     \u2705 Bot\u00f3n ghost con borde giratorio propio\r\n     \u2705 Mismo ancho ambos, apilan bien en m\u00f3vil\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar los destinos: edit\u00e1 los href=\"#planes\".\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-cta\">\r\n  <a class=\"obd-btn obd-btn-primary\" href=\"#planes\">Soluciones para tu rubro<\/a>\r\n  <a class=\"obd-btn obd-btn-ghost\" href=\"#planes\">Ver nuestros planes<\/a>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;\r\n    font-family:'Manrope',sans-serif; }\r\n\r\n  .obd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n    min-width:min(260px, 100%);                 \/* ambos botones al mismo ancho *\/\r\n    padding:13px 26px; border-radius:100px;\r\n    font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; text-decoration:none;\r\n    box-sizing:border-box;\r\n    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, color .3s; }\r\n\r\n  .obd-btn-primary,\r\n  .obd-btn-primary:link,\r\n  .obd-btn-primary:visited{ background:linear-gradient(135deg,#2dc1e5,#5ad6f5); color:#fff !important;\r\n    box-shadow:0 8px 30px rgba(45,193,229,.4); }\r\n  .obd-btn-primary:hover,\r\n  .obd-btn-primary:focus-visible{ color:#fff !important; transform:translateY(-2px);\r\n    box-shadow:0 14px 44px rgba(45,193,229,.55); }\r\n\r\n  .obd-btn-ghost,\r\n  .obd-btn-ghost:link,\r\n  .obd-btn-ghost:visited{ background:rgba(255,255,255,.05); color:#fff !important;\r\n    border:1px solid rgba(255,255,255,.18); }\r\n  .obd-btn-ghost:hover,\r\n  .obd-btn-ghost:focus-visible{ color:#fff !important; border-color:#2dc1e5;\r\n    background:rgba(45,193,229,.10); transform:translateY(-2px); }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n primario ---- *\/\r\n  @property --obd-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-primary{ position:relative; }\r\n  .obd-btn-primary::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a),\r\n      transparent 0deg, #7df0d0 40deg, #eafff8 72deg, #5ad6f5 104deg, transparent 165deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin 4.5s linear infinite; opacity:.7; pointer-events:none; }\r\n  @keyframes obdBorderSpin{ to{ --obd-a:360deg; } }\r\n  .obd-btn-primary:hover::before,\r\n  .obd-btn-primary:focus-visible::before{ opacity:1; animation-duration:1.5s; }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n ghost ---- *\/\r\n  @property --obd-a2{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-ghost{ position:relative; }\r\n  .obd-btn-ghost::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a2),\r\n      transparent 0deg, #5b3df0 40deg, #2dc1e5 80deg, #7df0d0 115deg, transparent 175deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin2 5s linear infinite; opacity:.6; pointer-events:none; }\r\n  @keyframes obdBorderSpin2{ to{ --obd-a2:360deg; } }\r\n  .obd-btn-ghost:hover::before,\r\n  .obd-btn-ghost:focus-visible::before{ opacity:1; animation-duration:1.7s; }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-btn-primary::before{ animation:none; }\r\n    .obd-btn-ghost::before{ animation:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71954bcd elementor-widget elementor-widget-spacer\" data-id=\"71954bcd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34859f6b elementor-widget elementor-widget-html\" data-id=\"34859f6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BANDA DE PALABRAS QUE EXPLOTAN \u2014 v3.1\r\n     (WIDGET INDEPENDIENTE \u2014 pegar en un widget HTML de Elementor)\r\n     Reemplazo directo de la v3 (mismas clases .obd-band).\r\n\r\n     NUEVO EN v3.1:\r\n     \u2705 MULTI-INSTANCIA: se puede pegar en VARIOS widgets de la misma\r\n        p\u00e1gina y todas las bandas funcionan (antes solo arrancaba la\r\n        primera: querySelector devolv\u00eda siempre la misma banda).\r\n\r\n     SE MANTIENE DE v3:\r\n     \u2705 HOVER CON F\u00cdSICA: el cursor empuja las part\u00edculas con inercia\r\n        y vuelven a su lugar con efecto resorte. Funciona con touch.\r\n     \u2705 EXPLOSI\u00d3N EN OLA: desintegraci\u00f3n de izquierda a derecha con\r\n        rotaci\u00f3n individual por part\u00edcula. Ocurre ANTES en el scroll\r\n        (rango configurable: EXPLODE_START \/ EXPLODE_END).\r\n     \u2705 GLOW ADITIVO: blending 'lighter' \u2192 pensado para FONDO OSCURO;\r\n        sobre fondo claro pon\u00e9 GLOW = false en el JS.\r\n     \u2705 GRADIENTE ANIMADO: el color fluye por el texto\r\n        (cian \u2192 aqua \u2192 menta \u2192 lila) + destellos blancos.\r\n     \u2705 MARQUEE REACTIVO: acelera al bajar, frena\/retrocede al subir.\r\n     \u2705 AHORRO CPU\/BATER\u00cdA: render pausado fuera del viewport y con\r\n        la pesta\u00f1a oculta. prefers-reduced-motion \u2192 frame est\u00e1tico.\r\n     \u2705 FONDO: degradado transparente \u2192 #030E16 s\u00f3lido abajo.\r\n     \u2705 Canvas ABSOLUTO dentro del widget (scrollea nativo, cero lag).\r\n     \u2705 FIX M\u00d3VIL: resize de solo-alto (barra del navegador) se ignora.\r\n\r\n     \u26a0\ufe0f REQUISITOS EN ELEMENTOR:\r\n       - Overflow en \"Default\" (NUNCA Hidden) en la secci\u00f3n y\r\n         contenedores que envuelvan este widget.\r\n       - Si al explotar las part\u00edculas quedan TAPADAS por la secci\u00f3n\r\n         siguiente, pon\u00e9 Z-Index alto (ej: 10) en el contenedor del\r\n         hero (Advanced \u2192 Z-Index).\r\n     Para cambiar las palabras: array WORDS en el JS + span .obd-band-sr.\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-band\">\r\n  <canvas class=\"obd-band-cv\" aria-hidden=\"true\"><\/canvas>\r\n  <span class=\"obd-band-sr\">dise\u00f1o \u00b7 innovaci\u00f3n \u00b7 inspiraci\u00f3n \u00b7 impacto<\/span>\r\n<\/div>\r\n\r\n<style>\r\n  html{ overflow-x:clip; }   \/* recorta el sobrante horizontal del canvas full-bleed sin romper sticky *\/\r\n\r\n  .obd-band{\r\n    position:relative; z-index:2;\r\n    width:100%;\r\n    height:clamp(120px, 17vh, 180px);\r\n    background:linear-gradient(180deg, rgba(3,14,22,0) 0%, #030E16 100%);\r\n    overflow:visible;\r\n  }\r\n  \/* Canvas ABSOLUTO centrado en la banda: se mueve con el documento\r\n     (lo posiciona el compositor del navegador, no el JS) \u2192 no flota. *\/\r\n  .obd-band-cv{\r\n    position:absolute; left:50%; top:50%;\r\n    transform:translate(-50%,-50%);\r\n    pointer-events:none; z-index:5;\r\n  }\r\n  .obd-band-sr{ position:absolute; width:1px; height:1px; overflow:hidden;\r\n    clip:rect(0 0 0 0); white-space:nowrap; }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* Inicializa UNA banda concreta (host). Cada banda tiene su propio\r\n     estado en este closure, as\u00ed varias copias conviven sin pisarse. *\/\r\n  function initBand(host) {\r\n    if (!host || host.dataset.init === '1') return;\r\n    var cv = host.querySelector('.obd-band-cv');\r\n    if (!cv) return;\r\n    host.dataset.init = '1';\r\n\r\n    \/* limpio el overlay viejo de versiones anteriores si qued\u00f3 colgado del body *\/\r\n    var prev = document.querySelector('body > canvas.obd-band-cv');\r\n    if (prev) prev.remove();\r\n\r\n    var ctx = cv.getContext('2d');\r\n    var DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n\r\n    \/* ================= CONFIG ================= *\/\r\n    var WORDS  = ['dise\u00f1o', 'innovaci\u00f3n', 'inspiraci\u00f3n', 'impacto'];\r\n    var SEP    = '  \u2022  ';\r\n    var TEXT   = WORDS.join(SEP) + SEP;\r\n    \/* paradas del gradiente que fluye por el texto (RGB) *\/\r\n    var STOPS  = [[70,195,255], [125,235,245], [150,245,205], [185,175,255]];\r\n    var GLOW   = true;   \/* blending aditivo: ideal fondo oscuro. Fondo claro \u2192 false *\/\r\n    var BASE_SPEED = 0.55, BASE_SPEED_M = 0.38;\r\n    \/* Rango de la explosi\u00f3n, en fracci\u00f3n del alto del viewport (posici\u00f3n del\r\n       CENTRO de la banda). Empieza al subir del 80% y termina al 5% (antes de\r\n       salir por arriba). M\u00e1s grande START = explota antes. *\/\r\n    var EXPLODE_START = 0.80, EXPLODE_END = 0.05;\r\n    \/* ========================================== *\/\r\n\r\n    var parts = [], OW = 0, bandH = 0, bandW = 0, cw = 0, ch = 0;\r\n    var scrollX = 0, raf = 0, running = false, inView = true, started = false;\r\n    var e = 0, t = 0, boost = 0, lastY = window.pageYOffset || 0;\r\n    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    function mob() { return window.innerWidth < 768; }\r\n\r\n    \/* --- puntero (mouse \/ touch \/ l\u00e1piz) en coordenadas de viewport --- *\/\r\n    var ptr = { x: -9999, y: -9999, on: false };\r\n    var HR = mob() ? 75 : 100, HR2 = HR * HR, FORCE = 1.7;\r\n    window.addEventListener('pointermove', function (ev) {\r\n      ptr.x = ev.clientX; ptr.y = ev.clientY; ptr.on = true;\r\n    }, { passive: true });\r\n    window.addEventListener('pointerout', function (ev) {\r\n      if (!ev.relatedTarget) ptr.on = false;\r\n    }, { passive: true });\r\n\r\n    \/* --- velocidad de scroll \u2192 empuje del marquee --- *\/\r\n    window.addEventListener('scroll', function () {\r\n      var y = window.pageYOffset || 0;\r\n      boost += (y - lastY) * 0.028;\r\n      lastY = y;\r\n    }, { passive: true });\r\n\r\n    function vpad() { return mob() ? 190 : 320; }\r\n\r\n    function sizeCanvas() {\r\n      \/* Ancho = viewport visible. Alto = banda + espacio de explosi\u00f3n en\r\n         PX FIJOS \u2192 la barra del navegador m\u00f3vil no afecta nada. *\/\r\n      bandH = host.clientHeight;\r\n      bandW = host.clientWidth;\r\n      cw = document.documentElement.clientWidth;\r\n      ch = Math.ceil(bandH + 2 * (vpad() * 0.9 + 60));\r\n      cv.style.width = cw + 'px';\r\n      cv.style.height = ch + 'px';\r\n      cv.width = Math.round(cw * DPR);\r\n      cv.height = Math.round(ch * DPR);\r\n    }\r\n\r\n    function buildParticles() {\r\n      var VPAD = vpad();\r\n      var fontPx = Math.round(bandH * 0.52);\r\n      var step = mob() ? 5 : 4;\r\n\r\n      var off = document.createElement('canvas');\r\n      var octx = off.getContext('2d');\r\n      octx.font = \"800 \" + fontPx + \"px 'Bricolage Grotesque', sans-serif\";\r\n      OW = Math.ceil(octx.measureText(TEXT).width);\r\n      if (OW < 4 || bandH < 4) return;\r\n      off.width = Math.ceil(OW * DPR);\r\n      off.height = Math.ceil(bandH * DPR);\r\n      octx.scale(DPR, DPR);\r\n      octx.font = \"800 \" + fontPx + \"px 'Bricolage Grotesque', sans-serif\";\r\n      octx.textBaseline = 'middle';\r\n      octx.fillStyle = '#fff';\r\n      octx.fillText(TEXT, 0, bandH \/ 2);\r\n\r\n      var img = octx.getImageData(0, 0, off.width, off.height).data;\r\n      parts = [];\r\n      for (var y = 0; y < bandH; y += step) {\r\n        for (var x = 0; x < OW; x += step) {\r\n          var px = Math.floor(x * DPR), py = Math.floor(y * DPR);\r\n          var a = img[(py * off.width + px) * 4 + 3];\r\n          if (a > 110) {\r\n            var ang = Math.random() * Math.PI * 2;\r\n            parts.push({\r\n              xb: x, yb: y,                                            \/* posici\u00f3n en reposo (local a la banda) *\/\r\n              dx: Math.cos(ang) * (40 + Math.random() * bandW * 0.55), \/* destino de explosi\u00f3n *\/\r\n              dy: Math.sin(ang) * (Math.random() * VPAD * 0.9),\r\n              dl: (x \/ OW) * 0.22 + Math.random() * 0.06,              \/* retraso \u2192 ola izq\u2192der *\/\r\n              spin: Math.random() * 2.4 - 1.2,                         \/* rotaci\u00f3n del trayecto *\/\r\n              ph: Math.random() * 6.283,\r\n              ci: (x \/ OW * 64) | 0,                                   \/* \u00edndice en el gradiente *\/\r\n              sp: Math.random() < 0.03,                                \/* destello *\/\r\n              ox: 0, oy: 0, ovx: 0, ovy: 0                             \/* f\u00edsica del hover *\/\r\n            });\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    \/* gradiente animado: LUT de 64 colores que deriva con el tiempo *\/\r\n    var LUT = [];\r\n    function buildLUT() {\r\n      var n = STOPS.length;\r\n      for (var i = 0; i < 64; i++) {\r\n        var u = (i \/ 64 + t * 0.03) % 1;\r\n        var f = u * n, j = (f | 0) % n, k = (j + 1) % n, m = f - (f | 0);\r\n        var A = STOPS[j], B = STOPS[k];\r\n        LUT[i] = [A[0] + (B[0] - A[0]) * m, A[1] + (B[1] - A[1]) * m, A[2] + (B[2] - A[2]) * m];\r\n      }\r\n    }\r\n\r\n    function computeE(hostTop, hostH) {\r\n      var vhh = window.innerHeight || 800;\r\n      var center = hostTop + hostH \/ 2;\r\n      var START = vhh * EXPLODE_START, END = vhh * EXPLODE_END;\r\n      var v = (START - center) \/ (START - END);\r\n      e = v < 0 ? 0 : (v > 1 ? 1 : v);\r\n    }\r\n\r\n    function frame() {\r\n      raf = 0;\r\n      t += 0.016;\r\n\r\n      \/* Rects del MISMO frame: su diferencia es estable aunque el scroll\r\n         vaya un frame adelantado \u2192 sin deriva. *\/\r\n      var hostR = host.getBoundingClientRect();\r\n      var vhh = window.innerHeight || 800;\r\n      var pad = 420;\r\n      if (hostR.bottom < -pad || hostR.top > vhh + pad) { schedule(); return; }\r\n      var cvR = cv.getBoundingClientRect();\r\n\r\n      if (reduced) { e = 0; } else { computeE(hostR.top, hostR.height); }\r\n\r\n      boost = Math.max(-7, Math.min(10, boost)) * 0.9;\r\n      if (!reduced) scrollX += (mob() ? BASE_SPEED_M : BASE_SPEED) + boost;\r\n      if (OW > 0) { scrollX %= OW; if (scrollX < 0) scrollX += OW; }\r\n\r\n      buildLUT();\r\n\r\n      \/* f\u00edsica del empuje del cursor: se integra UNA vez por frame *\/\r\n      for (var i = 0; i < parts.length; i++) {\r\n        var p = parts[i];\r\n        if (p.ox || p.oy || p.ovx || p.ovy) {\r\n          p.ox += p.ovx; p.oy += p.ovy;\r\n          p.ovx = p.ovx * 0.86 - p.ox * 0.055;   \/* fricci\u00f3n + resorte al origen *\/\r\n          p.ovy = p.ovy * 0.86 - p.oy * 0.055;\r\n          if (p.ox * p.ox + p.oy * p.oy < 0.01 && p.ovx * p.ovx + p.ovy * p.ovy < 0.01) {\r\n            p.ox = p.oy = p.ovx = p.ovy = 0;\r\n          }\r\n        }\r\n      }\r\n\r\n      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\r\n      ctx.globalCompositeOperation = 'source-over';\r\n      ctx.clearRect(0, 0, cw, ch);\r\n      if (GLOW) ctx.globalCompositeOperation = 'lighter';\r\n\r\n      var leftEdge = hostR.left - cvR.left;   \/* banda en coords locales del canvas *\/\r\n      var topEdge = hostR.top - cvR.top;\r\n      var mx = ptr.x - cvR.left, my = ptr.y - cvR.top;\r\n      var fadeW = bandW * 0.12;\r\n\r\n      var ease = e * e * (3 - 2 * e);\r\n      var hoverOn = ptr.on && ease < 0.6 && !reduced;\r\n\r\n      \/* aura suave alrededor del cursor *\/\r\n      if (hoverOn && mx > leftEdge - HR && mx < leftEdge + bandW + HR &&\r\n          my > topEdge - HR && my < topEdge + bandH + HR) {\r\n        var au = ctx.createRadialGradient(mx, my, 0, mx, my, HR * 1.5);\r\n        au.addColorStop(0, 'rgba(120,220,255,0.10)');\r\n        au.addColorStop(1, 'rgba(120,220,255,0)');\r\n        ctx.fillStyle = au;\r\n        ctx.fillRect(mx - HR * 1.5, my - HR * 1.5, HR * 3, HR * 3);\r\n      }\r\n\r\n      var copies = Math.ceil(cw \/ OW) + 2;\r\n\r\n      for (var k = -1; k < copies; k++) {\r\n        var baseX = leftEdge - scrollX + k * OW;\r\n        if (baseX + OW < leftEdge - 60 || baseX > leftEdge + bandW + 60) continue;\r\n\r\n        for (var i2 = 0; i2 < parts.length; i2++) {\r\n          var q = parts[i2];\r\n          var tw = Math.sin(t * 2 + q.ph) * 0.5 + 0.5;\r\n\r\n          \/* progreso individual: ola izq\u2192der con retraso por part\u00edcula *\/\r\n          var pe = 0;\r\n          if (ease > q.dl) {\r\n            pe = (ease - q.dl) \/ (1 - q.dl);\r\n            if (pe > 1) pe = 1;\r\n            pe = pe * pe * (3 - 2 * pe);\r\n          }\r\n\r\n          var exx = q.xb, eyy = q.yb;\r\n          if (pe > 0) {\r\n            \/* el vector de explosi\u00f3n rota mientras avanza \u2192 trayecto en espiral *\/\r\n            var an = q.spin * pe, cs = Math.cos(an), sn = Math.sin(an);\r\n            var ddx = q.dx * pe, ddy = q.dy * pe;\r\n            exx += ddx * cs - ddy * sn;\r\n            eyy += ddx * sn + ddy * cs;\r\n          }\r\n\r\n          var x = baseX + exx + q.ox;\r\n          var relX = x - leftEdge;\r\n          if (relX < -40 || relX > bandW + 40) continue;\r\n          var y = topEdge + eyy + q.oy;\r\n          if (y < -40 || y > ch + 40) continue;\r\n\r\n          var alpha = Math.pow(1 - pe, 0.55) * (0.55 + 0.35 * tw);\r\n          if (relX < fadeW) alpha *= Math.max(0, relX \/ fadeW);\r\n          else if (relX > bandW - fadeW) alpha *= Math.max(0, (bandW - relX) \/ fadeW);\r\n          if (alpha <= 0.02) continue;\r\n\r\n          var col = LUT[q.ci & 63];\r\n          var r = col[0], g = col[1], b = col[2];\r\n          var s = 1.6 + tw * 0.8;\r\n\r\n          if (q.sp) {   \/* destellos: pulso blanco *\/\r\n            var fz = tw * tw;\r\n            s += fz * 1.6;\r\n            r += (255 - r) * fz; g += (255 - g) * fz; b += (255 - b) * fz;\r\n            alpha = Math.min(1, alpha + fz * 0.35);\r\n          }\r\n\r\n          \/* HOVER F\u00cdSICO: el cursor empuja (impulso) + brillo\/tama\u00f1o al pasar *\/\r\n          if (hoverOn) {\r\n            var hx = x - mx, hy = y - my, d2 = hx * hx + hy * hy;\r\n            if (d2 < HR2) {\r\n              var d = Math.sqrt(d2) || 1, f = 1 - d \/ HR;\r\n              q.ovx += (hx \/ d) * f * FORCE;\r\n              q.ovy += (hy \/ d) * f * FORCE;\r\n              alpha = Math.min(1, alpha + f * 0.65);\r\n              s += f * 2.2;\r\n              r += (255 - r) * f * 0.75;\r\n              g += (255 - g) * f * 0.75;\r\n              b += (255 - b) * f * 0.75;\r\n            }\r\n          }\r\n\r\n          ctx.fillStyle = 'rgba(' + (r | 0) + ',' + (g | 0) + ',' + (b | 0) + ',' + alpha.toFixed(3) + ')';\r\n          ctx.fillRect(x, y, s, s);\r\n        }\r\n      }\r\n\r\n      if (reduced) return;   \/* con reduced-motion: un solo frame est\u00e1tico *\/\r\n      schedule();\r\n    }\r\n\r\n    function schedule() { if (running && !raf) raf = requestAnimationFrame(frame); }\r\n\r\n    function setRunning() {\r\n      var should = started && inView && !document.hidden && !reduced;\r\n      if (should === running) return;\r\n      running = should;\r\n      if (running) { schedule(); }\r\n      else if (raf) { cancelAnimationFrame(raf); raf = 0; }\r\n    }\r\n\r\n    \/* pausa total fuera del viewport y con pesta\u00f1a oculta *\/\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (en) {\r\n        inView = en[0].isIntersecting;\r\n        setRunning();\r\n      }, { rootMargin: '500px 0px' }).observe(host);\r\n    }\r\n    document.addEventListener('visibilitychange', setRunning);\r\n\r\n    function startBand() {\r\n      sizeCanvas();\r\n      buildParticles();\r\n      started = true;\r\n      if (reduced) { frame(); return; }\r\n      setRunning();\r\n    }\r\n\r\n    var kicked = false;\r\n    function kick() { if (kicked) return; kicked = true; startBand(); }\r\n    if (document.fonts && document.fonts.load) {\r\n      document.fonts.load(\"800 40px 'Bricolage Grotesque'\").then(kick).catch(kick);\r\n      setTimeout(kick, 900);\r\n      \/* si arranc\u00f3 con la fuente fallback, rearma cuando la real est\u00e9 lista *\/\r\n      document.fonts.ready.then(function () {\r\n        if (!kicked) return;\r\n        sizeCanvas(); buildParticles();\r\n        if (reduced) frame();\r\n      });\r\n    } else {\r\n      kick();\r\n    }\r\n\r\n    \/* FIX M\u00d3VIL: solo rearmo si cambi\u00f3 el ANCHO (rotaci\u00f3n o resize real).\r\n       La barra del navegador solo cambia el ALTO \u2192 se ignora. *\/\r\n    var rzb, lastBandW = document.documentElement.clientWidth;\r\n    window.addEventListener('resize', function () {\r\n      clearTimeout(rzb);\r\n      rzb = setTimeout(function () {\r\n        var w = document.documentElement.clientWidth;\r\n        if (w === lastBandW || !kicked) return;\r\n        lastBandW = w;\r\n        sizeCanvas();\r\n        buildParticles();\r\n        if (reduced) frame();\r\n      }, 200);\r\n    });\r\n  }\r\n\r\n  \/* ---------- Arranque (normal + editor Elementor) ----------\r\n     querySelectorAll: inicializa TODAS las bandas de la p\u00e1gina que\r\n     a\u00fan no arrancaron (permite varios widgets con este mismo c\u00f3digo). *\/\r\n  function boot(root) {\r\n    var list = (root || document).querySelectorAll('.obd-band');\r\n    for (var i = 0; i < list.length; i++) initBand(list[i]);\r\n    \/* si el root es la propia banda (scope del editor de Elementor) *\/\r\n    if (root && root.classList && root.classList.contains('obd-band')) initBand(root);\r\n  }\r\n  boot(document);\r\n\r\n  if (window.jQuery && window.elementorFrontend) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function ($scope) {\r\n        boot($scope[0]);\r\n      });\r\n    });\r\n  }\r\n  setTimeout(function () { boot(document); }, 800);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33131c84 e-con-full elementor-hidden-desktop e-flex e-con e-parent\" data-id=\"33131c84\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Copia-de-Diseno-sin-titulo.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_privacy_mode&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-59b0d315 e-con-full e-flex e-con e-child\" data-id=\"59b0d315\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7204e131 elementor-widget elementor-widget-html\" data-id=\"7204e131\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 T\u00cdTULO PRINCIPAL + PALABRA QUE CAMBIA\r\n     (WIDGET INDEPENDIENTE \u2014 pegar en un widget HTML de Elementor)\r\n     \u2705 T\u00edtulo en Bricolage Grotesque 800\r\n     \u2705 Segunda l\u00ednea con gradiente celeste\u2192verde que rota entre frases\r\n     \u2705 Entrada animada (fade + subida) al cargar\r\n     \u2705 min-height en la l\u00ednea rotativa \u2192 NO salta el layout al cambiar\r\n     \u2705 En celular: \"Tu marca puede\" \/ \"ser el pr\u00f3ximo\" en dos l\u00edneas\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar las frases: edit\u00e1 el array \"words\" en el JS.\r\n     Para cambiar la velocidad: HOLD (ms visible) y FADE (ms de transici\u00f3n).\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-rotate\">\r\n  <div class=\"obd-title2 obd-rise obd-d1\">Tu marca puede <br class=\"obd-br-m\">ser el pr\u00f3ximo<\/div>\r\n  <div class=\"obd-line2 obd-rise obd-d2\"><span class=\"obd-swap\">negocio imparable<\/span><\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-rotate{\r\n    line-height:1.06;\r\n    font-family:'Bricolage Grotesque',sans-serif;\r\n    letter-spacing:-.02em;\r\n    text-align:center;\r\n  }\r\n  .obd-title2{\r\n    font-size: 40px !important;\r\n    font-weight:800; color:#f4f3f7;\r\n  }\r\n  .obd-line2{\r\n    margin-top:6px;\r\n    font-size: 40px !important;\r\n    font-weight:800;\r\n    min-height:1.15em;   \/* reserva el alto \u2192 el layout no salta al cambiar la palabra *\/\r\n  }\r\n  .obd-swap{\r\n    display:inline-block;\r\n    background:linear-gradient(110deg,#2dc1e5,#5ad6f5 50%,#7df0d0);\r\n    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;\r\n    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .obd-swap.obd-out{ opacity:0; transform:translateY(10px); }\r\n\r\n  \/* Salto de l\u00ednea solo en celular (oculto en desktop; el espacio antes\r\n     del <br> mantiene la separaci\u00f3n entre \"puede\" y \"ser\" en pantallas grandes) *\/\r\n  .obd-br-m{ display:none; }\r\n  @media (max-width:600px){\r\n    .obd-br-m{ display:inline; }\r\n  }\r\n\r\n  \/* ---- Entrada animada al cargar ---- *\/\r\n  .obd-rise{ opacity:0; transform:translateY(22px);\r\n    animation:obdRise .8s cubic-bezier(.16,1,.3,1) forwards; }\r\n  .obd-d1{ animation-delay:.16s; }\r\n  .obd-d2{ animation-delay:.27s; }\r\n  @keyframes obdRise{ to{ opacity:1; transform:none; } }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-rise{ opacity:1; transform:none; animation:none; }\r\n    .obd-swap{ transition:none; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  \/* Frases que rotan en la segunda l\u00ednea. Agreg\u00e1 o sac\u00e1 las que quieras. *\/\r\n  var words = [\"negocio imparable\",\"producto de moda\",\"lanzamiento exitoso\",\"caso de \u00e9xito\"];\r\n  var HOLD = 2600;   \/* ms que cada frase queda visible *\/\r\n  var FADE = 350;    \/* ms de la transici\u00f3n de salida\/entrada (igualar al CSS) *\/\r\n\r\n  function startSwap(scope) {\r\n    var el = (scope || document).querySelector(\".obd-swap\");\r\n    if (!el || el.dataset.swStarted === \"1\") return;\r\n    el.dataset.swStarted = \"1\";\r\n    var i = 0;\r\n    el.textContent = words[0];\r\n    setInterval(function () {\r\n      el.classList.add(\"obd-out\");\r\n      setTimeout(function () {\r\n        i = (i + 1) % words.length;\r\n        el.textContent = words[i];\r\n        el.classList.remove(\"obd-out\");\r\n      }, FADE);\r\n    }, HOLD);\r\n  }\r\n\r\n  \/* ---------- Arranque (normal + editor Elementor) ---------- *\/\r\n  function boot(root) {\r\n    (root || document).querySelectorAll(\".obd-rotate\").forEach(function (r) { startSwap(r); });\r\n  }\r\n  boot(document);\r\n\r\n  if (window.jQuery && window.elementorFrontend) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function ($scope) {\r\n        boot($scope[0]);\r\n      });\r\n    });\r\n  }\r\n  setTimeout(function () { boot(document); }, 800);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95da3d3 elementor-widget elementor-widget-spacer\" data-id=\"95da3d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b21973c elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-text-editor\" data-id=\"2b21973c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Nosotros\u00a0<b>dise\u00f1amos, mantenemos y escalamos<\/b> tu sitio. Vos solo te ocup\u00e1s de vender \u2014 <b>sin armar nada.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c15a997 elementor-widget elementor-widget-spacer\" data-id=\"c15a997\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14736f27 elementor-widget elementor-widget-html\" data-id=\"14736f27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BOTONES CTA (WIDGET INDEPENDIENTE)\r\n     Pegar en un widget HTML de Elementor. No necesita JS.\r\n     \u2705 Bot\u00f3n primario con gradiente + borde giratorio (conic)\r\n     \u2705 Bot\u00f3n ghost con borde giratorio propio\r\n     \u2705 Mismo ancho ambos, apilan bien en m\u00f3vil\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar los destinos: edit\u00e1 los href=\"#planes\".\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-cta\">\r\n  <a class=\"obd-btn obd-btn-primary\" href=\"#planes\">Soluciones para tu rubro<\/a>\r\n  <a class=\"obd-btn obd-btn-ghost\" href=\"#planes\">Ver nuestros planes<\/a>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;\r\n    font-family:'Manrope',sans-serif; }\r\n\r\n  .obd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n    min-width:min(260px, 100%);                 \/* ambos botones al mismo ancho *\/\r\n    padding:13px 26px; border-radius:100px;\r\n    font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; text-decoration:none;\r\n    box-sizing:border-box;\r\n    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, color .3s; }\r\n\r\n  .obd-btn-primary,\r\n  .obd-btn-primary:link,\r\n  .obd-btn-primary:visited{ background:linear-gradient(135deg,#2dc1e5,#5ad6f5); color:#fff !important;\r\n    box-shadow:0 8px 30px rgba(45,193,229,.4); }\r\n  .obd-btn-primary:hover,\r\n  .obd-btn-primary:focus-visible{ color:#fff !important; transform:translateY(-2px);\r\n    box-shadow:0 14px 44px rgba(45,193,229,.55); }\r\n\r\n  .obd-btn-ghost,\r\n  .obd-btn-ghost:link,\r\n  .obd-btn-ghost:visited{ background:rgba(255,255,255,.05); color:#fff !important;\r\n    border:1px solid rgba(255,255,255,.18); }\r\n  .obd-btn-ghost:hover,\r\n  .obd-btn-ghost:focus-visible{ color:#fff !important; border-color:#2dc1e5;\r\n    background:rgba(45,193,229,.10); transform:translateY(-2px); }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n primario ---- *\/\r\n  @property --obd-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-primary{ position:relative; }\r\n  .obd-btn-primary::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a),\r\n      transparent 0deg, #7df0d0 40deg, #eafff8 72deg, #5ad6f5 104deg, transparent 165deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin 4.5s linear infinite; opacity:.7; pointer-events:none; }\r\n  @keyframes obdBorderSpin{ to{ --obd-a:360deg; } }\r\n  .obd-btn-primary:hover::before,\r\n  .obd-btn-primary:focus-visible::before{ opacity:1; animation-duration:1.5s; }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n ghost ---- *\/\r\n  @property --obd-a2{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-ghost{ position:relative; }\r\n  .obd-btn-ghost::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a2),\r\n      transparent 0deg, #5b3df0 40deg, #2dc1e5 80deg, #7df0d0 115deg, transparent 175deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin2 5s linear infinite; opacity:.6; pointer-events:none; }\r\n  @keyframes obdBorderSpin2{ to{ --obd-a2:360deg; } }\r\n  .obd-btn-ghost:hover::before,\r\n  .obd-btn-ghost:focus-visible::before{ opacity:1; animation-duration:1.7s; }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-btn-primary::before{ animation:none; }\r\n    .obd-btn-ghost::before{ animation:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1dcf32e4 elementor-widget elementor-widget-spacer\" data-id=\"1dcf32e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e4a8f82 elementor-widget elementor-widget-html\" data-id=\"4e4a8f82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BANDA DE PALABRAS QUE EXPLOTAN \u2014 v3.1\r\n     (WIDGET INDEPENDIENTE \u2014 pegar en un widget HTML de Elementor)\r\n     Reemplazo directo de la v3 (mismas clases .obd-band).\r\n\r\n     NUEVO EN v3.1:\r\n     \u2705 MULTI-INSTANCIA: se puede pegar en VARIOS widgets de la misma\r\n        p\u00e1gina y todas las bandas funcionan (antes solo arrancaba la\r\n        primera: querySelector devolv\u00eda siempre la misma banda).\r\n\r\n     SE MANTIENE DE v3:\r\n     \u2705 HOVER CON F\u00cdSICA: el cursor empuja las part\u00edculas con inercia\r\n        y vuelven a su lugar con efecto resorte. Funciona con touch.\r\n     \u2705 EXPLOSI\u00d3N EN OLA: desintegraci\u00f3n de izquierda a derecha con\r\n        rotaci\u00f3n individual por part\u00edcula. Ocurre ANTES en el scroll\r\n        (rango configurable: EXPLODE_START \/ EXPLODE_END).\r\n     \u2705 GLOW ADITIVO: blending 'lighter' \u2192 pensado para FONDO OSCURO;\r\n        sobre fondo claro pon\u00e9 GLOW = false en el JS.\r\n     \u2705 GRADIENTE ANIMADO: el color fluye por el texto\r\n        (cian \u2192 aqua \u2192 menta \u2192 lila) + destellos blancos.\r\n     \u2705 MARQUEE REACTIVO: acelera al bajar, frena\/retrocede al subir.\r\n     \u2705 AHORRO CPU\/BATER\u00cdA: render pausado fuera del viewport y con\r\n        la pesta\u00f1a oculta. prefers-reduced-motion \u2192 frame est\u00e1tico.\r\n     \u2705 FONDO: degradado transparente \u2192 #030E16 s\u00f3lido abajo.\r\n     \u2705 Canvas ABSOLUTO dentro del widget (scrollea nativo, cero lag).\r\n     \u2705 FIX M\u00d3VIL: resize de solo-alto (barra del navegador) se ignora.\r\n\r\n     \u26a0\ufe0f REQUISITOS EN ELEMENTOR:\r\n       - Overflow en \"Default\" (NUNCA Hidden) en la secci\u00f3n y\r\n         contenedores que envuelvan este widget.\r\n       - Si al explotar las part\u00edculas quedan TAPADAS por la secci\u00f3n\r\n         siguiente, pon\u00e9 Z-Index alto (ej: 10) en el contenedor del\r\n         hero (Advanced \u2192 Z-Index).\r\n     Para cambiar las palabras: array WORDS en el JS + span .obd-band-sr.\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-band\">\r\n  <canvas class=\"obd-band-cv\" aria-hidden=\"true\"><\/canvas>\r\n  <span class=\"obd-band-sr\">dise\u00f1o \u00b7 innovaci\u00f3n \u00b7 inspiraci\u00f3n \u00b7 impacto<\/span>\r\n<\/div>\r\n\r\n<style>\r\n  html{ overflow-x:clip; }   \/* recorta el sobrante horizontal del canvas full-bleed sin romper sticky *\/\r\n\r\n  .obd-band{\r\n    position:relative; z-index:2;\r\n    width:100%;\r\n    height:clamp(120px, 17vh, 180px);\r\n    background:linear-gradient(180deg, rgba(3,14,22,0) 0%, #030E16 100%);\r\n    overflow:visible;\r\n  }\r\n  \/* Canvas ABSOLUTO centrado en la banda: se mueve con el documento\r\n     (lo posiciona el compositor del navegador, no el JS) \u2192 no flota. *\/\r\n  .obd-band-cv{\r\n    position:absolute; left:50%; top:50%;\r\n    transform:translate(-50%,-50%);\r\n    pointer-events:none; z-index:5;\r\n  }\r\n  .obd-band-sr{ position:absolute; width:1px; height:1px; overflow:hidden;\r\n    clip:rect(0 0 0 0); white-space:nowrap; }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* Inicializa UNA banda concreta (host). Cada banda tiene su propio\r\n     estado en este closure, as\u00ed varias copias conviven sin pisarse. *\/\r\n  function initBand(host) {\r\n    if (!host || host.dataset.init === '1') return;\r\n    var cv = host.querySelector('.obd-band-cv');\r\n    if (!cv) return;\r\n    host.dataset.init = '1';\r\n\r\n    \/* limpio el overlay viejo de versiones anteriores si qued\u00f3 colgado del body *\/\r\n    var prev = document.querySelector('body > canvas.obd-band-cv');\r\n    if (prev) prev.remove();\r\n\r\n    var ctx = cv.getContext('2d');\r\n    var DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n\r\n    \/* ================= CONFIG ================= *\/\r\n    var WORDS  = ['dise\u00f1o', 'innovaci\u00f3n', 'inspiraci\u00f3n', 'impacto'];\r\n    var SEP    = '  \u2022  ';\r\n    var TEXT   = WORDS.join(SEP) + SEP;\r\n    \/* paradas del gradiente que fluye por el texto (RGB) *\/\r\n    var STOPS  = [[70,195,255], [125,235,245], [150,245,205], [185,175,255]];\r\n    var GLOW   = true;   \/* blending aditivo: ideal fondo oscuro. Fondo claro \u2192 false *\/\r\n    var BASE_SPEED = 0.55, BASE_SPEED_M = 0.38;\r\n    \/* Rango de la explosi\u00f3n, en fracci\u00f3n del alto del viewport (posici\u00f3n del\r\n       CENTRO de la banda). Empieza al subir del 80% y termina al 5% (antes de\r\n       salir por arriba). M\u00e1s grande START = explota antes. *\/\r\n    var EXPLODE_START = 0.80, EXPLODE_END = 0.05;\r\n    \/* ========================================== *\/\r\n\r\n    var parts = [], OW = 0, bandH = 0, bandW = 0, cw = 0, ch = 0;\r\n    var scrollX = 0, raf = 0, running = false, inView = true, started = false;\r\n    var e = 0, t = 0, boost = 0, lastY = window.pageYOffset || 0;\r\n    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    function mob() { return window.innerWidth < 768; }\r\n\r\n    \/* --- puntero (mouse \/ touch \/ l\u00e1piz) en coordenadas de viewport --- *\/\r\n    var ptr = { x: -9999, y: -9999, on: false };\r\n    var HR = mob() ? 75 : 100, HR2 = HR * HR, FORCE = 1.7;\r\n    window.addEventListener('pointermove', function (ev) {\r\n      ptr.x = ev.clientX; ptr.y = ev.clientY; ptr.on = true;\r\n    }, { passive: true });\r\n    window.addEventListener('pointerout', function (ev) {\r\n      if (!ev.relatedTarget) ptr.on = false;\r\n    }, { passive: true });\r\n\r\n    \/* --- velocidad de scroll \u2192 empuje del marquee --- *\/\r\n    window.addEventListener('scroll', function () {\r\n      var y = window.pageYOffset || 0;\r\n      boost += (y - lastY) * 0.028;\r\n      lastY = y;\r\n    }, { passive: true });\r\n\r\n    function vpad() { return mob() ? 190 : 320; }\r\n\r\n    function sizeCanvas() {\r\n      \/* Ancho = viewport visible. Alto = banda + espacio de explosi\u00f3n en\r\n         PX FIJOS \u2192 la barra del navegador m\u00f3vil no afecta nada. *\/\r\n      bandH = host.clientHeight;\r\n      bandW = host.clientWidth;\r\n      cw = document.documentElement.clientWidth;\r\n      ch = Math.ceil(bandH + 2 * (vpad() * 0.9 + 60));\r\n      cv.style.width = cw + 'px';\r\n      cv.style.height = ch + 'px';\r\n      cv.width = Math.round(cw * DPR);\r\n      cv.height = Math.round(ch * DPR);\r\n    }\r\n\r\n    function buildParticles() {\r\n      var VPAD = vpad();\r\n      var fontPx = Math.round(bandH * 0.52);\r\n      var step = mob() ? 5 : 4;\r\n\r\n      var off = document.createElement('canvas');\r\n      var octx = off.getContext('2d');\r\n      octx.font = \"800 \" + fontPx + \"px 'Bricolage Grotesque', sans-serif\";\r\n      OW = Math.ceil(octx.measureText(TEXT).width);\r\n      if (OW < 4 || bandH < 4) return;\r\n      off.width = Math.ceil(OW * DPR);\r\n      off.height = Math.ceil(bandH * DPR);\r\n      octx.scale(DPR, DPR);\r\n      octx.font = \"800 \" + fontPx + \"px 'Bricolage Grotesque', sans-serif\";\r\n      octx.textBaseline = 'middle';\r\n      octx.fillStyle = '#fff';\r\n      octx.fillText(TEXT, 0, bandH \/ 2);\r\n\r\n      var img = octx.getImageData(0, 0, off.width, off.height).data;\r\n      parts = [];\r\n      for (var y = 0; y < bandH; y += step) {\r\n        for (var x = 0; x < OW; x += step) {\r\n          var px = Math.floor(x * DPR), py = Math.floor(y * DPR);\r\n          var a = img[(py * off.width + px) * 4 + 3];\r\n          if (a > 110) {\r\n            var ang = Math.random() * Math.PI * 2;\r\n            parts.push({\r\n              xb: x, yb: y,                                            \/* posici\u00f3n en reposo (local a la banda) *\/\r\n              dx: Math.cos(ang) * (40 + Math.random() * bandW * 0.55), \/* destino de explosi\u00f3n *\/\r\n              dy: Math.sin(ang) * (Math.random() * VPAD * 0.9),\r\n              dl: (x \/ OW) * 0.22 + Math.random() * 0.06,              \/* retraso \u2192 ola izq\u2192der *\/\r\n              spin: Math.random() * 2.4 - 1.2,                         \/* rotaci\u00f3n del trayecto *\/\r\n              ph: Math.random() * 6.283,\r\n              ci: (x \/ OW * 64) | 0,                                   \/* \u00edndice en el gradiente *\/\r\n              sp: Math.random() < 0.03,                                \/* destello *\/\r\n              ox: 0, oy: 0, ovx: 0, ovy: 0                             \/* f\u00edsica del hover *\/\r\n            });\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    \/* gradiente animado: LUT de 64 colores que deriva con el tiempo *\/\r\n    var LUT = [];\r\n    function buildLUT() {\r\n      var n = STOPS.length;\r\n      for (var i = 0; i < 64; i++) {\r\n        var u = (i \/ 64 + t * 0.03) % 1;\r\n        var f = u * n, j = (f | 0) % n, k = (j + 1) % n, m = f - (f | 0);\r\n        var A = STOPS[j], B = STOPS[k];\r\n        LUT[i] = [A[0] + (B[0] - A[0]) * m, A[1] + (B[1] - A[1]) * m, A[2] + (B[2] - A[2]) * m];\r\n      }\r\n    }\r\n\r\n    function computeE(hostTop, hostH) {\r\n      var vhh = window.innerHeight || 800;\r\n      var center = hostTop + hostH \/ 2;\r\n      var START = vhh * EXPLODE_START, END = vhh * EXPLODE_END;\r\n      var v = (START - center) \/ (START - END);\r\n      e = v < 0 ? 0 : (v > 1 ? 1 : v);\r\n    }\r\n\r\n    function frame() {\r\n      raf = 0;\r\n      t += 0.016;\r\n\r\n      \/* Rects del MISMO frame: su diferencia es estable aunque el scroll\r\n         vaya un frame adelantado \u2192 sin deriva. *\/\r\n      var hostR = host.getBoundingClientRect();\r\n      var vhh = window.innerHeight || 800;\r\n      var pad = 420;\r\n      if (hostR.bottom < -pad || hostR.top > vhh + pad) { schedule(); return; }\r\n      var cvR = cv.getBoundingClientRect();\r\n\r\n      if (reduced) { e = 0; } else { computeE(hostR.top, hostR.height); }\r\n\r\n      boost = Math.max(-7, Math.min(10, boost)) * 0.9;\r\n      if (!reduced) scrollX += (mob() ? BASE_SPEED_M : BASE_SPEED) + boost;\r\n      if (OW > 0) { scrollX %= OW; if (scrollX < 0) scrollX += OW; }\r\n\r\n      buildLUT();\r\n\r\n      \/* f\u00edsica del empuje del cursor: se integra UNA vez por frame *\/\r\n      for (var i = 0; i < parts.length; i++) {\r\n        var p = parts[i];\r\n        if (p.ox || p.oy || p.ovx || p.ovy) {\r\n          p.ox += p.ovx; p.oy += p.ovy;\r\n          p.ovx = p.ovx * 0.86 - p.ox * 0.055;   \/* fricci\u00f3n + resorte al origen *\/\r\n          p.ovy = p.ovy * 0.86 - p.oy * 0.055;\r\n          if (p.ox * p.ox + p.oy * p.oy < 0.01 && p.ovx * p.ovx + p.ovy * p.ovy < 0.01) {\r\n            p.ox = p.oy = p.ovx = p.ovy = 0;\r\n          }\r\n        }\r\n      }\r\n\r\n      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\r\n      ctx.globalCompositeOperation = 'source-over';\r\n      ctx.clearRect(0, 0, cw, ch);\r\n      if (GLOW) ctx.globalCompositeOperation = 'lighter';\r\n\r\n      var leftEdge = hostR.left - cvR.left;   \/* banda en coords locales del canvas *\/\r\n      var topEdge = hostR.top - cvR.top;\r\n      var mx = ptr.x - cvR.left, my = ptr.y - cvR.top;\r\n      var fadeW = bandW * 0.12;\r\n\r\n      var ease = e * e * (3 - 2 * e);\r\n      var hoverOn = ptr.on && ease < 0.6 && !reduced;\r\n\r\n      \/* aura suave alrededor del cursor *\/\r\n      if (hoverOn && mx > leftEdge - HR && mx < leftEdge + bandW + HR &&\r\n          my > topEdge - HR && my < topEdge + bandH + HR) {\r\n        var au = ctx.createRadialGradient(mx, my, 0, mx, my, HR * 1.5);\r\n        au.addColorStop(0, 'rgba(120,220,255,0.10)');\r\n        au.addColorStop(1, 'rgba(120,220,255,0)');\r\n        ctx.fillStyle = au;\r\n        ctx.fillRect(mx - HR * 1.5, my - HR * 1.5, HR * 3, HR * 3);\r\n      }\r\n\r\n      var copies = Math.ceil(cw \/ OW) + 2;\r\n\r\n      for (var k = -1; k < copies; k++) {\r\n        var baseX = leftEdge - scrollX + k * OW;\r\n        if (baseX + OW < leftEdge - 60 || baseX > leftEdge + bandW + 60) continue;\r\n\r\n        for (var i2 = 0; i2 < parts.length; i2++) {\r\n          var q = parts[i2];\r\n          var tw = Math.sin(t * 2 + q.ph) * 0.5 + 0.5;\r\n\r\n          \/* progreso individual: ola izq\u2192der con retraso por part\u00edcula *\/\r\n          var pe = 0;\r\n          if (ease > q.dl) {\r\n            pe = (ease - q.dl) \/ (1 - q.dl);\r\n            if (pe > 1) pe = 1;\r\n            pe = pe * pe * (3 - 2 * pe);\r\n          }\r\n\r\n          var exx = q.xb, eyy = q.yb;\r\n          if (pe > 0) {\r\n            \/* el vector de explosi\u00f3n rota mientras avanza \u2192 trayecto en espiral *\/\r\n            var an = q.spin * pe, cs = Math.cos(an), sn = Math.sin(an);\r\n            var ddx = q.dx * pe, ddy = q.dy * pe;\r\n            exx += ddx * cs - ddy * sn;\r\n            eyy += ddx * sn + ddy * cs;\r\n          }\r\n\r\n          var x = baseX + exx + q.ox;\r\n          var relX = x - leftEdge;\r\n          if (relX < -40 || relX > bandW + 40) continue;\r\n          var y = topEdge + eyy + q.oy;\r\n          if (y < -40 || y > ch + 40) continue;\r\n\r\n          var alpha = Math.pow(1 - pe, 0.55) * (0.55 + 0.35 * tw);\r\n          if (relX < fadeW) alpha *= Math.max(0, relX \/ fadeW);\r\n          else if (relX > bandW - fadeW) alpha *= Math.max(0, (bandW - relX) \/ fadeW);\r\n          if (alpha <= 0.02) continue;\r\n\r\n          var col = LUT[q.ci & 63];\r\n          var r = col[0], g = col[1], b = col[2];\r\n          var s = 1.6 + tw * 0.8;\r\n\r\n          if (q.sp) {   \/* destellos: pulso blanco *\/\r\n            var fz = tw * tw;\r\n            s += fz * 1.6;\r\n            r += (255 - r) * fz; g += (255 - g) * fz; b += (255 - b) * fz;\r\n            alpha = Math.min(1, alpha + fz * 0.35);\r\n          }\r\n\r\n          \/* HOVER F\u00cdSICO: el cursor empuja (impulso) + brillo\/tama\u00f1o al pasar *\/\r\n          if (hoverOn) {\r\n            var hx = x - mx, hy = y - my, d2 = hx * hx + hy * hy;\r\n            if (d2 < HR2) {\r\n              var d = Math.sqrt(d2) || 1, f = 1 - d \/ HR;\r\n              q.ovx += (hx \/ d) * f * FORCE;\r\n              q.ovy += (hy \/ d) * f * FORCE;\r\n              alpha = Math.min(1, alpha + f * 0.65);\r\n              s += f * 2.2;\r\n              r += (255 - r) * f * 0.75;\r\n              g += (255 - g) * f * 0.75;\r\n              b += (255 - b) * f * 0.75;\r\n            }\r\n          }\r\n\r\n          ctx.fillStyle = 'rgba(' + (r | 0) + ',' + (g | 0) + ',' + (b | 0) + ',' + alpha.toFixed(3) + ')';\r\n          ctx.fillRect(x, y, s, s);\r\n        }\r\n      }\r\n\r\n      if (reduced) return;   \/* con reduced-motion: un solo frame est\u00e1tico *\/\r\n      schedule();\r\n    }\r\n\r\n    function schedule() { if (running && !raf) raf = requestAnimationFrame(frame); }\r\n\r\n    function setRunning() {\r\n      var should = started && inView && !document.hidden && !reduced;\r\n      if (should === running) return;\r\n      running = should;\r\n      if (running) { schedule(); }\r\n      else if (raf) { cancelAnimationFrame(raf); raf = 0; }\r\n    }\r\n\r\n    \/* pausa total fuera del viewport y con pesta\u00f1a oculta *\/\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (en) {\r\n        inView = en[0].isIntersecting;\r\n        setRunning();\r\n      }, { rootMargin: '500px 0px' }).observe(host);\r\n    }\r\n    document.addEventListener('visibilitychange', setRunning);\r\n\r\n    function startBand() {\r\n      sizeCanvas();\r\n      buildParticles();\r\n      started = true;\r\n      if (reduced) { frame(); return; }\r\n      setRunning();\r\n    }\r\n\r\n    var kicked = false;\r\n    function kick() { if (kicked) return; kicked = true; startBand(); }\r\n    if (document.fonts && document.fonts.load) {\r\n      document.fonts.load(\"800 40px 'Bricolage Grotesque'\").then(kick).catch(kick);\r\n      setTimeout(kick, 900);\r\n      \/* si arranc\u00f3 con la fuente fallback, rearma cuando la real est\u00e9 lista *\/\r\n      document.fonts.ready.then(function () {\r\n        if (!kicked) return;\r\n        sizeCanvas(); buildParticles();\r\n        if (reduced) frame();\r\n      });\r\n    } else {\r\n      kick();\r\n    }\r\n\r\n    \/* FIX M\u00d3VIL: solo rearmo si cambi\u00f3 el ANCHO (rotaci\u00f3n o resize real).\r\n       La barra del navegador solo cambia el ALTO \u2192 se ignora. *\/\r\n    var rzb, lastBandW = document.documentElement.clientWidth;\r\n    window.addEventListener('resize', function () {\r\n      clearTimeout(rzb);\r\n      rzb = setTimeout(function () {\r\n        var w = document.documentElement.clientWidth;\r\n        if (w === lastBandW || !kicked) return;\r\n        lastBandW = w;\r\n        sizeCanvas();\r\n        buildParticles();\r\n        if (reduced) frame();\r\n      }, 200);\r\n    });\r\n  }\r\n\r\n  \/* ---------- Arranque (normal + editor Elementor) ----------\r\n     querySelectorAll: inicializa TODAS las bandas de la p\u00e1gina que\r\n     a\u00fan no arrancaron (permite varios widgets con este mismo c\u00f3digo). *\/\r\n  function boot(root) {\r\n    var list = (root || document).querySelectorAll('.obd-band');\r\n    for (var i = 0; i < list.length; i++) initBand(list[i]);\r\n    \/* si el root es la propia banda (scope del editor de Elementor) *\/\r\n    if (root && root.classList && root.classList.contains('obd-band')) initBand(root);\r\n  }\r\n  boot(document);\r\n\r\n  if (window.jQuery && window.elementorFrontend) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function ($scope) {\r\n        boot($scope[0]);\r\n      });\r\n    });\r\n  }\r\n  setTimeout(function () { boot(document); }, 800);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-43d5d02 e-con-full e-flex e-con e-parent\" data-id=\"43d5d02\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-3ca2234f e-con-full e-flex e-con e-child\" data-id=\"3ca2234f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-200941fe e-con-full e-flex e-con e-child\" data-id=\"200941fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc0ede elementor-widget elementor-widget-html\" data-id=\"bc0ede\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 Mockup navegador animado (secci\u00f3n 2)\r\n     Widget autocontenido para Elementor (widget HTML)\r\n     Prefijo de clases: obxm  |  Sin dependencias externas\r\n     ============================================================ -->\r\n<style>\r\n  .obxm-wrap{--obxm-ac:#2dc1e5;--obxm-ac2:#7c5cff;--obxm-bg:#0d0d14;--obxm-line:rgba(255,255,255,.09);\r\n    position:relative;width:100%;margin:0 auto;\r\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\r\n    -webkit-user-select:none;user-select:none}\r\n  \/* glow de fondo *\/\r\n  .obxm-wrap::before{content:\"\";position:absolute;inset:-8% -6%;z-index:0;border-radius:32px;\r\n    background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--obxm-ac) 22%,transparent),transparent 70%);\r\n    filter:blur(30px);transition:background .8s ease;pointer-events:none}\r\n\r\n  \/* ---------- browser chrome ---------- *\/\r\n  .obxm-browser{position:relative;z-index:1;background:var(--obxm-bg);border:1px solid var(--obxm-line);\r\n    border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset}\r\n  .obxm-top{display:flex;align-items:center;gap:10px;padding:10px 14px;\r\n    background:rgba(255,255,255,.03);border-bottom:1px solid var(--obxm-line)}\r\n  .obxm-dots{display:flex;gap:6px;flex:none}\r\n  .obxm-dots i{width:10px;height:10px;border-radius:50%;background:#3a3a46}\r\n  .obxm-dots i:nth-child(1){background:#ff5f57}.obxm-dots i:nth-child(2){background:#febc2e}.obxm-dots i:nth-child(3){background:#28c840}\r\n  .obxm-url{flex:1;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);\r\n    border:1px solid var(--obxm-line);border-radius:8px;padding:6px 12px;min-width:0}\r\n  .obxm-lock{width:9px;height:9px;flex:none;border:1.5px solid #5ad18f;border-radius:2px;position:relative;opacity:.9}\r\n  .obxm-lock::before{content:\"\";position:absolute;left:1px;right:1px;top:-4px;height:4px;\r\n    border:1.5px solid #5ad18f;border-bottom:none;border-radius:4px 4px 0 0}\r\n  .obxm-url span{font-size:12px;letter-spacing:.02em;color:#c7c9d4;white-space:nowrap;overflow:hidden}\r\n  .obxm-caret{display:inline-block;width:1px;height:12px;background:#c7c9d4;margin-left:1px;\r\n    vertical-align:-2px;animation:obxmBlink 1s steps(1) infinite}\r\n  @keyframes obxmBlink{50%{opacity:0}}\r\n\r\n  \/* ---------- lienzo del sitio ---------- *\/\r\n  .obxm-stage{position:relative;padding:22px 22px 20px;min-height:0;transition:opacity .5s ease}\r\n  .obxm-stage.obxm-out{opacity:0}\r\n  .obxm-el{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.75,.25,1),transform .55s cubic-bezier(.22,.75,.25,1)}\r\n  .obxm-el.obxm-on{opacity:1;transform:none}\r\n\r\n  .obxm-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}\r\n  .obxm-logo{display:flex;align-items:center;gap:8px}\r\n  .obxm-logo i{width:14px;height:14px;border-radius:4px;background:linear-gradient(120deg,var(--obxm-ac),var(--obxm-ac2));\r\n    transition:background .6s ease;box-shadow:0 0 12px color-mix(in srgb,var(--obxm-ac) 60%,transparent)}\r\n  .obxm-logo b{width:52px;height:8px;border-radius:4px;background:#e8e9f0;opacity:.9}\r\n  .obxm-nav{display:flex;gap:8px}\r\n  .obxm-nav i{width:30px;height:7px;border-radius:4px;background:rgba(255,255,255,.16)}\r\n\r\n  .obxm-h1{height:15px;border-radius:6px;margin-bottom:9px;width:74%;\r\n    background:linear-gradient(100deg,#f2f3f8 40%,var(--obxm-ac) 75%,var(--obxm-ac2));transition:background .6s ease}\r\n  .obxm-h1.b{width:52%;margin-bottom:14px}\r\n  .obxm-sub{height:8px;border-radius:4px;background:rgba(255,255,255,.22);width:62%;margin-bottom:16px}\r\n  .obxm-cta{display:inline-block;width:96px;height:26px;border-radius:8px;\r\n    background:linear-gradient(120deg,var(--obxm-ac),var(--obxm-ac2));transition:background .6s ease,transform .3s ease;\r\n    box-shadow:0 6px 18px color-mix(in srgb,var(--obxm-ac) 35%,transparent)}\r\n  .obxm-cta.obxm-pop{animation:obxmPop .45s cubic-bezier(.34,1.56,.64,1)}\r\n  @keyframes obxmPop{0%{transform:scale(.7)}100%{transform:scale(1)}}\r\n\r\n  .obxm-media{margin:18px 0 14px;height:74px;border-radius:12px;border:1px solid var(--obxm-line);\r\n    background:\r\n      radial-gradient(80% 120% at 80% 0%,color-mix(in srgb,var(--obxm-ac2) 30%,transparent),transparent 60%),\r\n      radial-gradient(70% 120% at 10% 100%,color-mix(in srgb,var(--obxm-ac) 28%,transparent),transparent 60%),\r\n      rgba(255,255,255,.03);\r\n    transition:background .6s ease;position:relative;overflow:hidden}\r\n  .obxm-media::after{content:\"\";position:absolute;inset:0;\r\n    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);\r\n    transform:translateX(-120%);animation:obxmSheen 3.6s ease 1.2s infinite}\r\n  @keyframes obxmSheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}\r\n\r\n  .obxm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}\r\n  .obxm-card{border:1px solid var(--obxm-line);border-radius:10px;padding:10px;background:rgba(255,255,255,.03)}\r\n  .obxm-card i{display:block;width:16px;height:16px;border-radius:5px;margin-bottom:8px;\r\n    background:color-mix(in srgb,var(--obxm-ac) 30%,transparent);\r\n    border:1px solid color-mix(in srgb,var(--obxm-ac) 70%,transparent);transition:background .6s ease,border-color .6s ease}\r\n  .obxm-card b{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.30);width:80%;margin-bottom:6px}\r\n  .obxm-card s{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.13);width:95%;margin-bottom:4px}\r\n  .obxm-card s:last-child{width:70%}\r\n\r\n  \/* ---------- panel de colores (edici\u00f3n en vivo) ---------- *\/\r\n  .obxm-panel{position:absolute;top:86px;right:14px;z-index:3;display:flex;flex-direction:column;gap:8px;\r\n    background:rgba(20,20,30,.92);border:1px solid var(--obxm-line);border-radius:12px;padding:9px;\r\n    box-shadow:0 14px 34px rgba(0,0,0,.5);backdrop-filter:blur(6px);\r\n    opacity:0;transform:translateX(12px) scale(.92);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.75,.25,1)}\r\n  .obxm-panel.obxm-on{opacity:1;transform:none}\r\n  .obxm-sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;transition:transform .25s ease,border-color .25s ease}\r\n  .obxm-sw.s1{background:#2dc1e5}.obxm-sw.s2{background:#8b5cf6}.obxm-sw.s3{background:#39d98a}\r\n  .obxm-sw.obxm-hit{transform:scale(1.25);border-color:#fff}\r\n\r\n  \/* ---------- cursor fantasma ---------- *\/\r\n  .obxm-cursor{position:absolute;z-index:4;left:55%;top:70%;width:18px;height:18px;pointer-events:none;\r\n    opacity:0;transition:left 1s cubic-bezier(.45,.05,.25,1),top 1s cubic-bezier(.45,.05,.25,1),opacity .4s ease}\r\n  .obxm-cursor.obxm-on{opacity:1}\r\n  .obxm-cursor svg{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}\r\n  .obxm-cursor .obxm-ring{position:absolute;left:-7px;top:-7px;width:32px;height:32px;border-radius:50%;\r\n    border:2px solid #fff;opacity:0;transform:scale(.4)}\r\n  .obxm-cursor.obxm-click .obxm-ring{animation:obxmRing .5s ease}\r\n  @keyframes obxmRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}\r\n\r\n  \/* ---------- badge final ---------- *\/\r\n  .obxm-badge{position:absolute;z-index:3;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;\r\n    background:rgba(18,26,22,.95);border:1px solid rgba(90,209,143,.45);color:#bfeed6;\r\n    border-radius:100px;padding:7px 13px;font-size:12px;font-weight:600;letter-spacing:.02em;\r\n    box-shadow:0 12px 30px rgba(0,0,0,.45);\r\n    opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,.75,.25,1)}\r\n  .obxm-badge.obxm-on{opacity:1;transform:none}\r\n  .obxm-badge em{font-style:normal;width:16px;height:16px;flex:none;border-radius:50%;background:#39d98a;color:#08130d;\r\n    display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}\r\n\r\n  @media(max-width:880px){\r\n    .obxm-stage{padding:18px 16px 16px}\r\n    .obxm-panel{top:78px;right:10px}\r\n  }\r\n\r\n  \/* accesibilidad: sin animaci\u00f3n \u2192 estado final fijo *\/\r\n  @media(prefers-reduced-motion:reduce){\r\n    .obxm-el,.obxm-panel,.obxm-badge{opacity:1 !important;transform:none !important;transition:none !important}\r\n    .obxm-cursor{display:none !important}\r\n    .obxm-media::after{animation:none !important}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obxm-wrap\" data-obxm>\r\n  <div class=\"obxm-browser\">\r\n    <div class=\"obxm-top\">\r\n      <div class=\"obxm-dots\"><i><\/i><i><\/i><i><\/i><\/div>\r\n      <div class=\"obxm-url\"><i class=\"obxm-lock\"><\/i><span data-obxm-url><\/span><i class=\"obxm-caret\" data-obxm-caret><\/i><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"obxm-stage\" data-obxm-stage>\r\n      <div class=\"obxm-hd obxm-el\" data-obxm-el=\"hd\">\r\n        <div class=\"obxm-logo\"><i><\/i><b><\/b><\/div>\r\n        <div class=\"obxm-nav\"><i><\/i><i><\/i><i><\/i><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"obxm-h1 obxm-el\" data-obxm-el=\"h1a\"><\/div>\r\n      <div class=\"obxm-h1 b obxm-el\" data-obxm-el=\"h1b\"><\/div>\r\n      <div class=\"obxm-sub obxm-el\" data-obxm-el=\"sub\"><\/div>\r\n      <span class=\"obxm-cta obxm-el\" data-obxm-el=\"cta\" data-obxm-cta><\/span>\r\n\r\n      <div class=\"obxm-media obxm-el\" data-obxm-el=\"media\"><\/div>\r\n\r\n      <div class=\"obxm-cards\">\r\n        <div class=\"obxm-card obxm-el\" data-obxm-el=\"c1\"><i><\/i><b><\/b><s><\/s><s><\/s><\/div>\r\n        <div class=\"obxm-card obxm-el\" data-obxm-el=\"c2\"><i><\/i><b><\/b><s><\/s><s><\/s><\/div>\r\n        <div class=\"obxm-card obxm-el\" data-obxm-el=\"c3\"><i><\/i><b><\/b><s><\/s><s><\/s><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"obxm-panel\" data-obxm-panel>\r\n      <span class=\"obxm-sw s1\" data-obxm-sw=\"#2dc1e5\" data-obxm-sw2=\"#7c5cff\"><\/span>\r\n      <span class=\"obxm-sw s2\" data-obxm-sw=\"#8b5cf6\" data-obxm-sw2=\"#e879a0\"><\/span>\r\n      <span class=\"obxm-sw s3\" data-obxm-sw=\"#39d98a\" data-obxm-sw2=\"#2dc1e5\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"obxm-badge\" data-obxm-badge><em>\u2713<\/em> Publicado y al d\u00eda<\/div>\r\n\r\n    <div class=\"obxm-cursor\" data-obxm-cursor>\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <path d=\"M4 2.5 L19 11 L12.2 12.6 L9 19.5 Z\" fill=\"#ffffff\" stroke=\"#0d0d14\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n      <span class=\"obxm-ring\"><\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  \"use strict\";\r\n  var roots = document.querySelectorAll('[data-obxm]:not([data-obxm-init])');\r\n  Array.prototype.forEach.call(roots, function(root){\r\n    root.setAttribute('data-obxm-init','1');\r\n    setup(root);\r\n  });\r\n\r\n  function setup(root){\r\n    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var urlEl   = root.querySelector('[data-obxm-url]');\r\n    var caret   = root.querySelector('[data-obxm-caret]');\r\n    var stage   = root.querySelector('[data-obxm-stage]');\r\n    var panel   = root.querySelector('[data-obxm-panel]');\r\n    var badge   = root.querySelector('[data-obxm-badge]');\r\n    var cursor  = root.querySelector('[data-obxm-cursor]');\r\n    var cta     = root.querySelector('[data-obxm-cta]');\r\n    var swatches= root.querySelectorAll('[data-obxm-sw]');\r\n    var URL_TXT = 'tunegocio.com';\r\n    var timers  = [];\r\n    var running = false;\r\n    var loopN   = 0;\r\n\r\n    if (reduced){\r\n      urlEl.textContent = URL_TXT;\r\n      if (caret) caret.style.display = 'none';\r\n      return;\r\n    }\r\n\r\n    function later(fn, ms){ timers.push(setTimeout(fn, ms)); }\r\n    function clearAll(){ timers.forEach(clearTimeout); timers = []; }\r\n    function on(name){\r\n      var el = root.querySelector('[data-obxm-el=\"' + name + '\"]');\r\n      if (el) el.classList.add('obxm-on');\r\n    }\r\n    function moveCursor(x, y){ cursor.style.left = x; cursor.style.top = y; }\r\n    function setAccent(c1, c2){\r\n      root.style.setProperty('--obxm-ac', c1);\r\n      root.style.setProperty('--obxm-ac2', c2);\r\n    }\r\n\r\n    function reset(){\r\n      clearAll();\r\n      stage.classList.remove('obxm-out');\r\n      Array.prototype.forEach.call(root.querySelectorAll('.obxm-el'), function(el){\r\n        el.classList.remove('obxm-on');\r\n      });\r\n      panel.classList.remove('obxm-on');\r\n      badge.classList.remove('obxm-on');\r\n      cursor.classList.remove('obxm-on','obxm-click');\r\n      cta.classList.remove('obxm-pop');\r\n      urlEl.textContent = '';\r\n      if (caret) caret.style.display = '';\r\n      moveCursor('58%','78%');\r\n      setAccent('#2dc1e5','#7c5cff');\r\n    }\r\n\r\n    function typeUrl(done){\r\n      var i = 0;\r\n      (function step(){\r\n        if (!running) return;\r\n        urlEl.textContent = URL_TXT.slice(0, i);\r\n        i++;\r\n        if (i <= URL_TXT.length){ timers.push(setTimeout(step, 42)); }\r\n        else {\r\n          later(function(){ if (caret) caret.style.display = 'none'; }, 500);\r\n          done();\r\n        }\r\n      })();\r\n    }\r\n\r\n    function play(){\r\n      reset();\r\n      running = true;\r\n      loopN++;\r\n      \/\/ alterna el swatch elegido en cada loop para que no sea siempre igual\r\n      var pick = swatches[loopN % 2 === 0 ? 2 : 1];\r\n      var c1 = pick.getAttribute('data-obxm-sw');\r\n      var c2 = pick.getAttribute('data-obxm-sw2');\r\n      var pr = pick.classList.contains('s2') ? '31%' : '55%'; \/\/ posici\u00f3n vertical aprox del swatch\r\n\r\n      later(function(){ typeUrl(function(){\r\n\r\n        later(function(){ on('hd');  }, 250);\r\n        later(function(){ on('h1a'); }, 750);\r\n        later(function(){ on('h1b'); }, 950);\r\n        later(function(){ on('sub'); }, 1150);\r\n        later(function(){ on('cta'); cta.classList.add('obxm-pop'); }, 1450);\r\n        later(function(){ on('media'); }, 1800);\r\n        later(function(){ on('c1'); }, 2250);\r\n        later(function(){ on('c2'); }, 2420);\r\n        later(function(){ on('c3'); }, 2590);\r\n\r\n        \/\/ edici\u00f3n en vivo: aparece el panel, el cursor va y hace clic\r\n        later(function(){ panel.classList.add('obxm-on'); cursor.classList.add('obxm-on'); }, 3150);\r\n        later(function(){ moveCursor('88%', pr); }, 3350);\r\n        later(function(){\r\n          cursor.classList.add('obxm-click');\r\n          pick.classList.add('obxm-hit');\r\n          setAccent(c1, c2);\r\n        }, 4450);\r\n        later(function(){\r\n          cursor.classList.remove('obxm-click');\r\n          pick.classList.remove('obxm-hit');\r\n        }, 5050);\r\n\r\n        \/\/ cursor se retira, badge final\r\n        later(function(){ moveCursor('62%','86%'); }, 5150);\r\n        later(function(){ cursor.classList.remove('obxm-on'); }, 5900);\r\n        later(function(){ badge.classList.add('obxm-on'); }, 5950);\r\n\r\n        \/\/ fade out y reinicio\r\n        later(function(){\r\n          stage.classList.add('obxm-out');\r\n          panel.classList.remove('obxm-on');\r\n          badge.classList.remove('obxm-on');\r\n        }, 8800);\r\n        later(function(){ if (running) play(); }, 9600);\r\n\r\n      }); }, 350);\r\n    }\r\n\r\n    function stop(){\r\n      running = false;\r\n      clearAll();\r\n    }\r\n\r\n    \/\/ arranca\/pausa seg\u00fan visibilidad\r\n    if ('IntersectionObserver' in window){\r\n      var io = new IntersectionObserver(function(entries){\r\n        entries.forEach(function(e){\r\n          if (e.isIntersecting){\r\n            if (!running) play();\r\n          } else {\r\n            stop();\r\n          }\r\n        });\r\n      }, { threshold: 0.35 });\r\n      io.observe(root);\r\n    } else {\r\n      play();\r\n    }\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f9beaec elementor-widget elementor-widget-html\" data-id=\"1f9beaec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- LUCES AMBIENTALES REBOTANDO \u2014 pegar en un widget HTML de Elementor.\r\n     Se puede pegar en varias secciones: cada copia ilumina SU secci\u00f3n. -->\r\n<div class=\"obd-lights-seed\" style=\"display:none;\"><\/div>\r\n\r\n<script>\r\n(function () {\r\n  \/\/ Tomar los seeds que todav\u00eda no fueron inicializados (permite varias secciones)\r\n  var seeds = document.querySelectorAll('.obd-lights-seed:not([data-obd-init])');\r\n  if (!seeds.length) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     COUNT   : cantidad de luces por secci\u00f3n.\r\n     COLORS  : colores base (formato \"r,g,b\").\r\n     ALPHA   : intensidad de cada luz (0.05 muy tenue \u2014 0.4 notoria).\r\n     SIZE    : tama\u00f1o de cada luz como fracci\u00f3n del lado mayor de la\r\n               secci\u00f3n [m\u00ednimo, m\u00e1ximo].\r\n     SPEED   : velocidad en px\/segundo [m\u00ednimo, m\u00e1ximo].            *\/\r\n  var COUNT  = 5;\r\n  var COLORS = [\r\n    '96,165,250',   \/\/ azul cielo\r\n    '59,130,246',   \/\/ azul medio\r\n    '34,211,238',   \/\/ cian\r\n    '129,140,248'   \/\/ \u00edndigo suave\r\n  ];\r\n  var ALPHA  = 0.16;\r\n  var SIZE   = [0.25, 0.45];\r\n  var SPEED  = [12, 35];\r\n  \/* ============================================= *\/\r\n\r\n  var still = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function rand(a, b) { return a + Math.random() * (b - a); }\r\n\r\n  function initSection(seed) {\r\n    seed.setAttribute('data-obd-init', '1');\r\n\r\n    var sec = seed.closest('.e-con, .elementor-section') || seed.parentElement;\r\n    if (!sec || sec.hasAttribute('data-obd-lights')) return;\r\n    sec.setAttribute('data-obd-lights', '1');\r\n\r\n    \/\/ La secci\u00f3n recorta las luces sin romper position:sticky (clip, no hidden)\r\n    if (getComputedStyle(sec).position === 'static') sec.style.position = 'relative';\r\n    if (!sec.style.zIndex) sec.style.zIndex = '0';   \/\/ stacking context \u2192 z-index:-1 queda DETR\u00c1S del contenido\r\n    sec.style.overflow = 'clip';\r\n\r\n    var layer = document.createElement('div');\r\n    layer.style.cssText = 'position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;';\r\n    sec.insertBefore(layer, sec.firstChild);\r\n\r\n    var W = 0, H = 0;\r\n    function measure() { W = sec.clientWidth; H = sec.clientHeight; }\r\n    measure();\r\n\r\n    var lights = [];\r\n    for (var i = 0; i < COUNT; i++) {\r\n      var el = document.createElement('div');\r\n      var size = rand(SIZE[0], SIZE[1]) * Math.max(W, H);\r\n      var color = COLORS[i % COLORS.length];\r\n      el.style.cssText =\r\n        'position:absolute;top:0;left:0;border-radius:50%;will-change:transform;' +\r\n        'width:' + size.toFixed(0) + 'px;height:' + size.toFixed(0) + 'px;' +\r\n        'background:radial-gradient(circle, rgba(' + color + ',' + ALPHA + ') 0%, rgba(' + color + ',0) 65%);';\r\n      layer.appendChild(el);\r\n      var ang = rand(0, Math.PI * 2);\r\n      var spd = rand(SPEED[0], SPEED[1]);\r\n      lights.push({\r\n        el: el, size: size,\r\n        x: rand(0, Math.max(1, W - size)),\r\n        y: rand(0, Math.max(1, H - size)),\r\n        vx: Math.cos(ang) * spd,\r\n        vy: Math.sin(ang) * spd\r\n      });\r\n    }\r\n\r\n    \/\/ Pausar cuando la secci\u00f3n no est\u00e1 en pantalla (no gasta CPU)\r\n    var visible = true;\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }).observe(sec);\r\n    }\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    var last = performance.now();\r\n    function frame(now) {\r\n      var dt = Math.min((now - last) \/ 1000, 0.05);\r\n      last = now;\r\n      if (visible && !still) {\r\n        for (var i = 0; i < lights.length; i++) {\r\n          var L = lights[i];\r\n          L.x += L.vx * dt;\r\n          L.y += L.vy * dt;\r\n          if (L.x <= -L.size * 0.4)    { L.x = -L.size * 0.4;    L.vx =  Math.abs(L.vx); }\r\n          if (L.x >= W - L.size * 0.6) { L.x = W - L.size * 0.6; L.vx = -Math.abs(L.vx); }\r\n          if (L.y <= -L.size * 0.4)    { L.y = -L.size * 0.4;    L.vy =  Math.abs(L.vy); }\r\n          if (L.y >= H - L.size * 0.6) { L.y = H - L.size * 0.6; L.vy = -Math.abs(L.vy); }\r\n          L.el.style.transform = 'translate3d(' + L.x.toFixed(1) + 'px,' + L.y.toFixed(1) + 'px,0)';\r\n        }\r\n      }\r\n      requestAnimationFrame(frame);\r\n    }\r\n    requestAnimationFrame(frame);\r\n  }\r\n\r\n  for (var s = 0; s < seeds.length; s++) initSection(seeds[s]);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22029130 e-con-full e-flex e-con e-child\" data-id=\"22029130\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2de27a95 elementor-widget elementor-widget-heading\" data-id=\"2de27a95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Vos no<br>tocas nada<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3536f8b8 elementor-widget elementor-widget-spacer\" data-id=\"3536f8b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-185c6a62 elementor-widget elementor-widget-text-editor\" data-id=\"185c6a62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Nosotros construimos, actualizamos y mantenemos tu sitio todos los d\u00edas.<br \/>Vos te dedic\u00e1s a tu negocio, de la web nos ocupamos nosotros.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c492ab0 e-con-full e-flex e-con e-child\" data-id=\"4c492ab0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-465f896e e-con-full e-flex e-con e-child\" data-id=\"465f896e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc8969d elementor-widget elementor-widget-html\" data-id=\"1fc8969d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 Mockup \"Pensado para tu rubro\" (secci\u00f3n 2)\r\n     El layout del sitio muta seg\u00fan el rubro: e-commerce, salud,\r\n     servicios y construcci\u00f3n. Loop infinito, pausa fuera de viewport.\r\n     Prefijo de clases: obxru  |  Sin dependencias externas\r\n     ============================================================ -->\r\n<style>\r\n  .obxru-wrap{--obxru-ac:#2dc1e5;--obxru-bg:#0d0d14;--obxru-line:rgba(255,255,255,.09);\r\n    position:relative;width:100%;margin:0 auto;\r\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\r\n    -webkit-user-select:none;user-select:none}\r\n  .obxru-wrap::before{content:\"\";position:absolute;inset:-8% -6%;z-index:0;border-radius:32px;\r\n    background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--obxru-ac) 20%,transparent),transparent 70%);\r\n    filter:blur(30px);transition:background .8s ease;pointer-events:none}\r\n\r\n  .obxru-frame{position:relative;z-index:1;background:var(--obxru-bg);border:1px solid var(--obxru-line);\r\n    border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset;\r\n    transition:--obxru-ac .6s}\r\n  .obxru-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;\r\n    background:rgba(255,255,255,.03);border-bottom:1px solid var(--obxru-line)}\r\n  .obxru-dots{display:flex;gap:6px;flex:none}\r\n  .obxru-dots i{width:10px;height:10px;border-radius:50%}\r\n  .obxru-dots i:nth-child(1){background:#ff5f57}.obxru-dots i:nth-child(2){background:#febc2e}.obxru-dots i:nth-child(3){background:#28c840}\r\n  .obxru-tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.02em;\r\n    color:#eef0f6;background:color-mix(in srgb,var(--obxru-ac) 14%,transparent);\r\n    border:1px solid color-mix(in srgb,var(--obxru-ac) 55%,transparent);\r\n    border-radius:100px;padding:5px 12px;transition:background .5s ease,border-color .5s ease}\r\n  .obxru-tag em{font-style:normal;font-size:13px;line-height:1}\r\n  .obxru-tag b{font-weight:700}\r\n  .obxru-tag.obxru-flip{animation:obxruFlip .45s ease}\r\n  @keyframes obxruFlip{0%{transform:translateY(0);opacity:1}35%{transform:translateY(-7px);opacity:0}65%{transform:translateY(7px);opacity:0}100%{transform:translateY(0);opacity:1}}\r\n\r\n  .obxru-stage{position:relative;height:348px}\r\n  .obxru-scene{position:absolute;inset:0;padding:22px 22px 20px;display:flex;flex-direction:column;justify-content:space-evenly;opacity:0;transform:translateY(14px) scale(.99);\r\n    transition:opacity .5s cubic-bezier(.22,.75,.25,1),transform .5s cubic-bezier(.22,.75,.25,1);pointer-events:none}\r\n  .obxru-scene.obxru-on{opacity:1;transform:none}\r\n\r\n  \/* piezas skeleton comunes *\/\r\n  .obxru-b{border-radius:4px;background:rgba(255,255,255,.28)}\r\n  .obxru-s{border-radius:3px;background:rgba(255,255,255,.12)}\r\n  .obxru-cta{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:9px;\r\n    font-size:13px;font-weight:700;color:#0a0d12;\r\n    background:linear-gradient(120deg,var(--obxru-ac),color-mix(in srgb,var(--obxru-ac) 55%,#ffffff));\r\n    box-shadow:0 6px 18px color-mix(in srgb,var(--obxru-ac) 35%,transparent);transition:background .5s ease}\r\n\r\n  \/* --- escena e-commerce --- *\/\r\n  .obxru-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}\r\n  .obxru-prod{border:1px solid var(--obxru-line);border-radius:12px;padding:11px;background:rgba(255,255,255,.03)}\r\n  .obxru-prod .img{height:102px;border-radius:7px;margin-bottom:8px;\r\n    background:radial-gradient(90% 130% at 75% 0%,color-mix(in srgb,var(--obxru-ac) 32%,transparent),transparent 65%),rgba(255,255,255,.05);\r\n    transition:background .5s ease}\r\n  .obxru-prod .obxru-b{height:8px;width:75%;margin-bottom:8px}\r\n  .obxru-price{display:inline-block;height:16px;width:50px;border-radius:4px;\r\n    background:color-mix(in srgb,var(--obxru-ac) 28%,transparent);\r\n    border:1px solid color-mix(in srgb,var(--obxru-ac) 60%,transparent);transition:background .5s ease,border-color .5s ease}\r\n\r\n  \/* --- escena salud (turnos) --- *\/\r\n  .obxru-calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}\r\n  .obxru-calhead .obxru-b{height:9px;width:110px}\r\n  .obxru-calhead .obxru-s{height:8px;width:54px}\r\n  .obxru-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:16px}\r\n  .obxru-cal i{height:42px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--obxru-line)}\r\n  .obxru-cal i.obxru-busy{background:rgba(255,255,255,.10)}\r\n  .obxru-cal i.obxru-pick{background:color-mix(in srgb,var(--obxru-ac) 30%,transparent);\r\n    border-color:var(--obxru-ac);animation:obxruPulse 1.6s ease infinite}\r\n  @keyframes obxruPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--obxru-ac) 45%,transparent)}\r\n    50%{box-shadow:0 0 0 6px transparent}}\r\n\r\n  \/* --- escena servicios --- *\/\r\n  .obxru-rows{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}\r\n  .obxru-row{display:flex;align-items:center;gap:10px;border:1px solid var(--obxru-line);border-radius:11px;\r\n    padding:15px 14px;background:rgba(255,255,255,.03)}\r\n  .obxru-ck{width:18px;height:18px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;\r\n    font-size:10px;font-weight:800;color:#0a0d12;background:var(--obxru-ac);transition:background .5s ease}\r\n  .obxru-row .obxru-b{height:7px;width:42%}\r\n  .obxru-row .obxru-s{height:6px;flex:1}\r\n  .obxru-chat{display:flex;align-items:center;gap:8px;border-radius:12px 12px 12px 3px;padding:14px 14px;\r\n    background:rgba(57,217,138,.14);border:1px solid rgba(57,217,138,.4);width:78%}\r\n  .obxru-chat em{font-style:normal;font-size:13px;line-height:1}\r\n  .obxru-chat .obxru-s{height:6px;flex:1;background:rgba(57,217,138,.5)}\r\n\r\n  \/* --- escena construcci\u00f3n --- *\/\r\n  .obxru-gal{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:16px}\r\n  .obxru-gal i{height:150px;border-radius:10px;border:1px solid var(--obxru-line);position:relative;overflow:hidden;\r\n    background:radial-gradient(100% 140% at 20% 0%,color-mix(in srgb,var(--obxru-ac) 30%,transparent),transparent 60%),rgba(255,255,255,.04);\r\n    transition:background .5s ease}\r\n  .obxru-gal i::after{content:\"\";position:absolute;inset:0;\r\n    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);\r\n    transform:translateX(-120%);animation:obxruSheen 3.4s ease infinite}\r\n  @keyframes obxruSheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}\r\n  .obxru-bar{height:10px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:16px}\r\n  .obxru-bar i{display:block;height:100%;width:0;border-radius:100px;\r\n    background:linear-gradient(90deg,var(--obxru-ac),color-mix(in srgb,var(--obxru-ac) 55%,#fff));\r\n    transition:width 1.6s cubic-bezier(.22,.75,.25,1),background .5s ease}\r\n  .obxru-scene.obxru-on .obxru-bar i{width:78%}\r\n\r\n  \/* indicador de rubros *\/\r\n\r\n  @media(max-width:880px){\r\n    .obxru-scene{padding:18px 16px 16px}\r\n    .obxru-stage{height:330px}\r\n    .obxru-prod .img{height:88px}\r\n    .obxru-cal i{height:36px}\r\n    .obxru-gal i{height:128px}\r\n  }\r\n  @media(prefers-reduced-motion:reduce){\r\n    .obxru-scene{transition:none}\r\n    .obxru-gal i::after,.obxru-cal i.obxru-pick,.obxru-tag.obxru-flip{animation:none !important}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obxru-wrap\" data-obxru>\r\n  <div class=\"obxru-frame\">\r\n    <div class=\"obxru-top\">\r\n      <div class=\"obxru-dots\"><i><\/i><i><\/i><i><\/i><\/div>\r\n      <div class=\"obxru-tag\" data-obxru-tag><em data-obxru-emo>\ud83d\uded2<\/em><b data-obxru-name>E-commerce<\/b><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"obxru-stage\">\r\n\r\n      <!-- E-COMMERCE -->\r\n      <div class=\"obxru-scene\" data-obxru-scene>\r\n        <div class=\"obxru-grid\">\r\n          <div class=\"obxru-prod\"><div class=\"img\"><\/div><div class=\"obxru-b\"><\/div><span class=\"obxru-price\"><\/span><\/div>\r\n          <div class=\"obxru-prod\"><div class=\"img\"><\/div><div class=\"obxru-b\"><\/div><span class=\"obxru-price\"><\/span><\/div>\r\n        <\/div>\r\n        <div class=\"obxru-cta\">\ud83d\uded2 Comprar ahora<\/div>\r\n      <\/div>\r\n\r\n      <!-- SALUD -->\r\n      <div class=\"obxru-scene\" data-obxru-scene>\r\n        <div class=\"obxru-calhead\"><span class=\"obxru-b\"><\/span><span class=\"obxru-s\"><\/span><\/div>\r\n        <div class=\"obxru-cal\">\r\n          <i><\/i><i class=\"obxru-busy\"><\/i><i><\/i><i><\/i><i class=\"obxru-busy\"><\/i><i><\/i><i><\/i>\r\n          <i class=\"obxru-busy\"><\/i><i><\/i><i class=\"obxru-pick\"><\/i><i><\/i><i><\/i><i class=\"obxru-busy\"><\/i><i><\/i>\r\n          <i><\/i><i><\/i><i class=\"obxru-busy\"><\/i><i><\/i><i><\/i><i><\/i><i class=\"obxru-busy\"><\/i>\r\n        <\/div>\r\n        <div class=\"obxru-cta\">\ud83d\udcc5 Reservar turno<\/div>\r\n      <\/div>\r\n\r\n      <!-- SERVICIOS -->\r\n      <div class=\"obxru-scene\" data-obxru-scene>\r\n        <div class=\"obxru-rows\">\r\n          <div class=\"obxru-row\"><span class=\"obxru-ck\">\u2713<\/span><span class=\"obxru-b\"><\/span><span class=\"obxru-s\"><\/span><\/div>\r\n          <div class=\"obxru-row\"><span class=\"obxru-ck\">\u2713<\/span><span class=\"obxru-b\"><\/span><span class=\"obxru-s\"><\/span><\/div>\r\n        <\/div>\r\n        <div class=\"obxru-chat\"><em>\ud83d\udcac<\/em><span class=\"obxru-s\"><\/span><\/div>\r\n        <div class=\"obxru-cta\">\ud83d\udcac Pedir presupuesto<\/div>\r\n      <\/div>\r\n\r\n      <!-- CONSTRUCCI\u00d3N -->\r\n      <div class=\"obxru-scene\" data-obxru-scene>\r\n        <div class=\"obxru-gal\"><i><\/i><i><\/i><\/div>\r\n        <div class=\"obxru-bar\"><i><\/i><\/div>\r\n        <div class=\"obxru-cta\">\ud83c\udfd7\ufe0f Ver obras realizadas<\/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  \"use strict\";\r\n  var roots = document.querySelectorAll('[data-obxru]:not([data-obxru-init])');\r\n  Array.prototype.forEach.call(roots, function(root){\r\n    root.setAttribute('data-obxru-init','1');\r\n    setup(root);\r\n  });\r\n\r\n  function setup(root){\r\n    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var scenes  = root.querySelectorAll('[data-obxru-scene]');\r\n    var tag     = root.querySelector('[data-obxru-tag]');\r\n    var emo     = root.querySelector('[data-obxru-emo]');\r\n    var name    = root.querySelector('[data-obxru-name]');\r\n    var RUBROS  = [\r\n      { e:'\ud83d\uded2', n:'E-commerce',   c:'#2dc1e5' },\r\n      { e:'\u2695\ufe0f', n:'Salud',        c:'#39d98a' },\r\n      { e:'\ud83e\uddf0', n:'Servicios',    c:'#8b5cf6' },\r\n      { e:'\ud83c\udfd7\ufe0f', n:'Construcci\u00f3n', c:'#f5a24b' }\r\n    ];\r\n    var HOLD = 2600, cur = 0, running = false, timer = null;\r\n\r\n    function show(i, instant){\r\n      Array.prototype.forEach.call(scenes, function(s, k){\r\n        s.classList.toggle('obxru-on', k === i);\r\n      });\r\n      var r = RUBROS[i];\r\n      root.style.setProperty('--obxru-ac', r.c);\r\n      if (instant){\r\n        emo.textContent = r.e; name.textContent = r.n;\r\n      } else {\r\n        tag.classList.remove('obxru-flip');\r\n        void tag.offsetWidth; \/* reinicia la animaci\u00f3n *\/\r\n        tag.classList.add('obxru-flip');\r\n        setTimeout(function(){ emo.textContent = r.e; name.textContent = r.n; }, 180);\r\n      }\r\n    }\r\n\r\n    function tick(){\r\n      if (!running) return;\r\n      timer = setTimeout(function(){\r\n        cur = (cur + 1) % RUBROS.length;\r\n        show(cur, false);\r\n        tick();\r\n      }, HOLD);\r\n    }\r\n    function start(){ if (running) return; running = true; tick(); }\r\n    function stop(){ running = false; if (timer){ clearTimeout(timer); timer = null; } }\r\n\r\n    show(0, true);\r\n\r\n    if (reduced) return; \/* queda fijo en la primera escena *\/\r\n\r\n    if ('IntersectionObserver' in window){\r\n      var io = new IntersectionObserver(function(entries){\r\n        entries.forEach(function(e){ e.isIntersecting ? start() : stop(); });\r\n      }, { threshold: 0.35 });\r\n      io.observe(root);\r\n    } else {\r\n      start();\r\n    }\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22c98fc8 elementor-widget elementor-widget-html\" data-id=\"22c98fc8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- LUCES AMBIENTALES REBOTANDO \u2014 pegar en un widget HTML de Elementor.\r\n     Se puede pegar en varias secciones: cada copia ilumina SU secci\u00f3n. -->\r\n<div class=\"obd-lights-seed\" style=\"display:none;\"><\/div>\r\n\r\n<script>\r\n(function () {\r\n  \/\/ Tomar los seeds que todav\u00eda no fueron inicializados (permite varias secciones)\r\n  var seeds = document.querySelectorAll('.obd-lights-seed:not([data-obd-init])');\r\n  if (!seeds.length) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     COUNT   : cantidad de luces por secci\u00f3n.\r\n     COLORS  : colores base (formato \"r,g,b\").\r\n     ALPHA   : intensidad de cada luz (0.05 muy tenue \u2014 0.4 notoria).\r\n     SIZE    : tama\u00f1o de cada luz como fracci\u00f3n del lado mayor de la\r\n               secci\u00f3n [m\u00ednimo, m\u00e1ximo].\r\n     SPEED   : velocidad en px\/segundo [m\u00ednimo, m\u00e1ximo].            *\/\r\n  var COUNT  = 5;\r\n  var COLORS = [\r\n    '96,165,250',   \/\/ azul cielo\r\n    '59,130,246',   \/\/ azul medio\r\n    '34,211,238',   \/\/ cian\r\n    '129,140,248'   \/\/ \u00edndigo suave\r\n  ];\r\n  var ALPHA  = 0.16;\r\n  var SIZE   = [0.25, 0.45];\r\n  var SPEED  = [12, 35];\r\n  \/* ============================================= *\/\r\n\r\n  var still = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function rand(a, b) { return a + Math.random() * (b - a); }\r\n\r\n  function initSection(seed) {\r\n    seed.setAttribute('data-obd-init', '1');\r\n\r\n    var sec = seed.closest('.e-con, .elementor-section') || seed.parentElement;\r\n    if (!sec || sec.hasAttribute('data-obd-lights')) return;\r\n    sec.setAttribute('data-obd-lights', '1');\r\n\r\n    \/\/ La secci\u00f3n recorta las luces sin romper position:sticky (clip, no hidden)\r\n    if (getComputedStyle(sec).position === 'static') sec.style.position = 'relative';\r\n    if (!sec.style.zIndex) sec.style.zIndex = '0';   \/\/ stacking context \u2192 z-index:-1 queda DETR\u00c1S del contenido\r\n    sec.style.overflow = 'clip';\r\n\r\n    var layer = document.createElement('div');\r\n    layer.style.cssText = 'position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;';\r\n    sec.insertBefore(layer, sec.firstChild);\r\n\r\n    var W = 0, H = 0;\r\n    function measure() { W = sec.clientWidth; H = sec.clientHeight; }\r\n    measure();\r\n\r\n    var lights = [];\r\n    for (var i = 0; i < COUNT; i++) {\r\n      var el = document.createElement('div');\r\n      var size = rand(SIZE[0], SIZE[1]) * Math.max(W, H);\r\n      var color = COLORS[i % COLORS.length];\r\n      el.style.cssText =\r\n        'position:absolute;top:0;left:0;border-radius:50%;will-change:transform;' +\r\n        'width:' + size.toFixed(0) + 'px;height:' + size.toFixed(0) + 'px;' +\r\n        'background:radial-gradient(circle, rgba(' + color + ',' + ALPHA + ') 0%, rgba(' + color + ',0) 65%);';\r\n      layer.appendChild(el);\r\n      var ang = rand(0, Math.PI * 2);\r\n      var spd = rand(SPEED[0], SPEED[1]);\r\n      lights.push({\r\n        el: el, size: size,\r\n        x: rand(0, Math.max(1, W - size)),\r\n        y: rand(0, Math.max(1, H - size)),\r\n        vx: Math.cos(ang) * spd,\r\n        vy: Math.sin(ang) * spd\r\n      });\r\n    }\r\n\r\n    \/\/ Pausar cuando la secci\u00f3n no est\u00e1 en pantalla (no gasta CPU)\r\n    var visible = true;\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }).observe(sec);\r\n    }\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    var last = performance.now();\r\n    function frame(now) {\r\n      var dt = Math.min((now - last) \/ 1000, 0.05);\r\n      last = now;\r\n      if (visible && !still) {\r\n        for (var i = 0; i < lights.length; i++) {\r\n          var L = lights[i];\r\n          L.x += L.vx * dt;\r\n          L.y += L.vy * dt;\r\n          if (L.x <= -L.size * 0.4)    { L.x = -L.size * 0.4;    L.vx =  Math.abs(L.vx); }\r\n          if (L.x >= W - L.size * 0.6) { L.x = W - L.size * 0.6; L.vx = -Math.abs(L.vx); }\r\n          if (L.y <= -L.size * 0.4)    { L.y = -L.size * 0.4;    L.vy =  Math.abs(L.vy); }\r\n          if (L.y >= H - L.size * 0.6) { L.y = H - L.size * 0.6; L.vy = -Math.abs(L.vy); }\r\n          L.el.style.transform = 'translate3d(' + L.x.toFixed(1) + 'px,' + L.y.toFixed(1) + 'px,0)';\r\n        }\r\n      }\r\n      requestAnimationFrame(frame);\r\n    }\r\n    requestAnimationFrame(frame);\r\n  }\r\n\r\n  for (var s = 0; s < seeds.length; s++) initSection(seeds[s]);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a87d0e e-con-full e-flex e-con e-child\" data-id=\"7a87d0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bc30d46 elementor-widget elementor-widget-heading\" data-id=\"6bc30d46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pensado para<br>tu rubro<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65bd7a45 elementor-widget elementor-widget-spacer\" data-id=\"65bd7a45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1943f798 elementor-widget elementor-widget-text-editor\" data-id=\"1943f798\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Cada proyecto se dise\u00f1a a la medida de tu industria, e-commerce, salud, servicios, construcci\u00f3n y m\u00e1s. Nada de plantillas gen\u00e9ricas, todo seg\u00fan c\u00f3mo vend\u00e9s.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6055e37d e-con-full e-flex e-con e-child\" data-id=\"6055e37d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-6c50a53e e-con-full e-flex e-con e-child\" data-id=\"6c50a53e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-733a6b8b elementor-widget elementor-widget-html\" data-id=\"733a6b8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 Mockup \"Conectado con todo\" (secci\u00f3n 2)\r\n     Tu sitio como nodo central conectado a las plataformas\r\n     (pagos, WhatsApp, Google, redes, email) + m\u00e9tricas en vivo.\r\n     Prefijo de clases: obxcx  |  Sin dependencias externas\r\n     ============================================================ -->\r\n<style>\r\n  .obxcx-wrap{--obxcx-ac:#2dc1e5;--obxcx-ac2:#7c5cff;--obxcx-bg:#0d0d14;--obxcx-line:rgba(255,255,255,.09);\r\n    position:relative;width:100%;margin:0 auto;\r\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\r\n    -webkit-user-select:none;user-select:none}\r\n  .obxcx-wrap::before{content:\"\";position:absolute;inset:-8% -6%;z-index:0;border-radius:32px;\r\n    background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--obxcx-ac) 20%,transparent),transparent 70%);\r\n    filter:blur(30px);pointer-events:none}\r\n\r\n  .obxcx-frame{position:relative;z-index:1;background:var(--obxcx-bg);border:1px solid var(--obxcx-line);\r\n    border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset;\r\n    height:390px}\r\n\r\n  \/* l\u00edneas SVG *\/\r\n  .obxcx-net{position:absolute;inset:0;width:100%;height:100%}\r\n  .obxcx-net line{stroke:rgba(255,255,255,.14);stroke-width:1.6;stroke-dasharray:4 7;\r\n    stroke-dashoffset:0;transition:stroke .35s ease,stroke-width .35s ease}\r\n  .obxcx-live .obxcx-net line{animation:obxcxFlow 1.1s linear infinite}\r\n  @keyframes obxcxFlow{to{stroke-dashoffset:-22}}\r\n  .obxcx-net line.obxcx-hot{stroke:var(--obxcx-ac);stroke-width:2.4;\r\n    filter:drop-shadow(0 0 4px color-mix(in srgb,var(--obxcx-ac) 80%,transparent))}\r\n\r\n  \/* nodo central *\/\r\n  .obxcx-core{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.6);z-index:3;\r\n    display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;\r\n    transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}\r\n  .obxcx-core.obxcx-on{opacity:1;transform:translate(-50%,-50%) scale(1)}\r\n  .obxcx-core .box{width:76px;height:56px;border-radius:12px;position:relative;\r\n    background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.02));\r\n    border:1px solid color-mix(in srgb,var(--obxcx-ac) 65%,transparent);\r\n    box-shadow:0 0 0 5px color-mix(in srgb,var(--obxcx-ac) 10%,transparent),\r\n               0 14px 34px rgba(0,0,0,.5),\r\n               0 0 24px color-mix(in srgb,var(--obxcx-ac) 30%,transparent)}\r\n  .obxcx-core .box::before{content:\"\";position:absolute;left:8px;right:8px;top:8px;height:6px;border-radius:3px;\r\n    background:linear-gradient(90deg,var(--obxcx-ac),var(--obxcx-ac2))}\r\n  .obxcx-core .box::after{content:\"\";position:absolute;left:8px;top:20px;width:34px;height:5px;border-radius:3px;\r\n    background:rgba(255,255,255,.35);box-shadow:0 9px 0 -1px rgba(255,255,255,.16),0 18px 0 -1px rgba(255,255,255,.16)}\r\n  .obxcx-core b{font-size:11px;font-weight:700;letter-spacing:.04em;color:#eef0f6;text-transform:uppercase}\r\n  .obxcx-core.obxcx-beat .box{animation:obxcxBeat .5s ease}\r\n  @keyframes obxcxBeat{35%{transform:scale(1.06)}}\r\n\r\n  \/* nodos sat\u00e9lite *\/\r\n  .obxcx-node{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.5);opacity:0;\r\n    display:flex;flex-direction:column;align-items:center;gap:5px;\r\n    transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}\r\n  .obxcx-node.obxcx-on{opacity:1;transform:translate(-50%,-50%) scale(1)}\r\n  .obxcx-node .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;\r\n    font-size:19px;background:rgba(255,255,255,.05);border:1px solid var(--obxcx-line);\r\n    box-shadow:0 10px 26px rgba(0,0,0,.45);transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}\r\n  .obxcx-node span{font-size:10px;font-weight:600;color:#a9adbd;letter-spacing:.02em;white-space:nowrap}\r\n  .obxcx-node.obxcx-hot .ic{border-color:var(--obxcx-ac);transform:scale(1.12);\r\n    box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--obxcx-ac) 45%,transparent)}\r\n\r\n  \/* burbuja de evento *\/\r\n  .obxcx-pop{position:absolute;z-index:4;transform:translate(-50%,-130%);pointer-events:none;\r\n    font-size:10.5px;font-weight:700;color:#0a0d12;padding:4px 9px;border-radius:100px;white-space:nowrap;\r\n    background:linear-gradient(120deg,var(--obxcx-ac),color-mix(in srgb,var(--obxcx-ac) 55%,#fff));\r\n    box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0}\r\n  .obxcx-pop.obxcx-go{animation:obxcxPop 1.5s cubic-bezier(.22,.75,.25,1)}\r\n  @keyframes obxcxPop{0%{opacity:0;transform:translate(-50%,-105%) scale(.7)}\r\n    15%{opacity:1;transform:translate(-50%,-130%) scale(1)}\r\n    75%{opacity:1;transform:translate(-50%,-145%) scale(1)}\r\n    100%{opacity:0;transform:translate(-50%,-165%) scale(.95)}}\r\n\r\n  \/* dashboard de m\u00e9tricas *\/\r\n  .obxcx-dash{position:absolute;z-index:3;left:50%;bottom:20px;transform:translate(-50%,14px);opacity:0;\r\n    display:flex;gap:8px;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.75,.25,1)}\r\n  .obxcx-dash.obxcx-on{opacity:1;transform:translate(-50%,0)}\r\n  .obxcx-met{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;\r\n    background:rgba(20,20,30,.92);border:1px solid var(--obxcx-line);border-radius:12px;padding:7px 12px;\r\n    backdrop-filter:blur(6px);box-shadow:0 14px 34px rgba(0,0,0,.5)}\r\n  .obxcx-met b{font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;transition:color .3s ease}\r\n  .obxcx-met span{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8b8fa3}\r\n  .obxcx-met.obxcx-bump b{color:var(--obxcx-ac);animation:obxcxBump .45s ease}\r\n  @keyframes obxcxBump{35%{transform:scale(1.18)}}\r\n\r\n  @media(max-width:880px){\r\n    .obxcx-frame{height:372px}\r\n    .obxcx-node .ic{width:38px;height:38px;font-size:17px}\r\n    .obxcx-node span{font-size:9px}\r\n    .obxcx-met{min-width:68px;padding:6px 9px}\r\n    .obxcx-met b{font-size:13px}\r\n  }\r\n  @media(prefers-reduced-motion:reduce){\r\n    .obxcx-core,.obxcx-node,.obxcx-dash{opacity:1 !important;transform:translate(-50%,-50%) !important;transition:none !important}\r\n    .obxcx-dash{transform:translate(-50%,0) !important}\r\n    .obxcx-live .obxcx-net line{animation:none !important}\r\n    .obxcx-pop{display:none !important}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obxcx-wrap\" data-obxcx>\r\n  <div class=\"obxcx-frame\" data-obxcx-frame>\r\n\r\n    <svg class=\"obxcx-net\" viewBox=\"0 0 560 420\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n      <line data-obxcx-line=\"0\" x1=\"280\" y1=\"193\" x2=\"280\" y2=\"55\"\/>\r\n      <line data-obxcx-line=\"1\" x1=\"280\" y1=\"193\" x2=\"76\"  y2=\"118\"\/>\r\n      <line data-obxcx-line=\"2\" x1=\"280\" y1=\"193\" x2=\"484\" y2=\"118\"\/>\r\n      <line data-obxcx-line=\"3\" x1=\"280\" y1=\"193\" x2=\"101\" y2=\"294\"\/>\r\n      <line data-obxcx-line=\"4\" x1=\"280\" y1=\"193\" x2=\"459\" y2=\"294\"\/>\r\n      <line data-obxcx-line=\"5\" x1=\"280\" y1=\"193\" x2=\"280\" y2=\"332\"\/>\r\n    <\/svg>\r\n\r\n    <div class=\"obxcx-core\" data-obxcx-core>\r\n      <div class=\"box\"><\/div><b>Tu sitio<\/b>\r\n    <\/div>\r\n\r\n    <div class=\"obxcx-node\" style=\"left:50%;top:13%\"  data-obxcx-node=\"0\" data-obxcx-msg=\"Nueva visita\"       data-obxcx-met=\"v\"><div class=\"ic\">\ud83d\udd0d<\/div><span>Google<\/span><\/div>\r\n    <div class=\"obxcx-node\" style=\"left:13.5%;top:28%\" data-obxcx-node=\"1\" data-obxcx-msg=\"+ $ Venta cobrada\" data-obxcx-met=\"s\"><div class=\"ic\">\ud83d\udcb3<\/div><span>Pagos online<\/span><\/div>\r\n    <div class=\"obxcx-node\" style=\"left:86.5%;top:28%\" data-obxcx-node=\"2\" data-obxcx-msg=\"Nueva consulta\"    data-obxcx-met=\"c\"><div class=\"ic\">\ud83d\udcac<\/div><span>WhatsApp<\/span><\/div>\r\n    <div class=\"obxcx-node\" style=\"left:18%;top:70%\"  data-obxcx-node=\"3\" data-obxcx-msg=\"Nueva visita\"       data-obxcx-met=\"v\"><div class=\"ic\">\ud83d\udce3<\/div><span>Redes<\/span><\/div>\r\n    <div class=\"obxcx-node\" style=\"left:82%;top:70%\"  data-obxcx-node=\"4\" data-obxcx-msg=\"Email enviado\"      data-obxcx-met=\"v\"><div class=\"ic\">\u2709\ufe0f<\/div><span>Email<\/span><\/div>\r\n    <div class=\"obxcx-pop\" data-obxcx-pop><\/div>\r\n\r\n    <div class=\"obxcx-dash\" data-obxcx-dash>\r\n      <div class=\"obxcx-met\" data-obxcx-metric=\"v\"><b data-obxcx-val>1.248<\/b><span>Visitas<\/span><\/div>\r\n      <div class=\"obxcx-met\" data-obxcx-metric=\"s\"><b data-obxcx-val>86<\/b><span>Ventas<\/span><\/div>\r\n      <div class=\"obxcx-met\" data-obxcx-metric=\"c\"><b data-obxcx-val>31<\/b><span>Consultas<\/span><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  \"use strict\";\r\n  var roots = document.querySelectorAll('[data-obxcx]:not([data-obxcx-init])');\r\n  Array.prototype.forEach.call(roots, function(root){\r\n    root.setAttribute('data-obxcx-init','1');\r\n    setup(root);\r\n  });\r\n\r\n  function setup(root){\r\n    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var frame = root.querySelector('[data-obxcx-frame]');\r\n    var core  = root.querySelector('[data-obxcx-core]');\r\n    var dash  = root.querySelector('[data-obxcx-dash]');\r\n    var pop   = root.querySelector('[data-obxcx-pop]');\r\n    var nodes = root.querySelectorAll('[data-obxcx-node]');\r\n    var lines = root.querySelectorAll('[data-obxcx-line]');\r\n    var vals  = { v:1248, s:86, c:31 };\r\n    var timers = [], running = false, entered = false, lastIdx = -1;\r\n\r\n    function later(fn, ms){ timers.push(setTimeout(fn, ms)); }\r\n    function clearAll(){ timers.forEach(clearTimeout); timers = []; }\r\n    function fmt(n){ return n.toLocaleString('es-AR'); }\r\n    function metric(key){ return root.querySelector('[data-obxcx-metric=\"' + key + '\"]'); }\r\n\r\n    function renderVals(){\r\n      var mv = metric('v'), ms = metric('s'), mc = metric('c');\r\n      if (mv) mv.querySelector('[data-obxcx-val]').textContent = fmt(vals.v);\r\n      if (ms) ms.querySelector('[data-obxcx-val]').textContent = fmt(vals.s);\r\n      if (mc) mc.querySelector('[data-obxcx-val]').textContent = fmt(vals.c);\r\n    }\r\n\r\n    function settle(){\r\n      \/* aplica el estado post-entrada de forma instant\u00e1nea (idempotente) *\/\r\n      core.classList.add('obxcx-on');\r\n      Array.prototype.forEach.call(nodes, function(n){ n.classList.add('obxcx-on'); });\r\n      dash.classList.add('obxcx-on');\r\n      frame.classList.add('obxcx-live');\r\n    }\r\n\r\n    function clearHot(){\r\n      \/* apaga cualquier l\u00ednea\/nodo que haya quedado encendido por un stop() a mitad de pulso *\/\r\n      Array.prototype.forEach.call(lines, function(l){ l.classList.remove('obxcx-hot'); });\r\n      Array.prototype.forEach.call(nodes, function(n){ n.classList.remove('obxcx-hot'); });\r\n      core.classList.remove('obxcx-beat');\r\n      pop.classList.remove('obxcx-go');\r\n    }\r\n\r\n    function enter(){\r\n      if (entered) return;\r\n      entered = true;\r\n      later(function(){ core.classList.add('obxcx-on'); }, 150);\r\n      Array.prototype.forEach.call(nodes, function(n, i){\r\n        later(function(){ n.classList.add('obxcx-on'); }, 450 + i * 130);\r\n      });\r\n      later(function(){ dash.classList.add('obxcx-on'); frame.classList.add('obxcx-live'); }, 1400);\r\n      later(pulseLoop, 1900);\r\n    }\r\n\r\n    function pulseLoop(){\r\n      if (!running) return;\r\n      var i = Math.floor(Math.random() * nodes.length);\r\n      if (nodes.length > 1 && i === lastIdx){ i = (i + 1) % nodes.length; }\r\n      lastIdx = i;\r\n      var node = nodes[i];\r\n      var line = lines[i];\r\n      var key  = node.getAttribute('data-obxcx-met');\r\n      var msg  = node.getAttribute('data-obxcx-msg');\r\n\r\n      node.classList.add('obxcx-hot');\r\n      if (line) line.classList.add('obxcx-hot');\r\n      core.classList.remove('obxcx-beat');\r\n      void core.offsetWidth;\r\n      core.classList.add('obxcx-beat');\r\n\r\n      \/* burbuja sobre el nodo *\/\r\n      pop.textContent = msg;\r\n      pop.style.left = node.style.left;\r\n      pop.style.top  = node.style.top;\r\n      pop.classList.remove('obxcx-go');\r\n      void pop.offsetWidth;\r\n      pop.classList.add('obxcx-go');\r\n\r\n      \/* m\u00e9trica correspondiente: el dato \"baja\" al dashboard *\/\r\n      var toDash = lines[lines.length - 1];\r\n      later(function(){\r\n        if (key === 's'){ vals.s += 1; }\r\n        else if (key === 'c'){ vals.c += 1; }\r\n        else { vals.v += 1 + Math.floor(Math.random() * 4); }\r\n        renderVals();\r\n        if (toDash) toDash.classList.add('obxcx-hot');\r\n        var m = metric(key);\r\n        if (m){\r\n          m.classList.remove('obxcx-bump');\r\n          void m.offsetWidth;\r\n          m.classList.add('obxcx-bump');\r\n        }\r\n      }, 420);\r\n\r\n      later(function(){\r\n        node.classList.remove('obxcx-hot');\r\n        if (line) line.classList.remove('obxcx-hot');\r\n        if (toDash) toDash.classList.remove('obxcx-hot');\r\n      }, 1100);\r\n\r\n      later(pulseLoop, 1500 + Math.random() * 900);\r\n    }\r\n\r\n    renderVals();\r\n\r\n    if (reduced){\r\n      \/* estado final est\u00e1tico, sin pulsos *\/\r\n      core.classList.add('obxcx-on');\r\n      Array.prototype.forEach.call(nodes, function(n){ n.classList.add('obxcx-on'); });\r\n      dash.classList.add('obxcx-on');\r\n      return;\r\n    }\r\n\r\n    function start(){\r\n      if (running) return;\r\n      running = true;\r\n      if (!entered){\r\n        enter();\r\n      } else {\r\n        settle();          \/* garantiza que TODOS los \u00edconos est\u00e9n visibles aunque la entrada se haya cortado *\/\r\n        later(pulseLoop, 600);\r\n      }\r\n    }\r\n    function stop(){\r\n      running = false;\r\n      clearAll();\r\n      clearHot();          \/* nada queda iluminado a mitad de camino *\/\r\n      frame.classList.remove('obxcx-live');\r\n    }\r\n\r\n    if ('IntersectionObserver' in window){\r\n      var io = new IntersectionObserver(function(entries){\r\n        entries.forEach(function(e){ e.isIntersecting ? start() : stop(); });\r\n      }, { threshold: 0.35 });\r\n      io.observe(root);\r\n    } else {\r\n      start();\r\n    }\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-652215a7 elementor-widget elementor-widget-html\" data-id=\"652215a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- LUCES AMBIENTALES REBOTANDO \u2014 pegar en un widget HTML de Elementor.\r\n     Se puede pegar en varias secciones: cada copia ilumina SU secci\u00f3n. -->\r\n<div class=\"obd-lights-seed\" style=\"display:none;\"><\/div>\r\n\r\n<script>\r\n(function () {\r\n  \/\/ Tomar los seeds que todav\u00eda no fueron inicializados (permite varias secciones)\r\n  var seeds = document.querySelectorAll('.obd-lights-seed:not([data-obd-init])');\r\n  if (!seeds.length) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     COUNT   : cantidad de luces por secci\u00f3n.\r\n     COLORS  : colores base (formato \"r,g,b\").\r\n     ALPHA   : intensidad de cada luz (0.05 muy tenue \u2014 0.4 notoria).\r\n     SIZE    : tama\u00f1o de cada luz como fracci\u00f3n del lado mayor de la\r\n               secci\u00f3n [m\u00ednimo, m\u00e1ximo].\r\n     SPEED   : velocidad en px\/segundo [m\u00ednimo, m\u00e1ximo].            *\/\r\n  var COUNT  = 5;\r\n  var COLORS = [\r\n    '96,165,250',   \/\/ azul cielo\r\n    '59,130,246',   \/\/ azul medio\r\n    '34,211,238',   \/\/ cian\r\n    '129,140,248'   \/\/ \u00edndigo suave\r\n  ];\r\n  var ALPHA  = 0.16;\r\n  var SIZE   = [0.25, 0.45];\r\n  var SPEED  = [12, 35];\r\n  \/* ============================================= *\/\r\n\r\n  var still = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function rand(a, b) { return a + Math.random() * (b - a); }\r\n\r\n  function initSection(seed) {\r\n    seed.setAttribute('data-obd-init', '1');\r\n\r\n    var sec = seed.closest('.e-con, .elementor-section') || seed.parentElement;\r\n    if (!sec || sec.hasAttribute('data-obd-lights')) return;\r\n    sec.setAttribute('data-obd-lights', '1');\r\n\r\n    \/\/ La secci\u00f3n recorta las luces sin romper position:sticky (clip, no hidden)\r\n    if (getComputedStyle(sec).position === 'static') sec.style.position = 'relative';\r\n    if (!sec.style.zIndex) sec.style.zIndex = '0';   \/\/ stacking context \u2192 z-index:-1 queda DETR\u00c1S del contenido\r\n    sec.style.overflow = 'clip';\r\n\r\n    var layer = document.createElement('div');\r\n    layer.style.cssText = 'position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;';\r\n    sec.insertBefore(layer, sec.firstChild);\r\n\r\n    var W = 0, H = 0;\r\n    function measure() { W = sec.clientWidth; H = sec.clientHeight; }\r\n    measure();\r\n\r\n    var lights = [];\r\n    for (var i = 0; i < COUNT; i++) {\r\n      var el = document.createElement('div');\r\n      var size = rand(SIZE[0], SIZE[1]) * Math.max(W, H);\r\n      var color = COLORS[i % COLORS.length];\r\n      el.style.cssText =\r\n        'position:absolute;top:0;left:0;border-radius:50%;will-change:transform;' +\r\n        'width:' + size.toFixed(0) + 'px;height:' + size.toFixed(0) + 'px;' +\r\n        'background:radial-gradient(circle, rgba(' + color + ',' + ALPHA + ') 0%, rgba(' + color + ',0) 65%);';\r\n      layer.appendChild(el);\r\n      var ang = rand(0, Math.PI * 2);\r\n      var spd = rand(SPEED[0], SPEED[1]);\r\n      lights.push({\r\n        el: el, size: size,\r\n        x: rand(0, Math.max(1, W - size)),\r\n        y: rand(0, Math.max(1, H - size)),\r\n        vx: Math.cos(ang) * spd,\r\n        vy: Math.sin(ang) * spd\r\n      });\r\n    }\r\n\r\n    \/\/ Pausar cuando la secci\u00f3n no est\u00e1 en pantalla (no gasta CPU)\r\n    var visible = true;\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }).observe(sec);\r\n    }\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    var last = performance.now();\r\n    function frame(now) {\r\n      var dt = Math.min((now - last) \/ 1000, 0.05);\r\n      last = now;\r\n      if (visible && !still) {\r\n        for (var i = 0; i < lights.length; i++) {\r\n          var L = lights[i];\r\n          L.x += L.vx * dt;\r\n          L.y += L.vy * dt;\r\n          if (L.x <= -L.size * 0.4)    { L.x = -L.size * 0.4;    L.vx =  Math.abs(L.vx); }\r\n          if (L.x >= W - L.size * 0.6) { L.x = W - L.size * 0.6; L.vx = -Math.abs(L.vx); }\r\n          if (L.y <= -L.size * 0.4)    { L.y = -L.size * 0.4;    L.vy =  Math.abs(L.vy); }\r\n          if (L.y >= H - L.size * 0.6) { L.y = H - L.size * 0.6; L.vy = -Math.abs(L.vy); }\r\n          L.el.style.transform = 'translate3d(' + L.x.toFixed(1) + 'px,' + L.y.toFixed(1) + 'px,0)';\r\n        }\r\n      }\r\n      requestAnimationFrame(frame);\r\n    }\r\n    requestAnimationFrame(frame);\r\n  }\r\n\r\n  for (var s = 0; s < seeds.length; s++) initSection(seeds[s]);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a63f97a e-con-full e-flex e-con e-child\" data-id=\"4a63f97a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a7f6245 elementor-widget elementor-widget-heading\" data-id=\"5a7f6245\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conectado<br>con todo<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-639da2e0 elementor-widget elementor-widget-spacer\" data-id=\"639da2e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13e5aac6 elementor-widget elementor-widget-text-editor\" data-id=\"13e5aac6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Tu sitio enlazado con las plataformas que ya us\u00e1s, para vender m\u00e1s y medir cada resultado en un solo lugar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-11c08249 e-con-full e-flex e-con e-parent\" data-id=\"11c08249\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53913d7d elementor-widget elementor-widget-spacer\" data-id=\"53913d7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-284abe8e elementor-widget elementor-widget-html\" data-id=\"284abe8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     TEXTO QUE SE ILUMINA CON EL SCROLL \u2014 Open Box Digital\r\n     Pegar TODO este bloque en un widget HTML de Elementor Pro.\r\n     Autocontenido: HTML + CSS + JS, sin librer\u00edas externas.\r\n     Fondo transparente: la secci\u00f3n la maneja Elementor (fondo oscuro).\r\n\r\n     Las palabras arrancan grises y se van \"encendiendo\" a blanco de\r\n     izquierda a derecha, siguiendo el orden de lectura, a medida que\r\n     el usuario scrollea. Reversible al subir.\r\n\r\n     v2: optimizado para m\u00f3vil \u2014 solo repinta las palabras que cambian\r\n     y el loop se apaga cuando no hay animaci\u00f3n pendiente.\r\n\r\n     Para editar los textos: cambi\u00e1 el contenido del <h2> y el <p>\r\n     (el JS los parte en palabras solo).\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* ====== Encapsulado: todo vive bajo el prefijo obds- ====== *\/\r\n  .obds-wrap,\r\n  .obds-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  .obds-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    text-align: center;          \/* \u2190 cambi\u00e1 a left si lo quer\u00e9s alineado a la izquierda *\/\r\n    background: transparent;\r\n  }\r\n\r\n  .obds-title {\r\n    font-family: inherit;        \/* hereda la tipograf\u00eda del tema *\/\r\n    font-size: 65px;\r\n    font-weight: 800;\r\n    line-height: 1.15;\r\n    letter-spacing: -0.02em;\r\n  }\r\n  \r\n  @media (max-width: 600px) {\r\n    .obds-title { font-size: 40px; }\r\n  }\r\n\r\n  .obds-text {\r\n    margin-top: 22px;\r\n    font-family: inherit;\r\n    font-size: 19px;\r\n    font-weight: 400;\r\n    line-height: 1.6;\r\n  }\r\n  \r\n  @media (max-width: 600px) {\r\n    .obds-text { font-size: 17px; }\r\n  }\r\n\r\n  \/* cada palabra es un span; el color lo maneja el JS palabra por palabra\r\n     (inline con important, para que el tema no pueda pisarlo) *\/\r\n  .obds-w { display: inline; }\r\n\r\n  \/* salto de l\u00ednea del t\u00edtulo solo en pantallas anchas (en mobile fluye solo) *\/\r\n  .obds-br { display: none; }\r\n  @media (min-width: 641px) {\r\n    .obds-br { display: inline; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obds-wrap\" id=\"obdsWrap\">\r\n  <h2 class=\"obds-title\" id=\"obdsTitle\">Un ecosistema digital <br class=\"obds-br\">para cada negocio<\/h2>\r\n  <p class=\"obds-text\" id=\"obdsText\">Transformamos la idea que tenes para tu marca en una web y plataforma online<\/p>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var wrap  = document.getElementById('obdsWrap');\r\n  var parts = [document.getElementById('obdsTitle'), document.getElementById('obdsText')];\r\n  if (!wrap || !parts[0] || !parts[1]) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     GRAY  \/ WHITE : opacidad del gris inicial y del blanco final.\r\n     BAND          : ancho de la onda en palabras (cu\u00e1ntas palabras est\u00e1n\r\n                     \"a medio encender\" a la vez \u2014 m\u00e1s = onda m\u00e1s suave).\r\n     START \/ END   : la iluminaci\u00f3n arranca cuando el texto entra al 88%\r\n                     del viewport y termina cuando su base llega al 45%.\r\n     EASE          : suavizado tipo inercia del avance.                  *\/\r\n  var GRAY  = 0.22;\r\n  var WHITE = 1.0;\r\n  var BAND  = 3;\r\n  var START = 0.88;\r\n  var END   = 0.45;\r\n  var EASE  = 0.12;\r\n  \/* ============================================= *\/\r\n\r\n  var reduced = window.matchMedia &&\r\n                window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- Partir los textos en palabras (en orden de lectura) ----------\r\n     Se respetan los <br> y espacios; cada palabra queda en un span .obds-w *\/\r\n  var words = [];\r\n  parts.forEach(function (el) {\r\n    var nodes = Array.prototype.slice.call(el.childNodes);\r\n    nodes.forEach(function (node) {\r\n      if (node.nodeType === 3) {                      \/* nodo de texto *\/\r\n        var frag = document.createDocumentFragment();\r\n        node.textContent.split(\/(\\s+)\/).forEach(function (piece) {\r\n          if (!piece) return;\r\n          if (\/^\\s+$\/.test(piece)) {\r\n            frag.appendChild(document.createTextNode(piece));\r\n          } else {\r\n            var s = document.createElement('span');\r\n            s.className = 'obds-w';\r\n            s.textContent = piece;\r\n            frag.appendChild(s);\r\n            words.push(s);\r\n          }\r\n        });\r\n        el.replaceChild(frag, node);\r\n      }\r\n      \/* los <br> u otros elementos se dejan tal cual *\/\r\n    });\r\n  });\r\n  var N = words.length;\r\n  if (!N) return;\r\n\r\n  \/* ---------- Aplica el estado para un progreso p (0 \u2192 1). Reversible ----------\r\n     Optimizado para m\u00f3vil: solo escribe el color de las palabras cuyo valor\r\n     realmente cambi\u00f3 (las que est\u00e1n dentro de la onda). Las ya blancas o\r\n     todav\u00eda grises no se tocan \u2192 m\u00ednimo repintado, scroll fluido. *\/\r\n  var lastA = [];\r\n  function apply(p) {\r\n    p = Math.min(1, Math.max(0, p));\r\n    var fill = p * (N + BAND) - BAND;   \/* posici\u00f3n de la onda en \"palabras\" *\/\r\n    for (var i = 0; i < N; i++) {\r\n      var w = Math.min(1, Math.max(0, (fill - i + BAND) \/ BAND));\r\n      var a = Math.round((GRAY + (WHITE - GRAY) * w) * 100) \/ 100;\r\n      if (lastA[i] === a) continue;     \/* sin cambio \u2192 sin escritura *\/\r\n      lastA[i] = a;\r\n      \/* inline + important: el color del tema no puede pisarlo *\/\r\n      words[i].style.setProperty('color', 'rgba(255,255,255,' + a + ')', 'important');\r\n    }\r\n  }\r\n\r\n  var target = 0;\r\n  var current = 0;\r\n\r\n  \/* p=0 cuando el texto asoma al START del viewport;\r\n     p=1 cuando su base sube hasta el END del viewport *\/\r\n  function readScroll() {\r\n    var rect = wrap.getBoundingClientRect();\r\n    var vh = window.innerHeight || 1;\r\n    var total = rect.height + vh * (START - END);\r\n    if (total <= 0) { target = 1; return; }\r\n    target = Math.min(1, Math.max(0, (vh * START - rect.top) \/ total));\r\n  }\r\n\r\n  \/* ---------- loop con rAF que se DUERME al llegar a destino ----------\r\n     Corre solo mientras la animaci\u00f3n avanza; al asentarse se apaga y no\r\n     consume nada. El pr\u00f3ximo scroll (o entrar al viewport) lo despierta. *\/\r\n  var active = false;\r\n  var running = false;\r\n  function loop() {\r\n    if (!active) { running = false; return; }\r\n    readScroll();\r\n    var d = target - current;\r\n    if (d < 0.001 && d > -0.001) {   \/* lleg\u00f3: asentar y dormir *\/\r\n      current = target;\r\n      apply(current);\r\n      running = false;\r\n      return;\r\n    }\r\n    current += d * EASE;\r\n    apply(current);\r\n    requestAnimationFrame(loop);\r\n  }\r\n  function start() {\r\n    if (!running) { running = true; requestAnimationFrame(loop); }\r\n  }\r\n\r\n  \/* prefers-reduced-motion: texto blanco completo, sin animaci\u00f3n *\/\r\n  if (reduced) {\r\n    apply(1);\r\n    return;\r\n  }\r\n\r\n  apply(0);\r\n\r\n  \/* el scroll despierta el loop (pasivo: no interfiere con el gesto);\r\n     wheel\/touchmove cubren smooth-scrolls que interceptan el evento nativo *\/\r\n  function wake() { if (active) start(); }\r\n  window.addEventListener('scroll', wake, { passive: true });\r\n  window.addEventListener('wheel', wake, { passive: true });\r\n  window.addEventListener('touchmove', wake, { passive: true });\r\n  window.addEventListener('resize', wake);\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function (entries) {\r\n      active = entries[0].isIntersecting;\r\n      if (active) start();\r\n    }, { rootMargin: '80px' }).observe(wrap);\r\n  } else {\r\n    active = true;\r\n    start();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a96ee1e elementor-widget elementor-widget-spacer\" data-id=\"5a96ee1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4acaa90b elementor-widget elementor-widget-html\" data-id=\"4acaa90b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CARRUSEL \"RULO\" 3D INFINITO (estilo trionn.com) \u2014 v6.2\r\n     Pegar TODO este c\u00f3digo en un widget \"HTML\" de Elementor Pro.\r\n     - GIRA SOLO, lento y continuo (sin depender del scroll).\r\n     - ARRASTRABLE: con el mouse o con el dedo (con inercia al soltar).\r\n       Se pausa mientras el cursor est\u00e1 sobre una imagen o arrastrando.\r\n     - INFINITO: el aro es un c\u00edrculo completo cerrado \u2014 despu\u00e9s de la\r\n       \u00faltima imagen sigue la primera, sin fin ni salto.\r\n     - OPTIMIZADO M\u00d3VIL: cach\u00e9 de estilos (solo escribe lo que cambia).\r\n     - ALTO JUSTO: la secci\u00f3n mide lo que mide el aro completo ya\r\n       proyectado en pantalla, INCLUYENDO la pose de hover (la imagen\r\n       levantada y agrandada) y el espacio de su sombra \u2192 nada se corta.\r\n     - La secci\u00f3n\/contenedor de Elementor debe ser de ancho completo\r\n       y sin padding para que ocupe toda la pantalla.\r\n     - El widget anula solo el padding\/margin de ARRIBA y ABAJO de los\r\n       contenedores de Elementor que lo envuelven (CSS + JS), sin tocar\r\n       el ancho ni el espaciado lateral.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* Prefijo \"tsc-\" para no chocar con estilos de Elementor *\/\r\n  .tsc-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    height: 420px; \/* fallback hasta que el JS mide el aro real *\/\r\n  }\r\n\r\n  \/* La ventana del carrusel llena el wrap (que mide lo que mide el aro) *\/\r\n  .tsc-sticky {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    perspective: 1600px;\r\n    perspective-origin: 50% 50%;\r\n    cursor: grab;\r\n    touch-action: pan-y;       \/* el dedo arrastra el aro en horizontal;\r\n                                  el scroll vertical de la p\u00e1gina sigue libre *\/\r\n  }\r\n  .tsc-sticky.tsc-dragging { cursor: grabbing; }\r\n\r\n  \/* El anillo completo: el JS lo inclina (rulo diagonal) y lo aleja *\/\r\n  .tsc-stage {\r\n    position: absolute;\r\n    inset: 0;\r\n    transform-style: preserve-3d;\r\n    will-change: transform;\r\n  }\r\n\r\n  .tsc-item {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    display: block;\r\n    width: clamp(300px, 46vw, 700px);\r\n    will-change: transform, opacity;\r\n    opacity: 0;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);\r\n    backface-visibility: hidden;\r\n    -webkit-backface-visibility: hidden;\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    transition: box-shadow 0.45s ease;\r\n  }\r\n\r\n  \/* Al despegarse del aro, la sombra se hunde (m\u00e1s lejos, m\u00e1s difusa) *\/\r\n  .tsc-item.tsc-hover {\r\n    box-shadow: 0 60px 130px rgba(0, 0, 0, 0.4);\r\n  }\r\n\r\n  .tsc-item img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    pointer-events: none;\r\n    user-select: none;\r\n    -webkit-user-drag: none;\r\n    transition: filter 0.45s ease;\r\n  }\r\n\r\n  .tsc-item.tsc-hover img {\r\n    filter: brightness(1.06);\r\n  }\r\n\r\n  .tsc-item:focus-visible {\r\n    outline: 2px solid rgba(255, 255, 255, 0.8);\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .tsc-item { width: 82vw; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"tsc-wrap\" id=\"tscWrap\">\r\n  <div class=\"tsc-sticky\" id=\"tscSticky\">\r\n    <div class=\"tsc-stage\" id=\"tscStage\">\r\n\r\n      <!-- ================= IM\u00c1GENES =================\r\n           Cada imagen es un link: reemplaz\u00e1 el href=\"#\" por tu URL.\r\n           Para abrir en pesta\u00f1a nueva agreg\u00e1: target=\"_blank\" rel=\"noopener\"\r\n           Agreg\u00e1 o quit\u00e1 <a class=\"tsc-item\"> seg\u00fan necesites: el aro\r\n           siempre se reparte los 360\u00b0 entre las que haya. -->\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/2.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/3.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/4.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/5.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/12.png\" alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/11.png\" alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/10.png\" alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/6.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/8.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/9.png\"  alt=\"\"><\/a>\r\n      <a class=\"tsc-item\" href=\"#\"><img decoding=\"async\" src=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/7.png\"  alt=\"\"><\/a>\r\n      <!-- ============================================ -->\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  var wrap   = document.getElementById('tscWrap');\r\n  var sticky = document.getElementById('tscSticky');\r\n  var stage  = document.getElementById('tscStage');\r\n  var items = Array.prototype.slice.call(stage.querySelectorAll('.tsc-item'));\r\n  var N = items.length;\r\n  if (!wrap || N === 0) return;\r\n\r\n  \/* ---------- SIN ESPACIO ARRIBA\/ABAJO (refuerzo por JS) ----------\r\n     Sube por los contenedores de Elementor que envuelven este widget\r\n     (widget \u2192 columna \u2192 contenedor \u2192 secci\u00f3n) y les fuerza padding y\r\n     margin vertical en 0 con !important inline: gana contra cualquier\r\n     estilo del tema o del editor. Se detiene al salir de Elementor,\r\n     as\u00ed no toca el resto de la p\u00e1gina. *\/\r\n  function killSpace() {\r\n    var el = wrap.parentElement;\r\n    var hops = 0;\r\n    var isElementor = \/(^|\\s)(elementor-widget-container|elementor-widget|elementor-element|elementor-column|elementor-row|elementor-container|elementor-section|elementor-top-section|elementor-inner-section|e-con-inner|e-con|e-child|e-parent)(\\s|$|-)\/;\r\n    while (el && el !== document.body && hops < 10) {\r\n      var cls = el.className && typeof el.className === 'string' ? el.className : '';\r\n      if (isElementor.test(cls)) {\r\n        el.style.setProperty('padding-top', '0', 'important');\r\n        el.style.setProperty('padding-bottom', '0', 'important');\r\n        el.style.setProperty('margin-top', '0', 'important');\r\n        el.style.setProperty('margin-bottom', '0', 'important');\r\n        \/* contenedores flexbox de Elementor: tambi\u00e9n las variables de\r\n           padding en bloque que usan los e-con *\/\r\n        if (\/(^|\\s)(e-con|e-con-inner)(\\s|$|-)\/.test(cls)) {\r\n          el.style.setProperty('--padding-block-start', '0px', 'important');\r\n          el.style.setProperty('--padding-block-end', '0px', 'important');\r\n          el.style.setProperty('--margin-block-start', '0px', 'important');\r\n          el.style.setProperty('--margin-block-end', '0px', 'important');\r\n        }\r\n        \/* al llegar a la secci\u00f3n de nivel superior, ya est\u00e1 *\/\r\n        if (\/(^|\\s)(elementor-top-section|e-parent)(\\s|$)\/.test(cls)) break;\r\n      }\r\n      el = el.parentElement;\r\n      hops++;\r\n    }\r\n    wrap.style.setProperty('margin-top', '0', 'important');\r\n    wrap.style.setProperty('margin-bottom', '0', 'important');\r\n  }\r\n  killSpace();\r\n  window.addEventListener('load', killSpace);\r\n  setTimeout(killSpace, 500); \/* por si Elementor re-renderiza tarde *\/\r\n\r\n  \/* ================== AJUSTES ==================\r\n     SECS_PER_IMG : segundos que tarda el giro autom\u00e1tico en pasar de una\r\n                    imagen a la siguiente. M\u00e1s alto = m\u00e1s lento.\r\n     PAUSE_ON_HOVER : true = el giro se pausa con el cursor sobre una imagen.\r\n     PAUSE_ON_SCROLL : true = el giro se congela mientras el usuario scrollea\r\n                    la p\u00e1gina (y retoma solo al frenar). En false el aro\r\n                    nunca deja de moverse; la cach\u00e9 de estilos igual\r\n                    mantiene el costo por frame al m\u00ednimo.\r\n     DRAG_SENS    : sensibilidad del arrastre (grados por px arrastrado).\r\n     FRICTION     : inercia al soltar (0.90 corta r\u00e1pido \u2014 0.97 patina largo).\r\n     GAP          : separaci\u00f3n entre im\u00e1genes (1 = se tocan, 1.08 = 8% aire).\r\n                    El \u00e1ngulo entre im\u00e1genes ya no se elige: es 360\u00b0\/N para\r\n                    que el aro cierre perfecto (infinito real).\r\n     TILT_X       : inclinaci\u00f3n vertical del aro (arco el\u00edptico).\r\n     TILT_Z       : inclinaci\u00f3n diagonal del aro (el \"rulo\").\r\n     FADE_START \/ FADE_END : \u00e1ngulos (\u00b0) donde las im\u00e1genes laterales\r\n                    empiezan a desvanecerse y desaparecen del todo.\r\n     FIT_PAD      : aire extra (px) arriba y abajo del aro medido (el alto\r\n                    de la secci\u00f3n se calcula solo midiendo el aro real,\r\n                    INCLUYENDO la pose de hover: levantada y agrandada,\r\n                    as\u00ed el crecimiento nunca se corta contra el borde).\r\n     SHADOW_PAD   : franja extra (px) solo ABAJO para que la sombra grande\r\n                    del hover no se corte contra el fin de la secci\u00f3n.\r\n\r\n     Hover (la tarjeta se despega del aro):\r\n     HOVER_LIFT      : cu\u00e1nto se acerca hacia el espectador (px).\r\n     HOVER_STRAIGHT  : cu\u00e1nto se endereza para mirar de frente (0 \u2014 1).\r\n     HOVER_SCALE     : cu\u00e1nto crece (0.05 = 5%).\r\n     HOVER_EASE      : velocidad de la animaci\u00f3n de despegue.              *\/\r\n  var SECS_PER_IMG    = 7;\r\n  var PAUSE_ON_HOVER  = true;\r\n  var PAUSE_ON_SCROLL = false;\r\n  var DRAG_SENS       = 0.22;\r\n  var FRICTION        = 0.94;\r\n  var GAP        = 1.08;\r\n  var TILT_X     = 9;\r\n  var TILT_Z     = 7;\r\n  var FADE_START = 35;\r\n  var FADE_END   = 60;\r\n  var FIT_PAD    = 18;\r\n  var SHADOW_PAD = 100;\r\n\r\n  var HOVER_LIFT     = 90;\r\n  var HOVER_STRAIGHT = 0.45;\r\n  var HOVER_SCALE    = 0.05;\r\n  var HOVER_EASE     = 0.12;\r\n  \/* ============================================= *\/\r\n\r\n  var STEP = 360 \/ N;              \/\/ aro cerrado: \u00e1ngulo exacto entre im\u00e1genes\r\n  var AUTO_DPS = STEP \/ SECS_PER_IMG;  \/\/ velocidad autom\u00e1tica (grados\/segundo)\r\n\r\n  var reduced = window.matchMedia &&\r\n                window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  var radius = 0;\r\n  var rot = 0;          \/\/ rotaci\u00f3n acumulada del aro (grados, sin l\u00edmite)\r\n  var vel = 0;          \/\/ inercia del arrastre (grados\/frame)\r\n  var dragging = false;\r\n\r\n  \/\/ Estado de hover por imagen: \"lift\" va de 0 (en el aro) a 1 (despegada)\r\n  var hovered = -1;\r\n  var lifts = [];\r\n  items.forEach(function (el, i) {\r\n    lifts.push(0);\r\n    el.addEventListener('mouseenter', function () { hovered = i; });\r\n    el.addEventListener('mouseleave', function () { if (hovered === i) hovered = -1; });\r\n  });\r\n\r\n  \/\/ \u00e1ngulo normalizado a [-180, 180): 0\u00b0 = frente al espectador\r\n  function wrapAng(a) {\r\n    a = a % 360;\r\n    if (a < -180) a += 360;\r\n    if (a >= 180) a -= 360;\r\n    return a;\r\n  }\r\n\r\n  \/\/ Inclina el aro y lo aleja; fitOff es la correcci\u00f3n vertical que\r\n  \/\/ calcula fitHeight() para que el aro quede centrado en la secci\u00f3n.\r\n  var fitOff = 0;\r\n  function applyStage() {\r\n    var dy = radius * Math.sin(TILT_X * Math.PI \/ 180) + fitOff;\r\n    stage.style.transform =\r\n      'translateY(' + dy.toFixed(1) + 'px) ' +\r\n      'translateZ(' + (-radius) + 'px) ' +\r\n      'rotateX(' + TILT_X + 'deg) ' +\r\n      'rotateZ(' + TILT_Z + 'deg)';\r\n  }\r\n\r\n  \/\/ Mide el aro completo ya proyectado en pantalla (con inclinaci\u00f3n y\r\n  \/\/ perspectiva reales), ajusta el alto de la secci\u00f3n para que ninguna\r\n  \/\/ imagen visible se corte sin sobrar pantalla, y recentra el aro\r\n  \/\/ verticalmente. Mide DOS poses por imagen \u2014 en reposo y en hover\r\n  \/\/ (levantada, enderezada y agrandada) \u2014 y usa la uni\u00f3n de ambas: as\u00ed\r\n  \/\/ el crecimiento del hover nunca se corta contra los bordes. Abajo\r\n  \/\/ reserva adem\u00e1s SHADOW_PAD px para la sombra grande del hover.\r\n  \/\/ Restaura todo al final; corre en un solo layout, no se ve.\r\n  function fitHeight() {\r\n    var saved = [];\r\n    var i, j, el, ang;\r\n    for (i = 0; i < N; i++) {\r\n      el = items[i];\r\n      saved.push({ t: el.style.transform, v: el.style.visibility, o: el.style.opacity });\r\n      if (Math.abs(wrapAng(i * STEP)) < FADE_END) {\r\n        el.style.visibility = 'visible';\r\n        el.style.opacity = '0';           \/* medible pero invisible: sin flash *\/\r\n      } else {\r\n        el.style.visibility = 'hidden';\r\n      }\r\n    }\r\n    var wr = wrap.getBoundingClientRect();\r\n    var minT = Infinity, maxB = -Infinity;\r\n    for (var pose = 0; pose < 2; pose++) {  \/* 0 = reposo, 1 = hover *\/\r\n      var lift = pose;\r\n      for (j = 0; j < N; j++) {\r\n        ang = wrapAng(j * STEP);\r\n        if (Math.abs(ang) >= FADE_END) continue;\r\n        items[j].style.transform =\r\n          'translate(-50%, -50%) rotateY(' + ang.toFixed(3) +\r\n          'deg) translateZ(' + radius.toFixed(1) + 'px) ' +\r\n          'rotateY(' + (-ang * HOVER_STRAIGHT * lift).toFixed(3) + 'deg) ' +\r\n          'translateZ(' + (HOVER_LIFT * lift).toFixed(1) + 'px) ' +\r\n          'scale(' + (1 + HOVER_SCALE * lift).toFixed(4) + ')';\r\n      }\r\n      for (j = 0; j < N; j++) {\r\n        if (Math.abs(wrapAng(j * STEP)) >= FADE_END) continue;\r\n        var r = items[j].getBoundingClientRect();\r\n        if (r.top < minT) minT = r.top;\r\n        if (r.bottom > maxB) maxB = r.bottom;\r\n      }\r\n    }\r\n    for (var k = 0; k < N; k++) {\r\n      items[k].style.transform = saved[k].t;\r\n      items[k].style.visibility = saved[k].v;\r\n      items[k].style.opacity = saved[k].o;\r\n    }\r\n    if (maxB > minT) {\r\n      \/\/ recentrar con padding asim\u00e9trico: FIT_PAD arriba y\r\n      \/\/ FIT_PAD + SHADOW_PAD abajo (la sombra del hover cae hacia abajo).\r\n      \/\/ Las tarjetas cuelgan del centro, as\u00ed que la correcci\u00f3n se mantiene\r\n      \/\/ al cambiar el alto.\r\n      fitOff -= (minT + maxB) \/ 2 - (wr.top + wr.height \/ 2 - SHADOW_PAD \/ 2);\r\n      applyStage();\r\n      wrap.style.height = Math.ceil(maxB - minT + FIT_PAD * 2 + SHADOW_PAD) + 'px';\r\n    }\r\n  }\r\n\r\n  function setSizes() {\r\n    var w = items[0].offsetWidth || 500;\r\n\r\n    \/\/ Radio del anillo calculado desde el ancho real de la imagen para\r\n    \/\/ garantizar la separaci\u00f3n GAP entre im\u00e1genes vecinas (con el paso\r\n    \/\/ fijo de 360\/N que cierra el c\u00edrculo)\r\n    radius = (w * GAP) \/ (2 * Math.sin((STEP \/ 2) * Math.PI \/ 180));\r\n    applyStage();\r\n\r\n    \/\/ Alto de la secci\u00f3n = alto real del aro proyectado. Tres pasadas:\r\n    \/\/ cada una refina la anterior (al cambiar alto y centrado se mueve\r\n    \/\/ la perspectiva y la proyecci\u00f3n var\u00eda un poquito hasta converger).\r\n    fitHeight();\r\n    fitHeight();\r\n    fitHeight();\r\n  }\r\n\r\n  \/* ---------- ARRASTRE (mouse \/ dedo) con inercia ---------- *\/\r\n  var lastX = 0, movedTotal = 0;\r\n  sticky.addEventListener('pointerdown', function (e) {\r\n    dragging = true;\r\n    movedTotal = 0;\r\n    lastX = e.clientX;\r\n    vel = 0;\r\n    sticky.classList.add('tsc-dragging');\r\n    if (sticky.setPointerCapture) {\r\n      try { sticky.setPointerCapture(e.pointerId); } catch (err) {}\r\n    }\r\n  });\r\n  sticky.addEventListener('pointermove', function (e) {\r\n    if (!dragging) return;\r\n    var dx = e.clientX - lastX;\r\n    lastX = e.clientX;\r\n    movedTotal += Math.abs(dx);\r\n    rot -= dx * DRAG_SENS;                       \/\/ arrastrar a la derecha = aro a la derecha\r\n    vel = vel * 0.4 + (-dx * DRAG_SENS) * 0.6;   \/\/ velocidad suavizada \u2192 inercia al soltar\r\n  });\r\n  function endDrag() {\r\n    dragging = false;\r\n    sticky.classList.remove('tsc-dragging');\r\n  }\r\n  sticky.addEventListener('pointerup', endDrag);\r\n  sticky.addEventListener('pointercancel', endDrag);\r\n\r\n  \/\/ si hubo arrastre real, el click sobre un link no debe disparar\r\n  sticky.addEventListener('click', function (e) {\r\n    if (movedTotal > 6) { e.preventDefault(); e.stopPropagation(); }\r\n  }, true);\r\n\r\n  \/* ---------- pausa durante el scroll de la p\u00e1gina (opcional) ---------- *\/\r\n  var scrollingUntil = 0;\r\n  if (PAUSE_ON_SCROLL) {\r\n    window.addEventListener('scroll', function () {\r\n      scrollingUntil = performance.now() + 150;\r\n    }, { passive: true });\r\n  }\r\n\r\n  \/* ---------- render continuo (pausado fuera del viewport) ----------\r\n     CACH\u00c9 DE ESTILOS: cada imagen recuerda lo \u00faltimo que se le escribi\u00f3\r\n     y solo se toca el DOM cuando el valor realmente cambi\u00f3. Las ocultas\r\n     (la mitad de atr\u00e1s del aro) no reciben NINGUNA escritura \u2014 clave\r\n     para que el scroll en m\u00f3vil no se trabe. *\/\r\n  var lastStyles = items.map(function () {\r\n    return { vis: '', op: '', pe: '', tr: '', hov: false };\r\n  });\r\n  function setStyles(i, vis, op, pe, tr, hov) {\r\n    var el = items[i], s = lastStyles[i];\r\n    if (s.vis !== vis) { el.style.visibility = vis; s.vis = vis; }\r\n    if (s.op !== op) { el.style.opacity = op; s.op = op; }\r\n    if (s.pe !== pe) { el.style.pointerEvents = pe; s.pe = pe; }\r\n    if (tr !== null && s.tr !== tr) { el.style.transform = tr; s.tr = tr; }\r\n    if (s.hov !== hov) { el.classList.toggle('tsc-hover', hov); s.hov = hov; }\r\n  }\r\n\r\n  var active = false;\r\n  var running = false;\r\n  var lastT = 0;\r\n\r\n  function render(t) {\r\n    if (!active) { running = false; lastT = 0; return; }\r\n    var dt = lastT ? Math.min(50, t - lastT) : 16.7;   \/\/ ms del frame (con tope)\r\n    lastT = t;\r\n\r\n    if (!dragging) {\r\n      var paused = reduced ||\r\n                   (PAUSE_ON_HOVER && hovered !== -1) ||\r\n                   (PAUSE_ON_SCROLL && t < scrollingUntil);\r\n      rot += (paused ? 0 : AUTO_DPS * dt \/ 1000) + vel;\r\n      vel *= FRICTION;\r\n      if (vel > -0.002 && vel < 0.002) vel = 0;\r\n    }\r\n    if (rot > 36000 || rot < -36000) rot %= 360;       \/\/ evita floats gigantes\r\n\r\n    for (var i = 0; i < N; i++) {\r\n      var ang = wrapAng(i * STEP - rot);   \/\/ 0\u00b0 = frente al espectador\r\n      var abs = Math.abs(ang);\r\n\r\n      \/\/ animar el despegue\/aterrizaje de esta tarjeta\r\n      var liftTarget = (i === hovered) ? 1 : 0;\r\n      lifts[i] += (liftTarget - lifts[i]) * HOVER_EASE;\r\n      if (lifts[i] < 0.001) lifts[i] = 0;\r\n      var lift = lifts[i];\r\n\r\n      if (abs >= FADE_END && lift === 0) { \/\/ fuera del arco visible\r\n        \/\/ oculta: sin escrituras hasta que reaparezca (transform sin tocar)\r\n        setStyles(i, 'hidden', '0', 'none', null, false);\r\n        continue;\r\n      }\r\n\r\n      var opacity = abs <= FADE_START\r\n        ? 1\r\n        : Math.max(0, 1 - (abs - FADE_START) \/ (FADE_END - FADE_START));\r\n      \/\/ una tarjeta despegada no se desvanece aunque el aro siga girando\r\n      opacity = Math.max(opacity, lift);\r\n\r\n      \/\/ Posici\u00f3n sobre el aro + despegue en hover: la tarjeta gira en su\r\n      \/\/ propio eje para mirar de frente, se acerca al espectador y crece.\r\n      setStyles(\r\n        i,\r\n        'visible',\r\n        opacity.toFixed(3),\r\n        \/\/ las muy desvanecidas no reciben clicks (evita clicks \"fantasma\")\r\n        (opacity < 0.5 && lift < 0.1) ? 'none' : 'auto',\r\n        'translate(-50%, -50%) ' +\r\n          'rotateY(' + ang.toFixed(3) + 'deg) ' +\r\n          'translateZ(' + radius.toFixed(1) + 'px) ' +\r\n          'rotateY(' + (-ang * HOVER_STRAIGHT * lift).toFixed(3) + 'deg) ' +\r\n          'translateZ(' + (HOVER_LIFT * lift).toFixed(1) + 'px) ' +\r\n          'scale(' + (1 + HOVER_SCALE * lift).toFixed(4) + ')',\r\n        lift > 0.15\r\n      );\r\n    }\r\n    requestAnimationFrame(render);\r\n  }\r\n\r\n  function start() {\r\n    if (!running) { running = true; lastT = 0; requestAnimationFrame(render); }\r\n  }\r\n\r\n  window.addEventListener('resize', setSizes);\r\n\r\n  \/\/ re-medir cuando cargue la primera imagen (define el radio real)\r\n  var firstImg = items[0].querySelector('img');\r\n  if (firstImg && !firstImg.complete) {\r\n    firstImg.addEventListener('load', setSizes);\r\n  }\r\n\r\n  setSizes();\r\n\r\n  \/\/ girar solo cuando la secci\u00f3n est\u00e1 a la vista (ahorra CPU\/bater\u00eda)\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function (entries) {\r\n      active = entries[0].isIntersecting;\r\n      if (active) start();\r\n    }, { rootMargin: '120px' }).observe(wrap);\r\n  } else {\r\n    active = true;\r\n    start();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54cb5008 elementor-widget elementor-widget-html\" data-id=\"54cb5008\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BOTONES CTA (WIDGET INDEPENDIENTE)\r\n     Pegar en un widget HTML de Elementor. No necesita JS.\r\n     \u2705 Bot\u00f3n primario con gradiente + borde giratorio (conic)\r\n     \u2705 Bot\u00f3n ghost con borde giratorio propio\r\n     \u2705 Mismo ancho ambos, apilan bien en m\u00f3vil\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar los destinos: edit\u00e1 los href=\"#planes\".\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-cta\">\r\n  <a class=\"obd-btn obd-btn-primary\" href=\"#planes\">Soluciones para tu rubro<\/a>\r\n  <a class=\"obd-btn obd-btn-ghost\" href=\"#planes\">Ver nuestros planes<\/a>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;\r\n    font-family:'Manrope',sans-serif; }\r\n\r\n  .obd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n    min-width:min(260px, 100%);                 \/* ambos botones al mismo ancho *\/\r\n    padding:13px 26px; border-radius:100px;\r\n    font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; text-decoration:none;\r\n    box-sizing:border-box;\r\n    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, color .3s; }\r\n\r\n  .obd-btn-primary,\r\n  .obd-btn-primary:link,\r\n  .obd-btn-primary:visited{ background:linear-gradient(135deg,#2dc1e5,#5ad6f5); color:#fff !important;\r\n    box-shadow:0 8px 30px rgba(45,193,229,.4); }\r\n  .obd-btn-primary:hover,\r\n  .obd-btn-primary:focus-visible{ color:#fff !important; transform:translateY(-2px);\r\n    box-shadow:0 14px 44px rgba(45,193,229,.55); }\r\n\r\n  .obd-btn-ghost,\r\n  .obd-btn-ghost:link,\r\n  .obd-btn-ghost:visited{ background:rgba(255,255,255,.05); color:#fff !important;\r\n    border:1px solid rgba(255,255,255,.18); }\r\n  .obd-btn-ghost:hover,\r\n  .obd-btn-ghost:focus-visible{ color:#fff !important; border-color:#2dc1e5;\r\n    background:rgba(45,193,229,.10); transform:translateY(-2px); }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n primario ---- *\/\r\n  @property --obd-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-primary{ position:relative; }\r\n  .obd-btn-primary::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a),\r\n      transparent 0deg, #7df0d0 40deg, #eafff8 72deg, #5ad6f5 104deg, transparent 165deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin 4.5s linear infinite; opacity:.7; pointer-events:none; }\r\n  @keyframes obdBorderSpin{ to{ --obd-a:360deg; } }\r\n  .obd-btn-primary:hover::before,\r\n  .obd-btn-primary:focus-visible::before{ opacity:1; animation-duration:1.5s; }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n ghost ---- *\/\r\n  @property --obd-a2{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-ghost{ position:relative; }\r\n  .obd-btn-ghost::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a2),\r\n      transparent 0deg, #5b3df0 40deg, #2dc1e5 80deg, #7df0d0 115deg, transparent 175deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin2 5s linear infinite; opacity:.6; pointer-events:none; }\r\n  @keyframes obdBorderSpin2{ to{ --obd-a2:360deg; } }\r\n  .obd-btn-ghost:hover::before,\r\n  .obd-btn-ghost:focus-visible::before{ opacity:1; animation-duration:1.7s; }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-btn-primary::before{ animation:none; }\r\n    .obd-btn-ghost::before{ animation:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6446961b elementor-widget elementor-widget-spacer\" data-id=\"6446961b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-32775912 e-con-full e-flex e-con e-parent\" data-id=\"32775912\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b9a564c elementor-widget elementor-widget-html\" data-id=\"3b9a564c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SECCI\u00d3N 4 \u2014 LA CAJA SE ABRE Y SALE EL ECOSISTEMA (scroll-driven)\r\n     Pegar TODO este c\u00f3digo en un widget \"HTML\" de Elementor Pro.\r\n\r\n     REQUISITOS DE LA SECCI\u00d3N EN ELEMENTOR:\r\n     - La secci\u00f3n NO debe tener overflow:hidden (rompe position:sticky)\r\n       ni Motion Effects aplicados.\r\n     - FONDO: la secci\u00f3n YA NO necesita imagen ni video de fondo \u2014 el\r\n       widget trae su propio cielo estrellado con nebulosa (CSS puro).\r\n       Dej\u00e1 la secci\u00f3n con fondo s\u00f3lido #0d0d14 para que el borde\r\n       superior\/inferior del widget empalme sin cortes.\r\n     - Secci\u00f3n de ancho completo, sin padding.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* Prefijo \u00fanico \"obxe-\" para no colisionar con otros widgets del sitio *\/\r\n  .obxe-wrap {\r\n    position: relative;\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);   \/* full-bleed aunque la secci\u00f3n sea boxed *\/\r\n    background: #0d0d14;             \/* base s\u00f3lida del fondo propio del widget *\/\r\n    \/* la altura del track (px) la fija el JS con obdLVH() *\/\r\n  }\r\n\r\n  .obxe-sticky {\r\n    position: sticky;\r\n    top: 0;\r\n    width: 100%;\r\n    overflow: hidden;                \/* permitido ac\u00e1: solo rompe sticky en ANCESTROS *\/\r\n    \/* la altura (px) la fija el JS con obdLVH() *\/\r\n  }\r\n\r\n  .obxe-stage {\r\n    --obxe-s: clamp(160px, 20vw, 260px);   \/* tama\u00f1o del cubo *\/\r\n    --obxe-c1: 30, 90, 255;                \/* azul principal (r,g,b) *\/\r\n    --obxe-c2: 34, 211, 238;               \/* cian de acento (r,g,b) *\/\r\n    position: absolute;\r\n    inset: 0;\r\n  }\r\n\r\n  \/* ====== FONDO: CIELO ESTRELLADO EN CSS PURO (sin canvas, sin JS) ======\r\n     Va DETR\u00c1S de todo (z-index 1 < tapa 2 < texto 3 < glow 4 < escena 5).\r\n     Tres capas de estrellas que titilan a ritmos distintos y derivan\r\n     lent\u00edsimo, m\u00e1s una nebulosa azul\/violeta que respira. *\/\r\n  .obxe-sky {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    background: #0d0d14;\r\n  }\r\n\r\n  \/* nebulosa: manchas de luz difusas que derivan y respiran (90 s por ciclo) *\/\r\n  .obxe-sky-neb {\r\n    position: absolute;\r\n    inset: -22%;\r\n    background:\r\n      radial-gradient(45% 55% at 22% 28%, rgba(76, 201, 240, 0.13), transparent 70%),\r\n      radial-gradient(50% 60% at 78% 30%, rgba(124, 77, 255, 0.11), transparent 70%),\r\n      radial-gradient(55% 50% at 50% 80%, rgba(56, 138, 221, 0.12), transparent 70%);\r\n    animation: obxeNeb 90s ease-in-out infinite alternate;\r\n    will-change: transform;\r\n  }\r\n  @keyframes obxeNeb {\r\n    from { transform: translate(-2%, -1%) scale(1); }\r\n    to   { transform: translate(2%, 1.5%) scale(1.08); }\r\n  }\r\n\r\n  \/* estrellas: cada capa es un patr\u00f3n de puntitos que se repite por toda la\r\n     pantalla; el drift mueve el patr\u00f3n (vuelve al inicio sin salto porque el\r\n     desplazamiento coincide con el tama\u00f1o del patr\u00f3n) y la opacidad titila *\/\r\n  .obxe-sky-stars {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-repeat: repeat;\r\n  }\r\n  .obxe-s1 {\r\n    background-image:\r\n      radial-gradient(1.6px 1.6px at 27px 45px,  rgba(200, 230, 255, 0.90) 50%, transparent 100%),\r\n      radial-gradient(1.1px 1.1px at 133px 165px, rgba(185, 220, 255, 0.65) 50%, transparent 100%),\r\n      radial-gradient(2.1px 2.1px at 254px 82px,  rgba(215, 238, 255, 0.80) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 345px 275px, rgba(180, 215, 255, 0.55) 50%, transparent 100%),\r\n      radial-gradient(1.4px 1.4px at 421px 372px, rgba(200, 230, 255, 0.70) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 92px 353px,  rgba(180, 215, 255, 0.50) 50%, transparent 100%),\r\n      radial-gradient(1.8px 1.8px at 189px 431px, rgba(210, 235, 255, 0.85) 50%, transparent 100%),\r\n      radial-gradient(1.2px 1.2px at 313px 158px, rgba(190, 222, 255, 0.60) 50%, transparent 100%);\r\n    background-size: 480px 480px;\r\n    animation: obxeDrift1 260s linear infinite, obxeTw1 5.2s ease-in-out infinite alternate;\r\n  }\r\n  .obxe-s2 {\r\n    background-image:\r\n      radial-gradient(1.2px 1.2px at 64px 112px,  rgba(190, 224, 255, 0.70) 50%, transparent 100%),\r\n      radial-gradient(1.9px 1.9px at 208px 296px, rgba(212, 236, 255, 0.85) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 366px 57px,  rgba(180, 216, 255, 0.55) 50%, transparent 100%),\r\n      radial-gradient(1.5px 1.5px at 471px 227px, rgba(198, 228, 255, 0.75) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 552px 442px, rgba(182, 218, 255, 0.50) 50%, transparent 100%),\r\n      radial-gradient(1.3px 1.3px at 141px 501px, rgba(192, 225, 255, 0.65) 50%, transparent 100%),\r\n      radial-gradient(1.7px 1.7px at 435px 388px, rgba(206, 232, 255, 0.80) 50%, transparent 100%),\r\n      radial-gradient(1.1px 1.1px at 297px 476px, rgba(186, 220, 255, 0.55) 50%, transparent 100%);\r\n    background-size: 620px 620px;\r\n    animation: obxeDrift2 320s linear infinite, obxeTw2 7.3s ease-in-out infinite alternate;\r\n  }\r\n  .obxe-s3 {\r\n    background-image:\r\n      radial-gradient(1.0px 1.0px at 118px 202px, rgba(182, 218, 255, 0.45) 50%, transparent 100%),\r\n      radial-gradient(1.4px 1.4px at 331px 118px, rgba(196, 227, 255, 0.60) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 512px 331px, rgba(180, 215, 255, 0.42) 50%, transparent 100%),\r\n      radial-gradient(1.6px 1.6px at 646px 512px, rgba(202, 230, 255, 0.68) 50%, transparent 100%),\r\n      radial-gradient(1.1px 1.1px at 219px 617px, rgba(184, 219, 255, 0.48) 50%, transparent 100%),\r\n      radial-gradient(1.3px 1.3px at 456px 683px, rgba(192, 224, 255, 0.55) 50%, transparent 100%),\r\n      radial-gradient(1.0px 1.0px at 692px 143px, rgba(180, 216, 255, 0.40) 50%, transparent 100%);\r\n    background-size: 760px 760px;\r\n    animation: obxeDrift3 400s linear infinite, obxeTw3 9.1s ease-in-out infinite alternate;\r\n  }\r\n\r\n  \/* drift lent\u00edsimo (~2-3 px\/s); el destino = tama\u00f1o del patr\u00f3n \u2192 loop perfecto *\/\r\n  @keyframes obxeDrift1 { to { background-position: 480px 480px; } }\r\n  @keyframes obxeDrift2 { to { background-position: -620px 620px; } }\r\n  @keyframes obxeDrift3 { to { background-position: 760px -760px; } }\r\n\r\n  \/* twinkle: cada capa respira su brillo a un ritmo distinto *\/\r\n  @keyframes obxeTw1 { from { opacity: 0.55; } to { opacity: 1; } }\r\n  @keyframes obxeTw2 { from { opacity: 1; }    to { opacity: 0.45; } }\r\n  @keyframes obxeTw3 { from { opacity: 0.65; } to { opacity: 1; } }\r\n\r\n  \/* tapa clara inicial: oculta el cielo estrellado hasta que el scroll la desvanece *\/\r\n  .obxe-cover {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    background: #f4f2ee;   \/* \u2190 color del fondo claro inicial *\/\r\n    will-change: opacity;\r\n  }\r\n\r\n  \/* texto gigante de la intro (el JS anima color, salida y opacidad) *\/\r\n  .obxe-bigtext {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 3;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0;\r\n    padding: 0 4vw;\r\n    text-align: center;\r\n    font-weight: 800;\r\n    font-size: clamp(2.6rem, 7vw, 8.5rem);\r\n    line-height: 1.2;\r\n    letter-spacing: -0.02em;\r\n    color: #191919;        \/* color oscuro inicial *\/\r\n    pointer-events: none;\r\n    will-change: transform, opacity;\r\n  }\r\n  .obxe-bigtext .obxe-word   { display: inline-block; white-space: nowrap; }\r\n  .obxe-bigtext .obxe-letter { display: inline-block; will-change: transform, opacity; }\r\n\r\n  \/* resplandor de fondo detr\u00e1s de la caja (se intensifica al abrirse) *\/\r\n  .obxe-glow {\r\n    position: absolute;\r\n    z-index: 4;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 70vmin;\r\n    height: 70vmin;\r\n    margin: -35vmin 0 0 -35vmin;\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle,\r\n                rgba(var(--obxe-c2), 0.30) 0%,\r\n                rgba(var(--obxe-c1), 0.16) 40%,\r\n                rgba(var(--obxe-c1), 0) 70%);\r\n    opacity: 0.18;\r\n    pointer-events: none;\r\n    will-change: opacity;\r\n  }\r\n\r\n  .obxe-scene {\r\n    position: absolute;\r\n    inset: 0;\r\n    \/* z-index EXPL\u00cdCITO: el perspective convierte a la escena en una capa\r\n       propia y sin esto quedaba en nivel 0, DEBAJO del cielo (nivel 1) \u2014\r\n       el cielo opaco tapaba la caja. Con 5 queda: cielo 1 < tapa 2 <\r\n       texto 3 < glow 4 < caja 5 < tarjetas 6. *\/\r\n    z-index: 5;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    perspective: 1300px;\r\n  }\r\n\r\n  .obxe-boxwrap {\r\n    position: relative;\r\n    z-index: 5;\r\n    transform-style: preserve-3d;\r\n    will-change: transform, opacity;\r\n    opacity: 0;\r\n    filter: drop-shadow(0 0 40px rgba(var(--obxe-c1), 0.45))\r\n            drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));\r\n  }\r\n\r\n  .obxe-cube {\r\n    position: relative;\r\n    width: var(--obxe-s);\r\n    height: var(--obxe-s);\r\n    transform-style: preserve-3d;\r\n    will-change: transform;\r\n  }\r\n\r\n  .obxe-face {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transform-style: preserve-3d;    \/* las solapas (hijas) viven en 3D *\/\r\n    background: linear-gradient(135deg,\r\n                rgba(var(--obxe-c1), 0.32) 0%,\r\n                rgba(var(--obxe-c1), 0.10) 55%,\r\n                rgba(var(--obxe-c2), 0.28) 100%);\r\n    border: 1.5px solid rgba(var(--obxe-c2), 0.85);\r\n    box-shadow: inset 0 0 35px rgba(var(--obxe-c2), 0.25);\r\n  }\r\n\r\n  .obxe-face span {\r\n    font-family: inherit;\r\n    font-size: calc(var(--obxe-s) * 0.09);\r\n    font-weight: 700;\r\n    letter-spacing: 0.35em;\r\n    text-indent: 0.35em;\r\n    color: rgba(255, 255, 255, 0.92);\r\n    text-shadow: 0 0 12px rgba(var(--obxe-c2), 0.9);\r\n  }\r\n\r\n  .obxe-f-front  { transform: rotateY(  0deg) translateZ(calc(var(--obxe-s) \/ 2)); }\r\n  .obxe-f-right  { transform: rotateY( 90deg) translateZ(calc(var(--obxe-s) \/ 2)); }\r\n  .obxe-f-back   { transform: rotateY(180deg) translateZ(calc(var(--obxe-s) \/ 2)); }\r\n  .obxe-f-left   { transform: rotateY(-90deg) translateZ(calc(var(--obxe-s) \/ 2)); }\r\n  .obxe-f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--obxe-s) \/ 2)); }\r\n\r\n  \/* Solapas de la tapa: una por cara lateral, bisagra en la arista superior\r\n     (transform-origin en el borde inferior de la solapa = arista de la caja).\r\n     Cerradas (rotateX(90deg)) forman la tapa; el JS las abre hacia afuera. *\/\r\n  .obxe-flap {\r\n    position: absolute;\r\n    left: 0;\r\n    top: calc(var(--obxe-s) * -0.5);\r\n    width: 100%;\r\n    height: calc(var(--obxe-s) * 0.5);\r\n    transform-origin: 50% 100%;\r\n    transform: rotateX(90deg);\r\n    background: linear-gradient(180deg,\r\n                rgba(var(--obxe-c2), 0.30) 0%,\r\n                rgba(var(--obxe-c1), 0.14) 100%);\r\n    border: 1.5px solid rgba(var(--obxe-c2), 0.85);\r\n    box-shadow: inset 0 0 20px rgba(var(--obxe-c2), 0.22);\r\n    will-change: transform;\r\n  }\r\n\r\n  \/* n\u00facleo de energ\u00eda dentro del cubo (se enciende al abrirse) *\/\r\n  .obxe-core {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: calc(var(--obxe-s) * 0.5);\r\n    height: calc(var(--obxe-s) * 0.5);\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%) scale(0.55);\r\n    opacity: 0.15;\r\n    background: radial-gradient(circle,\r\n                rgba(255, 255, 255, 0.95) 0%,\r\n                rgba(var(--obxe-c2), 0.65) 35%,\r\n                rgba(var(--obxe-c1), 0) 70%);\r\n    animation: obxePulse 2.6s ease-in-out infinite;\r\n    will-change: transform, opacity;\r\n  }\r\n\r\n  @keyframes obxePulse {\r\n    0%, 100% { filter: brightness(0.9); }\r\n    50%      { filter: brightness(1.25); }\r\n  }\r\n\r\n  \/* ====== TARJETAS DEL ECOSISTEMA (estilo glass oscuro existente) ====== *\/\r\n  .obxe-card {\r\n    position: absolute;\r\n    z-index: 6;\r\n    left: 50%;\r\n    top: 50%;\r\n    \/* las tarjetas desfilan por el CENTRO: nacen en la caja y suben con el\r\n       scroll; la ALTURA se unifica (el JS mide la m\u00e1s alta y la aplica a\r\n       todas) para que el desfile se vea parejo *\/\r\n    width: min(480px, 46vw);\r\n    padding: 24px 30px;\r\n    border-radius: 14px;\r\n    background: rgba(12, 16, 26, 0.62);\r\n    border: 1px solid rgba(255, 255, 255, 0.16);\r\n    backdrop-filter: blur(6px);\r\n    -webkit-backdrop-filter: blur(6px);\r\n    color: #fff;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    will-change: transform, opacity;\r\n  }\r\n  \/* color expl\u00edcito: los temas de WordPress suelen imponer su color de\r\n     headings (por eso se ve\u00edan negros) \u2014 esto lo pisa *\/\r\n  .obxe-card h3 { margin: 0 0 10px; font-size: 1.4rem; font-weight: 700; color: #ffffff; }\r\n  .obxe-card p  { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #ffffff; opacity: 0.85; }\r\n\r\n  \/* ====== MOBILE ====== *\/\r\n  @media (max-width: 880px) {\r\n    .obxe-stage { --obxe-s: clamp(110px, 32vw, 170px); }\r\n    .obxe-card {\r\n      width: min(340px, 80vw);   \/* desfile en columna: tarjeta ancha y legible *\/\r\n      padding: 14px 16px;\r\n      border-radius: 10px;\r\n    }\r\n    .obxe-card h3 { font-size: 1.3rem; margin-bottom: 5px; }\r\n    .obxe-card p  { font-size: 0.90rem; line-height: 1.45; }\r\n  }\r\n\r\n  \/* Fallback est\u00e1tico para prefers-reduced-motion (el JS aplica el estado final;\r\n     el cielo queda como imagen fija: nebulosa + estrellas sin animaci\u00f3n) *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .obxe-core,\r\n    .obxe-sky-neb,\r\n    .obxe-sky-stars { animation: none; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obxe-wrap\" id=\"obxeWrap\">\r\n  <div class=\"obxe-sticky\" id=\"obxeSticky\">\r\n    <div class=\"obxe-stage\" id=\"obxeStage\">\r\n\r\n      <!-- fondo propio: cielo estrellado con nebulosa (CSS puro, sin JS) -->\r\n      <div class=\"obxe-sky\" aria-hidden=\"true\">\r\n        <div class=\"obxe-sky-neb\"><\/div>\r\n        <div class=\"obxe-sky-stars obxe-s1\"><\/div>\r\n        <div class=\"obxe-sky-stars obxe-s2\"><\/div>\r\n        <div class=\"obxe-sky-stars obxe-s3\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"obxe-cover\" id=\"obxeCover\"><\/div>\r\n\r\n      <!-- ====== TEXTO GIGANTE DE LA INTRO ====== -->\r\n      <h2 class=\"obxe-bigtext\" id=\"obxeBigtext\">La IA transforma tu negocio en una plataforma de ventas<\/h2>\r\n\r\n      <div class=\"obxe-glow\" id=\"obxeGlow\"><\/div>\r\n\r\n      <div class=\"obxe-scene\">\r\n        <div class=\"obxe-boxwrap\" id=\"obxeBoxWrap\">\r\n          <div class=\"obxe-cube\" id=\"obxeCube\">\r\n            <div class=\"obxe-face obxe-f-front\"><span>OPEN BOX<\/span><div class=\"obxe-flap\"><\/div><\/div>\r\n            <div class=\"obxe-face obxe-f-right\"><span>OPEN BOX<\/span><div class=\"obxe-flap\"><\/div><\/div>\r\n            <div class=\"obxe-face obxe-f-back\"><span>OPEN BOX<\/span><div class=\"obxe-flap\"><\/div><\/div>\r\n            <div class=\"obxe-face obxe-f-left\"><span>OPEN BOX<\/span><div class=\"obxe-flap\"><\/div><\/div>\r\n            <div class=\"obxe-face obxe-f-bottom\"><\/div>\r\n            <div class=\"obxe-core\" id=\"obxeCore\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ====== TARJETAS (desfile: el orden = orden en que salen de la\r\n           caja y suben por el centro de la pantalla) ====== -->\r\n      <div class=\"obxe-card\"><h3>Tu web<\/h3><p>Dise\u00f1ada a medida para tu rubro, lista para vender.<\/p><\/div>\r\n      <div class=\"obxe-card\"><h3>Chatbot con IA<\/h3><p>Responde consultas al instante y deriva al equipo solo cuando hace falta.<\/p><\/div>\r\n      <div class=\"obxe-card\"><h3>Turnos y reservas<\/h3><p>Tus clientes agendan solos, sin llamados ni idas y vueltas.<\/p><\/div>\r\n      <div class=\"obxe-card\"><h3>Pagos online<\/h3><p>Cobr\u00e1s desde el primer d\u00eda, integrado y sin vueltas.<\/p><\/div>\r\n      <div class=\"obxe-card\"><h3>Decisiones con datos<\/h3><p>Cada interacci\u00f3n se convierte en informaci\u00f3n clara para saber qu\u00e9 vender y a qui\u00e9n.<\/p><\/div>\r\n      <div class=\"obxe-card\"><h3>Marketing autom\u00e1tico<\/h3><p>Campa\u00f1as y recordatorios que llegan solos a tus clientes en el momento justo.<\/p><\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var wrap   = document.getElementById('obxeWrap');\r\n  var sticky = document.getElementById('obxeSticky');\r\n  var cover  = document.getElementById('obxeCover');\r\n  var btext  = document.getElementById('obxeBigtext');\r\n  var stage  = document.getElementById('obxeStage');\r\n  var boxw   = document.getElementById('obxeBoxWrap');\r\n  var cube   = document.getElementById('obxeCube');\r\n  var glow   = document.getElementById('obxeGlow');\r\n  var core   = document.getElementById('obxeCore');\r\n  var flaps  = Array.prototype.slice.call(document.querySelectorAll('.obxe-flap'));\r\n  var cards  = Array.prototype.slice.call(document.querySelectorAll('.obxe-card'));\r\n  if (!wrap || !sticky || !boxw || !cube || !cover || !btext || !stage) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     TRACK_VH : alto del track de scroll (en \"vh\" estables v\u00eda obdLVH).\r\n     T        : l\u00ednea de tiempo \u2014 [inicio, fin] de cada fase en fracci\u00f3n del\r\n                scroll. Los huecos entre fases son micro-pausas (HOLD) para\r\n                que cada etapa se lea antes de avanzar.\r\n     SPIN     : rotaci\u00f3n de entrada (desacelera con ease-out hasta la pose\r\n                isom\u00e9trica final ROTY_END \/ ROTX_END).\r\n     FLAP     : \u00e1ngulo de solapas cerradas (90 = tapa plana) y abiertas.\r\n     EASE     : suavizado tipo inercia del progreso.                     *\/\r\n  var TRACK_VH   = 740;\r\n  var T = {\r\n    fade:    [0.02, 0.10], \/\/ FASE 0a: letras oscuro \u2192 blanco\r\n    cover:   [0.06, 0.16], \/\/ FASE 0b: la tapa clara desaparece, se ve el cielo\r\n    entry:   [0.18, 0.34], \/\/ FASE 1: entra la caja girando y llega al centro\r\n    explode: [0.34, 0.52], \/\/ FASE 1b: IMPACTO \u2014 las letras explotan en onda radial\r\n    open:    [0.54, 0.64], \/\/ FASE 2: se abre la tapa (HOLD previo 52%\u219254%)\r\n    retreat: [0.64, 0.70], \/\/ FASE 2b: la caja abierta se aparta (baja y se achica)\r\n    cards:   [0.68, 0.985] \/\/ FASE 3: desfile \u2014 las tarjetas suben por el centro\r\n  };\r\n  var IMPACT     = 0.34;   \/\/ momento del golpe (= fin de entry)\r\n  var COLOR_FROM = [25, 25, 25];      \/\/ color inicial de las letras\r\n  var COLOR_TO   = [255, 255, 255];   \/\/ color final de las letras\r\n  var SPIN_FROM  = -510;   \/\/ grados: ~1.4 vueltas de entrada\r\n  var ROTY_END   = -28;    \/\/ pose final isom\u00e9trica\r\n  var ROTX_FROM  = -6;\r\n  var ROTX_END   = -20;\r\n  var FLAP_CLOSED = 90;\r\n  var FLAP_OPEN   = -72;\r\n  var EASE        = 0.09;\r\n\r\n  \/* ---- DESFILE DE TARJETAS (desktop y mobile) ----\r\n     Las tarjetas nacen en la boca de la caja (que ya se apart\u00f3 hacia\r\n     abajo), suben por el centro de la pantalla al ritmo del scroll y se\r\n     desvanecen cerca del borde superior mientras la siguiente ya viene.\r\n     CARD_BORN    : d\u00f3nde nace la tarjeta (fracci\u00f3n del alto del panel,\r\n                    respecto del centro; positivo = abajo del centro).\r\n     CARD_EXIT    : hasta d\u00f3nde sube antes de terminar de desvanecerse\r\n                    (negativo = arriba del centro).\r\n     CARD_OVERLAP : tope de cu\u00e1ntas tarjetas conviven en pantalla. El\r\n                    espaciado real se ajusta SOLO midiendo la altura de la\r\n                    tarjeta: nunca quedan a menos de CARD_GAP px entre s\u00ed,\r\n                    en ning\u00fan tama\u00f1o de monitor.\r\n     CARD_GAP     : margen m\u00ednimo (px) entre una tarjeta y la siguiente.\r\n     RETREAT_VH   : cu\u00e1nto baja la caja al apartarse (vh).\r\n     RETREAT_SHRINK : cu\u00e1nto se achica al apartarse (0.45 = queda al 55%). *\/\r\n  var CARD_BORN      = 0.22;\r\n  var CARD_EXIT      = -0.50;\r\n  var CARD_OVERLAP   = 2.4;\r\n  var CARD_GAP       = 32;\r\n  var RETREAT_VH     = 26;\r\n  var RETREAT_SHRINK = 0.45;\r\n  \/* ============================================= *\/\r\n\r\n  var reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/\/ --- Partir el texto en letras (conservando palabras enteras) ---\r\n  \/\/ Las palabras van dentro de un span interno: como el h2 es display:flex,\r\n  \/\/ los espacios sueltos entre hijos directos se descartar\u00edan; dentro del\r\n  \/\/ span interno el flujo de texto normal los conserva.\r\n  var letters = [];\r\n  (function splitText() {\r\n    var words = btext.textContent.split(\/\\s+\/).filter(Boolean);\r\n    btext.textContent = '';\r\n    var inner = document.createElement('span');\r\n    inner.className = 'obxe-inner';\r\n    words.forEach(function (word, wi) {\r\n      var w = document.createElement('span');\r\n      w.className = 'obxe-word';\r\n      for (var c = 0; c < word.length; c++) {\r\n        var l = document.createElement('span');\r\n        l.className = 'obxe-letter';\r\n        l.textContent = word[c];\r\n        w.appendChild(l);\r\n        letters.push({ el: l, dx: 0, dy: 0, rot: (Math.random() * 2 - 1) * 540, delay: 0 });\r\n      }\r\n      inner.appendChild(w);\r\n      if (wi < words.length - 1) inner.appendChild(document.createTextNode(' '));\r\n    });\r\n    btext.appendChild(inner);\r\n  })();\r\n\r\n  \/\/ Geometr\u00eda de la explosi\u00f3n: cada letra vuela RADIALMENTE desde el centro\r\n  \/\/ (donde golpea la caja), y las m\u00e1s cercanas al impacto salen primero (onda).\r\n  function computeLetterGeo() {\r\n    \/\/ usa offsetLeft\/offsetTop (posiciones de layout): no les afectan los\r\n    \/\/ transforms, as\u00ed que se puede re-medir incluso a mitad de la explosi\u00f3n\r\n    var cx = btext.clientWidth \/ 2;\r\n    var cy = btext.clientHeight \/ 2;\r\n    var maxDist = Math.sqrt(cx * cx + cy * cy) || 1;\r\n    for (var i = 0; i < letters.length; i++) {\r\n      var L = letters[i];\r\n      \/\/ offsetParent de la letra = el propio h2 (\u00fanico ancestro posicionado)\r\n      var ox = (L.el.offsetLeft + L.el.offsetWidth \/ 2) - cx;\r\n      var oy = (L.el.offsetTop + L.el.offsetHeight \/ 2) - cy;\r\n      var d = Math.sqrt(ox * ox + oy * oy);\r\n      var ang = d > 1\r\n        ? Math.atan2(oy, ox) + (Math.random() - 0.5) * 0.5   \/\/ radial + jitter\r\n        : Math.random() * Math.PI * 2;                        \/\/ letra justo en el centro\r\n      var fly = 55 + Math.random() * 65;                      \/\/ distancia de vuelo (vmin)\r\n      L.dx = Math.cos(ang) * fly;\r\n      L.dy = Math.sin(ang) * fly * 0.75;                      \/\/ achatado: pantalla apaisada\r\n      L.delay = (d \/ maxDist) * 0.30 + Math.random() * 0.06;  \/\/ onda desde el centro\r\n    }\r\n  }\r\n\r\n  \/\/ --- obdLVH(): alto real del viewport en px (probe de 100lvh).\r\n  \/\/     Cache por ancho de pantalla: los cambios solo de altura (barra del\r\n  \/\/     navegador m\u00f3vil) NO invalidan la cache ni relayoutean la secci\u00f3n. ---\r\n  var lvhCache = {};\r\n  function obdLVH() {\r\n    var w = window.innerWidth;\r\n    if (lvhCache[w]) return lvhCache[w];\r\n    var probe = document.createElement('div');\r\n    probe.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:100lvh;visibility:hidden;pointer-events:none;';\r\n    document.body.appendChild(probe);\r\n    var h = probe.getBoundingClientRect().height || window.innerHeight;\r\n    document.body.removeChild(probe);\r\n    if (h > 0) lvhCache[w] = h;\r\n    return h || window.innerHeight;\r\n  }\r\n\r\n  \/\/ Unificar tama\u00f1o de las tarjetas: se limpia el min-height previo, se\r\n  \/\/ mide la m\u00e1s alta con su altura natural y se aplica a todas \u2014 as\u00ed el\r\n  \/\/ desfile se ve parejo aunque los textos tengan largos distintos.\r\n  \/\/ (offsetWidth\/Height ignoran los transforms, se puede medir siempre)\r\n  var cardMaxH = 0;   \/\/ altura real de la tarjeta: define el espaciado del desfile\r\n  function unifyCards() {\r\n    var N = cards.length;\r\n    var maxH = 0;\r\n    var j;\r\n    for (j = 0; j < N; j++) {\r\n      cards[j].style.minHeight = '';\r\n      maxH = Math.max(maxH, cards[j].offsetHeight);\r\n    }\r\n    for (j = 0; j < N; j++) {\r\n      cards[j].style.minHeight = maxH + 'px';\r\n    }\r\n    cardMaxH = maxH;\r\n  }\r\n\r\n  function setSizes() {\r\n    var lvh = obdLVH();\r\n    sticky.style.height = lvh + 'px';\r\n    wrap.style.height = (reduced ? lvh : Math.round(TRACK_VH \/ 100 * lvh)) + 'px';\r\n  }\r\n\r\n  function phase(p, seg) { return Math.min(1, Math.max(0, (p - seg[0]) \/ (seg[1] - seg[0]))); }\r\n  function smooth(t) { return t * t * (3 - 2 * t); }                     \/\/ smoothstep\r\n  function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }\r\n  function backOut(t) { var c = 1.35; var u = t - 1; return 1 + (c + 1) * u * u * u + c * u * u; }\r\n\r\n  \/\/ Aplica el estado visual para un progreso p (0 \u2192 1). Reversible.\r\n  function apply(p) {\r\n\r\n    \/\/ FASE 0: texto gigante \u2014 fade de color, revelado del cielo y salida\r\n    var tf = smooth(phase(p, T.fade));\r\n    var r = Math.round(COLOR_FROM[0] + (COLOR_TO[0] - COLOR_FROM[0]) * tf);\r\n    var g = Math.round(COLOR_FROM[1] + (COLOR_TO[1] - COLOR_FROM[1]) * tf);\r\n    var b = Math.round(COLOR_FROM[2] + (COLOR_TO[2] - COLOR_FROM[2]) * tf);\r\n    btext.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';\r\n    btext.style.textShadow = '0 2px 30px rgba(0,0,0,' + (0.35 * tf).toFixed(3) + ')';\r\n    cover.style.opacity = (1 - smooth(phase(p, T.cover))).toFixed(3);\r\n\r\n    \/\/ FASE 1b: EXPLOSI\u00d3N \u2014 onda radial desde el punto de impacto de la caja\r\n    var ex = phase(p, T.explode);\r\n    btext.style.visibility = ex >= 1 ? 'hidden' : 'visible';\r\n    if (ex < 1) {\r\n      for (var li = 0; li < letters.length; li++) {\r\n        var L = letters[li];\r\n        var le = smooth(phase(ex, [L.delay, Math.min(L.delay + 0.55, 1)]));\r\n        if (le <= 0) {\r\n          L.el.style.transform = '';\r\n          L.el.style.opacity = 1;\r\n        } else {\r\n          L.el.style.transform =\r\n            'translate(' + (L.dx * le).toFixed(1) + 'vmin,' +\r\n            (L.dy * le + 22 * le * le).toFixed(1) + 'vmin) ' +      \/* + gravedad *\/\r\n            'rotate(' + (L.rot * le).toFixed(1) + 'deg) scale(' + (1 - 0.3 * le).toFixed(3) + ')';\r\n          L.el.style.opacity = Math.max(0, 1 - le * 1.15).toFixed(3);\r\n        }\r\n      }\r\n    }\r\n\r\n    \/\/ sacudida de pantalla en el impacto (decae r\u00e1pido, reversible)\r\n    var sh = 1 - phase(p, [IMPACT, IMPACT + 0.05]);\r\n    var shake = (sh > 0 && sh < 1) ? Math.sin(p * 900) * 12 * sh : 0;\r\n    stage.style.transform = 'translate(' + shake.toFixed(1) + 'px,' + (-shake * 0.6).toFixed(1) + 'px)';\r\n\r\n    \/\/ FASE 1: entrada girando; el ease-out hace la desaceleraci\u00f3n\r\n    var en = easeOutCubic(phase(p, T.entry));\r\n    var ry = SPIN_FROM + (ROTY_END - SPIN_FROM) * en;\r\n    var rx = ROTX_FROM + (ROTX_END - ROTX_FROM) * en;\r\n    cube.style.transform = 'rotateX(' + rx.toFixed(2) + 'deg) rotateY(' + ry.toFixed(2) + 'deg)';\r\n\r\n    var opRaw = phase(p, T.open);\r\n    \/\/ FASE 2b: tras abrirse, la caja se aparta \u2014 baja y se achica \u2014 para\r\n    \/\/ dejar el centro libre al desfile de tarjetas (que nacen de su boca)\r\n    var rt = smooth(phase(p, T.retreat));\r\n    boxw.style.transform =\r\n      'translateY(' + ((1 - en) * 30 + rt * RETREAT_VH).toFixed(2) + 'vh) ' +\r\n      'scale(' + ((0.7 + 0.3 * en) * (1 - RETREAT_SHRINK * rt)).toFixed(3) + ')';\r\n    boxw.style.opacity = Math.min(1, en * 2.5).toFixed(3);\r\n\r\n    \/\/ FASE 2: solapas con bisagra en la arista, stagger y leve rebote\r\n    for (var i = 0; i < flaps.length; i++) {\r\n      var d = i * 0.13;\r\n      var ft = backOut(smooth(phase(opRaw, [d, Math.min(d + 0.62, 1)])));\r\n      flaps[i].style.transform =\r\n        'rotateX(' + (FLAP_CLOSED + (FLAP_OPEN - FLAP_CLOSED) * ft).toFixed(2) + 'deg)';\r\n    }\r\n    var glowI = smooth(opRaw);\r\n    \/\/ el halo acompa\u00f1a a la caja (invisible durante la intro) + FLASH en el\r\n    \/\/ impacto; al apartarse la caja, el halo se aten\u00faa con ella\r\n    var flash = Math.sin(Math.PI * phase(p, [IMPACT, IMPACT + 0.07])) * 0.8;\r\n    glow.style.opacity = (Math.min(1, (0.18 + 0.82 * glowI) * Math.min(1, en * 2.5) + flash) * (1 - 0.6 * rt)).toFixed(3);\r\n    core.style.opacity = (0.15 + 0.85 * glowI).toFixed(3);\r\n    core.style.transform = 'translate(-50%,-50%) scale(' + (0.55 + 0.65 * glowI).toFixed(3) + ')';\r\n\r\n    \/\/ FASE 3: DESFILE \u2014 cada tarjeta nace en la boca de la caja (abajo del\r\n    \/\/ centro), sube por el medio de la pantalla al ritmo del scroll y se\r\n    \/\/ desvanece cerca del borde superior mientras la siguiente ya viene.\r\n    \/\/ El cronograma garantiza que la \u00faltima termina dentro de T.cards.\r\n    if (cards.length) {\r\n      var ihp = sticky.offsetHeight || obdLVH();\r\n      var yb = CARD_BORN * ihp;                       \/\/ nace (px, + = abajo)\r\n      var ye = CARD_EXIT * ihp;                       \/\/ se va (px, - = arriba)\r\n      var tspan = T.cards[1] - T.cards[0];\r\n      \/\/ Espaciado auto: la separaci\u00f3n vertical entre tarjetas consecutivas\r\n      \/\/ debe ser al menos (altura de tarjeta + CARD_GAP). De ah\u00ed sale el\r\n      \/\/ m\u00e1ximo de tarjetas que pueden convivir sin pisarse en ESTE monitor,\r\n      \/\/ y se usa el menor entre eso y CARD_OVERLAP.\r\n      var nc = cards.length;\r\n      var ovl = CARD_OVERLAP;\r\n      if (cardMaxH > 0 && nc > 1) {\r\n        var travelPx = yb - ye;                       \/\/ recorrido total (px)\r\n        var gFrac = (cardMaxH + CARD_GAP) \/ travelPx; \/\/ separaci\u00f3n m\u00ednima como fracci\u00f3n\r\n        var ovlMax = nc \/ (1 + (nc - 1) * gFrac);\r\n        if (ovlMax < ovl) ovl = ovlMax;\r\n        if (ovl < 1) ovl = 1;                         \/\/ al menos una entera por vez\r\n      }\r\n      var dur = tspan * ovl \/ nc;                     \/\/ vida de cada tarjeta\r\n      var stepc = nc > 1 ? (tspan - dur) \/ (nc - 1) : 0;\r\n      for (var k = 0; k < cards.length; k++) {\r\n        var el = cards[k];\r\n        var q;\r\n        if (reduced) {                                \/\/ est\u00e1tico: columna visible\r\n          q = (k + 0.5) \/ cards.length;\r\n          el.style.visibility = 'visible';\r\n          el.style.opacity = 1;\r\n          el.style.transform =\r\n            'translate(-50%,-50%) translate3d(0,' + (yb + (ye - yb) * q).toFixed(1) + 'px,0)';\r\n          continue;\r\n        }\r\n        var s = T.cards[0] + k * stepc;\r\n        q = phase(p, [s, s + dur]);\r\n        if (q <= 0 || q >= 1) { el.style.opacity = 0; el.style.visibility = 'hidden'; continue; }\r\n        var fi = smooth(Math.min(1, q \/ 0.18));       \/\/ pop de entrada\r\n        var fo = 1 - smooth(phase(q, [0.72, 1]));     \/\/ fade cerca del borde\r\n        el.style.visibility = 'visible';\r\n        el.style.opacity = (fi * fo).toFixed(3);\r\n        el.style.transform =\r\n          'translate(-50%,-50%) translate3d(0,' + (yb + (ye - yb) * q).toFixed(1) + 'px,0) ' +\r\n          'scale(' + (0.55 + 0.45 * fi).toFixed(3) + ')';\r\n      }\r\n    }\r\n  }\r\n\r\n  var target = 0;\r\n  var current = 0;\r\n\r\n  function readScroll() {\r\n    var total = wrap.offsetHeight - sticky.offsetHeight;\r\n    if (total <= 0) { target = 0; return; }\r\n    var top = wrap.getBoundingClientRect().top;\r\n    target = Math.min(1, Math.max(0, -top \/ total));\r\n  }\r\n\r\n  \/\/ --- loop de render, activo SOLO cuando la secci\u00f3n est\u00e1 en viewport ---\r\n  var active = false;\r\n  var running = false;\r\n  function loop() {\r\n    if (!active) { running = false; return; }\r\n    readScroll();\r\n    current += (target - current) * EASE;\r\n    apply(current);\r\n    requestAnimationFrame(loop);\r\n  }\r\n  function start() {\r\n    if (!running) { running = true; requestAnimationFrame(loop); }\r\n  }\r\n\r\n  setSizes();\r\n  computeLetterGeo();\r\n  unifyCards();\r\n  \/\/ re-medir cuando carguen las fuentes (el layout puede cambiar)\r\n  window.addEventListener('load', function () {\r\n    computeLetterGeo();\r\n    unifyCards();\r\n  });\r\n\r\n  \/\/ prefers-reduced-motion: estado final est\u00e1tico, sin animaci\u00f3n ni loop\r\n  \/\/ (las animaciones CSS del cielo tambi\u00e9n se apagan por media query)\r\n  if (reduced) {\r\n    wrap.classList.add('obxe-static');\r\n    apply(1);\r\n    return;\r\n  }\r\n\r\n  apply(0);\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function (entries) {\r\n      active = entries[0].isIntersecting;\r\n      if (active) start();\r\n    }, { rootMargin: '120px' }).observe(wrap);\r\n  } else {\r\n    active = true;\r\n    start();\r\n  }\r\n\r\n  \/\/ resize: solo reacciona a cambios de ANCHO (ignora la barra m\u00f3vil)\r\n  window.addEventListener('resize', (function () {\r\n    var lastW = window.innerWidth;\r\n    var t;\r\n    return function () {\r\n      if (window.innerWidth === lastW) return;\r\n      lastW = window.innerWidth;\r\n      clearTimeout(t);\r\n      t = setTimeout(function () {\r\n        setSizes();\r\n        computeLetterGeo();\r\n        unifyCards();         \/\/ re-mide alturas solo al cambiar el ancho\r\n        readScroll();\r\n        current = target;     \/\/ sin \"viaje\" de inercia tras el relayout\r\n        apply(current);\r\n      }, 150);\r\n    };\r\n  })());\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68e88a45 e-con-full e-flex e-con e-parent\" data-id=\"68e88a45\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37a511bd elementor-widget elementor-widget-html\" data-id=\"37a511bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SECCI\u00d3N 5 \u2014 PROCESO: L\u00cdNEA SERPIENTE QUE SE ILUMINA CON EL SCROLL\r\n     (+ t\u00edtulo con entrada de la bola: rebotes decrecientes naturales)\r\n     Pegar TODO este c\u00f3digo en un widget \"HTML\" de Elementor Pro.\r\n\r\n     REQUISITOS DE LA SECCI\u00d3N EN ELEMENTOR:\r\n     - Fondo de la secci\u00f3n: s\u00f3lido oscuro (ideal #0d0d14, igual que la\r\n       secci\u00f3n de la caja) \u2014 este widget es transparente.\r\n     - La secci\u00f3n NO debe tener overflow:hidden ni Motion Effects.\r\n     - Secci\u00f3n de ancho completo, sin padding.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* Prefijo \u00fanico \"obxp-\" para no colisionar con otros widgets del sitio *\/\r\n  .obxp-wrap {\r\n    position: relative;\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);   \/* full-bleed aunque la secci\u00f3n sea boxed *\/\r\n    \/* la altura (px) la fija el JS: un \"paso\" por pantalla aprox. *\/\r\n  }\r\n\r\n  \/* ====== T\u00cdTULO (la bola rebota sobre \u00e9l al entrar) ====== *\/\r\n  .obxp-head {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    padding: 0 6vw;\r\n    \/* la altura (px) la fija el JS (HEAD_VH de viewport estable) *\/\r\n  }\r\n  .obxp-eyebrow {\r\n    display: block;\r\n    margin-bottom: 14px;\r\n    font-size: 0.78rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.35em;\r\n    text-transform: uppercase;\r\n    color: #54d3f3;\r\n  }\r\n  .obxp-title {\r\n    margin: 0;\r\n    font-size: clamp(1.9rem, 3.6vw, 3.2rem);\r\n    font-weight: 700;\r\n    color: #ffffff;               \/* expl\u00edcito: pisa el color de headings del tema *\/\r\n    line-height: 1.15;\r\n  }\r\n\r\n  \/* la l\u00ednea serpiente *\/\r\n  .obxp-svg {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n  }\r\n  \/* IMPORTANTE: el path se genera en P\u00cdXELES reales (viewBox 1:1 con la\r\n     secci\u00f3n). Sin vector-effect ni preserveAspectRatio=\"none\": as\u00ed el dash,\r\n     getTotalLength() y la bola comparten EXACTAMENTE el mismo espacio de\r\n     coordenadas y no pueden desincronizarse (el desfase ven\u00eda de que el\r\n     dash se calculaba en pantalla y las longitudes en unidades de viewBox). *\/\r\n  .obxp-base {\r\n    fill: none;\r\n    stroke: rgba(255, 255, 255, 0.10);   \/* camino apagado *\/\r\n    stroke-width: 1.5;\r\n    stroke-linecap: round;\r\n  }\r\n  \/* la cola iluminada: desde el inicio hasta la bola, exactamente *\/\r\n  .obxp-lit {\r\n    fill: none;\r\n    stroke: #54d3f3;                     \/* \u2190 color claro Open Box *\/\r\n    stroke-width: 2.5;\r\n    stroke-linecap: round;\r\n    filter: drop-shadow(0 0 6px rgba(84, 211, 243, 0.85))\r\n            drop-shadow(0 0 18px rgba(84, 211, 243, 0.35));\r\n  }\r\n\r\n  \/* cometa: la bola brillante que dirige la luz *\/\r\n  .obxp-comet {\r\n    position: absolute;\r\n    z-index: 3;\r\n    width: 14px;\r\n    height: 14px;\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: radial-gradient(circle,\r\n                #ffffff 0%, #54d3f3 45%, rgba(84, 211, 243, 0) 75%);\r\n    box-shadow: 0 0 18px 4px rgba(84, 211, 243, 0.55);\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    will-change: left, top, opacity;\r\n  }\r\n\r\n  \/* nodo de cada paso sobre la l\u00ednea *\/\r\n  .obxp-dot {\r\n    position: absolute;\r\n    z-index: 3;\r\n    width: 12px;\r\n    height: 12px;\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: #2a2a33;\r\n    border: 2px solid rgba(255, 255, 255, 0.25);\r\n    transition: background 0.45s ease, border-color 0.45s ease,\r\n                box-shadow 0.45s ease, transform 0.45s ease;\r\n  }\r\n  .obxp-dot.obxp-on {\r\n    background: #54d3f3;\r\n    border-color: rgba(255, 255, 255, 0.9);\r\n    box-shadow: 0 0 16px 4px rgba(84, 211, 243, 0.55);\r\n    transform: translate(-50%, -50%) scale(1.35);\r\n  }\r\n\r\n  \/* bloque de texto de cada paso (el JS lo ubica junto a su nodo) *\/\r\n  .obxp-step {\r\n    position: absolute;\r\n    z-index: 2;\r\n    transform: translateY(-50%);\r\n    opacity: 0.28;\r\n    transition: opacity 0.6s ease, transform 0.6s ease;\r\n  }\r\n  .obxp-step.obxp-on {\r\n    opacity: 1;\r\n    transform: translateY(calc(-50% - 6px));\r\n  }\r\n  .obxp-step .obxp-kicker {\r\n    display: block;\r\n    margin-bottom: 10px;\r\n    font-size: 0.78rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.35em;\r\n    text-transform: uppercase;\r\n    color: rgba(255, 255, 255, 0.35);\r\n    transition: color 0.6s ease;\r\n  }\r\n  .obxp-step.obxp-on .obxp-kicker { color: #54d3f3; }\r\n  .obxp-step h3 {\r\n    margin: 0 0 12px;\r\n    font-size: clamp(1.5rem, 2.6vw, 2.4rem);\r\n    font-weight: 700;\r\n    color: #ffffff;               \/* expl\u00edcito: pisa el color de headings del tema *\/\r\n    line-height: 1.15;\r\n  }\r\n  .obxp-step p {\r\n    margin: 0;\r\n    max-width: 46ch;\r\n    font-size: clamp(0.9rem, 1.15vw, 1.05rem);\r\n    line-height: 1.6;\r\n    color: rgba(255, 255, 255, 0.75);\r\n  }\r\n\r\n  \/* ====== MOBILE ====== *\/\r\n  @media (max-width: 880px) {\r\n    .obxp-step h3 { font-size: 1.25rem; margin-bottom: 8px; }\r\n    .obxp-step p  { font-size: 0.82rem; line-height: 1.5; }\r\n    .obxp-step .obxp-kicker { font-size: 0.66rem; margin-bottom: 6px; }\r\n    .obxp-eyebrow { font-size: 0.66rem; margin-bottom: 10px; }\r\n  }\r\n\r\n  \/* prefers-reduced-motion: sin rebotes; l\u00ednea completa, sin animaci\u00f3n *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .obxp-dot, .obxp-step { transition: none; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"obxp-wrap\" id=\"obxpWrap\">\r\n\r\n  <!-- ====== T\u00cdTULO: la bola cae y pica sobre \u00e9l con rebotes cada vez\r\n       m\u00e1s chicos, avanzando hacia la l\u00ednea hasta caer en ella ====== -->\r\n  <div class=\"obxp-head\" id=\"obxpHead\">\r\n    <span class=\"obxp-eyebrow\">C\u00f3mo trabajamos<\/span>\r\n    <h2 class=\"obxp-title\" id=\"obxpTitle\">De tu idea a tu negocio online<\/h2>\r\n  <\/div>\r\n\r\n  <svg class=\"obxp-svg\" id=\"obxpSvg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n    <path class=\"obxp-base\" id=\"obxpBase\" d=\"\"><\/path>\r\n    <path class=\"obxp-lit\"  id=\"obxpLit\"  d=\"\"><\/path>\r\n  <\/svg>\r\n\r\n  <div class=\"obxp-comet\" id=\"obxpComet\"><\/div>\r\n\r\n  <!-- ====== PASOS (agreg\u00e1 o quit\u00e1; la serpiente se adapta sola) ====== -->\r\n  <div class=\"obxp-step\">\r\n    <span class=\"obxp-kicker\">Paso 01<\/span>\r\n    <h3>An\u00e1lisis de marca<\/h3>\r\n    <p>Nos metemos en tu negocio, tu p\u00fablico y tu competencia antes de proponer nada.<\/p>\r\n  <\/div>\r\n  <div class=\"obxp-step\">\r\n    <span class=\"obxp-kicker\">Paso 02<\/span>\r\n    <h3>Estrategia y dise\u00f1o<\/h3>\r\n    <p>Definimos el plan y dise\u00f1amos tu plataforma a medida, pensada para vender.<\/p>\r\n  <\/div>\r\n  <div class=\"obxp-step\">\r\n    <span class=\"obxp-kicker\">Paso 03<\/span>\r\n    <h3>Lanzamiento<\/h3>\r\n    <p>Salimos en vivo con todo integrado, probado y listo para recibir clientes.<\/p>\r\n  <\/div>\r\n  <div class=\"obxp-step\">\r\n    <span class=\"obxp-kicker\">Paso 04<\/span>\r\n    <h3>Mantenimiento<\/h3>\r\n    <p>Tu plataforma siempre al d\u00eda: seguridad, mejoras y soporte continuo.<\/p>\r\n  <\/div>\r\n  <div class=\"obxp-step\">\r\n    <span class=\"obxp-kicker\">Paso 05<\/span>\r\n    <h3>Optimizaci\u00f3n<\/h3>\r\n    <p>Medimos, aprendemos y ajustamos para que cada mes venda mejor.<\/p>\r\n  <\/div>\r\n  <!-- ================================================================ -->\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var wrap  = document.getElementById('obxpWrap');\r\n  var svg   = document.getElementById('obxpSvg');\r\n  var base  = document.getElementById('obxpBase');\r\n  var lit   = document.getElementById('obxpLit');\r\n  var comet = document.getElementById('obxpComet');\r\n  var headEl  = document.getElementById('obxpHead');\r\n  var titleEl = document.getElementById('obxpTitle');\r\n  var steps = Array.prototype.slice.call(document.querySelectorAll('.obxp-step'));\r\n  if (!wrap || !svg || !base || !lit || !comet || !headEl || !titleEl || !steps.length) return;\r\n\r\n  \/* ================== AJUSTES ==================\r\n     STEP_VH  : alto de cada paso en vh (m\u00e1s = recorrido m\u00e1s pausado).\r\n     TRIGGER  : L\u00cdNEA DE LECTURA \u2014 fracci\u00f3n del alto del viewport donde\r\n                viaja la bola. La luz llega al nodo de cada paso EXACTO\r\n                cuando ese nodo est\u00e1 a esta altura de la pantalla\r\n                (0.78 = al 78%, apenas asoma por abajo \u2192 se ilumina ni\r\n                bien aparece; m\u00e1s chico = se ilumina m\u00e1s arriba\/tarde).\r\n     EASE     : suavizado tipo inercia del avance (un \u00daNICO progress\r\n                controla bola, cola iluminada y pasos a la vez).\r\n     STRAIGHT_LEN  : largo (px) de los tramos rectos verticales de los\r\n                     extremos. Cada recta sale EXACTAMENTE en la X donde\r\n                     la onda termina naturalmente (ya no se fuerza al\r\n                     centro \u2014 eso era lo que generaba el gancho).\r\n     HEAD_VH  : alto de la zona del t\u00edtulo (en vh estables).\r\n     BOUNCE_H : altura del primer pique sobre el t\u00edtulo (px); los\r\n                siguientes decaen solos (45% y 25% de ese valor).\r\n     (La duraci\u00f3n de la fase de rebotes ya no se elige: HANDOFF se\r\n      calcula solo para que la bola aterrice en la l\u00ednea justo cuando\r\n      el inicio de la l\u00ednea cruza la l\u00ednea de lectura \u2014 sin saltos.)    *\/\r\n  var STEP_VH = 110;\r\n  var TRIGGER = 0.78;\r\n  var EASE    = 0.10;\r\n  var STRAIGHT_LEN = 50;\r\n  var HEAD_VH  = 30;\r\n  var BOUNCE_H = 64;\r\n  var HANDOFF  = 0.10;   \/\/ recalculado en build() seg\u00fan la geometr\u00eda real\r\n  \/* ============================================= *\/\r\n\r\n  var reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var N = steps.length;\r\n\r\n  \/\/ --- obdLVH(): alto real del viewport en px (probe de 100lvh, cache por\r\n  \/\/     ancho; los cambios solo de altura por la barra m\u00f3vil se ignoran) ---\r\n  var lvhCache = {};\r\n  function obdLVH() {\r\n    var w = window.innerWidth;\r\n    if (lvhCache[w]) return lvhCache[w];\r\n    var probe = document.createElement('div');\r\n    probe.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:100lvh;visibility:hidden;pointer-events:none;';\r\n    document.body.appendChild(probe);\r\n    var h = probe.getBoundingClientRect().height || window.innerHeight;\r\n    document.body.removeChild(probe);\r\n    if (h > 0) lvhCache[w] = h;\r\n    return h || window.innerHeight;\r\n  }\r\n\r\n  function isMobile() { return window.innerWidth <= 880; }\r\n\r\n  \/\/ dots creados por JS, uno por paso\r\n  var dots = steps.map(function () {\r\n    var d = document.createElement('div');\r\n    d.className = 'obxp-dot';\r\n    wrap.appendChild(d);\r\n    return d;\r\n  });\r\n\r\n  var L = 0;         \/\/ largo total del path (en px reales)\r\n  var pathW = 0;     \/\/ ancho de la secci\u00f3n en px\r\n  var pathH = 0;     \/\/ alto de la secci\u00f3n en px\r\n  var nodes = [];    \/\/ {x, y (px), len (longitud del path hasta el nodo)}\r\n  \/\/ waypoints de la FASE A (ca\u00edda + rebotes decrecientes): en build()\r\n  var bounce = { xImp: 0, yImp: 0, x1: 0, x2: 0, xLine: 0, yLine: 0, yStart: -80, h: BOUNCE_H };\r\n\r\n  \/\/ Construye la serpiente EN P\u00cdXELES REALES (viewBox 1:1 con la secci\u00f3n):\r\n  \/\/ un nodo por paso, alternando derecha\/izquierda.\r\n  \/\/\r\n  \/\/ ESTRUCTURA: recta corta \u2192 ondas TODAS IGUALES \u2192 recta corta.\r\n  \/\/ La primera y la \u00faltima onda son ONDAS EST\u00c1NDAR COMPLETAS (de amplitud\r\n  \/\/ a amplitud, id\u00e9nticas a las del medio): la de entrada nace en la\r\n  \/\/ amplitud opuesta al paso 1 y la de salida muere en la amplitud opuesta\r\n  \/\/ al paso 5. Las rectas verticales salen EXACTAMENTE en esa X natural\r\n  \/\/ donde la onda empieza\/termina (no se fuerzan al centro \u2014 eso era lo\r\n  \/\/ que generaba el gancho de retroceso), y como toda onda est\u00e1ndar\r\n  \/\/ arranca y termina con tangente vertical, el empalme recta\u2192onda es\r\n  \/\/ suave por construcci\u00f3n, sin codo.\r\n  \/\/\r\n  \/\/ Al trabajar en px, dash \/ getTotalLength \/ getPointAtLength comparten\r\n  \/\/ el mismo espacio: bola y cola no pueden desincronizarse.\r\n  function build() {\r\n    pathW = wrap.clientWidth  || window.innerWidth;\r\n    pathH = wrap.clientHeight || 1;\r\n    svg.setAttribute('viewBox', '0 0 ' + pathW + ' ' + pathH);\r\n\r\n    var xRight = pathW * (isMobile() ? 0.78 : 0.72);\r\n    var xLeft  = pathW * (isMobile() ? 0.22 : 0.28);\r\n    \/\/ la pista arranca DEBAJO de la zona del t\u00edtulo\r\n    var pathTop = headEl.offsetHeight || 0;\r\n    \/\/ (N+1) ondas completas e id\u00e9nticas: entrada + (N-1) entre pasos + salida\r\n    var cell = (pathH - pathTop - 2 * STRAIGHT_LEN - 10) \/ (N + 1);\r\n\r\n    nodes = [];\r\n    var i, x, y;\r\n    for (i = 0; i < N; i++) {\r\n      nodes.push({\r\n        x: (i % 2 === 0) ? xRight : xLeft,\r\n        y: pathTop + STRAIGHT_LEN + (i + 1) * cell,   \/\/ el paso 1 llega tras la onda de entrada\r\n        len: 0\r\n      });\r\n    }\r\n\r\n    \/\/ 1) recta corta de ENTRADA en la X natural donde nace la primera onda\r\n    \/\/    (la amplitud opuesta al paso 1) \u2014 sin volver al centro\r\n    var xIn = (nodes[0].x === xRight) ? xLeft : xRight;\r\n    var d = 'M ' + xIn.toFixed(1) + ' ' + pathTop.toFixed(1) +\r\n            ' L ' + xIn.toFixed(1) + ' ' + (pathTop + STRAIGHT_LEN).toFixed(1);\r\n\r\n    \/\/ 2) onda COMPLETA de entrada: de la amplitud opuesta hasta el paso 1,\r\n    \/\/    id\u00e9ntica a las del medio (tangente vertical en ambos extremos \u2192\r\n    \/\/    empalma suave con la recta por construcci\u00f3n)\r\n    var x0 = nodes[0].x, y0 = nodes[0].y;\r\n    var myIn = ((pathTop + STRAIGHT_LEN + y0) \/ 2).toFixed(1);\r\n    d += ' C ' + xIn.toFixed(1) + ' ' + myIn +\r\n         ', ' + x0.toFixed(1) + ' ' + myIn +\r\n         ', ' + x0.toFixed(1) + ' ' + y0.toFixed(1);\r\n\r\n    \/\/ 3) ondas completas entre pasos (id\u00e9nticas entre s\u00ed, sin cambios)\r\n    var px = nodes[0].x, py = nodes[0].y;\r\n    for (i = 1; i < N; i++) {\r\n      x = nodes[i].x;\r\n      y = nodes[i].y;\r\n      var my = ((py + y) \/ 2).toFixed(1);\r\n      d += ' C ' + px.toFixed(1) + ' ' + my + ', ' + x.toFixed(1) + ' ' + my +\r\n           ', ' + x.toFixed(1) + ' ' + y.toFixed(1);\r\n      px = x; py = y;\r\n    }\r\n\r\n    \/\/ 4) onda COMPLETA de salida: del paso 5 hasta la amplitud opuesta,\r\n    \/\/    id\u00e9ntica a las del medio (tangente vertical en ambos extremos)\r\n    var xl = nodes[N - 1].x, yl = nodes[N - 1].y;\r\n    var xOut = (xl === xRight) ? xLeft : xRight;\r\n    var yOut = yl + cell;\r\n    var myOut = ((yl + yOut) \/ 2).toFixed(1);\r\n    d += ' C ' + xl.toFixed(1) + ' ' + myOut +\r\n         ', ' + xOut.toFixed(1) + ' ' + myOut +\r\n         ', ' + xOut.toFixed(1) + ' ' + yOut.toFixed(1);\r\n\r\n    \/\/ 5) recta corta de SALIDA en esa misma X natural \u2014 el path CORTA ac\u00e1\r\n    d += ' L ' + xOut.toFixed(1) + ' ' + (yOut + STRAIGHT_LEN).toFixed(1);\r\n\r\n    \/\/ DOS paths superpuestos con EXACTAMENTE la misma \"d\"\r\n    base.setAttribute('d', d);\r\n    lit.setAttribute('d', d);\r\n\r\n    \/\/ t\u00e9cnica dash: celeste oculto al inicio; el JS lo \"dibuja\" con el progress\r\n    L = base.getTotalLength();\r\n    lit.style.strokeDasharray  = L + ' ' + L;\r\n    lit.style.strokeDashoffset = L;\r\n\r\n    \/\/ umbral de cada paso = longitud del path en su nodo, por B\u00daSQUEDA\r\n    \/\/ BINARIA (la y del camino es mon\u00f3tona): precisi\u00f3n sub-p\u00edxel\r\n    for (i = 0; i < N; i++) {\r\n      var lo = 0, hi = L;\r\n      for (var it = 0; it < 24; it++) {\r\n        var mid = (lo + hi) \/ 2;\r\n        if (base.getPointAtLength(mid).y < nodes[i].y) lo = mid; else hi = mid;\r\n      }\r\n      nodes[i].len = (lo + hi) \/ 2;\r\n    }\r\n\r\n    \/\/ waypoints de la FASE A: impacto en el centro del t\u00edtulo y camino de\r\n    \/\/ rebotes decrecientes SIEMPRE en direcci\u00f3n al inicio de la l\u00ednea\r\n    \/\/ (avance horizontal mon\u00f3tono: nunca se pasa de largo ni vuelve).\r\n    \/\/ El ancho de cada pique es proporcional a su altura (\u221ah, como un\r\n    \/\/ proyectil real): pique 1 recorre 45% del camino, pique 2 el 30% y\r\n    \/\/ el saltito final el 25% restante, aterrizando justo en la l\u00ednea.\r\n    var p0 = base.getPointAtLength(0);\r\n    var titleLeft = headEl.offsetLeft + titleEl.offsetLeft;\r\n    bounce.xImp = titleLeft + titleEl.offsetWidth \/ 2;\r\n    bounce.yImp = headEl.offsetTop + titleEl.offsetTop - 10;   \/\/ apoya sobre el borde superior\r\n    bounce.xLine = p0.x;\r\n    bounce.yLine = p0.y;\r\n    var D = bounce.xLine - bounce.xImp;    \/\/ distancia horizontal total\r\n    bounce.x1 = bounce.xImp + D * 0.45;    \/\/ fin del pique 1\r\n    bounce.x2 = bounce.xImp + D * 0.75;    \/\/ fin del pique 2\r\n    bounce.yStart = -80;\r\n    bounce.h = Math.min(BOUNCE_H, Math.max(24, bounce.yImp * 0.6));\r\n\r\n    \/\/ HANDOFF autom\u00e1tico: momento del scroll en que el INICIO de la l\u00ednea\r\n    \/\/ cruza la l\u00ednea de lectura (TRIGGER). Ah\u00ed termina la fase de rebotes\r\n    \/\/ y la bola aterriza en la pista \u2014 empalme exacto, sin salto.\r\n    var lvh = obdLVH();\r\n    var total = pathH + (1 - TRIGGER) * lvh;\r\n    HANDOFF = Math.min(0.4, Math.max(0.03,\r\n      (bounce.yLine + (1 - TRIGGER) * lvh) \/ total));\r\n\r\n    \/\/ posicionar puntos y textos junto a su nodo (todo en px)\r\n    var gapPx    = pathW * (isMobile() ? 0.10 : 0.06);\r\n    var marginPx = pathW * (isMobile() ? 0.06 : 0.22);\r\n    for (var k = 0; k < N; k++) {\r\n      var nx = nodes[k].x;\r\n      var ny = nodes[k].y;\r\n      dots[k].style.left = nx.toFixed(1) + 'px';\r\n      dots[k].style.top  = ny.toFixed(1) + 'px';\r\n      steps[k].style.top = ny.toFixed(1) + 'px';\r\n      if (nx > pathW \/ 2) {   \/\/ nodo a la derecha \u2192 texto a su izquierda\r\n        steps[k].style.left  = marginPx.toFixed(1) + 'px';\r\n        steps[k].style.right = (pathW - nx + gapPx).toFixed(1) + 'px';\r\n      } else {                \/\/ nodo a la izquierda \u2192 texto a su derecha\r\n        steps[k].style.left  = (nx + gapPx).toFixed(1) + 'px';\r\n        steps[k].style.right = marginPx.toFixed(1) + 'px';\r\n      }\r\n    }\r\n  }\r\n\r\n  function setSizes() {\r\n    var lvh = obdLVH();\r\n    \/\/ zona del t\u00edtulo arriba + (N+1) ondas completas (una \u2248 una pantalla)\r\n    headEl.style.height = Math.round((HEAD_VH \/ 100) * lvh) + 'px';\r\n    wrap.style.height = Math.round(((N + 1) * STEP_VH + HEAD_VH) \/ 100 * lvh) + 'px';\r\n  }\r\n\r\n  function easeInCubic(t) { return t * t * t; }\r\n  function smoothT(t)     { return t * t * (3 - 2 * t); }\r\n\r\n  \/\/ Momentos de la Fase A (0\u21921): impacto en el t\u00edtulo y fin de cada pique\r\n  \/\/ (duraciones proporcionales al ancho de cada rebote \u2192 velocidad\r\n  \/\/ horizontal constante, como un proyectil real).\r\n  var IMPACT_A = 0.30;\r\n  var B1_END   = 0.58;\r\n  var B2_END   = 0.79;\r\n\r\n  \/\/ FASE A \u2014 ca\u00edda con gravedad + rebotes decrecientes hacia la l\u00ednea:\r\n  \/\/ cae sobre el t\u00edtulo y desde ah\u00ed pica avanzando SIEMPRE hacia el\r\n  \/\/ inicio de la l\u00ednea \u2014 cada pique m\u00e1s bajo y m\u00e1s corto que el anterior\r\n  \/\/ (h, 0.45h, 0.25h) \u2014 hasta que el \u00faltimo saltito muere cayendo justo\r\n  \/\/ sobre la pista. Avance horizontal mon\u00f3tono: nunca se pasa ni vuelve.\r\n  \/\/ El t\u00edtulo queda quieto. Todo gobernado por el progress (scrubbing\r\n  \/\/ reversible), nada por tiempo.\r\n  function applyBounce(a) {\r\n    var b = bounce;\r\n    var xPos, yPos, t;\r\n    if (a < IMPACT_A) {\r\n      \/\/ ca\u00edda: easeIn (gravedad) desde fuera de cuadro hasta el t\u00edtulo\r\n      t = easeInCubic(a \/ IMPACT_A);\r\n      xPos = b.xImp;\r\n      yPos = b.yStart + (b.yImp - b.yStart) * t;\r\n    } else if (a < B1_END) {\r\n      \/\/ pique 1: arco completo avanzando hacia la l\u00ednea\r\n      t = (a - IMPACT_A) \/ (B1_END - IMPACT_A);\r\n      xPos = b.xImp + (b.x1 - b.xImp) * t;\r\n      yPos = b.yImp - b.h * Math.sin(Math.PI * t);\r\n    } else if (a < B2_END) {\r\n      \/\/ pique 2: m\u00e1s bajo y m\u00e1s corto (pierde energ\u00eda)\r\n      t = (a - B1_END) \/ (B2_END - B1_END);\r\n      xPos = b.x1 + (b.x2 - b.x1) * t;\r\n      yPos = b.yImp - b.h * 0.45 * Math.sin(Math.PI * t);\r\n    } else {\r\n      \/\/ saltito final: un arco chiquito que se apaga mientras la gravedad\r\n      \/\/ la baja hasta el inicio de la pista \u2014 aterriza justo en la l\u00ednea\r\n      t = (a - B2_END) \/ (1 - B2_END);\r\n      xPos = b.x2 + (b.xLine - b.x2) * t;\r\n      yPos = b.yImp - b.h * 0.25 * Math.sin(Math.PI * t) * (1 - t) +\r\n             (b.yLine - b.yImp) * t * t;\r\n    }\r\n    comet.style.left = xPos.toFixed(1) + 'px';\r\n    comet.style.top  = yPos.toFixed(1) + 'px';\r\n    comet.style.opacity = yPos >= 0 ? 1 : 0;   \/\/ invisible mientras est\u00e1 fuera de cuadro\r\n  }\r\n\r\n  \/\/ Longitud del path a una altura y dada, por b\u00fasqueda binaria\r\n  \/\/ (la y del camino es mon\u00f3tona): precisi\u00f3n sub-p\u00edxel.\r\n  function lenAtY(yT) {\r\n    var lo = 0, hi = L;\r\n    for (var it = 0; it < 24; it++) {\r\n      var mid = (lo + hi) \/ 2;\r\n      if (base.getPointAtLength(mid).y < yT) lo = mid; else hi = mid;\r\n    }\r\n    return (lo + hi) \/ 2;\r\n  }\r\n\r\n  \/\/ FASE B \u2014 el sistema de pista de siempre, pero recibiendo directamente\r\n  \/\/ la LONGITUD hasta la bola: cola dash desde el inicio hasta la bola,\r\n  \/\/ umbrales de pasos por longitud. Mismo L, mismo espacio de coordenadas.\r\n  function applyTrack(head) {\r\n    head = Math.min(L, Math.max(0, head));\r\n\r\n    lit.style.strokeDashoffset = Math.max(0, L - head).toFixed(1);\r\n\r\n    var pt = base.getPointAtLength(head);\r\n    comet.style.left = pt.x.toFixed(1) + 'px';\r\n    comet.style.top  = pt.y.toFixed(1) + 'px';\r\n    comet.style.opacity = (pt.y >= 0 && pt.y <= pathH) ? 1 : 0;\r\n\r\n    for (var i = 0; i < N; i++) {\r\n      var on = head >= nodes[i].len - L * 0.002;\r\n      steps[i].classList.toggle('obxp-on', on);\r\n      dots[i].classList.toggle('obxp-on', on);\r\n    }\r\n  }\r\n\r\n  \/\/ Aplica el estado para UN \u00daNICO progress global p (0 \u2192 1). Reversible.\r\n  \/\/ p < HANDOFF: Fase A (rebotes), pista apagada y pasos apagados.\r\n  \/\/ p \u2265 HANDOFF: Fase B \u2014 la bola viaja SIEMPRE sobre la l\u00ednea de lectura\r\n  \/\/ del viewport (TRIGGER): la altura objetivo en coordenadas de la\r\n  \/\/ secci\u00f3n sale del scroll y se convierte a longitud de path. As\u00ed la luz\r\n  \/\/ llega al nodo de cada paso exactamente cuando ese nodo est\u00e1 al\r\n  \/\/ TRIGGER de la pantalla \u2014 cada texto se ilumina apenas aparece.\r\n  function apply(p) {\r\n    p = Math.min(1, Math.max(0, p));\r\n    if (p < HANDOFF) {\r\n      applyBounce(p \/ HANDOFF);\r\n      \/\/ la l\u00ednea todav\u00eda no se ilumina y ning\u00fan paso est\u00e1 activo\r\n      lit.style.strokeDashoffset = L;\r\n      for (var i = 0; i < N; i++) {\r\n        steps[i].classList.remove('obxp-on');\r\n        dots[i].classList.remove('obxp-on');\r\n      }\r\n    } else {\r\n      \/\/ altura de la l\u00ednea de lectura en coordenadas de la secci\u00f3n:\r\n      \/\/ rect.top = lvh \u2212 p\u00b7total  \u2192  yLectura = TRIGGER\u00b7lvh \u2212 rect.top\r\n      var lvh = obdLVH();\r\n      var total = pathH + (1 - TRIGGER) * lvh;\r\n      var yT = p * total - (1 - TRIGGER) * lvh;\r\n      var head = yT >= pathH ? L : (yT <= bounce.yLine ? 0 : lenAtY(yT));\r\n      applyTrack(head);\r\n    }\r\n  }\r\n\r\n  var target = 0;\r\n  var current = 0;\r\n\r\n  \/\/ Progress \u00fanico desde el scroll (clamp a [0,1]).\r\n  \/\/ p=0 APENAS la secci\u00f3n asoma por el borde inferior del viewport \u2014 as\u00ed\r\n  \/\/ la ca\u00edda de la bola arranca de inmediato al mostrarse la secci\u00f3n \u2014 y\r\n  \/\/ p=1 cuando el final de la secci\u00f3n pasa la l\u00ednea de lectura (TRIGGER).\r\n  function readScroll() {\r\n    var rect = wrap.getBoundingClientRect();\r\n    if (rect.height <= 0) { target = 0; return; }\r\n    var vh = obdLVH();   \/\/ mismo viewport estable que usa el mapeo de la bola\r\n    var total = rect.height + vh * (1 - TRIGGER);\r\n    target = Math.min(1, Math.max(0, (vh - rect.top) \/ total));\r\n  }\r\n\r\n  \/\/ --- loop con requestAnimationFrame (nada se escribe en el evento scroll),\r\n  \/\/     activo SOLO cuando la secci\u00f3n est\u00e1 en viewport ---\r\n  var active = false;\r\n  var running = false;\r\n  function loop() {\r\n    if (!active) { running = false; return; }\r\n    readScroll();\r\n    current += (target - current) * EASE;\r\n    apply(current);\r\n    requestAnimationFrame(loop);\r\n  }\r\n  function start() {\r\n    if (!running) { running = true; requestAnimationFrame(loop); }\r\n  }\r\n\r\n  setSizes();\r\n  build();\r\n\r\n  \/\/ re-medir cuando carguen las fuentes (el t\u00edtulo define el punto de impacto)\r\n  window.addEventListener('load', function () {\r\n    build();\r\n    readScroll();\r\n    apply(current);\r\n  });\r\n\r\n  \/\/ prefers-reduced-motion: sin rebotes \u2014 estado est\u00e1tico con la l\u00ednea\r\n  \/\/ celeste completa, la bola al final y todos los pasos activos\r\n  if (reduced) {\r\n    apply(1);\r\n    return;\r\n  }\r\n\r\n  apply(0);\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function (entries) {\r\n      active = entries[0].isIntersecting;\r\n      if (active) start();\r\n    }, { rootMargin: '120px' }).observe(wrap);\r\n  } else {\r\n    active = true;\r\n    start();\r\n  }\r\n\r\n  \/\/ resize: SOLO cuando cambia el ancho (ignora la barra del navegador m\u00f3vil);\r\n  \/\/ build() recalcula la \"d\", L y los waypoints del rebote\r\n  window.addEventListener('resize', (function () {\r\n    var lastW = window.innerWidth;\r\n    var t;\r\n    return function () {\r\n      if (window.innerWidth === lastW) return;\r\n      lastW = window.innerWidth;\r\n      clearTimeout(t);\r\n      t = setTimeout(function () {\r\n        setSizes();\r\n        build();\r\n        readScroll();\r\n        current = target;\r\n        apply(current);\r\n      }, 150);\r\n    };\r\n  })());\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e720a7e e-con-full e-flex e-con e-parent\" data-id=\"e720a7e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fb2a54c elementor-widget elementor-widget-heading\" data-id=\"5fb2a54c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Comencemos tu proyecto<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6580a009 elementor-widget elementor-widget-spacer\" data-id=\"6580a009\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2169f7e elementor-widget elementor-widget-html\" data-id=\"2169f7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     TARJETAS DE PRICING MENSUAL \u2014 Open Box Digital\r\n     Pegar TODO este bloque en un widget HTML de Elementor Pro.\r\n     Autocontenido: HTML + CSS + JS, sin librer\u00edas externas.\r\n     Fondo transparente: la secci\u00f3n\/fondo los maneja Elementor.\r\n     La grilla se adapta al ancho REAL del contenedor (auto-fit),\r\n     as\u00ed nunca desborda aunque la secci\u00f3n sea boxed o angosta.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* ====== Encapsulado: todo vive bajo el prefijo sb-pricing- ====== *\/\r\n  .sb-pricing-section,\r\n  .sb-pricing-section * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  .sb-pricing-section {\r\n    position: relative;\r\n    width: 100%;\r\n    background: transparent;\r\n    font-family: Inter, system-ui, sans-serif;\r\n  }\r\n\r\n  \/* ---------- Grilla de tarjetas ----------\r\n     auto-fit + minmax: las columnas se calculan seg\u00fan el ancho REAL del\r\n     contenedor (no del viewport). Con espacio entran 4; si el contenedor\r\n     es m\u00e1s angosto bajan a 3\/2\/1 solas, sin desbordar jam\u00e1s. *\/\r\n  .sb-pricing-cards {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n    gap: 22px;\r\n    align-items: stretch;\r\n  }\r\n\r\n  \/* ---------- Tarjeta (glassmorphism + degradado azul) ---------- *\/\r\n  .sb-pricing-card {\r\n    position: relative;\r\n    min-width: 0;                              \/* nunca fuerza desborde de la grilla *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 34px 28px 30px;\r\n    border-radius: 22px;\r\n    background:\r\n      linear-gradient(165deg, rgba(30,58,110,0.72) 0%, rgba(12,20,40,0.85) 45%, rgba(6,10,22,0.95) 100%);\r\n    border: 1px solid rgba(120,190,255,0.16);\r\n    -webkit-backdrop-filter: blur(8px);\r\n            backdrop-filter: blur(8px);\r\n    box-shadow: 0 24px 60px rgba(0,0,0,0.45),\r\n                inset 0 1px 0 rgba(255,255,255,0.06);\r\n    \/* estado inicial de la animaci\u00f3n de entrada *\/\r\n    opacity: 0;\r\n    transform: translateY(30px) scale(0.98);\r\n    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),\r\n                box-shadow 0.35s ease, border-color 0.35s ease;\r\n    will-change: transform, opacity;\r\n  }\r\n  .sb-pricing-visible .sb-pricing-card {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n\r\n  \/* l\u00ednea de luz superior de cada tarjeta *\/\r\n  .sb-pricing-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0; left: 12%; right: 12%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(140,210,255,0.6), transparent);\r\n  }\r\n\r\n  \/* spotlight que sigue al cursor (se enciende en hover) *\/\r\n  .sb-pricing-card::after {\r\n    content: \"\";\r\n    position: absolute; inset: 0;\r\n    border-radius: inherit;\r\n    background: radial-gradient(300px circle at var(--sb-mx, 50%) var(--sb-my, 50%),\r\n                rgba(84,211,243,0.13), transparent 65%);\r\n    opacity: 0;\r\n    transition: opacity 0.4s ease;\r\n    pointer-events: none;\r\n  }\r\n  .sb-pricing-card:hover::after { opacity: 1; }\r\n  .sb-pricing-card:hover {\r\n    border-color: rgba(120,200,255,0.4);\r\n    box-shadow: 0 30px 70px rgba(0,0,0,0.55),\r\n                0 0 40px rgba(60,140,255,0.12),\r\n                inset 0 1px 0 rgba(255,255,255,0.08);\r\n  }\r\n\r\n  \/* ---------- Contenido de la tarjeta ----------\r\n     Colores con especificidad alta + !important: los temas de WordPress \/\r\n     Elementor suelen imponer su color a los h3 y links (por eso los\r\n     t\u00edtulos se ve\u00edan negros) \u2014 esto lo blinda. *\/\r\n  .sb-pricing-section .sb-pricing-plan {\r\n    font-size: 0.8rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.28em;\r\n    text-transform: uppercase;\r\n    color: #54d3f3 !important;\r\n    margin-bottom: 20px;\r\n  }\r\n  .sb-pricing-section .sb-pricing-price {\r\n    display: flex;\r\n    align-items: baseline;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n    margin-bottom: 18px;\r\n    color: #ffffff !important;\r\n  }\r\n  .sb-pricing-section .sb-pricing-amount {\r\n    font-size: clamp(2.1rem, 2.6vw, 2.6rem);\r\n    font-weight: 800;\r\n    letter-spacing: -0.02em;\r\n    line-height: 1;\r\n    color: #ffffff !important;\r\n  }\r\n  .sb-pricing-section .sb-pricing-mil {\r\n    font-size: 0.55em;\r\n    font-weight: 700;\r\n    color: rgba(255,255,255,0.85) !important;\r\n  }\r\n  .sb-pricing-section .sb-pricing-period {\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n    color: rgba(255,255,255,0.45) !important;\r\n  }\r\n  .sb-pricing-section .sb-pricing-desc {\r\n    font-size: 0.92rem;\r\n    line-height: 1.65;\r\n    color: rgba(255,255,255,0.68) !important;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  \/* ---------- Bot\u00f3n ---------- *\/\r\n  .sb-pricing-section .sb-pricing-btn {\r\n    margin-top: auto;                          \/* empuja el bot\u00f3n al fondo *\/\r\n    display: block;\r\n    text-align: center;\r\n    padding: 14px 18px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(255,255,255,0.32);\r\n    background: rgba(255,255,255,0.04);\r\n    color: #ffffff !important;\r\n    font-size: 0.95rem;\r\n    font-weight: 600;\r\n    text-decoration: none !important;\r\n    letter-spacing: 0.01em;\r\n    transition: background 0.3s ease, box-shadow 0.3s ease,\r\n                border-color 0.3s ease, transform 0.3s ease;\r\n  }\r\n  .sb-pricing-section .sb-pricing-btn:hover {\r\n    background: rgba(84,211,243,0.12);\r\n    border-color: rgba(140,220,255,0.75);\r\n    box-shadow: 0 0 24px rgba(84,211,243,0.35);\r\n    transform: translateY(-2px);\r\n    color: #ffffff !important;\r\n  }\r\n\r\n  .sb-pricing-section .sb-pricing-note {\r\n    display: block;\r\n    margin-top: 14px;\r\n    text-align: center;\r\n    font-size: 0.78rem;\r\n    color: rgba(255,255,255,0.42) !important;\r\n  }\r\n  .sb-pricing-note::before {\r\n    content: \"\u2713 \";\r\n    color: #54d3f3;\r\n    font-weight: 700;\r\n  }\r\n\r\n  \/* ---------- Plan destacado (E-COMMERCE) ----------\r\n     Jerarqu\u00eda sobria, sin badge: tarjeta m\u00e1s luminosa, borde celeste\r\n     definido y el \u00daNICO bot\u00f3n relleno con degradado de la fila. *\/\r\n  .sb-pricing-featured {\r\n    background:\r\n      linear-gradient(165deg, rgba(38,74,140,0.8) 0%, rgba(14,24,50,0.9) 45%, rgba(7,12,26,0.96) 100%);\r\n    border-color: rgba(84,211,243,0.45);\r\n    box-shadow: 0 30px 80px rgba(0,0,0,0.55),\r\n                inset 0 1px 0 rgba(255,255,255,0.08);\r\n  }\r\n  .sb-pricing-section .sb-pricing-featured .sb-pricing-btn {\r\n    border-color: transparent;\r\n    background: linear-gradient(90deg, #37b6dd, #5a7dff);\r\n    color: #041018 !important;\r\n    font-weight: 700;\r\n  }\r\n  .sb-pricing-section .sb-pricing-featured .sb-pricing-btn:hover {\r\n    box-shadow: 0 0 28px rgba(84,211,243,0.5);\r\n    transform: translateY(-2px);\r\n    background: linear-gradient(90deg, #54d3f3, #7c9dff);\r\n    color: #041018 !important;\r\n  }\r\n\r\n  \/* ---------- Accesibilidad: sin animaciones si el usuario lo pide ---------- *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .sb-pricing-card { opacity: 1 !important; transform: none !important; transition: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"sb-pricing-section\" id=\"sbPricing\">\r\n\r\n  <div class=\"sb-pricing-cards\">\r\n\r\n    <!-- 1. PRESENCIA -->\r\n    <article class=\"sb-pricing-card\">\r\n      <h3 class=\"sb-pricing-plan\">Presencia<\/h3>\r\n      <div class=\"sb-pricing-price\">\r\n        <span class=\"sb-pricing-amount\">$56<span class=\"sb-pricing-mil\"> mil<\/span><\/span>\r\n        <span class=\"sb-pricing-period\">\/mes<\/span>\r\n      <\/div>\r\n      <p class=\"sb-pricing-desc\">Landing optimizada para obtener presencia, captar y convertir clientes desde el d\u00eda uno.<\/p>\r\n      <a class=\"sb-pricing-btn\" href=\"#\">Gratis por 7 d\u00edas<\/a>\r\n      <span class=\"sb-pricing-note\">No se cobra comisi\u00f3n<\/span>\r\n    <\/article>\r\n\r\n    <!-- 2. PROFESIONAL -->\r\n    <article class=\"sb-pricing-card\">\r\n      <h3 class=\"sb-pricing-plan\">Profesional<\/h3>\r\n      <div class=\"sb-pricing-price\">\r\n        <span class=\"sb-pricing-amount\">$94<span class=\"sb-pricing-mil\"> mil<\/span><\/span>\r\n        <span class=\"sb-pricing-period\">\/mes<\/span>\r\n      <\/div>\r\n      <p class=\"sb-pricing-desc\">Web corporativa con estructura estrat\u00e9gica y base s\u00f3lida de crecimiento.<\/p>\r\n      <a class=\"sb-pricing-btn\" href=\"#\">Gratis por 7 d\u00edas<\/a>\r\n      <span class=\"sb-pricing-note\">No se cobra comisi\u00f3n<\/span>\r\n    <\/article>\r\n\r\n    <!-- 3. E-COMMERCE (destacado) -->\r\n    <article class=\"sb-pricing-card sb-pricing-featured\">\r\n      <h3 class=\"sb-pricing-plan\">E-commerce<\/h3>\r\n      <div class=\"sb-pricing-price\">\r\n        <span class=\"sb-pricing-amount\">$147<span class=\"sb-pricing-mil\"> mil<\/span><\/span>\r\n        <span class=\"sb-pricing-period\">\/mes<\/span>\r\n      <\/div>\r\n      <p class=\"sb-pricing-desc\">Tienda online profesional optimizada para vender y crecer de forma sostenida.<\/p>\r\n      <a class=\"sb-pricing-btn\" href=\"#\">Gratis por 7 d\u00edas<\/a>\r\n      <span class=\"sb-pricing-note\">No se cobra comisi\u00f3n<\/span>\r\n    <\/article>\r\n\r\n    <!-- 4. EMPRESARIAL -->\r\n    <article class=\"sb-pricing-card\">\r\n      <h3 class=\"sb-pricing-plan\">Empresarial<\/h3>\r\n      <div class=\"sb-pricing-price\">\r\n        <span class=\"sb-pricing-amount\">Consultar<\/span>\r\n      <\/div>\r\n      <p class=\"sb-pricing-desc\">Desarrollo estrat\u00e9gico para empresas que buscan dominar su mercado.<\/p>\r\n      <a class=\"sb-pricing-btn\" href=\"#\">Conocer m\u00e1s<\/a>\r\n      <span class=\"sb-pricing-note\">No se cobra comisi\u00f3n<\/span>\r\n    <\/article>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var root  = document.getElementById('sbPricing');\r\n  if (!root) return;\r\n  var cards = Array.prototype.slice.call(root.querySelectorAll('.sb-pricing-card'));\r\n\r\n  var reduced = window.matchMedia &&\r\n                window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- Entrada suave con IntersectionObserver (escalonada) ---------- *\/\r\n  cards.forEach(function (card, i) {\r\n    card.style.transitionDelay = (i * 90) + 'ms';   \/\/ stagger de aparici\u00f3n\r\n  });\r\n\r\n  function reveal() {\r\n    root.classList.add('sb-pricing-visible');\r\n    \/\/ tras la entrada, quitar el delay y acelerar la transici\u00f3n del transform\r\n    \/\/ para que el hover 3D responda al instante\r\n    setTimeout(function () {\r\n      cards.forEach(function (card) {\r\n        card.style.transitionDelay = '0ms';\r\n        card.style.transition =\r\n          'transform 0.18s ease-out, box-shadow 0.35s ease, border-color 0.35s ease';\r\n      });\r\n    }, 1400);\r\n  }\r\n\r\n  if (reduced || !('IntersectionObserver' in window)) {\r\n    reveal();\r\n  } else {\r\n    new IntersectionObserver(function (entries, obs) {\r\n      if (entries[0].isIntersecting) {\r\n        reveal();\r\n        obs.disconnect();\r\n      }\r\n    }, { threshold: 0.15 }).observe(root);\r\n  }\r\n\r\n  \/* ---------- Hover 3D + spotlight que sigue al cursor ---------- *\/\r\n  \/* solo en dispositivos con puntero fino (desktop); en touch no aplica *\/\r\n  var canHover = window.matchMedia &&\r\n                 window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\r\n  if (!reduced && canHover) {\r\n    cards.forEach(function (card) {\r\n      card.addEventListener('pointermove', function (e) {\r\n        var r  = card.getBoundingClientRect();\r\n        var px = (e.clientX - r.left) \/ r.width;\r\n        var py = (e.clientY - r.top)  \/ r.height;\r\n        \/\/ posici\u00f3n del spotlight\r\n        card.style.setProperty('--sb-mx', (px * 100).toFixed(1) + '%');\r\n        card.style.setProperty('--sb-my', (py * 100).toFixed(1) + '%');\r\n        \/\/ inclinaci\u00f3n 3D sutil\r\n        var rx = (0.5 - py) * 7;\r\n        var ry = (px - 0.5) * 9;\r\n        card.style.transform =\r\n          'perspective(900px) rotateX(' + rx.toFixed(2) + 'deg)' +\r\n          ' rotateY(' + ry.toFixed(2) + 'deg) translateY(-4px)';\r\n      });\r\n      card.addEventListener('pointerleave', function () {\r\n        card.style.transform = '';\r\n      });\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3967135d e-con-full e-flex e-con e-parent\" data-id=\"3967135d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-6051130 e-flex e-con-boxed e-con e-child\" data-id=\"6051130\" 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-3abcc193 elementor-widget elementor-widget-heading\" data-id=\"3abcc193\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Preguntas frecuentes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e537b6 elementor-widget elementor-widget-spacer\" data-id=\"9e537b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ecd4e73 elementor-widget elementor-widget-text-editor\" data-id=\"ecd4e73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46e72ea elementor-widget elementor-widget-spacer\" data-id=\"46e72ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30f8429 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"30f8429\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- ============================================================\r\n     OPEN BOX DIGITAL \u2014 BOTONES CTA (WIDGET INDEPENDIENTE)\r\n     Pegar en un widget HTML de Elementor. No necesita JS.\r\n     \u2705 Bot\u00f3n primario con gradiente + borde giratorio (conic)\r\n     \u2705 Bot\u00f3n ghost con borde giratorio propio\r\n     \u2705 Mismo ancho ambos, apilan bien en m\u00f3vil\r\n     \u2705 prefers-reduced-motion respetado\r\n     Para cambiar los destinos: edit\u00e1 los href=\"#planes\".\r\n     ============================================================ -->\r\n\r\n<div class=\"obd-cta3\">\r\n  <a class=\"obd-btn obd-btn-ghost\" href=\"#planes\">Comenzar Gratis<\/a>\r\n<\/div>\r\n\r\n<style>\r\n  .obd-cta3{ display:flex; gap:14px; justify-content:right; flex-wrap:wrap;\r\n    font-family:'Manrope',sans-serif; }\r\n\r\n  .obd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n    min-width:min(260px, 100%);                 \/* ambos botones al mismo ancho *\/\r\n    padding:13px 26px; border-radius:100px;\r\n    font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; text-decoration:none;\r\n    box-sizing:border-box;\r\n    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, color .3s; }\r\n\r\n  .obd-btn-ghost,\r\n  .obd-btn-ghost:link,\r\n  .obd-btn-ghost:visited{ background:rgba(255,255,255,.05); color:#fff !important;\r\n    border:1px solid rgba(255,255,255,.18); }\r\n  .obd-btn-ghost:hover,\r\n  .obd-btn-ghost:focus-visible{ color:#fff !important; border-color:#2dc1e5;\r\n    background:rgba(45,193,229,.10); transform:translateY(-2px); }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n primario ---- *\/\r\n  @property --obd-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-primary{ position:relative; }\r\n  .obd-btn-primary::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a),\r\n      transparent 0deg, #7df0d0 40deg, #eafff8 72deg, #5ad6f5 104deg, transparent 165deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin 4.5s linear infinite; opacity:.7; pointer-events:none; }\r\n  @keyframes obdBorderSpin{ to{ --obd-a:360deg; } }\r\n  .obd-btn-primary:hover::before,\r\n  .obd-btn-primary:focus-visible::before{ opacity:1; animation-duration:1.5s; }\r\n\r\n  \/* ---- Borde giratorio del bot\u00f3n ghost ---- *\/\r\n  @property --obd-a2{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n  .obd-btn-ghost{ position:relative; }\r\n  .obd-btn-ghost::before{ content:\"\"; position:absolute; inset:0; border-radius:inherit; padding:2px;\r\n    background:conic-gradient(from var(--obd-a2),\r\n      transparent 0deg, #5b3df0 40deg, #2dc1e5 80deg, #7df0d0 115deg, transparent 175deg, transparent 360deg);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor; mask-composite:exclude;\r\n    animation:obdBorderSpin2 5s linear infinite; opacity:.6; pointer-events:none; }\r\n  @keyframes obdBorderSpin2{ to{ --obd-a2:360deg; } }\r\n  .obd-btn-ghost:hover::before,\r\n  .obd-btn-ghost:focus-visible::before{ opacity:1; animation-duration:1.7s; }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .obd-btn-ghost::before{ animation:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-313d8ad e-flex e-con-boxed e-con e-child\" data-id=\"313d8ad\" 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-767bfbe9 elementor-widget elementor-widget-html\" data-id=\"767bfbe9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     ACORDE\u00d3N DE PREGUNTAS FRECUENTES \u2014 Open Box Digital\r\n     Pegar TODO este bloque en un widget HTML de Elementor Pro.\r\n     Autocontenido: HTML + CSS + JS, sin librer\u00edas externas.\r\n     Fondo transparente: la secci\u00f3n la maneja Elementor.\r\n     Para editar contenido: cada pregunta es un <div class=\"sb-faq-item\">\r\n     (texto en .sb-faq-qtext y respuesta en el <p> de .sb-faq-a-inner).\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* ====== Encapsulado: todo vive bajo el prefijo sb-faq- ====== *\/\r\n  .sb-faq-section,\r\n  .sb-faq-section * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n    \/* reset de apariencia nativa: algunos temas\/navegadores pintan los\r\n       <button> con sus propios estilos por defecto v\u00eda estos resets *\/\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    text-shadow: none !important;\r\n  }\r\n\r\n  .sb-faq-section {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 860px;\r\n    margin: 0 auto;\r\n    background: transparent;\r\n    font-family: Inter, system-ui, sans-serif !important;\r\n  }\r\n\r\n  .sb-faq-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  \/* ---------- Tarjeta de pregunta (glassmorphism) ----------\r\n     background \/ border-color con !important: blinda contra selectores\r\n     de tema que pinten fondos de <div>\/<article> con alta especificidad. *\/\r\n  .sb-faq-section .sb-faq-item {\r\n    position: relative;\r\n    border-radius: 18px;\r\n    border: 1px solid rgba(120,190,255,0.16) !important;\r\n    background:\r\n      linear-gradient(165deg, rgba(30,58,110,0.55) 0%, rgba(12,20,40,0.78) 50%, rgba(6,10,22,0.9) 100%) !important;\r\n    -webkit-backdrop-filter: blur(8px);\r\n            backdrop-filter: blur(8px);\r\n    box-shadow: 0 18px 44px rgba(0,0,0,0.35),\r\n                inset 0 1px 0 rgba(255,255,255,0.06);\r\n    overflow: hidden;                          \/* recorta la respuesta al plegarse *\/\r\n    \/* estado inicial de la animaci\u00f3n de aparici\u00f3n *\/\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),\r\n                box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;\r\n  }\r\n  .sb-faq-visible .sb-faq-item {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n\r\n  \/* l\u00ednea de luz superior de cada tarjeta *\/\r\n  .sb-faq-section .sb-faq-item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0; left: 14%; right: 14%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(140,210,255,0.5), transparent) !important;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* hover: glow suave + leve levitaci\u00f3n 3D *\/\r\n  .sb-faq-section .sb-faq-item:hover {\r\n    border-color: rgba(120,200,255,0.38) !important;\r\n    box-shadow: 0 22px 54px rgba(0,0,0,0.45),\r\n                0 0 34px rgba(60,140,255,0.12),\r\n                inset 0 1px 0 rgba(255,255,255,0.08);\r\n    transform: perspective(900px) rotateX(0.6deg) translateY(-2px);\r\n  }\r\n\r\n  \/* ---------- Abierta: borde con brillo animado sutil + halo ---------- *\/\r\n  .sb-faq-section .sb-faq-open,\r\n  .sb-faq-section .sb-faq-open:hover {\r\n    border-color: transparent !important;\r\n    \/* doble fondo: tarjeta (padding-box) + borde degradado (border-box);\r\n       el borde \"respira\" desplazando su gradiente lentamente *\/\r\n    background:\r\n      linear-gradient(165deg, rgba(34,66,126,0.7) 0%, rgba(12,20,42,0.85) 50%, rgba(6,10,24,0.94) 100%) padding-box,\r\n      linear-gradient(110deg,\r\n        rgba(84,211,243,0.65) 0%, rgba(90,125,255,0.25) 30%,\r\n        rgba(84,211,243,0.65) 50%, rgba(90,125,255,0.25) 80%,\r\n        rgba(84,211,243,0.65) 100%) border-box !important;\r\n    background-size: 100% 100%, 300% 100%;\r\n    animation: sbFaqBorder 6s linear infinite;\r\n    box-shadow: 0 22px 54px rgba(0,0,0,0.45),\r\n                0 0 30px rgba(84,211,243,0.10),\r\n                inset 0 1px 0 rgba(255,255,255,0.08);\r\n  }\r\n  @keyframes sbFaqBorder {\r\n    to { background-position: 0 0, 300% 0; }\r\n  }\r\n\r\n  \/* ---------- Fila de la pregunta (bot\u00f3n accesible) ----------\r\n     Blindaje fuerte: muchos temas de WordPress\/Elementor pintan los\r\n     <button> globalmente (fondo, texto, borde, sombra de foco). Se\r\n     resetea todo expl\u00edcitamente con !important. *\/\r\n  .sb-faq-section .sb-faq-q {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 18px;\r\n    width: 100%;\r\n    padding: 22px 26px;\r\n    background: none !important;\r\n    background-color: transparent !important;\r\n    border: 0 !important;\r\n    border-radius: 0 !important;\r\n    box-shadow: none !important;\r\n    outline: none !important;\r\n    cursor: pointer;\r\n    text-align: left;\r\n    font-family: inherit !important;\r\n    color: inherit !important;\r\n    \/* tipograf\u00eda blindada: muchos temas ponen los <button> en MAY\u00daSCULAS\r\n       y con white-space:nowrap \u2014 el nowrap impide que la pregunta baje de\r\n       l\u00ednea, empuja la cruz fuera de la tarjeta y el overflow la recorta\r\n       (el bug de mobile). Se fuerza el comportamiento normal. *\/\r\n    white-space: normal !important;\r\n    text-transform: none !important;\r\n    letter-spacing: normal !important;\r\n    line-height: 1.4 !important;\r\n  }\r\n  .sb-faq-section .sb-faq-q:focus,\r\n  .sb-faq-section .sb-faq-q:focus-visible {\r\n    box-shadow: 0 0 0 2px rgba(84,211,243,0.45) inset !important;\r\n    outline: none !important;\r\n  }\r\n\r\n  .sb-faq-section .sb-faq-qtext {\r\n    \/* flex 1 + min-width 0: el texto ocupa el espacio disponible y PUEDE\r\n       encogerse para bajar de l\u00ednea (sin min-width:0, un span dentro de\r\n       flex no se achica y desborda) \u2014 la cruz queda siempre a la vista *\/\r\n    flex: 1 1 auto;\r\n    min-width: 0;\r\n    font-size: clamp(1rem, 1.4vw, 1.12rem);\r\n    font-weight: 600;\r\n    line-height: 1.4 !important;\r\n    color: #ffffff !important;\r\n    letter-spacing: 0.01em !important;\r\n    background: none !important;\r\n    white-space: normal !important;\r\n    text-transform: none !important;\r\n    overflow-wrap: break-word;\r\n  }\r\n  .sb-faq-section .sb-faq-open .sb-faq-qtext { color: #aee7f8 !important; }\r\n\r\n  \/* ---------- \u00cdcono + \/ \u2212 (rota suave al abrir) ---------- *\/\r\n  .sb-faq-section .sb-faq-icon {\r\n    position: relative;\r\n    flex: 0 0 auto;\r\n    width: 34px; height: 34px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(84,211,243,0.4) !important;\r\n    background: rgba(84,211,243,0.07) !important;\r\n    transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1),\r\n                background 0.3s ease, border-color 0.3s ease,\r\n                box-shadow 0.3s ease;\r\n  }\r\n  .sb-faq-section .sb-faq-icon::before,\r\n  .sb-faq-section .sb-faq-icon::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%; left: 50%;\r\n    background: #54d3f3 !important;\r\n    border-radius: 2px;\r\n    transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.3s ease;\r\n  }\r\n  .sb-faq-section .sb-faq-icon::before {       \/* barra horizontal *\/\r\n    width: 12px; height: 2px;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n  .sb-faq-section .sb-faq-icon::after {        \/* barra vertical (desaparece al abrir) *\/\r\n    width: 2px; height: 12px;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n  .sb-faq-section .sb-faq-open .sb-faq-icon {\r\n    transform: rotate(180deg);                 \/* rotaci\u00f3n suave del + hacia el \u2212 *\/\r\n    background: rgba(84,211,243,0.16) !important;\r\n    border-color: rgba(140,220,255,0.8) !important;\r\n    box-shadow: 0 0 16px rgba(84,211,243,0.35);\r\n  }\r\n  .sb-faq-section .sb-faq-open .sb-faq-icon::after {\r\n    transform: translate(-50%, -50%) rotate(90deg);\r\n    opacity: 0;\r\n  }\r\n\r\n  \/* ---------- Respuesta: despliegue fluido (grid 0fr \u2192 1fr) ---------- *\/\r\n  .sb-faq-a {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    transition: grid-template-rows 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);\r\n  }\r\n  .sb-faq-open .sb-faq-a {\r\n    grid-template-rows: 1fr;\r\n  }\r\n  .sb-faq-a-inner {\r\n    min-height: 0;                             \/* necesario para que 0fr colapse *\/\r\n    overflow: hidden;\r\n  }\r\n  .sb-faq-section .sb-faq-a-inner p {\r\n    padding: 0 26px 24px;\r\n    font-size: 0.95rem;\r\n    line-height: 1.7;\r\n    color: rgba(255,255,255,0.68) !important;\r\n    background: none !important;\r\n  }\r\n  \/* l\u00ednea luminosa que separa pregunta y respuesta *\/\r\n  .sb-faq-section .sb-faq-a-inner p::before {\r\n    content: \"\";\r\n    display: block;\r\n    height: 1px;\r\n    margin-bottom: 16px;\r\n    background: linear-gradient(90deg, rgba(84,211,243,0.35), transparent 70%) !important;\r\n  }\r\n\r\n  \/* ---------- Mobile ---------- *\/\r\n  @media (max-width: 640px) {\r\n    .sb-faq-section .sb-faq-q { padding: 18px 18px; gap: 14px; }\r\n    .sb-faq-section .sb-faq-a-inner p { padding: 0 18px 20px; }\r\n    .sb-faq-section .sb-faq-icon { width: 30px; height: 30px; }\r\n  }\r\n\r\n  \/* ---------- Accesibilidad: sin animaciones si el usuario lo pide ---------- *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .sb-faq-item { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }\r\n    .sb-faq-a, .sb-faq-icon, .sb-faq-icon::before, .sb-faq-icon::after { transition: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"sb-faq-section\" id=\"sbFaq\">\r\n  <div class=\"sb-faq-list\">\r\n\r\n    <!-- Pregunta 1 (abierta por defecto: clase sb-faq-open) -->\r\n    <div class=\"sb-faq-item sb-faq-open\">\r\n      <button class=\"sb-faq-q\" type=\"button\" aria-expanded=\"true\">\r\n        <span class=\"sb-faq-qtext\">\u00bfCu\u00e1nto tarda el desarrollo de mi web?<\/span>\r\n        <span class=\"sb-faq-icon\" aria-hidden=\"true\"><\/span>\r\n      <\/button>\r\n      <div class=\"sb-faq-a\">\r\n        <div class=\"sb-faq-a-inner\">\r\n          <p>Depende del plan elegido, pero normalmente entre 7 y 21 d\u00edas h\u00e1biles.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Pregunta 2 -->\r\n    <div class=\"sb-faq-item\">\r\n      <button class=\"sb-faq-q\" type=\"button\" aria-expanded=\"false\">\r\n        <span class=\"sb-faq-qtext\">\u00bfEl servicio incluye hosting y dominio?<\/span>\r\n        <span class=\"sb-faq-icon\" aria-hidden=\"true\"><\/span>\r\n      <\/button>\r\n      <div class=\"sb-faq-a\">\r\n        <div class=\"sb-faq-a-inner\">\r\n          <p>Podemos asesorarte y ayudarte con la configuraci\u00f3n, pero el hosting y dominio se gestionan aparte.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Pregunta 3 -->\r\n    <div class=\"sb-faq-item\">\r\n      <button class=\"sb-faq-q\" type=\"button\" aria-expanded=\"false\">\r\n        <span class=\"sb-faq-qtext\">\u00bfPuedo pedir cambios durante el proceso?<\/span>\r\n        <span class=\"sb-faq-icon\" aria-hidden=\"true\"><\/span>\r\n      <\/button>\r\n      <div class=\"sb-faq-a\">\r\n        <div class=\"sb-faq-a-inner\">\r\n          <p>S\u00ed. Cada plan incluye una etapa de revisi\u00f3n para ajustar detalles antes de publicar.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Pregunta 4 -->\r\n    <div class=\"sb-faq-item\">\r\n      <button class=\"sb-faq-q\" type=\"button\" aria-expanded=\"false\">\r\n        <span class=\"sb-faq-qtext\">\u00bfLa web queda optimizada para celulares?<\/span>\r\n        <span class=\"sb-faq-icon\" aria-hidden=\"true\"><\/span>\r\n      <\/button>\r\n      <div class=\"sb-faq-a\">\r\n        <div class=\"sb-faq-a-inner\">\r\n          <p>S\u00ed. Todas las webs se desarrollan con dise\u00f1o responsive para desktop, tablet y mobile.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Pregunta 5 -->\r\n    <div class=\"sb-faq-item\">\r\n      <button class=\"sb-faq-q\" type=\"button\" aria-expanded=\"false\">\r\n        <span class=\"sb-faq-qtext\">\u00bfLa prueba gratis por 7 d\u00edas tiene costo oculto?<\/span>\r\n        <span class=\"sb-faq-icon\" aria-hidden=\"true\"><\/span>\r\n      <\/button>\r\n      <div class=\"sb-faq-a\">\r\n        <div class=\"sb-faq-a-inner\">\r\n          <p>No. La prueba es gratuita y no se cobra comisi\u00f3n.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var root  = document.getElementById('sbFaq');\r\n  if (!root) return;\r\n  var items = Array.prototype.slice.call(root.querySelectorAll('.sb-faq-item'));\r\n\r\n  var reduced = window.matchMedia &&\r\n                window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- Acorde\u00f3n: solo UNA pregunta abierta a la vez ---------- *\/\r\n  items.forEach(function (item) {\r\n    var btn = item.querySelector('.sb-faq-q');\r\n    if (!btn) return;\r\n    btn.addEventListener('click', function () {\r\n      var isOpen = item.classList.contains('sb-faq-open');\r\n      \/\/ cerrar todas\r\n      items.forEach(function (other) {\r\n        other.classList.remove('sb-faq-open');\r\n        var b = other.querySelector('.sb-faq-q');\r\n        if (b) b.setAttribute('aria-expanded', 'false');\r\n      });\r\n      \/\/ abrir la clickeada (si estaba cerrada)\r\n      if (!isOpen) {\r\n        item.classList.add('sb-faq-open');\r\n        btn.setAttribute('aria-expanded', 'true');\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* ---------- Aparici\u00f3n al hacer scroll (escalonada) ---------- *\/\r\n  items.forEach(function (item, i) {\r\n    item.style.transitionDelay = (i * 80) + 'ms';   \/\/ stagger de entrada\r\n  });\r\n\r\n  function reveal() {\r\n    root.classList.add('sb-faq-visible');\r\n    \/\/ tras la entrada, quitar el delay para que hover\/apertura respondan al instante\r\n    setTimeout(function () {\r\n      items.forEach(function (item) {\r\n        item.style.transitionDelay = '0ms';\r\n      });\r\n    }, 1200);\r\n  }\r\n\r\n  if (reduced || !('IntersectionObserver' in window)) {\r\n    reveal();\r\n  } else {\r\n    new IntersectionObserver(function (entries, obs) {\r\n      if (entries[0].isIntersecting) {\r\n        reveal();\r\n        obs.disconnect();\r\n      }\r\n    }, { threshold: 0.12 }).observe(root);\r\n  }\r\n})();\r\n<\/script>\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio.Vos solo te ocup\u00e1s de vender \u2014 sin armar nada. Soluciones para tu rubro Ver nuestros planes dise\u00f1o \u00b7 innovaci\u00f3n \u00b7 inspiraci\u00f3n \u00b7 impacto Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio. Vos solo te ocup\u00e1s [&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-5044","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Inicio - OpenBox Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openboxdigital.com\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inicio - OpenBox Digital\" \/>\n<meta property=\"og:description\" content=\"Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio.Vos solo te ocup\u00e1s de vender \u2014 sin armar nada. Soluciones para tu rubro Ver nuestros planes dise\u00f1o \u00b7 innovaci\u00f3n \u00b7 inspiraci\u00f3n \u00b7 impacto Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio. Vos solo te ocup\u00e1s [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openboxdigital.com\/\" \/>\n<meta property=\"og:site_name\" content=\"OpenBox Digital\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T13:02:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"55 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/\",\"url\":\"https:\\\/\\\/openboxdigital.com\\\/\",\"name\":\"Inicio - OpenBox Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/1.png\",\"datePublished\":\"2026-07-08T01:07:48+00:00\",\"dateModified\":\"2026-07-09T13:02:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/openboxdigital.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/1.png\",\"contentUrl\":\"https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/1.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/openboxdigital.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inicio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/openboxdigital.com\\\/\",\"name\":\"OpenBox Digital\",\"description\":\"Tu empresa online\",\"publisher\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/openboxdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#organization\",\"name\":\"OpenBox Digital\",\"url\":\"https:\\\/\\\/openboxdigital.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Pack-9-scaled.png\",\"contentUrl\":\"https:\\\/\\\/openboxdigital.com\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Pack-9-scaled.png\",\"width\":2560,\"height\":1024,\"caption\":\"OpenBox Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/openboxdigital.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inicio - OpenBox Digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/openboxdigital.com\/","og_locale":"es_ES","og_type":"article","og_title":"Inicio - OpenBox Digital","og_description":"Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio.Vos solo te ocup\u00e1s de vender \u2014 sin armar nada. Soluciones para tu rubro Ver nuestros planes dise\u00f1o \u00b7 innovaci\u00f3n \u00b7 inspiraci\u00f3n \u00b7 impacto Tu marca puede ser el pr\u00f3ximo negocio imparable Nosotros\u00a0dise\u00f1amos, mantenemos y escalamos tu sitio. Vos solo te ocup\u00e1s [&hellip;]","og_url":"https:\/\/openboxdigital.com\/","og_site_name":"OpenBox Digital","article_modified_time":"2026-07-09T13:02:19+00:00","og_image":[{"url":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"55 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/openboxdigital.com\/","url":"https:\/\/openboxdigital.com\/","name":"Inicio - OpenBox Digital","isPartOf":{"@id":"https:\/\/openboxdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/openboxdigital.com\/#primaryimage"},"image":{"@id":"https:\/\/openboxdigital.com\/#primaryimage"},"thumbnailUrl":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png","datePublished":"2026-07-08T01:07:48+00:00","dateModified":"2026-07-09T13:02:19+00:00","breadcrumb":{"@id":"https:\/\/openboxdigital.com\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/openboxdigital.com\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/openboxdigital.com\/#primaryimage","url":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png","contentUrl":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/07\/1.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/openboxdigital.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/openboxdigital.com\/"},{"@type":"ListItem","position":2,"name":"Inicio"}]},{"@type":"WebSite","@id":"https:\/\/openboxdigital.com\/#website","url":"https:\/\/openboxdigital.com\/","name":"OpenBox Digital","description":"Tu empresa online","publisher":{"@id":"https:\/\/openboxdigital.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/openboxdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/openboxdigital.com\/#organization","name":"OpenBox Digital","url":"https:\/\/openboxdigital.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/openboxdigital.com\/#\/schema\/logo\/image\/","url":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/02\/Pack-9-scaled.png","contentUrl":"https:\/\/openboxdigital.com\/wp-content\/uploads\/2026\/02\/Pack-9-scaled.png","width":2560,"height":1024,"caption":"OpenBox Digital"},"image":{"@id":"https:\/\/openboxdigital.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/5044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/comments?post=5044"}],"version-history":[{"count":197,"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/5044\/revisions"}],"predecessor-version":[{"id":5251,"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/5044\/revisions\/5251"}],"wp:attachment":[{"href":"https:\/\/openboxdigital.com\/index.php\/wp-json\/wp\/v2\/media?parent=5044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}