{"id":841,"date":"2026-05-22T16:25:27","date_gmt":"2026-05-22T22:25:27","guid":{"rendered":"https:\/\/studiovainilla.com\/?page_id=841"},"modified":"2026-10-03T10:32:09","modified_gmt":"2026-10-03T16:32:09","slug":"acortador-de-enlaces","status":"publish","type":"page","link":"https:\/\/studiovainilla.com\/en\/productividad\/acortador-de-enlaces\/","title":{"rendered":"URL Shortener"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"841\" class=\"elementor elementor-841\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0537c0c e-con-full e-flex e-con e-parent\" data-id=\"0537c0c\" 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-c023023 elementor-widget elementor-widget-html\" data-id=\"c023023\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"sv26-shortener\" id=\"sv26-shortener\">\n  <style>\n    \/* =========================================================\n       STUDIOVAINILLA TOOLS \u2014 ACORTADOR DE ENLACES\n       NUEVA IDENTIDAD 2026\n       Elementor HTML Widget Ready\n    ========================================================= *\/\n\n    #sv26-shortener{\n      --ink:#17141f;\n      --ink-2:#24202d;\n      --muted:#716a7a;\n      --muted-2:#98909f;\n      --white:#ffffff;\n      --paper:#fbfbfd;\n      --paper-2:#f5f3fb;\n\n      --purple:#7046ff;\n      --purple-2:#9d69ff;\n      --blue:#5578ff;\n      --cyan:#43d4d0;\n      --pink:#ef83cf;\n\n      --deep:#21193f;\n      --deep-2:#31265c;\n      --deep-3:#47377b;\n\n      --line:rgba(95,76,145,.12);\n      --line-strong:rgba(112,70,255,.18);\n\n      --shadow-sm:0 14px 34px rgba(43,31,77,.06);\n      --shadow-md:0 24px 70px rgba(43,31,77,.10);\n      --shadow-lg:0 42px 110px rgba(43,31,77,.16);\n\n      --max:1320px;\n\n      position:relative;\n      isolation:isolate;\n      overflow:hidden;\n\n      padding:108px 0 118px;\n\n      color:var(--ink);\n\n      background:\n        radial-gradient(circle at 8% 10%,rgba(112,70,255,.14),transparent 24%),\n        radial-gradient(circle at 91% 12%,rgba(67,212,208,.13),transparent 22%),\n        radial-gradient(circle at 82% 92%,rgba(239,131,207,.09),transparent 28%),\n        linear-gradient(180deg,#fff 0%,#fbfaff 48%,#f4f1fb 100%);\n\n      font-family:\n        Inter,\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Helvetica Neue\",\n        Arial,\n        sans-serif;\n\n      -webkit-font-smoothing:antialiased;\n    }\n\n    #sv26-shortener,\n    #sv26-shortener *{\n      box-sizing:border-box;\n    }\n\n    #sv26-shortener a{\n      color:inherit;\n      text-decoration:none;\n    }\n\n    #sv26-shortener button,\n    #sv26-shortener input{\n      font:inherit;\n    }\n\n    \/* =========================================================\n       BACKGROUND SYSTEM\n    ========================================================= *\/\n\n    #sv26-shortener::before{\n      content:\"\";\n      position:absolute;\n      inset:0;\n      z-index:-4;\n      pointer-events:none;\n\n      opacity:.30;\n\n      background-image:\n        linear-gradient(rgba(112,70,255,.065) 1px,transparent 1px),\n        linear-gradient(90deg,rgba(112,70,255,.065) 1px,transparent 1px);\n\n      background-size:42px 42px;\n\n      -webkit-mask-image:\n        linear-gradient(to bottom,transparent 0%,#000 12%,#000 86%,transparent 100%);\n\n      mask-image:\n        linear-gradient(to bottom,transparent 0%,#000 12%,#000 86%,transparent 100%);\n\n      animation:sv26GridMove 30s linear infinite;\n    }\n\n    #sv26-shortener::after{\n      content:\"\";\n      position:absolute;\n      z-index:-3;\n\n      width:760px;\n      height:760px;\n\n      right:-410px;\n      top:160px;\n\n      border-radius:50%;\n\n      border:1px solid rgba(112,70,255,.08);\n\n      box-shadow:\n        0 0 0 85px rgba(112,70,255,.015),\n        0 0 0 170px rgba(67,212,208,.012),\n        0 0 130px rgba(112,70,255,.06);\n\n      pointer-events:none;\n\n      animation:sv26OrbitDrift 18s ease-in-out infinite alternate;\n    }\n\n    @keyframes sv26GridMove{\n      to{\n        background-position:42px 42px,42px 42px;\n      }\n    }\n\n    @keyframes sv26OrbitDrift{\n      to{\n        transform:translate(-38px,32px) scale(1.06);\n      }\n    }\n\n    .sv26-short-wrap{\n      position:relative;\n      z-index:4;\n\n      width:min(calc(100% - 64px),var(--max));\n      margin:auto;\n    }\n\n    .sv26-orbit{\n      position:absolute;\n      z-index:-1;\n\n      width:660px;\n      height:660px;\n\n      left:-470px;\n      top:330px;\n\n      border-radius:50%;\n\n      border:1px solid rgba(112,70,255,.08);\n\n      box-shadow:\n        0 0 0 70px rgba(112,70,255,.015),\n        0 0 0 140px rgba(239,131,207,.01);\n\n      pointer-events:none;\n\n      animation:sv26OrbitSpin 34s linear infinite;\n    }\n\n    .sv26-orbit::after{\n      content:\"\";\n\n      position:absolute;\n\n      width:10px;\n      height:10px;\n\n      left:17%;\n      top:7%;\n\n      border-radius:50%;\n\n      background:\n        linear-gradient(135deg,var(--purple),var(--blue),var(--cyan));\n\n      box-shadow:\n        0 0 18px rgba(112,70,255,.42);\n    }\n\n    @keyframes sv26OrbitSpin{\n      to{transform:rotate(360deg)}\n    }\n\n    \/* =========================================================\n       PAGE HEADER \/ HERO\n    ========================================================= *\/\n\n    .sv26-short-hero{\n      display:grid;\n      grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);\n      gap:clamp(50px,6vw,88px);\n      align-items:center;\n    }\n\n    .sv26-short-copy{\n      position:relative;\n      z-index:3;\n    }\n\n    .sv26-short-eyebrow{\n      display:inline-flex;\n      align-items:center;\n      gap:10px;\n\n      width:max-content;\n\n      margin-bottom:22px;\n\n      padding:9px 13px;\n\n      border:1px solid rgba(112,70,255,.13);\n      border-radius:999px;\n\n      background:rgba(255,255,255,.76);\n\n      box-shadow:\n        0 10px 30px rgba(62,44,108,.05);\n\n      backdrop-filter:blur(16px);\n      -webkit-backdrop-filter:blur(16px);\n\n      color:#645d6d;\n\n      font-size:9px;\n      font-weight:850;\n      letter-spacing:.14em;\n      text-transform:uppercase;\n    }\n\n    .sv26-short-eyebrow i{\n      width:8px;\n      height:8px;\n\n      border-radius:50%;\n\n      background:\n        linear-gradient(135deg,var(--purple),var(--blue),var(--cyan));\n\n      box-shadow:\n        0 0 0 5px rgba(112,70,255,.07),\n        0 0 18px rgba(112,70,255,.30);\n\n      animation:sv26Pulse 2.5s ease-in-out infinite;\n    }\n\n    @keyframes sv26Pulse{\n      50%{\n        transform:scale(.72);\n        opacity:.65;\n      }\n    }\n\n    .sv26-short-title{\n      margin:0;\n\n      max-width:760px;\n\n      font-size:clamp(54px,6.5vw,94px);\n      line-height:.90;\n\n      letter-spacing:-.07em;\n      font-weight:620;\n    }\n\n    .sv26-short-title span{\n      display:block;\n      color:#a29ca9;\n    }\n\n    .sv26-short-title strong{\n      color:transparent;\n      font-weight:620;\n\n      background:\n        linear-gradient(\n          100deg,\n          var(--purple) 0%,\n          var(--blue) 50%,\n          var(--cyan) 83%,\n          var(--pink) 100%\n        );\n\n      -webkit-background-clip:text;\n      background-clip:text;\n    }\n\n    .sv26-short-copy > p{\n      max-width:610px;\n\n      margin:27px 0 0;\n\n      color:var(--muted);\n\n      font-size:16px;\n      line-height:1.72;\n    }\n\n    \/* =========================================================\n       STEPS\n    ========================================================= *\/\n\n    .sv26-short-steps{\n      display:grid;\n      grid-template-columns:repeat(3,minmax(0,1fr));\n      gap:8px;\n\n      max-width:590px;\n\n      margin-top:30px;\n    }\n\n    .sv26-short-step{\n      position:relative;\n\n      min-height:92px;\n\n      padding:14px;\n\n      overflow:hidden;\n\n      border:1px solid var(--line);\n      border-radius:15px;\n\n      background:rgba(255,255,255,.72);\n\n      box-shadow:\n        0 12px 30px rgba(53,39,92,.045);\n\n      backdrop-filter:blur(14px);\n\n      transition:\n        transform .25s ease,\n        border-color .25s ease,\n        box-shadow .25s ease;\n    }\n\n    .sv26-short-step:hover{\n      transform:translateY(-3px);\n\n      border-color:rgba(112,70,255,.17);\n\n      box-shadow:\n        0 17px 38px rgba(53,39,92,.07);\n    }\n\n    .sv26-short-step small{\n      display:block;\n\n      color:#a099a8;\n\n      font-size:7px;\n      font-weight:850;\n      letter-spacing:.12em;\n      text-transform:uppercase;\n    }\n\n    .sv26-short-step strong{\n      display:block;\n\n      margin-top:15px;\n\n      color:#514a58;\n\n      font-size:11px;\n      line-height:1.3;\n    }\n\n    .sv26-short-step::after{\n      content:\"\";\n\n      position:absolute;\n\n      left:0;\n      right:0;\n      bottom:0;\n\n      height:2px;\n\n      background:\n        linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));\n\n      transform:scaleX(0);\n      transform-origin:left;\n\n      transition:transform .28s ease;\n    }\n\n    .sv26-short-step:hover::after{\n      transform:scaleX(1);\n    }\n\n    \/* =========================================================\n       MINI VALUE PANEL\n    ========================================================= *\/\n\n    .sv26-short-value{\n      display:flex;\n      align-items:center;\n      gap:13px;\n\n      max-width:590px;\n\n      margin-top:14px;\n\n      padding:14px 15px;\n\n      border:1px solid var(--line);\n      border-radius:16px;\n\n      background:\n        linear-gradient(\n          135deg,\n          rgba(112,70,255,.055),\n          rgba(67,212,208,.045)\n        );\n    }\n\n    .sv26-short-value-icon{\n      width:38px;\n      height:38px;\n\n      flex:none;\n\n      display:grid;\n      place-items:center;\n\n      border-radius:11px;\n\n      color:var(--purple);\n\n      background:#fff;\n\n      border:1px solid rgba(112,70,255,.10);\n\n      box-shadow:\n        0 10px 22px rgba(60,45,102,.06);\n    }\n\n    .sv26-short-value-icon svg{\n      width:18px;\n      height:18px;\n\n      fill:none;\n      stroke:currentColor;\n\n      stroke-width:1.8;\n      stroke-linecap:round;\n      stroke-linejoin:round;\n    }\n\n    .sv26-short-value-copy small{\n      display:block;\n\n      color:#9a93a2;\n\n      font-size:7px;\n      font-weight:850;\n      letter-spacing:.12em;\n      text-transform:uppercase;\n    }\n\n    .sv26-short-value-copy strong{\n      display:block;\n\n      margin-top:4px;\n\n      color:#5d5665;\n\n      font-size:10px;\n      line-height:1.4;\n      font-weight:720;\n    }\n\n    \/* =========================================================\n       APPLICATION STAGE\n    ========================================================= *\/\n\n    .sv26-short-stage{\n      position:relative;\n\n      min-height:710px;\n\n      perspective:1400px;\n    }\n\n    .sv26-stage-glow{\n      position:absolute;\n      z-index:0;\n\n      width:610px;\n      height:610px;\n\n      left:50%;\n      top:50%;\n\n      transform:\n        translate(-50%,-50%);\n\n      border-radius:50%;\n\n      background:\n        radial-gradient(\n          circle,\n          rgba(112,70,255,.18),\n          rgba(85,120,255,.08) 38%,\n          rgba(67,212,208,.04) 58%,\n          transparent 72%\n        );\n\n      filter:blur(12px);\n\n      animation:\n        sv26StageGlow 7.5s ease-in-out infinite alternate;\n    }\n\n    @keyframes sv26StageGlow{\n      to{\n        transform:\n          translate(-47%,-53%)\n          scale(1.08);\n      }\n    }\n\n    \/* floating cards *\/\n    .sv26-float{\n      position:absolute;\n      z-index:6;\n\n      min-width:180px;\n\n      padding:13px 15px;\n\n      border:1px solid rgba(112,70,255,.12);\n      border-radius:16px;\n\n      background:rgba(255,255,255,.84);\n\n      box-shadow:\n        0 20px 55px rgba(49,35,92,.10);\n\n      backdrop-filter:blur(18px);\n      -webkit-backdrop-filter:blur(18px);\n\n      animation:\n        sv26Float 5.8s ease-in-out infinite;\n    }\n\n    .sv26-float small{\n      display:block;\n\n      margin-top:4px;\n\n      max-width:190px;\n\n      overflow:hidden;\n\n      color:#8a8392;\n\n      font-size:8px;\n      line-height:1.3;\n\n      text-overflow:ellipsis;\n      white-space:nowrap;\n    }\n\n    .sv26-float strong{\n      color:#4e4657;\n\n      font-size:9px;\n      font-weight:820;\n    }\n\n    .sv26-float.f1{\n      left:-14px;\n      top:58px;\n\n      transform:rotate(-3deg);\n    }\n\n    .sv26-float.f2{\n      right:-10px;\n      top:150px;\n\n      transform:rotate(3deg);\n\n      animation-delay:.8s;\n    }\n\n    .sv26-float.f3{\n      left:18px;\n      bottom:62px;\n\n      transform:rotate(2deg);\n\n      animation-delay:1.4s;\n    }\n\n    @keyframes sv26Float{\n      0%,100%{translate:0 0}\n      50%{translate:0 -11px}\n    }\n\n    .sv26-float-label{\n      display:flex;\n      align-items:center;\n      gap:7px;\n    }\n\n    .sv26-float-dot{\n      width:6px;\n      height:6px;\n\n      border-radius:50%;\n\n      background:var(--cyan);\n\n      box-shadow:\n        0 0 12px rgba(67,212,208,.58);\n    }\n\n    \/* =========================================================\n       APP WINDOW\n    ========================================================= *\/\n\n    .sv26-app{\n      position:relative;\n      z-index:4;\n\n      max-width:610px;\n\n      margin:70px auto 0;\n\n      overflow:hidden;\n\n      border:1px solid rgba(112,70,255,.13);\n      border-radius:30px;\n\n      background:rgba(255,255,255,.88);\n\n      box-shadow:\n        0 42px 110px rgba(43,31,77,.18),\n        0 0 0 1px rgba(112,70,255,.03);\n\n      backdrop-filter:blur(24px);\n      -webkit-backdrop-filter:blur(24px);\n\n      transform-style:preserve-3d;\n\n      transition:\n        transform .35s cubic-bezier(.2,.8,.2,1),\n        box-shadow .35s ease;\n    }\n\n    .sv26-app::before{\n      content:\"\";\n\n      position:absolute;\n      inset:0;\n      pointer-events:none;\n\n      background:\n        radial-gradient(circle at 92% 8%,rgba(67,212,208,.12),transparent 27%),\n        radial-gradient(circle at 6% 100%,rgba(239,131,207,.09),transparent 30%);\n    }\n\n    .sv26-app-top{\n      position:relative;\n      z-index:2;\n\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n\n      min-height:58px;\n\n      padding:0 18px;\n\n      border-bottom:1px solid rgba(112,70,255,.09);\n\n      background:\n        linear-gradient(\n          180deg,\n          rgba(255,255,255,.96),\n          rgba(248,246,253,.88)\n        );\n    }\n\n    .sv26-app-controls{\n      display:flex;\n      align-items:center;\n      gap:6px;\n    }\n\n    .sv26-app-controls span{\n      width:8px;\n      height:8px;\n\n      border-radius:50%;\n\n      background:#c6c0d0;\n    }\n\n    .sv26-app-brand{\n      display:flex;\n      align-items:center;\n      gap:8px;\n\n      color:#6e6679;\n\n      font-size:8px;\n      font-weight:850;\n      letter-spacing:.10em;\n      text-transform:uppercase;\n    }\n\n    .sv26-app-brand i{\n      width:7px;\n      height:7px;\n\n      border-radius:50%;\n\n      background:\n        linear-gradient(\n          135deg,\n          var(--purple),\n          var(--blue),\n          var(--cyan)\n        );\n\n      box-shadow:\n        0 0 10px rgba(112,70,255,.42);\n    }\n\n    .sv26-app-state{\n      color:#9c95a4;\n\n      font-size:7px;\n      font-weight:800;\n      letter-spacing:.10em;\n      text-transform:uppercase;\n    }\n\n    .sv26-app-body{\n      position:relative;\n      z-index:2;\n\n      padding:30px;\n    }\n\n    .sv26-app-head{\n      display:grid;\n      grid-template-columns:auto 1fr;\n      gap:14px;\n      align-items:center;\n\n      margin-bottom:26px;\n    }\n\n    .sv26-app-icon{\n      width:52px;\n      height:52px;\n\n      display:grid;\n      place-items:center;\n\n      border:1px solid rgba(112,70,255,.10);\n      border-radius:15px;\n\n      color:var(--purple);\n\n      background:\n        linear-gradient(\n          135deg,\n          rgba(112,70,255,.07),\n          rgba(67,212,208,.06)\n        );\n    }\n\n    .sv26-app-icon svg{\n      width:24px;\n      height:24px;\n\n      fill:none;\n      stroke:currentColor;\n\n      stroke-width:1.8;\n      stroke-linecap:round;\n      stroke-linejoin:round;\n    }\n\n    .sv26-app-title h3{\n      margin:0;\n\n      color:var(--ink);\n\n      font-size:29px;\n      line-height:1;\n\n      letter-spacing:-.045em;\n      font-weight:650;\n    }\n\n    .sv26-app-title p{\n      margin:7px 0 0;\n\n      color:var(--muted);\n\n      font-size:12px;\n      line-height:1.5;\n    }\n\n    \/* =========================================================\n       FORM\n    ========================================================= *\/\n\n    .sv26-field{\n      margin-top:15px;\n    }\n\n    .sv26-field label{\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap:10px;\n\n      margin-bottom:8px;\n\n      color:#5a5362;\n\n      font-size:9px;\n      font-weight:820;\n    }\n\n    .sv26-field label small{\n      color:#a49da9;\n\n      font-size:7px;\n      font-weight:730;\n    }\n\n    .sv26-field input{\n      width:100%;\n\n      min-height:54px;\n\n      padding:0 15px;\n\n      outline:none;\n\n      border:1px solid rgba(112,70,255,.12);\n      border-radius:14px;\n\n      color:var(--ink);\n\n      background:#fff;\n\n      box-shadow:\n        0 8px 20px rgba(47,34,84,.025);\n\n      font-size:12px;\n\n      transition:\n        border-color .22s ease,\n        box-shadow .22s ease,\n        transform .22s ease;\n    }\n\n    .sv26-field input::placeholder{\n      color:#afa8b4;\n    }\n\n    .sv26-field input:focus{\n      border-color:rgba(112,70,255,.45);\n\n      box-shadow:\n        0 0 0 4px rgba(112,70,255,.075),\n        0 10px 28px rgba(47,34,84,.045);\n    }\n\n    .sv26-slug{\n      display:grid;\n\n      grid-template-columns:auto 1fr;\n\n      align-items:center;\n\n      overflow:hidden;\n\n      border:1px solid rgba(112,70,255,.12);\n      border-radius:14px;\n\n      background:#fff;\n\n      box-shadow:\n        0 8px 20px rgba(47,34,84,.025);\n\n      transition:\n        border-color .22s ease,\n        box-shadow .22s ease;\n    }\n\n    .sv26-slug:focus-within{\n      border-color:rgba(112,70,255,.45);\n\n      box-shadow:\n        0 0 0 4px rgba(112,70,255,.075),\n        0 10px 28px rgba(47,34,84,.045);\n    }\n\n    .sv26-slug-prefix{\n      padding-left:15px;\n\n      color:var(--purple);\n\n      font-size:10px;\n      font-weight:850;\n\n      white-space:nowrap;\n    }\n\n    .sv26-slug input{\n      border:0!important;\n      box-shadow:none!important;\n      border-radius:0!important;\n    }\n\n    \/* =========================================================\n       BUTTON\n    ========================================================= *\/\n\n    .sv26-create-btn{\n      position:relative;\n\n      width:100%;\n\n      min-height:54px;\n\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      gap:9px;\n\n      margin-top:17px;\n\n      overflow:hidden;\n\n      border:0;\n      border-radius:14px;\n\n      color:#fff;\n\n      background:\n        linear-gradient(\n          105deg,\n          var(--purple) 0%,\n          var(--blue) 55%,\n          var(--cyan) 100%\n        );\n\n      box-shadow:\n        0 16px 34px rgba(80,73,214,.22);\n\n      cursor:pointer;\n\n      font-size:11px;\n      font-weight:850;\n\n      transition:\n        transform .25s ease,\n        box-shadow .25s ease,\n        opacity .25s ease;\n    }\n\n    .sv26-create-btn::before{\n      content:\"\";\n\n      position:absolute;\n      inset:-1px;\n\n      background:\n        linear-gradient(\n          110deg,\n          transparent 28%,\n          rgba(255,255,255,.36) 48%,\n          transparent 68%\n        );\n\n      transform:\n        translateX(-130%);\n\n      transition:\n        transform .8s ease;\n    }\n\n    .sv26-create-btn:hover{\n      transform:translateY(-2px);\n\n      box-shadow:\n        0 20px 40px rgba(80,73,214,.27);\n    }\n\n    .sv26-create-btn:hover::before{\n      transform:translateX(130%);\n    }\n\n    .sv26-create-btn:disabled{\n      opacity:.62;\n      cursor:not-allowed;\n      transform:none;\n    }\n\n    \/* =========================================================\n       RESULT \/ ERROR\n    ========================================================= *\/\n\n    .sv26-result{\n      display:none;\n\n      margin-top:17px;\n\n      padding:16px;\n\n      border:1px solid rgba(255,255,255,.09);\n      border-radius:18px;\n\n      color:#fff;\n\n      background:\n        radial-gradient(circle at 90% 10%,rgba(67,212,208,.15),transparent 25%),\n        linear-gradient(145deg,#211943,#3a2b69 56%,#4c3d7f);\n\n      box-shadow:\n        0 20px 44px rgba(43,31,77,.15);\n    }\n\n    .sv26-result.is-visible{\n      display:block;\n\n      animation:\n        sv26ResultIn .32s cubic-bezier(.2,.8,.2,1);\n    }\n\n    @keyframes sv26ResultIn{\n      from{\n        opacity:0;\n        transform:translateY(8px) scale(.985);\n      }\n      to{\n        opacity:1;\n        transform:none;\n      }\n    }\n\n    .sv26-result strong{\n      display:block;\n\n      margin-bottom:10px;\n\n      font-size:9px;\n      font-weight:820;\n    }\n\n    .sv26-result-row{\n      display:flex;\n      gap:8px;\n    }\n\n    .sv26-result-row input{\n      flex:1;\n      min-width:0;\n\n      min-height:47px;\n\n      border:0;\n      border-radius:11px;\n\n      padding:0 12px;\n\n      color:var(--ink);\n\n      background:#fff;\n\n      font-size:10px;\n    }\n\n    .sv26-copy-btn{\n      min-width:86px;\n\n      border:0;\n      border-radius:11px;\n\n      color:#33295b;\n\n      background:#fff;\n\n      cursor:pointer;\n\n      font-size:9px;\n      font-weight:850;\n\n      transition:\n        transform .22s ease,\n        background .22s ease;\n    }\n\n    .sv26-copy-btn:hover{\n      transform:translateY(-1px);\n      background:#f3efff;\n    }\n\n    .sv26-error{\n      display:none;\n\n      margin-top:14px;\n\n      padding:12px 13px;\n\n      border:1px solid rgba(218,58,58,.15);\n      border-radius:13px;\n\n      color:#8a2a2a;\n\n      background:rgba(218,58,58,.065);\n\n      font-size:9px;\n      font-weight:750;\n      line-height:1.5;\n    }\n\n    .sv26-error.is-visible{\n      display:block;\n    }\n\n    .sv26-legal{\n      margin-top:14px;\n\n      color:#98919e;\n\n      font-size:8px;\n      line-height:1.55;\n    }\n\n    \/* =========================================================\n       FOOTER STRIP\n    ========================================================= *\/\n\n    .sv26-short-foot{\n      display:grid;\n      grid-template-columns:auto 1fr auto;\n      gap:18px;\n      align-items:center;\n\n      margin-top:26px;\n\n      padding:16px 18px;\n\n      border:1px solid var(--line);\n      border-radius:16px;\n\n      background:rgba(255,255,255,.68);\n\n      box-shadow:\n        var(--shadow-sm);\n\n      backdrop-filter:blur(16px);\n    }\n\n    .sv26-short-foot-icon{\n      width:36px;\n      height:36px;\n\n      display:grid;\n      place-items:center;\n\n      border-radius:11px;\n\n      color:var(--purple);\n\n      background:\n        linear-gradient(\n          135deg,\n          rgba(112,70,255,.09),\n          rgba(67,212,208,.08)\n        );\n    }\n\n    .sv26-short-foot-icon svg{\n      width:18px;\n      height:18px;\n\n      fill:none;\n      stroke:currentColor;\n\n      stroke-width:1.8;\n      stroke-linecap:round;\n      stroke-linejoin:round;\n    }\n\n    .sv26-short-foot-copy small{\n      display:block;\n\n      color:#9a93a2;\n\n      font-size:7px;\n      font-weight:850;\n      letter-spacing:.12em;\n      text-transform:uppercase;\n    }\n\n    .sv26-short-foot-copy strong{\n      display:block;\n\n      margin-top:4px;\n\n      color:#5c5563;\n\n      font-size:10px;\n      line-height:1.4;\n      font-weight:720;\n    }\n\n    .sv26-short-foot-state{\n      display:flex;\n      align-items:center;\n      gap:7px;\n\n      color:#756e7d;\n\n      font-size:8px;\n      font-weight:800;\n      white-space:nowrap;\n    }\n\n    .sv26-short-foot-state i{\n      width:7px;\n      height:7px;\n\n      border-radius:50%;\n\n      background:var(--cyan);\n\n      box-shadow:\n        0 0 0 5px rgba(67,212,208,.08),\n        0 0 14px rgba(67,212,208,.48);\n    }\n\n    \/* =========================================================\n       RESPONSIVE\n    ========================================================= *\/\n\n    @media(max-width:1080px){\n      .sv26-short-hero{\n        grid-template-columns:1fr;\n        gap:42px;\n      }\n\n      .sv26-short-stage{\n        min-height:auto;\n      }\n\n      .sv26-app{\n        margin:0 auto;\n      }\n\n      .sv26-float{\n        display:none;\n      }\n    }\n\n    @media(max-width:720px){\n      #sv26-shortener{\n        padding:82px 0 90px;\n      }\n\n      .sv26-short-wrap{\n        width:calc(100% - 24px);\n      }\n\n      .sv26-short-title{\n        font-size:49px;\n      }\n\n      .sv26-short-steps{\n        grid-template-columns:1fr;\n      }\n\n      .sv26-short-step{\n        min-height:auto;\n      }\n\n      .sv26-app{\n        border-radius:24px;\n      }\n\n      .sv26-short-foot{\n        grid-template-columns:auto 1fr;\n      }\n\n      .sv26-short-foot-state{\n        grid-column:1\/-1;\n        padding-left:54px;\n      }\n    }\n\n    @media(max-width:480px){\n      #sv26-shortener{\n        padding:68px 0 76px;\n      }\n\n      .sv26-short-title{\n        font-size:42px;\n      }\n\n      .sv26-short-copy > p{\n        font-size:14px;\n      }\n\n      .sv26-app-body{\n        padding:22px;\n      }\n\n      .sv26-app-head{\n        grid-template-columns:1fr;\n      }\n\n      .sv26-app-icon{\n        width:48px;\n        height:48px;\n      }\n\n      .sv26-result-row{\n        flex-direction:column;\n      }\n\n      .sv26-copy-btn{\n        min-height:45px;\n      }\n\n      .sv26-slug{\n        grid-template-columns:1fr;\n      }\n\n      .sv26-slug-prefix{\n        padding:12px 14px 0;\n      }\n    }\n\n    @media(prefers-reduced-motion:reduce){\n      #sv26-shortener *,\n      #sv26-shortener *::before,\n      #sv26-shortener *::after{\n        animation:none!important;\n        transition:none!important;\n      }\n    }\n  <\/style>\n\n  <div class=\"sv26-short-wrap\">\n\n    <span class=\"sv26-orbit\" aria-hidden=\"true\"><\/span>\n\n    <div class=\"sv26-short-hero\">\n\n      <!-- COPY -->\n      <div class=\"sv26-short-copy\">\n\n        <div class=\"sv26-short-eyebrow\">\n          <i aria-hidden=\"true\"><\/i>\n          StudioVainilla Tools \u00b7 herramienta gratuita\n        <\/div>\n\n        <h1 class=\"sv26-short-title\">\n          Make your links\n          <span><strong>easier<\/strong> to share.<\/span>\n        <\/h1>\n\n        <p>\n          Pega un enlace largo, ponle un nombre corto y \u00fasalo en campa\u00f1as,\n          WhatsApp, redes, QR o presentaciones sin mandar URLs eternas.\n        <\/p>\n\n        <div class=\"sv26-short-steps\">\n\n          <div class=\"sv26-short-step\">\n            <small>Paso 01<\/small>\n            <strong>Pega tu URL<\/strong>\n          <\/div>\n\n          <div class=\"sv26-short-step\">\n            <small>Paso 02<\/small>\n            <strong>N\u00f3mbrala<\/strong>\n          <\/div>\n\n          <div class=\"sv26-short-step\">\n            <small>Paso 03<\/small>\n            <strong>Comp\u00e1rtela<\/strong>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"sv26-short-value\">\n\n          <div class=\"sv26-short-value-icon\" aria-hidden=\"true\">\n            <svg viewbox=\"0 0 24 24\">\n              <path d=\"M5 12h14\"><\/path>\n              <path d=\"m14 7 5 5-5 5\"><\/path>\n            <\/svg>\n          <\/div>\n\n          <div class=\"sv26-short-value-copy\">\n            <small>Resultado<\/small>\n            <strong>Un enlace limpio con dominio vlla.mx, listo para compartir.<\/strong>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- APP -->\n      <div class=\"sv26-short-stage\">\n\n        <div class=\"sv26-stage-glow\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"sv26-float f1\" aria-hidden=\"true\">\n          <div class=\"sv26-float-label\">\n            <span class=\"sv26-float-dot\"><\/span>\n            <strong>Link largo<\/strong>\n          <\/div>\n          <small>...utm_campaign=may_2026_promotion<\/small>\n        <\/div>\n\n        <div class=\"sv26-float f2\" aria-hidden=\"true\">\n          <div class=\"sv26-float-label\">\n            <span class=\"sv26-float-dot\"><\/span>\n            <strong>Link corto<\/strong>\n          <\/div>\n          <small>vlla.mx\/s\/agenda<\/small>\n        <\/div>\n\n        <div class=\"sv26-float f3\" aria-hidden=\"true\">\n          <div class=\"sv26-float-label\">\n            <span class=\"sv26-float-dot\"><\/span>\n            <strong>Ideal for QR<\/strong>\n          <\/div>\n          <small>Less text, cleaner<\/small>\n        <\/div>\n\n\n        <div class=\"sv26-app\" id=\"sv26-short-app\">\n\n          <div class=\"sv26-app-top\">\n\n            <div class=\"sv26-app-controls\" aria-hidden=\"true\">\n              <span><\/span>\n              <span><\/span>\n              <span><\/span>\n            <\/div>\n\n            <div class=\"sv26-app-brand\">\n              <i aria-hidden=\"true\"><\/i>\n              Vanilla Shortlinks\n            <\/div>\n\n            <div class=\"sv26-app-state\">\n              online\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"sv26-app-body\">\n\n            <div class=\"sv26-app-head\">\n\n              <div class=\"sv26-app-icon\" aria-hidden=\"true\">\n                <svg viewbox=\"0 0 24 24\">\n                  <path d=\"M10.5 13.5 13.5 10.5\"><\/path>\n                  <path d=\"M8.1 15.9 6.2 17.8a3.7 3.7 0 0 1-5.2-5.2l3.1-3.1a3.7 3.7 0 0 1 5.2 0\"><\/path>\n                  <path d=\"m15.9 8.1 1.9-1.9a3.7 3.7 0 1 1 5.2 5.2l-3.1 3.1a3.7 3.7 0 0 1-5.2 0\"><\/path>\n                <\/svg>\n              <\/div>\n\n              <div class=\"sv26-app-title\">\n                <h3>Create short link<\/h3>\n                <p>Convert a long URL into a clean link with the domain vlla.mx.<\/p>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"sv26-field\">\n\n              <label for=\"sv-url\">\n                Long URL\n                <small>obligatoria<\/small>\n              <\/label>\n\n              <input\n                type=\"url\"\n                id=\"sv-url\"\n                placeholder=\"https:\/\/tusitio.com\/campana-con-parametros\"\n              >\n\n            <\/div>\n\n\n            <div class=\"sv26-field\">\n\n              <label for=\"sv-slug\">\n                Nombre corto\n                <small>opcional<\/small>\n              <\/label>\n\n              <div class=\"sv26-slug\">\n\n                <span class=\"sv26-slug-prefix\">\n                  vlla.mx\/s\/\n                <\/span>\n\n                <input\n                  type=\"text\"\n                  id=\"sv-slug\"\n                  placeholder=\"mi-link\"\n                >\n\n              <\/div>\n\n            <\/div>\n\n\n            <button\n              class=\"sv26-create-btn\"\n              id=\"sv-create-btn\"\n              type=\"button\"\n            >\n              Shorten link\n              <span aria-hidden=\"true\">\u2197<\/span>\n            <\/button>\n\n\n            <div\n              class=\"sv26-result\"\n              id=\"sv-result\"\n            >\n\n              <strong>\n                Done. Your short link is:\n              <\/strong>\n\n              <div class=\"sv26-result-row\">\n\n                <input\n                  type=\"text\"\n                  id=\"sv-short-url\"\n                  readonly\n>\n\n                <button\n                  class=\"sv26-copy-btn\"\n                  id=\"sv-copy-btn\"\n                  type=\"button\"\n                >\n                  Copy\n                <\/button>\n\n              <\/div>\n\n            <\/div>\n\n\n            <div\n              class=\"sv26-error\"\n              id=\"sv-error\"\n            ><\/div>\n\n\n            <div class=\"sv26-legal\">\n              Use this tool for legitimate purposes. We may block malicious, fraudulent, or deceptive links.\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"sv26-short-foot\">\n\n      <div class=\"sv26-short-foot-icon\" aria-hidden=\"true\">\n        <svg viewbox=\"0 0 24 24\">\n          <path d=\"M4 12h5\"><\/path>\n          <path d=\"M15 12h5\"><\/path>\n          <path d=\"M12 4v5\"><\/path>\n          <path d=\"M12 15v5\"><\/path>\n          <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n        <\/svg>\n      <\/div>\n\n      <div class=\"sv26-short-foot-copy\">\n        <small>StudioVainilla Digital Utility Layer<\/small>\n        <strong>Una herramienta simple para hacer m\u00e1s limpio el punto de contacto entre tu negocio y tus clientes.<\/strong>\n      <\/div>\n\n      <div class=\"sv26-short-foot-state\">\n        <i aria-hidden=\"true\"><\/i>\n        Servicio disponible\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <script>\n    (function(){\n\n      const btn = document.getElementById('sv-create-btn');\n      const result = document.getElementById('sv-result');\n      const error = document.getElementById('sv-error');\n      const shortInput = document.getElementById('sv-short-url');\n      const copyBtn = document.getElementById('sv-copy-btn');\n      const app = document.getElementById('sv26-short-app');\n\n      if(!btn || !result || !error || !shortInput || !copyBtn){\n        return;\n      }\n\n\n      \/* =======================================================\n         ORIGINAL SHORTLINK FUNCTIONALITY\n      ======================================================= *\/\n\n      btn.addEventListener('click', async function(){\n\n        const url = document.getElementById('sv-url').value.trim();\n        const slug = document.getElementById('sv-slug').value.trim();\n\n        result.classList.remove('is-visible');\n        error.classList.remove('is-visible');\n        error.textContent = '';\n\n        if(!url){\n\n          error.textContent =\n            'Pega primero una URL para acortarla.';\n\n          error.classList.add('is-visible');\n\n          return;\n\n        }\n\n        btn.disabled = true;\n        btn.textContent = 'Acortando...';\n\n        try{\n\n          const response = await fetch(\n            '\/wp-json\/sv-tools\/v1\/create-shortlink',\n            {\n              method:'POST',\n              headers:{\n                'Content-Type':'application\/json'\n              },\n              body:JSON.stringify({\n                url,\n                slug\n              })\n            }\n          );\n\n          const data = await response.json();\n\n          if(data.success){\n\n            shortInput.value = data.short_url;\n\n            result.classList.add('is-visible');\n\n          }else{\n\n            error.textContent =\n              data.message ||\n              'No se pudo crear el enlace.';\n\n            error.classList.add('is-visible');\n\n          }\n\n        }catch(e){\n\n          error.textContent =\n            'Ocurri\u00f3 un error inesperado. Intenta de nuevo.';\n\n          error.classList.add('is-visible');\n\n        }\n\n        btn.disabled = false;\n        btn.innerHTML =\n          'Acortar enlace <span aria-hidden=\"true\">\u2197<\/span>';\n\n      });\n\n\n      copyBtn.addEventListener('click', async function(){\n\n        try{\n\n          await navigator.clipboard.writeText(\n            shortInput.value\n          );\n\n          copyBtn.textContent =\n            'Copiado';\n\n          setTimeout(\n            () => copyBtn.textContent = 'Copiar',\n            1500\n          );\n\n        }catch(e){\n\n          shortInput.select();\n\n          document.execCommand('copy');\n\n          copyBtn.textContent =\n            'Copiado';\n\n          setTimeout(\n            () => copyBtn.textContent = 'Copiar',\n            1500\n          );\n\n        }\n\n      });\n\n\n      \/* =======================================================\n         PREMIUM MICRO-INTERACTION\n      ======================================================= *\/\n\n      const reduced =\n        window.matchMedia &&\n        window.matchMedia(\n          '(prefers-reduced-motion: reduce)'\n        ).matches;\n\n      const finePointer =\n        window.matchMedia &&\n        window.matchMedia(\n          '(pointer:fine)'\n        ).matches;\n\n      if(\n        app &&\n        !reduced &&\n        finePointer\n      ){\n\n        app.addEventListener(\n          'mousemove',\n          function(e){\n\n            const r =\n              app.getBoundingClientRect();\n\n            const x =\n              (e.clientX - r.left) \/\n              r.width - .5;\n\n            const y =\n              (e.clientY - r.top) \/\n              r.height - .5;\n\n            const rx =\n              (-y * 2.2).toFixed(2);\n\n            const ry =\n              (x * 2.8).toFixed(2);\n\n            app.style.transform =\n              'perspective(1400px) rotateX(' +\n              rx +\n              'deg) rotateY(' +\n              ry +\n              'deg) translateY(-2px)';\n\n          }\n        );\n\n        app.addEventListener(\n          'mouseleave',\n          function(){\n\n            app.style.transform = '';\n\n          }\n        );\n\n      }\n\n    })();\n  <\/script>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>StudioVainilla Tools \u00b7 herramienta gratuita Haz tus links m\u00e1s f\u00e1ciles de compartir. Pega un enlace largo, ponle un nombre corto y \u00fasalo en campa\u00f1as, WhatsApp, redes, QR o presentaciones sin mandar URLs eternas. Paso 01 Pega tu URL Paso 02 N\u00f3mbrala Paso 03 Comp\u00e1rtela Resultado Un enlace limpio con dominio vlla.mx, listo para compartir. Link [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":828,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-841","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/pages\/841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/comments?post=841"}],"version-history":[{"count":7,"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/pages\/841\/revisions"}],"predecessor-version":[{"id":1327,"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/pages\/841\/revisions\/1327"}],"up":[{"embeddable":true,"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/pages\/828"}],"wp:attachment":[{"href":"https:\/\/studiovainilla.com\/en\/wp-json\/wp\/v2\/media?parent=841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}