diff --git a/mvp/b2b/landing_reformix.html b/mvp/b2b/landing_reformix.html
index 5302911..a0ae5bc 100644
--- a/mvp/b2b/landing_reformix.html
+++ b/mvp/b2b/landing_reformix.html
@@ -175,7 +175,7 @@ document.addEventListener('DOMContentLoaded', async function() {
   </script>
 
   <script type="__bundler/template">
-"<!DOCTYPE html>\n<html lang=\"es\"><head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Reformix — Para reformistas</title>\n<link rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\">\n<style>/* Reformix — Design Tokens\n * Generado a partir de design-system.md + design-tokens.json\n * Stack: Tailwind + shadcn/ui (compatibilidad con CSS custom properties)\n * Versión: 1.0 (2026-05-24)\n */\n\n/* latin-ext */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: italic;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"60f0ecce-40bf-4952-a5d0-c64eb7d90838\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: italic;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"3564a927-e275-4816-b6c1-cc99fc1dcdab\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"15d36112-e39a-4059-ae12-06c58a5747ac\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"421ba28b-7abe-4b86-a87c-fcd3e94378f7\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"ca40d6e0-4a50-4481-8e30-74c159ef9cee\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"556fa156-4d6a-481e-a43b-d7ab5fb934a9\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"af8b43b5-1741-407a-be2e-9881a5996d70\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"12581ec4-115f-4ba1-8b57-50addc6b546c\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"ca40d6e0-4a50-4481-8e30-74c159ef9cee\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"556fa156-4d6a-481e-a43b-d7ab5fb934a9\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"af8b43b5-1741-407a-be2e-9881a5996d70\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"12581ec4-115f-4ba1-8b57-50addc6b546c\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n\n:root {\n  /* ============================================\n   * COLOR — Brand (Architectural Warmth)\n   * ============================================ */\n\n  /* Primary — Verde oliva */\n  --color-primary-50:  #F4F8F5;\n  --color-primary-100: #E8F0EB;\n  --color-primary-300: #A8C8B5;\n  --color-primary-500: #4D8A6D;\n  --color-primary-700: #2F5C46;\n  --color-primary-900: #1F3A2E;\n\n  /* Accent — Terracota */\n  --color-accent-100: #FAEAE0;\n  --color-accent-400: #E08A5F;\n  --color-accent-600: #C25E33;\n  --color-accent-900: #7A3517;\n\n  /* ============================================\n   * COLOR — Neutral (Stone — warm grays con tinte oliva)\n   * ============================================ */\n\n  --color-white:       #FFFFFF;\n  --color-neutral-50:  #F7F8F7;\n  --color-neutral-100: #EDEFED;\n  --color-neutral-200: #DDE0DD;\n  --color-neutral-300: #C4C9C4;\n  --color-neutral-400: #9DA29D;\n  --color-neutral-500: #7A807A;\n  --color-neutral-700: #4A4E4A;\n  --color-neutral-900: #262826;\n  --color-neutral-950: #161816;\n\n  /* ============================================\n   * COLOR — Semantic\n   * ============================================ */\n\n  --color-success-100: #E0F0E6;\n  --color-success-500: #4DAA73;\n  --color-success-700: #2D7A4F;\n\n  --color-warning-100: #FAEFD3;\n  --color-warning-500: #DA9A2C;\n  --color-warning-700: #9A6B0E;\n\n  --color-danger-100: #FAE0DA;\n  --color-danger-500: #D85940;\n  --color-danger-700: #A8331F;\n\n  --color-info-100: #DDEDF5;\n  --color-info-500: #3D8AAA;\n  --color-info-700: #1F5C7A;\n\n  /* ============================================\n   * COLOR — Surface aliases (uso semántico en componentes)\n   * ============================================ */\n\n  --surface-background:       var(--color-white);\n  --surface-background-muted: var(--color-neutral-50);\n  --surface-background-emphasis: var(--color-primary-50);\n  --surface-foreground:       var(--color-neutral-950);\n  --surface-foreground-muted: var(--color-neutral-500);\n  --surface-border:           var(--color-neutral-200);\n  --surface-border-strong:    var(--color-neutral-300);\n\n  /* ============================================\n   * TYPOGRAPHY\n   * ============================================ */\n\n  --font-display: 'Instrument Serif', Georgia, serif;\n  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;\n  --font-mono:    'JetBrains Mono', ui-monospace, monospace;\n\n  --font-weight-regular:  400;\n  --font-weight-medium:   500;\n  --font-weight-semibold: 600;\n  --font-weight-bold:     700;\n\n  --text-xs:   0.75rem;\n  --text-sm:   0.875rem;\n  --text-base: 1rem;\n  --text-lg:   1.125rem;\n  --text-xl:   1.25rem;\n  --text-2xl:  1.5rem;\n  --text-3xl:  1.875rem;\n  --text-4xl:  2.25rem;\n  --text-5xl:  3rem;\n  --text-6xl:  3.75rem;\n  --text-7xl:  4.5rem;\n\n  --leading-tight:    1.1;\n  --leading-snug:     1.3;\n  --leading-normal:   1.5;\n  --leading-relaxed:  1.6;\n\n  /* ============================================\n   * SPACING (base 4px, coherente con Tailwind)\n   * ============================================ */\n\n  --space-1:  0.25rem;\n  --space-2:  0.5rem;\n  --space-3:  0.75rem;\n  --space-4:  1rem;\n  --space-6:  1.5rem;\n  --space-8:  2rem;\n  --space-12: 3rem;\n  --space-16: 4rem;\n  --space-24: 6rem;\n  --space-32: 8rem;\n\n  /* ============================================\n   * CONTAINER WIDTHS\n   * ============================================ */\n\n  --container-narrow:  720px;\n  --container-default: 1200px;\n  --container-wide:    1440px;\n\n  --gutter-mobile:  24px;\n  --gutter-desktop: 48px;\n\n  /* ============================================\n   * BORDER RADIUS\n   * ============================================ */\n\n  --radius-sm:   4px;\n  --radius-md:   6px;\n  --radius-lg:   10px;\n  --radius-xl:   14px;\n  --radius-2xl:  20px;\n  --radius-full: 9999px;\n\n  /* ============================================\n   * SHADOWS (warm, base neutral-950 — no negro puro)\n   * ============================================ */\n\n  --shadow-xs:   0 1px 2px rgba(22, 24, 22, 0.05);\n  --shadow-sm:   0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04);\n  --shadow-md:   0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04);\n  --shadow-lg:   0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05);\n  --shadow-xl:   0 20px 25px rgba(22, 24, 22, 0.1),  0 10px 10px rgba(22, 24, 22, 0.04);\n  --shadow-glow: 0 0 0 4px rgba(47, 92, 70, 0.15);\n\n  /* ============================================\n   * MOTION\n   * ============================================ */\n\n  --duration-fast: 150ms;\n  --duration-base: 250ms;\n  --duration-slow: 400ms;\n\n  --easing-out:    cubic-bezier(0.16, 1, 0.3, 1);\n  --easing-in:     cubic-bezier(0.7, 0, 0.84, 0);\n  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n\n  /* ============================================\n   * Z-INDEX scale (orden visual)\n   * ============================================ */\n\n  --z-dropdown: 50;\n  --z-sticky:   100;\n  --z-overlay:  200;\n  --z-modal:    300;\n  --z-popover:  400;\n  --z-toast:    500;\n}\n\n/* ============================================\n * Base styles\n * ============================================ */\n\nhtml {\n  font-family: var(--font-sans);\n  font-size: 16px;\n  color: var(--surface-foreground);\n  background: var(--surface-background);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n  line-height: var(--leading-relaxed);\n}\n\nh1, h2 {\n  font-family: var(--font-display);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--leading-tight);\n  color: var(--color-neutral-950);\n}\n\nh3, h4, h5, h6 {\n  font-family: var(--font-sans);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--leading-snug);\n  color: var(--color-neutral-900);\n}\n\n/* ============================================\n * Reduced motion\n * ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n</style>\n\n<style>\n  /* ============================================\n   * Reset / base\n   * ============================================ */\n  *, *::before, *::after { box-sizing: border-box; }\n  body {\n    margin: 0;\n    background: var(--surface-background);\n    color: var(--color-neutral-700);\n    font-size: var(--text-base);\n  }\n  a { color: inherit; text-decoration: none; }\n  img, svg { display: block; max-width: 100%; }\n  button { font-family: inherit; cursor: pointer; border: 0; background: none; }\n\n  /* Container */\n  .container {\n    width: 100%;\n    max-width: var(--container-default);\n    margin: 0 auto;\n    padding: 0 var(--gutter-mobile);\n  }\n  @media (min-width: 1024px) {\n    .container { padding: 0 var(--gutter-desktop); }\n  }\n\n  /* ============================================\n   * Buttons\n   * ============================================ */\n  .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-2);\n    font-family: var(--font-sans);\n    font-weight: var(--font-weight-semibold);\n    border-radius: var(--radius-lg);\n    transition: background var(--duration-fast) var(--easing-out),\n                box-shadow var(--duration-fast) var(--easing-out),\n                transform var(--duration-fast) var(--easing-out);\n    white-space: nowrap;\n  }\n  .btn:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }\n  .btn-md { height: 44px; padding: 0 var(--space-4); font-size: var(--text-base); }\n  .btn-lg { height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); }\n  .btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }\n  .btn-primary { background: var(--color-primary-700); color: var(--color-white); }\n  .btn-primary:hover { background: var(--color-primary-900); }\n  .btn-primary:active { transform: scale(0.97); }\n  .btn-secondary {\n    background: var(--color-white);\n    color: var(--color-primary-700);\n    box-shadow: inset 0 0 0 1px var(--color-primary-700);\n  }\n  .btn-secondary:hover { background: var(--color-primary-50); }\n  .btn-ghost { color: var(--color-neutral-700); background: transparent; }\n  .btn-ghost:hover { background: var(--color-neutral-100); }\n\n  /* ============================================\n   * Topbar\n   * ============================================ */\n  .topbar {\n    position: sticky; top: 0; z-index: var(--z-sticky);\n    background: rgba(255,255,255,0.85);\n    backdrop-filter: saturate(180%) blur(8px);\n    -webkit-backdrop-filter: saturate(180%) blur(8px);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  .topbar-inner {\n    display: flex; align-items: center; justify-content: space-between;\n    height: 68px; gap: var(--space-6);\n  }\n  .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-neutral-950); font-size: var(--text-lg); letter-spacing: -0.01em; }\n  .brand-mark {\n    width: 28px; height: 28px; border-radius: var(--radius-md);\n    background: var(--color-primary-700);\n    display: grid; place-items: center; color: var(--color-white);\n    font-family: var(--font-display); font-size: 18px; line-height: 1;\n  }\n  .nav { display: none; gap: var(--space-8); }\n  .nav a {\n    font-size: var(--text-sm); font-weight: var(--font-weight-medium);\n    color: var(--color-neutral-700);\n    transition: color var(--duration-fast) var(--easing-out);\n  }\n  .nav a:hover { color: var(--color-neutral-950); }\n  .topbar-actions { display: flex; align-items: center; gap: var(--space-2); }\n  @media (min-width: 1024px) { .nav { display: flex; } }\n\n  /* ============================================\n   * Hero\n   * ============================================ */\n  .hero { padding: var(--space-16) 0 var(--space-12); }\n  @media (min-width: 1024px) { .hero { padding: var(--space-24) 0 var(--space-16); } }\n\n  .eyebrow {\n    display: inline-flex; align-items: center; gap: var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;\n    color: var(--color-primary-700);\n    background: var(--color-primary-50);\n    padding: var(--space-2) var(--space-3);\n    border-radius: var(--radius-full);\n    border: 1px solid var(--color-primary-100);\n  }\n  .eyebrow .dot {\n    width: 6px; height: 6px; border-radius: 50%;\n    background: var(--color-primary-500);\n    box-shadow: 0 0 0 4px rgba(77, 138, 109, 0.18);\n  }\n\n  .hero-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-12);\n    align-items: center;\n  }\n  @media (min-width: 1024px) {\n    .hero-grid {\n      grid-template-columns: 1.05fr 1fr;\n      gap: var(--space-16);\n    }\n  }\n\n  h1.hero-title {\n    font-family: var(--font-display);\n    font-weight: var(--font-weight-regular);\n    font-size: clamp(2.5rem, 6vw, 4.5rem);\n    line-height: var(--leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--color-neutral-950);\n    margin: var(--space-6) 0 var(--space-6);\n  }\n  .hero-title em {\n    font-style: italic;\n    color: var(--color-primary-700);\n  }\n  .hero-sub {\n    font-size: var(--text-xl);\n    line-height: var(--leading-relaxed);\n    color: var(--color-neutral-700);\n    max-width: 540px;\n    margin: 0 0 var(--space-8);\n  }\n  .hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }\n  .hero-meta {\n    margin-top: var(--space-6);\n    display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);\n    color: var(--color-neutral-500);\n    font-size: var(--text-sm);\n  }\n  .hero-meta .check { color: var(--color-primary-500); }\n  .hero-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }\n\n  /* Hero visual — mock dashboard */\n  .hero-visual {\n    position: relative;\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    overflow: hidden;\n  }\n  .hero-visual::before {\n    /* warm tinted bg */\n    content: \"\";\n    position: absolute; inset: -40% -10% auto auto;\n    width: 70%; height: 70%;\n    background: radial-gradient(closest-side, var(--color-primary-100), transparent 70%);\n    pointer-events: none;\n  }\n  .mock-bar {\n    display: flex; align-items: center; gap: var(--space-2);\n    padding: var(--space-3) var(--space-4);\n    border-bottom: 1px solid var(--surface-border);\n    background: var(--color-neutral-50);\n  }\n  .mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-300); }\n  .mock-url {\n    flex: 1; text-align: center;\n    font-family: var(--font-mono); font-size: var(--text-xs);\n    color: var(--color-neutral-500);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-md);\n    padding: var(--space-1) var(--space-3);\n    margin: 0 var(--space-2);\n  }\n\n  .mock-body { padding: var(--space-6); display: grid; gap: var(--space-4); position: relative; }\n\n  .lead-card {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--space-4);\n    align-items: center;\n    padding: var(--space-4);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    background: var(--color-white);\n    transition: box-shadow var(--duration-base) var(--easing-out), transform var(--duration-base) var(--easing-out);\n  }\n  .lead-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }\n  .lead-avatar {\n    width: 44px; height: 44px; border-radius: var(--radius-full);\n    background: var(--color-primary-100);\n    color: var(--color-primary-900);\n    display: grid; place-items: center;\n    font-weight: var(--font-weight-semibold);\n    font-size: var(--text-sm);\n  }\n  .lead-name { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .lead-meta { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); margin-top: 2px; }\n  .lead-amount {\n    font-family: var(--font-display);\n    font-size: var(--text-2xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n  }\n  .lead-amount span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral-500); display:block; margin-top: 4px; }\n\n  .badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    padding: 2px 10px; border-radius: var(--radius-full);\n  }\n  .badge-primary { background: var(--color-primary-100); color: var(--color-primary-900); }\n  .badge-info { background: var(--color-info-100); color: var(--color-info-700); }\n  .badge-warning { background: var(--color-warning-100); color: var(--color-warning-700); }\n  .badge-success { background: var(--color-success-100); color: var(--color-success-700); }\n  .badge-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }\n  .badge-accent { background: var(--color-accent-100); color: var(--color-accent-900); }\n  .badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s var(--easing-in-out) infinite; }\n  @keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n\n  /* Floating chip on hero visual */\n  .float-chip {\n    position: absolute;\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    padding: var(--space-3) var(--space-4);\n    display: flex; align-items: center; gap: var(--space-3);\n    font-size: var(--text-sm);\n  }\n  .float-chip-1 {\n    left: -16px; bottom: 64px;\n  }\n  .float-chip-2 {\n    right: -16px; top: 90px;\n  }\n  .float-chip .icon {\n    width: 32px; height: 32px; border-radius: var(--radius-md);\n    background: var(--color-accent-100); color: var(--color-accent-900);\n    display: grid; place-items: center;\n  }\n  .float-chip .icon.green { background: var(--color-primary-100); color: var(--color-primary-900); }\n  .float-chip strong { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); display:block; font-size: var(--text-sm); }\n  .float-chip small { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); }\n  @media (max-width: 768px) { .float-chip { display: none; } }\n\n  /* ============================================\n   * Logo strip\n   * ============================================ */\n  .logos {\n    padding: var(--space-8) 0;\n    border-top: 1px solid var(--surface-border);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  .logos-inner {\n    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n    gap: var(--space-12) var(--space-16);\n    color: var(--color-neutral-400);\n  }\n  .logos p {\n    width: 100%;\n    text-align: center;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--color-neutral-500);\n    margin: 0 0 var(--space-2);\n  }\n  .logo-item {\n    font-family: var(--font-display);\n    font-size: var(--text-xl);\n    color: var(--color-neutral-400);\n    letter-spacing: 0.02em;\n    font-style: italic;\n  }\n  .logo-item.sans { font-family: var(--font-sans); font-style: normal; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }\n  .logo-item.mono { font-family: var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-base); }\n\n  /* ============================================\n   * Section header\n   * ============================================ */\n  section.section { padding: var(--space-16) 0; }\n  @media (min-width: 1024px) { section.section { padding: var(--space-24) 0; } }\n  .section-muted { background: var(--color-neutral-50); }\n  .section-emphasis { background: var(--color-primary-50); }\n\n  .section-head { max-width: 760px; margin: 0 0 var(--space-12); }\n  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }\n  .section-kicker {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;\n    color: var(--color-primary-700);\n    margin: 0 0 var(--space-4);\n  }\n  h2.section-title {\n    font-family: var(--font-display);\n    font-weight: var(--font-weight-regular);\n    font-size: clamp(2rem, 4.4vw, 3rem);\n    line-height: var(--leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-4);\n  }\n  .section-title em { font-style: italic; color: var(--color-primary-700); }\n  .section-lede {\n    font-size: var(--text-lg);\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * Problem section — broken cards\n   * ============================================ */\n  .broken-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-4);\n  }\n  @media (min-width: 768px) { .broken-grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 1024px) { .broken-grid { grid-template-columns: repeat(3, 1fr); } }\n\n  .broken-card {\n    padding: var(--space-8);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    transition: box-shadow var(--duration-base) var(--easing-out);\n  }\n  .broken-card:hover { box-shadow: var(--shadow-md); }\n  .broken-card .num {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--color-accent-600);\n    letter-spacing: 0.1em;\n  }\n  .broken-card h3 {\n    font-size: var(--text-xl);\n    color: var(--color-neutral-950);\n    margin: var(--space-3) 0 var(--space-3);\n    line-height: var(--leading-snug);\n  }\n  .broken-card p {\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * How it works\n   * ============================================ */\n  .steps {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-4);\n  }\n  @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }\n\n  .step {\n    padding: var(--space-6);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    position: relative;\n  }\n  .step-num {\n    width: 36px; height: 36px;\n    border-radius: var(--radius-full);\n    background: var(--color-primary-700);\n    color: var(--color-white);\n    display: grid; place-items: center;\n    font-family: var(--font-display);\n    font-size: var(--text-lg);\n    line-height: 1;\n    margin-bottom: var(--space-4);\n  }\n  .step h4 {\n    font-size: var(--text-lg);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-2);\n  }\n  .step p {\n    color: var(--color-neutral-700);\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n  .step .tag {\n    margin-top: var(--space-4);\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--color-neutral-500);\n  }\n\n  /* ============================================\n   * Demo widget block\n   * ============================================ */\n  .demo-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-12);\n    align-items: center;\n  }\n  @media (min-width: 1024px) {\n    .demo-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); }\n  }\n  .demo-bullets { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-4); }\n  .demo-bullets li {\n    display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start;\n    font-size: var(--text-base); color: var(--color-neutral-700); line-height: var(--leading-relaxed);\n  }\n  .demo-bullets .checkmark {\n    width: 24px; height: 24px; border-radius: var(--radius-full);\n    background: var(--color-primary-100);\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    margin-top: 2px;\n  }\n  .demo-bullets strong { color: var(--color-neutral-950); display: block; font-weight: var(--font-weight-semibold); margin-bottom: 2px; }\n\n  /* Phone mock */\n  .phone {\n    background: var(--color-neutral-950);\n    border-radius: 40px;\n    padding: 12px;\n    box-shadow: var(--shadow-xl);\n    max-width: 380px;\n    margin: 0 auto;\n  }\n  .phone-screen {\n    background: var(--color-neutral-50);\n    border-radius: 28px;\n    overflow: hidden;\n    aspect-ratio: 9 / 18;\n    display: flex; flex-direction: column;\n  }\n  .phone-status {\n    padding: 18px var(--space-6) var(--space-3);\n    display: flex; justify-content: space-between; align-items: center;\n    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    color: var(--color-neutral-950);\n  }\n  .wa-header {\n    background: var(--color-primary-900); color: var(--color-primary-100);\n    padding: var(--space-3) var(--space-4);\n    display: flex; align-items: center; gap: var(--space-3);\n  }\n  .wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-300); color: var(--color-primary-900); display:grid; place-items:center; font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .wa-name { color: var(--color-white); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }\n  .wa-sub { color: var(--color-primary-300); font-size: 11px; }\n  .wa-body { background: #ECE5DD; flex: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }\n  .bubble {\n    max-width: 85%;\n    padding: var(--space-3) var(--space-4);\n    border-radius: 14px;\n    font-size: var(--text-sm);\n    line-height: var(--leading-snug);\n    box-shadow: 0 1px 1px rgba(0,0,0,0.08);\n  }\n  .bubble.in { background: var(--color-white); color: var(--color-neutral-900); align-self: flex-start; border-top-left-radius: 4px; }\n  .bubble.out { background: #DCF8C6; color: var(--color-neutral-900); align-self: flex-end; border-top-right-radius: 4px; }\n  .bubble small { color: var(--color-neutral-500); font-size: 10px; display: block; margin-top: 4px; }\n  .bubble .render-placeholder {\n    margin-top: var(--space-2);\n    border-radius: 8px;\n    overflow: hidden;\n    background: repeating-linear-gradient(45deg, var(--color-primary-100), var(--color-primary-100) 8px, var(--color-primary-50) 8px, var(--color-primary-50) 16px);\n    aspect-ratio: 4/3;\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    font-family: var(--font-mono); font-size: 10px;\n    letter-spacing: 0.08em;\n  }\n\n  /* ============================================\n   * Features grid\n   * ============================================ */\n  .features-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-4);\n  }\n  @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }\n\n  .feature {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n  }\n  .feature .ico {\n    width: 44px; height: 44px;\n    border-radius: var(--radius-lg);\n    background: var(--color-primary-100);\n    color: var(--color-primary-700);\n    display: grid; place-items: center;\n    margin-bottom: var(--space-4);\n  }\n  .feature.alt .ico { background: var(--color-accent-100); color: var(--color-accent-900); }\n  .feature h3 {\n    font-size: var(--text-xl);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-2);\n  }\n  .feature p {\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * Honesty banner\n   * ============================================ */\n  .honesty {\n    border-left: 4px solid var(--color-warning-500);\n    background: var(--color-warning-100);\n    color: var(--color-warning-700);\n    padding: var(--space-6) var(--space-8);\n    border-radius: var(--radius-lg);\n    display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start;\n  }\n  .honesty strong { color: var(--color-warning-700); display: block; margin-bottom: 4px; font-size: var(--text-base); }\n  .honesty p { margin: 0; color: var(--color-neutral-700); font-size: var(--text-base); line-height: var(--leading-relaxed); }\n  .honesty .ico-warn {\n    width: 32px; height: 32px; border-radius: var(--radius-full);\n    background: var(--color-white); display:grid; place-items:center;\n    color: var(--color-warning-500);\n  }\n\n  /* ============================================\n   * Pricing\n   * ============================================ */\n  .pricing-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-6);\n    align-items: stretch;\n  }\n  @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }\n\n  .price-card {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n    display: flex; flex-direction: column;\n    position: relative;\n  }\n  .price-card.featured {\n    border: 2px solid var(--color-primary-700);\n    box-shadow: var(--shadow-lg);\n  }\n  .price-ribbon {\n    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);\n    background: var(--color-primary-700); color: var(--color-white);\n    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    padding: 4px 12px; border-radius: var(--radius-full);\n    letter-spacing: 0.04em;\n  }\n  .price-name {\n    font-size: var(--text-sm);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary-700);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    margin: 0 0 var(--space-2);\n  }\n  .price-desc { color: var(--color-neutral-500); font-size: var(--text-sm); margin: 0 0 var(--space-6); line-height: var(--leading-relaxed); }\n  .price-amount {\n    font-family: var(--font-display);\n    font-size: var(--text-6xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n    display: flex; align-items: baseline; gap: var(--space-2);\n    margin-bottom: var(--space-2);\n  }\n  .price-amount .per {\n    font-family: var(--font-sans); font-size: var(--text-base);\n    color: var(--color-neutral-500); font-weight: var(--font-weight-regular);\n  }\n  .price-note { color: var(--color-neutral-500); font-size: var(--text-sm); margin: 0 0 var(--space-6); }\n  .price-features { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; gap: var(--space-3); flex: 1; }\n  .price-features li {\n    display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start;\n    font-size: var(--text-sm); color: var(--color-neutral-700); line-height: var(--leading-relaxed);\n  }\n  .price-features svg { color: var(--color-primary-500); margin-top: 4px; }\n  .price-features li.muted svg { color: var(--color-neutral-300); }\n  .price-features li.muted { color: var(--color-neutral-400); }\n\n  /* ============================================\n   * Testimonials\n   * ============================================ */\n  .testimonials {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-6);\n  }\n  @media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }\n\n  .quote-card {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n  }\n  .quote-card blockquote {\n    margin: 0 0 var(--space-6);\n    font-family: var(--font-display);\n    font-style: italic;\n    font-size: var(--text-2xl);\n    line-height: var(--leading-snug);\n    color: var(--color-neutral-950);\n    letter-spacing: -0.005em;\n  }\n  .quote-author {\n    display: flex; align-items: center; gap: var(--space-3);\n    padding-top: var(--space-4);\n    border-top: 1px solid var(--surface-border);\n  }\n  .quote-avatar {\n    width: 44px; height: 44px; border-radius: var(--radius-full);\n    background: var(--color-primary-100); color: var(--color-primary-900);\n    display: grid; place-items: center; font-weight: var(--font-weight-semibold);\n    font-size: var(--text-sm);\n  }\n  .quote-name { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .quote-role { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); }\n\n  /* ============================================\n   * Stats strip\n   * ============================================ */\n  .stats {\n    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);\n    padding: var(--space-12) 0;\n    border-top: 1px solid var(--surface-border);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); padding: var(--space-16) 0; } }\n  .stat { text-align: left; }\n  .stat .num {\n    font-family: var(--font-display);\n    font-size: var(--text-5xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n    letter-spacing: -0.01em;\n  }\n  .stat .num em { color: var(--color-primary-700); font-style: normal; }\n  .stat .lbl {\n    margin-top: var(--space-3);\n    color: var(--color-neutral-500);\n    font-size: var(--text-sm);\n    line-height: var(--leading-snug);\n  }\n\n  /* ============================================\n   * FAQ\n   * ============================================ */\n  .faq { max-width: var(--container-narrow); margin: 0 auto; }\n  .faq details {\n    border-bottom: 1px solid var(--surface-border);\n    padding: var(--space-6) 0;\n  }\n  .faq details[open] summary .chev { transform: rotate(45deg); }\n  .faq summary {\n    list-style: none;\n    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);\n    cursor: pointer;\n    font-size: var(--text-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-neutral-950);\n    line-height: var(--leading-snug);\n  }\n  .faq summary::-webkit-details-marker { display: none; }\n  .faq .chev {\n    flex-shrink: 0;\n    width: 28px; height: 28px;\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    font-size: var(--text-xl);\n    transition: transform var(--duration-base) var(--easing-out);\n    line-height: 1;\n  }\n  .faq .answer {\n    margin-top: var(--space-4);\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ============================================\n   * Final CTA\n   * ============================================ */\n  .final-cta {\n    background: var(--color-primary-900);\n    color: var(--color-primary-100);\n    border-radius: var(--radius-2xl);\n    padding: var(--space-16) var(--space-8);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .final-cta::before {\n    content: \"\"; position: absolute; inset: -50% auto auto -20%;\n    width: 60%; aspect-ratio: 1; border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(168, 200, 181, 0.18), transparent 70%);\n    pointer-events: none;\n  }\n  .final-cta::after {\n    content: \"\"; position: absolute; inset: auto -20% -50% auto;\n    width: 60%; aspect-ratio: 1; border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(194, 94, 51, 0.16), transparent 70%);\n    pointer-events: none;\n  }\n  .final-cta-inner { position: relative; }\n  .final-cta h2 {\n    font-family: var(--font-display);\n    color: var(--color-white);\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    margin: 0 0 var(--space-4);\n    line-height: var(--leading-tight);\n  }\n  .final-cta p {\n    color: var(--color-primary-300);\n    font-size: var(--text-lg);\n    max-width: 560px; margin: 0 auto var(--space-8);\n  }\n  .final-cta .btn-primary {\n    background: var(--color-white); color: var(--color-primary-900);\n  }\n  .final-cta .btn-primary:hover { background: var(--color-primary-100); }\n  .final-cta .btn-ghost { color: var(--color-primary-100); }\n  .final-cta .btn-ghost:hover { background: rgba(255,255,255,0.06); }\n\n  /* ============================================\n   * Footer\n   * ============================================ */\n  footer {\n    padding: var(--space-16) 0 var(--space-12);\n    border-top: 1px solid var(--surface-border);\n    background: var(--color-white);\n  }\n  .foot-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-8);\n    margin-bottom: var(--space-12);\n  }\n  @media (min-width: 1024px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } }\n  .foot-col h5 {\n    font-size: var(--text-sm);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-4);\n    font-weight: var(--font-weight-semibold);\n  }\n  .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }\n  .foot-col a { color: var(--color-neutral-500); font-size: var(--text-sm); }\n  .foot-col a:hover { color: var(--color-neutral-950); }\n  .foot-tag { color: var(--color-neutral-500); font-size: var(--text-sm); max-width: 320px; margin-top: var(--space-4); line-height: var(--leading-relaxed); }\n  .foot-bar {\n    display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);\n    padding-top: var(--space-8);\n    border-top: 1px solid var(--surface-border);\n    color: var(--color-neutral-500); font-size: var(--text-xs);\n    flex-wrap: wrap;\n  }\n  .foot-bar .mono { font-family: var(--font-mono); letter-spacing: 0.04em; }\n</style>\n</head>\n<body>\n\n<!-- ============================================\n Topbar\n============================================ -->\n<header class=\"topbar\">\n  <div class=\"container topbar-inner\">\n    <a href=\"#\" class=\"brand\">\n      <span class=\"brand-mark\">R</span>\n      Reformix\n    </a>\n    <nav class=\"nav\" aria-label=\"Principal\">\n      <a href=\"#problema\">Por qué Reformix</a>\n      <a href=\"#como-funciona\">Cómo funciona</a>\n      <a href=\"#precios\">Precios</a>\n      <a href=\"#faq\">Preguntas</a>\n    </nav>\n    <div class=\"topbar-actions\">\n      <a href=\"#\" class=\"btn btn-ghost btn-sm\">Entrar</a>\n      <a href=\"#cta\" class=\"btn btn-primary btn-sm\">Empezar gratis</a>\n    </div>\n  </div>\n</header>\n\n<!-- ============================================\n Hero\n============================================ -->\n<section class=\"hero\">\n  <div class=\"container hero-grid\">\n    <div>\n      <span class=\"eyebrow\"><span class=\"dot\"></span> Para empresas de reformas en España</span>\n      <h1 class=\"hero-title\">\n        Averigua <em>cuánto vale cada obra</em> antes de coger el coche.\n      </h1>\n      <p class=\"hero-sub\">\n        El asistente de voz de Reformix atiende la llamada de tu cliente, le pide las fotos y te devuelve un render y un presupuesto orientativo por partidas. Llegas a cada visita sabiendo el tamaño real del trabajo — y solo te desplazas a las obras que te rentan.\n      </p>\n      <div class=\"hero-ctas\">\n        <a href=\"#cta\" class=\"btn btn-primary btn-lg\">Empezar gratis 14 días</a>\n        <a href=\"#demo\" class=\"btn btn-secondary btn-lg\">Ver una demo en vivo</a>\n      </div>\n      <div class=\"hero-meta\">\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Sin tarjeta para probar</span>\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Tu número, tu marca</span>\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Cancela cuando quieras</span>\n      </div>\n    </div>\n\n    <!-- Hero visual: panel de leads mock -->\n    <div class=\"hero-visual\" id=\"demo\" aria-label=\"Vista previa del panel de leads\">\n      <div class=\"mock-bar\">\n        <span class=\"mock-dot\" style=\"background: var(--color-danger-500);\"></span>\n        <span class=\"mock-dot\" style=\"background: var(--color-warning-500);\"></span>\n        <span class=\"mock-dot\" style=\"background: var(--color-success-500);\"></span>\n        <span class=\"mock-url\">panel.reformix.es / leads</span>\n      </div>\n      <div class=\"mock-body\">\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\">MR</div>\n          <div>\n            <div class=\"lead-name\">María Rivas · Cocina · Madrid</div>\n            <div class=\"lead-meta\">Hace 4 min · 24 m² · calidad media</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-primary\"><span class=\"pulse\"></span> Nuevo</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            12.400€\n            <span>orientativo</span>\n          </div>\n        </div>\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\" style=\"background: var(--color-accent-100); color: var(--color-accent-900);\">JF</div>\n          <div>\n            <div class=\"lead-name\">Jorge Fernández · Baño completo · Pinto</div>\n            <div class=\"lead-meta\">Hace 32 min · 6 m² · calidad premium</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-info\">📞 Contactado</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            9.150€\n            <span>orientativo</span>\n          </div>\n        </div>\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\">CL</div>\n          <div>\n            <div class=\"lead-name\">Carmen López · Reforma integral · Móstoles</div>\n            <div class=\"lead-meta\">Ayer · 72 m² · calidad media</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-warning\">📅 Visita martes 10:30</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            41.800€\n            <span>orientativo</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"float-chip float-chip-1\">\n        <div class=\"icon green\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2.01z\"></path></svg>\n        </div>\n        <div>\n          <strong>Llamada nueva</strong>\n          <small>+34 663 ··· 21 · 00:47</small>\n        </div>\n      </div>\n      <div class=\"float-chip float-chip-2\">\n        <div class=\"icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path></svg>\n        </div>\n        <div>\n          <strong>Render listo</strong>\n          <small>Cocina · 3 propuestas</small>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Logo strip\n============================================ -->\n<div class=\"logos\">\n  <div class=\"container\">\n    <div class=\"logos-inner\">\n      <p>Reformistas que ya prueban Reformix en Madrid, Valencia y Sevilla</p>\n      <div class=\"logo-item\">Obras Bermejo</div>\n      <div class=\"logo-item sans\">CASAFINA</div>\n      <div class=\"logo-item mono\">Reformas&nbsp;71</div>\n      <div class=\"logo-item\">Talleres Quintana</div>\n      <div class=\"logo-item sans\">VEGA&amp;HIJOS</div>\n      <div class=\"logo-item mono\">Atelier&nbsp;Río</div>\n    </div>\n  </div>\n</div>\n\n<!-- ============================================\n Problema\n============================================ -->\n<section class=\"section section-muted\" id=\"problema\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">El sector hoy</p>\n      <h2 class=\"section-title\">Tu agenda no distingue una obra de 40.000 € de un <em>cambio de grifo</em>.</h2>\n      <p class=\"section-lede\">Sin saber qué hay detrás de cada llamada, inviertes lo mismo en la obra que te cambia el año que en la que te roba la mañana. Así llevamos veinte años.</p>\n    </div>\n\n    <div class=\"broken-grid\">\n      <div class=\"broken-card\">\n        <div class=\"num\">01 · CAPTACIÓN</div>\n        <h3>Pagas por el mismo lead que cinco competidores.</h3>\n        <p>Los portales venden cada contacto varias veces. Ganas el que más rápido llame, no el que mejor trabaje. El cliente acaba agotado de llamadas.</p>\n      </div>\n      <div class=\"broken-card\">\n        <div class=\"num\">02 · VISITA</div>\n        <h3>Conduces 40 km y era cambiar un grifo.</h3>\n        <p>Sin información previa, cada visita es una apuesta. Una de cada tres no acaba en presupuesto, y muchas de las que sí, no compensan el desplazamiento.</p>\n      </div>\n      <div class=\"broken-card\">\n        <div class=\"num\">03 · PRESUPUESTO</div>\n        <h3>Tardas tres días en mandar un PDF que ya no leen.</h3>\n        <p>Cuando llega tu propuesta, otros dos reformistas ya pasaron por la casa. El cliente se decide por precio porque no sabe comparar otra cosa.</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Cómo funciona\n============================================ -->\n<section class=\"section\" id=\"como-funciona\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Cómo funciona</p>\n      <h2 class=\"section-title\">Del primer \"hola\" al presupuesto firmado, <em>en una tarde</em>.</h2>\n      <p class=\"section-lede\">Reformix conecta cuatro piezas que antes nadie había unido: agente de voz, render IA, WhatsApp y tu panel de gestión.</p>\n    </div>\n\n    <div class=\"steps\">\n      <div class=\"step\">\n        <div class=\"step-num\">1</div>\n        <h4>El cliente llama a tu número</h4>\n        <p>El asistente IA contesta con tu marca, pregunta lo necesario y agenda una visita o pide fotos. Atiende en castellano, catalán y valenciano.</p>\n        <div class=\"tag\">⌁ Agente de voz</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">2</div>\n        <h4>Se genera un render orientativo</h4>\n        <p>A partir de las fotos del cliente, Reformix devuelve 3 propuestas visuales con calidades básica, media y premium. Ya tienes de qué hablar en la visita.</p>\n        <div class=\"tag\">⌁ Render IA</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">3</div>\n        <h4>Llega un presupuesto por WhatsApp</h4>\n        <p>En minutos. Con desglose por partidas, plazos y la frase honesta: \"es orientativo, tu visita sigue siendo la que cierra\".</p>\n        <div class=\"tag\">⌁ WhatsApp</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">4</div>\n        <h4>Tú visitas y firmas</h4>\n        <p>Solo a los que ya están dentro. Marcas el lead como ganado, perdido o aplazado desde el panel. Reformix aprende para la próxima.</p>\n        <div class=\"tag\">⌁ Panel reformista</div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Demo / WhatsApp\n============================================ -->\n<section class=\"section section-emphasis\">\n  <div class=\"container demo-grid\">\n    <div>\n      <p class=\"section-kicker\">Lo que recibe tu cliente</p>\n      <h2 class=\"section-title\">Un presupuesto <em>en su WhatsApp</em>, no en un PDF que se pierde.</h2>\n      <p class=\"section-lede\">El mismo canal que ya usa todos los días. Sin descargar apps, sin registrarse en portales, sin esperar tres días.</p>\n      <ul class=\"demo-bullets\">\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Tres calidades, no una</strong>El cliente compara básica, media y premium. Entiende qué está pagando y por qué.</div>\n        </li>\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Render asociado a cada precio</strong>Ve la cocina, no una hoja de Excel. Las dudas bajan, la confianza sube.</div>\n        </li>\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Honestidad explícita</strong>\"Es orientativo. Tu visita sigue siendo la que cierra.\" Lo decimos en cada presupuesto.</div>\n        </li>\n      </ul>\n      <a href=\"#cta\" class=\"btn btn-primary btn-md\">Quiero verlo con mi negocio</a>\n    </div>\n\n    <div>\n      <div class=\"phone\" aria-hidden=\"true\">\n        <div class=\"phone-screen\">\n          <div class=\"phone-status\">\n            <span>9:41</span>\n            <span>·····</span>\n          </div>\n          <div class=\"wa-header\">\n            <div class=\"wa-avatar\">R</div>\n            <div>\n              <div class=\"wa-name\">Reformas Bermejo</div>\n              <div class=\"wa-sub\">en línea</div>\n            </div>\n          </div>\n          <div class=\"wa-body\">\n            <div class=\"bubble in\">\n              ¡Hola María! 👋 Soy el asistente de Bermejo. Te paso el presupuesto orientativo de tu cocina.\n              <small>09:42</small>\n            </div>\n            <div class=\"bubble in\">\n              <div class=\"render-placeholder\">RENDER · COCINA · CALIDAD MEDIA</div>\n              Calidad media · 24 m²<br>\n              <strong>12.400 €</strong> · 18 días<br>\n              <small>09:42</small>\n            </div>\n            <div class=\"bubble out\">\n              ¿Puedo ver también la premium?\n              <small>09:44</small>\n            </div>\n            <div class=\"bubble in\">\n              Claro 👇 Y recuerda: es orientativo, la visita es la que cierra.\n              <small>09:44</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Features grid\n============================================ -->\n<section class=\"section\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Lo que hace por ti</p>\n      <h2 class=\"section-title\">Una herramienta de trabajo. <em>No un escaparate más.</em></h2>\n    </div>\n\n    <div class=\"features-grid\">\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2.01z\"></path></svg>\n        </div>\n        <h3>Asistente IA 24/7</h3>\n        <p>Contesta llamadas a las once de la noche y los sábados. Filtra al curioso, cualifica al que va en serio.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path></svg>\n        </div>\n        <h3>Renders en minutos</h3>\n        <p>Tres propuestas visuales por obra. Calidad básica, media y premium. Útiles para hablar, no para presumir.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><path d=\"M16 13H8\"></path><path d=\"M16 17H8\"></path><path d=\"M10 9H8\"></path></svg>\n        </div>\n        <h3>Presupuesto orientativo</h3>\n        <p>Por partidas, con plazos. Sabes el tamaño real de la obra antes de poner un pie en la casa — y tu cliente entiende qué está comprando.</p>\n      </div>\n      <div class=\"feature alt\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"></path></svg>\n        </div>\n        <h3>Entrega por WhatsApp</h3>\n        <p>El canal donde ya está tu cliente. Cero fricción de descargas, registros o apps que nadie va a usar.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"></path><path d=\"m7 14 4-4 4 4 5-5\"></path></svg>\n        </div>\n        <h3>Panel con cabeza</h3>\n        <p>Una bandeja, no diez. De un vistazo ves qué lead vale tu mañana: estado, llamada, render, presupuesto y nota. Sin tabs perdidos.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"></circle><path d=\"M15.477 12.89 17 22l-5-3-5 3 1.523-9.11\"></path></svg>\n        </div>\n        <h3>Sello \"Precio Justo\"</h3>\n        <p>Tu rango de precios queda registrado. El cliente sabe que no le estás vendiendo humo. Tú diferencias frente al portal.</p>\n      </div>\n    </div>\n\n    <div style=\"margin-top: var(--space-12);\">\n      <div class=\"honesty\">\n        <div class=\"ico-warn\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path><line x1=\"12\" x2=\"12\" y1=\"9\" y2=\"13\"></line><line x1=\"12\" x2=\"12.01\" y1=\"17\" y2=\"17\"></line></svg>\n        </div>\n        <div>\n          <strong>Lo que Reformix no es.</strong>\n          <p>No es un marketplace que revende tu cliente cinco veces. No te promete leads garantizados. No sustituye tu visita, tu obra ni tu palabra. Es una herramienta para llegar mejor preparado, eso es todo.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Stats\n============================================ -->\n<section>\n  <div class=\"container\">\n    <div class=\"stats\">\n      <div class=\"stat\">\n        <div class=\"num\"><em>2,7×</em></div>\n        <div class=\"lbl\">más visitas que terminan en presupuesto firmado, frente al lead de portal.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>14</em> min</div>\n        <div class=\"lbl\">de media desde que entra la llamada hasta que el cliente recibe presupuesto.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>−63%</em></div>\n        <div class=\"lbl\">de visitas en frío. Vas solo a las casas donde ya hay obra real.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>89%</em></div>\n        <div class=\"lbl\">de los clientes finales contestan al WhatsApp con el render. Era un 14% en email.</div>\n      </div>\n    </div>\n    <p style=\"text-align: center; font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: var(--space-6); font-family: var(--font-mono);\">\n      Datos del piloto cerrado · 18 empresas · ene–abr 2026 · Madrid + Valencia\n    </p>\n  </div>\n</section>\n\n<!-- ============================================\n Pricing\n============================================ -->\n<section class=\"section section-muted\" id=\"precios\">\n  <div class=\"container\">\n    <div class=\"section-head center\">\n      <p class=\"section-kicker\">Precios</p>\n      <h2 class=\"section-title\">Precios <em>de herramienta</em>, no de portal.</h2>\n      <p class=\"section-lede\">Pagas un mes plano. Sin comisión por lead, sin pujas, sin \"destacar tu perfil\". Lo que captes es tuyo.</p>\n    </div>\n\n    <div class=\"pricing-grid\">\n      <div class=\"price-card\">\n        <div class=\"price-name\">Starter</div>\n        <p class=\"price-desc\">Para autónomos y equipos de hasta dos. Para probar el modelo sin compromiso.</p>\n        <div class=\"price-amount\">29€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">5 leads procesados / mes · 3€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Asistente IA en castellano</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Renders + presupuesto por WhatsApp</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Panel de leads básico</li>\n          <li class=\"muted\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg> Branding tuyo en WhatsApp</li>\n          <li class=\"muted\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg> Sello Precio Justo</li>\n        </ul>\n        <a href=\"#cta\" class=\"btn btn-secondary btn-md\">Empezar gratis</a>\n      </div>\n\n      <div class=\"price-card featured\">\n        <div class=\"price-ribbon\">Recomendado</div>\n        <div class=\"price-name\">Pro</div>\n        <p class=\"price-desc\">El plan que están usando los reformistas del piloto. Empresas de 2 a 10 personas.</p>\n        <div class=\"price-amount\">79€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">15 leads procesados / mes · 2,50€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Todo lo de Starter</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Asistente en 3 idiomas (ES, CA, VA)</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> 3 calidades por presupuesto</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Branding tuyo en WhatsApp</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Aviso de licencia urbanística</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Sello Precio Justo Certificado</li>\n        </ul>\n        <a href=\"#cta\" class=\"btn btn-primary btn-md\">Empezar 14 días gratis</a>\n      </div>\n\n      <div class=\"price-card\">\n        <div class=\"price-name\">Business</div>\n        <p class=\"price-desc\">Empresas medianas (más de 10 personas) o con varias delegaciones.</p>\n        <div class=\"price-amount\">199€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">50 leads procesados / mes · 2€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Todo lo de Pro</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Varias delegaciones · routing por zona</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Integración con tu ERP / CRM</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Manager dedicado de cuenta</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Soporte por teléfono</li>\n        </ul>\n        <a href=\"#cta\" class=\"btn btn-secondary btn-md\">Hablar con nosotros</a>\n      </div>\n    </div>\n\n    <p style=\"text-align: center; margin-top: var(--space-8); color: var(--color-neutral-500); font-size: var(--text-sm); max-width: 640px; margin-left: auto; margin-right: auto;\">\n      Un <em>lead procesado</em> es una conversación cualificada que termina en presupuesto enviado al cliente. Los descartados por el asistente IA no cuentan.\n    </p>\n  </div>\n</section>\n\n<!-- ============================================\n Testimonios\n============================================ -->\n<section class=\"section\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Lo que dicen</p>\n      <h2 class=\"section-title\">Reformistas que <em>ya están dentro</em>.</h2>\n    </div>\n\n    <div class=\"testimonials\">\n      <div class=\"quote-card\">\n        <blockquote>\n          \"Lo del render se lo enseño antes de subir a la obra y se acaban las charlas raras de qué va a costar. Llego, mido, y ya estamos hablando del mismo idioma.\"\n        </blockquote>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">AB</div>\n          <div>\n            <div class=\"quote-name\">Antonio Bermejo</div>\n            <div class=\"quote-role\">Reformas Bermejo · Madrid · 9 obras/mes</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"quote-card\">\n        <blockquote>\n          \"Llevo veinte años en esto y nunca había podido contestar a un cliente un domingo a las once. Ahora le contesta Reformix y el lunes ya tengo presupuesto enviado.\"\n        </blockquote>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\" style=\"background: var(--color-accent-100); color: var(--color-accent-900);\">MV</div>\n          <div>\n            <div class=\"quote-name\">Marisa Vega</div>\n            <div class=\"quote-role\">Vega &amp; Hijos · Valencia · 12 personas</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n FAQ\n============================================ -->\n<section class=\"section section-muted\" id=\"faq\">\n  <div class=\"container\">\n    <div class=\"section-head center\">\n      <p class=\"section-kicker\">Preguntas frecuentes</p>\n      <h2 class=\"section-title\">Lo que nos preguntáis <em>antes de firmar</em>.</h2>\n    </div>\n\n    <div class=\"faq\">\n      <details open=\"\">\n        <summary>¿Esto no me va a quitar el trato humano con el cliente?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Al revés. Llegas a la visita con la conversación medio hecha: ya sabes qué quiere, qué calidad, qué presupuesto le encaja. Te queda más tiempo para lo que sí necesita un humano: medir bien, escuchar, vender tu obra.</div>\n      </details>\n      <details>\n        <summary>¿Y si el cliente me llama con un proyecto raro que la IA no sabe presupuestar?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">El asistente sabe decir \"esto necesita un humano\" y te lo pasa directamente, con la grabación y un resumen. Reformix no inventa: si no tiene datos para presupuestar, no presupuesta.</div>\n      </details>\n      <details>\n        <summary>¿Quién es el dueño de los leads?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Tú. Siempre. Reformix no revende ni comparte tus leads con nadie. Es la diferencia con un marketplace: aquí pagas la herramienta, no el contacto.</div>\n      </details>\n      <details>\n        <summary>¿Y la licencia urbanística? No quiero meter en líos a nadie.<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">En cada presupuesto que requiere obra mayor aparece un aviso explícito: \"Esta obra puede requerir licencia urbanística — consúltalo en tu ayuntamiento\". No vendemos como menor lo que es mayor.</div>\n      </details>\n      <details>\n        <summary>¿Qué pasa si lo pruebo y no me convence?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Lo dejas. Cancelas desde el panel sin llamar a nadie. Los primeros 14 días son gratis y no pedimos tarjeta hasta el día 15.</div>\n      </details>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Final CTA\n============================================ -->\n<section class=\"section\" id=\"cta\">\n  <div class=\"container\">\n    <div class=\"final-cta\">\n      <div class=\"final-cta-inner\">\n        <h2>Empieza esta semana. Cierra obras la siguiente.</h2>\n        <p>14 días gratis, sin tarjeta, sin compromiso. Si en dos semanas no estás cerrando más, lo cancelas y nos despedimos como amigos.</p>\n        <div class=\"hero-ctas\" style=\"justify-content: center;\">\n          <a href=\"#\" class=\"btn btn-primary btn-lg\">Empezar gratis 14 días</a>\n          <a href=\"#\" class=\"btn btn-ghost btn-lg\">Hablar con un humano →</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Footer\n============================================ -->\n<footer>\n  <div class=\"container\">\n    <div class=\"foot-grid\">\n      <div class=\"foot-col\">\n        <a href=\"#\" class=\"brand\">\n          <span class=\"brand-mark\">R</span>\n          Reformix\n        </a>\n        <p class=\"foot-tag\">Un mercado de reformas más justo. Para los profesionales que cumplen lo que prometen.</p>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Producto</h5>\n        <ul>\n          <li><a href=\"#\">Asistente IA</a></li>\n          <li><a href=\"#\">Renders</a></li>\n          <li><a href=\"#\">Panel reformista</a></li>\n          <li><a href=\"#\">Precios</a></li>\n        </ul>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Empresa</h5>\n        <ul>\n          <li><a href=\"#\">Sobre nosotros</a></li>\n          <li><a href=\"#\">Blog</a></li>\n          <li><a href=\"#\">Contacto</a></li>\n          <li><a href=\"#\">Trabaja con nosotros</a></li>\n        </ul>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Legal</h5>\n        <ul>\n          <li><a href=\"#\">Condiciones</a></li>\n          <li><a href=\"#\">Privacidad</a></li>\n          <li><a href=\"#\">Cookies</a></li>\n          <li><a href=\"#\">Sello Precio Justo</a></li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"foot-bar\">\n      <span>© 2026 Reformix — Hecho en Madrid.</span>\n      <span class=\"mono\">v1.0 · ES</span>\n    </div>\n  </div>\n</footer>\n\n\n\n</body></html>"
+"<!DOCTYPE html>\n<html lang=\"es\"><head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Reformix — Para reformistas</title>\n<link rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\">\n<style>/* Reformix — Design Tokens\n * Generado a partir de design-system.md + design-tokens.json\n * Stack: Tailwind + shadcn/ui (compatibilidad con CSS custom properties)\n * Versión: 1.0 (2026-05-24)\n */\n\n/* latin-ext */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: italic;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"60f0ecce-40bf-4952-a5d0-c64eb7d90838\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: italic;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"3564a927-e275-4816-b6c1-cc99fc1dcdab\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"15d36112-e39a-4059-ae12-06c58a5747ac\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Instrument Serif';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"421ba28b-7abe-4b86-a87c-fcd3e94378f7\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"49e48789-614f-48bf-9256-df3caab8c123\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"c4f99f5c-1856-4a0e-9de5-7834190c77b0\") format('woff2');\n  unicode-range: U+1F00-1FFF;\n}\n/* greek */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"40945437-5659-40b2-bfd8-fd664ad1615e\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"158fbdf5-8d90-47a9-bc8e-5d21e3bafce8\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"00430955-27e4-4cea-b94e-787f11af509f\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"e9c2548b-cd31-41e0-bc94-aac65cc4b6eb\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"ca40d6e0-4a50-4481-8e30-74c159ef9cee\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"556fa156-4d6a-481e-a43b-d7ab5fb934a9\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"af8b43b5-1741-407a-be2e-9881a5996d70\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"12581ec4-115f-4ba1-8b57-50addc6b546c\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a\") format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"ca40d6e0-4a50-4481-8e30-74c159ef9cee\") format('woff2');\n  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* greek */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"556fa156-4d6a-481e-a43b-d7ab5fb934a9\") format('woff2');\n  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;\n}\n/* vietnamese */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b\") format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"af8b43b5-1741-407a-be2e-9881a5996d70\") format('woff2');\n  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: normal;\n  font-weight: 500;\n  font-display: swap;\n  src: url(\"12581ec4-115f-4ba1-8b57-50addc6b546c\") format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n\n:root {\n  /* ============================================\n   * COLOR — Brand (Architectural Warmth)\n   * ============================================ */\n\n  /* Primary — Verde oliva */\n  --color-primary-50:  #F4F8F5;\n  --color-primary-100: #E8F0EB;\n  --color-primary-300: #A8C8B5;\n  --color-primary-500: #4D8A6D;\n  --color-primary-700: #2F5C46;\n  --color-primary-900: #1F3A2E;\n\n  /* Accent — Terracota */\n  --color-accent-100: #FAEAE0;\n  --color-accent-400: #E08A5F;\n  --color-accent-600: #C25E33;\n  --color-accent-900: #7A3517;\n\n  /* ============================================\n   * COLOR — Neutral (Stone — warm grays con tinte oliva)\n   * ============================================ */\n\n  --color-white:       #FFFFFF;\n  --color-neutral-50:  #F7F8F7;\n  --color-neutral-100: #EDEFED;\n  --color-neutral-200: #DDE0DD;\n  --color-neutral-300: #C4C9C4;\n  --color-neutral-400: #9DA29D;\n  --color-neutral-500: #7A807A;\n  --color-neutral-700: #4A4E4A;\n  --color-neutral-900: #262826;\n  --color-neutral-950: #161816;\n\n  /* ============================================\n   * COLOR — Semantic\n   * ============================================ */\n\n  --color-success-100: #E0F0E6;\n  --color-success-500: #4DAA73;\n  --color-success-700: #2D7A4F;\n\n  --color-warning-100: #FAEFD3;\n  --color-warning-500: #DA9A2C;\n  --color-warning-700: #9A6B0E;\n\n  --color-danger-100: #FAE0DA;\n  --color-danger-500: #D85940;\n  --color-danger-700: #A8331F;\n\n  --color-info-100: #DDEDF5;\n  --color-info-500: #3D8AAA;\n  --color-info-700: #1F5C7A;\n\n  /* ============================================\n   * COLOR — Surface aliases (uso semántico en componentes)\n   * ============================================ */\n\n  --surface-background:       var(--color-white);\n  --surface-background-muted: var(--color-neutral-50);\n  --surface-background-emphasis: var(--color-primary-50);\n  --surface-foreground:       var(--color-neutral-950);\n  --surface-foreground-muted: var(--color-neutral-500);\n  --surface-border:           var(--color-neutral-200);\n  --surface-border-strong:    var(--color-neutral-300);\n\n  /* ============================================\n   * TYPOGRAPHY\n   * ============================================ */\n\n  --font-display: 'Instrument Serif', Georgia, serif;\n  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;\n  --font-mono:    'JetBrains Mono', ui-monospace, monospace;\n\n  --font-weight-regular:  400;\n  --font-weight-medium:   500;\n  --font-weight-semibold: 600;\n  --font-weight-bold:     700;\n\n  --text-xs:   0.75rem;\n  --text-sm:   0.875rem;\n  --text-base: 1rem;\n  --text-lg:   1.125rem;\n  --text-xl:   1.25rem;\n  --text-2xl:  1.5rem;\n  --text-3xl:  1.875rem;\n  --text-4xl:  2.25rem;\n  --text-5xl:  3rem;\n  --text-6xl:  3.75rem;\n  --text-7xl:  4.5rem;\n\n  --leading-tight:    1.1;\n  --leading-snug:     1.3;\n  --leading-normal:   1.5;\n  --leading-relaxed:  1.6;\n\n  /* ============================================\n   * SPACING (base 4px, coherente con Tailwind)\n   * ============================================ */\n\n  --space-1:  0.25rem;\n  --space-2:  0.5rem;\n  --space-3:  0.75rem;\n  --space-4:  1rem;\n  --space-6:  1.5rem;\n  --space-8:  2rem;\n  --space-12: 3rem;\n  --space-16: 4rem;\n  --space-24: 6rem;\n  --space-32: 8rem;\n\n  /* ============================================\n   * CONTAINER WIDTHS\n   * ============================================ */\n\n  --container-narrow:  720px;\n  --container-default: 1200px;\n  --container-wide:    1440px;\n\n  --gutter-mobile:  24px;\n  --gutter-desktop: 48px;\n\n  /* ============================================\n   * BORDER RADIUS\n   * ============================================ */\n\n  --radius-sm:   4px;\n  --radius-md:   6px;\n  --radius-lg:   10px;\n  --radius-xl:   14px;\n  --radius-2xl:  20px;\n  --radius-full: 9999px;\n\n  /* ============================================\n   * SHADOWS (warm, base neutral-950 — no negro puro)\n   * ============================================ */\n\n  --shadow-xs:   0 1px 2px rgba(22, 24, 22, 0.05);\n  --shadow-sm:   0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04);\n  --shadow-md:   0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04);\n  --shadow-lg:   0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05);\n  --shadow-xl:   0 20px 25px rgba(22, 24, 22, 0.1),  0 10px 10px rgba(22, 24, 22, 0.04);\n  --shadow-glow: 0 0 0 4px rgba(47, 92, 70, 0.15);\n\n  /* ============================================\n   * MOTION\n   * ============================================ */\n\n  --duration-fast: 150ms;\n  --duration-base: 250ms;\n  --duration-slow: 400ms;\n\n  --easing-out:    cubic-bezier(0.16, 1, 0.3, 1);\n  --easing-in:     cubic-bezier(0.7, 0, 0.84, 0);\n  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n\n  /* ============================================\n   * Z-INDEX scale (orden visual)\n   * ============================================ */\n\n  --z-dropdown: 50;\n  --z-sticky:   100;\n  --z-overlay:  200;\n  --z-modal:    300;\n  --z-popover:  400;\n  --z-toast:    500;\n}\n\n/* ============================================\n * Base styles\n * ============================================ */\n\nhtml {\n  font-family: var(--font-sans);\n  font-size: 16px;\n  color: var(--surface-foreground);\n  background: var(--surface-background);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n  line-height: var(--leading-relaxed);\n}\n\nh1, h2 {\n  font-family: var(--font-display);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--leading-tight);\n  color: var(--color-neutral-950);\n}\n\nh3, h4, h5, h6 {\n  font-family: var(--font-sans);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--leading-snug);\n  color: var(--color-neutral-900);\n}\n\n/* ============================================\n * Reduced motion\n * ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n</style>\n\n<style>\n  /* ============================================\n   * Reset / base\n   * ============================================ */\n  *, *::before, *::after { box-sizing: border-box; }\n  body {\n    margin: 0;\n    background: var(--surface-background);\n    color: var(--color-neutral-700);\n    font-size: var(--text-base);\n  }\n  a { color: inherit; text-decoration: none; }\n  img, svg { display: block; max-width: 100%; }\n  button { font-family: inherit; cursor: pointer; border: 0; background: none; }\n\n  /* Container */\n  .container {\n    width: 100%;\n    max-width: var(--container-default);\n    margin: 0 auto;\n    padding: 0 var(--gutter-mobile);\n  }\n  @media (min-width: 1024px) {\n    .container { padding: 0 var(--gutter-desktop); }\n  }\n\n  /* ============================================\n   * Buttons\n   * ============================================ */\n  .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-2);\n    font-family: var(--font-sans);\n    font-weight: var(--font-weight-semibold);\n    border-radius: var(--radius-lg);\n    transition: background var(--duration-fast) var(--easing-out),\n                box-shadow var(--duration-fast) var(--easing-out),\n                transform var(--duration-fast) var(--easing-out);\n    white-space: nowrap;\n  }\n  .btn:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }\n  .btn-md { height: 44px; padding: 0 var(--space-4); font-size: var(--text-base); }\n  .btn-lg { height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); }\n  .btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }\n  .btn-primary { background: var(--color-primary-700); color: var(--color-white); }\n  .btn-primary:hover { background: var(--color-primary-900); }\n  .btn-primary:active { transform: scale(0.97); }\n  .btn-secondary {\n    background: var(--color-white);\n    color: var(--color-primary-700);\n    box-shadow: inset 0 0 0 1px var(--color-primary-700);\n  }\n  .btn-secondary:hover { background: var(--color-primary-50); }\n  .btn-ghost { color: var(--color-neutral-700); background: transparent; }\n  .btn-ghost:hover { background: var(--color-neutral-100); }\n\n  /* ============================================\n   * Topbar\n   * ============================================ */\n  .topbar {\n    position: sticky; top: 0; z-index: var(--z-sticky);\n    background: rgba(255,255,255,0.85);\n    backdrop-filter: saturate(180%) blur(8px);\n    -webkit-backdrop-filter: saturate(180%) blur(8px);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  .topbar-inner {\n    display: flex; align-items: center; justify-content: space-between;\n    height: 68px; gap: var(--space-6);\n  }\n  .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-neutral-950); font-size: var(--text-lg); letter-spacing: -0.01em; }\n  .brand-mark {\n    width: 28px; height: 28px; border-radius: var(--radius-md);\n    background: var(--color-primary-700);\n    display: grid; place-items: center; color: var(--color-white);\n    font-family: var(--font-display); font-size: 18px; line-height: 1;\n  }\n  .nav { display: none; gap: var(--space-8); }\n  .nav a {\n    font-size: var(--text-sm); font-weight: var(--font-weight-medium);\n    color: var(--color-neutral-700);\n    transition: color var(--duration-fast) var(--easing-out);\n  }\n  .nav a:hover { color: var(--color-neutral-950); }\n  .topbar-actions { display: flex; align-items: center; gap: var(--space-2); }\n  @media (min-width: 1024px) { .nav { display: flex; } }\n\n  /* ============================================\n   * Hero\n   * ============================================ */\n  .hero { padding: var(--space-16) 0 var(--space-12); }\n  @media (min-width: 1024px) { .hero { padding: var(--space-24) 0 var(--space-16); } }\n\n  .eyebrow {\n    display: inline-flex; align-items: center; gap: var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;\n    color: var(--color-primary-700);\n    background: var(--color-primary-50);\n    padding: var(--space-2) var(--space-3);\n    border-radius: var(--radius-full);\n    border: 1px solid var(--color-primary-100);\n  }\n  .eyebrow .dot {\n    width: 6px; height: 6px; border-radius: 50%;\n    background: var(--color-primary-500);\n    box-shadow: 0 0 0 4px rgba(77, 138, 109, 0.18);\n  }\n\n  .hero-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-12);\n    align-items: center;\n  }\n  @media (min-width: 1024px) {\n    .hero-grid {\n      grid-template-columns: 1.05fr 1fr;\n      gap: var(--space-16);\n    }\n  }\n\n  h1.hero-title {\n    font-family: var(--font-display);\n    font-weight: var(--font-weight-regular);\n    font-size: clamp(2.5rem, 6vw, 4.5rem);\n    line-height: var(--leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--color-neutral-950);\n    margin: var(--space-6) 0 var(--space-6);\n  }\n  .hero-title em {\n    font-style: italic;\n    color: var(--color-primary-700);\n  }\n  .hero-sub {\n    font-size: var(--text-xl);\n    line-height: var(--leading-relaxed);\n    color: var(--color-neutral-700);\n    max-width: 540px;\n    margin: 0 0 var(--space-8);\n  }\n  .hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }\n  .hero-meta {\n    margin-top: var(--space-6);\n    display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);\n    color: var(--color-neutral-500);\n    font-size: var(--text-sm);\n  }\n  .hero-meta .check { color: var(--color-primary-500); }\n  .hero-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }\n\n  /* Hero visual — mock dashboard */\n  .hero-visual {\n    position: relative;\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    overflow: hidden;\n  }\n  .hero-visual::before {\n    /* warm tinted bg */\n    content: \"\";\n    position: absolute; inset: -40% -10% auto auto;\n    width: 70%; height: 70%;\n    background: radial-gradient(closest-side, var(--color-primary-100), transparent 70%);\n    pointer-events: none;\n  }\n  .mock-bar {\n    display: flex; align-items: center; gap: var(--space-2);\n    padding: var(--space-3) var(--space-4);\n    border-bottom: 1px solid var(--surface-border);\n    background: var(--color-neutral-50);\n  }\n  .mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-300); }\n  .mock-url {\n    flex: 1; text-align: center;\n    font-family: var(--font-mono); font-size: var(--text-xs);\n    color: var(--color-neutral-500);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-md);\n    padding: var(--space-1) var(--space-3);\n    margin: 0 var(--space-2);\n  }\n\n  .mock-body { padding: var(--space-6); display: grid; gap: var(--space-4); position: relative; }\n\n  .lead-card {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--space-4);\n    align-items: center;\n    padding: var(--space-4);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    background: var(--color-white);\n    transition: box-shadow var(--duration-base) var(--easing-out), transform var(--duration-base) var(--easing-out);\n  }\n  .lead-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }\n  .lead-avatar {\n    width: 44px; height: 44px; border-radius: var(--radius-full);\n    background: var(--color-primary-100);\n    color: var(--color-primary-900);\n    display: grid; place-items: center;\n    font-weight: var(--font-weight-semibold);\n    font-size: var(--text-sm);\n  }\n  .lead-name { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .lead-meta { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); margin-top: 2px; }\n  .lead-amount {\n    font-family: var(--font-display);\n    font-size: var(--text-2xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n  }\n  .lead-amount span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral-500); display:block; margin-top: 4px; }\n\n  .badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    padding: 2px 10px; border-radius: var(--radius-full);\n  }\n  .badge-primary { background: var(--color-primary-100); color: var(--color-primary-900); }\n  .badge-info { background: var(--color-info-100); color: var(--color-info-700); }\n  .badge-warning { background: var(--color-warning-100); color: var(--color-warning-700); }\n  .badge-success { background: var(--color-success-100); color: var(--color-success-700); }\n  .badge-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }\n  .badge-accent { background: var(--color-accent-100); color: var(--color-accent-900); }\n  .badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s var(--easing-in-out) infinite; }\n  @keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n\n  /* Floating chip on hero visual */\n  .float-chip {\n    position: absolute;\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    padding: var(--space-3) var(--space-4);\n    display: flex; align-items: center; gap: var(--space-3);\n    font-size: var(--text-sm);\n  }\n  .float-chip-1 {\n    left: -16px; bottom: 64px;\n  }\n  .float-chip-2 {\n    right: -16px; top: 90px;\n  }\n  .float-chip .icon {\n    width: 32px; height: 32px; border-radius: var(--radius-md);\n    background: var(--color-accent-100); color: var(--color-accent-900);\n    display: grid; place-items: center;\n  }\n  .float-chip .icon.green { background: var(--color-primary-100); color: var(--color-primary-900); }\n  .float-chip strong { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); display:block; font-size: var(--text-sm); }\n  .float-chip small { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); }\n  @media (max-width: 768px) { .float-chip { display: none; } }\n\n  /* ============================================\n   * Logo strip\n   * ============================================ */\n  .logos {\n    padding: var(--space-8) 0;\n    border-top: 1px solid var(--surface-border);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  .logos-inner {\n    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n    gap: var(--space-12) var(--space-16);\n    color: var(--color-neutral-400);\n  }\n  .logos p {\n    width: 100%;\n    text-align: center;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--color-neutral-500);\n    margin: 0 0 var(--space-2);\n  }\n  .logo-item {\n    font-family: var(--font-display);\n    font-size: var(--text-xl);\n    color: var(--color-neutral-400);\n    letter-spacing: 0.02em;\n    font-style: italic;\n  }\n  .logo-item.sans { font-family: var(--font-sans); font-style: normal; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }\n  .logo-item.mono { font-family: var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-base); }\n\n  /* ============================================\n   * Section header\n   * ============================================ */\n  section.section { padding: var(--space-16) 0; }\n  @media (min-width: 1024px) { section.section { padding: var(--space-24) 0; } }\n  .section-muted { background: var(--color-neutral-50); }\n  .section-emphasis { background: var(--color-primary-50); }\n\n  .section-head { max-width: 760px; margin: 0 0 var(--space-12); }\n  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }\n  .section-kicker {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;\n    color: var(--color-primary-700);\n    margin: 0 0 var(--space-4);\n  }\n  h2.section-title {\n    font-family: var(--font-display);\n    font-weight: var(--font-weight-regular);\n    font-size: clamp(2rem, 4.4vw, 3rem);\n    line-height: var(--leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-4);\n  }\n  .section-title em { font-style: italic; color: var(--color-primary-700); }\n  .section-lede {\n    font-size: var(--text-lg);\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * Problem section — broken cards\n   * ============================================ */\n  .broken-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-4);\n  }\n  @media (min-width: 768px) { .broken-grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 1024px) { .broken-grid { grid-template-columns: repeat(3, 1fr); } }\n\n  .broken-card {\n    padding: var(--space-8);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    transition: box-shadow var(--duration-base) var(--easing-out);\n  }\n  .broken-card:hover { box-shadow: var(--shadow-md); }\n  .broken-card .num {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--color-accent-600);\n    letter-spacing: 0.1em;\n  }\n  .broken-card h3 {\n    font-size: var(--text-xl);\n    color: var(--color-neutral-950);\n    margin: var(--space-3) 0 var(--space-3);\n    line-height: var(--leading-snug);\n  }\n  .broken-card p {\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * How it works\n   * ============================================ */\n  .steps {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-4);\n  }\n  @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }\n\n  .step {\n    padding: var(--space-6);\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    position: relative;\n  }\n  .step-num {\n    width: 36px; height: 36px;\n    border-radius: var(--radius-full);\n    background: var(--color-primary-700);\n    color: var(--color-white);\n    display: grid; place-items: center;\n    font-family: var(--font-display);\n    font-size: var(--text-lg);\n    line-height: 1;\n    margin-bottom: var(--space-4);\n  }\n  .step h4 {\n    font-size: var(--text-lg);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-2);\n  }\n  .step p {\n    color: var(--color-neutral-700);\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n  .step .tag {\n    margin-top: var(--space-4);\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--color-neutral-500);\n  }\n\n  /* ============================================\n   * Demo widget block\n   * ============================================ */\n  .demo-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: var(--space-12);\n    align-items: center;\n  }\n  @media (min-width: 1024px) {\n    .demo-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); }\n  }\n  .demo-bullets { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-4); }\n  .demo-bullets li {\n    display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start;\n    font-size: var(--text-base); color: var(--color-neutral-700); line-height: var(--leading-relaxed);\n  }\n  .demo-bullets .checkmark {\n    width: 24px; height: 24px; border-radius: var(--radius-full);\n    background: var(--color-primary-100);\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    margin-top: 2px;\n  }\n  .demo-bullets strong { color: var(--color-neutral-950); display: block; font-weight: var(--font-weight-semibold); margin-bottom: 2px; }\n\n  /* Phone mock */\n  .phone {\n    background: var(--color-neutral-950);\n    border-radius: 40px;\n    padding: 12px;\n    box-shadow: var(--shadow-xl);\n    max-width: 380px;\n    margin: 0 auto;\n  }\n  .phone-screen {\n    background: var(--color-neutral-50);\n    border-radius: 28px;\n    overflow: hidden;\n    aspect-ratio: 9 / 18;\n    display: flex; flex-direction: column;\n  }\n  .phone-status {\n    padding: 18px var(--space-6) var(--space-3);\n    display: flex; justify-content: space-between; align-items: center;\n    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    color: var(--color-neutral-950);\n  }\n  .wa-header {\n    background: var(--color-primary-900); color: var(--color-primary-100);\n    padding: var(--space-3) var(--space-4);\n    display: flex; align-items: center; gap: var(--space-3);\n  }\n  .wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-300); color: var(--color-primary-900); display:grid; place-items:center; font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .wa-name { color: var(--color-white); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }\n  .wa-sub { color: var(--color-primary-300); font-size: 11px; }\n  .wa-body { background: #ECE5DD; flex: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }\n  .bubble {\n    max-width: 85%;\n    padding: var(--space-3) var(--space-4);\n    border-radius: 14px;\n    font-size: var(--text-sm);\n    line-height: var(--leading-snug);\n    box-shadow: 0 1px 1px rgba(0,0,0,0.08);\n  }\n  .bubble.in { background: var(--color-white); color: var(--color-neutral-900); align-self: flex-start; border-top-left-radius: 4px; }\n  .bubble.out { background: #DCF8C6; color: var(--color-neutral-900); align-self: flex-end; border-top-right-radius: 4px; }\n  .bubble small { color: var(--color-neutral-500); font-size: 10px; display: block; margin-top: 4px; }\n  .bubble .render-placeholder {\n    margin-top: var(--space-2);\n    border-radius: 8px;\n    overflow: hidden;\n    background: repeating-linear-gradient(45deg, var(--color-primary-100), var(--color-primary-100) 8px, var(--color-primary-50) 8px, var(--color-primary-50) 16px);\n    aspect-ratio: 4/3;\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    font-family: var(--font-mono); font-size: 10px;\n    letter-spacing: 0.08em;\n  }\n\n  /* ============================================\n   * Features grid\n   * ============================================ */\n  .features-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-4);\n  }\n  @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }\n\n  .feature {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n  }\n  .feature .ico {\n    width: 44px; height: 44px;\n    border-radius: var(--radius-lg);\n    background: var(--color-primary-100);\n    color: var(--color-primary-700);\n    display: grid; place-items: center;\n    margin-bottom: var(--space-4);\n  }\n  .feature.alt .ico { background: var(--color-accent-100); color: var(--color-accent-900); }\n  .feature h3 {\n    font-size: var(--text-xl);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-2);\n  }\n  .feature p {\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n    margin: 0;\n  }\n\n  /* ============================================\n   * Honesty banner\n   * ============================================ */\n  .honesty {\n    border-left: 4px solid var(--color-warning-500);\n    background: var(--color-warning-100);\n    color: var(--color-warning-700);\n    padding: var(--space-6) var(--space-8);\n    border-radius: var(--radius-lg);\n    display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start;\n  }\n  .honesty strong { color: var(--color-warning-700); display: block; margin-bottom: 4px; font-size: var(--text-base); }\n  .honesty p { margin: 0; color: var(--color-neutral-700); font-size: var(--text-base); line-height: var(--leading-relaxed); }\n  .honesty .ico-warn {\n    width: 32px; height: 32px; border-radius: var(--radius-full);\n    background: var(--color-white); display:grid; place-items:center;\n    color: var(--color-warning-500);\n  }\n\n  /* ============================================\n   * Pricing\n   * ============================================ */\n  .pricing-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-6);\n    align-items: stretch;\n  }\n  @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }\n\n  .price-card {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n    display: flex; flex-direction: column;\n    position: relative;\n  }\n  .price-card.featured {\n    border: 2px solid var(--color-primary-700);\n    box-shadow: var(--shadow-lg);\n  }\n  .price-ribbon {\n    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);\n    background: var(--color-primary-700); color: var(--color-white);\n    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);\n    padding: 4px 12px; border-radius: var(--radius-full);\n    letter-spacing: 0.04em;\n  }\n  .price-name {\n    font-size: var(--text-sm);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary-700);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    margin: 0 0 var(--space-2);\n  }\n  .price-desc { color: var(--color-neutral-500); font-size: var(--text-sm); margin: 0 0 var(--space-6); line-height: var(--leading-relaxed); }\n  .price-amount {\n    font-family: var(--font-display);\n    font-size: var(--text-6xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n    display: flex; align-items: baseline; gap: var(--space-2);\n    margin-bottom: var(--space-2);\n  }\n  .price-amount .per {\n    font-family: var(--font-sans); font-size: var(--text-base);\n    color: var(--color-neutral-500); font-weight: var(--font-weight-regular);\n  }\n  .price-note { color: var(--color-neutral-500); font-size: var(--text-sm); margin: 0 0 var(--space-6); }\n  .price-features { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; gap: var(--space-3); flex: 1; }\n  .price-features li {\n    display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start;\n    font-size: var(--text-sm); color: var(--color-neutral-700); line-height: var(--leading-relaxed);\n  }\n  .price-features svg { color: var(--color-primary-500); margin-top: 4px; }\n  .price-features li.muted svg { color: var(--color-neutral-300); }\n  .price-features li.muted { color: var(--color-neutral-400); }\n\n  /* ============================================\n   * Testimonials\n   * ============================================ */\n  .testimonials {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-6);\n  }\n  @media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }\n\n  .quote-card {\n    background: var(--color-white);\n    border: 1px solid var(--surface-border);\n    border-radius: var(--radius-xl);\n    padding: var(--space-8);\n  }\n  .quote-card blockquote {\n    margin: 0 0 var(--space-6);\n    font-family: var(--font-display);\n    font-style: italic;\n    font-size: var(--text-2xl);\n    line-height: var(--leading-snug);\n    color: var(--color-neutral-950);\n    letter-spacing: -0.005em;\n  }\n  .quote-author {\n    display: flex; align-items: center; gap: var(--space-3);\n    padding-top: var(--space-4);\n    border-top: 1px solid var(--surface-border);\n  }\n  .quote-avatar {\n    width: 44px; height: 44px; border-radius: var(--radius-full);\n    background: var(--color-primary-100); color: var(--color-primary-900);\n    display: grid; place-items: center; font-weight: var(--font-weight-semibold);\n    font-size: var(--text-sm);\n  }\n  .quote-name { color: var(--color-neutral-950); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }\n  .quote-role { color: var(--color-neutral-500); font-size: var(--text-xs); font-family: var(--font-mono); }\n\n  /* ============================================\n   * Stats strip\n   * ============================================ */\n  .stats {\n    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);\n    padding: var(--space-12) 0;\n    border-top: 1px solid var(--surface-border);\n    border-bottom: 1px solid var(--surface-border);\n  }\n  @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); padding: var(--space-16) 0; } }\n  .stat { text-align: left; }\n  .stat .num {\n    font-family: var(--font-display);\n    font-size: var(--text-5xl);\n    color: var(--color-neutral-950);\n    line-height: 1;\n    letter-spacing: -0.01em;\n  }\n  .stat .num em { color: var(--color-primary-700); font-style: normal; }\n  .stat .lbl {\n    margin-top: var(--space-3);\n    color: var(--color-neutral-500);\n    font-size: var(--text-sm);\n    line-height: var(--leading-snug);\n  }\n\n  /* ============================================\n   * FAQ\n   * ============================================ */\n  .faq { max-width: var(--container-narrow); margin: 0 auto; }\n  .faq details {\n    border-bottom: 1px solid var(--surface-border);\n    padding: var(--space-6) 0;\n  }\n  .faq details[open] summary .chev { transform: rotate(45deg); }\n  .faq summary {\n    list-style: none;\n    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);\n    cursor: pointer;\n    font-size: var(--text-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-neutral-950);\n    line-height: var(--leading-snug);\n  }\n  .faq summary::-webkit-details-marker { display: none; }\n  .faq .chev {\n    flex-shrink: 0;\n    width: 28px; height: 28px;\n    display: grid; place-items: center;\n    color: var(--color-primary-700);\n    font-size: var(--text-xl);\n    transition: transform var(--duration-base) var(--easing-out);\n    line-height: 1;\n  }\n  .faq .answer {\n    margin-top: var(--space-4);\n    color: var(--color-neutral-700);\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ============================================\n   * Final CTA\n   * ============================================ */\n  .final-cta {\n    background: var(--color-primary-900);\n    color: var(--color-primary-100);\n    border-radius: var(--radius-2xl);\n    padding: var(--space-16) var(--space-8);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .final-cta::before {\n    content: \"\"; position: absolute; inset: -50% auto auto -20%;\n    width: 60%; aspect-ratio: 1; border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(168, 200, 181, 0.18), transparent 70%);\n    pointer-events: none;\n  }\n  .final-cta::after {\n    content: \"\"; position: absolute; inset: auto -20% -50% auto;\n    width: 60%; aspect-ratio: 1; border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(194, 94, 51, 0.16), transparent 70%);\n    pointer-events: none;\n  }\n  .final-cta-inner { position: relative; }\n  .final-cta h2 {\n    font-family: var(--font-display);\n    color: var(--color-white);\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    margin: 0 0 var(--space-4);\n    line-height: var(--leading-tight);\n  }\n  .final-cta p {\n    color: var(--color-primary-300);\n    font-size: var(--text-lg);\n    max-width: 560px; margin: 0 auto var(--space-8);\n  }\n  .final-cta .btn-primary {\n    background: var(--color-white); color: var(--color-primary-900);\n  }\n  .final-cta .btn-primary:hover { background: var(--color-primary-100); }\n  .final-cta .btn-ghost { color: var(--color-primary-100); }\n  .final-cta .btn-ghost:hover { background: rgba(255,255,255,0.06); }\n\n  /* ============================================\n   * Footer\n   * ============================================ */\n  footer {\n    padding: var(--space-16) 0 var(--space-12);\n    border-top: 1px solid var(--surface-border);\n    background: var(--color-white);\n  }\n  .foot-grid {\n    display: grid; grid-template-columns: 1fr; gap: var(--space-8);\n    margin-bottom: var(--space-12);\n  }\n  @media (min-width: 1024px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } }\n  .foot-col h5 {\n    font-size: var(--text-sm);\n    color: var(--color-neutral-950);\n    margin: 0 0 var(--space-4);\n    font-weight: var(--font-weight-semibold);\n  }\n  .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }\n  .foot-col a { color: var(--color-neutral-500); font-size: var(--text-sm); }\n  .foot-col a:hover { color: var(--color-neutral-950); }\n  .foot-tag { color: var(--color-neutral-500); font-size: var(--text-sm); max-width: 320px; margin-top: var(--space-4); line-height: var(--leading-relaxed); }\n  .foot-bar {\n    display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);\n    padding-top: var(--space-8);\n    border-top: 1px solid var(--surface-border);\n    color: var(--color-neutral-500); font-size: var(--text-xs);\n    flex-wrap: wrap;\n  }\n  .foot-bar .mono { font-family: var(--font-mono); letter-spacing: 0.04em; }\n</style>\n</head>\n<body>\n\n<!-- ============================================\n Topbar\n============================================ -->\n<header class=\"topbar\">\n  <div class=\"container topbar-inner\">\n    <a href=\"#\" class=\"brand\">\n      <span class=\"brand-mark\">R</span>\n      Reformix\n    </a>\n    <nav class=\"nav\" aria-label=\"Principal\">\n      <a href=\"#problema\">Por qué Reformix</a>\n      <a href=\"#como-funciona\">Cómo funciona</a>\n      <a href=\"#precios\">Precios</a>\n      <a href=\"#faq\">Preguntas</a>\n    </nav>\n    <div class=\"topbar-actions\">\n      <a href=\"#\" class=\"btn btn-ghost btn-sm\">Entrar</a>\n      <a href=\"/signup\" class=\"btn btn-primary btn-sm\">Empezar gratis</a>\n    </div>\n  </div>\n</header>\n\n<!-- ============================================\n Hero\n============================================ -->\n<section class=\"hero\">\n  <div class=\"container hero-grid\">\n    <div>\n      <span class=\"eyebrow\"><span class=\"dot\"></span> Para empresas de reformas en España</span>\n      <h1 class=\"hero-title\">\n        Averigua <em>cuánto vale cada obra</em> antes de coger el coche.\n      </h1>\n      <p class=\"hero-sub\">\n        El asistente de voz de Reformix atiende la llamada de tu cliente, le pide las fotos y te devuelve un render y un presupuesto orientativo por partidas. Llegas a cada visita sabiendo el tamaño real del trabajo — y solo te desplazas a las obras que te rentan.\n      </p>\n      <div class=\"hero-ctas\">\n        <a href=\"/signup\" class=\"btn btn-primary btn-lg\">Empezar gratis 14 días</a>\n        <a href=\"#demo\" class=\"btn btn-secondary btn-lg\">Ver una demo en vivo</a>\n      </div>\n      <div class=\"hero-meta\">\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Sin tarjeta para probar</span>\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Tu número, tu marca</span>\n        <span><svg class=\"check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Cancela cuando quieras</span>\n      </div>\n    </div>\n\n    <!-- Hero visual: panel de leads mock -->\n    <div class=\"hero-visual\" id=\"demo\" aria-label=\"Vista previa del panel de leads\">\n      <div class=\"mock-bar\">\n        <span class=\"mock-dot\" style=\"background: var(--color-danger-500);\"></span>\n        <span class=\"mock-dot\" style=\"background: var(--color-warning-500);\"></span>\n        <span class=\"mock-dot\" style=\"background: var(--color-success-500);\"></span>\n        <span class=\"mock-url\">panel.reformix.es / leads</span>\n      </div>\n      <div class=\"mock-body\">\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\">MR</div>\n          <div>\n            <div class=\"lead-name\">María Rivas · Cocina · Madrid</div>\n            <div class=\"lead-meta\">Hace 4 min · 24 m² · calidad media</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-primary\"><span class=\"pulse\"></span> Nuevo</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            12.400€\n            <span>orientativo</span>\n          </div>\n        </div>\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\" style=\"background: var(--color-accent-100); color: var(--color-accent-900);\">JF</div>\n          <div>\n            <div class=\"lead-name\">Jorge Fernández · Baño completo · Pinto</div>\n            <div class=\"lead-meta\">Hace 32 min · 6 m² · calidad premium</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-info\">📞 Contactado</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            9.150€\n            <span>orientativo</span>\n          </div>\n        </div>\n        <div class=\"lead-card\">\n          <div class=\"lead-avatar\">CL</div>\n          <div>\n            <div class=\"lead-name\">Carmen López · Reforma integral · Móstoles</div>\n            <div class=\"lead-meta\">Ayer · 72 m² · calidad media</div>\n            <div style=\"margin-top: 8px;\"><span class=\"badge badge-warning\">📅 Visita martes 10:30</span></div>\n          </div>\n          <div class=\"lead-amount\">\n            41.800€\n            <span>orientativo</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"float-chip float-chip-1\">\n        <div class=\"icon green\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2.01z\"></path></svg>\n        </div>\n        <div>\n          <strong>Llamada nueva</strong>\n          <small>+34 663 ··· 21 · 00:47</small>\n        </div>\n      </div>\n      <div class=\"float-chip float-chip-2\">\n        <div class=\"icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path></svg>\n        </div>\n        <div>\n          <strong>Render listo</strong>\n          <small>Cocina · 3 propuestas</small>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Logo strip\n============================================ -->\n<div class=\"logos\">\n  <div class=\"container\">\n    <div class=\"logos-inner\">\n      <p>Reformistas que ya prueban Reformix en Madrid, Valencia y Sevilla</p>\n      <div class=\"logo-item\">Obras Bermejo</div>\n      <div class=\"logo-item sans\">CASAFINA</div>\n      <div class=\"logo-item mono\">Reformas&nbsp;71</div>\n      <div class=\"logo-item\">Talleres Quintana</div>\n      <div class=\"logo-item sans\">VEGA&amp;HIJOS</div>\n      <div class=\"logo-item mono\">Atelier&nbsp;Río</div>\n    </div>\n  </div>\n</div>\n\n<!-- ============================================\n Problema\n============================================ -->\n<section class=\"section section-muted\" id=\"problema\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">El sector hoy</p>\n      <h2 class=\"section-title\">Tu agenda no distingue una obra de 40.000 € de un <em>cambio de grifo</em>.</h2>\n      <p class=\"section-lede\">Sin saber qué hay detrás de cada llamada, inviertes lo mismo en la obra que te cambia el año que en la que te roba la mañana. Así llevamos veinte años.</p>\n    </div>\n\n    <div class=\"broken-grid\">\n      <div class=\"broken-card\">\n        <div class=\"num\">01 · CAPTACIÓN</div>\n        <h3>Pagas por el mismo lead que cinco competidores.</h3>\n        <p>Los portales venden cada contacto varias veces. Ganas el que más rápido llame, no el que mejor trabaje. El cliente acaba agotado de llamadas.</p>\n      </div>\n      <div class=\"broken-card\">\n        <div class=\"num\">02 · VISITA</div>\n        <h3>Conduces 40 km y era cambiar un grifo.</h3>\n        <p>Sin información previa, cada visita es una apuesta. Una de cada tres no acaba en presupuesto, y muchas de las que sí, no compensan el desplazamiento.</p>\n      </div>\n      <div class=\"broken-card\">\n        <div class=\"num\">03 · PRESUPUESTO</div>\n        <h3>Tardas tres días en mandar un PDF que ya no leen.</h3>\n        <p>Cuando llega tu propuesta, otros dos reformistas ya pasaron por la casa. El cliente se decide por precio porque no sabe comparar otra cosa.</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Cómo funciona\n============================================ -->\n<section class=\"section\" id=\"como-funciona\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Cómo funciona</p>\n      <h2 class=\"section-title\">Del primer \"hola\" al presupuesto firmado, <em>en una tarde</em>.</h2>\n      <p class=\"section-lede\">Reformix conecta cuatro piezas que antes nadie había unido: agente de voz, render IA, WhatsApp y tu panel de gestión.</p>\n    </div>\n\n    <div class=\"steps\">\n      <div class=\"step\">\n        <div class=\"step-num\">1</div>\n        <h4>El cliente llama a tu número</h4>\n        <p>El asistente IA contesta con tu marca, pregunta lo necesario y agenda una visita o pide fotos. Atiende en castellano, catalán y valenciano.</p>\n        <div class=\"tag\">⌁ Agente de voz</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">2</div>\n        <h4>Se genera un render orientativo</h4>\n        <p>A partir de las fotos del cliente, Reformix devuelve 3 propuestas visuales con calidades básica, media y premium. Ya tienes de qué hablar en la visita.</p>\n        <div class=\"tag\">⌁ Render IA</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">3</div>\n        <h4>Llega un presupuesto por WhatsApp</h4>\n        <p>En minutos. Con desglose por partidas, plazos y la frase honesta: \"es orientativo, tu visita sigue siendo la que cierra\".</p>\n        <div class=\"tag\">⌁ WhatsApp</div>\n      </div>\n      <div class=\"step\">\n        <div class=\"step-num\">4</div>\n        <h4>Tú visitas y firmas</h4>\n        <p>Solo a los que ya están dentro. Marcas el lead como ganado, perdido o aplazado desde el panel. Reformix aprende para la próxima.</p>\n        <div class=\"tag\">⌁ Panel reformista</div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Demo / WhatsApp\n============================================ -->\n<section class=\"section section-emphasis\">\n  <div class=\"container demo-grid\">\n    <div>\n      <p class=\"section-kicker\">Lo que recibe tu cliente</p>\n      <h2 class=\"section-title\">Un presupuesto <em>en su WhatsApp</em>, no en un PDF que se pierde.</h2>\n      <p class=\"section-lede\">El mismo canal que ya usa todos los días. Sin descargar apps, sin registrarse en portales, sin esperar tres días.</p>\n      <ul class=\"demo-bullets\">\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Tres calidades, no una</strong>El cliente compara básica, media y premium. Entiende qué está pagando y por qué.</div>\n        </li>\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Render asociado a cada precio</strong>Ve la cocina, no una hoja de Excel. Las dudas bajan, la confianza sube.</div>\n        </li>\n        <li>\n          <span class=\"checkmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span>\n          <div><strong>Honestidad explícita</strong>\"Es orientativo. Tu visita sigue siendo la que cierra.\" Lo decimos en cada presupuesto.</div>\n        </li>\n      </ul>\n      <a href=\"#cta\" class=\"btn btn-primary btn-md\">Quiero verlo con mi negocio</a>\n    </div>\n\n    <div>\n      <div class=\"phone\" aria-hidden=\"true\">\n        <div class=\"phone-screen\">\n          <div class=\"phone-status\">\n            <span>9:41</span>\n            <span>·····</span>\n          </div>\n          <div class=\"wa-header\">\n            <div class=\"wa-avatar\">R</div>\n            <div>\n              <div class=\"wa-name\">Reformas Bermejo</div>\n              <div class=\"wa-sub\">en línea</div>\n            </div>\n          </div>\n          <div class=\"wa-body\">\n            <div class=\"bubble in\">\n              ¡Hola María! 👋 Soy el asistente de Bermejo. Te paso el presupuesto orientativo de tu cocina.\n              <small>09:42</small>\n            </div>\n            <div class=\"bubble in\">\n              <div class=\"render-placeholder\">RENDER · COCINA · CALIDAD MEDIA</div>\n              Calidad media · 24 m²<br>\n              <strong>12.400 €</strong> · 18 días<br>\n              <small>09:42</small>\n            </div>\n            <div class=\"bubble out\">\n              ¿Puedo ver también la premium?\n              <small>09:44</small>\n            </div>\n            <div class=\"bubble in\">\n              Claro 👇 Y recuerda: es orientativo, la visita es la que cierra.\n              <small>09:44</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Features grid\n============================================ -->\n<section class=\"section\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Lo que hace por ti</p>\n      <h2 class=\"section-title\">Una herramienta de trabajo. <em>No un escaparate más.</em></h2>\n    </div>\n\n    <div class=\"features-grid\">\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2.01z\"></path></svg>\n        </div>\n        <h3>Asistente IA 24/7</h3>\n        <p>Contesta llamadas a las once de la noche y los sábados. Filtra al curioso, cualifica al que va en serio.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path></svg>\n        </div>\n        <h3>Renders en minutos</h3>\n        <p>Tres propuestas visuales por obra. Calidad básica, media y premium. Útiles para hablar, no para presumir.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><path d=\"M16 13H8\"></path><path d=\"M16 17H8\"></path><path d=\"M10 9H8\"></path></svg>\n        </div>\n        <h3>Presupuesto orientativo</h3>\n        <p>Por partidas, con plazos. Sabes el tamaño real de la obra antes de poner un pie en la casa — y tu cliente entiende qué está comprando.</p>\n      </div>\n      <div class=\"feature alt\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"></path></svg>\n        </div>\n        <h3>Entrega por WhatsApp</h3>\n        <p>El canal donde ya está tu cliente. Cero fricción de descargas, registros o apps que nadie va a usar.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"></path><path d=\"m7 14 4-4 4 4 5-5\"></path></svg>\n        </div>\n        <h3>Panel con cabeza</h3>\n        <p>Una bandeja, no diez. De un vistazo ves qué lead vale tu mañana: estado, llamada, render, presupuesto y nota. Sin tabs perdidos.</p>\n      </div>\n      <div class=\"feature\">\n        <div class=\"ico\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"></circle><path d=\"M15.477 12.89 17 22l-5-3-5 3 1.523-9.11\"></path></svg>\n        </div>\n        <h3>Sello \"Precio Justo\"</h3>\n        <p>Tu rango de precios queda registrado. El cliente sabe que no le estás vendiendo humo. Tú diferencias frente al portal.</p>\n      </div>\n    </div>\n\n    <div style=\"margin-top: var(--space-12);\">\n      <div class=\"honesty\">\n        <div class=\"ico-warn\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path><line x1=\"12\" x2=\"12\" y1=\"9\" y2=\"13\"></line><line x1=\"12\" x2=\"12.01\" y1=\"17\" y2=\"17\"></line></svg>\n        </div>\n        <div>\n          <strong>Lo que Reformix no es.</strong>\n          <p>No es un marketplace que revende tu cliente cinco veces. No te promete leads garantizados. No sustituye tu visita, tu obra ni tu palabra. Es una herramienta para llegar mejor preparado, eso es todo.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Stats\n============================================ -->\n<section>\n  <div class=\"container\">\n    <div class=\"stats\">\n      <div class=\"stat\">\n        <div class=\"num\"><em>2,7×</em></div>\n        <div class=\"lbl\">más visitas que terminan en presupuesto firmado, frente al lead de portal.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>14</em> min</div>\n        <div class=\"lbl\">de media desde que entra la llamada hasta que el cliente recibe presupuesto.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>−63%</em></div>\n        <div class=\"lbl\">de visitas en frío. Vas solo a las casas donde ya hay obra real.</div>\n      </div>\n      <div class=\"stat\">\n        <div class=\"num\"><em>89%</em></div>\n        <div class=\"lbl\">de los clientes finales contestan al WhatsApp con el render. Era un 14% en email.</div>\n      </div>\n    </div>\n    <p style=\"text-align: center; font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: var(--space-6); font-family: var(--font-mono);\">\n      Datos del piloto cerrado · 18 empresas · ene–abr 2026 · Madrid + Valencia\n    </p>\n  </div>\n</section>\n\n<!-- ============================================\n Pricing\n============================================ -->\n<section class=\"section section-muted\" id=\"precios\">\n  <div class=\"container\">\n    <div class=\"section-head center\">\n      <p class=\"section-kicker\">Precios</p>\n      <h2 class=\"section-title\">Precios <em>de herramienta</em>, no de portal.</h2>\n      <p class=\"section-lede\">Pagas un mes plano. Sin comisión por lead, sin pujas, sin \"destacar tu perfil\". Lo que captes es tuyo.</p>\n    </div>\n\n    <div class=\"pricing-grid\">\n      <div class=\"price-card\">\n        <div class=\"price-name\">Starter</div>\n        <p class=\"price-desc\">Para autónomos y equipos de hasta dos. Para probar el modelo sin compromiso.</p>\n        <div class=\"price-amount\">29€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">5 leads procesados / mes · 3€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Asistente IA en castellano</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Renders + presupuesto por WhatsApp</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Panel de leads básico</li>\n          <li class=\"muted\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg> Branding tuyo en WhatsApp</li>\n          <li class=\"muted\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg> Sello Precio Justo</li>\n        </ul>\n        <a href=\"/signup\" class=\"btn btn-secondary btn-md\">Empezar gratis</a>\n      </div>\n\n      <div class=\"price-card featured\">\n        <div class=\"price-ribbon\">Recomendado</div>\n        <div class=\"price-name\">Pro</div>\n        <p class=\"price-desc\">El plan que están usando los reformistas del piloto. Empresas de 2 a 10 personas.</p>\n        <div class=\"price-amount\">79€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">15 leads procesados / mes · 2,50€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Todo lo de Starter</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Asistente en 3 idiomas (ES, CA, VA)</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> 3 calidades por presupuesto</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Branding tuyo en WhatsApp</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Aviso de licencia urbanística</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Sello Precio Justo Certificado</li>\n        </ul>\n        <a href=\"/signup\" class=\"btn btn-primary btn-md\">Empezar 14 días gratis</a>\n      </div>\n\n      <div class=\"price-card\">\n        <div class=\"price-name\">Business</div>\n        <p class=\"price-desc\">Empresas medianas (más de 10 personas) o con varias delegaciones.</p>\n        <div class=\"price-amount\">199€<span class=\"per\">/mes</span></div>\n        <p class=\"price-note\">50 leads procesados / mes · 2€ por lead extra</p>\n        <ul class=\"price-features\">\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Todo lo de Pro</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Varias delegaciones · routing por zona</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Integración con tu ERP / CRM</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Manager dedicado de cuenta</li>\n          <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> Soporte por teléfono</li>\n        </ul>\n        <a href=\"#cta\" class=\"btn btn-secondary btn-md\">Hablar con nosotros</a>\n      </div>\n    </div>\n\n    <p style=\"text-align: center; margin-top: var(--space-8); color: var(--color-neutral-500); font-size: var(--text-sm); max-width: 640px; margin-left: auto; margin-right: auto;\">\n      Un <em>lead procesado</em> es una conversación cualificada que termina en presupuesto enviado al cliente. Los descartados por el asistente IA no cuentan.\n    </p>\n  </div>\n</section>\n\n<!-- ============================================\n Testimonios\n============================================ -->\n<section class=\"section\">\n  <div class=\"container\">\n    <div class=\"section-head\">\n      <p class=\"section-kicker\">Lo que dicen</p>\n      <h2 class=\"section-title\">Reformistas que <em>ya están dentro</em>.</h2>\n    </div>\n\n    <div class=\"testimonials\">\n      <div class=\"quote-card\">\n        <blockquote>\n          \"Lo del render se lo enseño antes de subir a la obra y se acaban las charlas raras de qué va a costar. Llego, mido, y ya estamos hablando del mismo idioma.\"\n        </blockquote>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">AB</div>\n          <div>\n            <div class=\"quote-name\">Antonio Bermejo</div>\n            <div class=\"quote-role\">Reformas Bermejo · Madrid · 9 obras/mes</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"quote-card\">\n        <blockquote>\n          \"Llevo veinte años en esto y nunca había podido contestar a un cliente un domingo a las once. Ahora le contesta Reformix y el lunes ya tengo presupuesto enviado.\"\n        </blockquote>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\" style=\"background: var(--color-accent-100); color: var(--color-accent-900);\">MV</div>\n          <div>\n            <div class=\"quote-name\">Marisa Vega</div>\n            <div class=\"quote-role\">Vega &amp; Hijos · Valencia · 12 personas</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n FAQ\n============================================ -->\n<section class=\"section section-muted\" id=\"faq\">\n  <div class=\"container\">\n    <div class=\"section-head center\">\n      <p class=\"section-kicker\">Preguntas frecuentes</p>\n      <h2 class=\"section-title\">Lo que nos preguntáis <em>antes de firmar</em>.</h2>\n    </div>\n\n    <div class=\"faq\">\n      <details open=\"\">\n        <summary>¿Esto no me va a quitar el trato humano con el cliente?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Al revés. Llegas a la visita con la conversación medio hecha: ya sabes qué quiere, qué calidad, qué presupuesto le encaja. Te queda más tiempo para lo que sí necesita un humano: medir bien, escuchar, vender tu obra.</div>\n      </details>\n      <details>\n        <summary>¿Y si el cliente me llama con un proyecto raro que la IA no sabe presupuestar?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">El asistente sabe decir \"esto necesita un humano\" y te lo pasa directamente, con la grabación y un resumen. Reformix no inventa: si no tiene datos para presupuestar, no presupuesta.</div>\n      </details>\n      <details>\n        <summary>¿Quién es el dueño de los leads?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Tú. Siempre. Reformix no revende ni comparte tus leads con nadie. Es la diferencia con un marketplace: aquí pagas la herramienta, no el contacto.</div>\n      </details>\n      <details>\n        <summary>¿Y la licencia urbanística? No quiero meter en líos a nadie.<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">En cada presupuesto que requiere obra mayor aparece un aviso explícito: \"Esta obra puede requerir licencia urbanística — consúltalo en tu ayuntamiento\". No vendemos como menor lo que es mayor.</div>\n      </details>\n      <details>\n        <summary>¿Qué pasa si lo pruebo y no me convence?<span class=\"chev\">+</span></summary>\n        <div class=\"answer\">Lo dejas. Cancelas desde el panel sin llamar a nadie. Los primeros 14 días son gratis y no pedimos tarjeta hasta el día 15.</div>\n      </details>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Final CTA\n============================================ -->\n<section class=\"section\" id=\"cta\">\n  <div class=\"container\">\n    <div class=\"final-cta\">\n      <div class=\"final-cta-inner\">\n        <h2>Empieza esta semana. Cierra obras la siguiente.</h2>\n        <p>14 días gratis, sin tarjeta, sin compromiso. Si en dos semanas no estás cerrando más, lo cancelas y nos despedimos como amigos.</p>\n        <div class=\"hero-ctas\" style=\"justify-content: center;\">\n          <a href=\"/signup\" class=\"btn btn-primary btn-lg\">Empezar gratis 14 días</a>\n          <a href=\"#\" class=\"btn btn-ghost btn-lg\">Hablar con un humano →</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================================\n Footer\n============================================ -->\n<footer>\n  <div class=\"container\">\n    <div class=\"foot-grid\">\n      <div class=\"foot-col\">\n        <a href=\"#\" class=\"brand\">\n          <span class=\"brand-mark\">R</span>\n          Reformix\n        </a>\n        <p class=\"foot-tag\">Un mercado de reformas más justo. Para los profesionales que cumplen lo que prometen.</p>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Producto</h5>\n        <ul>\n          <li><a href=\"#\">Asistente IA</a></li>\n          <li><a href=\"#\">Renders</a></li>\n          <li><a href=\"#\">Panel reformista</a></li>\n          <li><a href=\"#\">Precios</a></li>\n        </ul>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Empresa</h5>\n        <ul>\n          <li><a href=\"#\">Sobre nosotros</a></li>\n          <li><a href=\"#\">Blog</a></li>\n          <li><a href=\"#\">Contacto</a></li>\n          <li><a href=\"#\">Trabaja con nosotros</a></li>\n        </ul>\n      </div>\n      <div class=\"foot-col\">\n        <h5>Legal</h5>\n        <ul>\n          <li><a href=\"#\">Condiciones</a></li>\n          <li><a href=\"#\">Privacidad</a></li>\n          <li><a href=\"#\">Cookies</a></li>\n          <li><a href=\"#\">Sello Precio Justo</a></li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"foot-bar\">\n      <span>© 2026 Reformix — Hecho en Madrid.</span>\n      <span class=\"mono\">v1.0 · ES</span>\n    </div>\n  </div>\n</footer>\n\n\n\n</body></html>"
   </script>
 </body>
 </html>
\ No newline at end of file
