3748 lines
118 KiB
HTML
3748 lines
118 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Reformix — Para reformistas</title>
|
||
<link rel="icon" href="/b2b-assets/img/icon.svg" type="image/svg+xml" />
|
||
<script>
|
||
document.documentElement.classList.add("js");
|
||
</script>
|
||
<style>
|
||
/* Reformix — Design Tokens
|
||
* Generado a partir de design-system.md + design-tokens.json
|
||
* Stack: Tailwind + shadcn/ui (compatibilidad con CSS custom properties)
|
||
* Versión: 1.0 (2026-05-24)
|
||
*/
|
||
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Instrument Serif";
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/60f0ecce-40bf-4952-a5d0-c64eb7d90838.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Instrument Serif";
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/3564a927-e275-4816-b6c1-cc99fc1dcdab.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Instrument Serif";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/15d36112-e39a-4059-ae12-06c58a5747ac.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Instrument Serif";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/421ba28b-7abe-4b86-a87c-fcd3e94378f7.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/49e48789-614f-48bf-9256-df3caab8c123.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c4f99f5c-1856-4a0e-9de5-7834190c77b0.woff2")
|
||
format("woff2");
|
||
unicode-range: U+1F00-1FFF;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/40945437-5659-40b2-bfd8-fd664ad1615e.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/158fbdf5-8d90-47a9-bc8e-5d21e3bafce8.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/00430955-27e4-4cea-b94e-787f11af509f.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/e9c2548b-cd31-41e0-bc94-aac65cc4b6eb.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/49e48789-614f-48bf-9256-df3caab8c123.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c4f99f5c-1856-4a0e-9de5-7834190c77b0.woff2")
|
||
format("woff2");
|
||
unicode-range: U+1F00-1FFF;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/40945437-5659-40b2-bfd8-fd664ad1615e.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/158fbdf5-8d90-47a9-bc8e-5d21e3bafce8.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/00430955-27e4-4cea-b94e-787f11af509f.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/e9c2548b-cd31-41e0-bc94-aac65cc4b6eb.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/49e48789-614f-48bf-9256-df3caab8c123.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c4f99f5c-1856-4a0e-9de5-7834190c77b0.woff2")
|
||
format("woff2");
|
||
unicode-range: U+1F00-1FFF;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/40945437-5659-40b2-bfd8-fd664ad1615e.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/158fbdf5-8d90-47a9-bc8e-5d21e3bafce8.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/00430955-27e4-4cea-b94e-787f11af509f.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/e9c2548b-cd31-41e0-bc94-aac65cc4b6eb.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c8bfb9ea-7aca-4f8d-8f7c-3e648ef6cb5b.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/49e48789-614f-48bf-9256-df3caab8c123.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/c4f99f5c-1856-4a0e-9de5-7834190c77b0.woff2")
|
||
format("woff2");
|
||
unicode-range: U+1F00-1FFF;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/40945437-5659-40b2-bfd8-fd664ad1615e.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/158fbdf5-8d90-47a9-bc8e-5d21e3bafce8.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/00430955-27e4-4cea-b94e-787f11af509f.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/e9c2548b-cd31-41e0-bc94-aac65cc4b6eb.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/ca40d6e0-4a50-4481-8e30-74c159ef9cee.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/556fa156-4d6a-481e-a43b-d7ab5fb934a9.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/af8b43b5-1741-407a-be2e-9881a5996d70.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/12581ec4-115f-4ba1-8b57-50addc6b546c.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* cyrillic-ext */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/a7d33cb8-a5f1-44bf-bf3c-564e7ea0619a.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||
U+FE2E-FE2F;
|
||
}
|
||
/* cyrillic */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/ca40d6e0-4a50-4481-8e30-74c159ef9cee.woff2")
|
||
format("woff2");
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||
}
|
||
/* greek */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/556fa156-4d6a-481e-a43b-d7ab5fb934a9.woff2")
|
||
format("woff2");
|
||
unicode-range:
|
||
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
|
||
U+03A3-03FF;
|
||
}
|
||
/* vietnamese */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/4d99cd2e-393d-4b95-bcfa-8f2a24ac6f7b.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/af8b43b5-1741-407a-be2e-9881a5996d70.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/b2b-assets/fonts/12581ec4-115f-4ba1-8b57-50addc6b546c.woff2")
|
||
format("woff2");
|
||
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;
|
||
}
|
||
|
||
:root {
|
||
/* ============================================
|
||
* COLOR — Brand (Architectural Warmth)
|
||
* ============================================ */
|
||
|
||
/* Primary — Verde oliva */
|
||
--color-primary-50: #f4f8f5;
|
||
--color-primary-100: #e8f0eb;
|
||
--color-primary-300: #a8c8b5;
|
||
--color-primary-500: #4d8a6d;
|
||
--color-primary-700: #2f5c46;
|
||
--color-primary-900: #1f3a2e;
|
||
|
||
/* Accent — Terracota */
|
||
--color-accent-100: #faeae0;
|
||
--color-accent-400: #e08a5f;
|
||
--color-accent-600: #c25e33;
|
||
--color-accent-900: #7a3517;
|
||
|
||
/* ============================================
|
||
* COLOR — Neutral (Stone — warm grays con tinte oliva)
|
||
* ============================================ */
|
||
|
||
--color-white: #ffffff;
|
||
--color-neutral-50: #f7f8f7;
|
||
--color-neutral-100: #edefed;
|
||
--color-neutral-200: #dde0dd;
|
||
--color-neutral-300: #c4c9c4;
|
||
--color-neutral-400: #9da29d;
|
||
--color-neutral-500: #7a807a;
|
||
--color-neutral-700: #4a4e4a;
|
||
--color-neutral-900: #262826;
|
||
--color-neutral-950: #161816;
|
||
|
||
/* ============================================
|
||
* COLOR — Semantic
|
||
* ============================================ */
|
||
|
||
--color-success-100: #e0f0e6;
|
||
--color-success-500: #4daa73;
|
||
--color-success-700: #2d7a4f;
|
||
|
||
--color-warning-100: #faefd3;
|
||
--color-warning-500: #da9a2c;
|
||
--color-warning-700: #9a6b0e;
|
||
|
||
--color-danger-100: #fae0da;
|
||
--color-danger-500: #d85940;
|
||
--color-danger-700: #a8331f;
|
||
|
||
--color-info-100: #ddedf5;
|
||
--color-info-500: #3d8aaa;
|
||
--color-info-700: #1f5c7a;
|
||
|
||
/* ============================================
|
||
* COLOR — Surface aliases (uso semántico en componentes)
|
||
* ============================================ */
|
||
|
||
--surface-background: var(--color-white);
|
||
--surface-background-muted: var(--color-neutral-50);
|
||
--surface-background-emphasis: var(--color-primary-50);
|
||
--surface-foreground: var(--color-neutral-950);
|
||
--surface-foreground-muted: var(--color-neutral-500);
|
||
--surface-border: var(--color-neutral-200);
|
||
--surface-border-strong: var(--color-neutral-300);
|
||
|
||
/* ============================================
|
||
* TYPOGRAPHY
|
||
* ============================================ */
|
||
|
||
--font-display: "Instrument Serif", Georgia, serif;
|
||
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||
|
||
--font-weight-regular: 400;
|
||
--font-weight-medium: 500;
|
||
--font-weight-semibold: 600;
|
||
--font-weight-bold: 700;
|
||
|
||
--text-xs: 0.75rem;
|
||
--text-sm: 0.875rem;
|
||
--text-base: 1rem;
|
||
--text-lg: 1.125rem;
|
||
--text-xl: 1.25rem;
|
||
--text-2xl: 1.5rem;
|
||
--text-3xl: 1.875rem;
|
||
--text-4xl: 2.25rem;
|
||
--text-5xl: 3rem;
|
||
--text-6xl: 3.75rem;
|
||
--text-7xl: 4.5rem;
|
||
|
||
--leading-tight: 1.1;
|
||
--leading-snug: 1.3;
|
||
--leading-normal: 1.5;
|
||
--leading-relaxed: 1.6;
|
||
|
||
/* ============================================
|
||
* SPACING (base 4px, coherente con Tailwind)
|
||
* ============================================ */
|
||
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 0.75rem;
|
||
--space-4: 1rem;
|
||
--space-6: 1.5rem;
|
||
--space-8: 2rem;
|
||
--space-12: 3rem;
|
||
--space-16: 4rem;
|
||
--space-24: 6rem;
|
||
--space-32: 8rem;
|
||
|
||
/* ============================================
|
||
* CONTAINER WIDTHS
|
||
* ============================================ */
|
||
|
||
--container-narrow: 720px;
|
||
--container-default: 1200px;
|
||
--container-wide: 1440px;
|
||
|
||
--gutter-mobile: 24px;
|
||
--gutter-desktop: 48px;
|
||
|
||
/* ============================================
|
||
* BORDER RADIUS
|
||
* ============================================ */
|
||
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 10px;
|
||
--radius-xl: 14px;
|
||
--radius-2xl: 20px;
|
||
--radius-full: 9999px;
|
||
|
||
/* ============================================
|
||
* SHADOWS (warm, base neutral-950 — no negro puro)
|
||
* ============================================ */
|
||
|
||
--shadow-xs: 0 1px 2px rgba(22, 24, 22, 0.05);
|
||
--shadow-sm:
|
||
0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04);
|
||
--shadow-md:
|
||
0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04);
|
||
--shadow-lg:
|
||
0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05);
|
||
--shadow-xl:
|
||
0 20px 25px rgba(22, 24, 22, 0.1), 0 10px 10px rgba(22, 24, 22, 0.04);
|
||
--shadow-glow: 0 0 0 4px rgba(47, 92, 70, 0.15);
|
||
|
||
/* ============================================
|
||
* MOTION
|
||
* ============================================ */
|
||
|
||
--duration-fast: 150ms;
|
||
--duration-base: 250ms;
|
||
--duration-slow: 400ms;
|
||
|
||
--easing-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--easing-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||
--easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||
|
||
/* ============================================
|
||
* Z-INDEX scale (orden visual)
|
||
* ============================================ */
|
||
|
||
--z-dropdown: 50;
|
||
--z-sticky: 100;
|
||
--z-overlay: 200;
|
||
--z-modal: 300;
|
||
--z-popover: 400;
|
||
--z-toast: 500;
|
||
}
|
||
|
||
/* ============================================
|
||
* Base styles
|
||
* ============================================ */
|
||
|
||
html {
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
color: var(--surface-foreground);
|
||
background: var(--surface-background);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
|
||
h1,
|
||
h2 {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--font-weight-regular);
|
||
line-height: var(--leading-tight);
|
||
color: var(--color-neutral-950);
|
||
}
|
||
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: var(--font-sans);
|
||
font-weight: var(--font-weight-semibold);
|
||
line-height: var(--leading-snug);
|
||
color: var(--color-neutral-900);
|
||
}
|
||
|
||
/* ============================================
|
||
* Reduced motion
|
||
* ============================================ */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* ============================================
|
||
* Reset / base
|
||
* ============================================ */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
background: var(--surface-background);
|
||
color: var(--color-neutral-700);
|
||
font-size: var(--text-base);
|
||
}
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
img,
|
||
svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
button {
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
border: 0;
|
||
background: none;
|
||
}
|
||
|
||
/* Container */
|
||
.container {
|
||
width: 100%;
|
||
max-width: var(--container-default);
|
||
margin: 0 auto;
|
||
padding: 0 var(--gutter-mobile);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.container {
|
||
padding: 0 var(--gutter-desktop);
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
* Buttons
|
||
* ============================================ */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
font-family: var(--font-sans);
|
||
font-weight: var(--font-weight-semibold);
|
||
border-radius: var(--radius-lg);
|
||
transition:
|
||
background var(--duration-fast) var(--easing-out),
|
||
box-shadow var(--duration-fast) var(--easing-out),
|
||
transform var(--duration-fast) var(--easing-out);
|
||
white-space: nowrap;
|
||
}
|
||
.btn:focus-visible {
|
||
outline: 0;
|
||
box-shadow: var(--shadow-glow);
|
||
}
|
||
.btn-md {
|
||
height: 44px;
|
||
padding: 0 var(--space-4);
|
||
font-size: var(--text-base);
|
||
}
|
||
.btn-lg {
|
||
height: 52px;
|
||
padding: 0 var(--space-6);
|
||
font-size: var(--text-lg);
|
||
}
|
||
.btn-sm {
|
||
height: 32px;
|
||
padding: 0 var(--space-3);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.btn-primary {
|
||
background: var(--color-primary-700);
|
||
color: var(--color-white);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--color-primary-900);
|
||
}
|
||
.btn-primary:active {
|
||
transform: scale(0.97);
|
||
}
|
||
.btn-secondary {
|
||
background: var(--color-white);
|
||
color: var(--color-primary-700);
|
||
box-shadow: inset 0 0 0 1px var(--color-primary-700);
|
||
}
|
||
.btn-secondary:hover {
|
||
background: var(--color-primary-50);
|
||
}
|
||
.btn-ghost {
|
||
color: var(--color-neutral-700);
|
||
background: transparent;
|
||
}
|
||
.btn-ghost:hover {
|
||
background: var(--color-neutral-100);
|
||
}
|
||
|
||
/* ============================================
|
||
* Topbar
|
||
* ============================================ */
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: var(--z-sticky);
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: saturate(180%) blur(8px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(8px);
|
||
border-bottom: 1px solid var(--surface-border);
|
||
}
|
||
.topbar-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 68px;
|
||
gap: var(--space-6);
|
||
}
|
||
.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;
|
||
}
|
||
.brand-mark {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-primary-700);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--color-white);
|
||
font-family: var(--font-display);
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
}
|
||
.nav {
|
||
display: none;
|
||
gap: var(--space-8);
|
||
}
|
||
.nav a {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--font-weight-medium);
|
||
color: var(--color-neutral-700);
|
||
transition: color var(--duration-fast) var(--easing-out);
|
||
}
|
||
.nav a:hover {
|
||
color: var(--color-neutral-950);
|
||
}
|
||
.topbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.nav {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
* Hero
|
||
* ============================================ */
|
||
.hero {
|
||
padding: var(--space-16) 0 var(--space-12);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.hero {
|
||
padding: var(--space-24) 0 var(--space-16);
|
||
}
|
||
}
|
||
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--color-primary-700);
|
||
background: var(--color-primary-50);
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-full);
|
||
border: 1px solid var(--color-primary-100);
|
||
}
|
||
.eyebrow .dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--color-primary-500);
|
||
box-shadow: 0 0 0 4px rgba(77, 138, 109, 0.18);
|
||
}
|
||
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-12);
|
||
align-items: center;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.hero-grid {
|
||
grid-template-columns: 1.05fr 1fr;
|
||
gap: var(--space-16);
|
||
}
|
||
}
|
||
|
||
h1.hero-title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--font-weight-regular);
|
||
font-size: clamp(2.5rem, 6vw, 2.8rem);
|
||
line-height: var(--leading-tight);
|
||
letter-spacing: -0.01em;
|
||
color: var(--color-neutral-950);
|
||
margin: var(--space-6) 0 var(--space-6);
|
||
}
|
||
.hero-title em {
|
||
font-style: italic;
|
||
color: var(--color-primary-700);
|
||
}
|
||
.hero-sub {
|
||
font-size: var(--text-xl);
|
||
line-height: var(--leading-relaxed);
|
||
color: var(--color-neutral-700);
|
||
max-width: 540px;
|
||
margin: 0 0 var(--space-8);
|
||
}
|
||
.hero-ctas {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-meta {
|
||
margin-top: var(--space-6);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-6) var(--space-8);
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.hero-meta .check {
|
||
color: var(--color-primary-500);
|
||
}
|
||
.hero-meta span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
/* Hero visual — mock dashboard */
|
||
.hero-visual {
|
||
position: relative;
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-2xl);
|
||
box-shadow: var(--shadow-xl);
|
||
overflow: hidden;
|
||
}
|
||
.hero-visual::before {
|
||
/* warm tinted bg */
|
||
content: "";
|
||
position: absolute;
|
||
inset: -40% -10% auto auto;
|
||
width: 70%;
|
||
height: 70%;
|
||
background: radial-gradient(
|
||
closest-side,
|
||
var(--color-primary-100),
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
.mock-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-bottom: 1px solid var(--surface-border);
|
||
background: var(--color-neutral-50);
|
||
}
|
||
.mock-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--color-neutral-300);
|
||
}
|
||
.mock-url {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-neutral-500);
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-1) var(--space-3);
|
||
margin: 0 var(--space-2);
|
||
}
|
||
|
||
.mock-body {
|
||
padding: var(--space-6);
|
||
display: grid;
|
||
gap: var(--space-4);
|
||
position: relative;
|
||
}
|
||
|
||
.lead-card {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: var(--space-4);
|
||
align-items: center;
|
||
padding: var(--space-4);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
background: var(--color-white);
|
||
transition:
|
||
box-shadow var(--duration-base) var(--easing-out),
|
||
transform var(--duration-base) var(--easing-out);
|
||
}
|
||
.lead-card:hover {
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-1px);
|
||
}
|
||
.lead-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-primary-100);
|
||
color: var(--color-primary-900);
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.lead-name {
|
||
color: var(--color-neutral-950);
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.lead-meta {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
margin-top: 2px;
|
||
}
|
||
.lead-amount {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-2xl);
|
||
color: var(--color-neutral-950);
|
||
line-height: 1;
|
||
}
|
||
.lead-amount span {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-neutral-500);
|
||
display: block;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
padding: 2px 10px;
|
||
border-radius: var(--radius-full);
|
||
}
|
||
.badge-primary {
|
||
background: var(--color-primary-100);
|
||
color: var(--color-primary-900);
|
||
}
|
||
.badge-info {
|
||
background: var(--color-info-100);
|
||
color: var(--color-info-700);
|
||
}
|
||
.badge-warning {
|
||
background: var(--color-warning-100);
|
||
color: var(--color-warning-700);
|
||
}
|
||
.badge-success {
|
||
background: var(--color-success-100);
|
||
color: var(--color-success-700);
|
||
}
|
||
.badge-neutral {
|
||
background: var(--color-neutral-100);
|
||
color: var(--color-neutral-700);
|
||
}
|
||
.badge-accent {
|
||
background: var(--color-accent-100);
|
||
color: var(--color-accent-900);
|
||
}
|
||
.badge .pulse {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
animation: pulse 1.6s var(--easing-in-out) infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 0.4;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Floating chip on hero visual */
|
||
.float-chip {
|
||
position: absolute;
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
padding: var(--space-3) var(--space-4);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.float-chip-1 {
|
||
left: -16px;
|
||
bottom: 64px;
|
||
}
|
||
.float-chip-2 {
|
||
right: -16px;
|
||
top: 90px;
|
||
}
|
||
.float-chip .icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-accent-100);
|
||
color: var(--color-accent-900);
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.float-chip .icon.green {
|
||
background: var(--color-primary-100);
|
||
color: var(--color-primary-900);
|
||
}
|
||
.float-chip strong {
|
||
color: var(--color-neutral-950);
|
||
font-weight: var(--font-weight-semibold);
|
||
display: block;
|
||
font-size: var(--text-sm);
|
||
}
|
||
.float-chip small {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.float-chip {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
* Logo strip
|
||
* ============================================ */
|
||
.logos {
|
||
padding: var(--space-8) 0;
|
||
border-top: 1px solid var(--surface-border);
|
||
border-bottom: 1px solid var(--surface-border);
|
||
}
|
||
.logos-inner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-12) var(--space-16);
|
||
color: var(--color-neutral-400);
|
||
}
|
||
.logos p {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-neutral-500);
|
||
margin: 0 0 var(--space-2);
|
||
}
|
||
.logo-item {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-xl);
|
||
color: var(--color-neutral-400);
|
||
letter-spacing: 0.02em;
|
||
font-style: italic;
|
||
}
|
||
.logo-item.sans {
|
||
font-family: var(--font-sans);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight-bold);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.logo-item.mono {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
font-size: var(--text-base);
|
||
}
|
||
|
||
/* ============================================
|
||
* Section header
|
||
* ============================================ */
|
||
section.section {
|
||
padding: var(--space-16) 0;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
section.section {
|
||
padding: var(--space-24) 0;
|
||
}
|
||
}
|
||
.section-muted {
|
||
background: var(--color-neutral-50);
|
||
}
|
||
.section-emphasis {
|
||
background: var(--color-primary-50);
|
||
}
|
||
|
||
.section-head {
|
||
max-width: 760px;
|
||
margin: 0 0 var(--space-12);
|
||
}
|
||
.section-head.center {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
}
|
||
.section-kicker {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--color-primary-700);
|
||
margin: 0 0 var(--space-4);
|
||
}
|
||
h2.section-title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--font-weight-regular);
|
||
font-size: clamp(2rem, 4.4vw, 3rem);
|
||
line-height: var(--leading-tight);
|
||
letter-spacing: -0.01em;
|
||
color: var(--color-neutral-950);
|
||
margin: 0 0 var(--space-4);
|
||
}
|
||
.section-title em {
|
||
font-style: italic;
|
||
color: var(--color-primary-700);
|
||
}
|
||
.section-lede {
|
||
font-size: var(--text-lg);
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ============================================
|
||
* Problem section — broken cards
|
||
* ============================================ */
|
||
.broken-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
@media (min-width: 768px) {
|
||
.broken-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.broken-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.broken-card {
|
||
padding: var(--space-8);
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
transition: box-shadow var(--duration-base) var(--easing-out);
|
||
}
|
||
.broken-card:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.broken-card .num {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-accent-600);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.broken-card h3 {
|
||
font-size: var(--text-xl);
|
||
color: var(--color-neutral-950);
|
||
margin: var(--space-3) 0 var(--space-3);
|
||
line-height: var(--leading-snug);
|
||
}
|
||
.broken-card p {
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ============================================
|
||
* How it works
|
||
* ============================================ */
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.steps {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
}
|
||
|
||
.step {
|
||
padding: var(--space-6);
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
position: relative;
|
||
}
|
||
.step-num {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-primary-700);
|
||
color: var(--color-white);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-lg);
|
||
line-height: 1;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.step h4 {
|
||
font-size: var(--text-lg);
|
||
color: var(--color-neutral-950);
|
||
margin: 0 0 var(--space-2);
|
||
}
|
||
.step p {
|
||
color: var(--color-neutral-700);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
.step .tag {
|
||
margin-top: var(--space-4);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-neutral-500);
|
||
}
|
||
|
||
/* ============================================
|
||
* Demo widget block
|
||
* ============================================ */
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-12);
|
||
align-items: center;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.demo-grid {
|
||
grid-template-columns: 1fr 1.1fr;
|
||
gap: var(--space-16);
|
||
}
|
||
}
|
||
.demo-bullets {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: var(--space-6) 0 var(--space-8);
|
||
display: grid;
|
||
gap: var(--space-4);
|
||
}
|
||
.demo-bullets li {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr;
|
||
gap: var(--space-3);
|
||
align-items: start;
|
||
font-size: var(--text-base);
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
.demo-bullets .checkmark {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-primary-100);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--color-primary-700);
|
||
margin-top: 2px;
|
||
}
|
||
.demo-bullets strong {
|
||
color: var(--color-neutral-950);
|
||
display: block;
|
||
font-weight: var(--font-weight-semibold);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* Phone mock */
|
||
.phone {
|
||
background: var(--color-neutral-950);
|
||
border-radius: 40px;
|
||
padding: 12px;
|
||
box-shadow: var(--shadow-xl);
|
||
max-width: 380px;
|
||
margin: 0 auto;
|
||
}
|
||
.phone-screen {
|
||
background: var(--color-neutral-50);
|
||
border-radius: 28px;
|
||
overflow: hidden;
|
||
aspect-ratio: 9 / 18;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.phone-status {
|
||
padding: 18px var(--space-6) var(--space-3);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-family: var(--font-sans);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--color-neutral-950);
|
||
}
|
||
.wa-header {
|
||
background: var(--color-primary-900);
|
||
color: var(--color-primary-100);
|
||
padding: var(--space-3) var(--space-4);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
.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);
|
||
}
|
||
.wa-name {
|
||
color: var(--color-white);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
.wa-sub {
|
||
color: var(--color-primary-300);
|
||
font-size: 11px;
|
||
}
|
||
.wa-body {
|
||
background: #ece5dd;
|
||
flex: 1;
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
overflow: hidden;
|
||
}
|
||
.bubble {
|
||
max-width: 85%;
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: 14px;
|
||
font-size: var(--text-sm);
|
||
line-height: var(--leading-snug);
|
||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
|
||
}
|
||
.bubble.in {
|
||
background: var(--color-white);
|
||
color: var(--color-neutral-900);
|
||
align-self: flex-start;
|
||
border-top-left-radius: 4px;
|
||
}
|
||
.bubble.out {
|
||
background: #dcf8c6;
|
||
color: var(--color-neutral-900);
|
||
align-self: flex-end;
|
||
border-top-right-radius: 4px;
|
||
}
|
||
.bubble small {
|
||
color: var(--color-neutral-500);
|
||
font-size: 10px;
|
||
display: block;
|
||
margin-top: 4px;
|
||
}
|
||
.bubble .render-placeholder {
|
||
margin-top: var(--space-2);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: repeating-linear-gradient(
|
||
45deg,
|
||
var(--color-primary-100),
|
||
var(--color-primary-100) 8px,
|
||
var(--color-primary-50) 8px,
|
||
var(--color-primary-50) 16px
|
||
);
|
||
aspect-ratio: 4/3;
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--color-primary-700);
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
/* ============================================
|
||
* Features grid
|
||
* ============================================ */
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
@media (min-width: 768px) {
|
||
.features-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.features-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
}
|
||
|
||
.feature {
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-8);
|
||
}
|
||
.feature .ico {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-lg);
|
||
background: var(--color-primary-100);
|
||
color: var(--color-primary-700);
|
||
display: grid;
|
||
place-items: center;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.feature.alt .ico {
|
||
background: var(--color-accent-100);
|
||
color: var(--color-accent-900);
|
||
}
|
||
.feature h3 {
|
||
font-size: var(--text-xl);
|
||
color: var(--color-neutral-950);
|
||
margin: 0 0 var(--space-2);
|
||
}
|
||
.feature p {
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ============================================
|
||
* Honesty banner
|
||
* ============================================ */
|
||
.honesty {
|
||
border-left: 4px solid var(--color-warning-500);
|
||
background: var(--color-warning-100);
|
||
color: var(--color-warning-700);
|
||
padding: var(--space-6) var(--space-8);
|
||
border-radius: var(--radius-lg);
|
||
display: grid;
|
||
grid-template-columns: 32px 1fr;
|
||
gap: var(--space-4);
|
||
align-items: start;
|
||
}
|
||
.honesty strong {
|
||
color: var(--color-warning-700);
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-size: var(--text-base);
|
||
}
|
||
.honesty p {
|
||
margin: 0;
|
||
color: var(--color-neutral-700);
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
.honesty .ico-warn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-white);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--color-warning-500);
|
||
}
|
||
|
||
/* ============================================
|
||
* Pricing
|
||
* ============================================ */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-6);
|
||
align-items: stretch;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.pricing-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.price-card {
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-8);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
.price-card.featured {
|
||
border: 2px solid var(--color-primary-700);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
.price-ribbon {
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--color-primary-700);
|
||
color: var(--color-white);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius-full);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.price-name {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--color-primary-700);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin: 0 0 var(--space-2);
|
||
}
|
||
.price-desc {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-sm);
|
||
margin: 0 0 var(--space-6);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
.price-amount {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-6xl);
|
||
color: var(--color-neutral-950);
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.price-amount .per {
|
||
font-family: var(--font-sans);
|
||
font-size: var(--text-base);
|
||
color: var(--color-neutral-500);
|
||
font-weight: var(--font-weight-regular);
|
||
}
|
||
.price-note {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-sm);
|
||
margin: 0 0 var(--space-6);
|
||
}
|
||
.price-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 var(--space-8);
|
||
display: grid;
|
||
gap: var(--space-3);
|
||
flex: 1;
|
||
}
|
||
.price-features li {
|
||
display: grid;
|
||
grid-template-columns: 20px 1fr;
|
||
gap: var(--space-3);
|
||
align-items: start;
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
.price-features svg {
|
||
color: var(--color-primary-500);
|
||
margin-top: 4px;
|
||
}
|
||
.price-features li.muted svg {
|
||
color: var(--color-neutral-300);
|
||
}
|
||
.price-features li.muted {
|
||
color: var(--color-neutral-400);
|
||
}
|
||
|
||
/* ============================================
|
||
* Testimonials
|
||
* ============================================ */
|
||
.testimonials {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-6);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.testimonials {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-8);
|
||
}
|
||
}
|
||
|
||
.quote-card {
|
||
background: var(--color-white);
|
||
border: 1px solid var(--surface-border);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-8);
|
||
}
|
||
.quote-card blockquote {
|
||
margin: 0 0 var(--space-6);
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
font-size: var(--text-2xl);
|
||
line-height: var(--leading-snug);
|
||
color: var(--color-neutral-950);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.quote-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--surface-border);
|
||
}
|
||
.quote-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-primary-100);
|
||
color: var(--color-primary-900);
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.quote-name {
|
||
color: var(--color-neutral-950);
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.quote-role {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* ============================================
|
||
* Stats strip
|
||
* ============================================ */
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-8);
|
||
padding: var(--space-12) 0;
|
||
border-top: 1px solid var(--surface-border);
|
||
border-bottom: 1px solid var(--surface-border);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.stats {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
padding: var(--space-16) 0;
|
||
}
|
||
}
|
||
.stat {
|
||
text-align: left;
|
||
}
|
||
.stat .num {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-5xl);
|
||
color: var(--color-neutral-950);
|
||
line-height: 1;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.stat .num em {
|
||
color: var(--color-primary-700);
|
||
font-style: normal;
|
||
}
|
||
.stat .lbl {
|
||
margin-top: var(--space-3);
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--leading-snug);
|
||
}
|
||
|
||
/* ============================================
|
||
* FAQ
|
||
* ============================================ */
|
||
.faq {
|
||
max-width: var(--container-narrow);
|
||
margin: 0 auto;
|
||
}
|
||
.faq details {
|
||
border-bottom: 1px solid var(--surface-border);
|
||
padding: var(--space-6) 0;
|
||
}
|
||
.faq details[open] summary .chev {
|
||
transform: rotate(45deg);
|
||
}
|
||
.faq summary {
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--space-6);
|
||
cursor: pointer;
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--color-neutral-950);
|
||
line-height: var(--leading-snug);
|
||
}
|
||
.faq summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
.faq .chev {
|
||
flex-shrink: 0;
|
||
width: 28px;
|
||
height: 28px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--color-primary-700);
|
||
font-size: var(--text-xl);
|
||
transition: transform var(--duration-base) var(--easing-out);
|
||
line-height: 1;
|
||
}
|
||
.faq .answer {
|
||
margin-top: var(--space-4);
|
||
color: var(--color-neutral-700);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
|
||
/* ============================================
|
||
* Final CTA
|
||
* ============================================ */
|
||
.final-cta {
|
||
background: var(--color-primary-900);
|
||
color: var(--color-primary-100);
|
||
border-radius: var(--radius-2xl);
|
||
padding: var(--space-16) var(--space-8);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.final-cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -50% auto auto -20%;
|
||
width: 60%;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: radial-gradient(
|
||
closest-side,
|
||
rgba(168, 200, 181, 0.18),
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
.final-cta::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: auto -20% -50% auto;
|
||
width: 60%;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: radial-gradient(
|
||
closest-side,
|
||
rgba(194, 94, 51, 0.16),
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
.final-cta-inner {
|
||
position: relative;
|
||
}
|
||
.final-cta h2 {
|
||
font-family: var(--font-display);
|
||
color: var(--color-white);
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
margin: 0 0 var(--space-4);
|
||
line-height: var(--leading-tight);
|
||
}
|
||
.final-cta p {
|
||
color: var(--color-primary-300);
|
||
font-size: var(--text-lg);
|
||
max-width: 560px;
|
||
margin: 0 auto var(--space-8);
|
||
}
|
||
.final-cta .btn-primary {
|
||
background: var(--color-white);
|
||
color: var(--color-primary-900);
|
||
}
|
||
.final-cta .btn-primary:hover {
|
||
background: var(--color-primary-100);
|
||
}
|
||
.final-cta .btn-ghost {
|
||
color: var(--color-primary-100);
|
||
}
|
||
.final-cta .btn-ghost:hover {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
/* ============================================
|
||
* Footer
|
||
* ============================================ */
|
||
footer {
|
||
padding: var(--space-16) 0 var(--space-12);
|
||
border-top: 1px solid var(--surface-border);
|
||
background: var(--color-white);
|
||
}
|
||
.foot-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-8);
|
||
margin-bottom: var(--space-12);
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.foot-grid {
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: var(--space-12);
|
||
}
|
||
}
|
||
.foot-col h5 {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral-950);
|
||
margin: 0 0 var(--space-4);
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
.foot-col ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: var(--space-2);
|
||
}
|
||
.foot-col a {
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.foot-col a:hover {
|
||
color: var(--color-neutral-950);
|
||
}
|
||
.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);
|
||
}
|
||
.foot-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding-top: var(--space-8);
|
||
border-top: 1px solid var(--surface-border);
|
||
color: var(--color-neutral-500);
|
||
font-size: var(--text-xs);
|
||
flex-wrap: wrap;
|
||
}
|
||
.foot-bar .mono {
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* ============================================
|
||
* Scroll-reveal + micro-interacciones
|
||
* ============================================ */
|
||
html.js .reveal {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition:
|
||
opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||
transition-delay: var(--reveal-delay, 0ms);
|
||
will-change: opacity, transform;
|
||
}
|
||
html.js .reveal.is-visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
/* Hijos de un grupo: se ocultan antes del primer paint vía atributo */
|
||
html.js [data-reveal-group] > * {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition:
|
||
opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||
transition-delay: var(--reveal-delay, 0ms);
|
||
}
|
||
html.js [data-reveal-group] > *.is-visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* Hover-lift sutil en tarjetas */
|
||
.broken-card,
|
||
.step,
|
||
.feature {
|
||
transition:
|
||
transform 0.25s ease,
|
||
box-shadow 0.25s ease;
|
||
}
|
||
.broken-card:hover,
|
||
.step:hover,
|
||
.feature:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
/* Render real dentro de la burbuja de WhatsApp */
|
||
.bubble .render-img {
|
||
margin-top: var(--space-2);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
aspect-ratio: 4 / 3;
|
||
display: block;
|
||
position: relative;
|
||
}
|
||
.bubble .render-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.bubble .render-img figcaption {
|
||
position: absolute;
|
||
left: 6px;
|
||
bottom: 6px;
|
||
background: rgba(0, 0, 0, 0.62);
|
||
color: #fff;
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
letter-spacing: 0.06em;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Overlay de play sobre la captura de WhatsApp: se lee como vídeo.
|
||
Cuando exista el vídeo real, envolver con <a>/<button> y reproducir. */
|
||
.video-frame {
|
||
position: relative;
|
||
display: block;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
}
|
||
.video-frame img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
.video-frame::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(
|
||
60% 60% at 50% 50%,
|
||
rgba(0, 0, 0, 0.3),
|
||
rgba(0, 0, 0, 0.05) 70%
|
||
);
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
.video-frame:hover::after {
|
||
opacity: 0.6;
|
||
}
|
||
.video-frame .play-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 84px;
|
||
height: 84px;
|
||
border-radius: var(--radius-full);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
border: 2px solid rgba(255, 255, 255, 0.92);
|
||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
|
||
-webkit-backdrop-filter: blur(2px);
|
||
backdrop-filter: blur(2px);
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
z-index: 1;
|
||
}
|
||
.video-frame:hover .play-btn {
|
||
transform: translate(-50%, -50%) scale(1.08);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
}
|
||
.video-frame .play-btn svg {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-left: 4px;
|
||
fill: #fff;
|
||
}
|
||
.video-frame .play-btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -8px;
|
||
border-radius: var(--radius-full);
|
||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||
animation: playPulse 2.4s ease-out infinite;
|
||
}
|
||
@keyframes playPulse {
|
||
0% {
|
||
transform: scale(0.9);
|
||
opacity: 0.7;
|
||
}
|
||
70% {
|
||
transform: scale(1.25);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.video-frame .play-btn::before {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* Antes / después en "Cómo funciona" */
|
||
.step .ba {
|
||
margin-top: var(--space-3);
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--surface-border);
|
||
}
|
||
.step .ba figure {
|
||
position: relative;
|
||
margin: 0;
|
||
aspect-ratio: 1 / 1;
|
||
}
|
||
.step .ba img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.step .ba figcaption {
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 6px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
color: #fff;
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
letter-spacing: 0.06em;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
.step .ba figure.after figcaption {
|
||
background: var(--color-primary-600);
|
||
}
|
||
|
||
/* Bajo reduced-motion: mostrar todo sin animar */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html.js .reveal,
|
||
html.js [data-reveal-group] > * {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
.broken-card:hover,
|
||
.step:hover,
|
||
.feature:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- ============================================
|
||
Topbar
|
||
============================================ -->
|
||
<header class="topbar">
|
||
<div class="container topbar-inner">
|
||
<a href="#" class="brand">
|
||
<span class="brand-mark">R</span>
|
||
Reformix
|
||
</a>
|
||
<nav class="nav" aria-label="Principal">
|
||
<a href="#problema">Por qué Reformix</a>
|
||
<a href="#como-funciona">Cómo funciona</a>
|
||
<a href="#precios">Precios</a>
|
||
<a href="#faq">Preguntas</a>
|
||
</nav>
|
||
<div class="topbar-actions">
|
||
<a href="/login" class="btn btn-ghost btn-sm">Entrar</a>
|
||
<a href="/signup" class="btn btn-primary btn-sm">Empezar gratis</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============================================
|
||
Hero
|
||
============================================ -->
|
||
<section class="hero">
|
||
<div class="container hero-grid">
|
||
<div>
|
||
<span class="eyebrow"
|
||
><span class="dot"></span> Para empresas de reformas en España</span
|
||
>
|
||
<h1 class="hero-title">
|
||
Cada visita para "valorar" <em>te cuesta tiempo y dinero</em>.
|
||
<br />Deja de perder horas en clientes que no compran.
|
||
</h1>
|
||
<p class="hero-sub">
|
||
Mientras tú trabajas en una obra, Reformix atiende a los próximos
|
||
clientes: recoge fotos, entiende lo que necesitan y les calcula un
|
||
presupuesto orientativo. Cuando abras tu panel, sabrás al instante
|
||
si merece la pena coger el coche o si el cliente solo quería un
|
||
precio para comparar.
|
||
</p>
|
||
<div class="hero-ctas">
|
||
<a href="/signup" class="btn btn-primary btn-lg">Empezar ahora</a>
|
||
<a href="#demo" class="btn btn-secondary btn-lg"
|
||
>Ver cómo funciona</a
|
||
>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<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
|
||
>
|
||
<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
|
||
>
|
||
<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
|
||
>
|
||
<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 letra pequeña</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero visual: panel de leads mock -->
|
||
<div
|
||
class="hero-visual reveal"
|
||
aria-label="Vista previa del panel de leads"
|
||
>
|
||
<div class="mock-bar">
|
||
<span
|
||
class="mock-dot"
|
||
style="background: var(--color-danger-500)"
|
||
></span>
|
||
<span
|
||
class="mock-dot"
|
||
style="background: var(--color-warning-500)"
|
||
></span>
|
||
<span
|
||
class="mock-dot"
|
||
style="background: var(--color-success-500)"
|
||
></span>
|
||
<span class="mock-url">panel.reformix.es / leads</span>
|
||
</div>
|
||
<div class="mock-body">
|
||
<div class="lead-card">
|
||
<div class="lead-avatar">MR</div>
|
||
<div>
|
||
<div class="lead-name">María Rivas · Cocina · Madrid</div>
|
||
<div class="lead-meta">Hace 4 min · 24 m² · calidad media</div>
|
||
<div style="margin-top: 8px">
|
||
<span class="badge badge-primary"
|
||
><span class="pulse"></span> Nuevo</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="lead-amount">
|
||
12.400€
|
||
<span>orientativo</span>
|
||
</div>
|
||
</div>
|
||
<div class="lead-card">
|
||
<div
|
||
class="lead-avatar"
|
||
style="
|
||
background: var(--color-accent-100);
|
||
color: var(--color-accent-900);
|
||
"
|
||
>
|
||
JF
|
||
</div>
|
||
<div>
|
||
<div class="lead-name">
|
||
Jorge Fernández · Baño completo · Pinto
|
||
</div>
|
||
<div class="lead-meta">
|
||
Hace 32 min · 6 m² · calidad premium
|
||
</div>
|
||
<div style="margin-top: 8px">
|
||
<span class="badge badge-info">📞 Contactado</span>
|
||
</div>
|
||
</div>
|
||
<div class="lead-amount">
|
||
9.150€
|
||
<span>orientativo</span>
|
||
</div>
|
||
</div>
|
||
<div class="lead-card">
|
||
<div class="lead-avatar">CL</div>
|
||
<div>
|
||
<div class="lead-name">
|
||
Carmen López · Reforma integral · Móstoles
|
||
</div>
|
||
<div class="lead-meta">Ayer · 72 m² · calidad media</div>
|
||
<div style="margin-top: 8px">
|
||
<span class="badge badge-warning"
|
||
>📅 Visita martes 10:30</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="lead-amount">
|
||
41.800€
|
||
<span>orientativo</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="float-chip float-chip-1">
|
||
<div class="icon green">
|
||
<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>
|
||
</div>
|
||
<div>
|
||
<strong>Llamada nueva</strong>
|
||
<small>+34 663 ··· 21 · 00:47</small>
|
||
</div>
|
||
</div>
|
||
<div class="float-chip float-chip-2">
|
||
<div class="icon">
|
||
<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>
|
||
</div>
|
||
<div>
|
||
<strong>Render listo</strong>
|
||
<small>Cocina · 3 propuestas</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Demo en vídeo
|
||
============================================ -->
|
||
<section class="section" id="demo">
|
||
<div class="container">
|
||
<div class="section-head center reveal">
|
||
<p class="section-kicker">En 2 minutos</p>
|
||
<h2 class="section-title">
|
||
Míralo funcionando <br /><em>de principio a fin</em>.
|
||
</h2>
|
||
<p class="section-lede">
|
||
Te enseñamos cómo Reformix atiende a tu cliente, calcula el
|
||
presupuesto orientativo y te lo deja en el panel sin que tú levantes
|
||
el teléfono.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="reveal" style="max-width: 900px; margin: 0 auto">
|
||
<!-- Placeholder de vídeo: sustituir este bloque por un <iframe>/<video> cuando esté el vídeo. -->
|
||
<!-- <div
|
||
style="
|
||
position: relative;
|
||
aspect-ratio: 16 / 9;
|
||
border-radius: var(--radius-2xl);
|
||
overflow: hidden;
|
||
background: radial-gradient(
|
||
120% 120% at 50% 0%,
|
||
var(--color-neutral-900),
|
||
var(--color-neutral-950)
|
||
);
|
||
border: 1px solid var(--color-neutral-200);
|
||
box-shadow: var(--shadow-xl);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-4);
|
||
"
|
||
>
|
||
<span
|
||
style="
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 76px;
|
||
height: 76px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||
"
|
||
>
|
||
<svg
|
||
width="30"
|
||
height="30"
|
||
viewBox="0 0 24 24"
|
||
fill="#ffffff"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M8 5v14l11-7z"></path>
|
||
</svg>
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: var(--text-sm);
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
"
|
||
>Vídeo demo · próximamente</span
|
||
>
|
||
</div> -->
|
||
|
||
<div class="video-frame">
|
||
<img
|
||
src="whatsapp.png"
|
||
alt="Vídeo demo de Reformix: render y presupuesto entregados por WhatsApp"
|
||
/>
|
||
<span class="play-btn" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="reveal"
|
||
style="text-align: center; margin-top: var(--space-8)"
|
||
>
|
||
<a href="/signup" class="btn btn-primary btn-lg">Empezar ahora</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Logo strip
|
||
============================================ -->
|
||
<div class="logos">
|
||
<div class="container">
|
||
<div class="logos-inner">
|
||
<p>
|
||
Reformistas que ya prueban Reformix en Madrid, Valencia y Sevilla
|
||
</p>
|
||
<div class="logo-item">Obras Bermejo</div>
|
||
<div class="logo-item sans">CASAFINA</div>
|
||
<div class="logo-item mono">Reformas 71</div>
|
||
<div class="logo-item">Talleres Quintana</div>
|
||
<div class="logo-item sans">VEGA&HIJOS</div>
|
||
<div class="logo-item mono">Atelier Río</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================
|
||
Problema
|
||
============================================ -->
|
||
<section class="section section-muted" id="problema">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-kicker">El sector hoy</p>
|
||
<h2 class="section-title">
|
||
<em>¿Obra grande o apaño pequeño?</em> Hasta que no vas, no lo
|
||
sabes.
|
||
</h2>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="broken-grid" data-reveal-group>
|
||
<div class="broken-card">
|
||
<div class="num">01 · CAPTACIÓN</div>
|
||
<h3>Pagas por el mismo lead que cinco competidores.</h3>
|
||
<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>
|
||
</div>
|
||
<div class="broken-card">
|
||
<div class="num">02 · VISITA</div>
|
||
<h3>Conduces 40 km y era cambiar un grifo.</h3>
|
||
<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>
|
||
</div>
|
||
<div class="broken-card">
|
||
<div class="num">03 · PRESUPUESTO</div>
|
||
<h3>Presupuestas gratis para quien no firma.</h3>
|
||
<p>
|
||
Mides, calculas y montas el PDF: horas de oficina que no factura
|
||
nadie. La mayoría no acaba en obra, así que ese trabajo lo regalas
|
||
tú.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Cómo funciona
|
||
============================================ -->
|
||
<section class="section" id="como-funciona">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-kicker">Cómo funciona</p>
|
||
<h2 class="section-title">
|
||
Del primer "Hola" al presupuesto firmado, <em>en una tarde</em>.
|
||
</h2>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="steps" data-reveal-group>
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h4>El cliente llama a tu número</h4>
|
||
<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>
|
||
<div class="tag">⌁ Agente de voz</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h4>Se genera un render orientativo</h4>
|
||
<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>
|
||
<div class="ba" aria-label="Comparativa antes y después del render">
|
||
<figure>
|
||
<img
|
||
src="/b2b-assets/img/antes.webp"
|
||
alt="Cocina antes de la reforma"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<figcaption>ANTES</figcaption>
|
||
</figure>
|
||
<figure class="after">
|
||
<img
|
||
src="/b2b-assets/img/despues.webp"
|
||
alt="Render de la cocina reformada"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<figcaption>DESPUÉS</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div class="tag">⌁ Render IA</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h4>Llega un presupuesto por WhatsApp</h4>
|
||
<p>
|
||
En minutos. Con desglose por partidas, plazos y la frase honesta:
|
||
"es orientativo, tu visita sigue siendo la que cierra".
|
||
</p>
|
||
<div class="tag">⌁ WhatsApp</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h4>Tú visitas y firmas</h4>
|
||
<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>
|
||
<div class="tag">⌁ Panel reformista</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Demo / WhatsApp
|
||
============================================ -->
|
||
<section class="section section-emphasis">
|
||
<div class="container demo-grid">
|
||
<div>
|
||
<p class="section-kicker">Lo que recibe tu cliente</p>
|
||
<h2 class="section-title">
|
||
Un presupuesto <em>en su WhatsApp</em>, no en un PDF que se pierde.
|
||
</h2>
|
||
<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>
|
||
<ul class="demo-bullets">
|
||
<li>
|
||
<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>
|
||
<div>
|
||
<strong>Tres calidades, no una</strong>El cliente compara
|
||
básica, media y premium. Entiende qué está pagando y por qué.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<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>
|
||
<div>
|
||
<strong>Render asociado a cada precio</strong>Ve la cocina, no
|
||
una hoja de Excel. Las dudas bajan, la confianza sube.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<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>
|
||
<div>
|
||
<strong>Honestidad explícita</strong>"Es orientativo. Tu visita
|
||
sigue siendo la que cierra." Lo decimos en cada presupuesto.
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<a href="#cta" class="btn btn-primary btn-md"
|
||
>Quiero verlo con mi negocio</a
|
||
>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="phone reveal" aria-hidden="true">
|
||
<div class="phone-screen">
|
||
<div class="phone-status">
|
||
<span>9:41</span>
|
||
<span>·····</span>
|
||
</div>
|
||
<div class="wa-header">
|
||
<div class="wa-avatar">R</div>
|
||
<div>
|
||
<div class="wa-name">Reformas Bermejo</div>
|
||
<div class="wa-sub">en línea</div>
|
||
</div>
|
||
</div>
|
||
<div class="wa-body">
|
||
<div class="bubble in">
|
||
¡Hola María! 👋 Soy el asistente de Bermejo. Te paso el
|
||
presupuesto orientativo de tu cocina.
|
||
<small>09:42</small>
|
||
</div>
|
||
<div class="bubble in">
|
||
<figure class="render-img">
|
||
<img
|
||
src="/b2b-assets/img/despues.webp"
|
||
alt="Render orientativo de la cocina reformada"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<figcaption>RENDER · COCINA · CALIDAD MEDIA</figcaption>
|
||
</figure>
|
||
Calidad media · 24 m²<br />
|
||
<strong>12.400 €</strong> · 18 días<br />
|
||
<small>09:42</small>
|
||
</div>
|
||
<div class="bubble out">
|
||
¿Puedo ver también la premium?
|
||
<small>09:44</small>
|
||
</div>
|
||
<div class="bubble in">
|
||
Claro 👇 Y recuerda: es orientativo, la visita es la que
|
||
cierra.
|
||
<small>09:44</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Features grid
|
||
============================================ -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-kicker">Lo que hace por ti</p>
|
||
<h2 class="section-title">
|
||
Una herramienta de trabajo. <em>No un escaparate más.</em>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="features-grid" data-reveal-group>
|
||
<div class="feature">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Asistente IA 24/7</h3>
|
||
<p>
|
||
Contesta llamadas a las once de la noche y los sábados. Filtra al
|
||
curioso, cualifica al que va en serio.
|
||
</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Renders en minutos</h3>
|
||
<p>
|
||
Tres propuestas visuales por obra. Calidad básica, media y
|
||
premium. Útiles para hablar, no para presumir.
|
||
</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Presupuesto orientativo</h3>
|
||
<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>
|
||
</div>
|
||
<div class="feature alt">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Entrega por WhatsApp</h3>
|
||
<p>
|
||
El canal donde ya está tu cliente. Cero fricción de descargas,
|
||
registros o apps que nadie va a usar.
|
||
</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Panel con cabeza</h3>
|
||
<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>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="ico">
|
||
<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>
|
||
</div>
|
||
<h3>Sello "Precio Justo"</h3>
|
||
<p>
|
||
Tu rango de precios queda registrado. El cliente sabe que no le
|
||
estás vendiendo humo. Tú diferencias frente al portal.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: var(--space-12)">
|
||
<div class="honesty">
|
||
<div class="ico-warn">
|
||
<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>
|
||
</div>
|
||
<div>
|
||
<strong>Lo que Reformix no es.</strong>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Stats
|
||
============================================ -->
|
||
<section>
|
||
<div class="container">
|
||
<div class="stats" data-reveal-group>
|
||
<div class="stat">
|
||
<div class="num"><em>2,7×</em></div>
|
||
<div class="lbl">
|
||
más visitas que terminan en presupuesto firmado, frente al lead de
|
||
portal.
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="num"><em>14</em> min</div>
|
||
<div class="lbl">
|
||
de media desde que entra la llamada hasta que el cliente recibe
|
||
presupuesto.
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="num"><em>−63%</em></div>
|
||
<div class="lbl">
|
||
de visitas en frío. Vas solo a las casas donde ya hay obra real.
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="num"><em>89%</em></div>
|
||
<div class="lbl">
|
||
de los clientes finales contestan al WhatsApp con el render. Era
|
||
un 14% en email.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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);
|
||
"
|
||
>
|
||
Datos del piloto cerrado · 18 empresas · ene–abr 2026 · Madrid +
|
||
Valencia
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Pricing
|
||
============================================ -->
|
||
<section class="section section-muted" id="precios">
|
||
<div class="container">
|
||
<div class="section-head center">
|
||
<p class="section-kicker">Precios</p>
|
||
<h2 class="section-title">
|
||
Precios <em>de herramienta</em>, no de portal.
|
||
</h2>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="pricing-grid" data-reveal-group>
|
||
<div class="price-card">
|
||
<div class="price-name">Starter</div>
|
||
<p class="price-desc">
|
||
Para autónomos y equipos de hasta dos. Para probar el modelo sin
|
||
compromiso.
|
||
</p>
|
||
<div class="price-amount">29€<span class="per">/mes</span></div>
|
||
<p class="price-note">
|
||
5 leads procesados / mes · 3€ por lead extra
|
||
</p>
|
||
<ul class="price-features">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</ul>
|
||
<a href="/signup" class="btn btn-secondary btn-md"
|
||
>Empezar gratis</a
|
||
>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="price-ribbon">Recomendado</div>
|
||
<div class="price-name">Pro</div>
|
||
<p class="price-desc">
|
||
El plan que están usando los reformistas del piloto. Empresas de 2
|
||
a 10 personas.
|
||
</p>
|
||
<div class="price-amount">79€<span class="per">/mes</span></div>
|
||
<p class="price-note">
|
||
15 leads procesados / mes · 2,50€ por lead extra
|
||
</p>
|
||
<ul class="price-features">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</ul>
|
||
<a href="/signup" class="btn btn-primary btn-md"
|
||
>Empezar 14 días gratis</a
|
||
>
|
||
</div>
|
||
|
||
<div class="price-card">
|
||
<div class="price-name">Business</div>
|
||
<p class="price-desc">
|
||
Empresas medianas (más de 10 personas) o con varias delegaciones.
|
||
</p>
|
||
<div class="price-amount">199€<span class="per">/mes</span></div>
|
||
<p class="price-note">
|
||
50 leads procesados / mes · 2€ por lead extra
|
||
</p>
|
||
<ul class="price-features">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</ul>
|
||
<a href="#cta" class="btn btn-secondary btn-md"
|
||
>Hablar con nosotros</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<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;
|
||
"
|
||
>
|
||
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.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Testimonios
|
||
============================================ -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-kicker">Lo que dicen</p>
|
||
<h2 class="section-title">
|
||
Reformistas que <em>ya están dentro</em>.
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="testimonials" data-reveal-group>
|
||
<div class="quote-card">
|
||
<blockquote>
|
||
"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."
|
||
</blockquote>
|
||
<div class="quote-author">
|
||
<div class="quote-avatar">AB</div>
|
||
<div>
|
||
<div class="quote-name">Antonio Bermejo</div>
|
||
<div class="quote-role">
|
||
Reformas Bermejo · Madrid · 9 obras/mes
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quote-card">
|
||
<blockquote>
|
||
"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."
|
||
</blockquote>
|
||
<div class="quote-author">
|
||
<div
|
||
class="quote-avatar"
|
||
style="
|
||
background: var(--color-accent-100);
|
||
color: var(--color-accent-900);
|
||
"
|
||
>
|
||
MV
|
||
</div>
|
||
<div>
|
||
<div class="quote-name">Marisa Vega</div>
|
||
<div class="quote-role">
|
||
Vega & Hijos · Valencia · 12 personas
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
FAQ
|
||
============================================ -->
|
||
<section class="section section-muted" id="faq">
|
||
<div class="container">
|
||
<div class="section-head center">
|
||
<p class="section-kicker">Preguntas frecuentes</p>
|
||
<h2 class="section-title">
|
||
Lo que nos preguntáis <em>antes de firmar</em>.
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="faq" data-reveal-group>
|
||
<details open="">
|
||
<summary>
|
||
¿Esto no me va a quitar el trato humano con el cliente?<span
|
||
class="chev"
|
||
>+</span
|
||
>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
¿Y si el cliente me llama con un proyecto raro que la IA no sabe
|
||
presupuestar?<span class="chev">+</span>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
¿Quién es el dueño de los leads?<span class="chev">+</span>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
¿Y la licencia urbanística? No quiero meter en líos a nadie.<span
|
||
class="chev"
|
||
>+</span
|
||
>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
¿Qué pasa si lo pruebo y no me convence?<span class="chev"
|
||
>+</span
|
||
>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Final CTA
|
||
============================================ -->
|
||
<section class="section" id="cta">
|
||
<div class="container">
|
||
<div class="final-cta">
|
||
<div class="final-cta-inner">
|
||
<h2>Empieza esta semana. Cierra obras la siguiente.</h2>
|
||
<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>
|
||
<div class="hero-ctas" style="justify-content: center">
|
||
<a href="/signup" class="btn btn-primary btn-lg"
|
||
>Empezar gratis 14 días</a
|
||
>
|
||
<a href="#" class="btn btn-ghost btn-lg"
|
||
>Hablar con un humano →</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Footer
|
||
============================================ -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="foot-grid">
|
||
<div class="foot-col">
|
||
<a href="#" class="brand">
|
||
<span class="brand-mark">R</span>
|
||
Reformix
|
||
</a>
|
||
<p class="foot-tag">
|
||
Un mercado de reformas más justo. Para los profesionales que
|
||
cumplen lo que prometen.
|
||
</p>
|
||
</div>
|
||
<div class="foot-col">
|
||
<h5>Producto</h5>
|
||
<ul>
|
||
<li><a href="#">Asistente IA</a></li>
|
||
<li><a href="#">Renders</a></li>
|
||
<li><a href="#">Panel reformista</a></li>
|
||
<li><a href="#">Precios</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="foot-col">
|
||
<h5>Empresa</h5>
|
||
<ul>
|
||
<li><a href="#">Sobre nosotros</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Contacto</a></li>
|
||
<li><a href="#">Trabaja con nosotros</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="foot-col">
|
||
<h5>Legal</h5>
|
||
<ul>
|
||
<li><a href="#">Condiciones</a></li>
|
||
<li><a href="#">Privacidad</a></li>
|
||
<li><a href="#">Cookies</a></li>
|
||
<li><a href="#">Sello Precio Justo</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="foot-bar">
|
||
<span>© 2026 Reformix — Hecho en Madrid.</span>
|
||
<span class="mono">v1.0 · ES</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
var reduce =
|
||
window.matchMedia &&
|
||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||
|
||
// Reparte un retardo escalonado entre los hijos de cada grupo.
|
||
var groups = document.querySelectorAll("[data-reveal-group]");
|
||
groups.forEach(function (group) {
|
||
Array.prototype.forEach.call(group.children, function (child, i) {
|
||
child.style.setProperty("--reveal-delay", i * 90 + "ms");
|
||
});
|
||
});
|
||
|
||
var targets = document.querySelectorAll(
|
||
".reveal, [data-reveal-group] > *",
|
||
);
|
||
|
||
function countUp(el) {
|
||
var text = el.textContent.trim();
|
||
var match = text.match(/-?−?\d[\d.,]*/);
|
||
if (!match) return;
|
||
var token = match[0];
|
||
var prefix = text.slice(0, match.index);
|
||
var suffix = text.slice(match.index + token.length);
|
||
var decimals = (token.split(/[.,]/)[1] || "").length;
|
||
var target = parseFloat(token.replace("−", "-").replace(",", "."));
|
||
if (isNaN(target)) return;
|
||
var dur = 1100,
|
||
start = null;
|
||
function frame(ts) {
|
||
if (start === null) start = ts;
|
||
var p = Math.min((ts - start) / dur, 1);
|
||
var eased = 1 - Math.pow(1 - p, 3);
|
||
var val = (target * eased).toFixed(decimals).replace(".", ",");
|
||
el.textContent = prefix + val + suffix;
|
||
if (p < 1) requestAnimationFrame(frame);
|
||
else el.textContent = text;
|
||
}
|
||
requestAnimationFrame(frame);
|
||
}
|
||
|
||
if (reduce || !("IntersectionObserver" in window)) {
|
||
targets.forEach(function (t) {
|
||
t.classList.add("is-visible");
|
||
});
|
||
return;
|
||
}
|
||
|
||
var io = new IntersectionObserver(
|
||
function (entries, obs) {
|
||
entries.forEach(function (entry) {
|
||
if (!entry.isIntersecting) return;
|
||
var el = entry.target;
|
||
el.classList.add("is-visible");
|
||
var nums = el.querySelectorAll
|
||
? el.querySelectorAll(".stat .num em")
|
||
: [];
|
||
if (el.matches && el.matches(".stat")) {
|
||
var ownNum = el.querySelector(".num em");
|
||
if (ownNum) countUp(ownNum);
|
||
}
|
||
Array.prototype.forEach.call(nums, countUp);
|
||
obs.unobserve(el);
|
||
});
|
||
},
|
||
{ rootMargin: "0px 0px -10% 0px", threshold: 0.15 },
|
||
);
|
||
|
||
targets.forEach(function (t) {
|
||
io.observe(t);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|