@extends('layouts.public')

@section('title', 'Credify GO! — Digitaliza tu negocio de microcréditos hoy')

@section('meta')
    <meta name="description" content="Software para negocios de microcrédito y cobranza en Colombia: registra cobros desde el celular con o sin internet, controla tu cartera y entrega comprobantes digitales.">
    <link rel="canonical" href="https://credifygo.com/">
    <meta name="robots" content="index, follow, max-image-preview:large">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Credify GO!">
    <meta property="og:title" content="Credify GO! — Digitaliza tu negocio de microcréditos hoy">
    <meta property="og:description" content="Registra los cobros desde el celular, con o sin internet. Controla tu caja, tu cartera y entrega comprobantes digitales. Software para negocios de microcrédito y cobranza en Colombia.">
    <meta property="og:url" content="https://credifygo.com/">
    <meta property="og:image" content="https://credifygo.com/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:locale" content="es_CO">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Credify GO! — Digitaliza tu negocio de microcréditos hoy">
    <meta name="twitter:description" content="Registra los cobros desde el celular, con o sin internet. Controla tu caja, tu cartera y entrega comprobantes digitales. Software para negocios de microcrédito y cobranza en Colombia.">
    <meta name="twitter:image" content="https://credifygo.com/og-image.png">
@endsection

@push('jsonld')
    @verbatim
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Credify GO!",
        "url": "https://credifygo.com/",
        "logo": "https://credifygo.com/images/credify_logo_color.png"
    }
    </script>

    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Credify GO!",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "Web, Android, iOS",
        "description": "Registra los cobros desde el celular, con o sin internet. Controla tu caja, tu cartera y entrega comprobantes digitales. Software para negocios de microcrédito y cobranza en Colombia.",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "COP",
            "description": "Prueba la demo gratis, sin registro"
        }
    }
    </script>

    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "📱 ¿Qué pasa si el cobrador pierde su celular?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Tus datos viven en la nube. La app guarda en el celular solo lo necesario para trabajar sin internet y lo sincroniza al reconectar. Si el cobrador pierde el celular, bloqueas su acceso desde el panel con un clic; la información del negocio sigue intacta en la nube."
                }
            },
            {
                "@type": "Question",
                "name": "📶 ¿Funciona realmente sin datos móviles?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Sí, totalmente. La app guarda toda la información en el celular al iniciar el día. El cobrador puede registrar todos los pagos de su ruta sin necesitar ni un bit de datos. Cuando llega a casa o a un lugar con WiFi, todo sube al sistema automáticamente. Cero pérdidas por falta de señal."
                }
            },
            {
                "@type": "Question",
                "name": "🤝 ¿Puedo manejar varios socios o inversionistas?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Sí, y sin peleas. Registras a cada socio con su porcentaje de participación. El sistema calcula automáticamente cuánto le corresponde a cada uno según las ganancias del período. Puedes registrar retiros, aportes de capital y distribuciones. Todo queda documentado."
                }
            },
            {
                "@type": "Question",
                "name": "⏱ ¿Cuánto tiempo toma configurar el sistema?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "En menos de una hora ya estás operando. Nuestro equipo de soporte te ayuda a ingresar tus clientes y créditos actuales. No necesitas saber de sistemas ni de tecnología. Si sabes usar WhatsApp, sabes usar Credify GO!"
                }
            },
            {
                "@type": "Question",
                "name": "💰 ¿Cómo controlo la mora y la cartera vencida?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "El sistema marca automáticamente las cuotas vencidas y te muestra los días de mora de cada crédito y los indicadores de cartera (PAR) actualizados, para que priorices la cobranza. Así ves de un vistazo quién está al día y quién no, sin llevar las cuentas a mano."
                }
            }
        ]
    }
    </script>
    @endverbatim
@endpush

@section('content')
<!-- ===== HERO ===== -->
<section class="hero-dark relative min-h-screen flex items-center pt-32 pb-24 overflow-hidden">
    <!-- Aurora glows — solo desktop: en móvil son capas blur-[120px] carísimas (frames
         negros al scrollear). El .hero-dark ya trae los glows radiales baked-in y baratos. -->
    <div class="hidden md:block absolute -top-24 left-[8%] w-[640px] h-[640px] rounded-full bg-emerald-500/25 blur-[120px] animate-aurora pointer-events-none"></div>
    <div class="hidden md:block absolute top-1/3 right-[2%] w-[520px] h-[520px] rounded-full bg-emerald-400/20 blur-[120px] animate-aurora pointer-events-none" style="animation-delay:5s"></div>
    <div class="hidden md:block absolute -bottom-24 left-1/3 w-[560px] h-[560px] rounded-full bg-emerald-400/20 blur-[120px] animate-aurora pointer-events-none" style="animation-delay:9s"></div>
    <!-- Grid texture -->
    <div class="hero-grid absolute inset-0 pointer-events-none"></div>

    <div class="relative max-w-6xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center w-full">

        <!-- TEXT -->
        <div>
            <!-- Pill -->
            <div class="animate-slide-up inline-flex items-center gap-2 bg-emerald-500/10 text-emerald-300 border border-emerald-400/25 text-xs font-semibold px-3.5 py-1.5 rounded-full mb-6 uppercase tracking-wide backdrop-blur-sm">
                <span class="w-2 h-2 bg-emerald-400 rounded-full animate-dot"></span>
                Digitaliza tu ruta hoy &mdash; sin contratos
            </div>

            <h1 class="animate-slide-up d100 text-5xl sm:text-6xl lg:text-[64px] font-extrabold leading-[1.05] tracking-tight mb-6 text-white">
                El software que pone<br>
                <span class="gradient-text-hero">en cintura</span> tu negocio<br>
                de microcréditos.
            </h1>

            <p class="animate-slide-up d200 text-xl text-slate-300/90 leading-relaxed mb-8 max-w-lg">
                Registra los cobros desde el celular, controla tu caja y tu cartera, y entrega
                comprobantes digitales. Todo <strong class="text-white font-semibold">con o sin internet.</strong>
            </p>

            <!-- CTAs -->
            <div class="dropdown-host animate-slide-up d300 flex flex-wrap gap-3 mb-4">
                <a href="{{ route('demo.request') }}"
                   class="inline-flex items-center gap-2.5 px-7 py-4 bg-linear-to-r from-emerald-500 to-emerald-500 text-white font-bold text-base rounded-2xl shadow-xl shadow-emerald-500/40 hover:shadow-emerald-400/60 hover:brightness-110 transition-all">
                    Probar demo
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </a>
                <button type="button" data-open-chat="lead"
                   class="inline-flex items-center gap-2.5 px-7 py-4 bg-white/10 text-white font-semibold text-base rounded-2xl border border-white/20 backdrop-blur-sm hover:bg-white/15 hover:border-white/30 transition-all cursor-pointer">
                    <svg class="w-5 h-5 text-emerald-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10.5h8M8 14h5M21 12a8.38 8.38 0 01-8.5 8.5c-1.5 0-2.9-.4-4.1-1L3 21l1.6-5A8.38 8.38 0 0121 12z"/></svg>
                    Hablar con ventas
                </button>
            </div>
            <p class="animate-slide-up d300 text-sm text-slate-400 mb-7">Sin registro ni tarjeta &bull; Prueba la demo con datos de ejemplo</p>

            <!-- Social proof micro -->
            <div class="animate-slide-up d400 flex flex-wrap items-center gap-4 text-sm text-slate-400">
                <span class="flex items-center gap-1.5">
                    <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Funciona sin internet
                </span>
                <span class="hidden sm:block text-slate-600">|</span>
                <span>Sin contratos anuales</span>
                <span class="hidden sm:block text-slate-600">|</span>
                <span>Soporte en español</span>
            </div>
        </div>

        <!-- MOCKUP CARDS -->
        <div class="relative h-[480px] hidden lg:block">

            <!-- Card principal: cobro + comprobante -->
            <div class="animate-float-a absolute top-0 left-2 w-72 hero-card rounded-2xl p-4">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center">
                        <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate-800">Cobro registrado</p>
                        <p class="text-xs text-emerald-600">Hoy, 10:42 AM &middot; Carlos Ruiz</p>
                    </div>
                </div>
                <div class="bg-slate-50 border border-slate-100 rounded-xl p-3 mb-3 flex items-center gap-2.5">
                    <div class="w-9 h-9 bg-emerald-500 rounded-full flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-slate-700">Comprobante digital listo</p>
                        <p class="text-[10px] text-slate-400">Para compartir o imprimir</p>
                    </div>
                </div>
                <div class="flex items-center justify-between bg-emerald-50 border border-emerald-100 rounded-xl px-3 py-2.5">
                    <div>
                        <p class="text-xs text-emerald-600">Recaudo del día</p>
                        <p class="text-lg font-extrabold text-emerald-800">$1,240,000</p>
                    </div>
                    <div class="w-9 h-9 bg-emerald-500 rounded-xl flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Card: alerta mora -->
            <div class="animate-float-b absolute bottom-12 right-2 hero-card rounded-2xl p-3.5 w-60">
                <div class="flex items-center gap-2 mb-2">
                    <div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>
                    </div>
                    <p class="text-xs font-bold text-slate-800">Alerta de mora</p>
                </div>
                <p class="text-xs text-slate-500 mb-2">Ana Torres lleva <strong class="text-red-600">5 días</strong> sin pagar su cuota de $85,000.</p>
                <button class="w-full text-xs font-semibold bg-red-500 text-white rounded-lg py-1.5 hover:bg-red-600 transition-colors">
                    Ver crédito
                </button>
            </div>

        </div>
    </div>
</section>

<!-- ===== PRUEBA SOCIAL STRIP ===== -->
<section class="bg-[#04130e] border-y border-white/10 py-9">
    <div class="max-w-5xl mx-auto px-4">
        <p class="text-center text-xs text-slate-400 uppercase tracking-widest font-semibold mb-6">Pensado para negocios como el tuyo</p>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
            <div>
                <p class="text-2xl font-extrabold gradient-text">Sin internet</p>
                <p class="text-sm text-slate-400 mt-1">La app opera offline y sincroniza sola</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold gradient-text">Sin contratos</p>
                <p class="text-sm text-slate-400 mt-1">Cancela cuando quieras, sin permanencia</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold gradient-text">Demo gratis</p>
                <p class="text-sm text-slate-400 mt-1">Pruébala sin registro ni tarjeta</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold gradient-text">3 roles</p>
                <p class="text-sm text-slate-400 mt-1">Dueño, supervisor y cobrador</p>
            </div>
        </div>
    </div>
</section>

<!-- ===== BENEFICIOS ===== -->
<section id="beneficios" class="py-24 md:py-28 bg-[#04130e]">
    <div class="max-w-6xl mx-auto px-4">
        <div class="text-center mb-16">
            <span class="inline-block text-emerald-600 text-sm font-bold uppercase tracking-widest mb-3">Adiós al desorden</span>
            <h2 class="text-4xl md:text-5xl font-extrabold text-white tracking-tight mb-4">
                Tu negocio, bajo control.<br><span class="gradient-text">Por fin.</span>
            </h2>
            <p class="text-lg text-slate-400 max-w-xl mx-auto">Sin cuadernos, sin hojas de Excel que nadie entiende, sin pelear con los cobradores por el dinero del día.</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">

            <!-- Beneficio 1 -->
            <div class="bento bg-white/[0.04] border border-white/10 p-6 flex flex-col gap-4">
                <div class="w-14 h-14 bg-linear-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-300/40">
                    <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white mb-2">Cada cobro, con nombre y hora</h3>
                    <p class="text-sm text-slate-400 leading-relaxed">
                        Cada pago queda registrado con quién lo tomó, la fecha y la hora exactas &mdash;y la ubicación del dispositivo cuando el cobrador la autoriza&mdash;. Todo trazable en el sistema.
                    </p>
                </div>
                <div class="mt-auto text-xs text-blue-600 font-semibold flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                    Trazabilidad de cada peso
                </div>
            </div>

            <!-- Beneficio 2 -->
            <div class="bento bg-white/[0.04] border border-white/10 p-6 flex flex-col gap-4">
                <div class="w-14 h-14 bg-linear-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-green-300/40">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white mb-2">Comprobante digital</h3>
                    <p class="text-sm text-slate-400 leading-relaxed">
                        Al registrar el pago, el cobrador genera un comprobante y lo comparte con el cliente por la app que prefiera, o lo imprime. Sin papel, sin excusas de &ldquo;no me dejaron recibo&rdquo;.
                    </p>
                </div>
                <div class="mt-auto text-xs text-green-600 font-semibold flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                    Más confianza, menos peleas
                </div>
            </div>

            <!-- Beneficio 3 -->
            <div class="bento bg-white/[0.04] border border-white/10 p-6 flex flex-col gap-4">
                <div class="w-14 h-14 bg-linear-to-br from-violet-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg shadow-violet-300/40">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white mb-2">Contabilidad automática</h3>
                    <p class="text-sm text-slate-400 leading-relaxed">
                        Gastos, caja chica, abonos de socios e inversionistas. Todo se suma solo. Al final del día sabes exactamente cuánto ganó el negocio.
                    </p>
                </div>
                <div class="mt-auto text-xs text-violet-600 font-semibold flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                    Olvídate de los cuadres manuales
                </div>
            </div>

            <!-- Beneficio 4 -->
            <div class="bento bg-slate-900 p-6 flex flex-col gap-4 relative overflow-hidden">
                <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-emerald-500/20 blur-2xl pointer-events-none"></div>
                <div class="w-14 h-14 bg-linear-to-br from-emerald-400 to-emerald-500 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-400/30 relative">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
                    </svg>
                </div>
                <div class="relative">
                    <h3 class="text-lg font-bold text-white mb-2">A prueba de campo</h3>
                    <p class="text-sm text-slate-400 leading-relaxed">
                        Veredas, zonas sin señal, sótanos. Tus cobradores trabajan igual. Los pagos se guardan en el celular y llegan al sistema cuando hay wifi.
                    </p>
                </div>
                <div class="mt-auto relative text-xs text-emerald-400 font-semibold flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                    Funciona sin datos móviles
                </div>
            </div>

        </div>
    </div>
</section>

<!-- ===== PARA QUIÉN ===== -->
<section id="para-quien" class="py-24 md:py-28 bg-[#04130e]">
    <div class="max-w-6xl mx-auto px-4">
        <div class="text-center mb-14">
            <span class="inline-block text-emerald-600 text-sm font-bold uppercase tracking-widest mb-3">Hecho a medida</span>
            <h2 class="text-4xl md:text-5xl font-extrabold text-white tracking-tight mb-4">
                Cada quien tiene<br><span class="gradient-text">su herramienta.</span>
            </h2>
            <p class="text-lg text-slate-400 max-w-xl mx-auto">Tres roles, una sola app. El dueño manda, el supervisor cuida la cartera, el cobrador cobra.</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6">

            <!-- Dueño -->
            <div class="relative bg-linear-to-br from-slate-900 to-slate-800 rounded-3xl p-7 overflow-hidden">
                <div class="absolute -bottom-8 -right-8 w-40 h-40 bg-emerald-500/15 rounded-full blur-2xl pointer-events-none"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-linear-to-br from-emerald-400 to-emerald-500 rounded-xl flex items-center justify-center mb-5 shadow-lg shadow-emerald-400/30">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 01.672 0 41.059 41.059 0 018.198 5.424.75.75 0 01-.254 1.285 31.372 31.372 0 00-7.86 3.83.75.75 0 01-.84 0 31.508 31.508 0 00-2.08-1.287V9.91a.75.75 0 01.35-.636A31.543 31.543 0 0110 8.538V5.72a.75.75 0 01.75-.75z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <p class="text-xs text-emerald-400 font-bold uppercase tracking-widest mb-2">Para el Dueño</p>
                    <h3 class="text-2xl font-extrabold text-white mb-3">Control total del negocio</h3>
                    <ul class="space-y-2.5">
                        <li class="flex items-start gap-2.5 text-sm text-slate-400">
                            <svg class="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Ve cuánto lleva recaudado cada cobrador, al instante
                        </li>
                        <li class="flex items-start gap-2.5 text-sm text-slate-400">
                            <svg class="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Aprueba o rechaza gastos desde el celular
                        </li>
                        <li class="flex items-start gap-2.5 text-sm text-slate-400">
                            <svg class="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Calcula la ganancia de cada socio sin peleas
                        </li>
                        <li class="flex items-start gap-2.5 text-sm text-slate-400">
                            <svg class="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Bloquea accesos si alguien te falla
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Supervisor -->
            <div class="bg-linear-to-br from-violet-500/10 to-indigo-500/10 border border-violet-400/20 rounded-3xl p-7">
                <div class="w-12 h-12 bg-linear-to-br from-violet-500 to-indigo-600 rounded-xl flex items-center justify-center mb-5 shadow-lg shadow-violet-300/40">
                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                    </svg>
                </div>
                <p class="text-xs text-violet-600 font-bold uppercase tracking-widest mb-2">Para el Supervisor</p>
                <h3 class="text-2xl font-extrabold text-white mb-3">Cartera vencida bajo la lupa</h3>
                <ul class="space-y-2.5">
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-violet-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Lista de morosos ordenada por días de atraso
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-violet-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Seguimiento de visitas de cobranza con foto y nota
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-violet-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Indicadores de mora (PAR) actualizados al instante
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-violet-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Rendimiento del equipo por cobrador
                    </li>
                </ul>
            </div>

            <!-- Cobrador -->
            <div class="bg-linear-to-br from-emerald-500/10 to-emerald-600/10 border border-emerald-400/20 rounded-3xl p-7">
                <div class="w-12 h-12 bg-linear-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-5 shadow-lg shadow-emerald-300/40">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h1.5"/>
                    </svg>
                </div>
                <p class="text-xs text-emerald-600 font-bold uppercase tracking-widest mb-2">Para el Cobrador</p>
                <h3 class="text-2xl font-extrabold text-white mb-3">App fácil. Sin excusas.</h3>
                <ul class="space-y-2.5">
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Su ruta del día cargada automáticamente
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Registra cobros en 3 toques
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Funciona sin internet en toda la ruta
                    </li>
                    <li class="flex items-start gap-2.5 text-sm text-slate-300">
                        <svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                        Genera recibo al cliente sin impresora
                    </li>
                </ul>
            </div>

        </div>
    </div>
</section>

<!-- ===== PRECIOS ===== -->
<section id="precios" class="py-24 md:py-28 bg-[#04130e]">
    <div class="max-w-6xl mx-auto px-4">
        <div class="text-center mb-14">
            <span class="inline-block text-emerald-600 text-sm font-bold uppercase tracking-widest mb-3">Precios</span>
            <h2 class="text-4xl md:text-5xl font-extrabold text-white tracking-tight mb-4">
                Planes que <span class="gradient-text">crecen contigo.</span>
            </h2>
            <p class="text-lg text-slate-400 max-w-xl mx-auto">Prueba la app gratis en la <strong class="text-slate-300">demo</strong> &mdash;sin registro ni tarjeta, con datos de ejemplo&mdash;. Cuando estés listo, solicitas tu cuenta y eliges el plan que se ajuste a tu operación. Sin contratos de permanencia.</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6 items-stretch max-w-md md:max-w-none mx-auto">
            @foreach($plans ?? [] as $p)
                @php $featured = $p->slug === ($plan?->slug ?? 'professional'); @endphp
                <div class="relative bg-white/[0.04] rounded-3xl p-8 flex flex-col {{ $featured ? 'border-2 border-emerald-500 shadow-xl shadow-emerald-500/20 md:-mt-3 md:mb-3' : 'border border-white/10' }}">
                    @if($p->badge_text)
                        <span class="absolute -top-3.5 left-8 bg-linear-to-r from-emerald-500 to-emerald-600 text-white text-xs font-bold uppercase tracking-wide px-4 py-1.5 rounded-full shadow-md shadow-emerald-300/40">{{ $p->badge_text }}</span>
                    @endif
                    <h3 class="text-2xl font-extrabold text-white mb-1">{{ $p->name }}</h3>
                    <p class="text-slate-400 text-sm mb-5 min-h-[2.5rem]">{{ $p->description }}</p>
                    <div class="flex items-baseline gap-1.5 mb-1">
                        <span class="text-4xl font-extrabold text-white">{{ $p->formatted_price }}</span>
                        <span class="text-slate-400 font-medium">/mes</span>
                    </div>
                    @if($p->annual_savings_percent)
                        <p class="text-sm text-emerald-600 font-semibold mb-6">o paga anual y ahorra ~{{ $p->annual_savings_percent }}%</p>
                    @else
                        <p class="text-sm text-slate-400 mb-6">facturación mensual, cancela cuando quieras</p>
                    @endif

                    <button type="button" data-open-chat="lead"
                       class="inline-flex items-center justify-center gap-2 w-full px-6 py-3.5 font-bold text-base rounded-2xl transition-all mb-6 cursor-pointer {{ $featured ? 'bg-linear-to-r from-emerald-500 to-emerald-600 text-white shadow-lg shadow-emerald-300/40 hover:brightness-105' : 'bg-white/5 text-emerald-400 border-2 border-emerald-500/30 hover:border-emerald-400/60 hover:bg-emerald-500/10' }}">
                        Solicitar cuenta
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                    </button>

                    <ul class="space-y-3 mt-auto">
                        @php
                            // Solo los límites REALES que el sistema hace cumplir (#168): la
                            // capacidad por plan (usuarios/cobradores/créditos/clientes/volumen,
                            // gateados de verdad). Se quitaron las "funciones" por flag (reportes
                            // avanzados/multi-sucursal/API/soporte) porque hoy no se gatean en
                            // código → anunciarlas sería vender humo. La marca (color+logo) está
                            // disponible para todas las empresas, así que va como incluida abajo.
                            $limits = [
                                'Usuarios: '.$p->getLimitDisplay('max_users'),
                                'Cobradores (app offline): '.$p->getLimitDisplay('max_collectors'),
                                'Créditos activos: '.$p->getLimitDisplay('max_active_credits'),
                                'Clientes: '.$p->getLimitDisplay('max_clients'),
                                'Desembolso mensual: '.$p->getLimitDisplay('max_monthly_volume'),
                            ];
                        @endphp
                        @foreach($limits as $item)
                            <li class="flex items-start gap-3 text-slate-200">
                                <svg class="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                                <span class="text-sm leading-relaxed">{{ $item }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        <div class="text-center mt-10 text-sm text-slate-400 max-w-2xl mx-auto">
            Prueba todo gratis en la <strong class="text-slate-300">demo compartida</strong> (sin registro) antes de decidir; luego solicitas tu cuenta y eliges el plan que se ajuste a tu operación &mdash;sin contratos de permanencia&mdash;. Incluido en todos los planes: app offline del cobrador, comprobante digital, control de caja y cartera, y tu marca (color y logo).
            ¿Necesitas algo a medida? <button type="button" data-open-chat="lead" class="text-emerald-600 hover:text-emerald-700 font-semibold underline underline-offset-2 cursor-pointer">Hablemos</button>.
        </div>
    </div>
</section>

<!-- ===== PROMESA / VALOR ===== -->
<section class="py-16 bg-linear-to-br from-emerald-600 to-emerald-700 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10" style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;)"></div>
    <div class="relative max-w-3xl mx-auto px-4 text-center">
        <p class="text-emerald-200 text-sm font-bold uppercase tracking-widest mb-4">Por qué Credify GO!</p>
        <p class="text-2xl md:text-3xl font-bold text-white leading-relaxed mb-4">
            Los cobros se manejan en la calle, no en un cuaderno.
        </p>
        <p class="text-emerald-100 text-lg leading-relaxed">
            Credify GO! lleva el cobro al celular &mdash;con o sin internet&mdash;, deja cada pago registrado con su comprobante, y te muestra tu caja y tu cartera al instante. Menos papel, menos cuadres a mano, m&aacute;s control.
        </p>
    </div>
</section>

<!-- ===== FAQ ===== -->
<section id="faq" class="py-24 md:py-28 bg-[#04130e]">
    <div class="max-w-3xl mx-auto px-4">
        <div class="text-center mb-14">
            <span class="inline-block text-emerald-600 text-sm font-bold uppercase tracking-widest mb-3">Resolvemos tus dudas</span>
            <h2 class="text-4xl md:text-5xl font-extrabold text-white tracking-tight">
                Preguntas <span class="gradient-text">frecuentes</span>
            </h2>
        </div>

        <div class="space-y-3" id="faq-list">

            <div class="faq-item bg-white/[0.04] border border-white/10 rounded-2xl overflow-hidden">
                <button class="faq-trigger w-full flex items-center justify-between px-6 py-5 text-left gap-4" onclick="toggleFaq(this)">
                    <span class="font-semibold text-white text-base">&#x1F4F1; &iquest;Qu&eacute; pasa si el cobrador pierde su celular?</span>
                    <svg class="faq-arrow w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-content px-6 pb-5">
                    <p class="text-slate-400 leading-relaxed">
                        <strong class="text-slate-200">Tus datos viven en la nube.</strong> La app guarda en el celular solo lo necesario para trabajar sin internet y lo sincroniza al reconectar. Si el cobrador pierde el celular, bloqueas su acceso desde el panel con un clic; la informaci&oacute;n del negocio sigue intacta en la nube.
                    </p>
                </div>
            </div>

            <div class="faq-item bg-white/[0.04] border border-white/10 rounded-2xl overflow-hidden">
                <button class="faq-trigger w-full flex items-center justify-between px-6 py-5 text-left gap-4" onclick="toggleFaq(this)">
                    <span class="font-semibold text-white text-base">&#x1F4F6; &iquest;Funciona realmente sin datos m&oacute;viles?</span>
                    <svg class="faq-arrow w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-content px-6 pb-5">
                    <p class="text-slate-400 leading-relaxed">
                        <strong class="text-slate-200">S&iacute;, totalmente.</strong> La app guarda toda la informaci&oacute;n en el celular al iniciar el d&iacute;a. El cobrador puede registrar todos los pagos de su ruta sin necesitar ni un bit de datos. Cuando llega a casa o a un lugar con WiFi, todo sube al sistema autom&aacute;ticamente. Cero p&eacute;rdidas por falta de se&ntilde;al.
                    </p>
                </div>
            </div>

            <div class="faq-item bg-white/[0.04] border border-white/10 rounded-2xl overflow-hidden">
                <button class="faq-trigger w-full flex items-center justify-between px-6 py-5 text-left gap-4" onclick="toggleFaq(this)">
                    <span class="font-semibold text-white text-base">&#x1F91D; &iquest;Puedo manejar varios socios o inversionistas?</span>
                    <svg class="faq-arrow w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-content px-6 pb-5">
                    <p class="text-slate-400 leading-relaxed">
                        <strong class="text-slate-200">S&iacute;, y sin peleas.</strong> Registras a cada socio con su porcentaje de participaci&oacute;n. El sistema calcula autom&aacute;ticamente cu&aacute;nto le corresponde a cada uno seg&uacute;n las ganancias del per&iacute;odo. Puedes registrar retiros, aportes de capital y distribuciones. Todo queda documentado.
                    </p>
                </div>
            </div>

            <div class="faq-item bg-white/[0.04] border border-white/10 rounded-2xl overflow-hidden">
                <button class="faq-trigger w-full flex items-center justify-between px-6 py-5 text-left gap-4" onclick="toggleFaq(this)">
                    <span class="font-semibold text-white text-base">&#x23F1; &iquest;Cu&aacute;nto tiempo toma configurar el sistema?</span>
                    <svg class="faq-arrow w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-content px-6 pb-5">
                    <p class="text-slate-400 leading-relaxed">
                        <strong class="text-slate-200">En menos de una hora ya est&aacute;s operando.</strong> Nuestro equipo de soporte te ayuda a ingresar tus clientes y cr&eacute;ditos actuales. No necesitas saber de sistemas ni de tecnolog&iacute;a. Si sabes usar WhatsApp, sabes usar Credify GO!
                    </p>
                </div>
            </div>

            <div class="faq-item bg-white/[0.04] border border-white/10 rounded-2xl overflow-hidden">
                <button class="faq-trigger w-full flex items-center justify-between px-6 py-5 text-left gap-4" onclick="toggleFaq(this)">
                    <span class="font-semibold text-white text-base">&#x1F4B0; &iquest;C&oacute;mo controlo la mora y la cartera vencida?</span>
                    <svg class="faq-arrow w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-content px-6 pb-5">
                    <p class="text-slate-400 leading-relaxed">
                        El sistema marca autom&aacute;ticamente las cuotas vencidas y te muestra los <strong class="text-slate-200">d&iacute;as de mora de cada cr&eacute;dito</strong> y los indicadores de cartera (PAR) actualizados, para que priorices la cobranza. As&iacute; ves de un vistazo qui&eacute;n est&aacute; al d&iacute;a y qui&eacute;n no, sin llevar las cuentas a mano.
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- ===== BANDA CTA FINAL ===== -->
<section class="relative bg-slate-900 py-24 overflow-hidden">
    <div class="absolute top-0 left-1/4 w-96 h-96 rounded-full bg-emerald-500/15 blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 right-1/4 w-80 h-80 rounded-full bg-emerald-500/10 blur-3xl pointer-events-none"></div>
    <div class="relative max-w-4xl mx-auto px-4 text-center">

        <p class="text-emerald-400 text-sm font-bold uppercase tracking-widest mb-4">Es hora de actuar</p>
        <h2 class="text-4xl md:text-6xl font-extrabold text-white leading-tight tracking-tight mb-5">
            Deja de perder dinero<br>
            en cuadres de caja<br>
            <span style="background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">mal hechos.</span>
        </h2>
        <p class="text-slate-400 text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
            Pru&eacute;balo ahora mismo con nuestra demo. &iquest;Prefieres que te acompa&ntilde;emos? Un asesor te configura todo y te deja operando el mismo d&iacute;a.
        </p>
        <div class="dropdown-host flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ route('demo.request') }}"
               class="inline-flex items-center justify-center gap-3 px-8 py-5 bg-linear-to-r from-emerald-500 to-emerald-500 text-white font-extrabold text-lg rounded-2xl shadow-2xl shadow-emerald-500/30 hover:shadow-emerald-500/50 hover:brightness-110 transition-all">
                Probar demo
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </a>
            <button type="button" data-open-chat="lead"
               class="inline-flex items-center justify-center gap-3 px-8 py-5 bg-white/10 text-white font-semibold text-lg rounded-2xl border border-white/20 hover:bg-white/15 transition-all cursor-pointer">
                <svg class="w-6 h-6 text-emerald-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10.5h8M8 14h5M21 12a8.38 8.38 0 01-8.5 8.5c-1.5 0-2.9-.4-4.1-1L3 21l1.6-5A8.38 8.38 0 0121 12z"/></svg>
                Hablar con ventas
            </button>
        </div>
        <p class="mt-7 text-slate-600 text-sm">
            &iquest;Ya eres cliente? &mdash;
            <a href="/pwa/login" class="text-emerald-400 hover:text-emerald-300 underline underline-offset-2 transition-colors">Ir a la app del cobrador</a>
        </p>
    </div>
</section>

<!-- ===== FOOTER ===== -->

@include('partials.sales-bot')
@endsection

@push('scripts')
<script>
function toggleFaq(btn) {
    var item = btn.closest('.faq-item');
    var isOpen = item.classList.contains('open');
    // Close all
    document.querySelectorAll('.faq-item.open').forEach(function(el) {
        el.classList.remove('open');
    });
    // Open clicked if it was closed
    if (!isOpen) {
        item.classList.add('open');
    }
}
</script>
@endpush
