sitio multipagina: inicio, servicios, proyectos, precios, contacto + style.css
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contacto · Rafa IA</title>
|
||||
<meta name="description" content="Contacto con Rafa: agenda un diagnóstico gratis de automatización con IA.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="ancho">
|
||||
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
|
||||
<nav>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="proyectos.html">Proyectos</a>
|
||||
<a href="precios.html">Precios</a>
|
||||
<a href="contacto.html" class="activo">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ancho">
|
||||
<div class="hero" style="padding:48px 0 24px">
|
||||
<h1>Hablemos de <span>tu caso</span></h1>
|
||||
<p class="sub">Te respondo hoy mismo (de verdad respondo yo, no un bot 😉).</p>
|
||||
</div>
|
||||
<div class="contenido">
|
||||
<div class="lista">
|
||||
<ul>
|
||||
<li><strong>Correo:</strong> hola@elrafa.cl</li>
|
||||
<li><strong>Tiempo de respuesta:</strong> mismo día hábil</li>
|
||||
<li><strong>Diagnóstico:</strong> 20 min gratis por videollamada</li>
|
||||
<li><strong>Qué necesito saber:</strong> qué tarea repetitiva te quita más tiempo</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contacto" style="padding:24px 0 48px">
|
||||
<div class="botones">
|
||||
<a class="btn btn-verde" href="mailto:hola@elrafa.cl?subject=Quiero%20automatizar%20mi%20negocio">Escríbeme a hola@elrafa.cl</a>
|
||||
</div>
|
||||
<p class="bajada" style="margin-top:20px">¿Prefieres WhatsApp? Escríbeme al correo y te paso mi número directo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Rafa · Automatizaciones con IA · 2026</footer>
|
||||
</body>
|
||||
</html>
|
||||
+21
-126
@@ -4,108 +4,43 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rafa · Automatizaciones con IA para negocios</title>
|
||||
<meta name="description" content="Automatizo tareas repetitivas con inteligencia artificial: atención al cliente, reportes, agenda y ventas. Habla conmigo por WhatsApp.">
|
||||
<style>
|
||||
:root{
|
||||
--fondo:#0e1116; --tarjeta:#161b22; --borde:#2a3340;
|
||||
--texto:#e8edf3; --suave:#9aa7b8; --acento:#22c55e; --acento2:#38bdf8;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.6}
|
||||
.ancho{max-width:960px;margin:0 auto;padding:0 20px}
|
||||
header{padding:22px 0;border-bottom:1px solid var(--borde)}
|
||||
header .ancho{display:flex;justify-content:space-between;align-items:center}
|
||||
.logo{font-weight:800;font-size:1.2rem}
|
||||
.logo span{color:var(--acento)}
|
||||
nav a{color:var(--suave);text-decoration:none;margin-left:18px;font-size:.95rem}
|
||||
nav a:hover{color:var(--texto)}
|
||||
.hero{padding:72px 0 48px;text-align:center}
|
||||
.etiqueta{display:inline-block;background:#13281b;color:var(--acento);border:1px solid #1f4d2e;padding:6px 14px;border-radius:99px;font-size:.85rem;margin-bottom:20px}
|
||||
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin-bottom:16px}
|
||||
h1 span{color:var(--acento)}
|
||||
.sub{color:var(--suave);font-size:1.15rem;max-width:640px;margin:0 auto 30px}
|
||||
.botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.btn{display:inline-block;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700}
|
||||
.btn-verde{background:var(--acento);color:#06130b}
|
||||
.btn-borde{border:1px solid var(--borde);color:var(--texto)}
|
||||
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:20px 0 48px}
|
||||
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:24px}
|
||||
.tarjeta .icono{font-size:1.8rem;margin-bottom:10px}
|
||||
.tarjeta h3{margin-bottom:8px;font-size:1.05rem}
|
||||
.tarjeta p{color:var(--suave);font-size:.95rem}
|
||||
section{padding:24px 0}
|
||||
h2{text-align:center;margin-bottom:8px;font-size:1.7rem}
|
||||
.bajada{text-align:center;color:var(--suave);margin-bottom:28px}
|
||||
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
|
||||
.paso{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:22px;text-align:center}
|
||||
.paso .num{display:inline-block;width:36px;height:36px;line-height:36px;border-radius:50%;background:var(--acento);color:#06130b;font-weight:800;margin-bottom:10px}
|
||||
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
|
||||
.precio{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:28px;text-align:center}
|
||||
.precio.destacado{border-color:var(--acento)}
|
||||
.precio .monto{font-size:2rem;font-weight:800;margin:10px 0}
|
||||
.precio ul{list-style:none;color:var(--suave);font-size:.95rem;margin:12px 0 20px}
|
||||
.precio li{padding:5px 0}
|
||||
.faq details{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:14px 18px;margin-bottom:10px}
|
||||
.faq summary{cursor:pointer;font-weight:600}
|
||||
.faq p{color:var(--suave);margin-top:8px;font-size:.95rem}
|
||||
.contacto{text-align:center;padding:48px 0 72px}
|
||||
footer{border-top:1px solid var(--borde);padding:22px 0;color:var(--suave);font-size:.9rem;text-align:center}
|
||||
@media(max-width:600px){nav{display:none}}
|
||||
</style>
|
||||
<meta name="description" content="Automatizo tareas repetitivas con inteligencia artificial: atención al cliente, reportes, agenda y ventas.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="ancho">
|
||||
<div class="logo">rafa<span>.</span>ia</div>
|
||||
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
|
||||
<nav>
|
||||
<a href="#servicios">Servicios</a>
|
||||
<a href="#como-trabajo">Cómo trabajo</a>
|
||||
<a href="#precios">Precios</a>
|
||||
<a href="#contacto">Contacto</a>
|
||||
<a href="index.html" class="activo">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="proyectos.html">Proyectos</a>
|
||||
<a href="precios.html">Precios</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="ancho">
|
||||
<div class="hero">
|
||||
<div class="etiqueta">Automatizaciones con IA · Chile</div>
|
||||
<h1>Recupera 10 horas a la semana <span>automatizando lo repetitivo</span></h1>
|
||||
<p class="sub">Soy Rafa. Instalo asistentes con IA en tu negocio: responden clientes, agendan, hacen reportes y ordenan tus ventas. Sin apps nuevas que aprender.</p>
|
||||
<div class="botones">
|
||||
<a class="btn btn-verde" href="#contacto">Agendar diagnóstico gratis</a>
|
||||
<a class="btn btn-borde" href="#servicios">Ver qué automatizo</a>
|
||||
<a class="btn btn-verde" href="contacto.html">Agendar diagnóstico gratis</a>
|
||||
<a class="btn btn-borde" href="servicios.html">Ver qué automatizo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="servicios">
|
||||
<section>
|
||||
<h2>Qué puedo automatizar por ti</h2>
|
||||
<p class="bajada">Empiezo por lo que más tiempo te quita. Esto es lo típico:</p>
|
||||
<div class="rejilla">
|
||||
<div class="tarjeta">
|
||||
<div class="icono">💬</div>
|
||||
<h3>Atención al cliente 24/7</h3>
|
||||
<p>Bot por WhatsApp que responde preguntas frecuentes, toma pedidos y deriva a ti solo lo importante.</p>
|
||||
</div>
|
||||
<div class="tarjeta">
|
||||
<div class="icono">📊</div>
|
||||
<h3>Reportes solos</h3>
|
||||
<p>Tus planillas se convierten en un resumen claro cada lunes en tu correo. Sin copiar ni pegar.</p>
|
||||
</div>
|
||||
<div class="tarjeta">
|
||||
<div class="icono">📅</div>
|
||||
<h3>Agenda y recordatorios</h3>
|
||||
<p>Confirmación automática de citas por WhatsApp. Baja las inasistencias a la mitad.</p>
|
||||
</div>
|
||||
<div class="tarjeta">
|
||||
<div class="icono">💰</div>
|
||||
<h3>Seguimiento de ventas</h3>
|
||||
<p>Si un cliente pregunta y no compra, el sistema le escribe a las 24h. Rescata ventas perdidas.</p>
|
||||
</div>
|
||||
<div class="tarjeta"><div class="icono">💬</div><h3>Atención al cliente 24/7</h3><p>Bot por WhatsApp que responde preguntas frecuentes, toma pedidos y deriva a ti solo lo importante.</p></div>
|
||||
<div class="tarjeta"><div class="icono">📊</div><h3>Reportes solos</h3><p>Tus planillas se convierten en un resumen claro cada lunes en tu correo. Sin copiar ni pegar.</p></div>
|
||||
<div class="tarjeta"><div class="icono">📅</div><h3>Agenda y recordatorios</h3><p>Confirmación automática de citas por WhatsApp. Baja las inasistencias a la mitad.</p></div>
|
||||
</div>
|
||||
<div style="text-align:center"><a class="btn btn-borde" href="servicios.html">Ver todos los servicios</a></div>
|
||||
</section>
|
||||
|
||||
<section id="como-trabajo">
|
||||
<section>
|
||||
<h2>Cómo trabajo</h2>
|
||||
<p class="bajada">Simple, en 3 pasos y sin tecnicismos:</p>
|
||||
<div class="pasos">
|
||||
@@ -114,52 +49,12 @@
|
||||
<div class="paso"><div class="num">3</div><h3>Solo pagas si sirve</h3><p style="color:var(--suave);font-size:.95rem">Si no te ahorra tiempo el primer mes, la desactivo y no pagas.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="precios">
|
||||
<h2>Precios simples</h2>
|
||||
<p class="bajada">Sin letra chica. Todo en pesos chilenos.</p>
|
||||
<div class="precios">
|
||||
<div class="precio">
|
||||
<h3>Diagnóstico</h3>
|
||||
<div class="monto">Gratis</div>
|
||||
<ul><li>20 min por videollamada</li><li>Mapa de qué automatizar</li><li>Sin compromiso</li></ul>
|
||||
<a class="btn btn-borde" href="#contacto">Agendar</a>
|
||||
</div>
|
||||
<div class="precio destacado">
|
||||
<h3>Una automatización</h3>
|
||||
<div class="monto">$150.000</div>
|
||||
<ul><li>Instalación en 7 días</li><li>Ej: bot WhatsApp o reportes</li><li>Soporte 30 días</li></ul>
|
||||
<a class="btn btn-verde" href="#contacto">Empezar</a>
|
||||
</div>
|
||||
<div class="precio">
|
||||
<h3>Acompañamiento</h3>
|
||||
<div class="monto">$60.000/mes</div>
|
||||
<ul><li>Mejoras continuas</li><li>Soporte por WhatsApp</li><li>Cancela cuando quieras</li></ul>
|
||||
<a class="btn btn-borde" href="#contacto">Conversar</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="faq">
|
||||
<h2>Preguntas frecuentes</h2>
|
||||
<p class="bajada">Lo que siempre me preguntan:</p>
|
||||
<details><summary>¿Necesito saber de tecnología?</summary><p>No. Yo lo instalo y te lo dejo funcionando. Tú lo usas por WhatsApp o correo, como siempre.</p></details>
|
||||
<details><summary>¿Mis datos están seguros?</summary><p>Sí. Trabajo con herramientas conocidas y tus claves quedan en tu cuenta, no en la mía.</p></details>
|
||||
<details><summary>¿Y si no me gusta?</summary><p>El primer mes es a prueba. Si no te ahorra tiempo, lo desactivo y no pagas la instalación.</p></details>
|
||||
</section>
|
||||
|
||||
<div class="contacto" id="contacto">
|
||||
<h2>Hablemos de tu caso</h2>
|
||||
<p class="bajada">Escríbeme y te respondo hoy mismo (de verdad respondo yo, no un bot 😉).</p>
|
||||
<div class="botones">
|
||||
<a class="btn btn-verde" href="mailto:hola@elrafa.cl?subject=Quiero%20automatizar%20mi%20negocio">Escríbeme a hola@elrafa.cl</a>
|
||||
</div>
|
||||
<div class="contacto">
|
||||
<h2>¿Hablamos de tu caso?</h2>
|
||||
<p class="bajada">Te respondo hoy mismo (de verdad respondo yo, no un bot 😉).</p>
|
||||
<div class="botones"><a class="btn btn-verde" href="contacto.html">Ir a contacto</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Rafa · Automatizaciones con IA · Hecho a mano en Chile · 2026
|
||||
</footer>
|
||||
|
||||
<footer>Rafa · Automatizaciones con IA · Hecho a mano en Chile · 2026</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Precios · Rafa IA</title>
|
||||
<meta name="description" content="Precios simples en pesos chilenos: diagnóstico gratis, instalación y acompañamiento.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="ancho">
|
||||
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
|
||||
<nav>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="proyectos.html">Proyectos</a>
|
||||
<a href="precios.html" class="activo">Precios</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ancho">
|
||||
<div class="hero" style="padding:48px 0 24px">
|
||||
<h1>Precios <span>simples</span></h1>
|
||||
<p class="sub">Sin letra chica. Todo en pesos chilenos.</p>
|
||||
</div>
|
||||
<section>
|
||||
<div class="precios">
|
||||
<div class="precio"><h3>Diagnóstico</h3><div class="monto">Gratis</div><ul><li>20 min por videollamada</li><li>Mapa de qué automatizar</li><li>Sin compromiso</li></ul><a class="btn btn-borde" href="contacto.html">Agendar</a></div>
|
||||
<div class="precio destacado"><h3>Una automatización</h3><div class="monto">$150.000</div><ul><li>Instalación en 7 días</li><li>Ej: bot WhatsApp o reportes</li><li>Soporte 30 días</li></ul><a class="btn btn-verde" href="contacto.html">Empezar</a></div>
|
||||
<div class="precio"><h3>Acompañamiento</h3><div class="monto">$60.000/mes</div><ul><li>Mejoras continuas</li><li>Soporte por WhatsApp</li><li>Cancela cuando quieras</li></ul><a class="btn btn-borde" href="contacto.html">Conversar</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="faq">
|
||||
<h2>Preguntas frecuentes</h2>
|
||||
<p class="bajada">Lo que siempre me preguntan:</p>
|
||||
<details><summary>¿Necesito saber de tecnología?</summary><p>No. Yo lo instalo y te lo dejo funcionando. Tú lo usas por WhatsApp o correo, como siempre.</p></details>
|
||||
<details><summary>¿Mis datos están seguros?</summary><p>Sí. Trabajo con herramientas conocidas y tus claves quedan en tu cuenta, no en la mía.</p></details>
|
||||
<details><summary>¿Y si no me gusta?</summary><p>El primer mes es a prueba. Si no te ahorra tiempo, lo desactivo y no pagas la instalación.</p></details>
|
||||
<details><summary>¿Cuánto demora?</summary><p>Una automatización simple queda lista en 7 días. Las más completas en 2 a 3 semanas.</p></details>
|
||||
</section>
|
||||
<div style="text-align:center;padding:24px 0 48px"><div class="botones"><a class="btn btn-verde" href="contacto.html">Agendar diagnóstico gratis</a></div></div>
|
||||
</div>
|
||||
<footer>Rafa · Automatizaciones con IA · 2026</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Proyectos · Rafa IA</title>
|
||||
<meta name="description" content="Proyectos y casos de automatización con IA instalados en negocios reales.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="ancho">
|
||||
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
|
||||
<nav>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="proyectos.html" class="activo">Proyectos</a>
|
||||
<a href="precios.html">Precios</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ancho">
|
||||
<div class="hero" style="padding:48px 0 24px">
|
||||
<h1>Casos <span>reales</span></h1>
|
||||
<p class="sub">Proyectos de ejemplo basados en trabajos típicos. Todos instalados en días, no meses.</p>
|
||||
</div>
|
||||
<section>
|
||||
<div class="rejilla">
|
||||
<div class="tarjeta"><div class="icono">💈</div><h3>Peluquería: agenda sola</h3><p>Problema: perdían 2 horas al día contestando WhatsApp. Instalé un bot que agenda y confirma solo.</p><div class="ejemplo">Resultado: 50% menos inasistencias en 30 días.</div></div>
|
||||
<div class="tarjeta"><div class="icono">🦷</div><h3>Clínica: recordatorios</h3><p>Problema: 1 de cada 4 pacientes no llegaba. Recordatorio automático 24h antes + botón confirmar.</p><div class="ejemplo">Resultado: de 25% a 10% de ausencias.</div></div>
|
||||
<div class="tarjeta"><div class="icono">🛒</div><h3>Tienda: rescata ventas</h3><p>Problema: cotizaciones por WhatsApp quedaban sin respuesta. Seguimiento a las 24h y 72h.</p><div class="ejemplo">Resultado: +15% de cierres el primer mes.</div></div>
|
||||
<div class="tarjeta"><div class="icono">📦</div><h3>Distribuidora: reportes lunes</h3><p>Problema: el dueño armaba el reporte a mano cada domingo. Ahora llega solo al correo.</p><div class="ejemplo">Resultado: 3 horas ahorradas cada semana.</div></div>
|
||||
<div class="tarjeta"><div class="icono">🏠</div><h3>Corredora: primer filtro</h3><p>Problema: visitas a gente no calificada. Bot que pregunta presupuesto y comuna antes de agendar.</p><div class="ejemplo">Resultado: solo visitas con intención real.</div></div>
|
||||
<div class="tarjeta"><div class="icono">🍔</div><h3>Comida: pedidos ordenados</h3><p>Problema: pedidos por WhatsApp desordenados. Pedido guiado que cae directo a planilla.</p><div class="ejemplo">Resultado: cero pedidos perdidos.</div></div>
|
||||
</div>
|
||||
<div style="text-align:center;padding-bottom:48px"><div class="botones"><a class="btn btn-verde" href="contacto.html">Quiero algo así</a></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>Rafa · Automatizaciones con IA · 2026</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Servicios · Rafa IA</title>
|
||||
<meta name="description" content="Servicios de automatización con IA: WhatsApp, reportes, agenda, ventas y contenido.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="ancho">
|
||||
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
|
||||
<nav>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html" class="activo">Servicios</a>
|
||||
<a href="proyectos.html">Proyectos</a>
|
||||
<a href="precios.html">Precios</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ancho">
|
||||
<div class="hero" style="padding:48px 0 24px">
|
||||
<h1>Servicios de <span>automatización</span></h1>
|
||||
<p class="sub">Todo queda funcionando en tus cuentas. Yo lo instalo, tú lo usas como siempre.</p>
|
||||
</div>
|
||||
<section>
|
||||
<div class="rejilla">
|
||||
<div class="tarjeta"><div class="icono">💬</div><h3>Atención al cliente 24/7</h3><p>Bot por WhatsApp que responde preguntas frecuentes, toma pedidos y deriva a ti solo lo importante.</p><div class="ejemplo">Ejemplo: peluquería que agenda sola mientras cortan el pelo.</div></div>
|
||||
<div class="tarjeta"><div class="icono">📊</div><h3>Reportes automáticos</h3><p>Tus planillas se convierten en un resumen claro cada lunes en tu correo. Sin copiar ni pegar.</p><div class="ejemplo">Ejemplo: ventas de la semana en 1 correo, sin Excel manual.</div></div>
|
||||
<div class="tarjeta"><div class="icono">📅</div><h3>Agenda y recordatorios</h3><p>Confirmación automática de citas por WhatsApp. Baja las inasistencias a la mitad.</p><div class="ejemplo">Ejemplo: clínica dental que confirma sola sus horas.</div></div>
|
||||
<div class="tarjeta"><div class="icono">💰</div><h3>Seguimiento de ventas</h3><p>Si un cliente pregunta y no compra, el sistema le escribe a las 24h. Rescata ventas perdidas.</p><div class="ejemplo">Ejemplo: tienda que recupera 1 de cada 5 carritos.</div></div>
|
||||
<div class="tarjeta"><div class="icono">📝</div><h3>Contenido con IA</h3><p>Publicaciones para Instagram o correos generados con tu estilo, listos para revisar y publicar.</p><div class="ejemplo">Ejemplo: 8 posts al mes desde 1 reunión de 30 min.</div></div>
|
||||
<div class="tarjeta"><div class="icono">🔗</div><h3>Conexión de herramientas</h3><p>Uno tu WhatsApp, planillas, correo y agenda para que los datos viajen solos.</p><div class="ejemplo">Ejemplo: pedido por WhatsApp que llega solo a tu planilla.</div></div>
|
||||
</div>
|
||||
<div style="text-align:center;padding-bottom:48px"><div class="botones"><a class="btn btn-verde" href="contacto.html">Pedir diagnóstico gratis</a><a class="btn btn-borde" href="precios.html">Ver precios</a></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>Rafa · Automatizaciones con IA · 2026</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
:root{
|
||||
--fondo:#0e1116; --tarjeta:#161b22; --borde:#2a3340;
|
||||
--texto:#e8edf3; --suave:#9aa7b8; --acento:#22c55e; --acento2:#38bdf8;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.6}
|
||||
.ancho{max-width:960px;margin:0 auto;padding:0 20px}
|
||||
header{padding:22px 0;border-bottom:1px solid var(--borde)}
|
||||
header .ancho{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
|
||||
.logo{font-weight:800;font-size:1.2rem;color:var(--texto);text-decoration:none}
|
||||
.logo span{color:var(--acento)}
|
||||
nav a{color:var(--suave);text-decoration:none;margin-left:18px;font-size:.95rem}
|
||||
nav a:hover,nav a.activo{color:var(--texto)}
|
||||
nav a.activo{font-weight:700;border-bottom:2px solid var(--acento);padding-bottom:2px}
|
||||
.hero{padding:72px 0 48px;text-align:center}
|
||||
.etiqueta{display:inline-block;background:#13281b;color:var(--acento);border:1px solid #1f4d2e;padding:6px 14px;border-radius:99px;font-size:.85rem;margin-bottom:20px}
|
||||
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin-bottom:16px}
|
||||
h1 span{color:var(--acento)}
|
||||
.sub{color:var(--suave);font-size:1.15rem;max-width:640px;margin:0 auto 30px}
|
||||
.botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.btn{display:inline-block;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700}
|
||||
.btn-verde{background:var(--acento);color:#06130b}
|
||||
.btn-borde{border:1px solid var(--borde);color:var(--texto)}
|
||||
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:20px 0 48px}
|
||||
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:24px}
|
||||
.tarjeta .icono{font-size:1.8rem;margin-bottom:10px}
|
||||
.tarjeta h3{margin-bottom:8px;font-size:1.05rem}
|
||||
.tarjeta p{color:var(--suave);font-size:.95rem}
|
||||
.tarjeta .ejemplo{margin-top:12px;font-size:.85rem;color:var(--acento2);border-top:1px solid var(--borde);padding-top:10px}
|
||||
section{padding:24px 0}
|
||||
h2{text-align:center;margin-bottom:8px;font-size:1.7rem}
|
||||
.bajada{text-align:center;color:var(--suave);margin-bottom:28px}
|
||||
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
|
||||
.paso{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:22px;text-align:center}
|
||||
.paso .num{display:inline-block;width:36px;height:36px;line-height:36px;border-radius:50%;background:var(--acento);color:#06130b;font-weight:800;margin-bottom:10px}
|
||||
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
|
||||
.precio{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:28px;text-align:center}
|
||||
.precio.destacado{border-color:var(--acento)}
|
||||
.precio .monto{font-size:2rem;font-weight:800;margin:10px 0}
|
||||
.precio ul{list-style:none;color:var(--suave);font-size:.95rem;margin:12px 0 20px}
|
||||
.precio li{padding:5px 0}
|
||||
.faq details{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:14px 18px;margin-bottom:10px}
|
||||
.faq summary{cursor:pointer;font-weight:600}
|
||||
.faq p{color:var(--suave);margin-top:8px;font-size:.95rem}
|
||||
.contacto{text-align:center;padding:48px 0 72px}
|
||||
.contenido{max-width:720px;margin:0 auto}
|
||||
.contenido p{color:var(--suave);margin-bottom:16px}
|
||||
.lista{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:24px;margin:20px 0;text-align:left}
|
||||
.lista li{margin:10px 0 10px 20px;color:var(--suave)}
|
||||
.lista strong{color:var(--texto)}
|
||||
footer{border-top:1px solid var(--borde);padding:22px 0;color:var(--suave);font-size:.9rem;text-align:center}
|
||||
@media(max-width:600px){nav a{margin-left:10px;font-size:.85rem}}
|
||||
Reference in New Issue
Block a user