Contacto<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n \/* ============ TOKENS (cambia aqu\u00ed los colores de tu marca) ============ *\/\r\n :root {\r\n --brand: #4f46e5;\r\n --brand-hover: #4338ca;\r\n --brand-soft: #eef2ff;\r\n --bg: #f7f8fa;\r\n --surface: #ffffff;\r\n --text: #0f172a;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --border-strong: #cbd5e1;\r\n --error: #dc2626;\r\n --error-soft: #fef2f2;\r\n --success: #059669;\r\n --radius: 10px;\r\n --shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -8px rgba(15,23,42,.10);\r\n }\r\n @media (prefers-color-scheme: dark) {\r\n :root {\r\n --brand: #818cf8;\r\n --brand-hover: #a5b4fc;\r\n --brand-soft: rgba(129,140,248,.12);\r\n --bg: #0b0f19;\r\n --surface: #111827;\r\n --text: #f1f5f9;\r\n --muted: #94a3b8;\r\n --border: #1f2937;\r\n --border-strong: #334155;\r\n --error: #f87171;\r\n --error-soft: rgba(248,113,113,.08);\r\n --success: #34d399;\r\n --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -8px rgba(0,0,0,.5);\r\n }\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; }\r\n body {\r\n margin: 0;\r\n font-family: \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.5;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* ============ LAYOUT ============ *\/\r\n .contact {\r\n max-width: 1080px;\r\n margin: 0 auto;\r\n padding: 72px 20px;\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr;\r\n gap: 64px;\r\n align-items: start;\r\n }\r\n @media (max-width: 860px) {\r\n .contact { grid-template-columns: 1fr; gap: 40px; padding: 48px 16px; }\r\n }\r\n\r\n \/* ============ COLUMNA INFO ============ *\/\r\n .eyebrow {\r\n display: inline-block;\r\n font-size: 13px; font-weight: 600;\r\n color: var(--brand);\r\n background: var(--brand-soft);\r\n padding: 4px 10px; border-radius: 999px;\r\n margin-bottom: 16px;\r\n }\r\n .info h1 {\r\n font-size: clamp(30px, 4vw, 40px);\r\n line-height: 1.15; letter-spacing: -0.02em;\r\n margin: 0 0 16px; font-weight: 700;\r\n }\r\n .info > p { color: var(--muted); font-size: 17px; margin: 0 0 40px; max-width: 42ch; }\r\n\r\n .channels { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }\r\n .channels li { display: flex; gap: 14px; }\r\n .icon {\r\n flex: none; width: 40px; height: 40px; border-radius: 10px;\r\n display: grid; place-items: center;\r\n background: var(--surface); border: 1px solid var(--border);\r\n color: var(--brand);\r\n }\r\n .icon svg { width: 20px; height: 20px; }\r\n .channels strong { display: block; font-weight: 600; font-size: 15px; }\r\n .channels span, .channels a { color: var(--muted); font-size: 14px; }\r\n .channels a { color: var(--brand); text-decoration: none; }\r\n .channels a:hover { text-decoration: underline; }\r\n\r\n \/* ============ TARJETA FORM ============ *\/\r\n .card {\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n box-shadow: var(--shadow);\r\n padding: 36px;\r\n }\r\n @media (max-width: 520px) { .card { padding: 24px 20px; } }\r\n\r\n .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n @media (max-width: 520px) { .row { grid-template-columns: 1fr; } }\r\n\r\n .field { margin-bottom: 20px; }\r\n label, legend {\r\n display: block; font-size: 14px; font-weight: 500;\r\n margin-bottom: 6px; color: var(--text);\r\n }\r\n .req { color: var(--error); margin-left: 2px; }\r\n .optional { color: var(--muted); font-weight: 400; font-size: 13px; }\r\n\r\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], select, textarea {\r\n width: 100%;\r\n font: inherit; font-size: 15px;\r\n color: var(--text);\r\n background: var(--surface);\r\n border: 1px solid var(--border-strong);\r\n border-radius: var(--radius);\r\n padding: 11px 14px;\r\n transition: border-color .15s, box-shadow .15s;\r\n appearance: none;\r\n }\r\n input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }\r\n input:hover, select:hover, textarea:hover { border-color: var(--muted); }\r\n input:focus, select:focus, textarea:focus {\r\n outline: none;\r\n border-color: var(--brand);\r\n box-shadow: 0 0 0 4px var(--brand-soft);\r\n }\r\n select {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat; background-position: right 14px center;\r\n padding-right: 38px; cursor: pointer;\r\n }\r\n textarea { min-height: 140px; resize: vertical; }\r\n\r\n \/* Estado de error *\/\r\n .field.invalid input, .field.invalid select, .field.invalid textarea {\r\n border-color: var(--error);\r\n background: var(--error-soft);\r\n }\r\n .field.invalid input:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 4px var(--error-soft); }\r\n .error-msg {\r\n display: none; align-items: center; gap: 6px;\r\n color: var(--error); font-size: 13px; margin-top: 6px;\r\n }\r\n .field.invalid .error-msg { display: flex; }\r\n\r\n \/* Chips de motivo *\/\r\n fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }\r\n .chips { display: flex; flex-wrap: wrap; gap: 8px; }\r\n .chip input { position: absolute; opacity: 0; pointer-events: none; }\r\n .chip span {\r\n display: inline-block; cursor: pointer;\r\n font-size: 14px; font-weight: 500;\r\n padding: 8px 14px; border-radius: 999px;\r\n border: 1px solid var(--border-strong);\r\n color: var(--muted);\r\n transition: all .15s;\r\n user-select: none;\r\n }\r\n .chip span:hover { border-color: var(--brand); color: var(--text); }\r\n .chip input:checked + span {\r\n background: var(--brand); border-color: var(--brand); color: #fff;\r\n }\r\n .chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--brand-soft); }\r\n\r\n .counter { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }\r\n .counter.over { color: var(--error); }\r\n\r\n \/* Consentimiento *\/\r\n .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }\r\n .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }\r\n .consent label { font-weight: 400; color: var(--muted); margin: 0; cursor: pointer; }\r\n .consent a { color: var(--brand); }\r\n\r\n \/* Honeypot anti-spam *\/\r\n .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }\r\n\r\n \/* Bot\u00f3n *\/\r\n .submit {\r\n width: 100%; margin-top: 8px;\r\n display: inline-flex; align-items: center; justify-content: center; gap: 10px;\r\n font: inherit; font-size: 15px; font-weight: 600;\r\n color: #fff; background: var(--brand);\r\n border: 0; border-radius: var(--radius);\r\n padding: 13px 20px; cursor: pointer;\r\n transition: background .15s, transform .05s;\r\n }\r\n .submit:hover { background: var(--brand-hover); }\r\n .submit:active { transform: translateY(1px); }\r\n .submit:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }\r\n .submit[disabled] { opacity: .7; cursor: progress; }\r\n .spinner {\r\n width: 16px; height: 16px; border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;\r\n animation: spin .7s linear infinite; display: none;\r\n }\r\n .submit.loading .spinner { display: block; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n .fine { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }\r\n\r\n .alert {\r\n display: none; padding: 12px 14px; border-radius: var(--radius);\r\n background: var(--error-soft); color: var(--error);\r\n font-size: 14px; margin-bottom: 20px;\r\n }\r\n .alert.show { display: block; }\r\n\r\n \/* \u00c9xito *\/\r\n .success { display: none; text-align: center; padding: 40px 8px; }\r\n .success.show { display: block; animation: fade .35s ease; }\r\n .success .check {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n margin: 0 auto 20px; display: grid; place-items: center;\r\n background: color-mix(in srgb, var(--success) 14%, transparent);\r\n color: var(--success);\r\n }\r\n .success h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.01em; }\r\n .success p { margin: 0 auto; color: var(--muted); max-width: 36ch; }\r\n .link-btn {\r\n margin-top: 24px; background: none; border: 0; font: inherit;\r\n color: var(--brand); font-weight: 600; cursor: pointer; font-size: 14px;\r\n }\r\n @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\r\n\r\n @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<main class=\"contact\">\r\n \r\n <section class=\"info\">\r\n <span class=\"eyebrow\">Contacto<\/span>\r\n <h1>Hablemos de c\u00f3mo podemos ayudarte<\/h1>\r\n <p>Cu\u00e9ntanos qu\u00e9 necesitas y nuestro equipo te responder\u00e1 en menos de 24 horas laborables.<\/p>\r\n\r\n <ul class=\"channels\">\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-10 6L2 7\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Email<\/strong><a href=\"mailto:hola@defensadigital.es\">hola@defensadigital.es<\/a><\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Soporte t\u00e9cnico<\/strong><span>Clientes: accede desde tu panel del \u00c1rea Privada <\/span><\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Oficina<\/strong><span>Barcelona, Espa\u00f1a<\/span><\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <form id=\"contactForm\" novalidate>\r\n <div class=\"alert\" id=\"formAlert\" role=\"alert\"><\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label for=\"name\">Nombre completo<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" placeholder=\"Ana Garc\u00eda\" required minlength=\"2\" aria-describedby=\"name-err\">\r\n <div class=\"error-msg\" id=\"name-err\">Introduce tu nombre.<\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"email\">Email de trabajo<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"ana@empresa.com\" required aria-describedby=\"email-err\">\r\n <div class=\"error-msg\" id=\"email-err\">Introduce un email v\u00e1lido.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label for=\"company\">Empresa <span class=\"optional\">(opcional)<\/span><\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" autocomplete=\"organization\" placeholder=\"Nombre de la empresa\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"size\">Tama\u00f1o del equipo<\/label>\r\n <select id=\"size\" name=\"size\">\r\n <option value=\"\">Selecciona\u2026<\/option>\r\n <option>1\u201310<\/option>\r\n <option>11\u201350<\/option>\r\n <option>51\u2013200<\/option>\r\n <option>201\u20131000<\/option>\r\n <option>+1000<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <fieldset class=\"field\" id=\"topicField\">\r\n <legend>\u00bfEn qu\u00e9 podemos ayudarte?<span class=\"req\" aria-hidden=\"true\">*<\/span><\/legend>\r\n <div class=\"chips\">\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Ventas \/ Demo\" required><span>Ventas \/ Demo<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Soporte t\u00e9cnico\"><span>Soporte t\u00e9cnico<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Partnerships\"><span>Partnerships<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Prensa\"><span>Prensa<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Otro\"><span>Otro<\/span><\/label>\r\n <\/div>\r\n <div class=\"error-msg\">Selecciona un motivo.<\/div>\r\n <\/fieldset>\r\n\r\n <div class=\"field\">\r\n <label for=\"message\">Mensaje<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"Cu\u00e9ntanos brevemente tu caso, objetivos o preguntas\u2026\" required minlength=\"20\" maxlength=\"1000\" aria-describedby=\"message-err message-count\"><\/textarea>\r\n <div class=\"counter\" id=\"message-count\" aria-live=\"polite\">0 \/ 1000<\/div>\r\n <div class=\"error-msg\" id=\"message-err\">El mensaje debe tener al menos 20 caracteres.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hp\" aria-hidden=\"true\">\r\n <label for=\"website\">Web<\/label>\r\n <input type=\"text\" id=\"website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"field\" id=\"consentField\">\r\n <div class=\"consent\">\r\n <input type=\"checkbox\" id=\"consent\" name=\"consent\" required>\r\n <label for=\"consent\">Acepto la <a href=\"https:\/\/defensadigital.es\/politica-de-privacidad\/\" target=\"_blank\" rel=\"noopener\">pol\u00edtica de privacidad<\/a> y el tratamiento de mis datos para responder a esta solicitud.<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <\/div>\r\n <div class=\"error-msg\">Debes aceptar la pol\u00edtica de privacidad.<\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"submit\" id=\"submitBtn\">\r\n <span class=\"spinner\" aria-hidden=\"true\"><\/span>\r\n <span class=\"label\">Enviar mensaje<\/span>\r\n <a href=\"mailto:correo@ejemplo.com\">\r\n <\/a>\r\n <\/button>\r\n <p class=\"fine\">Nunca compartiremos tus datos con terceros.<\/p>\r\n <\/form>\r\n\r\n <div class=\"success\" id=\"successState\" role=\"status\" tabindex=\"-1\">\r\n <div class=\"check\" aria-hidden=\"true\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <h2>\u00a1Mensaje enviado!<\/h2>\r\n <p>Gracias por escribirnos. Te responderemos en menos de 24 horas laborables.<\/p>\r\n <button type=\"button\" class=\"link-btn\" id=\"resetBtn\">Enviar otro mensaje<\/button>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n<script>\r\n\/* =====================================================================\r\n CONFIGURACI\u00d3N\r\n Pega aqu\u00ed la URL de tu endpoint (p. ej. Formspree, Getform, Basin,\r\n tu propia API\u2026). Se env\u00eda un POST con JSON.\r\n Si lo dejas vac\u00edo, el formulario simula el env\u00edo (modo demo).\r\n ===================================================================== *\/\r\nconst FORM_ENDPOINT = \"https:\/\/formspree.io\/f\/mgavpppk\";\r\n\r\n(() => {\r\n const form = document.getElementById(\"contactForm\");\r\n const btn = document.getElementById(\"submitBtn\");\r\n const alertBox = document.getElementById(\"formAlert\");\r\n const success = document.getElementById(\"successState\");\r\n const msg = document.getElementById(\"message\");\r\n const counter = document.getElementById(\"message-count\");\r\n const EMAIL_RE = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\r\n\r\n \/\/ Contador de caracteres\r\n const updateCounter = () => {\r\n const n = msg.value.length;\r\n counter.textContent = `${n} \/ ${msg.maxLength}`;\r\n counter.classList.toggle(\"over\", n >= msg.maxLength);\r\n };\r\n msg.addEventListener(\"input\", updateCounter);\r\n\r\n \/\/ Reglas de validaci\u00f3n\r\n const rules = {\r\n name: () => form.name.value.trim().length >= 2,\r\n email: () => EMAIL_RE.test(form.email.value.trim()),\r\n topic: () => !!form.querySelector('input[name=\"topic\"]:checked'),\r\n message: () => form.message.value.trim().length >= 20,\r\n consent: () => form.consent.checked,\r\n };\r\n const fieldOf = (key) =>\r\n key === \"topic\" ? document.getElementById(\"topicField\")\r\n : key === \"consent\" ? document.getElementById(\"consentField\")\r\n : form[key].closest(\".field\");\r\n\r\n const validate = (key) => {\r\n const ok = rules[key]();\r\n const field = fieldOf(key);\r\n field.classList.toggle(\"invalid\", !ok);\r\n field.querySelectorAll(\"input, textarea\").forEach(el => el.setAttribute(\"aria-invalid\", String(!ok)));\r\n return ok;\r\n };\r\n\r\n \/\/ Validaci\u00f3n al salir del campo y correcci\u00f3n en vivo\r\n [\"name\", \"email\", \"message\"].forEach(key => {\r\n form[key].addEventListener(\"blur\", () => { if (form[key].value) validate(key); });\r\n form[key].addEventListener(\"input\", () => { if (fieldOf(key).classList.contains(\"invalid\")) validate(key); });\r\n });\r\n form.querySelectorAll('input[name=\"topic\"]').forEach(r => r.addEventListener(\"change\", () => validate(\"topic\")));\r\n form.consent.addEventListener(\"change\", () => validate(\"consent\"));\r\n\r\n const setLoading = (on) => {\r\n btn.disabled = on;\r\n btn.classList.toggle(\"loading\", on);\r\n btn.querySelector(\".label\").textContent = on ? \"Enviando\u2026\" : \"Enviar mensaje\";\r\n };\r\n\r\n form.addEventListener(\"submit\", async (e) => {\r\n e.preventDefault();\r\n alertBox.classList.remove(\"show\");\r\n\r\n const results = Object.keys(rules).map(k => [k, validate(k)]);\r\n const firstBad = results.find(([, ok]) => !ok);\r\n if (firstBad) {\r\n const el = fieldOf(firstBad[0]).querySelector(\"input, textarea\");\r\n el && el.focus();\r\n return;\r\n }\r\n\r\n \/\/ Honeypot: si est\u00e1 relleno, fingimos \u00e9xito y no enviamos\r\n if (form.website.value) { showSuccess(); return; }\r\n\r\n const data = Object.fromEntries(new FormData(form));\r\n delete data.website;\r\n data.consent = true;\r\n data.submittedAt = new Date().toISOString();\r\n\r\n setLoading(true);\r\n try {\r\n if (FORM_ENDPOINT) {\r\n const res = await fetch(FORM_ENDPOINT, {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\", \"Accept\": \"application\/json\" },\r\n body: JSON.stringify(data),\r\n });\r\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\r\n } else {\r\n await new Promise(r => setTimeout(r, 1000)); \/\/ modo demo\r\n console.info(\"[Demo] Datos del formulario:\", data);\r\n }\r\n showSuccess();\r\n } catch (err) {\r\n console.error(err);\r\n alertBox.textContent = \"No hemos podido enviar tu mensaje. Int\u00e9ntalo de nuevo o escr\u00edbenos a hola@defensadigital.es.\";\r\n alertBox.classList.add(\"show\");\r\n } finally {\r\n setLoading(false);\r\n }\r\n });\r\n\r\n function showSuccess() {\r\n form.hidden = true;\r\n success.classList.add(\"show\");\r\n success.focus();\r\n }\r\n\r\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\r\n form.reset();\r\n updateCounter();\r\n form.querySelectorAll(\".invalid\").forEach(f => f.classList.remove(\"invalid\"));\r\n success.classList.remove(\"show\");\r\n form.hidden = false;\r\n form.name.focus();\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-cf32dcc e-flex e-con-boxed e-con e-parent\" data-id=\"cf32dcc\" 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-505489e elementor-widget elementor-widget-html\" data-id=\"505489e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<footer class=\"dd-footer\">\r\n <div class=\"dd-container\">\r\n\r\n \r\n <div class=\"dd-footer-grid\">\r\n\r\n \r\n <div class=\"dd-footer-brand\">\r\n <h2>DEFENSA DIGITAL<\/h2>\r\n <p>\r\n Servicios profesionales de ciberseguridad, auditor\u00edas inform\u00e1ticas,\r\n protecci\u00f3n web y soporte IT para empresas y aut\u00f3nomos.\r\n <\/p>\r\n\r\n <div class=\"dd-badges\">\r\n <span>\u2714 Auditor\u00edas de Seguridad<\/span>\r\n <span>\u2714 Protecci\u00f3n WordPress<\/span>\r\n <span>\u2714 Seguridad Empresarial<\/span>\r\n <span>\u2714 Soporte T\u00e9cnico<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-links\">\r\n <h3>Servicios<\/h3>\r\n <ul>\r\n <li><a href=\"https:\/\/defensadigital.es\/auditorias-de-seguridad\/\">Auditor\u00eda Inform\u00e1tica<\/a><\/li>\r\n <li><a href=\"\/ciberseguridad\/\">Ciberseguridad<\/a><\/li>\r\n <li><a href=\"\/seguridad-wordpress\/\">Seguridad WordPress<\/a><\/li>\r\n <li><a href=\"\/copias-de-seguridad\/\">Backups y Recuperaci\u00f3n<\/a><\/li>\r\n <li><a href=\"\/mantenimiento\/\">Mantenimiento IT<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-links\">\r\n <h3>Empresa<\/h3>\r\n <ul>\r\n <li><a href=\"\/sobre-nosotros\/\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"\/contacto\/\">Contacto<\/a><\/li>\r\n <li><a href=\"\/blog\/\">Blog<\/a><\/li>\r\n <li><a href=\"\/politica-privacidad\/\">Pol\u00edtica de Privacidad<\/a><\/li>\r\n <li><a href=\"\/aviso-legal\/\">Aviso Legal<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-contact\">\r\n <h3>Contacto<\/h3>\r\n\r\n <p>\ud83d\udccd Barcelona, Espa\u00f1a<\/p>\r\n <p>\ud83d\udce7 hola@defensadigital.es<\/p>\r\n <p>\ud83d\udcde +34 648 649 899<\/p>\r\n \ud83d\udcde +34 677 72 49 07<\/p>\r\n\r\n <a href=\"\/contacto\/\" class=\"dd-footer-btn\">\r\n Solicitar Auditor\u00eda Gratuita\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-bottom\">\r\n <p>\r\n \u00a9 2026 Defensa Digital \u00b7 Todos los derechos reservados\r\n <\/p>\r\n\r\n <div class=\"dd-socials\">\r\n <a href=\"#\">LinkedIn<\/a>\r\n <a href=\"#\">Instagram<\/a>\r\n <a href=\"#\">WhatsApp<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n.dd-footer{\r\n background:#0b1220;\r\n color:#ffffff;\r\n padding:70px 20px 25px;\r\n font-family:Arial,sans-serif;\r\n}\r\n\r\n.dd-container{\r\n max-width:1280px;\r\n margin:auto;\r\n}\r\n\r\n.dd-footer-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr 1.2fr;\r\n gap:50px;\r\n margin-bottom:50px;\r\n}\r\n\r\n.dd-footer h2{\r\n font-size:30px;\r\n margin-bottom:20px;\r\n color:#00d4ff;\r\n}\r\n\r\n.dd-footer h3{\r\n font-size:18px;\r\n margin-bottom:18px;\r\n color:#ffffff;\r\n}\r\n\r\n.dd-footer p{\r\n color:#b5c0d0;\r\n line-height:1.7;\r\n margin-bottom:12px;\r\n}\r\n\r\n.dd-footer ul{\r\n list-style:none;\r\n padding:0;\r\n margin:0;\r\n}\r\n\r\n.dd-footer ul li{\r\n margin-bottom:12px;\r\n}\r\n\r\n.dd-footer a{\r\n color:#b5c0d0;\r\n text-decoration:none;\r\n transition:0.3s;\r\n}\r\n\r\n.dd-footer a:hover{\r\n color:#00d4ff;\r\n}\r\n\r\n.dd-badges{\r\n margin-top:25px;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n}\r\n\r\n.dd-badges span{\r\n background:#111b2e;\r\n border:1px solid #1f2f4d;\r\n padding:8px 12px;\r\n border-radius:30px;\r\n font-size:13px;\r\n}\r\n\r\n.dd-footer-btn{\r\n display:inline-block;\r\n margin-top:15px;\r\n background:#00d4ff;\r\n color:#000 !important;\r\n padding:14px 24px;\r\n border-radius:8px;\r\n font-weight:bold;\r\n}\r\n\r\n.dd-footer-btn:hover{\r\n background:#ffffff;\r\n}\r\n\r\n.dd-footer-bottom{\r\n border-top:1px solid #1c2740;\r\n padding-top:25px;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n flex-wrap:wrap;\r\n gap:20px;\r\n}\r\n\r\n.dd-socials{\r\n display:flex;\r\n gap:18px;\r\n}\r\n\r\n.dd-socials a{\r\n font-weight:bold;\r\n}\r\n\r\n@media(max-width:900px){\r\n\r\n.dd-footer-grid{\r\n grid-template-columns:1fr;\r\n}\r\n\r\n.dd-footer-bottom{\r\n flex-direction:column;\r\n text-align:center;\r\n}\r\n\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> Contacto Hablemos de c\u00f3mo podemos ayudarte Cu\u00e9ntanos qu\u00e9 necesitas y nuestro equipo te responder\u00e1 en menos de 24 horas laborables. Emailhola@defensadigital.es Soporte t\u00e9cnicoClientes: accede desde tu panel del \u00c1rea Privada OficinaBarcelona, Espa\u00f1a Nombre completo* Introduce tu nombre. Email de trabajo* Introduce un email v\u00e1lido. Empresa (opcional) Tama\u00f1o del equipo Selecciona\u20261\u20131011\u20135051\u2013200201\u20131000+1000 \u00bfEn qu\u00e9 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"wpai_generated_summary":"","footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":28,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":57211,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69\/revisions\/57211"}],"wp:attachment":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nContacto<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n \/* ============ TOKENS (cambia aqu\u00ed los colores de tu marca) ============ *\/\r\n :root {\r\n --brand: #4f46e5;\r\n --brand-hover: #4338ca;\r\n --brand-soft: #eef2ff;\r\n --bg: #f7f8fa;\r\n --surface: #ffffff;\r\n --text: #0f172a;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --border-strong: #cbd5e1;\r\n --error: #dc2626;\r\n --error-soft: #fef2f2;\r\n --success: #059669;\r\n --radius: 10px;\r\n --shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -8px rgba(15,23,42,.10);\r\n }\r\n @media (prefers-color-scheme: dark) {\r\n :root {\r\n --brand: #818cf8;\r\n --brand-hover: #a5b4fc;\r\n --brand-soft: rgba(129,140,248,.12);\r\n --bg: #0b0f19;\r\n --surface: #111827;\r\n --text: #f1f5f9;\r\n --muted: #94a3b8;\r\n --border: #1f2937;\r\n --border-strong: #334155;\r\n --error: #f87171;\r\n --error-soft: rgba(248,113,113,.08);\r\n --success: #34d399;\r\n --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -8px rgba(0,0,0,.5);\r\n }\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; }\r\n body {\r\n margin: 0;\r\n font-family: \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.5;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* ============ LAYOUT ============ *\/\r\n .contact {\r\n max-width: 1080px;\r\n margin: 0 auto;\r\n padding: 72px 20px;\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr;\r\n gap: 64px;\r\n align-items: start;\r\n }\r\n @media (max-width: 860px) {\r\n .contact { grid-template-columns: 1fr; gap: 40px; padding: 48px 16px; }\r\n }\r\n\r\n \/* ============ COLUMNA INFO ============ *\/\r\n .eyebrow {\r\n display: inline-block;\r\n font-size: 13px; font-weight: 600;\r\n color: var(--brand);\r\n background: var(--brand-soft);\r\n padding: 4px 10px; border-radius: 999px;\r\n margin-bottom: 16px;\r\n }\r\n .info h1 {\r\n font-size: clamp(30px, 4vw, 40px);\r\n line-height: 1.15; letter-spacing: -0.02em;\r\n margin: 0 0 16px; font-weight: 700;\r\n }\r\n .info > p { color: var(--muted); font-size: 17px; margin: 0 0 40px; max-width: 42ch; }\r\n\r\n .channels { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }\r\n .channels li { display: flex; gap: 14px; }\r\n .icon {\r\n flex: none; width: 40px; height: 40px; border-radius: 10px;\r\n display: grid; place-items: center;\r\n background: var(--surface); border: 1px solid var(--border);\r\n color: var(--brand);\r\n }\r\n .icon svg { width: 20px; height: 20px; }\r\n .channels strong { display: block; font-weight: 600; font-size: 15px; }\r\n .channels span, .channels a { color: var(--muted); font-size: 14px; }\r\n .channels a { color: var(--brand); text-decoration: none; }\r\n .channels a:hover { text-decoration: underline; }\r\n\r\n \/* ============ TARJETA FORM ============ *\/\r\n .card {\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n box-shadow: var(--shadow);\r\n padding: 36px;\r\n }\r\n @media (max-width: 520px) { .card { padding: 24px 20px; } }\r\n\r\n .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n @media (max-width: 520px) { .row { grid-template-columns: 1fr; } }\r\n\r\n .field { margin-bottom: 20px; }\r\n label, legend {\r\n display: block; font-size: 14px; font-weight: 500;\r\n margin-bottom: 6px; color: var(--text);\r\n }\r\n .req { color: var(--error); margin-left: 2px; }\r\n .optional { color: var(--muted); font-weight: 400; font-size: 13px; }\r\n\r\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], select, textarea {\r\n width: 100%;\r\n font: inherit; font-size: 15px;\r\n color: var(--text);\r\n background: var(--surface);\r\n border: 1px solid var(--border-strong);\r\n border-radius: var(--radius);\r\n padding: 11px 14px;\r\n transition: border-color .15s, box-shadow .15s;\r\n appearance: none;\r\n }\r\n input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }\r\n input:hover, select:hover, textarea:hover { border-color: var(--muted); }\r\n input:focus, select:focus, textarea:focus {\r\n outline: none;\r\n border-color: var(--brand);\r\n box-shadow: 0 0 0 4px var(--brand-soft);\r\n }\r\n select {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat; background-position: right 14px center;\r\n padding-right: 38px; cursor: pointer;\r\n }\r\n textarea { min-height: 140px; resize: vertical; }\r\n\r\n \/* Estado de error *\/\r\n .field.invalid input, .field.invalid select, .field.invalid textarea {\r\n border-color: var(--error);\r\n background: var(--error-soft);\r\n }\r\n .field.invalid input:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 4px var(--error-soft); }\r\n .error-msg {\r\n display: none; align-items: center; gap: 6px;\r\n color: var(--error); font-size: 13px; margin-top: 6px;\r\n }\r\n .field.invalid .error-msg { display: flex; }\r\n\r\n \/* Chips de motivo *\/\r\n fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }\r\n .chips { display: flex; flex-wrap: wrap; gap: 8px; }\r\n .chip input { position: absolute; opacity: 0; pointer-events: none; }\r\n .chip span {\r\n display: inline-block; cursor: pointer;\r\n font-size: 14px; font-weight: 500;\r\n padding: 8px 14px; border-radius: 999px;\r\n border: 1px solid var(--border-strong);\r\n color: var(--muted);\r\n transition: all .15s;\r\n user-select: none;\r\n }\r\n .chip span:hover { border-color: var(--brand); color: var(--text); }\r\n .chip input:checked + span {\r\n background: var(--brand); border-color: var(--brand); color: #fff;\r\n }\r\n .chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--brand-soft); }\r\n\r\n .counter { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }\r\n .counter.over { color: var(--error); }\r\n\r\n \/* Consentimiento *\/\r\n .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }\r\n .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }\r\n .consent label { font-weight: 400; color: var(--muted); margin: 0; cursor: pointer; }\r\n .consent a { color: var(--brand); }\r\n\r\n \/* Honeypot anti-spam *\/\r\n .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }\r\n\r\n \/* Bot\u00f3n *\/\r\n .submit {\r\n width: 100%; margin-top: 8px;\r\n display: inline-flex; align-items: center; justify-content: center; gap: 10px;\r\n font: inherit; font-size: 15px; font-weight: 600;\r\n color: #fff; background: var(--brand);\r\n border: 0; border-radius: var(--radius);\r\n padding: 13px 20px; cursor: pointer;\r\n transition: background .15s, transform .05s;\r\n }\r\n .submit:hover { background: var(--brand-hover); }\r\n .submit:active { transform: translateY(1px); }\r\n .submit:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }\r\n .submit[disabled] { opacity: .7; cursor: progress; }\r\n .spinner {\r\n width: 16px; height: 16px; border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;\r\n animation: spin .7s linear infinite; display: none;\r\n }\r\n .submit.loading .spinner { display: block; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n .fine { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }\r\n\r\n .alert {\r\n display: none; padding: 12px 14px; border-radius: var(--radius);\r\n background: var(--error-soft); color: var(--error);\r\n font-size: 14px; margin-bottom: 20px;\r\n }\r\n .alert.show { display: block; }\r\n\r\n \/* \u00c9xito *\/\r\n .success { display: none; text-align: center; padding: 40px 8px; }\r\n .success.show { display: block; animation: fade .35s ease; }\r\n .success .check {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n margin: 0 auto 20px; display: grid; place-items: center;\r\n background: color-mix(in srgb, var(--success) 14%, transparent);\r\n color: var(--success);\r\n }\r\n .success h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.01em; }\r\n .success p { margin: 0 auto; color: var(--muted); max-width: 36ch; }\r\n .link-btn {\r\n margin-top: 24px; background: none; border: 0; font: inherit;\r\n color: var(--brand); font-weight: 600; cursor: pointer; font-size: 14px;\r\n }\r\n @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\r\n\r\n @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<main class=\"contact\">\r\n \r\n <section class=\"info\">\r\n <span class=\"eyebrow\">Contacto<\/span>\r\n <h1>Hablemos de c\u00f3mo podemos ayudarte<\/h1>\r\n <p>Cu\u00e9ntanos qu\u00e9 necesitas y nuestro equipo te responder\u00e1 en menos de 24 horas laborables.<\/p>\r\n\r\n <ul class=\"channels\">\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-10 6L2 7\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Email<\/strong><a href=\"mailto:hola@defensadigital.es\">hola@defensadigital.es<\/a><\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Soporte t\u00e9cnico<\/strong><span>Clientes: accede desde tu panel del \u00c1rea Privada <\/span><\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div><strong>Oficina<\/strong><span>Barcelona, Espa\u00f1a<\/span><\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <form id=\"contactForm\" novalidate>\r\n <div class=\"alert\" id=\"formAlert\" role=\"alert\"><\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label for=\"name\">Nombre completo<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" placeholder=\"Ana Garc\u00eda\" required minlength=\"2\" aria-describedby=\"name-err\">\r\n <div class=\"error-msg\" id=\"name-err\">Introduce tu nombre.<\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"email\">Email de trabajo<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"ana@empresa.com\" required aria-describedby=\"email-err\">\r\n <div class=\"error-msg\" id=\"email-err\">Introduce un email v\u00e1lido.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label for=\"company\">Empresa <span class=\"optional\">(opcional)<\/span><\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" autocomplete=\"organization\" placeholder=\"Nombre de la empresa\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"size\">Tama\u00f1o del equipo<\/label>\r\n <select id=\"size\" name=\"size\">\r\n <option value=\"\">Selecciona\u2026<\/option>\r\n <option>1\u201310<\/option>\r\n <option>11\u201350<\/option>\r\n <option>51\u2013200<\/option>\r\n <option>201\u20131000<\/option>\r\n <option>+1000<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <fieldset class=\"field\" id=\"topicField\">\r\n <legend>\u00bfEn qu\u00e9 podemos ayudarte?<span class=\"req\" aria-hidden=\"true\">*<\/span><\/legend>\r\n <div class=\"chips\">\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Ventas \/ Demo\" required><span>Ventas \/ Demo<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Soporte t\u00e9cnico\"><span>Soporte t\u00e9cnico<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Partnerships\"><span>Partnerships<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Prensa\"><span>Prensa<\/span><\/label>\r\n <label class=\"chip\"><input type=\"radio\" name=\"topic\" value=\"Otro\"><span>Otro<\/span><\/label>\r\n <\/div>\r\n <div class=\"error-msg\">Selecciona un motivo.<\/div>\r\n <\/fieldset>\r\n\r\n <div class=\"field\">\r\n <label for=\"message\">Mensaje<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"Cu\u00e9ntanos brevemente tu caso, objetivos o preguntas\u2026\" required minlength=\"20\" maxlength=\"1000\" aria-describedby=\"message-err message-count\"><\/textarea>\r\n <div class=\"counter\" id=\"message-count\" aria-live=\"polite\">0 \/ 1000<\/div>\r\n <div class=\"error-msg\" id=\"message-err\">El mensaje debe tener al menos 20 caracteres.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hp\" aria-hidden=\"true\">\r\n <label for=\"website\">Web<\/label>\r\n <input type=\"text\" id=\"website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"field\" id=\"consentField\">\r\n <div class=\"consent\">\r\n <input type=\"checkbox\" id=\"consent\" name=\"consent\" required>\r\n <label for=\"consent\">Acepto la <a href=\"https:\/\/defensadigital.es\/politica-de-privacidad\/\" target=\"_blank\" rel=\"noopener\">pol\u00edtica de privacidad<\/a> y el tratamiento de mis datos para responder a esta solicitud.<span class=\"req\" aria-hidden=\"true\">*<\/span><\/label>\r\n <\/div>\r\n <div class=\"error-msg\">Debes aceptar la pol\u00edtica de privacidad.<\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"submit\" id=\"submitBtn\">\r\n <span class=\"spinner\" aria-hidden=\"true\"><\/span>\r\n <span class=\"label\">Enviar mensaje<\/span>\r\n <a href=\"mailto:correo@ejemplo.com\">\r\n <\/a>\r\n <\/button>\r\n <p class=\"fine\">Nunca compartiremos tus datos con terceros.<\/p>\r\n <\/form>\r\n\r\n <div class=\"success\" id=\"successState\" role=\"status\" tabindex=\"-1\">\r\n <div class=\"check\" aria-hidden=\"true\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <h2>\u00a1Mensaje enviado!<\/h2>\r\n <p>Gracias por escribirnos. Te responderemos en menos de 24 horas laborables.<\/p>\r\n <button type=\"button\" class=\"link-btn\" id=\"resetBtn\">Enviar otro mensaje<\/button>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n<script>\r\n\/* =====================================================================\r\n CONFIGURACI\u00d3N\r\n Pega aqu\u00ed la URL de tu endpoint (p. ej. Formspree, Getform, Basin,\r\n tu propia API\u2026). Se env\u00eda un POST con JSON.\r\n Si lo dejas vac\u00edo, el formulario simula el env\u00edo (modo demo).\r\n ===================================================================== *\/\r\nconst FORM_ENDPOINT = \"https:\/\/formspree.io\/f\/mgavpppk\";\r\n\r\n(() => {\r\n const form = document.getElementById(\"contactForm\");\r\n const btn = document.getElementById(\"submitBtn\");\r\n const alertBox = document.getElementById(\"formAlert\");\r\n const success = document.getElementById(\"successState\");\r\n const msg = document.getElementById(\"message\");\r\n const counter = document.getElementById(\"message-count\");\r\n const EMAIL_RE = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\r\n\r\n \/\/ Contador de caracteres\r\n const updateCounter = () => {\r\n const n = msg.value.length;\r\n counter.textContent = `${n} \/ ${msg.maxLength}`;\r\n counter.classList.toggle(\"over\", n >= msg.maxLength);\r\n };\r\n msg.addEventListener(\"input\", updateCounter);\r\n\r\n \/\/ Reglas de validaci\u00f3n\r\n const rules = {\r\n name: () => form.name.value.trim().length >= 2,\r\n email: () => EMAIL_RE.test(form.email.value.trim()),\r\n topic: () => !!form.querySelector('input[name=\"topic\"]:checked'),\r\n message: () => form.message.value.trim().length >= 20,\r\n consent: () => form.consent.checked,\r\n };\r\n const fieldOf = (key) =>\r\n key === \"topic\" ? document.getElementById(\"topicField\")\r\n : key === \"consent\" ? document.getElementById(\"consentField\")\r\n : form[key].closest(\".field\");\r\n\r\n const validate = (key) => {\r\n const ok = rules[key]();\r\n const field = fieldOf(key);\r\n field.classList.toggle(\"invalid\", !ok);\r\n field.querySelectorAll(\"input, textarea\").forEach(el => el.setAttribute(\"aria-invalid\", String(!ok)));\r\n return ok;\r\n };\r\n\r\n \/\/ Validaci\u00f3n al salir del campo y correcci\u00f3n en vivo\r\n [\"name\", \"email\", \"message\"].forEach(key => {\r\n form[key].addEventListener(\"blur\", () => { if (form[key].value) validate(key); });\r\n form[key].addEventListener(\"input\", () => { if (fieldOf(key).classList.contains(\"invalid\")) validate(key); });\r\n });\r\n form.querySelectorAll('input[name=\"topic\"]').forEach(r => r.addEventListener(\"change\", () => validate(\"topic\")));\r\n form.consent.addEventListener(\"change\", () => validate(\"consent\"));\r\n\r\n const setLoading = (on) => {\r\n btn.disabled = on;\r\n btn.classList.toggle(\"loading\", on);\r\n btn.querySelector(\".label\").textContent = on ? \"Enviando\u2026\" : \"Enviar mensaje\";\r\n };\r\n\r\n form.addEventListener(\"submit\", async (e) => {\r\n e.preventDefault();\r\n alertBox.classList.remove(\"show\");\r\n\r\n const results = Object.keys(rules).map(k => [k, validate(k)]);\r\n const firstBad = results.find(([, ok]) => !ok);\r\n if (firstBad) {\r\n const el = fieldOf(firstBad[0]).querySelector(\"input, textarea\");\r\n el && el.focus();\r\n return;\r\n }\r\n\r\n \/\/ Honeypot: si est\u00e1 relleno, fingimos \u00e9xito y no enviamos\r\n if (form.website.value) { showSuccess(); return; }\r\n\r\n const data = Object.fromEntries(new FormData(form));\r\n delete data.website;\r\n data.consent = true;\r\n data.submittedAt = new Date().toISOString();\r\n\r\n setLoading(true);\r\n try {\r\n if (FORM_ENDPOINT) {\r\n const res = await fetch(FORM_ENDPOINT, {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\", \"Accept\": \"application\/json\" },\r\n body: JSON.stringify(data),\r\n });\r\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\r\n } else {\r\n await new Promise(r => setTimeout(r, 1000)); \/\/ modo demo\r\n console.info(\"[Demo] Datos del formulario:\", data);\r\n }\r\n showSuccess();\r\n } catch (err) {\r\n console.error(err);\r\n alertBox.textContent = \"No hemos podido enviar tu mensaje. Int\u00e9ntalo de nuevo o escr\u00edbenos a hola@defensadigital.es.\";\r\n alertBox.classList.add(\"show\");\r\n } finally {\r\n setLoading(false);\r\n }\r\n });\r\n\r\n function showSuccess() {\r\n form.hidden = true;\r\n success.classList.add(\"show\");\r\n success.focus();\r\n }\r\n\r\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\r\n form.reset();\r\n updateCounter();\r\n form.querySelectorAll(\".invalid\").forEach(f => f.classList.remove(\"invalid\"));\r\n success.classList.remove(\"show\");\r\n form.hidden = false;\r\n form.name.focus();\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-cf32dcc e-flex e-con-boxed e-con e-parent\" data-id=\"cf32dcc\" 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-505489e elementor-widget elementor-widget-html\" data-id=\"505489e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<footer class=\"dd-footer\">\r\n <div class=\"dd-container\">\r\n\r\n \r\n <div class=\"dd-footer-grid\">\r\n\r\n \r\n <div class=\"dd-footer-brand\">\r\n <h2>DEFENSA DIGITAL<\/h2>\r\n <p>\r\n Servicios profesionales de ciberseguridad, auditor\u00edas inform\u00e1ticas,\r\n protecci\u00f3n web y soporte IT para empresas y aut\u00f3nomos.\r\n <\/p>\r\n\r\n <div class=\"dd-badges\">\r\n <span>\u2714 Auditor\u00edas de Seguridad<\/span>\r\n <span>\u2714 Protecci\u00f3n WordPress<\/span>\r\n <span>\u2714 Seguridad Empresarial<\/span>\r\n <span>\u2714 Soporte T\u00e9cnico<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-links\">\r\n <h3>Servicios<\/h3>\r\n <ul>\r\n <li><a href=\"https:\/\/defensadigital.es\/auditorias-de-seguridad\/\">Auditor\u00eda Inform\u00e1tica<\/a><\/li>\r\n <li><a href=\"\/ciberseguridad\/\">Ciberseguridad<\/a><\/li>\r\n <li><a href=\"\/seguridad-wordpress\/\">Seguridad WordPress<\/a><\/li>\r\n <li><a href=\"\/copias-de-seguridad\/\">Backups y Recuperaci\u00f3n<\/a><\/li>\r\n <li><a href=\"\/mantenimiento\/\">Mantenimiento IT<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-links\">\r\n <h3>Empresa<\/h3>\r\n <ul>\r\n <li><a href=\"\/sobre-nosotros\/\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"\/contacto\/\">Contacto<\/a><\/li>\r\n <li><a href=\"\/blog\/\">Blog<\/a><\/li>\r\n <li><a href=\"\/politica-privacidad\/\">Pol\u00edtica de Privacidad<\/a><\/li>\r\n <li><a href=\"\/aviso-legal\/\">Aviso Legal<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-contact\">\r\n <h3>Contacto<\/h3>\r\n\r\n <p>\ud83d\udccd Barcelona, Espa\u00f1a<\/p>\r\n <p>\ud83d\udce7 hola@defensadigital.es<\/p>\r\n <p>\ud83d\udcde +34 648 649 899<\/p>\r\n \ud83d\udcde +34 677 72 49 07<\/p>\r\n\r\n <a href=\"\/contacto\/\" class=\"dd-footer-btn\">\r\n Solicitar Auditor\u00eda Gratuita\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"dd-footer-bottom\">\r\n <p>\r\n \u00a9 2026 Defensa Digital \u00b7 Todos los derechos reservados\r\n <\/p>\r\n\r\n <div class=\"dd-socials\">\r\n <a href=\"#\">LinkedIn<\/a>\r\n <a href=\"#\">Instagram<\/a>\r\n <a href=\"#\">WhatsApp<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n.dd-footer{\r\n background:#0b1220;\r\n color:#ffffff;\r\n padding:70px 20px 25px;\r\n font-family:Arial,sans-serif;\r\n}\r\n\r\n.dd-container{\r\n max-width:1280px;\r\n margin:auto;\r\n}\r\n\r\n.dd-footer-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr 1.2fr;\r\n gap:50px;\r\n margin-bottom:50px;\r\n}\r\n\r\n.dd-footer h2{\r\n font-size:30px;\r\n margin-bottom:20px;\r\n color:#00d4ff;\r\n}\r\n\r\n.dd-footer h3{\r\n font-size:18px;\r\n margin-bottom:18px;\r\n color:#ffffff;\r\n}\r\n\r\n.dd-footer p{\r\n color:#b5c0d0;\r\n line-height:1.7;\r\n margin-bottom:12px;\r\n}\r\n\r\n.dd-footer ul{\r\n list-style:none;\r\n padding:0;\r\n margin:0;\r\n}\r\n\r\n.dd-footer ul li{\r\n margin-bottom:12px;\r\n}\r\n\r\n.dd-footer a{\r\n color:#b5c0d0;\r\n text-decoration:none;\r\n transition:0.3s;\r\n}\r\n\r\n.dd-footer a:hover{\r\n color:#00d4ff;\r\n}\r\n\r\n.dd-badges{\r\n margin-top:25px;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n}\r\n\r\n.dd-badges span{\r\n background:#111b2e;\r\n border:1px solid #1f2f4d;\r\n padding:8px 12px;\r\n border-radius:30px;\r\n font-size:13px;\r\n}\r\n\r\n.dd-footer-btn{\r\n display:inline-block;\r\n margin-top:15px;\r\n background:#00d4ff;\r\n color:#000 !important;\r\n padding:14px 24px;\r\n border-radius:8px;\r\n font-weight:bold;\r\n}\r\n\r\n.dd-footer-btn:hover{\r\n background:#ffffff;\r\n}\r\n\r\n.dd-footer-bottom{\r\n border-top:1px solid #1c2740;\r\n padding-top:25px;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n flex-wrap:wrap;\r\n gap:20px;\r\n}\r\n\r\n.dd-socials{\r\n display:flex;\r\n gap:18px;\r\n}\r\n\r\n.dd-socials a{\r\n font-weight:bold;\r\n}\r\n\r\n@media(max-width:900px){\r\n\r\n.dd-footer-grid{\r\n grid-template-columns:1fr;\r\n}\r\n\r\n.dd-footer-bottom{\r\n flex-direction:column;\r\n text-align:center;\r\n}\r\n\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> Contacto Hablemos de c\u00f3mo podemos ayudarte Cu\u00e9ntanos qu\u00e9 necesitas y nuestro equipo te responder\u00e1 en menos de 24 horas laborables. Emailhola@defensadigital.es Soporte t\u00e9cnicoClientes: accede desde tu panel del \u00c1rea Privada OficinaBarcelona, Espa\u00f1a Nombre completo* Introduce tu nombre. Email de trabajo* Introduce un email v\u00e1lido. Empresa (opcional) Tama\u00f1o del equipo Selecciona\u20261\u20131011\u20135051\u2013200201\u20131000+1000 \u00bfEn qu\u00e9 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"wpai_generated_summary":"","footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":28,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":57211,"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/pages\/69\/revisions\/57211"}],"wp:attachment":[{"href":"https:\/\/defensadigital.es\/ca\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}