@extends('layout.front.master')

{{-- ═══════════════════════════════════════════════════════════════════════
     HOME — bewpro.com (PLATAFORMA)
     Diseñada desde cero para la plataforma. NO replica el template del demo.
     Valores de marca: eficiencia · dirección · simpleza · economía.
     5 secciones core (no 11), pensadas para que el visitor entienda el valor
     en <30s de scroll.
     ═══════════════════════════════════════════════════════════════════════ --}}

@section('title', $seoData['title'] ?? config('site.name') . ' — Plataforma de sitios web profesionales')
@section('description', $seoData['description'] ?? 'Elegí, personalizá, publicá. Hosting incluido. Sitios profesionales en minutos.')
@section('og_title', config('site.name'))
@section('og_description', 'Elegí tu modelo, personalizá tu marca y publicá. Sin código.')

@section('content')
@php
    use App\Models\TenantProject;
    use App\Modules\Products\Models\Product;
    use App\Modules\Products\Models\ProductCategory;

    // Auth state
    $isClient = auth()->check() && auth()->user()->hasRole('Client');
    $clientProjects = collect();
    $clientOpenTickets = 0;
    if ($isClient) {
        $clientProjects = auth()->user()->tenantProjects()->orderByDesc('created_at')->get();
        try {
            $clientOpenTickets = \App\Modules\Support\Models\SupportTicket::where('user_id', auth()->id())
                ->whereIn('status', ['open','waiting_staff','waiting_client'])->count();
        } catch (\Throwable $e) {}
    }

    // Marketplace data
    try {
        $featuredProducts = Product::with('category', 'images')
            ->where('is_active', true)->orderByDesc('updated_at')->limit(6)->get();
        $industries = ProductCategory::withCount(['products' => fn($q) => $q->where('is_active', true)])
            ->get()->where('products_count', '>', 0)->sortByDesc('products_count')->values();
        $totalActive = Product::where('is_active', true)->count();
    } catch (\Throwable $e) {
        $featuredProducts = collect(); $industries = collect(); $totalActive = 0;
    }

    $industryIcons = [
        'professional' => 'fa-briefcase', 'corporate' => 'fa-building',
        'services' => 'fa-cogs', 'personal' => 'fa-user-tie',
        'events' => 'fa-calendar-star', 'art' => 'fa-palette',
        'health-and-wellness' => 'fa-heart', 'petite-website' => 'fa-feather',
        'e-commerce' => 'fa-shopping-cart', 'crafts' => 'fa-paint-brush',
        'design' => 'fa-pencil-ruler', 'standard-web-app' => 'fa-window-maximize',
        'home-deco' => 'fa-couch',
    ];
@endphp

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 0 — CLIENT HUB (solo si auth + Client)
     ═══════════════════════════════════════════════════════════════════════ --}}
@if($isClient)
@php $firstName = auth()->user()->first_name ?: explode('@', auth()->user()->email)[0]; @endphp
<section class="bp-client-hub">
    <div class="container container-xl-custom py-5">
        <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
            <div class="bp-client-avatar">{{ strtoupper(substr($firstName, 0, 1)) }}</div>
            <div>
                <h1 class="bp-client-greeting mb-1">Hola {{ $firstName }} 👋</h1>
                <p class="bp-client-summary mb-0">
                    @if($clientProjects->count() === 0)
                        Lanzá tu primer proyecto en minutos.
                    @elseif($clientProjects->count() === 1)
                        Gestionás <strong>1 proyecto</strong>.
                    @else
                        Gestionás <strong>{{ $clientProjects->count() }} proyectos</strong>.
                    @endif
                </p>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-4">
                <a href="{{ route('client.projects.index') }}" class="bp-hub-card">
                    <div class="bp-hub-card-icon"><i class="fas fa-folder-open"></i></div>
                    <div class="flex-grow-1">
                        <h3 class="bp-hub-card-title">Mis proyectos</h3>
                        <p class="bp-hub-card-meta">
                            @php
                                $active = $clientProjects->where('pipeline_status','active')->count();
                                $dev = $clientProjects->where('pipeline_status','on_development')->count();
                            @endphp
                            @if($clientProjects->isEmpty())
                                Tu primer sitio te está esperando
                            @else
                                {{ $active }} {{ $active === 1 ? 'activo' : 'activos' }}{{ $dev > 0 ? ', ' . $dev . ' en desarrollo' : '' }}
                            @endif
                        </p>
                    </div>
                    <span class="bp-hub-card-arrow"><i class="fas fa-arrow-right"></i></span>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('front.products.index') }}" class="bp-hub-card">
                    <div class="bp-hub-card-icon"><i class="fas fa-plus"></i></div>
                    <div class="flex-grow-1">
                        <h3 class="bp-hub-card-title">Nuevo proyecto</h3>
                        <p class="bp-hub-card-meta">Sumá un sitio. Online en minutos.</p>
                    </div>
                    <span class="bp-hub-card-arrow"><i class="fas fa-arrow-right"></i></span>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('client.support.index') }}" class="bp-hub-card">
                    <div class="bp-hub-card-icon position-relative">
                        <i class="fas fa-life-ring"></i>
                        @if($clientOpenTickets > 0)
                            <span class="bp-hub-badge">{{ $clientOpenTickets }}</span>
                        @endif
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="bp-hub-card-title">Soporte</h3>
                        <p class="bp-hub-card-meta">
                            @if($clientOpenTickets === 0)
                                Estamos para ayudarte
                            @elseif($clientOpenTickets === 1)
                                1 ticket abierto
                            @else
                                {{ $clientOpenTickets }} tickets abiertos
                            @endif
                        </p>
                    </div>
                    <span class="bp-hub-card-arrow"><i class="fas fa-arrow-right"></i></span>
                </a>
            </div>
        </div>

        @if($clientProjects->isNotEmpty())
        <div class="bp-hub-projects mt-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="bp-hub-section-title mb-0">Tus proyectos</h4>
                <a href="{{ route('client.projects.index') }}" class="bp-link-arrow">Ver todos <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="row g-2">
                @foreach($clientProjects->take(6) as $project)
                @php [$badgeLabel, $badgeClass] = $project->status_badge; @endphp
                <div class="col-md-6 col-lg-4">
                    <a href="{{ route('client.projects.show', $project) }}" class="bp-hub-project">
                        <i class="fas fa-globe"></i>
                        <div class="flex-grow-1 min-w-0">
                            <span class="bp-hub-project-name">{{ $project->project_name }}</span>
                            @if($project->domain)<span class="bp-hub-project-domain">{{ $project->domain }}</span>@endif
                        </div>
                        <span class="badge {{ $badgeClass }} fs-8">{{ $badgeLabel }}</span>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 1 — HERO (solo guests)
     Compacto. Pitch en <15s.
     ═══════════════════════════════════════════════════════════════════════ --}}
@unless($isClient)
<section class="bp-hero">
    <div class="bp-hero-circles">
        <span class="bp-circle bp-circle-1"></span>
        <span class="bp-circle bp-circle-2"></span>
        <span class="bp-circle bp-circle-3"></span>
    </div>
    <div class="container container-xl-custom">
        <div class="row align-items-center py-5">
            <div class="col-lg-7">
                <div class="bp-pretitle">
                    <span class="bp-pretitle-dot"></span>
                    <span>15 días gratis · sin tarjeta</span>
                </div>
                <h1 class="bp-hero-title">
                    Tu sitio web profesional<br>
                    <span class="bp-hero-accent">listo hoy</span>, no en meses.
                </h1>
                <p class="bp-hero-lead">
                    Elegí un modelo, activá tu prueba y publicá en 30 minutos. Sin tarjeta, sin código, sin sorpresas en la factura.
                </p>
                <div class="bp-hero-ctas">
                    <a href="{{ route('front.products.index') }}" class="bp-btn bp-btn-primary">
                        Activar mi sitio gratis <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="#como-funciona" class="bp-btn bp-btn-ghost">Ver cómo funciona</a>
                </div>
                <div class="bp-hero-stats">
                    <div class="bp-hero-stat">
                        <i class="fas fa-gift"></i>
                        <span><strong>15 días gratis</strong> sin tarjeta</span>
                    </div>
                    <div class="bp-hero-stat">
                        <i class="fas fa-th-large"></i>
                        <span><strong>{{ $totalActive }}</strong> modelos por industria</span>
                    </div>
                    <div class="bp-hero-stat">
                        <i class="fas fa-bolt"></i>
                        <span>Online en 30 minutos</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <div class="bp-hero-mockup">
                    <div class="bp-mock-window">
                        <div class="bp-mock-header">
                            <span class="bp-mock-dot bp-mock-dot-red"></span>
                            <span class="bp-mock-dot bp-mock-dot-yellow"></span>
                            <span class="bp-mock-dot bp-mock-dot-green"></span>
                            <span class="bp-mock-url">mi-negocio.bewpro.com/admin</span>
                            <span class="ms-auto badge bg-success-soft text-success text-2 d-flex align-items-center gap-1 py-1 px-2 rounded-pill font-weight-semibold" style="font-size: 10px; background: rgba(39, 201, 63, 0.15); border: 1px solid rgba(39, 201, 63, 0.3);">
                                <span class="d-inline-block rounded-circle bg-success" style="width: 6px; height: 6px; animation: bpPulse 2s infinite;"></span>
                                Sitio Activo
                            </span>
                        </div>
                        <div class="bp-mock-body">
                            {{-- Sidebar --}}
                            <div class="bp-mock-sidebar">
                                <div class="bp-mock-menu-item active">
                                    <i class="fas fa-magic text-color-primary"></i>
                                    <span>Diseño</span>
                                </div>
                                <div class="bp-mock-menu-item">
                                    <i class="fas fa-file-alt"></i>
                                    <span>Páginas</span>
                                </div>
                                <div class="bp-mock-menu-item">
                                    <i class="fas fa-shopping-bag"></i>
                                    <span>Productos</span>
                                </div>
                                <div class="bp-mock-menu-item">
                                    <i class="fas fa-cog"></i>
                                    <span>Ajustes</span>
                                </div>
                            </div>
                            {{-- Content --}}
                            <div class="bp-mock-content">
                                <div class="bp-mock-section-title">Editor Visual</div>
                                
                                {{-- Color Theme Picker Component --}}
                                <div class="bp-mock-panel mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-color-light text-2 font-weight-semibold">Tema de color</span>
                                        <span class="text-2 font-weight-bold" style="color: var(--primary);">Turquesa</span>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <span class="bp-mock-color-pill active" style="background: #3DC2C2;"></span>
                                        <span class="bp-mock-color-pill" style="background: #ef4444;"></span>
                                        <span class="bp-mock-color-pill" style="background: #10b981;"></span>
                                        <span class="bp-mock-color-pill" style="background: #f59e0b;"></span>
                                        <span class="bp-mock-color-pill" style="background: #6366f1;"></span>
                                    </div>
                                </div>

                                {{-- Live Preview Card --}}
                                <div class="bp-mock-panel">
                                    <span class="text-color-light text-2 font-weight-semibold d-block mb-2">Vista previa rápida</span>
                                    <div class="bp-mock-preview-card">
                                        <div class="bp-mock-preview-header">
                                            <span class="bp-mock-preview-logo">MI MARCA</span>
                                            <div class="d-flex gap-1 ms-auto">
                                                <span class="bp-mock-preview-nav"></span>
                                                <span class="bp-mock-preview-nav"></span>
                                            </div>
                                        </div>
                                        <div class="bp-mock-preview-hero">
                                            <span class="bp-mock-preview-title">Sitio Profesional</span>
                                            <span class="bp-mock-preview-text">Mi negocio online listo hoy.</span>
                                            <span class="bp-mock-preview-btn">Ver Catálogo</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endunless

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 2 — MODELOS DESTACADOS (6 cards)
     ═══════════════════════════════════════════════════════════════════════ --}}
@if($featuredProducts->isNotEmpty())
<section class="bp-section">
    <div class="container container-xl-custom">
        <div class="bp-section-header">
            <h2 class="bp-section-title">Empezá con uno de estos</h2>
            <a href="{{ route('front.products.index') }}" class="bp-link-arrow">Ver todos los modelos <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="row g-3">
            @foreach($featuredProducts as $product)
            @php $hasImg = $product->images?->isNotEmpty(); @endphp
            <div class="col-6 col-md-4 col-lg-2">
                <a href="{{ route('front.products.show', $product->slug) }}" class="bp-product-card">
                    <div class="bp-product-card-img">
                        @if($hasImg)
                            <img src="{{ $product->images->first()->image_path }}" alt="{{ $product->name }}">
                        @else
                            <div class="bp-product-card-placeholder"><i class="fas fa-globe"></i></div>
                        @endif
                    </div>
                    <div class="bp-product-card-body">
                        <h3 class="bp-product-card-title">{{ $product->name }}</h3>
                        <span class="bp-product-card-price">USD {{ number_format($product->price, 0) }}<small>/mes</small></span>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 3 — POR INDUSTRIA
     ═══════════════════════════════════════════════════════════════════════ --}}
@if($industries->isNotEmpty())
<section class="bp-section bp-section-alt">
    <div class="container container-xl-custom">
        <div class="bp-section-header">
            <h2 class="bp-section-title">Encontrá tu rubro</h2>
            <span class="bp-section-meta">{{ $industries->count() }} industrias · modelos específicos</span>
        </div>
        <div class="row g-3">
            @foreach($industries as $cat)
            @php $icon = $industryIcons[$cat->slug] ?? 'fa-th-large'; @endphp
            <div class="col-6 col-md-4 col-lg-3">
                <a href="{{ route('front.products.index', ['category' => $cat->slug]) }}" class="bp-industry-card">
                    <div class="bp-industry-card-icon"><i class="fas {{ $icon }}"></i></div>
                    <h3 class="bp-industry-card-name">{{ $cat->name }}</h3>
                    <span class="bp-industry-card-count">{{ $cat->products_count }} {{ $cat->products_count === 1 ? 'modelo' : 'modelos' }}</span>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 4 — CÓMO FUNCIONA (3 pasos)
     ═══════════════════════════════════════════════════════════════════════ --}}
<section id="como-funciona" class="bp-section">
    <div class="container container-xl-custom">
        <div class="bp-section-header text-center">
            <h2 class="bp-section-title mx-auto">Tu web profesional en 3 pasos</h2>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">01</span>
                    <h3 class="bp-step-title">Elegí tu modelo</h3>
                    <p class="bp-step-desc">Modelos por industria. Ves un demo en vivo antes de elegir.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">02</span>
                    <h3 class="bp-step-title">Personalizá</h3>
                    <p class="bp-step-desc">Logo, colores, contenido. Sin código. Panel de administración intuitivo.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">03</span>
                    <h3 class="bp-step-title">Publicá</h3>
                    <p class="bp-step-desc">Tu sitio en tu-marca.bewpro.com con hosting y SSL incluidos. Online en 30 min.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════════════════
     SECCIÓN 5 — CTA FINAL
     ═══════════════════════════════════════════════════════════════════════ --}}
@unless($isClient)
<section class="bp-section bp-cta-final">
    <div class="container container-xl-custom text-center">
        <h2 class="bp-cta-title">Tu sitio listo hoy. Sin tarjeta.</h2>
        <p class="bp-cta-lead">Elegí un modelo, activá tu prueba gratis y vélo funcionando antes de pagar nada.</p>
        <a href="{{ route('front.products.index') }}" class="bp-btn bp-btn-primary bp-btn-lg">
            Empezar mi prueba gratis <i class="fas fa-arrow-right"></i>
        </a>
        <p class="bp-cta-microcopy">15 días para probarlo · Cancelás cuando quieras · Sin sorpresas en la factura</p>
        <div class="bp-cta-trust">
            <span><i class="fas fa-shield-alt"></i> Pago seguro con Stripe</span>
            <span><i class="fas fa-bolt"></i> Online en 30 min</span>
            <span><i class="fas fa-life-ring"></i> Soporte humano</span>
        </div>
    </div>
</section>

{{-- Invitación a resellers movida al footer (link discreto).
     Funnel principal de la home queda enfocado en el cliente final;
     el programa de Resellers se descubre vía footer o link directo. --}}
@endunless

@endsection

@section('css')
<style>
/* ═══════════════════════════════════════════════════════════════════════
   bewpro.com — design system de la home
   Valores: eficiencia, dirección, simpleza, economía.
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset minimal de spacing del template parent */
.bp-section { padding: 64px 0; background: var(--secondary); }
.bp-section-alt { background: var(--secondary-100); }
.bp-section-header { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.bp-section-header.text-center { display: block; }
.bp-section-title { color: var(--light); font-size: 32px; font-weight: 700; margin: 0; line-height: 1.15; max-width: 600px; }
.bp-section-meta { color: var(--grey-700); font-size: 14px; }
.bp-link-arrow { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 14px; transition: opacity 0.15s; }
.bp-link-arrow:hover { opacity: 0.85; color: var(--primary); }
.bp-link-arrow i { font-size: 11px; margin-left: 4px; transition: transform 0.15s; }
.bp-link-arrow:hover i { transform: translateX(3px); }

/* HERO */
.bp-hero { position: relative; background: var(--secondary); border-bottom: 1px solid var(--primary-rgba-10); overflow: hidden; padding: 64px 0; }
.bp-hero-circles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bp-circle { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.15; mix-blend-mode: screen; animation: floatGlow 15s ease-in-out infinite alternate; }
.bp-circle-1 { width: 450px; height: 450px; background: var(--primary); top: -150px; right: -100px; animation-duration: 18s; }
.bp-circle-2 { width: 350px; height: 350px; background: var(--tertiary); bottom: -100px; left: -50px; opacity: 0.12; animation-duration: 22s; }
.bp-circle-3 { width: 300px; height: 300px; background: var(--primary); top: 25%; left: 45%; opacity: 0.08; filter: blur(120px); animation-duration: 14s; }

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -20px) scale(1.15); }
}

.bp-pretitle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; margin-bottom: 24px; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20); border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.bp-pretitle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: bpPulse 2s infinite; }
@keyframes bpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.bp-hero-title { color: var(--light); font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; position: relative; z-index: 1; }
.bp-hero-accent { color: var(--primary); }

.bp-hero-lead { color: var(--grey-900); font-size: 19px; line-height: 1.5; margin-bottom: 32px; max-width: 540px; position: relative; z-index: 1; }

.bp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; position: relative; z-index: 1; }

.bp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.15s; border: 1px solid transparent; }
.bp-btn i { font-size: 12px; transition: transform 0.15s; }
.bp-btn:hover i { transform: translateX(3px); }
.bp-btn-primary { background: var(--primary); color: var(--light) !important; }
.bp-btn-primary:hover { background: var(--primary); opacity: 0.9; color: var(--light) !important; box-shadow: 0 0 15px rgba(61, 194, 194, 0.3); }
.bp-btn-ghost { background: transparent; color: var(--light) !important; border-color: var(--primary-rgba-20); }
.bp-btn-ghost:hover { background: var(--primary-rgba-10); border-color: var(--primary); color: var(--light) !important; }
.bp-btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 8px; }

.bp-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; position: relative; z-index: 1; }
.bp-hero-stat { display: flex; align-items: center; gap: 8px; color: var(--grey-900); font-size: 14px; }
.bp-hero-stat i { color: var(--primary); font-size: 14px; }
.bp-hero-stat strong { color: var(--light); font-weight: 700; }

/* HERO MOCKUP - Deluxe SaaS Dashboard */
.bp-hero-mockup { perspective: 1200px; width: 100%; }
.bp-mock-window { 
    background: #0f1225; 
    border: 1px solid rgba(61, 194, 194, 0.25); 
    border-radius: 12px; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(61, 194, 194, 0.1); 
    overflow: hidden; 
    transform: rotate3d(0,1,0,-8deg) rotate3d(1,0,0,2deg); 
    transition: transform 0.3s ease;
}
.bp-mock-window:hover {
    transform: rotate3d(0,1,0,-4deg) rotate3d(1,0,0,1deg) translateY(-5px);
}
.bp-mock-header { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 12px 16px; 
    background: rgba(3, 6, 40, 0.9); 
    border-bottom: 1px solid rgba(61, 194, 194, 0.15); 
}
.bp-mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.bp-mock-dot-red { background: #ff5f56; }
.bp-mock-dot-yellow { background: #ffbd2e; }
.bp-mock-dot-green { background: #27c93f; }
.bp-mock-url { margin-left: 14px; color: var(--grey-800); font-size: 11px; font-family: monospace; }
.bp-mock-body { display: flex; min-height: 330px; }
.bp-mock-sidebar { 
    width: 90px; 
    background: #06091f; 
    padding: 16px 8px; 
    border-right: 1px solid rgba(61, 194, 194, 0.1); 
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bp-mock-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--grey-800);
    font-size: 10px;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bp-mock-menu-item i {
    font-size: 14px;
}
.bp-mock-menu-item.active, .bp-mock-menu-item:hover {
    color: var(--primary);
    background: rgba(61, 194, 194, 0.1);
}
.bp-mock-content { 
    flex: 1; 
    padding: 20px; 
    background: #0f1225;
    display: flex;
    flex-direction: column;
}
.bp-mock-section-title {
    color: var(--light);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
}
.bp-mock-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(61, 194, 194, 0.15);
    border-radius: 8px;
    padding: 12px;
    backdrop-filter: blur(10px);
}
.bp-mock-color-pill {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
}
.bp-mock-color-pill:hover {
    transform: scale(1.15);
}
.bp-mock-color-pill.active {
    box-shadow: 0 0 8px var(--primary);
    border-color: #fff;
}
.bp-mock-preview-card {
    background: #030628;
    border: 1px solid rgba(61, 194, 194, 0.1);
    border-radius: 6px;
    overflow: hidden;
}
.bp-mock-preview-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bp-mock-preview-logo {
    font-weight: 800;
    font-size: 10px;
    color: var(--primary);
    letter-spacing: 0.05em;
}
.bp-mock-preview-nav {
    width: 20px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    display: inline-block;
}
.bp-mock-preview-hero {
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bp-mock-preview-title {
    color: var(--light);
    font-weight: 700;
    font-size: 12px;
}
.bp-mock-preview-text {
    color: var(--grey-800);
    font-size: 9px;
    line-height: 1.3;
}
.bp-mock-preview-btn {
    background: var(--primary);
    color: #030628;
    font-weight: 700;
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 4px;
}

/* MODELOS DESTACADOS — product cards minimalistas */
.bp-product-card { display: flex; flex-direction: column; height: 100%; background: var(--secondary-100); border: 1px solid var(--primary-rgba-10); text-decoration: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; border-radius: 12px; }
.bp-product-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(61, 194, 194, 0.15); }
.bp-product-card-img { height: 120px; background: var(--secondary-200); overflow: hidden; border-radius: 12px 12px 0 0; }
.bp-product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bp-product-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bp-product-card-placeholder i { color: var(--primary); font-size: 28px; opacity: 0.3; }
.bp-product-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.bp-product-card-title { color: var(--light); font-size: 13px; font-weight: 600; margin: 0 0 8px 0; line-height: 1.3; transition: color 0.2s ease; }
.bp-product-card:hover .bp-product-card-title { color: var(--primary) !important; }
.bp-product-card-price { color: var(--primary); font-size: 16px; font-weight: 700; margin-top: auto; }
.bp-product-card-price small { color: var(--grey-700); font-size: 11px; font-weight: 400; }
 
/* INDUSTRIAS — cards visuales con icon hero */
.bp-industry-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background: var(--secondary); border: 1px solid var(--primary-rgba-10); text-decoration: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; border-radius: 12px; }
.bp-industry-card:hover { border-color: var(--primary); background: var(--secondary-200); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(61, 194, 194, 0.15); }
.bp-industry-card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--primary-rgba-10); border-radius: 50%; margin-bottom: 14px; transition: background 0.15s; }
.bp-industry-card-icon i { color: var(--primary); font-size: 22px; }
.bp-industry-card:hover .bp-industry-card-icon { background: var(--primary); }
.bp-industry-card:hover .bp-industry-card-icon i { color: var(--light); }
.bp-industry-card-name { color: var(--light); font-size: 14px; font-weight: 600; margin: 0 0 4px 0; }
.bp-industry-card-count { color: var(--grey-700); font-size: 12px; }

/* CÓMO FUNCIONA — 3 pasos editorial */
.bp-step { padding: 20px; text-align: center; }
.bp-step-num { display: inline-block; font-size: 56px; font-weight: 800; color: var(--primary-rgba-20); line-height: 1; margin-bottom: 16px; letter-spacing: -0.04em; }
.bp-step-title { color: var(--light); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.bp-step-desc { color: var(--grey-900); font-size: 14px; line-height: 1.5; max-width: 280px; margin: 0 auto; }

/* CTA FINAL */
.bp-cta-final { background: linear-gradient(135deg, var(--secondary-100) 0%, var(--secondary) 100%); padding: 80px 0; }
.bp-cta-title { color: var(--light); font-size: 40px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.02em; }
.bp-cta-lead { color: var(--grey-900); font-size: 17px; margin-bottom: 32px; }
.bp-cta-microcopy { color: var(--grey-700); font-size: 13px; margin-top: 14px; margin-bottom: 0; }
.bp-cta-trust { display: flex; gap: 28px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.bp-cta-trust span { color: var(--grey-800); font-size: 13px; }
.bp-cta-trust i { color: var(--primary); margin-right: 6px; }

/* RESELLERS CTA — invitación B2B (BewPro plataforma → resellers) */
.bp-resellers-cta { background: var(--secondary-200); border-top: 1px solid var(--primary-rgba-10); }
.bp-resellers-icon { color: var(--primary); font-size: 32px; flex-shrink: 0; }
.bp-resellers-title { color: var(--light); font-size: 20px; font-weight: 700; margin: 0 0 4px 0; }
.bp-resellers-lead { color: var(--grey-900); font-size: 14px; line-height: 1.5; max-width: 540px; }

/* CLIENT HUB — ya existía, condensado */
.bp-client-hub { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-100) 100%); border-bottom: 1px solid var(--primary-rgba-10); }
.bp-client-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 22px; font-weight: 700; flex-shrink: 0; }
.bp-client-greeting { color: var(--light); font-size: 28px; font-weight: 700; }
.bp-client-summary { color: var(--grey-900); font-size: 14px; }
.bp-client-summary strong { color: var(--primary); }

.bp-hub-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--secondary-200); border: 1px solid var(--primary-rgba-10); text-decoration: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; border-radius: 12px; }
.bp-hub-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(61, 194, 194, 0.15); }
.bp-hub-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--primary-rgba-10); border-radius: 8px; flex-shrink: 0; color: var(--primary); font-size: 18px; }
.bp-hub-card-title { color: var(--light); font-size: 15px; font-weight: 700; margin: 0 0 2px 0; }
.bp-hub-card-meta { color: var(--grey-800); font-size: 13px; margin: 0; }
.bp-hub-card-arrow { color: var(--primary); font-size: 12px; flex-shrink: 0; }
.bp-hub-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; background: #ef4444; color: var(--light); border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bp-hub-projects { padding: 18px; background: rgba(0,0,0,0.2); border: 1px solid var(--primary-rgba-10); border-radius: 12px; }
.bp-hub-section-title { color: var(--light); font-size: 14px; font-weight: 700; }
.bp-hub-project { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--secondary-200); border: 1px solid var(--primary-rgba-10); text-decoration: none; transition: border-color 0.15s; border-radius: 8px; }
.bp-hub-project:hover { border-color: var(--primary); }
.bp-hub-project i { color: var(--primary); flex-shrink: 0; }
.bp-hub-project-name { color: var(--light); font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-hub-project-domain { color: var(--grey-800); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* RESPONSIVE */
@media (max-width: 991px) {
    .bp-hero { padding: 48px 0; }
    .bp-hero-title { font-size: 38px; }
    .bp-hero-lead { font-size: 16px; }
    .bp-section-title { font-size: 26px; }
    .bp-cta-title { font-size: 30px; }
    .bp-section { padding: 48px 0; }
}
@media (max-width: 575px) {
    .bp-hero { padding: 36px 0; }
    .bp-hero-title { font-size: 30px; line-height: 1.1; }
    .bp-hero-lead { font-size: 15px; margin-bottom: 24px; }

    /* Pretitle más compacto en mobile (el copy "15 días gratis · sin tarjeta" no debe envolverse feo) */
    .bp-pretitle { font-size: 10px; padding: 6px 12px; margin-bottom: 18px; letter-spacing: 0.04em; }

    /* CTAs full-width apilados — más tappables, evita que el verde quede pequeño */
    .bp-hero-ctas { flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .bp-hero-ctas .bp-btn { width: 100%; justify-content: center; padding: 14px 20px; }

    /* Stats: stack vertical, alineados a izquierda, espaciado denso */
    .bp-hero-stats { flex-direction: column; gap: 8px; align-items: flex-start; }
    .bp-hero-stat { font-size: 13px; }

    .bp-section-title { font-size: 22px; }
    .bp-section { padding: 36px 0; }

    /* CTA final mobile: título compacto + botón large full-width */
    .bp-cta-final { padding: 48px 0; }
    .bp-cta-title { font-size: 24px; }
    .bp-cta-lead { font-size: 15px; padding: 0 12px; }
    .bp-cta-microcopy { font-size: 12px; padding: 0 16px; line-height: 1.55; }
    .bp-cta-final .bp-btn-lg { width: 100%; max-width: 320px; justify-content: center; padding: 14px 20px; font-size: 15px; }
    .bp-cta-trust { gap: 12px; flex-direction: column; align-items: center; }
    .bp-cta-trust span { font-size: 12px; }
}
</style>
@endsection