https://www.computekni.com/feeds/pages/default/5685870394618846440?alt=json-in-script&callback=metaset

1// API callback
2metaset({"version":"1.0","encoding":"UTF-8","entry":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3751862081881982870.page-5685870394618846440"},"published":{"$t":"2026-07-10T12:17:48.997-06:00"},"updated":{"$t":"2026-07-18T17:57:56.360-06:00"},"title":{"type":"text","$t":"Contact"},"content":{"type":"html","$t":"\u003C!-- INICIO FORMULARIO DE CONTACTO COMPUTEKNI --\u003E\n\u003Cstyle\u003E\n  \/* === VARIABLES LOCALES PARA COMPATIBILIDAD TOTAL DE TEMAS === *\/\n  .ctk-contact-wrapper {\n    \/* Modo Claro (Por defecto) *\/\n    --contact-bg: #ffffff;\n    --contact-bg-alt: #f7f8f8;\n    --contact-text: #383838;\n    --contact-text-muted: #6b7280;\n    --contact-border: #e5e7eb;\n    --contact-title: #04204f;\n\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 auto;\n    padding: 40px;\n    font-family: 'Lato', sans-serif;\n    box-sizing: border-box;\n  }\n\n  \/* Asegurar que todos los elementos internos respeten el box-sizing *\/\n  .ctk-contact-wrapper *, .ctk-contact-wrapper *::before, .ctk-contact-wrapper *::after {\n    box-sizing: border-box;\n  }\n\n  \/* === MODO OSCURO GLOBAL === *\/\n  html.ctk-dark .ctk-contact-wrapper {\n    --contact-bg: #132343;\n    --contact-bg-alt: #0f1e3d;\n    --contact-text: #e8edf5;\n    --contact-text-muted: #8a96ab;\n    --contact-border: #1e3254;\n    --contact-title: #ffffff;\n  }\n\n  \/* === MODO EREADER SEPIA === *\/\n  .theme-sepia .ctk-contact-wrapper {\n    --contact-bg: #f4ecd8;\n    --contact-bg-alt: #e8dfc8;\n    --contact-text: #5b4636;\n    --contact-text-muted: #7a6352;\n    --contact-border: #d3c7ae;\n    --contact-title: #433422;\n  }\n\n  \/* === MODO EREADER NEGRO === *\/\n  .theme-black .ctk-contact-wrapper {\n    --contact-bg: #2a2a2a;\n    --contact-bg-alt: #1f1f1f;\n    --contact-text: #d8d8d8;\n    --contact-text-muted: #a0a0a0;\n    --contact-border: #333333;\n    --contact-title: #ffffff;\n  }\n\n  \/* === TARJETA PRINCIPAL === *\/\n  .ctk-contact-card {\n    background: var(--contact-bg);\n    border: 1px solid var(--contact-border);\n    border-radius: var(--ctk-radius-lg, 16px);\n    box-shadow: var(--ctk-shadow-lg, 0 10px 30px rgba(0,0,0,.10));\n    padding: 35px 30px;\n    position: relative;\n    overflow: hidden;\n    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  \/* Línea decorativa superior con gradiente CompuTekni *\/\n  .ctk-contact-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 5px;\n    background: linear-gradient(90deg, var(--ctk-primary, #e15d5d), var(--ctk-accent, #fe5e06));\n  }\n\n  \/* Header del formulario *\/\n  .ctk-contact-header {\n    text-align: center;\n    margin-bottom: 30px;\n  }\n\n  .ctk-contact-icon {\n    width: 60px;\n    height: 60px;\n    margin: 0 auto 18px;\n    background: linear-gradient(135deg, rgba(225, 93, 93, 0.1), rgba(254, 94, 6, 0.1));\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: ctkContactPulse 2.5s infinite ease-in-out;\n  }\n\n  .ctk-contact-icon svg {\n    width: 28px;\n    height: 28px;\n    stroke: var(--ctk-primary, #e15d5d);\n    stroke-width: 2;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  @keyframes ctkContactPulse {\n    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 93, 93, 0.3); }\n    50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(225, 93, 93, 0); }\n  }\n\n  .ctk-contact-title {\n    font-family: 'Montserrat', sans-serif;\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--contact-title);\n    margin: 0 0 8px 0;\n    letter-spacing: -0.3px;\n    transition: color 0.3s ease;\n  }\n\n  .ctk-contact-subtitle {\n    font-size: 14px;\n    color: var(--contact-text-muted);\n    margin: 0;\n    line-height: 1.5;\n    transition: color 0.3s ease;\n  }\n\n  \/* Grupos de formulario *\/\n  .ctk-form-group {\n    margin-bottom: 20px;\n  }\n\n  .ctk-form-label {\n    display: block;\n    font-family: 'Montserrat', sans-serif;\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--contact-title);\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    margin-bottom: 8px;\n    transition: color 0.3s ease;\n  }\n\n  .ctk-form-input,\n  .ctk-form-textarea {\n    width: 100%;\n    padding: 13px 16px;\n    border: 2px solid var(--contact-border);\n    border-radius: 10px;\n    font-family: 'Lato', sans-serif;\n    font-size: 14px;\n    color: var(--contact-text);\n    background: var(--contact-bg-alt);\n    transition: all 0.25s ease;\n  }\n\n  .ctk-form-textarea {\n    min-height: 120px;\n    resize: vertical;\n    line-height: 1.6;\n  }\n\n  \/* Placeholders adaptables al modo oscuro\/sepia *\/\n  .ctk-form-input::placeholder,\n  .ctk-form-textarea::placeholder {\n    color: var(--contact-text-muted);\n    opacity: 0.8;\n  }\n\n  .ctk-form-input:focus,\n  .ctk-form-textarea:focus {\n    outline: none;\n    border-color: var(--ctk-primary, #e15d5d);\n    background: var(--contact-bg);\n    box-shadow: 0 0 0 4px rgba(225, 93, 93, 0.1);\n  }\n\n  \/* === SLIDER DESLIZABLE (SWIPE TO SUBMIT) === *\/\n  .ctk-slide-wrapper {\n    max-width: 420px;\n    margin: 10px auto 0;\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .ctk-slide-track {\n    position: relative;\n    width: 100%;\n    height: 58px;\n    background: linear-gradient(135deg, var(--ctk-primary, #e15d5d), var(--ctk-primary-dark, #c94444));\n    border-radius: 50px;\n    box-shadow: 0 4px 15px rgba(225, 93, 93, 0.3);\n    overflow: hidden;\n    transition: background 0.4s ease, box-shadow 0.4s ease;\n  }\n\n  .ctk-slide-track.is-loading {\n    background: linear-gradient(135deg, var(--ctk-primary, #e15d5d), var(--ctk-primary-dark, #c94444));\n    pointer-events: none;\n  }\n\n  .ctk-slide-track.is-success {\n    background: linear-gradient(135deg, #10b981, #059669) !important;\n    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;\n    pointer-events: none;\n  }\n\n  .ctk-slide-track.is-error {\n    background: linear-gradient(135deg, #ef4444, #dc2626) !important;\n    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;\n    pointer-events: none;\n  }\n\n  .ctk-slide-fill {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 0;\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35));\n    border-radius: 50px 0 0 50px;\n    pointer-events: none;\n    transition: width 0.1s ease-out;\n    z-index: 1;\n  }\n\n  .ctk-slide-fill::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 40px;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));\n    filter: blur(4px);\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  .ctk-slide-fill.is-near-end::after {\n    opacity: 1;\n  }\n\n  .ctk-slide-text {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;

2\n    align-items: center;\n    justify-content: center;\n    font-family: 'Montserrat', sans-serif;\n    font-size: 13px;\n    font-weight: 700;\n    color: #ffffff;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    pointer-events: none;\n    transition: opacity 0.2s ease, transform 0.2s ease;\n    z-index: 2;\n  }\n\n  .ctk-slide-text .desktop-text { display: inline; }\n  .ctk-slide-text .mobile-text { display: none; }\n\n  .ctk-slide-text .ctk-arrow {\n    display: inline-block;\n    margin-left: 8px;\n    animation: ctkArrowMove 1.5s ease-in-out infinite;\n  }\n\n  @keyframes ctkArrowMove {\n    0%, 100% { transform: translateX(0); opacity: 1; }\n    50% { transform: translateX(6px); opacity: 0.6; }\n  }\n\n  .ctk-slide-track.is-loading .ctk-slide-text,\n  .ctk-slide-track.is-success .ctk-slide-text,\n  .ctk-slide-track.is-error .ctk-slide-text {\n    opacity: 0 !important;\n  }\n\n  .ctk-slide-status {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    font-family: 'Montserrat', sans-serif;\n    font-size: 13px;\n    font-weight: 700;\n    color: #ffffff;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease;\n    z-index: 3;\n  }\n\n  .ctk-slide-status.is-visible { opacity: 1; }\n\n  .ctk-slide-status svg {\n    width: 18px;\n    height: 18px;\n    stroke: currentColor;\n    stroke-width: 2.5;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .ctk-slide-status .ctk-check-anim {\n    animation: ctkCheckmark 0.5s ease;\n  }\n\n  @keyframes ctkCheckmark {\n    0% { transform: scale(0); }\n    50% { transform: scale(1.2); }\n    100% { transform: scale(1); }\n  }\n\n  .ctk-slide-thumb {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    width: 48px;\n    height: 48px;\n    background: #ffffff;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n    cursor: grab;\n    z-index: 4;\n    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;\n    touch-action: none;\n  }\n\n  .ctk-slide-thumb:active { cursor: grabbing; }\n\n  .ctk-slide-thumb svg {\n    width: 20px;\n    height: 20px;\n    stroke: var(--ctk-primary, #e15d5d);\n    stroke-width: 2.5;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform 0.3s ease, stroke 0.3s ease;\n  }\n\n  .ctk-slide-thumb:not(.is-dragging):not(.is-locked) svg {\n    animation: ctkThumbPulse 2s ease-in-out infinite;\n  }\n\n  @keyframes ctkThumbPulse {\n    0%, 100% { transform: translateX(0); }\n    50% { transform: translateX(4px); }\n  }\n\n  .ctk-slide-thumb.is-dragging {\n    transition: none;\n    cursor: grabbing;\n    transform: scale(1.05);\n  }\n\n  .ctk-slide-thumb.is-locked {\n    cursor: default;\n    background: rgba(255, 255, 255, 0.95);\n    transform: scale(1);\n  }\n\n  .ctk-slide-track.is-success .ctk-slide-thumb svg { stroke: #059669; }\n  .ctk-slide-track.is-error .ctk-slide-thumb svg { stroke: #dc2626; }\n\n  .ctk-slide-thumb.is-dragging {\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0);\n  }\n\n  .ctk-slide-thumb.glow-low {\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 10px 2px rgba(255, 255, 255, 0.3);\n  }\n\n  .ctk-slide-thumb.glow-mid {\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 15px 4px rgba(255, 255, 255, 0.5);\n  }\n\n  .ctk-slide-thumb.glow-high {\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px 6px rgba(255, 255, 255, 0.7);\n    transform: scale(1.08);\n  }\n\n  .ctk-thumb-spinner {\n    width: 22px;\n    height: 22px;\n    display: none;\n  }\n\n  .ctk-slide-thumb.is-loading .ctk-thumb-spinner { display: block; }\n  .ctk-slide-thumb.is-loading svg.ctk-thumb-icon { display: none; }\n\n  \/* Nota de privacidad *\/\n  .ctk-privacy-note {\n    text-align: center;\n    font-size: 11px;\n    color: var(--contact-text-muted);\n    margin-top: 18px;\n    line-height: 1.5;\n    transition: color 0.3s ease;\n  }\n\n  .ctk-privacy-note svg {\n    width: 12px;\n    height: 12px;\n    vertical-align: -2px;\n    margin-right: 4px;\n    stroke: currentColor;\n    stroke-width: 2;\n    fill: none;\n  }\n\n  .ctk-privacy-note a {\n    color: var(--ctk-primary, #e15d5d) !important;\n    font-weight: 600;\n    text-decoration: none;\n    transition: opacity 0.2s ease;\n  }\n  \n  .ctk-privacy-note a:hover {\n    opacity: 0.8;\n    text-decoration: underline;\n  }\n\n  \/* === RESPONSIVE === *\/\n  @media (max-width: 768px) {\n    .ctk-contact-wrapper {\n      padding: 30px 20px;\n    }\n    .ctk-contact-card {\n      padding: 25px 20px;\n    }\n    .ctk-contact-title {\n      font-size: 19px;\n    }\n    .ctk-form-input, .ctk-form-textarea {\n      font-size: 15px; \/* Evita zoom automático en iOS *\/\n    }\n    .ctk-slide-wrapper {\n      max-width: 100%;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .ctk-slide-track { height: 54px; }\n    .ctk-slide-thumb { width: 44px; height: 44px; top: 5px; }\n    .ctk-slide-text { font-size: 11px; letter-spacing: 0.5px; }\n    .ctk-slide-text .desktop-text { display: none; }\n    .ctk-slide-text .mobile-text { display: inline; }\n  }\n\n  @media (max-width: 400px) {\n    .ctk-slide-text { font-size: 10px; letter-spacing: 0.3px; }\n    .ctk-slide-track { height: 50px; }\n    .ctk-slide-thumb { width: 40px; height: 40px; }\n  }\n\u003C\/style\u003E\n\n\u003Cdiv class=\"ctk-contact-wrapper\"\u003E\n  \u003Cdiv class=\"ctk-contact-card\"\u003E\n    \n    \u003C!-- Header --\u003E\n    \u003Cdiv class=\"ctk-contact-header\"\u003E\n      \u003Cdiv class=\"ctk-contact-icon\"\u003E\n        \u003Csvg viewBox=\"0 0 24 24\"\u003E\n          \u003Cpath d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/\u003E\n          \u003Cpolyline points=\"22,6 12,13 2,6\"\/\u003E\n        \u003C\/svg\u003E\n      \u003C\/div\u003E\n      \u003Ch3 class=\"ctk-contact-title\"\u003EEnvíanos un mensaje\u003C\/h3\u003E\n      \u003Cp class=\"ctk-contact-subtitle\"\u003E¿Tienes alguna duda o propuesta? Escríbenos directamente.\u003C\/p\u003E\n    \u003C\/div\u003E\n\n    \u003C!-- Formulario --\u003E\n    \u003Cform id=\"customContactForm\" action=\"https:\/\/formsubmit.co\/ajax\/30126ac4be38d10026abd2b1212556ea\" method=\"POST\"\u003E\n      \n      \u003C!-- Nombre --\u003E\n      \u003Cdiv class=\"ctk-form-group\"\u003E\n        \u003Clabel class=\"ctk-form-label\" for=\"name\"\u003ENombre\u003C\/label\u003E\n        \u003Cinput class=\"ctk-form-input\" type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Tu nombre\"\/\u003E\n      \u003C\/div\u003E\n\n      \u003C!-- Email --\u003E\n      \u003Cdiv class=\"ctk-form-group\"\u003E\n        \u003Clabel class=\"ctk-form-label\" for=\"email\"\u003ECorreo Electrónico\u003C\/label\u003E\n        \u003Cinput class=\"ctk-form-input\" type=\"email\" id=\"email\" name=\"email\" required placeholder=\"[email protected]\"\/\u003E\n      \u003C\/div\u003E\n\n      \u003C!-- Mensaje --\u003E\n      \u003Cdiv class=\"ctk-form-group\"\u003E\n        \u003Clabel class=\"ctk-form-label\" for=\"message\"\u003EMensaje\u003C\/label\u003E\n        \u003Ctextarea class=\"ctk-form-textarea\" id=\"message\" name=\"message\" rows=\"5\" required placeholder=\"¿En qué podemos ayudarte?\"\u003E\u003C\/textarea\u003E\n      \u003C\/div\u003E\n\n      \u003C!-- Campos ocultos de FormSubmit --\u003E\n      \u003Cinput type=\"hidden\" name=\"_subject\" value=\"¡Nuevo mensaje desde CompuTekni!\"\/\u003E\n      \u003Cinput type=\"hidden\" name=\"_captcha\" value=\"false\"\/\u003E\n      \u003Cinput type=\"hidden\" name=\"_template\" value=\"table\"\/\u003E\n      \u003Cinput type=\"hidden\" name=\"_next\" value=\"https:\/\/www.computekni.com\/p\/gracias-por-tu-apoyo.html\"\/\u003E\n\n      \u003C!-- SLIDER DESLIZABLE --\u003E\n      \u003Cdiv class=\"ctk-slide-wrapper\" id=\"btnSubmit\"\u003E\n        \u003Cdiv class=\"ctk-slide-track\" id=\"slideTrack\"\u003E\n          \n          \u003C!-- Barra de progreso visual --\u003E\n          \u003Cdiv class=\"ctk-slide-fill\" id=\"slideFill\"\u003E\u003C\/div\u003E\n\n          \u003C!-- Texto indicativo --\u003E\n          \u003Cdiv class=\"ctk-slide-text\" id=\"slideText\"\u003E\n            \u003Cspan class=\"desktop-text\"\u003EDesliza para enviar\u003C\/span\u003E\n            \u003Cspan class=\"mobile-text\"\u003EDesliza\u003C\/span\u003E\n            \u003Cspan class=\"ctk-arrow\"\u003E→\u003C\/span\u003E\n          \u003C\/div\u003E\n\n          \u003C!-- Estados de carga \/ éxito \/ error --\u003E\n          \u003Cdiv class=\"ctk-slide-status\" id=\"slideStatusLoading\"\u003E\n            \u003Csvg class=\"ctk-spinner\" viewBox=\"0 0 24 24\"\u003E\n              \u003Ccircle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\" stroke-dasharray=\"31.4 31.4\" stroke-linecap=\"round\"\u003E\n                \u003CanimateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\"\/\u003E\n              \u003C\/circle\u003E\n            \u003C\/svg\u003E\n            \u003Cspan\u003EEnviando...\u003C\/span\u003E\n          \u003C\/div\u003E\n\n          \u003Cdiv class=\"ctk-slide-status\" id=\"slideStatusSuccess\"\u003E\n            \u003Csvg class=\"ctk-check-anim\" viewBox=\"0 0 24 24\"\u003E\u003Cpolyline points=\"20 6 9 17 4 12\"\/\u003E\u003C\/svg\u003E\n            \u003Cspan\u003EMensaje Enviado\u003C\/span\u003E\n          \u003C\/div\u003E\n\n          \u003Cdiv class=\"ctk-slide-status\" id=\"slideStatusError\"\u003E\n            \u003Csvg viewBox=\"0 0 24 24\"\u003E\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\/\u003E\u003Cline x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/\u003E\u003Cline x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/\u003E\u003C\/svg\u003E\n            \u003Cspan\u003EError al Enviar\u003C\/span\u003E\n          \u003C\/div\u003E\n\n          \u003C!-- Thumb (perilla) --\u003E\n          \u003Cdiv class=\"ctk-slide-thumb\" id=\"slideThumb\"\u003E\n            \u003Csvg class=\"ctk-thumb-icon\" viewBox=\"0 0 24 24\"\u003E\n              \u003Cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/\u003E\n              \u003Cpolyline points=\"12 5 19 12 12 19\"\/\u003E\n            \u003C\/svg\u003E\n            \u003Csvg class=\"ctk-thumb-spinner\" viewBox=\"0 0 24 24\"\u003E\n              \u003Ccircle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#e15d5d\" stroke-width=\"3\" fill=\"none\" stroke-dasharray=\"28 28\" stroke-linecap=\"round\"\u003E\n                \u003CanimateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"0.9s\" repeatCount=\"indefinite\"\/\u003E\n              \u003C\/circle\u003E\n            \u003C\/svg\u003E\n          \u003C\/div\u003E\n\n        \u003C\/div\u003E\n      \u003C\/div\u003E\n    \u003C\/form\u003E\n\n    \u003C!-- Nota de privacidad --\u003E\n    \u003Cp class=\"ctk-privacy-note\"\u003E\n      \u003Csvg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003E\n        \u003Crect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/\u003E\n        \u003Cpath d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/\u003E\n      \u003C\/svg\u003E\n      Tu información está segura. Consulta nuestro \u003Ca href=\"\/p\/aviso-de-privacidad_0789676904.html\"\u003EAviso de Privacidad\u003C\/a\u003E.\n    \u003C\/p\u003E\n\n  \u003C\/div\u003E\n\u003C\/div\u003E\n\n\u003Cscript\u003E\n(function() {\

2n  var form = document.getElementById('customContactForm');\n  if (!form) return;\n\n  \/\/ Elementos del slider\n  var track      = document.getElementById('slideTrack');\n  var thumb      = document.getElementById('slideThumb');\n  var fill       = document.getElementById('slideFill');\n  var slideText  = document.getElementById('slideText');\n  var statusLoad = document.getElementById('slideStatusLoading');\n  var statusOk   = document.getElementById('slideStatusSuccess');\n  var statusErr  = document.getElementById('slideStatusError');\n\n  var isDragging = false;\n  var isLocked   = false;\n  var startX     = 0;\n  var currentX   = 0;\n\n  \/\/ Calcula el desplazamiento máximo posible del thumb\n  function getMaxX() {\n    return track.clientWidth - thumb.clientWidth - 10;\n  }\n\n  \/\/ Calcula el progreso (0 a 1)\n  function getProgress() {\n    var maxX = getMaxX();\n    return maxX \u003E 0 ? currentX \/ maxX : 0;\n  }\n\n  \/\/ Actualiza los efectos visuales según el progreso\n  function updateProgressEffects() {\n    var progress = getProgress();\n    var percent = Math.min(progress * 100, 100);\n\n    \/\/ 1. Barra de progreso se llena\n    fill.style.width = percent + '%';\n\n    \/\/ 2. El texto se desvanece conforme avanza\n    slideText.style.opacity = Math.max(1 - progress * 1.5, 0);\n    slideText.style.transform = 'translateX(' + (progress * 20) + 'px)';\n\n    \/\/ 3. Glow en el thumb según el progreso\n    thumb.classList.remove('glow-low', 'glow-mid', 'glow-high');\n    if (isDragging) {\n      if (progress \u003E 0.75) {\n        thumb.classList.add('glow-high');\n      } else if (progress \u003E 0.4) {\n        thumb.classList.add('glow-mid');\n      } else if (progress \u003E 0.15) {\n        thumb.classList.add('glow-low');\n      }\n    }\n\n    \/\/ 4. Efecto de brillo al final del fill\n    if (progress \u003E 0.7) {\n      fill.classList.add('is-near-end');\n    } else {\n      fill.classList.remove('is-near-end');\n    }\n  }\n\n  \/\/ Mueve el thumb a una posición X (en píxeles)\n  function moveThumb(x) {\n    var maxX = getMaxX();\n    if (x \u003C 0) x = 0;\n    if (x \u003E maxX) x = maxX;\n    currentX = x;\n    thumb.style.left = (5 + x) + 'px';\n    updateProgressEffects();\n  }\n\n  \/\/ Resetea el slider al estado inicial\n  function resetSlider() {\n    isLocked = false;\n    track.classList.remove('is-loading', 'is-success', 'is-error');\n    thumb.classList.remove('is-dragging', 'is-locked', 'is-loading', 'glow-low', 'glow-mid', 'glow-high');\n    statusLoad.classList.remove('is-visible');\n    statusOk.classList.remove('is-visible');\n    statusErr.classList.remove('is-visible');\n    fill.style.width = '0';\n    fill.classList.remove('is-near-end');\n    slideText.style.opacity = '1';\n    slideText.style.transform = 'translateX(0)';\n    moveThumb(0);\n  }\n\n  \/\/ Bloquea el slider en la posición final y lanza el envío\n  function lockAndSubmit() {\n    isLocked = true;\n    thumb.classList.add('is-locked', 'is-loading');\n    track.classList.add('is-loading');\n    statusLoad.classList.add('is-visible');\n\n    \/\/ Vibración sutil si el dispositivo lo soporta\n    if (navigator.vibrate) {\n      navigator.vibrate(50);\n    }\n\n    var formData = new FormData(form);\n\n    fetch(form.action, {\n      method: 'POST',\n      body: formData,\n      headers: { 'Accept': 'application\/json' }\n    })\n    .then(function(response) {\n      if (response.ok) {\n        \/\/ Éxito\n        track.classList.remove('is-loading');\n        track.classList.add('is-success');\n        statusLoad.classList.remove('is-visible');\n        statusOk.classList.add('is-visible');\n        thumb.classList.remove('is-loading');\n        form.reset();\n\n        \/\/ Vibración de confirmación\n        if (navigator.vibrate) {\n          navigator.vibrate([50, 100, 50]);\n        }\n\n        setTimeout(function() {\n          resetSlider();\n        }, 5000);\n      } else {\n        throw new Error('Error en el servidor');\n      }\n    })\n    .catch(function() {\n      \/\/ Error\n      track.classList.remove('is-loading');\n      track.classList.add('is-error');\n      statusLoad.classList.remove('is-visible');\n      statusErr.classList.add('is-visible');\n      thumb.classList.remove('is-loading');\n\n      \/\/ Vibración de error\n      if (navigator.vibrate) {\n        navigator.vibrate([100, 50, 100]);\n      }

2\n\n      setTimeout(function() {\n        resetSlider();\n      }, 3000);\n    });\n  }\n\n  \/\/ === EVENTOS DE ARRASTRE (Mouse) ===\n  thumb.addEventListener('mousedown', function(e) {\n    if (isLocked) return;\n    isDragging = true;\n    startX = e.clientX - currentX;\n    thumb.classList.add('is-dragging');\n    e.preventDefault();\n  });\n\n  document.addEventListener('mousemove', function(e) {\n    if (!isDragging) return;\n    moveThumb(e.clientX - startX);\n  });\n\n  document.addEventListener('mouseup', function() {\n    if (!isDragging) return;\n    isDragging = false;\n    thumb.classList.remove('is-dragging', 'glow-low', 'glow-mid', 'glow-high');\n    var maxX = getMaxX();\n    if (currentX \u003E= maxX * 0.9) {\n      moveThumb(maxX);\n      lockAndSubmit();\n    } else {\n      moveThumb(0);\n    }\n  });\n\n  \/\/ === EVENTOS DE ARRASTRE (Touch) ===\n  thumb.addEventListener('touchstart', function(e) {\n    if (isLocked) return;\n    isDragging = true;\n    startX = e.touches[0].clientX - currentX;\n    thumb.classList.add('is-dragging');\n  }, { passive: true });\n\n  document.addEventListener('touchmove', function(e) {\n    if (!isDragging) return;\n    moveThumb(e.touches[0].clientX - startX);\n  }, { passive: true });\n\n  document.addEventListener('touchend', function() {\n    if (!isDragging) return;\n    isDragging = false;\n    thumb.classList.remove('is-dragging', 'glow-low', 'glow-mid', 'glow-high');\n    var maxX = getMaxX();\n    if (currentX \u003E= maxX * 0.9) {\n      moveThumb(maxX);\n      lockAndSubmit();\n    } else {\n      moveThumb(0);\n    }\n  });\n\n  \/\/ Recalcular posición si cambia el tamaño de la ventana\n  window.addEventListener('resize', function() {\n    if (!isLocked \u0026\u0026 !isDragging) {\n      moveThumb(0);\n    }\n  });\n})();\n\u003C\/script\u003E\n\u003C!-- FIN FORMULARIO DE CONTACTO COMPUTEKNI --\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3751862081881982870\/pages\/default\/5685870394618846440"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3751862081881982870\/pages\/default\/5685870394618846440"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.computekni.com\/p\/contact.html","title":"Contact"}],"author":[{"name":{"$t":"CompuTekni"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/09586433760228474989"},"email":{"$t":"[email protected]"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjlrGPLdYhjdYXBhIr6EFmBkKnfbLjem1L7_fOGeP0MI_hE2UYd0pSi6eeSzfMuDEGeqClJ5MJJuzFc19bgicxXDq-hpVD6sqOGjVK_YpmCKh0jE0lhI9sfvIieRChkpF7gebj7KAiUC_zZkBdrfFEZYKAhS3HXSWOnhtjMBFMali3kIjQ\/s1600\/Blogger%20500x500%20png.png"}}]}});