{"id":6031,"date":"2025-07-22T03:16:48","date_gmt":"2025-07-22T03:16:48","guid":{"rendered":"https:\/\/floka.casethemes.net\/?page_id=6031"},"modified":"2026-10-26T15:29:42","modified_gmt":"2026-10-26T15:29:42","slug":"contacto","status":"publish","type":"page","link":"https:\/\/datdesignlab.com\/es\/contact\/","title":{"rendered":"Contacto | Dat Design Lab, servicios de dise\u00f1o UX y web"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6031\" class=\"elementor elementor-6031\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3cc6990 e-flex e-con-boxed e-con e-parent\" data-id=\"3cc6990\" 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-350e2ce elementor-widget elementor-widget-html\" data-id=\"350e2ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* ---- shared lock (also controls your separate Elementor form container) ---- *\/\r\n  .ddl-locked{filter:blur(9px);opacity:.45;pointer-events:none;user-select:none;transition:filter .6s ease,opacity .6s ease}\r\n  body.ddl-unlocked .ddl-locked{filter:none;opacity:1;pointer-events:auto}\r\n \r\n  \/* ---- gate section ---- *\/\r\n  .ctg{position:relative;overflow:hidden;color:#fff;border-radius:var(--radius-lg);margin:12px var(--panel-inset) 0;\r\n    padding:clamp(64px,9vw,110px) var(--pad) clamp(56px,8vw,90px);text-align:center}\r\n  .ctg::before{content:\"\";position:absolute;inset:0;z-index:0;background:\r\n    linear-gradient(180deg,rgba(8,9,10,.62),rgba(8,9,10,.5) 45%,rgba(8,9,10,.86)),\r\n    url('\/wp-content\/uploads\/2025\/11\/contact-us-image.webp') center\/cover}\r\n  .ctg__in{position:relative;z-index:1;max-width:640px;margin:0 auto}\r\n  .ctg .ddl-eyebrow{color:var(--accent);display:inline-flex}\r\n  .ctg h1{color:#fff;font-size:clamp(40px,7.5vw,80px);font-weight:600;letter-spacing:-.02em;line-height:1;margin:14px 0 0}\r\n  .ctg h1 span{color:var(--accent)}\r\n  .ctg__lead{color:rgba(255,255,255,.82);font-size:clamp(15px,1.7vw,18px);max-width:46ch;margin:16px auto 0}\r\n \r\n  \/* ---- lock card ---- *\/\r\n  .ctg__card{width:min(440px,100%);margin:34px auto 0;background:rgba(255,255,255,.96);border-radius:20px;padding:24px 22px;\r\n    box-shadow:0 30px 60px -26px rgba(0,0,0,.55),0 0 0 1px rgba(185,178,122,.4)}\r\n  .ctg__hint{font-family:var(--font-head);font-size:16px;color:var(--ink);margin:0 0 3px}\r\n  .ctg__sub{font-size:13px;color:var(--muted-2);margin:0 0 18px}\r\n  .ct-track{position:relative;height:66px;border-radius:999px;background:#f0efe8;border:1px solid var(--line);overflow:hidden;touch-action:none}\r\n  .ct-track__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(185,178,122,.35),rgba(185,178,122,.65));border-radius:999px}\r\n  .ct-lockicon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;z-index:2}\r\n  .ct-lockicon svg{width:28px;height:28px;stroke:var(--muted-2);fill:none;stroke-width:1.8;transition:stroke .2s}\r\n  .ct-key{position:absolute;left:6px;top:6px;width:54px;height:54px;border-radius:50%;background:var(--ink);border:0;cursor:grab;\r\n    display:grid;place-items:center;z-index:3;touch-action:none;-webkit-tap-highlight-color:transparent;\r\n    box-shadow:0 6px 16px -4px rgba(0,0,0,.4);transition:background .2s}\r\n  .ct-key:active{cursor:grabbing}\r\n  .ct-key:focus-visible{outline:3px solid var(--accent);outline-offset:3px}\r\n  .ct-key svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7}\r\n  .ct-track.is-unlocked{background:rgba(185,178,122,.22);border-color:var(--accent)}\r\n  .ct-track.is-unlocked .ct-key{background:var(--accent);cursor:default}\r\n  .ct-track.is-unlocked .ct-key svg{stroke:#111}\r\n  .ct-track.is-unlocked .ct-lockicon svg{stroke:var(--accent-ink)}\r\n  .ctg__foot{margin-top:13px;font-size:12px;color:var(--muted-2)}\r\n  .ctg__status{margin:30px auto 0;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:12px}\r\n  .ctg__status--locked{color:rgba(255,255,255,.62)}\r\n  .ctg__status--open{color:var(--accent);display:none}\r\n  body.ddl-unlocked .ctg__status--locked{display:none}\r\n  body.ddl-unlocked .ctg__status--open{display:block;animation:ddl-fade .5s ease}\r\n  body.ddl-unlocked .ctg__card{display:none}\r\n  @keyframes ddl-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\r\n \r\n  \/* ---- revealed contact details (blurred until unlock) ---- *\/\r\n  .ctg__cards{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:14px;max-width:700px;margin:26px auto 0}\r\n  .ctg__c{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 14px;text-align:center}\r\n  .ctg__c .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}\r\n  .ctg__c .v{font-family:var(--font-head);font-size:15px;color:#fff;margin-top:6px;word-break:normal;white-space:nowrap}\r\n  @media(max-width:640px){.ctg__c .v{white-space:normal}}\r\n  .ctg__c .v a{color:#fff}.ctg__c .v a:hover{color:var(--accent)}\r\n  @media(max-width:640px){.ctg__cards{grid-template-columns:1fr}}\r\n  @media(prefers-reduced-motion:reduce){.ct-track__fill,.ddl-locked{transition:none}}\r\n<\/style>\r\n \r\n<section class=\"ctg\"><div class=\"ctg__in\">\r\n  <p class=\"ddl-eyebrow\">Contact<\/p>\r\n  <h1>Get in touch<span>.<\/span><\/h1>\r\n  <p class=\"ctg__lead\">Quick human check to keep spam out. Slide the key into the lock to reveal my details and unlock the form.<\/p><p>I reply to every message within one business day.<\/p>\r\n \r\n  <div class=\"ctg__card\">\r\n    <p class=\"ctg__hint\">Slide to unlock<\/p>\r\n    <p class=\"ctg__sub\">Drag the key to the lock &middot; or focus it and press Enter<\/p>\r\n    <div class=\"ct-track\" id=\"ctTrack\">\r\n      <span class=\"ct-track__fill\" id=\"ctFill\"><\/span>\r\n      <span class=\"ct-lockicon\" id=\"ctLock\"><svg viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\"\/><path d=\"M8 11V8a4 4 0 0 1 8 0v3\"\/><\/svg><\/span>\r\n      <button class=\"ct-key\" id=\"ctKey\" type=\"button\" aria-label=\"Slide the key to the lock, or press Enter, to unlock the form\">\r\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"8\" cy=\"8\" r=\"4\"\/><path d=\"m11 11 8 8m-3-3 2-2m-4 0 2-2\"\/><\/svg>\r\n      <\/button>\r\n    <\/div>\r\n    <p class=\"ctg__foot\">Takes a second. Keeps the bots out.<\/p>\r\n  <\/div>\r\n \r\n  <p class=\"ctg__status ctg__status--locked\">&#128274; Locked &mdash; slide the key to unlock<\/p>\r\n  <p class=\"ctg__status ctg__status--open\">&#10003; Unlocked &mdash; scroll down to send your message<\/p>\r\n \r\n  <!-- contact details: masked until unlocked -->\r\n  <div class=\"ctg__cards ddl-locked\" aria-hidden=\"false\">\r\n    <div class=\"ctg__c\"><div class=\"k\">Email<\/div><div class=\"v\"><a href=\"mailto:contact@datdesignlab.com\">contact@datdesignlab.com<\/a><\/div><\/div>\r\n    <div class=\"ctg__c\"><div class=\"k\">US<\/div><div class=\"v\"><a href=\"tel:+14695679076\">+1 (469) 567-9076<\/a><\/div><\/div>\r\n    <div class=\"ctg__c\"><div class=\"k\">EU<\/div><div class=\"v\"><a href=\"tel:+48666743881\">+48 666-743-881<\/a><\/div><\/div>\r\n  <\/div>\r\n<\/div><\/section>\r\n \r\n<script>\r\n(function(){\r\n  if(window.__ddlLockInit)return; window.__ddlLockInit=1;\r\n  var track=document.getElementById('ctTrack'),\r\n      key=document.getElementById('ctKey'),\r\n      fill=document.getElementById('ctFill');\r\n  if(!track||!key)return;\r\n  var unlocked=false,dragging=false,startX=0,keyX=0,max=0;\r\n \r\n  function measure(){ max=track.clientWidth-key.offsetWidth-12; }\r\n  measure(); window.addEventListener('resize',measure);\r\n \r\n  function setX(x){\r\n    x=Math.max(0,Math.min(max,x));\r\n    keyX=x; key.style.left=(6+x)+'px'; fill.style.width=(x+key.offsetWidth)+'px';\r\n    if(x>=max-4&&!unlocked) unlock();\r\n  }\r\n  function unlock(){\r\n    unlocked=true;dragging=false;\r\n    track.classList.add('is-unlocked');\r\n    document.getElementById('ctLock').innerHTML='<svg viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\"\/><path d=\"M8 11V7a4 4 0 0 1 7.5-1.5\"\/><\/svg>';\r\n    setX(max);\r\n    setTimeout(function(){ document.body.classList.add('ddl-unlocked'); },300);\r\n  }\r\n  key.addEventListener('pointerdown',function(e){ if(unlocked)return; dragging=true; startX=e.clientX-keyX; key.setPointerCapture(e.pointerId); });\r\n  key.addEventListener('pointermove',function(e){ if(!dragging||unlocked)return; setX(e.clientX-startX); });\r\n  function end(){ if(unlocked||!dragging)return; dragging=false; if(keyX<max-4){ var v=keyX,a=setInterval(function(){ v-=Math.max(2,v*0.2); if(v<=0){v=0;clearInterval(a);} setX(v); },16);} }\r\n  key.addEventListener('pointerup',end); key.addEventListener('pointercancel',end);\r\n  key.addEventListener('keydown',function(e){\r\n    if(unlocked)return;\r\n    if(e.key==='Enter'||e.key===' '){ e.preventDefault(); var v=0,a=setInterval(function(){ v+=Math.max(4,(max-v)*0.25); if(v>=max){v=max;clearInterval(a);} setX(v); },16); }\r\n    else if(e.key==='ArrowRight'){ e.preventDefault(); setX(keyX+18); }\r\n    else if(e.key==='ArrowLeft'){ e.preventDefault(); setX(keyX-18); }\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<div class=\"elementor-element elementor-element-8336f3e e-flex e-con-boxed e-con e-parent\" data-id=\"8336f3e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-462e0e0 e-con-full ddl-locked e-flex e-con e-child\" data-id=\"462e0e0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2c71ade e-con-full e-flex e-con e-child\" data-id=\"2c71ade\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e04685 elementor-widget elementor-widget-html\" data-id=\"5e04685\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .ddl-ftitle{max-width:640px;margin:0 auto;text-align:center;opacity:0;transform:translateY(8px);\r\n    transition:opacity .5s ease,transform .5s ease}\r\n  body.ddl-unlocked .ddl-ftitle{opacity:1;transform:none}\r\n  .ddl-ftitle .eb{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.24em;\r\n    font-size:12px;color:var(--accent-ink);margin:0}\r\n  .ddl-ftitle h2{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;line-height:1.05;\r\n    font-size:clamp(30px,5vw,54px);color:var(--ink);margin:12px 0 16px}\r\n  .ddl-ftitle h2 span{color:var(--accent)}\r\n  .ddl-ftitle p.copy{font-size:16px;line-height:1.6;color:var(--muted);max-width:52ch;margin:0 auto 26px}\r\n<\/style>\r\n<div class=\"ddl-ftitle\">\r\n  <p class=\"eb\">&#127881; You unlocked the form<\/p>\r\n  <h2>Now let&rsquo;s talk<span>.<\/span><\/h2>\r\n  <p class=\"copy\">Fill out the form below for a free consultation. Tell me a bit about your project, your goals, rough timeline, and budget, and I&rsquo;ll get back to you within a day. No obligation and no pressure, just a real conversation about how I can help.<\/p>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4de8082 e-con-full e-flex e-con e-child\" data-id=\"4de8082\" 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-2f29fac elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"2f29fac\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"6031\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"2f29fac\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"\" \/>\n\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Your Name\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Email\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_cb4eae9 elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_cb4eae9\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tBudget\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field elementor-select-wrapper remove-before \">\n\t\t\t<div class=\"select-caret-down-wrapper\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-caret-down\"><\/i>\t\t\t<\/div>\n\t\t\t<select name=\"form_fields[field_cb4eae9]\" id=\"form-field-field_cb4eae9\" class=\"elementor-field-textual elementor-size-sm\">\n\t\t\t\t\t\t\t\t\t<option value=\"$500-$1000\">$500-$1000<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"$1000-$2000\">$1000-$2000<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"$2000-$3000\">$2000-$3000<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"$3000-$4000\">$3000-$4000<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"$4000-$5000\">$4000-$5000<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_7966517 elementor-col-50 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_7966517\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tService\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field elementor-select-wrapper remove-before \">\n\t\t\t<div class=\"select-caret-down-wrapper\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-caret-down\"><\/i>\t\t\t<\/div>\n\t\t\t<select name=\"form_fields[field_7966517]\" id=\"form-field-field_7966517\" class=\"elementor-field-textual elementor-size-sm\" required=\"required\">\n\t\t\t\t\t\t\t\t\t<option value=\"UX\/UI Design\">UX\/UI Design<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Website Development\">Website Development<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"SEO\">SEO<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Mobile App Design\">Mobile App Design<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-field_0b7eecc elementor-col-100\">\n\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-sm\" name=\"form_fields[field_0b7eecc]\" id=\"form-field-field_0b7eecc\" rows=\"4\" placeholder=\"Message\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Let's Talk<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Contact Get in touch. Quick human check to keep spam out. Slide the key into the lock to reveal my details and unlock the form. Slide to unlock Drag the key to the lock &middot; or focus it and press Enter Takes a second. Keeps the bots out. &#128274; Locked &mdash; slide the key to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10175,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6031","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/6031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/comments?post=6031"}],"version-history":[{"count":36,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/6031\/revisions"}],"predecessor-version":[{"id":10421,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/6031\/revisions\/10421"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/media\/10175"}],"wp:attachment":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/media?parent=6031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}