commit e005c149068db1f16b1e5cdab13deed5ffecf874 Author: Silvio Date: Sun May 31 18:41:33 2026 -0500 Initial landing page commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..7de1d2a --- /dev/null +++ b/index.html @@ -0,0 +1,760 @@ + + + + + + Cirux - Automatiza la Atención a tus Pacientes + + + + + + + + +
+
+
+
+
+ + Software para cirujanos estéticos y reconstructivos +
+

+ Deja de perder pacientes por
+ falta de seguimiento +

+

+ Cirux automatiza la atención post-operatoria, + recordatorios de citas y comunicación con pacientes. Los + cirujanos que usan Cirux recuperan hasta un + 40% de pacientes que antes se perdían + en el proceso. +

+
+ + Quiero una demo gratuita + + + Ver cómo funciona + +
+
+
+
+
+ +
+ +

+ Mira cómo Cirux transforma tu consulta en 90 + segundos +

+
+
+
+
✓
+
+
Cita confirmada
+
+ Paciente notificado por WhatsApp +
+
+
+
+
♥
+
+
+ Seguimiento automático +
+
+ Día 3 post-operatorio +
+
+
+
+
+
+
+ +
+
+
+ Cómo funciona +

+ Tu consulta automatizada
en + 3 pasos +

+

+ Olvídate de los mensajes no respondidos, los olvidos de + citas y los pacientes sin seguimiento. Cirux trabaja + 24/7 por ti. +

+
+
+
+
01
+
+ + + + +
+

Conecta tu agenda

+

+ Sincroniza tu calendario existente (Google Calendar, + Outlook o tu sistema actual). En 5 minutos está + listo. Sin cambiar tus herramientas. +

+
+ Sincronización bidireccional + Sin interrupciones +
+
+
+
02
+
+ + + +
+

+ Configura tu asistente virtual +

+

+ Personaliza los mensajes de confirmación, + recordatorios y seguimiento post-operatorio. Usa + plantillas probadas o crea las tuyas con tu voz + profesional. +

+
+ WhatsApp, SMS y Email + Plantillas médicas validadas +
+
+
+
03
+
+ + + +
+

Mide y mejora

+

+ Dashboard con métricas en tiempo real: tasa de + confirmación, pacientes recuperados, ingresos + adicionales por re-agendamiento. Todo lo que + necesitas saber. +

+
+ Reportes automáticos semanales + ROI visible al instante +
+
+
+
+
+ +
+
+
+ Problemas que resolvemos +

+ ¿Te suena familiar? +

+
+
+
+
+ + + +
+

+ Citas que no aparecen (no-shows) +

+

+ 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. +

+
+ Solución Cirux +

+ Recordatorios automáticos por WhatsApp 24h, 2h y + 30min antes. Confirmación con un solo clic. + Reducción del no-show hasta un 65%. +

+
+
+
+
+ + + +
+

+ Mensajes sin responder = pacientes perdidos +

+

+ 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. +

+
+ Solución Cirux +

+ Asistente virtual que responde WhatsApp al + instante. Agenda citas automáticamente, responde + preguntas frecuentes y escala lo complejo a tu + equipo. +

+
+
+
+
+ + + + +
+

+ Seguimiento post-operatorio inexistente +

+

+ El 60% de los cirujanos admite no poder hacer + seguimiento sistemático a todos sus pacientes. + Resultado: complicaciones detectadas tarde y reseñas + negativas. +

+
+ Solución Cirux +

+ 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. +

+
+
+
+
+ + + + +
+

+ El equipo administrativo desbordado +

+

+ Tu recepcionista pasa el 70% del tiempo confirmando + citas y respondiendo "¿a qué hora era?". Tareas de + bajo valor que queman al equipo. +

+
+ Solución Cirux +

+ Automatiza el 85% de la comunicación repetitiva. + Tu equipo se libera para atender lo que + realmente importa: la experiencia del paciente + presencial. +

+
+
+
+
+ + + + + +
+

+ Pacientes que no vuelven para retoques +

+

+ El valor de vida de un paciente satisfecho es 5x su + primera cirugía. Pero sin recordatorios, el 70% no + regresa para procedimientos adicionales. +

+
+ Solución Cirux +

+ Campañas de fidelización automáticas: + recordatorios de controles anuales, ofertas + personalizadas para retoques, y programa de + referidos automatizado. +

+
+
+
+
+ + + +
+

Reputación online vulnerable

+

+ Un solo paciente insatisfecho por falta de + comunicación puede destruir tu reputación en Google + con una reseña de 1 estrella. +

+
+ Solución Cirux +

+ Solicitud automática de reseñas a pacientes + satisfechos. Detección temprana de + insatisfacción antes de que llegue a internet. +

+
+
+
+
+
+ +
+
+
+
+ Beneficios +

+ Diseñado específicamente para + cirujanos +

+

+ 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. +

+
+
+
✓
+
+

Menos interrupciones, más cirugías

+

+ Tu asistente virtual atiende consultas + mientras operas. No más teléfono sonando + en medio de una valoración. +

+
+
+
+
✓
+
+

Pacientes más tranquilos y seguros

+

+ El seguimiento proactivo reduce la + ansiedad post-operatoria y las llamadas + de emergencia innecesarias a tu celular + personal. +

+
+
+
+
✓
+
+

Auditoría y cumplimiento médico

+

+ 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. +

+
+
+
+
✓
+
+

Ingresos predecibles y crecientes

+

+ Reduce el abandono de pacientes, aumenta + la tasa de re-agendamiento y activa el + boca a boca digital con referidos + automatizados. +

+
+
+
+
+
+
+ Doctor usando tablet para atención al paciente +
+
+ + Paciente: María G. + Rinoplastía - Día 5 +
+
+
+
+ ¿Es normal que tenga un poco de + hinchazón todavía? +
+
09:15
+
+
+
+ Sí María, es completamente normal. + La hinchazón pica alrededor del día + 7-10. ¿Tienes dolor? +
+
09:16
+
+
+
+ No, solo un poco de presión. Gracias + doctor. +
+
09:18
+
+
+
+ Asistente Cirux resolvió en 3 minutos. Sin + interrumpir tu mañana. +
+
+
+
+
+
+
+ +
+
+
+
+

+ Tu próximo paciente está
escribiéndote ahora mismo +

+

+ 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. +

+
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + + + + Demo sin compromiso +
+
+ + + + + Setup gratis con tu agenda actual +
+
+ + + + + Cancela cuando quieras +
+
+
+
+
+
+ + + +
+
+
✓
+

¡Solicitud recibida!

+

+ En un momento te contactaremos para agendar tu demo + personalizada. +

+ +
+
+ + + + diff --git a/media/logo-cirux-blanco.png b/media/logo-cirux-blanco.png new file mode 100644 index 0000000..923199a Binary files /dev/null and b/media/logo-cirux-blanco.png differ diff --git a/media/logo-cirux.png b/media/logo-cirux.png new file mode 100644 index 0000000..5116d00 Binary files /dev/null and b/media/logo-cirux.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..91dca77 --- /dev/null +++ b/script.js @@ -0,0 +1,217 @@ +/* Cirux Landing Page Scripts */ + +(function() { + 'use strict'; + + // DOM Elements + const navbar = document.getElementById('navbar'); + const mobileMenuBtn = document.getElementById('mobileMenuBtn'); + const navLinks = document.getElementById('navLinks'); + const heroVideo = document.getElementById('heroVideo'); + const videoOverlay = document.getElementById('videoOverlay'); + const playBtn = document.getElementById('playBtn'); + const ctaForm = document.getElementById('ctaForm'); + const successModal = document.getElementById('successModal'); + const closeModalBtn = document.getElementById('closeModal'); + + // Navbar scroll effect + function handleScroll() { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); + + // Mobile menu toggle + if (mobileMenuBtn && navLinks) { + mobileMenuBtn.addEventListener('click', function() { + const isOpen = navLinks.classList.toggle('mobile-open'); + mobileMenuBtn.classList.toggle('active', isOpen); + document.body.classList.toggle('menu-open', isOpen); + }); + } + + // Hero video play + if (heroVideo && playBtn && videoOverlay) { + playBtn.addEventListener('click', function() { + heroVideo.play().then(function() { + videoOverlay.classList.add('hidden'); + }).catch(function(err) { + console.log('Autoplay prevented:', err); + videoOverlay.classList.add('hidden'); + heroVideo.setAttribute('controls', 'controls'); + }); + }); + + // Pause video when out of viewport + const videoObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (!entry.isIntersecting && !heroVideo.paused) { + heroVideo.pause(); + videoOverlay.classList.remove('hidden'); + } + }); + }, { threshold: 0.3 }); + + videoObserver.observe(heroVideo); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + if (href === '#') return; + const target = document.querySelector(href); + if (target) { + e.preventDefault(); + const offset = 80; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + // Close mobile menu if open + if (navLinks) { + navLinks.classList.remove('mobile-open'); + mobileMenuBtn.classList.remove('active'); + document.body.classList.remove('menu-open'); + } + } + }); + }); + + // CTA Form submission + if (ctaForm) { + ctaForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Collect form data + const formData = new FormData(ctaForm); + const data = {}; + formData.forEach(function(value, key) { + data[key] = value; + }); + + // Here you would typically send to your backend + console.log('Form submitted:', data); + + // Show success modal + if (successModal) { + successModal.classList.add('active'); + document.body.style.overflow = 'hidden'; + } + + // Reset form + ctaForm.reset(); + }); + } + + // Close modal + if (closeModalBtn && successModal) { + closeModalBtn.addEventListener('click', function() { + successModal.classList.remove('active'); + document.body.style.overflow = ''; + }); + + successModal.addEventListener('click', function(e) { + if (e.target === successModal) { + successModal.classList.remove('active'); + document.body.style.overflow = ''; + } + }); + } + + // Close modal on Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && successModal && successModal.classList.contains('active')) { + successModal.classList.remove('active'); + document.body.style.overflow = ''; + } + }); + + // Scroll reveal animation + const revealElements = document.querySelectorAll( + '.step-card, .pain-card, .testimonial-card, .benefit-item, .section-header' + ); + + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(function(el) { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + revealObserver.observe(el); + }); + + // Number counter animation for stats + const statNumbers = document.querySelectorAll('.stat-number'); + let statsAnimated = false; + + function animateStats() { + if (statsAnimated) return; + const statsSection = document.querySelector('.hero-stats'); + if (!statsSection) return; + const rect = statsSection.getBoundingClientRect(); + if (rect.top < window.innerHeight && rect.bottom > 0) { + statsAnimated = true; + statNumbers.forEach(function(stat) { + const text = stat.textContent; + const hasPlus = text.includes('+'); + const hasPercent = text.includes('%'); + const num = parseInt(text.replace(/\D/g, ''), 10); + const suffix = hasPlus ? '+' : (hasPercent ? '%' : ''); + const prefix = text.startsWith('$') ? '$' : ''; + + let current = 0; + const increment = Math.ceil(num / 40); + const duration = 1200; + const stepTime = duration / (num / increment); + + const timer = setInterval(function() { + current += increment; + if (current >= num) { + current = num; + clearInterval(timer); + } + stat.textContent = prefix + current.toLocaleString() + suffix; + }, stepTime); + }); + } + } + + window.addEventListener('scroll', animateStats, { passive: true }); + animateStats(); + + // Benefits float card subtle parallax + const benefitsVisual = document.querySelector('.benefits-visual'); + if (benefitsVisual) { + window.addEventListener('scroll', function() { + const rect = benefitsVisual.getBoundingClientRect(); + const centerOffset = (rect.top + rect.height / 2 - window.innerHeight / 2) / window.innerHeight; + const floatCard = benefitsVisual.querySelector('.benefits-float-card'); + if (floatCard) { + floatCard.style.transform = 'translateY(' + (centerOffset * -15) + 'px)'; + } + }, { passive: true }); + } + + // Console welcome message + console.log('%c Cirux ', 'background: #22c55e; color: #2e4057; font-size: 20px; font-weight: bold; padding: 8px 16px; border-radius: 8px;'); + console.log('%cSoftware de automatización para cirujanos', 'color: #fdf8f5; font-size: 14px;'); + +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f1ae214 --- /dev/null +++ b/styles.css @@ -0,0 +1,1281 @@ +/* Cirux Landing Page Styles */ +/* Palette: Principal #2e4057, Secundario #22c55e, Acento #fdf8f5 */ +/* Fonts: Bricolage Grotesque, Questrial */ + +:root { + --color-principal: #2e4057; + --color-principal-dark: #1f2e40; + --color-principal-light: #3d5675; + --color-secundario: #22c55e; + --color-secundario-dark: #1eaf53; + --color-acento: #fdf8f5; + --color-blanco: #ffffff; + --color-gris: #6b7280; + --color-gris-claro: #f3f4f6; + --color-rojo-suave: #fef2f2; + --color-rojo: #ef4444; + --radius: 0.75rem; + --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); + --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); + --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); + --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: 'Bricolage Grotesque', 'Questrial', -apple-system, BlinkMacSystemFont, sans-serif; + color: var(--color-acento); + background-color: var(--color-principal); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 24px; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Text utilities */ +.text-green { color: var(--color-secundario); } + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + font-family: inherit; + font-weight: 600; + font-size: 0.95rem; + border: none; + border-radius: var(--radius); + cursor: pointer; + transition: all 0.3s ease; + padding: 12px 24px; + line-height: 1.2; +} + +.btn-primary { + background-color: var(--color-secundario); + color: var(--color-principal); +} + +.btn-primary:hover { + background-color: var(--color-secundario-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background-color: var(--color-principal); + color: var(--color-secundario); + border: 2px solid var(--color-secundario); +} + +.btn-secondary:hover { + background-color: var(--color-principal-dark); + transform: translateY(-2px); +} + +.btn-outline { + background-color: transparent; + color: var(--color-acento); + border: 2px solid rgba(253,248,245,0.3); +} + +.btn-outline:hover { + border-color: var(--color-secundario); + color: var(--color-secundario); + transform: translateY(-2px); +} + +.btn-lg { + padding: 16px 32px; + font-size: 1.05rem; +} + +.btn-full { + width: 100%; +} + +/* Navigation */ +.nav-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background-color: transparent; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + padding: 16px 0; +} + +.nav-fixed.scrolled { + background-color: rgba(46, 64, 87, 0.95); + backdrop-filter: blur(12px); + box-shadow: var(--shadow); + padding: 12px 0; +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; +} + +.logo { + display: flex; + align-items: center; + gap: 10px; + font-weight: 700; + font-size: 1.4rem; + color: var(--color-acento); + flex-shrink: 0; +} + +.logo-icon { + width: 36px; + height: 36px; + background: var(--color-secundario); + color: var(--color-principal); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + font-weight: 800; +} + +.nav-links { + display: flex; + align-items: center; + gap: 32px; +} + +.nav-link { + color: var(--color-acento); + font-weight: 500; + font-size: 0.95rem; + transition: color 0.3s ease, transform 0.3s ease; + position: relative; +} + +.nav-link:hover { + color: var(--color-secundario); + transform: translateY(-1px); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: var(--color-secundario); + transition: width 0.3s ease; +} + +.nav-link:hover::after { + width: 100%; +} + +.nav-cta { + flex-shrink: 0; +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 4px; +} + +.mobile-menu-btn span { + display: block; + width: 24px; + height: 2px; + background: var(--color-acento); + transition: all 0.3s ease; +} + +/* Hero */ +.hero { + position: relative; + padding: 140px 0 80px; + overflow: hidden; + min-height: 100vh; + display: flex; + align-items: center; +} + +.hero-bg-decoration { + position: absolute; + top: -200px; + right: -200px; + width: 800px; + height: 800px; + background: radial-gradient(circle, rgba(34,197,94,0.08) 0%, transparent 70%); + pointer-events: none; +} + +.hero-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; + position: relative; + z-index: 1; +} + +.hero-content { + max-width: 560px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(34,197,94,0.12); + border: 1px solid rgba(34,197,94,0.25); + color: var(--color-secundario); + padding: 8px 16px; + border-radius: 100px; + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 24px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.badge-dot { + width: 8px; + height: 8px; + background: var(--color-secundario); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.hero-title { + font-size: 3.2rem; + font-weight: 800; + line-height: 1.1; + margin-bottom: 20px; + letter-spacing: -0.02em; +} + +.hero-description { + font-size: 1.15rem; + color: rgba(253,248,245,0.85); + margin-bottom: 32px; + line-height: 1.7; +} + +.hero-description strong { + color: var(--color-secundario); + font-weight: 700; +} + +.hero-actions { + display: flex; + gap: 12px; + margin-bottom: 40px; + flex-wrap: wrap; +} + +.hero-stats { + display: flex; + align-items: center; + gap: 24px; +} + +.stat-number { + font-size: 1.8rem; + font-weight: 800; + color: var(--color-secundario); + line-height: 1; +} + +.stat-label { + font-size: 0.85rem; + color: rgba(253,248,245,0.6); + margin-top: 4px; +} + +.stat-divider { + width: 1px; + height: 36px; + background: rgba(253,248,245,0.15); +} + +/* Hero Video */ +.hero-visual { + position: relative; +} + +.video-wrapper { + position: relative; +} + +.video-container { + position: relative; + border-radius: 16px; + overflow: hidden; + box-shadow: var(--shadow-xl); + background: var(--color-principal-dark); + aspect-ratio: 16/9; +} + +.video-container video { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.video-overlay { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgba(46, 64, 87, 0.4); + transition: opacity 0.5s ease, visibility 0.5s ease; +} + +.video-overlay.hidden { + opacity: 0; + visibility: hidden; +} + +.play-btn { + width: 72px; + height: 72px; + background: var(--color-secundario); + color: var(--color-principal); + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 0 0 0 rgba(34,197,94,0.4); +} + +.play-btn:hover { + transform: scale(1.1); + box-shadow: 0 0 0 12px rgba(34,197,94,0.2); +} + +.play-btn svg { + margin-left: 4px; +} + +.video-caption { + margin-top: 16px; + font-size: 0.9rem; + color: var(--color-acento); + text-align: center; + font-weight: 500; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.video-float-card { + position: absolute; + background: var(--color-blanco); + color: var(--color-principal); + padding: 14px 18px; + border-radius: 12px; + box-shadow: var(--shadow-lg); + display: flex; + align-items: center; + gap: 12px; + font-size: 0.85rem; + animation: float 6s ease-in-out infinite; + z-index: 10; +} + +.card-pos-1 { + top: -20px; + right: -20px; + animation-delay: 0s; +} + +.card-pos-2 { + bottom: -20px; + left: -20px; + animation-delay: 3s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.float-icon { + width: 36px; + height: 36px; + background: rgba(34,197,94,0.12); + color: var(--color-secundario); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + font-weight: 700; + flex-shrink: 0; +} + +.float-title { + font-weight: 700; + font-size: 0.9rem; + line-height: 1.3; +} + +.float-sub { + color: var(--color-gris); + font-size: 0.8rem; + margin-top: 2px; +} + +/* Trust */ +.trust { + padding: 40px 0; + border-top: 1px solid rgba(253,248,245,0.08); + border-bottom: 1px solid rgba(253,248,245,0.08); + background: rgba(31,46,64,0.4); +} + +.trust-title { + text-align: center; + font-size: 0.85rem; + color: rgba(253,248,245,0.5); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 20px; +} + +.trust-logos { + display: flex; + justify-content: center; + align-items: center; + gap: 48px; + flex-wrap: wrap; +} + +.trust-logo { + font-size: 1.2rem; + font-weight: 700; + color: rgba(253,248,245,0.35); + letter-spacing: 1px; + transition: color 0.3s ease; +} + +.trust-logo:hover { + color: rgba(253,248,245,0.6); +} + +/* Sections */ +.section { + padding: 100px 0; +} + +.section-header { + max-width: 640px; + margin-bottom: 56px; +} + +.section-header.centered { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.section-tag { + display: inline-block; + color: var(--color-secundario); + font-weight: 700; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 12px; +} + +.section-title { + font-size: 2.6rem; + font-weight: 800; + line-height: 1.15; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.section-desc { + font-size: 1.1rem; + color: rgba(253,248,245,0.75); + line-height: 1.7; +} + +/* How it works */ +.how-it-works { + background: linear-gradient(180deg, var(--color-principal) 0%, rgba(31,46,64,0.6) 100%); +} + +.steps-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 32px; +} + +.step-card { + background: var(--color-acento); + color: var(--color-principal); + padding: 40px 32px; + border-radius: 16px; + position: relative; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.step-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.step-number { + position: absolute; + top: 24px; + right: 24px; + font-size: 3rem; + font-weight: 800; + color: rgba(46,64,87,0.06); + line-height: 1; +} + +.step-icon { + width: 56px; + height: 56px; + background: rgba(34,197,94,0.1); + color: var(--color-secundario); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 24px; +} + +.step-title { + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 12px; + line-height: 1.3; +} + +.step-desc { + color: var(--color-gris); + font-size: 0.95rem; + line-height: 1.7; + margin-bottom: 20px; +} + +.step-features { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.step-feature { + background: rgba(34,197,94,0.08); + color: var(--color-secundario-dark); + padding: 4px 12px; + border-radius: 100px; + font-size: 0.8rem; + font-weight: 600; +} + +/* Pain points */ +.pain-points { + background: var(--color-principal-dark); +} + +.pain-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.pain-card { + background: var(--color-acento); + color: var(--color-principal); + padding: 32px; + border-radius: 16px; + transition: transform 0.3s ease; +} + +.pain-card:hover { + transform: translateY(-4px); +} + +.pain-icon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.pain-icon-red { + background: var(--color-rojo-suave); + color: var(--color-rojo); +} + +.pain-title { + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 10px; + line-height: 1.3; +} + +.pain-desc { + color: var(--color-gris); + font-size: 0.92rem; + line-height: 1.7; + margin-bottom: 20px; +} + +.pain-solution { + border-top: 1px solid var(--color-gris-claro); + padding-top: 16px; +} + +.pain-solution p { + color: var(--color-gris); + font-size: 0.9rem; + line-height: 1.6; + margin-top: 8px; +} + +.solution-tag { + display: inline-block; + background: rgba(34,197,94,0.1); + color: var(--color-secundario-dark); + padding: 4px 10px; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Benefits */ +.benefits-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; +} + +.benefit-list { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 32px; +} + +.benefit-item { + display: flex; + gap: 16px; +} + +.benefit-check { + width: 28px; + height: 28px; + background: var(--color-secundario); + color: var(--color-principal); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + font-weight: 700; + flex-shrink: 0; + margin-top: 2px; +} + +.benefit-item h4 { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 4px; +} + +.benefit-item p { + color: rgba(253,248,245,0.7); + font-size: 0.95rem; + line-height: 1.6; +} + +.benefits-visual { + position: relative; +} + +.benefits-image-wrapper { + position: relative; + border-radius: 16px; + overflow: hidden; + box-shadow: var(--shadow-xl); +} + +.benefits-image-wrapper img { + width: 100%; + height: 600px; + object-fit: cover; +} + +.benefits-float-card { + position: absolute; + bottom: 24px; + left: 24px; + right: 24px; + background: var(--color-blanco); + color: var(--color-principal); + border-radius: 12px; + padding: 16px; + box-shadow: var(--shadow-lg); + font-size: 0.85rem; +} + +.bfc-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 12px; + padding-bottom: 10px; + border-bottom: 1px solid var(--color-gris-claro); +} + +.bfc-dot { + width: 8px; + height: 8px; + background: var(--color-secundario); + border-radius: 50%; +} + +.bfc-label { + font-weight: 700; + font-size: 0.9rem; +} + +.bfc-status { + margin-left: auto; + color: var(--color-gris); + font-size: 0.8rem; +} + +.bfc-messages { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 12px; +} + +.bfc-msg { + max-width: 85%; + padding: 8px 12px; + border-radius: 10px; + font-size: 0.85rem; + line-height: 1.4; +} + +.bfc-msg-in { + background: var(--color-gris-claro); + align-self: flex-start; +} + +.bfc-msg-out { + background: rgba(34,197,94,0.1); + color: var(--color-principal); + align-self: flex-end; + margin-left: auto; +} + +.bfc-msg-time { + font-size: 0.7rem; + color: var(--color-gris); + margin-top: 2px; +} + +.bfc-note { + background: rgba(34,197,94,0.08); + color: var(--color-secundario-dark); + padding: 8px 12px; + border-radius: 8px; + font-size: 0.8rem; + font-weight: 600; + text-align: center; +} + +/* Testimonials */ +.testimonials { + background: linear-gradient(180deg, rgba(31,46,64,0.6) 0%, var(--color-principal) 100%); +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.testimonial-card { + background: var(--color-acento); + color: var(--color-principal); + padding: 32px; + border-radius: 16px; + transition: transform 0.3s ease; +} + +.testimonial-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.testimonial-stars { + color: #f59e0b; + font-size: 1.1rem; + margin-bottom: 16px; + letter-spacing: 2px; +} + +.testimonial-text { + font-size: 1rem; + line-height: 1.7; + margin-bottom: 24px; + color: var(--color-principal-light); +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 12px; +} + +.testimonial-avatar { + width: 44px; + height: 44px; + border-radius: 50%; + object-fit: cover; +} + +.testimonial-name { + font-weight: 700; + font-size: 0.95rem; +} + +.testimonial-role { + color: var(--color-gris); + font-size: 0.85rem; +} + +/* CTA Section */ +.cta-section { + position: relative; + padding: 100px 0; + overflow: hidden; +} + +.cta-bg { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, transparent 50%); + pointer-events: none; +} + +.cta-box { + background: var(--color-acento); + color: var(--color-principal); + border-radius: 20px; + padding: 64px; + position: relative; + z-index: 1; + text-align: center; +} + +.cta-title { + font-size: 2.4rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 16px; +} + +.cta-desc { + font-size: 1.1rem; + color: var(--color-gris); + max-width: 600px; + margin: 0 auto 40px; + line-height: 1.7; +} + +.cta-form-wrapper { + max-width: 640px; + margin: 0 auto; +} + +.cta-form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 6px; + text-align: left; +} + +.form-group label { + font-size: 0.9rem; + font-weight: 600; + color: var(--color-principal); +} + +.form-group input, +.form-group select { + padding: 14px 16px; + border: 2px solid var(--color-gris-claro); + border-radius: var(--radius); + font-family: inherit; + font-size: 1rem; + color: var(--color-principal); + background: var(--color-blanco); + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input:focus, +.form-group select:focus { + outline: none; + border-color: var(--color-secundario); + box-shadow: 0 0 0 3px rgba(34,197,94,0.15); +} + +.form-group input::placeholder { + color: var(--color-gris); +} + +.form-full { + grid-column: 1 / -1; +} + +.cta-guarantee { + display: flex; + justify-content: center; + gap: 24px; + margin-top: 24px; + flex-wrap: wrap; +} + +.guarantee-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.85rem; + color: var(--color-gris); +} + +.guarantee-item svg { + color: var(--color-secundario); + flex-shrink: 0; +} + +/* Footer */ +.footer { + background: var(--color-principal-dark); + padding: 64px 0 32px; + border-top: 1px solid rgba(253,248,245,0.06); +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 48px; + margin-bottom: 48px; +} + +.footer-brand p { + color: rgba(253,248,245,0.6); + font-size: 0.95rem; + line-height: 1.7; + margin-top: 16px; + max-width: 300px; +} + +.footer-links { + display: flex; + flex-direction: column; + gap: 12px; +} + +.footer-links h4 { + color: var(--color-acento); + font-size: 0.9rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 4px; +} + +.footer-links a, +.footer-links span { + color: rgba(253,248,245,0.6); + font-size: 0.9rem; + transition: color 0.3s ease; +} + +.footer-links a:hover { + color: var(--color-secundario); +} + +.footer-bottom { + text-align: center; + padding-top: 32px; + border-top: 1px solid rgba(253,248,245,0.06); +} + +.footer-bottom p { + color: rgba(253,248,245,0.4); + font-size: 0.85rem; +} + +/* Success Modal */ +.success-modal { + position: fixed; + inset: 0; + background: rgba(46,64,87,0.8); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + padding: 24px; +} + +.success-modal.active { + opacity: 1; + visibility: visible; +} + +.modal-content { + background: var(--color-blanco); + color: var(--color-principal); + padding: 48px; + border-radius: 20px; + max-width: 480px; + width: 100%; + text-align: center; + transform: translateY(20px); + transition: transform 0.3s ease; +} + +.success-modal.active .modal-content { + transform: translateY(0); +} + +.modal-icon { + width: 64px; + height: 64px; + background: rgba(34,197,94,0.1); + color: var(--color-secundario); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + margin: 0 auto 20px; +} + +.modal-content h3 { + font-size: 1.5rem; + font-weight: 800; + margin-bottom: 12px; +} + +.modal-content p { + color: var(--color-gris); + font-size: 1rem; + line-height: 1.6; + margin-bottom: 24px; +} + +/* Responsive */ +@media (max-width: 1024px) { + .hero-container { + grid-template-columns: 1fr; + gap: 48px; + } + .hero-content { + max-width: 100%; + text-align: center; + } + .hero-title { + font-size: 2.6rem; + } + .hero-actions { + justify-content: center; + } + .hero-stats { + justify-content: center; + } + .hero-visual { + order: -1; + max-width: 600px; + margin: 0 auto; + } + .steps-grid { + grid-template-columns: 1fr; + max-width: 600px; + margin: 0 auto; + } + .pain-grid { + grid-template-columns: repeat(2, 1fr); + } + .benefits-layout { + grid-template-columns: 1fr; + } + .benefits-visual { + order: -1; + max-width: 600px; + margin: 0 auto; + } + .testimonials-grid { + grid-template-columns: 1fr; + max-width: 600px; + margin: 0 auto; + } + .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 768px) { + .nav-links, + .nav-cta { + display: none; + } + .mobile-menu-btn { + display: flex; + } + .hero { + padding: 120px 0 60px; + } + .hero-title { + font-size: 2rem; + } + .hero-stats { + flex-direction: column; + gap: 16px; + } + .stat-divider { + display: none; + } + .video-float-card { + display: none; + } + .section { + padding: 60px 0; + } + .section-title { + font-size: 2rem; + } + .pain-grid { + grid-template-columns: 1fr; + } + .cta-box { + padding: 32px 24px; + } + .cta-title { + font-size: 1.8rem; + } + .form-row { + grid-template-columns: 1fr; + } + .cta-guarantee { + flex-direction: column; + gap: 12px; + } + .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } + .trust-logos { + gap: 24px; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 1.7rem; + } + .hero-description { + font-size: 1rem; + } + .btn-lg { + padding: 14px 24px; + font-size: 0.95rem; + width: 100%; + } + .hero-actions { + flex-direction: column; + } + .step-number { + font-size: 2.2rem; + } + .section-title { + font-size: 1.7rem; + } + .modal-content { + padding: 32px 24px; + } +}