Auditor\u00eda Web Gratuita | Krelo Studio<\/title>\n\n <style>\n *{box-sizing:border-box;margin:0;padding:0}\n :root{\n --bg:#ECE5DB;\n --bg2:#E5DDD1;\n --card:#F6F0E8;\n --text:#1A0804;\n --muted:#6B4A42;\n --accent:#C72A08;\n --border:rgba(199,42,8,.18);\n --font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Inter,sans-serif;\n }\n\n html{scroll-behavior:smooth}\n body{\n background:var(--bg);\n color:var(--text);\n font-family:var(--font);\n line-height:1.5;\n overflow-x:hidden;\n }\n\n a{text-decoration:none;color:inherit}\n button,input{font:inherit}\n\n .nav{\n position:fixed;\n top:0;\n left:0;\n right:0;\n z-index:50;\n height:72px;\n padding:0 6vw;\n display:flex;\n align-items:center;\n justify-content:space-between;\n background:rgba(236,229,219,.9);\n backdrop-filter:blur(22px);\n border-bottom:1px solid var(--border);\n }\n\n .logo img{\n height:40px;\n width:auto;\n display:block;\n }\n\n .nav-cta{\n background:var(--accent);\n color:var(--bg);\n padding:10px 18px;\n border-radius:999px;\n font-size:14px;\n font-weight:800;\n }\n\n .hero{\n min-height:100dvh;\n padding:92px 6vw 28px;\n display:grid;\n grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);\n gap:36px;\n align-items:center;\n position:relative;\n overflow:hidden;\n }\n\n .hero::before{\n content:\"\";\n position:absolute;\n width:560px;\n height:560px;\n border-radius:50%;\n background:radial-gradient(circle,rgba(199,42,8,.2),transparent 65%);\n top:4%;\n right:4%;\n pointer-events:none;\n }\n\n .hero-copy,.form-card{position:relative;z-index:1}\n\n .tag{\n color:var(--accent);\n font-size:12px;\n letter-spacing:3px;\n text-transform:uppercase;\n font-weight:800;\n margin-bottom:18px;\n }\n\n h1{\n font-size:clamp(38px,5.8vw,74px);\n line-height:.98;\n letter-spacing:-2.6px;\n margin-bottom:20px;\n }\n\n h1 span{color:var(--accent)}\n\n .lead{\n max-width:580px;\n color:var(--muted);\n font-size:clamp(16px,1.55vw,19px);\n line-height:1.55;\n margin-bottom:22px;\n }\n\n .proof{\n display:grid;\n gap:8px;\n max-width:540px;\n }\n\n .proof div{\n padding:12px 15px;\n border:1px solid var(--border);\n background:rgba(255,255,255,.22);\n border-radius:14px;\n color:var(--muted);\n font-size:14px;\n }\n\n .proof strong{color:var(--text)}\n\n .form-card{\n background:var(--card);\n border:1px solid var(--border);\n border-radius:24px;\n padding:24px;\n box-shadow:0 24px 70px rgba(26,8,4,.12);\n overflow:visible;\n }\n\n .form-head{margin-bottom:18px}\n\n .form-head h2{\n font-size:26px;\n line-height:1.05;\n letter-spacing:-.8px;\n margin-bottom:7px;\n }\n\n .form-head p{\n color:var(--muted);\n font-size:14px;\n }\n\n .progress{\n height:6px;\n background:rgba(199,42,8,.12);\n border-radius:999px;\n overflow:hidden;\n margin-bottom:18px;\n }\n\n .bar{\n height:100%;\n width:20%;\n background:var(--accent);\n transition:.25s ease;\n }\n\n .step{display:none}\n .step.active{display:block;animation:fade .25s ease}\n\n @keyframes fade{\n from{opacity:0;transform:translateY(8px)}\n to{opacity:1;transform:translateY(0)}\n }\n\n .q{\n font-size:22px;\n line-height:1.12;\n letter-spacing:-.4px;\n margin-bottom:14px;\n font-weight:800;\n }\n\n .options{\n display:grid;\n gap:8px;\n }\n\n .option{\n width:100%;\n border:1px solid var(--border);\n background:var(--bg2);\n border-radius:13px;\n padding:12px 14px;\n text-align:left;\n cursor:pointer;\n color:var(--text);\n font-weight:800;\n transition:.2s ease;\n }\n\n .option small{\n display:block;\n color:var(--muted);\n font-weight:500;\n margin-top:2px;\n font-size:13px;\n }\n\n .option:hover,.option.selected{\n border-color:var(--accent);\n background:rgba(199,42,8,.08);\n transform:translateY(-1px);\n }\n\n .field{\n display:grid;\n gap:6px;\n margin-bottom:10px;\n }\n\n .field label{\n font-size:11px;\n letter-spacing:1.5px;\n text-transform:uppercase;\n color:var(--muted);\n font-weight:800;\n }\n\n .field input{\n width:100%;\n border:1px solid var(--border);\n background:var(--bg2);\n border-radius:12px;\n padding:12px 14px;\n outline:none;\n color:var(--text);\n }\n\n .field input:focus{\n border-color:var(--accent);\n box-shadow:0 0 0 4px rgba(199,42,8,.10);\n }\n\n .actions{\n display:flex;\n justify-content:space-between;\n gap:10px;\n margin-top:16px;\n }\n\n .btn{\n border:0;\n border-radius:999px;\n padding:12px 20px;\n font-weight:800;\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n justify-content:center;\n }\n\n .prev{\n background:transparent;\n border:1px solid var(--border);\n color:var(--muted);\n }\n\n .next,.submit,.email-btn{\n background:var(--accent);\n color:var(--bg);\n }\n\n .btn:disabled{opacity:.35;cursor:not-allowed}\n\n .error{\n display:none;\n margin-top:12px;\n color:var(--accent);\n font-weight:800;\n font-size:14px;\n }\n\n .success{display:none}\n .success.show{display:block}\n\n .success h3{\n font-size:32px;\n line-height:1.05;\n letter-spacing:-1px;\n margin-bottom:10px;\n }\n\n .success p{\n color:var(--muted);\n margin-bottom:14px;\n }\n\n .summary{\n background:var(--bg2);\n border:1px solid var(--border);\n border-radius:14px;\n padding:14px;\n white-space:pre-wrap;\n font-size:13px;\n color:var(--muted);\n margin-bottom:14px;\n line-height:1.5;\n }\n\n @media(max-width:900px){\n .nav{padding:0 22px}\n\n .hero{\n min-height:100dvh;\n grid-template-columns:1fr;\n padding:96px 22px 32px;\n gap:28px;\n overflow:visible;\n }\n\n .hero-copy{text-align:left}\n\n h1{\n font-size:clamp(38px,11vw,58px);\n letter-spacing:-2px;\n }\n\n .lead{font-size:16px}\n }\n\n @media(max-width:520px){\n .nav-cta{display:none}\n .logo img{height:36px}\n .form-card{padding:22px}\n .actions{flex-direction:column}\n .btn{width:100%}\n }\n <\/style>\n<\/head>\n\n<body>\n <nav class=\"nav\">\n <a class=\"logo\" href=\"https:\/\/krelo.studio\/en\/\" aria-label=\"Ir a la home de Krelo Studio\">\n <img decoding=\"async\" src=\"https:\/\/krelo.studio\/wp-content\/uploads\/2025\/09\/Agencia-de-Marketing-Digital.png\" alt=\"Krelo Studio\">\n<\/a>\n <a href=\"#auditoria\" class=\"nav-cta\">Auditor\u00eda gratis<\/a>\n <\/nav>\n\n <main>\n <section class=\"hero\">\n <div class=\"hero-copy\">\n <div class=\"tag\">Auditor\u00eda web gratuita<\/div>\n <h1>Si tu web no convierte, <span>est\u00e1s perdiendo dinero.<\/span><\/h1>\n <p class=\"lead\">\n Responde unas preguntas y descubre si necesitas una web nueva, mejorar la actual o crear una estrategia para captar clientes.\n <\/p>\n\n <div class=\"proof\">\n <div><strong>Sin una web clara<\/strong>, el cliente duda y se va con otro.<\/div>\n <div><strong>Sin SEO<\/strong>, dependes de pagar anuncios siempre.<\/div>\n <div><strong>Sin conversi\u00f3n<\/strong>, las visitas no se convierten en dinero.<\/div>\n <\/div>\n <\/div>\n\n <form class=\"form-card\" id=\"auditoria\" action=\"\">\n <div class=\"form-head\">\n <h2>Descubre qu\u00e9 est\u00e1 fallando<\/h2>\n <p>Responde estas preguntas y te diremos el siguiente paso.<\/p>\n <\/div>\n\n <div class=\"progress\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n\n <div class=\"step active\" data-key=\"web\">\n <div class=\"q\">\u00bfTienes web actualmente?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"S\u00ed\">S\u00ed <small>Pero no me trae suficientes clientes.<\/small><\/button>\n <button type=\"button\" class=\"option\" data-value=\"No\">No <small>Quiero empezar a captar online.<\/small><\/button>\n <button type=\"button\" class=\"option\" data-value=\"S\u00ed, pero est\u00e1 antigua\">S\u00ed, pero est\u00e1 antigua <small>Necesita un cambio serio.<\/small><\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"sector\">\n <div class=\"q\">\u00bfCu\u00e1l es tu sector o nicho?<\/div>\n <div class=\"field\">\n <label>Sector<\/label>\n <input type=\"text\" id=\"sector\" placeholder=\"Ej. inmobiliaria, est\u00e9tica, restaurante...\">\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"tiempo\">\n <div class=\"q\">\u00bfCu\u00e1nto llevas con esa web?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"Menos de 1 a\u00f1o\">Menos de 1 a\u00f1o<\/button>\n <button type=\"button\" class=\"option\" data-value=\"1-3 a\u00f1os\">1-3 a\u00f1os<\/button>\n <button type=\"button\" class=\"option\" data-value=\"+3 a\u00f1os\">M\u00e1s de 3 a\u00f1os<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"objetivo\">\n <div class=\"q\">\u00bfCu\u00e1l es tu objetivo principal?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"Conseguir clientes\">Conseguir m\u00e1s clientes<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Vender online\">Vender online<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Aparecer en Google\">Aparecer en Google<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Mejorar imagen\">Mejorar imagen de marca<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"presupuesto\">\n <div class=\"q\">\u00bfCu\u00e1l es tu presupuesto aproximado?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"<1K\"><1K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"1-3K\">1-3K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"3-6K\">3-6K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"+6K\">+6K<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"contacto\">\n <div class=\"q\">\u00bfD\u00f3nde te contactamos?<\/div>\n <div class=\"field\">\n <label>Name<\/label>\n <input type=\"text\" id=\"nombre\" placeholder=\"Tu nombre\">\n <\/div>\n <div class=\"field\">\n <label>Email<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"tu@email.com\">\n <\/div>\n <div class=\"field\">\n <label>Tel\u00e9fono \/ WhatsApp<\/label>\n <input type=\"tel\" id=\"telefono\" placeholder=\"+34 000 000 000\">\n <\/div>\n <\/div>\n\n <div class=\"success\" id=\"success\">\n <h3>Solicitud enviada.<\/h3>\n <p>Estas son tus respuestas. Te contactaremos para revisar tu auditor\u00eda.<\/p>\n <div class=\"summary\" id=\"summary\"><\/div>\n <a class=\"btn email-btn\" id=\"mailLink\" href=\"#\" style=\"display:none\">Enviar manualmente por email<\/a>\n <\/div>\n\n <div class=\"error\" id=\"error\">Responde esta pregunta para continuar.<\/div>\n\n <div class=\"actions\" id=\"actions\">\n <button type=\"button\" class=\"btn prev\" id=\"prev\" disabled>Anterior<\/button>\n <button type=\"button\" class=\"btn next\" id=\"next\">Siguiente<\/button>\n <button type=\"submit\" class=\"btn submit\" id=\"submit\" style=\"display:none\">Enviar<\/button>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/section>\n <\/main>\n\n <script>\n const FORM_EMAIL = \"info@krelo.studio\";\n const SEND_ENDPOINT = \"https:\/\/krelo.studio\/send-auditoria.php\";\n\n const steps = [...document.querySelectorAll(\".step\")];\n const bar = document.getElementById(\"bar\");\n const prev = document.getElementById(\"prev\");\n const next = document.getElementById(\"next\");\n const submit = document.getElementById(\"submit\");\n const error = document.getElementById(\"error\");\n const actions = document.getElementById(\"actions\");\n const success = document.getElementById(\"success\");\n const summary = document.getElementById(\"summary\");\n const mailLink = document.getElementById(\"mailLink\");\n const formHead = document.querySelector(\".form-head\");\n const progress = document.querySelector(\".progress\");\n\n let current = 0;\n const data = {};\n\n function getVisibleSteps(){\n return steps.filter(step => {\n if(step.dataset.key === \"tiempo\" && data.web === \"No\") return false;\n return true;\n });\n }\n\n function showStep(step){\n steps.forEach(s => s.classList.toggle(\"active\", s === step));\n current = steps.indexOf(step);\n\n const flow = getVisibleSteps();\n const index = flow.indexOf(step);\n\n bar.style.width = ((index + 1) \/ flow.length) * 100 + \"%\";\n prev.disabled = index === 0;\n next.style.display = index === flow.length - 1 ? \"none\" : \"inline-flex\";\n submit.style.display = index === flow.length - 1 ? \"inline-flex\" : \"none\";\n error.style.display = \"none\";\n }\n\n function validate(){\n const step = steps[current];\n const key = step.dataset.key;\n\n if(step.querySelector(\".options\")){\n const selected = step.querySelector(\".option.selected\");\n if(!selected) return false;\n\n data[key] = selected.dataset.value;\n\n if(key === \"web\" && data.web === \"No\"){\n data.tiempo = \"No aplica\";\n }\n\n return true;\n }\n\n if(key === \"sector\"){\n const sector = document.getElementById(\"sector\").value.trim();\n if(!sector) return false;\n data.sector = sector;\n return true;\n }\n\n if(key === \"contacto\"){\n const nombre = document.getElementById(\"nombre\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const telefono = document.getElementById(\"telefono\").value.trim();\n\n if(!nombre || !email || !telefono) return false;\n\n data.nombre = nombre;\n data.email = email;\n data.telefono = telefono;\n return true;\n }\n\n return true;\n }\n\n function goNext(){\n const flow = getVisibleSteps();\n const index = flow.indexOf(steps[current]);\n showStep(flow[Math.min(index + 1, flow.length - 1)]);\n }\n\n function goPrev(){\n const flow = getVisibleSteps();\n const index = flow.indexOf(steps[current]);\n showStep(flow[Math.max(index - 1, 0)]);\n }\n\n function getRecommendation(){\n const noWeb = data.web === \"No\";\n const oldWeb = data.web === \"S\u00ed, pero est\u00e1 antigua\" || data.tiempo === \"+3 a\u00f1os\";\n const highBudget = data.presupuesto === \"3-6K\" || data.presupuesto === \"+6K\";\n\n if(noWeb && data.presupuesto === \"<1K\") return \"Recomendaci\u00f3n: empezar con una landing clara para captar contactos r\u00e1pido.\";\n if(noWeb) return \"Recomendaci\u00f3n: crear una web enfocada a confianza, SEO y captaci\u00f3n desde el inicio.\";\n if(oldWeb) return \"Recomendaci\u00f3n: redise\u00f1ar la web. Ahora mismo puede estar frenando contactos.\";\n if(data.objetivo === \"Aparecer en Google\") return \"Recomendaci\u00f3n: trabajar SEO y estructura de servicios para captar tr\u00e1fico org\u00e1nico.\";\n if(data.objetivo === \"Vender online\") return \"Recomendaci\u00f3n: revisar el embudo de venta, confianza y proceso de compra.\";\n if(highBudget) return \"Recomendaci\u00f3n: proyecto completo de dise\u00f1o, SEO y conversi\u00f3n.\";\n return \"Recomendaci\u00f3n: optimizar mensaje, dise\u00f1o m\u00f3vil y llamadas a la acci\u00f3n.\";\n }\n\n function buildSummary(){\n data.recomendacion = getRecommendation();\n\n return `\u00bfTiene web?: ${data.web}\nSector: ${data.sector}\nTiempo con la web: ${data.tiempo}\nObjetivo principal: ${data.objetivo}\nPresupuesto aproximado: ${data.presupuesto}\n\nNombre: ${data.nombre}\nEmail: ${data.email}\nTel\u00e9fono: ${data.telefono}\n\n${data.recomendacion}`;\n }\n\n async function sendEmail(text){\n const response = await fetch(SEND_ENDPOINT, {\n method:\"POST\",\n headers:{ \"Content-Type\":\"application\/json\" },\n body:JSON.stringify({\n nombre:data.nombre,\n email:data.email,\n telefono:data.telefono,\n web:data.web,\n sector:data.sector,\n tiempo:data.tiempo,\n objetivo:data.objetivo,\n presupuesto:data.presupuesto,\n recomendacion:data.recomendacion,\n resumen:text\n })\n });\n\n const result = await response.json();\n\n if(!response.ok || !result.ok){\n throw new Error(\"No se pudo enviar\");\n }\n\n return result;\n }\n\n document.querySelectorAll(\".option\").forEach(option => {\n option.addEventListener(\"click\", () => {\n option.closest(\".options\").querySelectorAll(\".option\").forEach(o => o.classList.remove(\"selected\"));\n option.classList.add(\"selected\");\n error.style.display = \"none\";\n\n setTimeout(() => {\n if(validate()) goNext();\n }, 140);\n });\n });\n\n next.addEventListener(\"click\", () => {\n if(!validate()){\n error.style.display = \"block\";\n return;\n }\n\n goNext();\n });\n\n prev.addEventListener(\"click\", goPrev);\n\n document.getElementById(\"auditoria\").addEventListener(\"submit\", async e => {\n e.preventDefault();\n\n if(!validate()){\n error.style.display = \"block\";\n return;\n }\n\n const text = buildSummary();\n\n submit.textContent = \"Enviando...\";\n submit.disabled = true;\n\n mailLink.href =\n \"mailto:\" + FORM_EMAIL +\n \"?subject=\" + encodeURIComponent(\"Nueva auditor\u00eda web gratuita\") +\n \"&body=\" + encodeURIComponent(text);\n\n try{\n await sendEmail(text);\n summary.textContent = text;\n mailLink.style.display = \"none\";\n }catch(err){\n summary.textContent = text + \"\\n\\nAviso: no se pudo enviar autom\u00e1ticamente. Pulsa el bot\u00f3n para enviarlo por email.\";\n mailLink.style.display = \"inline-flex\";\n }\n\n steps.forEach(s => s.classList.remove(\"active\"));\n actions.style.display = \"none\";\n progress.style.display = \"none\";\n formHead.style.display = \"none\";\n error.style.display = \"none\";\n success.classList.add(\"show\");\n });\n\n showStep(steps[0]);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Auditor\u00eda Web Gratuita | Krelo Studio Auditor\u00eda gratis Auditor\u00eda web gratuita Si tu web no convierte, est\u00e1s perdiendo dinero. Responde unas preguntas y descubre si necesitas una web nueva, mejorar la actual o crear una estrategia para captar clientes. Sin una web clara, el cliente duda y se va con otro. Sin SEO, dependes de […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/comments?post=1614"}],"version-history":[{"count":4,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614\/revisions"}],"predecessor-version":[{"id":1618,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614\/revisions\/1618"}],"wp:attachment":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/media?parent=1614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Auditor\u00eda Web Gratuita | Krelo Studio<\/title>\n\n <style>\n *{box-sizing:border-box;margin:0;padding:0}\n :root{\n --bg:#ECE5DB;\n --bg2:#E5DDD1;\n --card:#F6F0E8;\n --text:#1A0804;\n --muted:#6B4A42;\n --accent:#C72A08;\n --border:rgba(199,42,8,.18);\n --font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Inter,sans-serif;\n }\n\n html{scroll-behavior:smooth}\n body{\n background:var(--bg);\n color:var(--text);\n font-family:var(--font);\n line-height:1.5;\n overflow-x:hidden;\n }\n\n a{text-decoration:none;color:inherit}\n button,input{font:inherit}\n\n .nav{\n position:fixed;\n top:0;\n left:0;\n right:0;\n z-index:50;\n height:72px;\n padding:0 6vw;\n display:flex;\n align-items:center;\n justify-content:space-between;\n background:rgba(236,229,219,.9);\n backdrop-filter:blur(22px);\n border-bottom:1px solid var(--border);\n }\n\n .logo img{\n height:40px;\n width:auto;\n display:block;\n }\n\n .nav-cta{\n background:var(--accent);\n color:var(--bg);\n padding:10px 18px;\n border-radius:999px;\n font-size:14px;\n font-weight:800;\n }\n\n .hero{\n min-height:100dvh;\n padding:92px 6vw 28px;\n display:grid;\n grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);\n gap:36px;\n align-items:center;\n position:relative;\n overflow:hidden;\n }\n\n .hero::before{\n content:\"\";\n position:absolute;\n width:560px;\n height:560px;\n border-radius:50%;\n background:radial-gradient(circle,rgba(199,42,8,.2),transparent 65%);\n top:4%;\n right:4%;\n pointer-events:none;\n }\n\n .hero-copy,.form-card{position:relative;z-index:1}\n\n .tag{\n color:var(--accent);\n font-size:12px;\n letter-spacing:3px;\n text-transform:uppercase;\n font-weight:800;\n margin-bottom:18px;\n }\n\n h1{\n font-size:clamp(38px,5.8vw,74px);\n line-height:.98;\n letter-spacing:-2.6px;\n margin-bottom:20px;\n }\n\n h1 span{color:var(--accent)}\n\n .lead{\n max-width:580px;\n color:var(--muted);\n font-size:clamp(16px,1.55vw,19px);\n line-height:1.55;\n margin-bottom:22px;\n }\n\n .proof{\n display:grid;\n gap:8px;\n max-width:540px;\n }\n\n .proof div{\n padding:12px 15px;\n border:1px solid var(--border);\n background:rgba(255,255,255,.22);\n border-radius:14px;\n color:var(--muted);\n font-size:14px;\n }\n\n .proof strong{color:var(--text)}\n\n .form-card{\n background:var(--card);\n border:1px solid var(--border);\n border-radius:24px;\n padding:24px;\n box-shadow:0 24px 70px rgba(26,8,4,.12);\n overflow:visible;\n }\n\n .form-head{margin-bottom:18px}\n\n .form-head h2{\n font-size:26px;\n line-height:1.05;\n letter-spacing:-.8px;\n margin-bottom:7px;\n }\n\n .form-head p{\n color:var(--muted);\n font-size:14px;\n }\n\n .progress{\n height:6px;\n background:rgba(199,42,8,.12);\n border-radius:999px;\n overflow:hidden;\n margin-bottom:18px;\n }\n\n .bar{\n height:100%;\n width:20%;\n background:var(--accent);\n transition:.25s ease;\n }\n\n .step{display:none}\n .step.active{display:block;animation:fade .25s ease}\n\n @keyframes fade{\n from{opacity:0;transform:translateY(8px)}\n to{opacity:1;transform:translateY(0)}\n }\n\n .q{\n font-size:22px;\n line-height:1.12;\n letter-spacing:-.4px;\n margin-bottom:14px;\n font-weight:800;\n }\n\n .options{\n display:grid;\n gap:8px;\n }\n\n .option{\n width:100%;\n border:1px solid var(--border);\n background:var(--bg2);\n border-radius:13px;\n padding:12px 14px;\n text-align:left;\n cursor:pointer;\n color:var(--text);\n font-weight:800;\n transition:.2s ease;\n }\n\n .option small{\n display:block;\n color:var(--muted);\n font-weight:500;\n margin-top:2px;\n font-size:13px;\n }\n\n .option:hover,.option.selected{\n border-color:var(--accent);\n background:rgba(199,42,8,.08);\n transform:translateY(-1px);\n }\n\n .field{\n display:grid;\n gap:6px;\n margin-bottom:10px;\n }\n\n .field label{\n font-size:11px;\n letter-spacing:1.5px;\n text-transform:uppercase;\n color:var(--muted);\n font-weight:800;\n }\n\n .field input{\n width:100%;\n border:1px solid var(--border);\n background:var(--bg2);\n border-radius:12px;\n padding:12px 14px;\n outline:none;\n color:var(--text);\n }\n\n .field input:focus{\n border-color:var(--accent);\n box-shadow:0 0 0 4px rgba(199,42,8,.10);\n }\n\n .actions{\n display:flex;\n justify-content:space-between;\n gap:10px;\n margin-top:16px;\n }\n\n .btn{\n border:0;\n border-radius:999px;\n padding:12px 20px;\n font-weight:800;\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n justify-content:center;\n }\n\n .prev{\n background:transparent;\n border:1px solid var(--border);\n color:var(--muted);\n }\n\n .next,.submit,.email-btn{\n background:var(--accent);\n color:var(--bg);\n }\n\n .btn:disabled{opacity:.35;cursor:not-allowed}\n\n .error{\n display:none;\n margin-top:12px;\n color:var(--accent);\n font-weight:800;\n font-size:14px;\n }\n\n .success{display:none}\n .success.show{display:block}\n\n .success h3{\n font-size:32px;\n line-height:1.05;\n letter-spacing:-1px;\n margin-bottom:10px;\n }\n\n .success p{\n color:var(--muted);\n margin-bottom:14px;\n }\n\n .summary{\n background:var(--bg2);\n border:1px solid var(--border);\n border-radius:14px;\n padding:14px;\n white-space:pre-wrap;\n font-size:13px;\n color:var(--muted);\n margin-bottom:14px;\n line-height:1.5;\n }\n\n @media(max-width:900px){\n .nav{padding:0 22px}\n\n .hero{\n min-height:100dvh;\n grid-template-columns:1fr;\n padding:96px 22px 32px;\n gap:28px;\n overflow:visible;\n }\n\n .hero-copy{text-align:left}\n\n h1{\n font-size:clamp(38px,11vw,58px);\n letter-spacing:-2px;\n }\n\n .lead{font-size:16px}\n }\n\n @media(max-width:520px){\n .nav-cta{display:none}\n .logo img{height:36px}\n .form-card{padding:22px}\n .actions{flex-direction:column}\n .btn{width:100%}\n }\n <\/style>\n<\/head>\n\n<body>\n <nav class=\"nav\">\n <a class=\"logo\" href=\"https:\/\/krelo.studio\/en\/\" aria-label=\"Ir a la home de Krelo Studio\">\n <img decoding=\"async\" src=\"https:\/\/krelo.studio\/wp-content\/uploads\/2025\/09\/Agencia-de-Marketing-Digital.png\" alt=\"Krelo Studio\">\n<\/a>\n <a href=\"#auditoria\" class=\"nav-cta\">Auditor\u00eda gratis<\/a>\n <\/nav>\n\n <main>\n <section class=\"hero\">\n <div class=\"hero-copy\">\n <div class=\"tag\">Auditor\u00eda web gratuita<\/div>\n <h1>Si tu web no convierte, <span>est\u00e1s perdiendo dinero.<\/span><\/h1>\n <p class=\"lead\">\n Responde unas preguntas y descubre si necesitas una web nueva, mejorar la actual o crear una estrategia para captar clientes.\n <\/p>\n\n <div class=\"proof\">\n <div><strong>Sin una web clara<\/strong>, el cliente duda y se va con otro.<\/div>\n <div><strong>Sin SEO<\/strong>, dependes de pagar anuncios siempre.<\/div>\n <div><strong>Sin conversi\u00f3n<\/strong>, las visitas no se convierten en dinero.<\/div>\n <\/div>\n <\/div>\n\n <form class=\"form-card\" id=\"auditoria\" action=\"\">\n <div class=\"form-head\">\n <h2>Descubre qu\u00e9 est\u00e1 fallando<\/h2>\n <p>Responde estas preguntas y te diremos el siguiente paso.<\/p>\n <\/div>\n\n <div class=\"progress\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n\n <div class=\"step active\" data-key=\"web\">\n <div class=\"q\">\u00bfTienes web actualmente?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"S\u00ed\">S\u00ed <small>Pero no me trae suficientes clientes.<\/small><\/button>\n <button type=\"button\" class=\"option\" data-value=\"No\">No <small>Quiero empezar a captar online.<\/small><\/button>\n <button type=\"button\" class=\"option\" data-value=\"S\u00ed, pero est\u00e1 antigua\">S\u00ed, pero est\u00e1 antigua <small>Necesita un cambio serio.<\/small><\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"sector\">\n <div class=\"q\">\u00bfCu\u00e1l es tu sector o nicho?<\/div>\n <div class=\"field\">\n <label>Sector<\/label>\n <input type=\"text\" id=\"sector\" placeholder=\"Ej. inmobiliaria, est\u00e9tica, restaurante...\">\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"tiempo\">\n <div class=\"q\">\u00bfCu\u00e1nto llevas con esa web?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"Menos de 1 a\u00f1o\">Menos de 1 a\u00f1o<\/button>\n <button type=\"button\" class=\"option\" data-value=\"1-3 a\u00f1os\">1-3 a\u00f1os<\/button>\n <button type=\"button\" class=\"option\" data-value=\"+3 a\u00f1os\">M\u00e1s de 3 a\u00f1os<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"objetivo\">\n <div class=\"q\">\u00bfCu\u00e1l es tu objetivo principal?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"Conseguir clientes\">Conseguir m\u00e1s clientes<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Vender online\">Vender online<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Aparecer en Google\">Aparecer en Google<\/button>\n <button type=\"button\" class=\"option\" data-value=\"Mejorar imagen\">Mejorar imagen de marca<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"presupuesto\">\n <div class=\"q\">\u00bfCu\u00e1l es tu presupuesto aproximado?<\/div>\n <div class=\"options\">\n <button type=\"button\" class=\"option\" data-value=\"<1K\"><1K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"1-3K\">1-3K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"3-6K\">3-6K<\/button>\n <button type=\"button\" class=\"option\" data-value=\"+6K\">+6K<\/button>\n <\/div>\n <\/div>\n\n <div class=\"step\" data-key=\"contacto\">\n <div class=\"q\">\u00bfD\u00f3nde te contactamos?<\/div>\n <div class=\"field\">\n <label>Name<\/label>\n <input type=\"text\" id=\"nombre\" placeholder=\"Tu nombre\">\n <\/div>\n <div class=\"field\">\n <label>Email<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"tu@email.com\">\n <\/div>\n <div class=\"field\">\n <label>Tel\u00e9fono \/ WhatsApp<\/label>\n <input type=\"tel\" id=\"telefono\" placeholder=\"+34 000 000 000\">\n <\/div>\n <\/div>\n\n <div class=\"success\" id=\"success\">\n <h3>Solicitud enviada.<\/h3>\n <p>Estas son tus respuestas. Te contactaremos para revisar tu auditor\u00eda.<\/p>\n <div class=\"summary\" id=\"summary\"><\/div>\n <a class=\"btn email-btn\" id=\"mailLink\" href=\"#\" style=\"display:none\">Enviar manualmente por email<\/a>\n <\/div>\n\n <div class=\"error\" id=\"error\">Responde esta pregunta para continuar.<\/div>\n\n <div class=\"actions\" id=\"actions\">\n <button type=\"button\" class=\"btn prev\" id=\"prev\" disabled>Anterior<\/button>\n <button type=\"button\" class=\"btn next\" id=\"next\">Siguiente<\/button>\n <button type=\"submit\" class=\"btn submit\" id=\"submit\" style=\"display:none\">Enviar<\/button>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/section>\n <\/main>\n\n <script>\n const FORM_EMAIL = \"info@krelo.studio\";\n const SEND_ENDPOINT = \"https:\/\/krelo.studio\/send-auditoria.php\";\n\n const steps = [...document.querySelectorAll(\".step\")];\n const bar = document.getElementById(\"bar\");\n const prev = document.getElementById(\"prev\");\n const next = document.getElementById(\"next\");\n const submit = document.getElementById(\"submit\");\n const error = document.getElementById(\"error\");\n const actions = document.getElementById(\"actions\");\n const success = document.getElementById(\"success\");\n const summary = document.getElementById(\"summary\");\n const mailLink = document.getElementById(\"mailLink\");\n const formHead = document.querySelector(\".form-head\");\n const progress = document.querySelector(\".progress\");\n\n let current = 0;\n const data = {};\n\n function getVisibleSteps(){\n return steps.filter(step => {\n if(step.dataset.key === \"tiempo\" && data.web === \"No\") return false;\n return true;\n });\n }\n\n function showStep(step){\n steps.forEach(s => s.classList.toggle(\"active\", s === step));\n current = steps.indexOf(step);\n\n const flow = getVisibleSteps();\n const index = flow.indexOf(step);\n\n bar.style.width = ((index + 1) \/ flow.length) * 100 + \"%\";\n prev.disabled = index === 0;\n next.style.display = index === flow.length - 1 ? \"none\" : \"inline-flex\";\n submit.style.display = index === flow.length - 1 ? \"inline-flex\" : \"none\";\n error.style.display = \"none\";\n }\n\n function validate(){\n const step = steps[current];\n const key = step.dataset.key;\n\n if(step.querySelector(\".options\")){\n const selected = step.querySelector(\".option.selected\");\n if(!selected) return false;\n\n data[key] = selected.dataset.value;\n\n if(key === \"web\" && data.web === \"No\"){\n data.tiempo = \"No aplica\";\n }\n\n return true;\n }\n\n if(key === \"sector\"){\n const sector = document.getElementById(\"sector\").value.trim();\n if(!sector) return false;\n data.sector = sector;\n return true;\n }\n\n if(key === \"contacto\"){\n const nombre = document.getElementById(\"nombre\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const telefono = document.getElementById(\"telefono\").value.trim();\n\n if(!nombre || !email || !telefono) return false;\n\n data.nombre = nombre;\n data.email = email;\n data.telefono = telefono;\n return true;\n }\n\n return true;\n }\n\n function goNext(){\n const flow = getVisibleSteps();\n const index = flow.indexOf(steps[current]);\n showStep(flow[Math.min(index + 1, flow.length - 1)]);\n }\n\n function goPrev(){\n const flow = getVisibleSteps();\n const index = flow.indexOf(steps[current]);\n showStep(flow[Math.max(index - 1, 0)]);\n }\n\n function getRecommendation(){\n const noWeb = data.web === \"No\";\n const oldWeb = data.web === \"S\u00ed, pero est\u00e1 antigua\" || data.tiempo === \"+3 a\u00f1os\";\n const highBudget = data.presupuesto === \"3-6K\" || data.presupuesto === \"+6K\";\n\n if(noWeb && data.presupuesto === \"<1K\") return \"Recomendaci\u00f3n: empezar con una landing clara para captar contactos r\u00e1pido.\";\n if(noWeb) return \"Recomendaci\u00f3n: crear una web enfocada a confianza, SEO y captaci\u00f3n desde el inicio.\";\n if(oldWeb) return \"Recomendaci\u00f3n: redise\u00f1ar la web. Ahora mismo puede estar frenando contactos.\";\n if(data.objetivo === \"Aparecer en Google\") return \"Recomendaci\u00f3n: trabajar SEO y estructura de servicios para captar tr\u00e1fico org\u00e1nico.\";\n if(data.objetivo === \"Vender online\") return \"Recomendaci\u00f3n: revisar el embudo de venta, confianza y proceso de compra.\";\n if(highBudget) return \"Recomendaci\u00f3n: proyecto completo de dise\u00f1o, SEO y conversi\u00f3n.\";\n return \"Recomendaci\u00f3n: optimizar mensaje, dise\u00f1o m\u00f3vil y llamadas a la acci\u00f3n.\";\n }\n\n function buildSummary(){\n data.recomendacion = getRecommendation();\n\n return `\u00bfTiene web?: ${data.web}\nSector: ${data.sector}\nTiempo con la web: ${data.tiempo}\nObjetivo principal: ${data.objetivo}\nPresupuesto aproximado: ${data.presupuesto}\n\nNombre: ${data.nombre}\nEmail: ${data.email}\nTel\u00e9fono: ${data.telefono}\n\n${data.recomendacion}`;\n }\n\n async function sendEmail(text){\n const response = await fetch(SEND_ENDPOINT, {\n method:\"POST\",\n headers:{ \"Content-Type\":\"application\/json\" },\n body:JSON.stringify({\n nombre:data.nombre,\n email:data.email,\n telefono:data.telefono,\n web:data.web,\n sector:data.sector,\n tiempo:data.tiempo,\n objetivo:data.objetivo,\n presupuesto:data.presupuesto,\n recomendacion:data.recomendacion,\n resumen:text\n })\n });\n\n const result = await response.json();\n\n if(!response.ok || !result.ok){\n throw new Error(\"No se pudo enviar\");\n }\n\n return result;\n }\n\n document.querySelectorAll(\".option\").forEach(option => {\n option.addEventListener(\"click\", () => {\n option.closest(\".options\").querySelectorAll(\".option\").forEach(o => o.classList.remove(\"selected\"));\n option.classList.add(\"selected\");\n error.style.display = \"none\";\n\n setTimeout(() => {\n if(validate()) goNext();\n }, 140);\n });\n });\n\n next.addEventListener(\"click\", () => {\n if(!validate()){\n error.style.display = \"block\";\n return;\n }\n\n goNext();\n });\n\n prev.addEventListener(\"click\", goPrev);\n\n document.getElementById(\"auditoria\").addEventListener(\"submit\", async e => {\n e.preventDefault();\n\n if(!validate()){\n error.style.display = \"block\";\n return;\n }\n\n const text = buildSummary();\n\n submit.textContent = \"Enviando...\";\n submit.disabled = true;\n\n mailLink.href =\n \"mailto:\" + FORM_EMAIL +\n \"?subject=\" + encodeURIComponent(\"Nueva auditor\u00eda web gratuita\") +\n \"&body=\" + encodeURIComponent(text);\n\n try{\n await sendEmail(text);\n summary.textContent = text;\n mailLink.style.display = \"none\";\n }catch(err){\n summary.textContent = text + \"\\n\\nAviso: no se pudo enviar autom\u00e1ticamente. Pulsa el bot\u00f3n para enviarlo por email.\";\n mailLink.style.display = \"inline-flex\";\n }\n\n steps.forEach(s => s.classList.remove(\"active\"));\n actions.style.display = \"none\";\n progress.style.display = \"none\";\n formHead.style.display = \"none\";\n error.style.display = \"none\";\n success.classList.add(\"show\");\n });\n\n showStep(steps[0]);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Auditor\u00eda Web Gratuita | Krelo Studio Auditor\u00eda gratis Auditor\u00eda web gratuita Si tu web no convierte, est\u00e1s perdiendo dinero. Responde unas preguntas y descubre si necesitas una web nueva, mejorar la actual o crear una estrategia para captar clientes. Sin una web clara, el cliente duda y se va con otro. Sin SEO, dependes de […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/comments?post=1614"}],"version-history":[{"count":4,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614\/revisions"}],"predecessor-version":[{"id":1618,"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/pages\/1614\/revisions\/1618"}],"wp:attachment":[{"href":"https:\/\/krelo.studio\/en\/wp-json\/wp\/v2\/media?parent=1614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}