@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="{{ url('/products-catalogue') }}" 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="{{ url('/products-catalogue') }}" 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">
                    {{-- Mockup ASCII-art simulado del admin panel --}}
                    <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">tu-sitio.bewpro.com/admin</span>
                        </div>
                        <div class="bp-mock-body">
                            <div class="bp-mock-sidebar">
                                <div class="bp-mock-line bp-mock-line-active"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                            </div>
                            <div class="bp-mock-content">
                                <div class="bp-mock-h"></div>
                                <div class="bp-mock-grid">
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></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="{{ url('/products-catalogue') }}" class="bp-link-arrow">Ver catálogo completo <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="{{ url('/products-catalogue?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="{{ url('/products-catalogue') }}" 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; }
.bp-circle { position: absolute; border-radius: 50%; opacity: 0.15; }
.bp-circle-1 { width: 320px; height: 320px; background: var(--primary); top: -80px; right: -80px; }
.bp-circle-2 { width: 200px; height: 200px; background: var(--primary); bottom: 40px; left: 10%; opacity: 0.08; }
.bp-circle-3 { width: 140px; height: 140px; background: var(--primary); top: 30%; right: 35%; opacity: 0.05; filter: blur(40px); }

.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; }
.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; }

.bp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

.bp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 4px; 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; }
.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; }

.bp-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.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 */
.bp-hero-mockup { perspective: 1200px; }
.bp-mock-window { background: #1a1f2e; border: 1px solid var(--primary-rgba-20); border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px var(--primary-rgba-10); overflow: hidden; transform: rotate3d(0,1,0,-8deg) rotate3d(1,0,0,2deg); }
.bp-mock-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #14181f; border-bottom: 1px solid var(--primary-rgba-10); }
.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-700); font-size: 11px; font-family: monospace; }
.bp-mock-body { display: flex; min-height: 280px; }
.bp-mock-sidebar { width: 70px; background: #0f1219; padding: 16px 12px; border-right: 1px solid var(--primary-rgba-10); }
.bp-mock-line { height: 8px; background: var(--primary-rgba-20); border-radius: 2px; margin-bottom: 12px; }
.bp-mock-line-active { background: var(--primary); }
.bp-mock-content { flex: 1; padding: 24px; }
.bp-mock-h { width: 60%; height: 24px; background: var(--primary-rgba-20); border-radius: 4px; margin-bottom: 24px; }
.bp-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp-mock-card { height: 80px; background: #14181f; border: 1px solid var(--primary-rgba-10); border-radius: 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.15s; overflow: hidden; }
.bp-product-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.bp-product-card-img { height: 120px; background: var(--secondary-200); overflow: hidden; }
.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; }
.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.15s; height: 100%; }
.bp-industry-card:hover { border-color: var(--primary); background: var(--secondary-200); transform: translateY(-2px); }
.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.15s; height: 100%; }
.bp-hub-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.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); }
.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; }
.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