1721 lines
74 KiB
HTML
1721 lines
74 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es"><head><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&display=swap">
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Reformix — Un mercado de reformas más justo — GITEA-DEPLOY-MARKER-288488887</title>
|
||
<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 */
|
||
|
||
/* latin */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek-ext */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek-ext */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek-ext */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek-ext */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
/* cyrillic-ext */
|
||
|
||
/* cyrillic */
|
||
|
||
/* greek */
|
||
|
||
/* vietnamese */
|
||
|
||
/* latin-ext */
|
||
|
||
/* latin */
|
||
|
||
|
||
|
||
: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, 4.5rem);
|
||
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; }
|
||
</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="#" class="btn btn-ghost btn-sm">Entrar</a>
|
||
<a href="#cta" 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">Tus clientes verán su <em>reforma</em> antes de llamarte.</h1>
|
||
<p class="hero-sub">Tu cliente deja sus datos en tu web. En menos de 2 minutos lo llama tu asistente IA desde un fijo de su provincia. Al colgar recibe por WhatsApp el render de su reforma + presupuesto desglosado. Tú recibes el lead caliente en tu panel.</p>
|
||
<div class="hero-ctas">
|
||
<a href="#cta" class="btn btn-primary btn-lg">Empezar gratis 14 días</a>
|
||
<a href="#demo" class="btn btn-secondary btn-lg">Ver una demo en vivo</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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero visual: panel de leads mock -->
|
||
<div class="hero-visual" id="demo" 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>
|
||
|
||
<!-- ============================================
|
||
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">
|
||
<p class="section-kicker">El sector hoy</p>
|
||
<h2 class="section-title">Lo que está <em>roto</em> en una reforma media.</h2>
|
||
<p class="section-lede">Los leads se pelean en marketplaces fríos, las visitas se hacen "a ciegas" y los presupuestos tardan días que el cliente no tiene. Así llevamos veinte años.</p>
|
||
</div>
|
||
|
||
<div class="broken-grid">
|
||
<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 para descubrir que no había obra.</h3>
|
||
<p>Sin información previa, cada visita es una apuesta. Una de cada tres no termina en presupuesto y dos de cada cinco no se firman.</p>
|
||
</div>
|
||
<div class="broken-card">
|
||
<div class="num">03 · SHOWROOMING</div>
|
||
<h3>Te roban el presupuesto y se lo llevan a la competencia.</h3>
|
||
<p>Inviertes horas detallando materiales y partidas. El cliente coge tu trabajo, se lo enseña al de al lado para que se lo baje, y tú pierdes una obra que era tuya. Lleva pasando veinte años.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Cómo funciona
|
||
============================================ -->
|
||
<section class="section" id="como-funciona">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<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 cinco piezas que antes nadie había unido: captura instantánea del lead, agente de voz outbound desde fijo provincial, render IA, WhatsApp y tu panel.</p>
|
||
</div>
|
||
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h4>Tu cliente deja sus datos en tu web</h4>
|
||
<p>Nombre, teléfono, email y un par de fotos del baño o cocina. 30 segundos. Captura el lead aunque el cliente no termine el resto del flujo.</p>
|
||
<div class="tag">⌁ Formulario embebido</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h4>Tu asistente IA le llama en menos de 2 minutos</h4>
|
||
<p>Desde un fijo de su provincia, no un 900. Le pregunta tipo de reforma, calidad, presupuesto target y urgencia. La conversación se transcribe y se estructura sola.</p>
|
||
<div class="tag">⌁ Agente de voz outbound</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h4>Reformix genera render + presupuesto</h4>
|
||
<p>A partir de las fotos + lo que el cliente dijo en la llamada. Render del espacio reformado y presupuesto orientativo desglosado por partidas. En menos de 60 segundos tras colgar.</p>
|
||
<div class="tag">⌁ Render IA + motor de presupuesto</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h4>Tu cliente lo recibe por WhatsApp. Tú lo recibes en tu panel.</h4>
|
||
<p>El cliente recibe el render + PDF + CTA "Quiero visita gratuita" en su WhatsApp. Tú recibes el lead caliente en tu panel con la transcripción, las preferencias y el presupuesto generado.</p>
|
||
<div class="tag">⌁ WhatsApp + Panel reformista</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">5</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" 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">
|
||
<div class="render-placeholder">RENDER · COCINA · CALIDAD MEDIA</div>
|
||
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">
|
||
<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">
|
||
<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. Tu cliente entiende qué está comprando antes de que pongas un pie en su casa.</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. Estado del lead, 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">
|
||
<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" id="proximamente">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<p class="section-kicker">El roadmap corto</p>
|
||
<h2 class="section-title">Lo siguiente que viene <em>(apúntate y entras antes)</em>.</h2>
|
||
<p class="section-lede">Tres cosas que estamos construyendo. Apúntate por email y te avisamos en cuanto estén listas, con prioridad sobre el resto.</p>
|
||
</div>
|
||
<div class="roadmap-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem;">
|
||
<div class="roadmap-card" style="background: var(--color-primary-50, #F4F8F5); border: 1px solid var(--color-neutral-200, #DDE0DD); border-radius: 14px; padding: 1.75rem;">
|
||
<div style="font-size:0.75rem; color: var(--color-primary-700, #2F5C46); font-weight:600; letter-spacing:.05em; margin-bottom:.5rem;">🔒 DISPONIBLE JUL 2026</div>
|
||
<h4 style="font-size:1.25rem; margin-bottom:.75rem; color: var(--color-neutral-950, #161816);">Doble nomenclatura asistida</h4>
|
||
<p style="color: var(--color-neutral-700, #4A4E4A); font-size:.95rem; line-height:1.5; margin-bottom:1rem;">La IA convierte tus referencias internas (<em>Porcelanosa modelo X · grifería Tres serie Y</em>) en códigos genéricos para el cliente (<em>Pavimento porcelánico premium ref. PJ-401</em>). Tu cliente no se puede ir a la competencia con la marca exacta de tus materiales.</p>
|
||
<form class="waitlist-form" data-tag="doble_nomenclatura" style="display:flex; gap:.5rem; flex-wrap:wrap;">
|
||
<input type="email" name="email" placeholder="tu email" required="" style="flex:1; min-width:160px; padding:.625rem .875rem; border:1px solid var(--color-neutral-300, #C4C9C4); border-radius:6px; font-size:.875rem; font-family:inherit;">
|
||
<button type="submit" class="btn btn-primary">Quiero entrar primero</button>
|
||
</form>
|
||
</div>
|
||
<div class="roadmap-card" style="background: var(--color-primary-50, #F4F8F5); border: 1px solid var(--color-neutral-200, #DDE0DD); border-radius: 14px; padding: 1.75rem;">
|
||
<div style="font-size:0.75rem; color: var(--color-primary-700, #2F5C46); font-weight:600; letter-spacing:.05em; margin-bottom:.5rem;">🏅 DISPONIBLE SEP 2026</div>
|
||
<h4 style="font-size:1.25rem; margin-bottom:.75rem; color: var(--color-neutral-950, #161816);">Sello Precio Justo Certificado</h4>
|
||
<p style="color: var(--color-neutral-700, #4A4E4A); font-size:.95rem; line-height:1.5; margin-bottom:1rem;">Tu histórico de presupuestos preciso te diferencia. Los reformistas que cumplen lo que prometen llevan el sello visible para el cliente — y reciben leads premium del valorador público que estamos preparando.</p>
|
||
<form class="waitlist-form" data-tag="sello_precio_justo" style="display:flex; gap:.5rem; flex-wrap:wrap;">
|
||
<input type="email" name="email" placeholder="tu email" required="" style="flex:1; min-width:160px; padding:.625rem .875rem; border:1px solid var(--color-neutral-300, #C4C9C4); border-radius:6px; font-size:.875rem; font-family:inherit;">
|
||
<button type="submit" class="btn btn-primary">Quiero el sello cuando esté</button>
|
||
</form>
|
||
</div>
|
||
<div class="roadmap-card" style="background: var(--color-primary-50, #F4F8F5); border: 1px solid var(--color-neutral-200, #DDE0DD); border-radius: 14px; padding: 1.75rem;">
|
||
<div style="font-size:0.75rem; color: var(--color-primary-700, #2F5C46); font-weight:600; letter-spacing:.05em; margin-bottom:.5rem;">🌐 DISPONIBLE H2 2026</div>
|
||
<h4 style="font-size:1.25rem; margin-bottom:.75rem; color: var(--color-neutral-950, #161816);">Catalán y valenciano</h4>
|
||
<p style="color: var(--color-neutral-700, #4A4E4A); font-size:.95rem; line-height:1.5; margin-bottom:1rem;">El asistente IA también en CA y VA, con voces nativas. Si trabajas en CCAA bilingüe y lo necesitas, apúntate para que prioricemos tu zona.</p>
|
||
<form class="waitlist-form" data-tag="idiomas_ca_va" style="display:flex; gap:.5rem; flex-wrap:wrap;">
|
||
<input type="email" name="email" placeholder="tu email" required="" style="flex:1; min-width:140px; padding:.625rem .875rem; border:1px solid var(--color-neutral-300, #C4C9C4); border-radius:6px; font-size:.875rem; font-family:inherit;">
|
||
<input type="text" name="provincia" placeholder="provincia" required="" style="width:120px; padding:.625rem .875rem; border:1px solid var(--color-neutral-300, #C4C9C4); border-radius:6px; font-size:.875rem; font-family:inherit;">
|
||
<button type="submit" class="btn btn-primary">Lo necesito en mi zona</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section><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">
|
||
<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="#cta" 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> Personalización del script del asistente</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="#cta" 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">
|
||
<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">
|
||
<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">
|
||
<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><details><summary>¿Puedo personalizar la tabla de precios para mi zona y mi catálogo?<span class="chev">+</span></summary><div class="answer">Sí, desde el primer día. Vienes con una tabla base validada para España (datos reales del sector + factor multiplicador por provincia) y la ajustas a tus partidas, tus márgenes y tu catálogo. Tarda 10-15 minutos.</div></details><details><summary>¿Cómo se integra en mi web? ¿Necesito un programador?<span class="chev">+</span></summary><div class="answer">No. Te damos un snippet <code><iframe></code> que copias y pegas en cualquier WordPress, Wix o Squarespace. En el plan Pro, lo instalamos por ti en una videollamada de 20 minutos. En total, 10 minutos de configuración + 10 de instalación.</div></details><details><summary>¿Y si el render no se parece al resultado real?<span class="chev">+</span></summary><div class="answer">El render es orientativo, igual que el presupuesto. Sirve para que el cliente se haga una idea visual y se acerque emocionalmente a contratar. Tu visita sigue siendo la que cierra: el render abre la puerta. Si te lo pide el cliente, le explicas literalmente lo que es y no es — eso refuerza la confianza, no la rompe.</div></details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
Final CTA
|
||
============================================ -->
|
||
<section class="section section-muted" id="proposito">
|
||
<div class="container" style="max-width: 880px;">
|
||
<div class="section-head">
|
||
<p class="section-kicker">El porqué</p>
|
||
<h2 class="section-title">Construimos un mercado de reformas <em>más justo</em>.</h2>
|
||
</div>
|
||
<div style="font-size: 1.125rem; line-height: 1.7; color: var(--color-neutral-700, #4A4E4A); margin-top: 1.5rem;">
|
||
<p style="margin-bottom: 1.25rem;">Estamos cansados de un sector donde el reformista honesto pierde clientes contra el que cobra de menos y después no cumple. Donde el cliente final paga sustos. Donde el presupuesto detallado se convierte en munición para regatear.</p>
|
||
<p>Reformix premia al profesional serio: con velocidad, con visibilidad y, en breve, con un sello que tu cliente puede verificar antes de elegirte. No prometemos leads. No revendemos tu contacto. No te metemos en una puja. Te damos una herramienta para llegar mejor preparado a cada visita — y para que los honestos ganen.</p>
|
||
</div>
|
||
</div>
|
||
</section><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="#" 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">Acceso anticipado · ES</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
</body></html> |