Files
landing-cirux/index.html
T

760 lines
36 KiB
HTML

<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cirux - Automatiza la Atención a tus Pacientes</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Questrial&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav class="nav-fixed" id="navbar">
<div class="container nav-container">
<a href="#" class="logo">
<span class="logo">
<img src="media/logo-cirux-blanco.png" width="170" />
</span>
</a>
<div class="nav-links" id="navLinks">
<a href="#funciona" class="nav-link">Cómo funciona</a>
<a href="#dolores" class="nav-link"
>Problemas que resolvemos</a
>
<a href="#beneficios" class="nav-link">Beneficios</a>
<a href="#demo" class="nav-link">Demo</a>
</div>
<a href="#cta" class="btn btn-primary nav-cta"
>Agendar demo gratuita</a
>
<button
class="mobile-menu-btn"
id="mobileMenuBtn"
aria-label="Abrir menú"
>
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<header class="hero" id="inicio">
<div class="hero-bg-decoration"></div>
<div class="container hero-container">
<div class="hero-content">
<div class="hero-badge">
<span class="badge-dot"></span>
Software para cirujanos estéticos y reconstructivos
</div>
<h1 class="hero-title">
Deja de perder pacientes por<br />
<span class="text-green">falta de seguimiento</span>
</h1>
<p class="hero-description">
Cirux automatiza la atención post-operatoria,
recordatorios de citas y comunicación con pacientes. Los
cirujanos que usan Cirux recuperan hasta un
<strong>40% de pacientes</strong> que antes se perdían
en el proceso.
</p>
<div class="hero-actions">
<a href="#cta" class="btn btn-primary btn-lg">
Quiero una demo gratuita
</a>
<a href="#funciona" class="btn btn-outline btn-lg">
Ver cómo funciona
</a>
</div>
</div>
<div class="hero-visual">
<div class="video-wrapper">
<div class="video-container">
<video
id="heroVideo"
poster="https://images.unsplash.com/photo-1551076805-e1869033e561?w=1280&h=720&fit=crop"
muted
loop
playsinline
>
<source
src="https://cdn.coverr.co/videos/coverr-a-doctor-checking-on-a-patient-4867/1080p.mp4"
type="video/mp4"
/>
</video>
<div class="video-overlay" id="videoOverlay">
<button
class="play-btn"
id="playBtn"
aria-label="Reproducir video"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M8 5v14l11-7z" />
</svg>
</button>
<p class="video-caption">
Mira cómo Cirux transforma tu consulta en 90
segundos
</p>
</div>
</div>
<div class="video-float-card card-pos-1">
<div class="float-icon"></div>
<div>
<div class="float-title">Cita confirmada</div>
<div class="float-sub">
Paciente notificado por WhatsApp
</div>
</div>
</div>
<div class="video-float-card card-pos-2">
<div class="float-icon"></div>
<div>
<div class="float-title">
Seguimiento automático
</div>
<div class="float-sub">
Día 3 post-operatorio
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="section how-it-works" id="funciona">
<div class="container">
<div class="section-header">
<span class="section-tag">Cómo funciona</span>
<h2 class="section-title">
Tu consulta automatizada<br />en
<span class="text-green">3 pasos</span>
</h2>
<p class="section-desc">
Olvídate de los mensajes no respondidos, los olvidos de
citas y los pacientes sin seguimiento. Cirux trabaja
24/7 por ti.
</p>
</div>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">01</div>
<div class="step-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect
x="3"
y="4"
width="18"
height="18"
rx="2"
/>
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
</div>
<h3 class="step-title">Conecta tu agenda</h3>
<p class="step-desc">
Sincroniza tu calendario existente (Google Calendar,
Outlook o tu sistema actual). En 5 minutos está
listo. Sin cambiar tus herramientas.
</p>
<div class="step-features">
<span class="step-feature"
>Sincronización bidireccional</span
>
<span class="step-feature">Sin interrupciones</span>
</div>
</div>
<div class="step-card">
<div class="step-number">02</div>
<div class="step-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
/>
</svg>
</div>
<h3 class="step-title">
Configura tu asistente virtual
</h3>
<p class="step-desc">
Personaliza los mensajes de confirmación,
recordatorios y seguimiento post-operatorio. Usa
plantillas probadas o crea las tuyas con tu voz
profesional.
</p>
<div class="step-features">
<span class="step-feature"
>WhatsApp, SMS y Email</span
>
<span class="step-feature"
>Plantillas médicas validadas</span
>
</div>
</div>
<div class="step-card">
<div class="step-number">03</div>
<div class="step-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 20V10M18 20V4M6 20v-4" />
</svg>
</div>
<h3 class="step-title">Mide y mejora</h3>
<p class="step-desc">
Dashboard con métricas en tiempo real: tasa de
confirmación, pacientes recuperados, ingresos
adicionales por re-agendamiento. Todo lo que
necesitas saber.
</p>
<div class="step-features">
<span class="step-feature"
>Reportes automáticos semanales</span
>
<span class="step-feature"
>ROI visible al instante</span
>
</div>
</div>
</div>
</div>
</section>
<section class="section pain-points" id="dolores">
<div class="container">
<div class="section-header">
<span class="section-tag">Problemas que resolvemos</span>
<h2 class="section-title">
¿Te suena <span class="text-green">familiar?</span>
</h2>
</div>
<div class="pain-grid">
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</div>
<h3 class="pain-title">
Citas que no aparecen (no-shows)
</h3>
<p class="pain-desc">
El 23% de tus citas se pierden porque el paciente
olvida o no confirma. Eso son horas de quirófano
vacías e ingresos que se evaporan.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Recordatorios automáticos por WhatsApp 24h, 2h y
30min antes. Confirmación con un solo clic.
Reducción del no-show hasta un 65%.
</p>
</div>
</div>
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
/>
</svg>
</div>
<h3 class="pain-title">
Mensajes sin responder = pacientes perdidos
</h3>
<p class="pain-desc">
Atiendes cirugías todo el día. Mientras tanto, 8 de
cada 10 mensajes de pacientes potenciales quedan sin
respuesta. Muchos no vuelven a responder.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Asistente virtual que responde WhatsApp al
instante. Agenda citas automáticamente, responde
preguntas frecuentes y escala lo complejo a tu
equipo.
</p>
</div>
</div>
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
/>
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
</svg>
</div>
<h3 class="pain-title">
Seguimiento post-operatorio inexistente
</h3>
<p class="pain-desc">
El 60% de los cirujanos admite no poder hacer
seguimiento sistemático a todos sus pacientes.
Resultado: complicaciones detectadas tarde y reseñas
negativas.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Protocolos automáticos de seguimiento: día 1, 3,
7, 14 y 30. Encuestas de satisfacción. Alertas
si un paciente reporta un síntoma preocupante.
</p>
</div>
</div>
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 6v6l4 2" />
</svg>
</div>
<h3 class="pain-title">
El equipo administrativo desbordado
</h3>
<p class="pain-desc">
Tu recepcionista pasa el 70% del tiempo confirmando
citas y respondiendo "¿a qué hora era?". Tareas de
bajo valor que queman al equipo.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Automatiza el 85% de la comunicación repetitiva.
Tu equipo se libera para atender lo que
realmente importa: la experiencia del paciente
presencial.
</p>
</div>
</div>
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"
/>
<circle cx="9" cy="7" r="4" />
<path
d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"
/>
</svg>
</div>
<h3 class="pain-title">
Pacientes que no vuelven para retoques
</h3>
<p class="pain-desc">
El valor de vida de un paciente satisfecho es 5x su
primera cirugía. Pero sin recordatorios, el 70% no
regresa para procedimientos adicionales.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Campañas de fidelización automáticas:
recordatorios de controles anuales, ofertas
personalizadas para retoques, y programa de
referidos automatizado.
</p>
</div>
</div>
<div class="pain-card">
<div class="pain-icon pain-icon-red">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
/>
</svg>
</div>
<h3 class="pain-title">Reputación online vulnerable</h3>
<p class="pain-desc">
Un solo paciente insatisfecho por falta de
comunicación puede destruir tu reputación en Google
con una reseña de 1 estrella.
</p>
<div class="pain-solution">
<span class="solution-tag">Solución Cirux</span>
<p>
Solicitud automática de reseñas a pacientes
satisfechos. Detección temprana de
insatisfacción antes de que llegue a internet.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section benefits" id="beneficios">
<div class="container">
<div class="benefits-layout">
<div class="benefits-content">
<span class="section-tag">Beneficios</span>
<h2 class="section-title">
Diseñado específicamente para<span
class="text-green"
>
cirujanos</span
>
</h2>
<p class="section-desc">
No es un CRM genérico pintado de blanco. Cirux
entiende el ciclo completo del paciente quirúrgico:
desde la primera consulta hasta los controles de
años.
</p>
<div class="benefit-list">
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Menos interrupciones, más cirugías</h4>
<p>
Tu asistente virtual atiende consultas
mientras operas. No más teléfono sonando
en medio de una valoración.
</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Pacientes más tranquilos y seguros</h4>
<p>
El seguimiento proactivo reduce la
ansiedad post-operatoria y las llamadas
de emergencia innecesarias a tu celular
personal.
</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Auditoría y cumplimiento médico</h4>
<p>
Toda la comunicación documentada,
trazable y segura. Cumple con normativas
de protección de datos médicos Ley 1581
de 2012, Ley 1712 de 2020.
</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Ingresos predecibles y crecientes</h4>
<p>
Reduce el abandono de pacientes, aumenta
la tasa de re-agendamiento y activa el
boca a boca digital con referidos
automatizados.
</p>
</div>
</div>
</div>
</div>
<div class="benefits-visual">
<div class="benefits-image-wrapper">
<img
src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=1000&fit=crop"
alt="Doctor usando tablet para atención al paciente"
/>
<div class="benefits-float-card">
<div class="bfc-header">
<span class="bfc-dot"></span>
<span class="bfc-label"
>Paciente: María G.</span
>
<span class="bfc-status"
>Rinoplastía - Día 5</span
>
</div>
<div class="bfc-messages">
<div class="bfc-msg bfc-msg-in">
<div class="bfc-msg-text">
¿Es normal que tenga un poco de
hinchazón todavía?
</div>
<div class="bfc-msg-time">09:15</div>
</div>
<div class="bfc-msg bfc-msg-out">
<div class="bfc-msg-text">
Sí María, es completamente normal.
La hinchazón pica alrededor del día
7-10. ¿Tienes dolor?
</div>
<div class="bfc-msg-time">09:16</div>
</div>
<div class="bfc-msg bfc-msg-in">
<div class="bfc-msg-text">
No, solo un poco de presión. Gracias
doctor.
</div>
<div class="bfc-msg-time">09:18</div>
</div>
</div>
<div class="bfc-note">
Asistente Cirux resolvió en 3 minutos. Sin
interrumpir tu mañana.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section cta-section" id="cta">
<div class="cta-bg"></div>
<div class="container">
<div class="cta-box">
<h2 class="cta-title">
Tu próximo paciente está<br />escribiéndote ahora mismo
</h2>
<p class="cta-desc">
Cada minuto que pasa sin responder es un paciente que
puede ir con tu competencia. Agenda una demo gratuita de
20 minutos y descubre cuántos pacientes estás dejando
escapar.
</p>
<div class="cta-form-wrapper">
<form
class="cta-form"
id="ctaForm"
action="#"
method="POST"
>
<div class="form-row">
<div class="form-group">
<label for="nombre">Tu Nombre</label>
<input
type="text"
id="nombre"
name="nombre"
required
placeholder="Dr. Juan Pérez"
/>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="telefono">WhatsApp</label>
<input
type="tel"
id="telefono"
name="telefono"
required
placeholder="+57 300 000 0000"
/>
</div>
</div>
<button
type="submit"
class="btn btn-primary btn-lg btn-full"
>
Agendar mi demo gratuita
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</button>
</form>
<div class="cta-guarantee">
<div class="guarantee-item">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M22 11.08V12a10 10 0 11-5.93-9.14"
/>
<path d="M22 4L12 14.01l-3-3" />
</svg>
Demo sin compromiso
</div>
<div class="guarantee-item">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M22 11.08V12a10 10 0 11-5.93-9.14"
/>
<path d="M22 4L12 14.01l-3-3" />
</svg>
Setup gratis con tu agenda actual
</div>
<div class="guarantee-item">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M22 11.08V12a10 10 0 11-5.93-9.14"
/>
<path d="M22 4L12 14.01l-3-3" />
</svg>
Cancela cuando quieras
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<img
src="media/logo-cirux-blanco.png"
width="140"
/>
</a>
<p>
Software de automatización para cirujanos que
valoran el tiempo, la precisión y la relación con
sus pacientes.
</p>
</div>
<div class="footer-links">
<h4>Producto</h4>
<a href="#funciona">Cómo funciona</a>
<a href="#dolores">Problemas que resolvemos</a>
<a href="#beneficios">Beneficios</a>
<a href="#cta">Agendar demo</a>
</div>
<div class="footer-links">
<h4>Legal</h4>
<a href="#">Política de privacidad</a>
<a href="#">Términos de uso</a>
<a href="#">Protección de datos médicos</a>
</div>
<div class="footer-links">
<h4>Contacto</h4>
<a href="mailto:hola@cirux.co">hola@cirux.cloud</a>
<a href="https://wa.me/573236570699"
>WhatsApp: +57 323 657 0699</a
>
<span>Pereira, Colombia · LATAM</span>
</div>
</div>
<div class="footer-bottom">
<p>
Cirux. Todos los derechos reservados. Construido con
rigor médico y tecnología de clase mundial.
</p>
</div>
</div>
</footer>
<div class="success-modal" id="successModal">
<div class="modal-content">
<div class="modal-icon"></div>
<h3>¡Solicitud recibida!</h3>
<p>
En un momento te contactaremos para agendar una cita.
</p>
<button class="btn btn-primary" id="closeModal">
Entendido
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>