{"id":377,"date":"2026-04-26T18:02:59","date_gmt":"2026-04-26T18:02:59","guid":{"rendered":"https:\/\/lafao.dev\/?page_id=377"},"modified":"2026-05-13T21:23:12","modified_gmt":"2026-05-13T21:23:12","slug":"https-lafao-dev","status":"publish","type":"page","link":"https:\/\/lafao.dev\/en\/","title":{"rendered":"Inicio"},"content":{"rendered":"\n    <!-- LaFao Hero CSS -->\n    <style>\n        \/* =============================================\n           LaFao Hero v4 \u2014 Agencia Top Tier\n           Manual de Marca V1.0 Aplicado\n        ============================================= *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@300;400;500;600;700;800&display=swap');\n\n        \/* \u2500\u2500 Full-width breakout \u2500\u2500 *\/\n        .lafao-hero-wrap {\n            \/* Sistema de Colores Lafao V1.0 *\/\n            --lf-orange:      #FF7A00;\n            --lf-orange-deep: #FE5A03;\n            --lf-blue:        #1B8FF5;\n            --lf-blue-deep:   #0560CE;\n            \n            --lf-ink:         #0E1A2B;\n            --lf-slate:       #5A6779;\n            --lf-mist:        #E7ECF2;\n            --lf-bone:        #F7F8FA;\n            --lf-pure:        #FFFFFF;\n            \n            --lf-gradient:    linear-gradient(90deg, var(--lf-orange), var(--lf-blue));\n\n            position: relative;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 100vw;\n            max-width: 100vw;\n            min-height: 100vh;\n\n            \/* Fondo claro original con colores del sistema *\/\n            background:\n                radial-gradient(ellipse 80% 60% at 50% 0%, rgba(27, 143, 245, 0.13) 0%, transparent 70%),\n                linear-gradient(175deg, var(--lf-mist) 0%, var(--lf-bone) 40%, var(--lf-pure) 100%);\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 90px 32px 80px;\n            box-sizing: border-box;\n            overflow: hidden;\n            font-family: 'Inter', sans-serif;\n        }\n\n        \/* Blob derecha arriba (Azul Lafao) *\/\n        .lafao-hero-wrap::before {\n            content: '';\n            position: absolute;\n            top: -80px; right: -100px;\n            width: 480px; height: 480px;\n            border-radius: 50%;\n            background: radial-gradient(circle, rgba(27, 143, 245, 0.12) 0%, transparent 65%);\n            pointer-events: none;\n        }\n\n        \/* Blob izquierda abajo (Naranja Lafao) *\/\n        .lafao-hero-wrap::after {\n            content: '';\n            position: absolute;\n            bottom: -60px; left: -80px;\n            width: 360px; height: 360px;\n            border-radius: 50%;\n            background: radial-gradient(circle, rgba(255, 122, 0, 0.08) 0%, transparent 65%);\n            pointer-events: none;\n        }\n\n        \/* Grid sutil t\u00e9cnico *\/\n        .lafao-hero-bg-grid {\n            position: absolute;\n            inset: 0;\n            background-image:\n                linear-gradient(rgba(27, 143, 245, 0.04) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(27, 143, 245, 0.04) 1px, transparent 1px);\n            background-size: 64px 64px;\n            pointer-events: none;\n        }\n\n        \/* Banda inferior con el gradiente firma de Lafao *\/\n        .lafao-hero-bottom-bar {\n            position: absolute;\n            bottom: 0; left: 0; right: 0;\n            height: 4px;\n            background: var(--lf-blue);\n            opacity: 0.5;\n        }\n\n        \/* Inner *\/\n        .lafao-hero-inner {\n            position: relative;\n            z-index: 2;\n            text-align: center;\n            max-width: 820px;\n            width: 100%;\n        }\n\n        \/* Badge - Estilo Etiqueta T\u00e9cnica *\/\n        .lafao-hero-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            background: rgba(255, 255, 255, 0.85);\n            backdrop-filter: blur(8px);\n            border: 1px solid rgba(27, 143, 245, 0.25);\n            color: var(--lf-ink);\n            font-family: 'JetBrains Mono', monospace;\n            font-size: 12px;\n            letter-spacing: 0.08em;\n            text-transform: uppercase;\n            padding: 6px 16px;\n            border-radius: 100px;\n            margin-bottom: 36px;\n            animation: lf-fadeUp .7s .05s ease both;\n        }\n\n        .lafao-hero-badge::before {\n            content: '\u2014';\n            color: var(--lf-orange);\n            font-weight: 700;\n        }\n\n        \/* Heading \u2014 Tipograf\u00eda Masiva Sora *\/\n        .lafao-hero-heading {\n            font-family: 'Sora', sans-serif;\n            font-size: clamp(2.8rem, 6.5vw, 5rem);\n            font-weight: 700;\n            line-height: 1.1;\n            color: var(--lf-ink);\n            margin: 0 0 32px;\n            letter-spacing: -0.02em;\n            animation: lf-fadeUp .75s .15s ease both;\n        }\n\n        .lafao-hero-heading .lf-highlight {\n            color: var(--lf-orange);\n            position: relative;\n            display: inline-block;\n            z-index: 1;\n            \/* Efecto de energ\u00eda interna: la luz nace desde las letras *\/\n            color: var(--lf-orange);\n            animation: lf-internal-glow 4.5s ease-in-out infinite;\n        }\n\n        \/* Subrayado con forma de pulso tecnol\u00f3gico (Rayo\/Slash digital) *\/\n        .lafao-hero-heading .lf-highlight::after {\n            content: '';\n            position: absolute;\n            left: 0; bottom: -8px;\n            width: 100%; height: 24px;\n            \n            \/* Usamos la forma como m\u00e1scara para animar el color libremente por debajo *\/\n            -webkit-mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1,14 L42,14 L50,2 L58,22 L64,10 L68,14 L99,14' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'\/%3E%3C\/svg%3E\");\n            mask-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1,14 L42,14 L50,2 L58,22 L64,10 L68,14 L99,14' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'\/%3E%3C\/svg%3E\");\n            -webkit-mask-size: 100% 100%; mask-size: 100% 100%;\n            \n            \/* Fondo que intercambia los colores suavemente *\/\n            background: linear-gradient(90deg, var(--lf-orange) 0%, var(--lf-blue) 50%, var(--lf-orange) 100%);\n            background-size: 200% 100%;\n            -webkit-clip-path: inset(0 100% 0 0);\n            clip-path: inset(0 100% 0 0);\n            animation: \n                lf-draw-pulse .65s .95s cubic-bezier(0.22, 1, 0.36, 1) forwards,\n                lf-color-swap 1.2s 1.6s ease-in-out infinite alternate;\n            pointer-events: none;\n            z-index: -1;\n        }\n\n        \/* Description - Inter *\/\n        .lafao-hero-desc {\n            font-family: 'Inter', sans-serif;\n            font-size: clamp(1rem, 2vw, 1.125rem);\n            font-weight: 400;\n            color: var(--lf-slate);\n            line-height: 1.75;\n            max-width: 580px;\n            margin: 0 auto 44px;\n            animation: lf-fadeUp .75s .28s ease both;\n        }\n\n        \/* \u2500\u2500 Botones \u2500\u2500 *\/\n        .lafao-hero-actions {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 16px;\n            flex-wrap: wrap;\n            animation: lf-fadeUp .75s .42s ease both;\n        }\n\n        .lf-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            font-family: 'Inter', sans-serif;\n            font-size: 1rem;\n            font-weight: 600;\n            border-radius: 12px;\n            padding: 16px 32px;\n            text-decoration: none;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            border: none;\n            outline: none;\n            white-space: nowrap;\n        }\n\n        \/* Primario: Naranja Lafao *\/\n        .lf-btn-primary {\n            background: var(--lf-orange);\n            color: var(--lf-pure);\n            box-shadow: 0 4px 24px rgba(255, 122, 0, 0.25);\n        }\n\n        .lf-btn-primary svg {\n            width: 18px; height: 18px;\n            transition: transform 0.3s ease;\n        }\n\n        .lf-btn-primary:hover {\n            background: var(--lf-orange-deep);\n            color: var(--lf-pure);\n            box-shadow: 0 8px 32px rgba(254, 90, 3, 0.35);\n            transform: translateY(-2px);\n        }\n\n        .lf-btn-primary:hover svg {\n            transform: translateX(5px);\n        }\n\n        \/* Secundario: texto con chevron \u203a *\/\n        .lf-btn-secondary {\n            background: transparent;\n            color: var(--lf-ink);\n            padding: 15px 18px;\n            font-weight: 600;\n            position: relative;\n        }\n\n        .lf-btn-secondary::after {\n            content: '\u203a';\n            font-size: 1.3rem;\n            line-height: 1;\n            transition: transform .2s ease;\n        }\n\n        .lf-btn-secondary:hover,\n        .lf-btn-secondary:active {\n            color: var(--lf-blue);\n            transform: none;\n        }\n\n        .lf-btn-secondary:hover::after,\n        .lf-btn-secondary:active::after {\n            transform: translateX(4px);\n        }\n\n        \/* Divisor *\/\n        .lf-btn-divider {\n            width: 1px; height: 22px;\n            background: rgba(14, 26, 43, 0.15); \/* var(--lf-ink) at 15% *\/\n        }\n\n        \/* \u2500\u2500 Trust strip \u2500\u2500 *\/\n        .lafao-hero-trust {\n            margin-top: 60px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 32px;\n            flex-wrap: wrap;\n            animation: lf-fadeUp .75s .58s ease both;\n        }\n\n        .lafao-trust-item {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            font-size: 0.875rem;\n            font-weight: 500;\n            color: var(--lf-slate);\n            font-family: 'Inter', sans-serif;\n        }\n\n        \/* Icono Lucide-style *\/\n        .lafao-trust-item .lf-check {\n            display: flex; align-items: center; justify-content: center;\n            flex-shrink: 0;\n            color: var(--lf-blue);\n        }\n\n        .lafao-trust-item .lf-check svg {\n            display: block;\n            stroke-width: 2.5;\n        }\n\n        \/* \u2500\u2500 Keyframes \u2500\u2500 *\/\n        @keyframes lf-fadeUp {\n            from { opacity: 0; transform: translateY(18px); }\n            to   { opacity: 1; transform: translateY(0); }\n        }\n\n        @keyframes lf-underline {\n            to { transform: scaleX(1); }\n        }\n\n        \/* Animaci\u00f3n de dibujado del pulso *\/\n        @keyframes lf-draw-pulse {\n            to { \n                -webkit-clip-path: inset(0 0 0 0);\n                clip-path: inset(0 0 0 0); \n            }\n        }\n\n        \/* Animaci\u00f3n de intercambio suave de colores (Naranja->Azul a Azul->Naranja) *\/\n        @keyframes lf-color-swap {\n            0%   { background-position: 0% 0; }\n            100% { background-position: 100% 0; }\n        }\n\n        \/* Animaci\u00f3n de luz interna para la palabra destacada *\/\n        @keyframes lf-internal-glow {\n            0%, 100% {\n                color: var(--lf-orange);\n                text-shadow: 0 0 10px rgba(255, 122, 0, 0);\n            }\n            50% {\n                color: #FF9505; \/* Un n\u00facleo m\u00e1s suave (Naranja Light) *\/\n                text-shadow: 0 0 12px rgba(255, 122, 0, 0.35), 0 0 24px rgba(255, 122, 0, 0.15);\n            }\n        }\n\n        \/* \u2500\u2500 Responsive m\u00f3vil \u2500\u2500 *\/\n        @media (max-width: 768px) {\n            .lafao-hero-wrap {\n                min-height: 100vh;\n                min-height: 100svh;\n                padding: 52px 24px 60px;\n                align-items: center;\n            }\n\n            .lafao-hero-heading {\n                font-size: clamp(2.4rem, 10vw, 3.2rem);\n            }\n\n            \/* Crear espacio para que el rayo no choque con el texto inferior *\/\n            .lafao-hero-heading .lf-highlight {\n                margin-bottom: 18px;\n            }\n\n            \/* Separar la l\u00ednea de la palabra en m\u00f3viles *\/\n            .lafao-hero-heading .lf-highlight::after {\n                bottom: -12px;\n                height: 18px;\n            }\n\n            .lafao-hero-desc {\n                font-size: 0.95rem;\n            }\n\n            \/* Botones en fila horizontal *\/\n            .lafao-hero-actions {\n                flex-direction: row;\n                justify-content: center;\n                gap: 8px;\n            }\n\n            .lf-btn { \n                font-size: 0.95rem; \n            }\n            .lf-btn svg {\n                width: 16px; height: 16px;\n            }\n\n            .lf-btn-primary { flex: 0 1 auto; padding: 15px 22px; }\n            .lf-btn-secondary { flex: 0 1 auto; padding: 15px 14px; }\n            .lf-btn-divider { display: block; }\n\n            \/* Trust centrado *\/\n            .lafao-hero-trust {\n                flex-direction: column;\n                gap: 14px;\n                align-items: center;\n            }\n            \n            .lafao-trust-item {\n                font-size: 0.82rem;\n            }\n            \n            .lafao-trust-item .lf-check svg {\n                width: 14px; height: 14px;\n            }\n        }\n    <\/style>\n\n    <!-- LaFao Hero HTML -->\n    <section class=\"lafao-hero-wrap\" aria-label=\"Hero LaFao\">\n        <div class=\"lafao-hero-bg-grid\" aria-hidden=\"true\"><\/div>\n        <div class=\"lafao-hero-bottom-bar\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"lafao-hero-inner\">\n\n            <!-- Badge -->\n            <div class=\"lafao-hero-badge\">SOLUCIONES DIGITALES \u2014 LAFAO.DEV<\/div>\n\n            <!-- Heading -->\n            <h1 class=\"lafao-hero-heading\">\n                Tu web que                <span class=\"lf-highlight\">vende,<\/span><br>\n                no solo que existe            <\/h1>\n\n            <!-- Description -->\n            <p class=\"lafao-hero-desc\">Desarrollamos sitios web a medida con panel de administraci\u00f3n incluido. Sin plantillas gen\u00e9ricas, sin costos ocultos.<\/p>\n\n            <!-- CTA Buttons -->\n            <div class=\"lafao-hero-actions\">\n                <a href=\"https:\/\/lafao.dev\/contacto\/\" class=\"lf-btn lf-btn-primary\">\n                    Agendar llamada                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"><\/path><path d=\"m12 5 7 7-7 7\"><\/path><\/svg>\n                <\/a>\n                <div class=\"lf-btn-divider\" aria-hidden=\"true\"><\/div>\n                <a href=\"https:\/\/lafao.dev\/portafolio\/\" class=\"lf-btn lf-btn-secondary\">\n                    Ver Proyectos                <\/a>\n            <\/div>\n\n            <!-- Trust strip -->\n            <div class=\"lafao-hero-trust\">\n                <span class=\"lafao-trust-item\">\n                    <span class=\"lf-check\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                        <\/svg>\n                    <\/span>\n                    Sin plantillas gen\u00e9ricas\n                <\/span>\n                <span class=\"lafao-trust-item\">\n                    <span class=\"lf-check\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                        <\/svg>\n                    <\/span>\n                    Panel de administraci\u00f3n incluido\n                <\/span>\n                <span class=\"lafao-trust-item\">\n                    <span class=\"lf-check\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                        <\/svg>\n                    <\/span>\n                    Sin costos ocultos\n                <\/span>\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    \n\n\n\n    <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@300;400;500;600;700;800&display=swap');\n\n    .ppv2-wrap, .ppv2-wrap * { box-sizing: border-box; }\n    .ppv2-wrap a { text-decoration: none; }\n\n    \/* \u2500\u2500 Secci\u00f3n principal \u2500\u2500 *\/\n    .ppv2-wrap {\n        --lf-orange:      #FF7A00;\n        --lf-orange-deep: #FE5A03;\n        --lf-blue:        #1B8FF5;\n        --lf-blue-deep:   #0560CE;\n        --lf-ink:         #0E1A2B;\n        --lf-slate:       #5A6779;\n        --lf-mist:        #E7ECF2;\n        --lf-bone:        #F7F8FA;\n        --lf-pure:        #FFFFFF;\n        --lf-gradient:    linear-gradient(90deg, var(--lf-orange), var(--lf-blue));\n\n        position: relative;\n        width: 100vw;\n        max-width: 100vw;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: var(--lf-bone);\n        padding: 80px 0 72px;\n        font-family: 'Inter', sans-serif;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow-x: hidden;\n    }\n\n    \/* \u2500\u2500 DECORACIONES DE FONDO \u2500\u2500 *\/\n    .dot-matrix {\n        position: absolute;\n        width: 80px;\n        height: 80px;\n        background-image: radial-gradient(rgba(27,143,245,0.15) 2px, transparent 2px);\n        background-size: 20px 20px;\n        z-index: 0;\n        opacity: 0.7;\n    }\n    .dot-matrix.left { top: 150px; left: 2%; }\n    .dot-matrix.right { top: 250px; right: 2%; }\n\n    .bg-lines-container {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0; pointer-events: none;\n        display: flex; justify-content: center;\n    }\n    .bg-lines-svg { width: 100%; max-width: 100%; height: 600px; }\n\n    \/* \u2500\u2500 Cabecera \u2500\u2500 *\/\n    .ppv2-header {\n        position: relative;\n        z-index: 2;\n        text-align: center;\n        margin-bottom: 52px;\n        padding: 0 20px;\n        max-width: 700px;\n        width: 100%;\n    }\n\n    .success-badge-wrapper {\n        position: relative;\n        display: inline-block;\n        margin-bottom: 24px;\n    }\n    .success-badge {\n        display: inline-flex; align-items: center;\n        background-color: var(--lf-pure); color: var(--lf-orange);\n        padding: 10px 24px; border-radius: 50px;\n        font-weight: 600; font-size: 13px; letter-spacing: 1px;\n        border: 1px solid rgba(255, 122, 0, 0.2);\n        box-shadow: 0 4px 15px rgba(255, 122, 0, 0.08);\n    }\n    .success-badge svg { margin-right: 8px; width: 14px; height: 14px; fill: currentColor; }\n    .badge-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--lf-orange); }\n    .badge-corner.top-left { top: -4px; left: -10px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }\n    .badge-corner.top-right { top: -4px; right: -10px; border-left: none; border-bottom: none; border-top-right-radius: 8px; }\n\n    .ppv2-title {\n        font-family: 'Sora', sans-serif;\n        font-size: clamp(2.8rem, 5.5vw, 4.2rem);\n        line-height: 1.1;\n        margin: 0 0 16px;\n        letter-spacing: -0.5px;\n    }\n    .ppv2-title-dark   { font-weight: 700; color: var(--lf-ink); }\n    .ppv2-title-blue   { font-weight: 700; color: var(--lf-blue); letter-spacing: -1px; }\n\n    .ppv2-subtitle {\n        font-size: 1.05rem; color: var(--lf-slate); line-height: 1.6; margin: 0 auto; max-width: 500px;\n    }\n\n    \/* \u2500\u2500 \u00c1rea de tarjetas \u2500\u2500 *\/\n    .ppv2-cards-area { position: relative; z-index: 2; width: 100%; padding: 0 32px; }\n    .ppv2-track { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }\n\n    \/* \u2500\u2500 Tarjetas \u2500\u2500 *\/\n    .ppv2-card {\n        position: relative; flex: 1 1 320px; max-width: 420px; min-width: 280px;\n        height: 560px; border-radius: 28px; overflow: hidden; cursor: pointer;\n        background: #000; transition: box-shadow 0.4s ease;\n    }\n\n    .ppv2-card[data-accent=\"pink\"] { box-shadow: 0 0 0 1.5px rgba(224,82,154,0.5), 0 15px 40px rgba(224,82,154,0.15); }\n    .ppv2-card[data-accent=\"pink\"]:hover { box-shadow: 0 0 0 2.5px #e0529a, 0 28px 70px rgba(224,82,154,0.3); }\n\n    \/* Borde verde (Teal) sincronizado y m\u00e1s marcado *\/\n    .ppv2-card[data-accent=\"teal\"] { box-shadow: 0 0 0 1.5px rgba(45,212,191,0.6), 0 15px 40px rgba(45,212,191,0.15); }\n    .ppv2-card[data-accent=\"teal\"]:hover { box-shadow: 0 0 0 2.5px #2dd4bf, 0 28px 70px rgba(45,212,191,0.25); }\n\n    \/* Poster *\/\n    .ppv2-poster {\n        position: absolute; inset: 0; background-size: cover; background-position: center top;\n        z-index: 3; transition: opacity 0.5s ease, visibility 0.5s, transform 0.6s ease;\n    }\n    .ppv2-card:hover .ppv2-poster { transform: scale(1.05); }\n\n    \/* \u2500\u2500 Logos \u2500\u2500 *\/\n    .ppv2-logo {\n        position: absolute; top: 18px; left: 18px; z-index: 20;\n        width: 70px; height: 70px; border-radius: 50%;\n        overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: opacity 0.3s;\n    }\n    .ppv2-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }\n\n    .ppv2-logo-wide {\n        width: auto; max-width: 155px; height: auto; min-height: 50px; border-radius: 14px;\n        background: rgba(6,24,18,0.85); backdrop-filter: blur(10px);\n        border: 1px solid rgba(45,212,191,0.28); padding: 8px 16px;\n        display: flex; align-items: center; justify-content: center;\n    }\n    .ppv2-logo-wide img { width: auto; max-height: 36px; object-fit: contain; }\n\n    \/* \u2500\u2500 Overlay inferior \u2500\u2500 *\/\n    .ppv2-overlay {\n        position: absolute; bottom: 0; left: 0; right: 0;\n        background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.65) 45%, transparent 100%);\n        padding: 24px 26px 26px; z-index: 10; transition: opacity 0.35s;\n    }\n\n    .ppv2-badge-cli {\n        display: inline-block; padding: 4px 14px; border-radius: 50px;\n        font-size: 0.72rem; font-weight: 700; color: white; margin-bottom: 10px;\n        background: rgba(255,255,255,0.15); backdrop-filter: blur(5px);\n    }\n    .ppv2-card[data-accent=\"pink\"] .ppv2-badge-cli { color: #f472b6; }\n    .ppv2-card[data-accent=\"teal\"] .ppv2-badge-cli { color: #2dd4bf; }\n\n    .ppv2-social-link {\n        display: inline-flex; align-items: center; gap: 6px;\n        color: rgba(255,255,255,0.9); font-size: 0.86rem; font-weight: 600;\n        background: rgba(255,255,255,0.15); backdrop-filter: blur(5px);\n        padding: 10px 16px; border-radius: 50px; text-decoration: none;\n        transition: background 0.2s, color 0.2s;\n    }\n    .ppv2-social-link:hover { background: rgba(255,255,255,0.25); color: #fff; }\n    .ppv2-social-link svg { width: 16px; height: 16px; fill: currentColor; }\n    .ppv2-top-badges { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }\n    .ppv2-top-badges .ppv2-badge-cli { margin-bottom: 0; }\n    \n    .ppv2-actions-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\n\n    .ppv2-client-name { font-size: 1.6rem; font-weight: 800; color: white; margin: 0 0 10px; line-height: 1.15; letter-spacing: -0.3px; }\n    .ppv2-client-desc { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0 0 20px; overflow: hidden; }\n\n    \/* Animaci\u00f3n profesional: mostrar descripci\u00f3n al hacer hover o tocar (escritorio y m\u00f3vil) *\/\n    .ppv2-client-desc {\n        margin: 0;\n        max-height: 0;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(10px);\n        transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease, visibility 0.4s ease;\n    }\n    .ppv2-card:hover .ppv2-client-desc,\n    .ppv2-card:active .ppv2-client-desc {\n        max-height: 150px;\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(0);\n        margin: 0 0 20px;\n    }\n\n    .ppv2-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n\n    .ppv2-site-btn {\n        display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;\n        border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.25); background: transparent;\n        color: white; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap;\n        transition: background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent;\n    }\n    .ppv2-site-btn:hover  { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }\n    .ppv2-site-btn svg    { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }\n\n    \/* \u2500\u2500 Bot\u00f3n Play \u2500\u2500 *\/\n    .ppv2-play-btn {\n        width: 60px; height: 60px; border-radius: 50%; border: 2px solid; background: transparent;\n        cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;\n        transition: transform 0.2s, background 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent;\n    }\n    .ppv2-play-btn::after {\n        content: ''; display: block; width: 0; height: 0;\n        border-top: 10px solid transparent; border-bottom: 10px solid transparent;\n        border-left: 18px solid white; margin-left: 4px;\n    }\n    .ppv2-play-btn:hover { transform: scale(1.1); background: rgba(255,255,255,0.15); }\n\n    \/* \u2500\u2500 Flechas de navegaci\u00f3n m\u00f3vil \u2500\u2500 *\/\n    .ppv2-nav-arrows { display: none; }\n    .ppv2-dots { display: none; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }\n    .ppv2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lf-mist); transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease; flex-shrink: 0; }\n    .ppv2-dot.active { background: var(--lf-blue); width: 22px; border-radius: 4px; transform: scaleY(1); }\n\n    \/* \u2500\u2500 Bot\u00f3n CTA inferior \u2500\u2500 *\/\n    .ppv2-cta-wrap { margin-top: 50px; position: relative; z-index: 2; }\n    .ppv2-cta-wrap { margin-top: 50px; position: relative; z-index: 50; display: flex; justify-content: center; pointer-events: auto; }\n    .ppv2-cta-btn {\n        display: inline-flex; align-items: center; gap: 8px;\n        color: var(--lf-ink); font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600;\n        text-decoration: none; transition: color 0.3s ease, border-color 0.3s ease;\n        padding-bottom: 4px; border-bottom: 2px solid rgba(14, 26, 43, 0.2);\n        -webkit-tap-highlight-color: transparent;\n    }\n    .ppv2-cta-btn:hover { color: var(--lf-orange); border-bottom-color: var(--lf-orange); }\n    .ppv2-cta-arrow { display: inline-flex; align-items: center; transition: transform 0.2s; }\n    .ppv2-cta-btn:hover .ppv2-cta-arrow { transform: translateX(6px); }\n    .ppv2-cta-arrow svg { width: 20px; height: 20px; }\n\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MODAL FLOTANTE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    #pf-modal-overlay {\n        position: fixed; inset: 0; z-index: 2147483647;\n        display: flex; align-items: center; justify-content: center;\n        background: rgba(5, 15, 50, 0.80); backdrop-filter: blur(20px) saturate(1.5);\n        -webkit-backdrop-filter: blur(20px) saturate(1.5);\n        opacity: 0; visibility: hidden; pointer-events: none;\n        transition: opacity 0.38s cubic-bezier(.4,0,.2,1), visibility 0.38s cubic-bezier(.4,0,.2,1);\n    }\n    #pf-modal-overlay::before {\n        content: ''; position: absolute; inset: 0;\n        background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(27,143,245,0.20) 0%, transparent 70%);\n        pointer-events: none; z-index: 0;\n    }\n    #pf-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }\n\n    #pf-modal-box {\n        position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 16px;\n        transform: scale(0.88) translateY(28px); transition: transform 0.42s cubic-bezier(.34,1.56,.64,1);\n    }\n    #pf-modal-overlay.active #pf-modal-box { transform: scale(1) translateY(0); }\n\n    #pf-modal-frame {\n        position: relative; width: min(72vh, 420px); aspect-ratio: 4 \/ 5; border-radius: 28px;\n        overflow: hidden; background: #000;\n        box-shadow: 0 0 0 1.5px rgba(27,143,245,0.6), 0 0 0 5px rgba(27,143,245,0.15), 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(27,143,245,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);\n    }\n\n    #pf-modal-glow {\n        position: absolute; border-radius: 31px; pointer-events: none; z-index: 11;\n        opacity: 0; transition: opacity 0.4s; overflow: hidden;\n    }\n    #pf-modal-overlay.active #pf-modal-glow { opacity: 1; }\n    #pf-modal-glow::after {\n        content: ''; position: absolute; inset: -3px; border-radius: 31px;\n        background: conic-gradient(from 0deg, rgba(27,143,245,0) 0deg, rgba(27,143,245,0.55) 90deg, rgba(255,122,0,0.7) 180deg, rgba(27,143,245,0.55) 270deg, rgba(27,143,245,0) 360deg);\n        animation: pf-spin-glow 4s linear infinite;\n    }\n    @keyframes pf-spin-glow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n\n    #pf-modal-video {\n        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1;\n    }\n    #pf-modal-video::-webkit-media-controls, #pf-modal-video::-webkit-media-controls-enclosure, #pf-modal-video::-webkit-media-controls-panel, #pf-modal-video::-webkit-media-controls-play-button, #pf-modal-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }\n\n    #pf-modal-controls {\n        position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 20px 22px;\n        background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 55%, transparent 100%);\n        display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; z-index: 5; border-radius: 0 0 28px 28px; transition: opacity 0.3s;\n    }\n    #pf-modal-controls.hidden { opacity: 0; pointer-events: none; }\n\n    .pf-modal-info { flex: 1; }\n    .pf-modal-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 5px; }\n    .pf-modal-name { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; letter-spacing: -0.2px; }\n\n    #pf-modal-playpause {\n        width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px);\n        cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; z-index: 6; padding: 0;\n    }\n    #pf-modal-playpause:hover { transform: scale(1.12); background: rgba(255,255,255,0.28); }\n    #pf-modal-playpause:active { transform: scale(0.93); }\n    #pf-modal-playpause svg { width: 24px; height: 24px; fill: #ffffff !important; pointer-events: none; display: block; }\n\n    #pf-modal-progress-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.15); cursor: pointer; z-index: 7; }\n    #pf-modal-progress-bar { height: 100%; width: 0%; background: var(--lf-gradient); transition: width 0.2s linear; pointer-events: none; }\n\n    #pf-modal-close {\n        position: absolute; top: 14px; right: 14px; z-index: 20; width: 36px; height: 36px; border-radius: 50%;\n        border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);\n        cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; outline: none; padding: 0;\n    }\n    #pf-modal-close:hover { background: rgba(255,80,80,0.5); border-color: rgba(255,100,100,0.5); transform: scale(1.1); }\n    #pf-modal-close svg { width: 18px; height: 18px; stroke: #ffffff !important; fill: none !important; }\n\n    \/* Bot\u00f3n PiP en el modal *\/\n    #pf-modal-pip {\n        position: absolute; top: 14px; left: 14px; z-index: 20; height: 36px; padding: 0 14px; border-radius: 50px;\n        border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);\n        color: white; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;\n        transition: background 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; font-family: 'Inter', sans-serif;\n    }\n    #pf-modal-pip:hover { background: rgba(27,143,245,0.8); transform: scale(1.05); }\n    #pf-modal-pip svg { width: 14px; height: 14px; fill: white; }\n\n    #pf-modal-footer { display: flex; align-items: center; justify-content: space-between; width: min(72vh, 420px); gap: 12px; padding: 0 4px; }\n    #pf-modal-footer-name { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: -0.2px; }\n    #pf-modal-footer-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-top: 3px; }\n    #pf-modal-site-btn {\n        display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.25);\n        background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); color: white; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.2s, border-color 0.2s; flex-shrink: 0;\n    }\n    #pf-modal-site-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: #fff; }\n    #pf-modal-site-btn svg { width: 12px; height: 12px; fill: currentColor; }\n\n    \/* \u2500\u2500 Responsive general y m\u00f3vil \u2500\u2500 *\/\n    @media (max-width: 1024px) { .bg-lines-svg { display: none; } }\n    @media (max-width: 880px) { .ppv2-cards-area { padding: 0 16px; } .ppv2-card { height: 500px; } }\n    @media (max-width: 768px) { .dot-matrix { display: none; } }\n    @media (max-width: 540px) {\n        #pf-modal-frame, #pf-modal-footer { width: 88vw; }\n        #pf-modal-frame { aspect-ratio: 3 \/ 4; border-radius: 22px; }\n        #pf-modal-close { top: 10px; right: 10px; }\n        #pf-modal-pip { top: 10px; left: 10px; }\n        #pf-modal-footer-desc { display: none; }\n    }\n\n    @media (max-width: 660px) {\n        .ppv2-track { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }\n        .ppv2-track::-webkit-scrollbar { display: none; }\n        .ppv2-card { scroll-snap-align: center; flex: 0 0 82vw; max-width: 82vw; height: 74vw; min-height: 420px; }\n        .ppv2-cards-area { padding: 0; }\n        .ppv2-nav-arrows { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; position: relative; z-index: 5; }\n        .ppv2-arrow-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(27, 143, 245, 0.25); background: var(--lf-pure); color: var(--lf-ink); cursor: pointer; box-shadow: 0 4px 16px rgba(27, 143, 245, 0.1); transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, opacity 0.25s ease; outline: none; }\n        .ppv2-arrow-btn svg { width: 20px; height: 20px; stroke: var(--lf-blue); transition: stroke 0.22s ease; flex-shrink: 0; }\n        .ppv2-arrow-btn:hover:not(:disabled) { background: var(--lf-blue); border-color: var(--lf-blue); box-shadow: 0 6px 24px rgba(27, 143, 245, 0.32); transform: scale(1.08); }\n        .ppv2-arrow-btn:hover:not(:disabled) svg { stroke: #ffffff; }\n        .ppv2-arrow-btn:active:not(:disabled) { transform: scale(0.95); }\n        .ppv2-arrow-btn:disabled, .ppv2-arrow-btn[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }\n        .ppv2-dots { display: flex; }\n\n        .ppv2-overlay { padding: 20px 16px 20px; }\n        .ppv2-client-name { font-size: 1.3rem; margin-bottom: 8px; }\n        .ppv2-client-desc { font-size: 0.8rem; }\n        .ppv2-card:hover .ppv2-client-desc, .ppv2-card:active .ppv2-client-desc { margin: 0 0 14px; }\n        .ppv2-actions { gap: 8px; }\n        .ppv2-actions-left { gap: 6px; flex-wrap: nowrap; }\n        .ppv2-site-btn { padding: 8px 12px; font-size: 0.75rem; }\n        .ppv2-site-btn svg { width: 11px; height: 11px; }\n        .ppv2-social-link { padding: 8px 12px; font-size: 0.75rem; white-space: nowrap; }\n        .ppv2-social-link svg { width: 13px; height: 13px; }\n        .ppv2-play-btn { width: 44px; height: 44px; }\n        .ppv2-play-btn::after { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 12px; margin-left: 3px; }\n    }\n    <\/style>\n\n    <!-- \u2550\u2550 MODAL FLOTANTE GLOBAL (Se mover\u00e1 al <body>) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    <div id=\"pf-modal-overlay\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Reproductor de video\">\n        <div id=\"pf-modal-box\">\n            <div id=\"pf-modal-frame\">\n\n                <!-- IMPORTANTE: A\u00f1adimos disablePictureInPicture y oncontextmenu=\"return false;\" para bloquear la pesta\u00f1a \"Minimizar\" nativa del navegador -->\n                <video id=\"pf-modal-video\" playsinline webkit-playsinline x-webkit-airplay=\"deny\" disablePictureInPicture oncontextmenu=\"return false;\" controlsList=\"nodownload nofullscreen noremoteplayback\" preload=\"none\"><\/video>\n\n                <div id=\"pf-modal-controls\">\n                    <div class=\"pf-modal-info\">\n                        <div class=\"pf-modal-badge\" id=\"pf-modal-badge-text\"><\/div>\n                        <p class=\"pf-modal-name\" id=\"pf-modal-client-name\"><\/p>\n                    <\/div>\n                    <button id=\"pf-modal-playpause\" aria-label=\"Reproducir o pausar\">\n                        <svg id=\"pf-pp-icon-play\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#ffffff\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n                        <svg id=\"pf-pp-icon-pause\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#ffffff\" style=\"display:none\"><path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/><\/svg>\n                    <\/button>\n                <\/div>\n\n                <div id=\"pf-modal-progress-wrap\"><div id=\"pf-modal-progress-bar\"><\/div><\/div>\n\n                <button id=\"pf-modal-pip\" aria-label=\"Activar Ventana Flotante\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M19 11h-8v6h8v-6zm4 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H3V4.97h18v14.05z\"\/><\/svg>\n                    PiP\n                <\/button>\n\n                <button id=\"pf-modal-close\" aria-label=\"Cerrar video\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n                <\/button>\n            <\/div>\n\n            <div id=\"pf-modal-footer\">\n                <div>\n                    <div id=\"pf-modal-footer-name\"><\/div>\n                    <div id=\"pf-modal-footer-desc\"><\/div>\n                <\/div>\n                <a id=\"pf-modal-site-btn\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Ver Sitio\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z\"\/><\/svg>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!-- \u2550\u2550 FIN MODAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n    <div class=\"ppv2-wrap\">\n\n        <div class=\"dot-matrix left\"><\/div>\n        <div class=\"dot-matrix right\"><\/div>\n\n        <div class=\"bg-lines-container\">\n            <svg class=\"bg-lines-svg\" viewBox=\"0 0 1440 600\" preserveAspectRatio=\"xMidYMin slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M-50,550 C150,500 150,300 340,300\" stroke=\"var(--lf-mist)\" stroke-width=\"1.5\" fill=\"none\" \/>\n                <circle cx=\"340\" cy=\"300\" r=\"7\" fill=\"var(--lf-blue)\" \/>\n                <path d=\"M1490,50 C1250,150 1200,300 1100,300\" stroke=\"var(--lf-mist)\" stroke-width=\"1.5\" fill=\"none\" \/>\n                <circle cx=\"1100\" cy=\"300\" r=\"6.5\" stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" fill=\"var(--lf-bone)\" \/>\n                <path d=\"M1100,293.5 A6.5,6.5 0 0,1 1100,306.5 Z\" fill=\"var(--lf-blue)\" \/>\n            <\/svg>\n        <\/div>\n\n        <!-- Cabecera -->\n        <div class=\"ppv2-header\">\n            <div class=\"success-badge-wrapper\">\n                <span class=\"badge-corner top-left\"><\/span>\n                <div class=\"success-badge\">\n                    <svg viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M400 0H176c-26.5 0-48.1 21.8-48.1 48.5V224c0 26.7 21.6 48.5 48.1 48.5h48v32.1c0 26.7-21.6 48.5-48.1 48.5H128c-26.5 0-48.1 21.8-48.1 48.5V464h416v-62.4c0-26.7-21.6-48.5-48.1-48.5h-47.9c-26.5 0-48.1-21.8-48.1-48.5V272.5h48c26.5 0 48.1-21.8 48.1-48.5V48.5C448 21.8 426.5 0 400 0zM128 224H48V48.5c0-8.8 7.2-16 16-16h64V224zm384 0h-80V32.5h64c8.8 0 16 7.2 16 16V224z\"\/><\/svg>\n                    <span>CASOS DE \u00c9XITO<\/span>\n                <\/div>\n                <span class=\"badge-corner top-right\"><\/span>\n            <\/div>\n            <h2 class=\"ppv2-title\">\n                <span class=\"ppv2-title-dark\">Portafolio de <\/span><span class=\"ppv2-title-blue\">Proyectos<\/span>\n            <\/h2>\n        <\/div>\n\n        <!-- Tarjetas -->\n        <div class=\"ppv2-cards-area\">\n            <div class=\"ppv2-track\" id=\"ppv2-track\">\n\n                                <div class=\"ppv2-card\" data-accent=\"pink\"\n                     data-video=\"https:\/\/lafao.dev\/wp-content\/uploads\/2025\/12\/video-Didier.mp4\"\n                     data-poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/01\/didier-foto.png\"\n                     data-cliente=\"Tailandia Cream\"\n                     data-badge=\"Didier\"\n                     data-desc=\"Creamos una tienda online \u00e1gil e intuitiva. Facilita a los clientes ordenar sin complicaciones y entrega al negocio pedidos detallados y listos para gestionar.\"\n                     data-site=\"https:\/\/tailandiacream.com\">\n\n                    <div class=\"ppv2-poster js-ppv2-poster\" style=\"background-image:url('https:\/\/lafao.dev\/wp-content\/uploads\/2026\/01\/didier-foto.png');\"><\/div>\n\n                    <!-- Logos -->\n                                        <div class=\"ppv2-logo\">\n                        <img decoding=\"async\" src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2025\/12\/cropped-Logo-definitivo-3.png\" alt=\"Logo Tailandia Cream\">\n                    <\/div>\n                    \n                    <!-- Overlay inferior -->\n                    <div class=\"ppv2-overlay js-ppv2-overlay\">\n                        <div class=\"ppv2-top-badges\">\n                            <span class=\"ppv2-badge-cli\">Didier<\/span>\n                        <\/div>\n                        <h3 class=\"ppv2-client-name\">Tailandia Cream<\/h3>\n                        <p class=\"ppv2-client-desc\">Creamos una tienda online \u00e1gil e intuitiva. Facilita a los clientes ordenar sin complicaciones y entrega al negocio pedidos detallados y listos para gestionar.<\/p>\n\n                        <div class=\"ppv2-actions\">\n                            <div class=\"ppv2-actions-left\">\n                                <a href=\"https:\/\/tailandiacream.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ppv2-site-btn\" onclick=\"event.stopPropagation();\">\n                                    Ver Sitio Web\n                                    <svg viewBox=\"0 0 24 24\"><path d=\"M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z\"\/><\/svg>\n                                <\/a>\n                                                                <a href=\"https:\/\/www.instagram.com\/tailandia_cream?utm_source=ig_web_button_share_sheet&#038;igsh=ZDNlZDc0MzIxNw==\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ppv2-social-link\" onclick=\"event.stopPropagation();\">\n                                                                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\/><\/svg>\n                                                                        <span>11,4 mil<\/span>                                <\/a>\n                                                            <\/div>\n                            <button class=\"ppv2-play-btn js-ppv2-play\" style=\"border-color:#e0529a;\" aria-label=\"Reproducir video\"><\/button>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                                <div class=\"ppv2-card\" data-accent=\"teal\"\n                     data-video=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/Thomas-video.mp4\"\n                     data-poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/Sonador-Thomas-BRAUN-.jpg\"\n                     data-cliente=\"QuipEcos\"\n                     data-badge=\"Thomas\"\n                     data-desc=\"Dise\u00f1amos una landing page enfocada en donaciones, presentando de manera atractiva y clara su proyecto de conservaci\u00f3n ambiental para proteger a la guacamaya.\"\n                     data-site=\"https:\/\/quipecos.com\">\n\n                    <div class=\"ppv2-poster js-ppv2-poster\" style=\"background-image:url('https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/Sonador-Thomas-BRAUN-.jpg');\"><\/div>\n\n                    <!-- Logos -->\n                                        <div class=\"ppv2-logo ppv2-logo-wide\">\n                        <img decoding=\"async\" src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/QuipEcos-logo.webp\" alt=\"Logo QuipEcos\">\n                    <\/div>\n                    \n                    <!-- Overlay inferior -->\n                    <div class=\"ppv2-overlay js-ppv2-overlay\">\n                        <div class=\"ppv2-top-badges\">\n                            <span class=\"ppv2-badge-cli\">Thomas<\/span>\n                        <\/div>\n                        <h3 class=\"ppv2-client-name\">QuipEcos<\/h3>\n                        <p class=\"ppv2-client-desc\">Dise\u00f1amos una landing page enfocada en donaciones, presentando de manera atractiva y clara su proyecto de conservaci\u00f3n ambiental para proteger a la guacamaya.<\/p>\n\n                        <div class=\"ppv2-actions\">\n                            <div class=\"ppv2-actions-left\">\n                                <a href=\"https:\/\/quipecos.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ppv2-site-btn\" onclick=\"event.stopPropagation();\">\n                                    Ver Sitio Web\n                                    <svg viewBox=\"0 0 24 24\"><path d=\"M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z\"\/><\/svg>\n                                <\/a>\n                                                                <a href=\"https:\/\/linktr.ee\/quipecos\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ppv2-social-link\" onclick=\"event.stopPropagation();\">\n                                                                        <svg viewBox=\"0 0 24 24\"><path d=\"M13.513 13.911l6.702-6.732-2.316-2.324-6.611 6.643V0h-3.264v11.517L1.411 4.858 0 7.181l6.98 7.016H0v3.284h8.349v6.52h3.264v-6.52h8.046v-3.284H13.513z\"\/><\/svg>\n                                                                        <span>linktr.ee<\/span>                                <\/a>\n                                                            <\/div>\n                            <button class=\"ppv2-play-btn js-ppv2-play\" style=\"border-color:#2dd4bf;\" aria-label=\"Reproducir video\"><\/button>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                \n            <\/div>\n\n            <!-- Flechas navegaci\u00f3n m\u00f3vil -->\n            <div class=\"ppv2-nav-arrows\" id=\"ppv2-nav-arrows\" aria-label=\"Navegaci\u00f3n de proyectos\">\n                <button class=\"ppv2-arrow-btn\" id=\"ppv2-prev\" aria-label=\"Proyecto anterior\" disabled>\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n                <\/button>\n                <div class=\"ppv2-dots\" id=\"ppv2-dots\" aria-hidden=\"true\">\n                                        <span class=\"ppv2-dot active\" data-index=\"0\"><\/span>\n                                        <span class=\"ppv2-dot\" data-index=\"1\"><\/span>\n                                    <\/div>\n                <button class=\"ppv2-arrow-btn\" id=\"ppv2-next\" aria-label=\"Siguiente proyecto\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Bot\u00f3n Ver portafolio completo -->\n        <div class=\"ppv2-cta-wrap\">\n            <a href=\"https:\/\/lafao.dev\/portafolio\/#mas-proyectos\" class=\"ppv2-cta-btn\" aria-label=\"Ver portafolio completo de Lafao\">\n                Ver portafolio completo\n                <span class=\"ppv2-cta-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg><\/span>\n            <\/a>\n        <\/div>\n\n    <\/div>\n\n    <script>\n    (function(){\n        'use strict';\n\n        \/* \u2500\u2500 Mover el modal al body \u2500\u2500 *\/\n        var overlay = document.getElementById('pf-modal-overlay');\n        if (overlay && overlay.parentNode !== document.body) {\n            document.body.appendChild(overlay);\n        }\n\n        var modalVideo  = document.getElementById('pf-modal-video');\n        var modalClose  = document.getElementById('pf-modal-close');\n        var modalPP     = document.getElementById('pf-modal-playpause');\n        var modalPiP    = document.getElementById('pf-modal-pip');\n        var iconPlay    = document.getElementById('pf-pp-icon-play');\n        var iconPause   = document.getElementById('pf-pp-icon-pause');\n        var progressBar = document.getElementById('pf-modal-progress-bar');\n        var progressWrap= document.getElementById('pf-modal-progress-wrap');\n        var modalBadge  = document.getElementById('pf-modal-badge-text');\n        var modalName   = document.getElementById('pf-modal-client-name');\n        var footerName  = document.getElementById('pf-modal-footer-name');\n        var footerDesc  = document.getElementById('pf-modal-footer-desc');\n        var footerSite  = document.getElementById('pf-modal-site-btn');\n        var controls    = document.getElementById('pf-modal-controls');\n        var hideControlsTimer = null;\n\n        var scrollY = 0;\n        function lockScroll() {\n            scrollY = window.scrollY;\n            document.body.style.position   = 'fixed';\n            document.body.style.top        = '-' + scrollY + 'px';\n            document.body.style.left       = '0';\n            document.body.style.right      = '0';\n            document.body.style.overflowY  = 'scroll';\n        }\n        function unlockScroll() {\n            document.body.style.position   = '';\n            document.body.style.top        = '';\n            document.body.style.left       = '';\n            document.body.style.right      = '';\n            document.body.style.overflowY  = '';\n            window.scrollTo(0, scrollY);\n        }\n\n        function openModal(caseData) {\n            modalBadge.textContent  = caseData.badge_text  || '';\n            modalName.textContent   = caseData.cliente     || '';\n            footerName.textContent  = caseData.cliente     || '';\n            footerDesc.textContent  = caseData.desc        || '';\n            footerSite.href         = caseData.site_url    || '#';\n\n            \/\/ Comprobar si el video actual es el mismo y est\u00e1 en PiP\n            var isPiP = false;\n            if (document.pictureInPictureElement === modalVideo) { isPiP = true; } \n            else if (modalVideo.webkitPresentationMode === 'picture-in-picture') { isPiP = true; }\n            \n            var currentSrc = modalVideo.getAttribute('src') || modalVideo.src || '';\n            var isSameVideo = currentSrc.indexOf(caseData.video_url) !== -1;\n\n            if (isPiP && isSameVideo) {\n                \/\/ Restauramos el modal sin cortar el video\n                overlay.classList.add('active');\n                lockScroll();\n                controls.classList.remove('hidden');\n                \n                \/\/ Cerramos el PiP nativo para devolver el video al modal grande\n                if (document.pictureInPictureElement === modalVideo) {\n                    document.exitPictureInPicture().catch(console.error);\n                } else if (modalVideo.webkitPresentationMode === 'picture-in-picture') {\n                    modalVideo.webkitSetPresentationMode('inline');\n                }\n                return; \/\/ Evitamos reiniciar el video\n            }\n\n            progressBar.style.width = '0%';\n            progressBar.style.transition = 'none';\n\n            modalVideo.pause();\n            modalVideo.removeAttribute('src');\n            modalVideo.load();\n\n            setTimeout(function(){\n                modalVideo.src    = caseData.video_url  || '';\n                modalVideo.poster = caseData.poster_url || '';\n                modalVideo.load();\n\n                overlay.classList.add('active');\n                lockScroll();\n                controls.classList.remove('hidden');\n\n                var playPromise = modalVideo.play();\n                if (playPromise !== undefined) {\n                    playPromise.then(function(){\n                        modalVideo.muted = false;\n                        updatePPIcon(); showControls();\n                    }).catch(function(){\n                        modalVideo.muted = true;\n                        modalVideo.play().then(function(){ updatePPIcon(); showControls(); });\n                    });\n                }\n                updatePPIcon();\n                setTimeout(function(){ progressBar.style.transition = 'width 0.2s linear'; }, 50);\n            }, 20);\n        }\n\n        function closeModal() {\n            var isPiP = false;\n            if (document.pictureInPictureElement === modalVideo) {\n                isPiP = true;\n            } else if (modalVideo.webkitPresentationMode === 'picture-in-picture') {\n                isPiP = true;\n            }\n\n            overlay.classList.remove('active');\n            unlockScroll();\n            clearTimeout(hideControlsTimer);\n            controls.classList.remove('hidden');\n\n            \/* FIX PiP: Si est\u00e1 en modo PiP, lo dejamos reproduciendo. Solo lo borramos si NO est\u00e1 en PiP. *\/\n            if (!isPiP) {\n                modalVideo.pause();\n                modalVideo.removeAttribute('src');\n                modalVideo.load();\n                if(progressBar) progressBar.style.width = '0%';\n            }\n        }\n\n        function updatePPIcon() {\n            if (!modalVideo || modalVideo.paused) {\n                if (iconPlay)  iconPlay.style.display  = 'block';\n                if (iconPause) iconPause.style.display = 'none';\n            } else {\n                if (iconPlay)  iconPlay.style.display  = 'none';\n                if (iconPause) iconPause.style.display = 'block';\n            }\n        }\n\n        function showControls() {\n            if (!controls) return;\n            controls.classList.remove('hidden');\n            clearTimeout(hideControlsTimer);\n            hideControlsTimer = setTimeout(function(){\n                if (modalVideo && !modalVideo.paused) {\n                    controls.classList.add('hidden');\n                }\n            }, 2800);\n        }\n\n        \/* \u2500\u2500 Eventos del modal \u2500\u2500 *\/\n        if (modalClose) modalClose.addEventListener('click', function(e){ e.stopPropagation(); closeModal(); });\n        if (overlay) overlay.addEventListener('click', function(e){ if (e.target === overlay) closeModal(); });\n        document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && overlay && overlay.classList.contains('active')) closeModal(); });\n\n        if (modalPP) {\n            modalPP.addEventListener('click', function(e){\n                e.stopPropagation();\n                if (modalVideo.paused) modalVideo.play(); else modalVideo.pause();\n                updatePPIcon(); showControls();\n            });\n        }\n        if (modalVideo) {\n            modalVideo.addEventListener('click', function(e){\n                e.stopPropagation();\n                if (modalVideo.paused) modalVideo.play(); else modalVideo.pause();\n                updatePPIcon(); showControls();\n            });\n            modalVideo.addEventListener('play',  function(){ updatePPIcon(); showControls(); });\n            modalVideo.addEventListener('pause', function(){ updatePPIcon(); if(controls) controls.classList.remove('hidden'); });\n            modalVideo.addEventListener('ended', function(){ updatePPIcon(); if(controls) controls.classList.remove('hidden'); if(progressBar) progressBar.style.width = '100%'; });\n            modalVideo.addEventListener('timeupdate', function(){\n                if (modalVideo.duration && progressBar) {\n                    var pct = (modalVideo.currentTime \/ modalVideo.duration) * 100;\n                    progressBar.style.width = pct + '%';\n                }\n            });\n\n            \/* \u2500\u2500 FIX: Restaurar modal cuando se presiona \"Volver a la pesta\u00f1a\" en la ventana PiP \u2500\u2500 *\/\n            modalVideo.addEventListener('leavepictureinpicture', function() {\n                \/\/ Volvemos a bloquear el PiP nativo por seguridad cuando salimos del modo flotante\n                modalVideo.setAttribute('disablePictureInPicture', 'true');\n                \n                if (!overlay.classList.contains('active') && modalVideo.getAttribute('src')) {\n                    overlay.classList.add('active');\n                    lockScroll();\n                    controls.classList.remove('hidden');\n                    updatePPIcon();\n                }\n            });\n\n            \/\/ Para Safari\n            modalVideo.addEventListener('webkitpresentationmodechanged', function() {\n                if (modalVideo.webkitPresentationMode !== 'picture-in-picture') {\n                    if (!overlay.classList.contains('active') && modalVideo.getAttribute('src')) {\n                        overlay.classList.add('active');\n                        lockScroll();\n                        controls.classList.remove('hidden');\n                        updatePPIcon();\n                    }\n                }\n            });\n        }\n\n        \/* Bot\u00f3n PiP dentro del modal (quitando el candado de seguridad internamente) *\/\n        if (modalPiP) {\n            modalPiP.addEventListener('click', function(e) {\n                e.stopPropagation();\n                if (document.pictureInPictureElement === modalVideo) {\n                    document.exitPictureInPicture().catch(console.error);\n                } else {\n                    if (modalVideo.requestPictureInPicture) {\n                        modalVideo.removeAttribute('disablePictureInPicture'); \/\/ Quitar candado\n                        modalVideo.requestPictureInPicture().catch(console.error);\n                    } else if (modalVideo.webkitSetPresentationMode) {\n                        modalVideo.webkitSetPresentationMode('picture-in-picture');\n                    }\n                }\n            });\n        }\n\n        var frame = document.getElementById('pf-modal-frame');\n        if (frame) {\n            frame.addEventListener('mousemove',  showControls);\n            frame.addEventListener('touchstart', showControls, { passive: true });\n        }\n\n        if (progressWrap) {\n            progressWrap.addEventListener('click', function(e){\n                e.stopPropagation();\n                var rect  = progressWrap.getBoundingClientRect();\n                var ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) \/ rect.width));\n                if (modalVideo && modalVideo.duration) { modalVideo.currentTime = ratio * modalVideo.duration; }\n            });\n        }\n\n        \/* \u2500\u2500 Eventos de Tarjetas \u2500\u2500 *\/\n        var cards = document.querySelectorAll('.ppv2-card');\n        cards.forEach(function(card){\n            var playBtn = card.querySelector('.js-ppv2-play');\n            var poster  = card.querySelector('.js-ppv2-poster');\n            var caseData = {\n                video_url  : card.getAttribute('data-video')  || '',\n                poster_url : card.getAttribute('data-poster') || '',\n                cliente    : card.getAttribute('data-cliente')|| '',\n                badge_text : card.getAttribute('data-badge')  || '',\n                desc       : card.getAttribute('data-desc')   || '',\n                site_url   : card.getAttribute('data-site')   || '#',\n            };\n\n            function triggerModal(e) { if (e) { e.stopPropagation(); e.preventDefault(); } openModal(caseData); }\n            if (poster)  poster.addEventListener('click', triggerModal);\n            if (playBtn) playBtn.addEventListener('click', triggerModal);\n            card.addEventListener('click', function(e){\n                if (e.target.closest('.ppv2-site-btn') || e.target.closest('.js-ppv2-play') || e.target.closest('.js-ppv2-poster')) return;\n                openModal(caseData);\n            });\n        });\n\n        \/* \u2500\u2500 Flechas de navegaci\u00f3n m\u00f3vil \u2500\u2500 *\/\n        var track    = document.getElementById('ppv2-track');\n        var prevBtn  = document.getElementById('ppv2-prev');\n        var nextBtn  = document.getElementById('ppv2-next');\n        var dots     = document.querySelectorAll('.ppv2-dot');\n        var cardList = track ? track.querySelectorAll('.ppv2-card') : [];\n        var total    = cardList.length;\n        var MQ       = window.matchMedia('(max-width: 660px)');\n\n        function isMobile() { return MQ.matches; }\n\n        function getVisibleIndex() {\n            if (!track || total === 0) return 0;\n            var trackRect = track.getBoundingClientRect();\n            var center    = trackRect.left + trackRect.width \/ 2;\n            var best = 0, bestDist = Infinity;\n            for (var i = 0; i < total; i++) {\n                var r    = cardList[i].getBoundingClientRect();\n                var dist = Math.abs(r.left + r.width \/ 2 - center);\n                if (dist < bestDist) { bestDist = dist; best = i; }\n            }\n            return best;\n        }\n\n        function scrollToIndex(index) {\n            if (!track || !cardList[index]) return;\n            var card      = cardList[index];\n            var trackLeft = track.getBoundingClientRect().left;\n            var cardLeft  = card.getBoundingClientRect().left;\n            var offset    = track.scrollLeft + (cardLeft - trackLeft) - (track.clientWidth \/ 2 - card.offsetWidth \/ 2);\n            track.scrollTo({ left: offset, behavior: 'smooth' });\n        }\n\n        function updateUI(idx) {\n            if(prevBtn) prevBtn.disabled = (idx <= 0);\n            if(nextBtn) nextBtn.disabled = (idx >= total - 1);\n            dots.forEach(function(d, i){ d.classList.toggle('active', i === idx); });\n        }\n\n        if (track) {\n            var scrollTimer;\n            track.addEventListener('scroll', function(){\n                clearTimeout(scrollTimer);\n                scrollTimer = setTimeout(function(){ if (isMobile()) updateUI(getVisibleIndex()); }, 80);\n            }, { passive: true });\n        }\n\n        if (prevBtn) prevBtn.addEventListener('click', function(){ if (!isMobile()) return; var idx = Math.max(0, getVisibleIndex() - 1); scrollToIndex(idx); updateUI(idx); });\n        if (nextBtn) nextBtn.addEventListener('click', function(){ if (!isMobile()) return; var idx = Math.min(total - 1, getVisibleIndex() + 1); scrollToIndex(idx); updateUI(idx); });\n        dots.forEach(function(dot, i){ dot.addEventListener('click', function(){ if (!isMobile()) return; scrollToIndex(i); updateUI(i); }); });\n        updateUI(0);\n\n    })();\n    <\/script>\n\n    \n\n\n    <!-- Google Fonts \u2014 Sistema de Marca Lafao V1.0 -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n    <!-- ===== SERVICIOS PREMIUM SECTION ===== -->\n    <style>\n    \/* ---- Variables \u2014 Sistema Lafao V1.0 ---- *\/\n    .sp-section {\n        --lf-orange:      #FF7A00;\n        --lf-orange-deep: #FE5A03;\n        --lf-blue:        #1B8FF5;\n        --lf-blue-deep:   #0560CE;\n        --lf-ink:         #0E1A2B;\n        --lf-slate:       #5A6779;\n        --lf-mist:        #E7ECF2;\n        --lf-bone:        #F7F8FA;\n        --lf-pure:        #FFFFFF;\n        --lf-gradient:    linear-gradient(90deg, var(--lf-orange), var(--lf-blue));\n\n        --sp-font-display: 'Sora', sans-serif;\n        --sp-font-body:    'Inter', sans-serif;\n    }\n\n    \/* ---- Reset ---- *\/\n    .sp-section *,\n    .sp-section *::before,\n    .sp-section *::after {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n\n    \/* ---- Wrapper full-width ---- *\/\n    .sp-section {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        background: linear-gradient(160deg, var(--lf-bone) 0%, var(--lf-pure) 40%, var(--lf-bone) 100%);\n        font-family: var(--sp-font-body);\n        padding: 130px 20px 70px;\n        overflow: hidden;\n    }\n\n    \/* ---- Background decorations ---- *\/\n    .sp-bg-shape {\n        position: absolute;\n        bottom: -32px; \/* Apunta exactamente al centro del punto azul *\/\n        left: 50%;\n        transform: translateX(-50%);\n        width: 780px;\n        height: 440px;\n        pointer-events: none;\n        z-index: -1;\n    }\n\n    \/* ---- Dots decorativos ---- *\/\n    .sp-dots {\n        position: absolute;\n        top: 60px;\n        right: 60px;\n        display: grid;\n        grid-template-columns: repeat(8, 10px);\n        grid-template-rows: repeat(5, 10px);\n        gap: 8px;\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    .sp-dot {\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        background: rgba(27, 143, 245, 0.22);\n    }\n\n    \/* ---- Header ---- *\/\n    .sp-header {\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        margin-bottom: 24px;\n        animation: sp-fadeUp .7s .05s ease both;\n    }\n\n    \/* Badge \u2014 Etiqueta t\u00e9cnica *\/\n    .sp-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        background: rgba(255, 255, 255, 0.85);\n        backdrop-filter: blur(8px);\n        border: 1px solid rgba(27, 143, 245, 0.25);\n        color: var(--lf-ink);\n        font-family: 'JetBrains Mono', monospace, 'Inter', sans-serif;\n        font-size: 12px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        padding: 6px 16px;\n        border-radius: 100px;\n        margin-bottom: 28px;\n    }\n\n    .sp-badge::before {\n        content: '\u2014';\n        color: var(--lf-orange);\n        font-weight: 700;\n    }\n\n    \/* T\u00edtulo \u2014 Sora *\/\n    .sp-title {\n        font-family: var(--sp-font-display);\n        font-size: clamp(2.6rem, 5.5vw, 4rem);\n        font-weight: 900;\n        color: var(--lf-ink);\n        line-height: 1.1;\n        letter-spacing: -0.02em;\n        margin-bottom: 12px;\n        animation: sp-fadeUp .75s .15s ease both;\n    }\n\n    .sp-title .sp-highlight {\n        color: var(--lf-orange);\n        position: relative;\n        display: inline-block;\n    }\n\n    \/* Subt\u00edtulo \u2014 Inter *\/\n    .sp-subtitle {\n        font-family: var(--sp-font-body);\n        font-size: clamp(.95rem, 2vw, 1.05rem);\n        font-weight: 400;\n        color: var(--lf-slate);\n        line-height: 1.75;\n        max-width: 480px;\n        margin: 14px auto 0;\n        animation: sp-fadeUp .75s .28s ease both;\n    }\n\n    \/* ---- Connector Lines SVG ---- *\/\n    .sp-connector {\n        display: block;\n        margin: 0 auto;\n        position: relative;\n        z-index: 1;\n        width: 100%;\n        max-width: 1160px;\n        height: 70px;\n        overflow: visible;\n    }\n\n    \/* ---- Cards grid ---- *\/\n    .sp-grid {\n        position: relative;\n        z-index: 1;\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 22px;\n        max-width: 1160px;\n        margin: 0 auto;\n        animation: sp-fadeUp .75s .42s ease both;\n    }\n\n    \/* ---- Card ---- *\/\n    .sp-card {\n        background: rgba(255,255,255,.92);\n        backdrop-filter: blur(6px);\n        border-radius: 20px;\n        box-shadow: 0 4px 28px rgba(14, 26, 43, 0.06);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        border: 1px solid var(--lf-mist);\n        transition: box-shadow .28s ease;\n    }\n\n    .sp-card:hover {\n        box-shadow: 0 16px 48px rgba(14, 26, 43, 0.12);\n    }\n\n    \/* Tarjeta popular: Borde Naranja *\/\n    .sp-card.sp-popular {\n        border: 2px solid var(--lf-orange);\n        box-shadow: 0 8px 40px rgba(255, 122, 0, 0.15);\n    }\n\n    \/* Icono flotante sobre imagen *\/\n    .sp-icon-wrap {\n        \/* Ya no es absoluto, se posiciona con flexbox *\/\n        position: static;\n        margin-right: 10px; \/* Espacio entre el icono y el t\u00edtulo *\/\n        flex-shrink: 0; \/* Evita que el icono se encoja *\/\n        width: 46px;\n        height: 46px;\n        background: #fff;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 4px 18px rgba(27, 143, 245, 0.1);\n        z-index: 3;\n        border: 1.5px solid rgba(27, 143, 245, 0.2);\n    }\n\n    .sp-icon-wrap svg {\n        width: 22px;\n        height: 22px;\n        stroke: var(--lf-blue);\n    }\n\n    \/* Nuevo contenedor para el icono y el t\u00edtulo *\/\n    .sp-card-title-group {\n        display: flex;\n        align-items: center;\n        gap: 10px; \/* Espacio entre el icono y el t\u00edtulo *\/\n        margin-bottom: 10px; \/* Espacio debajo del grupo de t\u00edtulo *\/\n    }\n\n    \/* Image wrapper *\/\n    .sp-img-wrap {\n        position: relative;\n        width: 100%;\n        height: 195px;\n        overflow: hidden;\n        border-radius: 20px 20px 0 0; \/* Asegura que la imagen tenga las esquinas superiores redondeadas *\/\n    }\n\n    .sp-img-wrap img,\n    .sp-img-wrap .sp-card-img-svg {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform .4s ease;\n    }\n\n    .sp-card:hover .sp-img-wrap img,\n    .sp-card:hover .sp-img-wrap .sp-card-img-svg {\n        transform: scale(1.05);\n    }\n\n    \/* Gradient fade bottom *\/\n    .sp-img-fade {\n        position: absolute;\n        bottom: 0; left: 0; right: 0;\n        height: 60px;\n        background: linear-gradient(to bottom, transparent, #fff);\n        pointer-events: none;\n        white-space: nowrap; \/* Fuerza a que el texto no baje a una segunda l\u00ednea *\/\n    }\n\n    \/* Card body *\/\n    .sp-body {\n        padding: 22px 22px 22px;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n    }\n\n    \/* T\u00edtulo tarjeta \u2014 Sora *\/\n    .sp-card-title {\n        font-family: var(--sp-font-display);\n        font-size: 1.25rem;\n        font-weight: 700;\n        color: var(--lf-ink);\n        margin-bottom: 0; \/* El espaciado ahora lo controla .sp-card-title-group *\/\n        line-height: 1.25;\n        letter-spacing: -.01em;\n    }\n\n    .sp-divider {\n        width: 36px;\n        height: 3px;\n        border-radius: 2px;\n        margin-left: 5px; \/* Centra la l\u00ednea exactamente debajo del icono (46px) *\/\n        margin-bottom: 13px;\n    }\n\n    \/* Descripci\u00f3n \u2014 Inter *\/\n    .sp-card-desc {\n        font-family: var(--sp-font-body);\n        font-size: .88rem;\n        font-weight: 400;\n        color: var(--lf-slate);\n        line-height: 1.7;\n        flex: 1;\n        margin-bottom: 22px;\n    }\n\n    \/* \u2500\u2500 Botones \u2500\u2500 *\/\n    .sp-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        font-family: var(--sp-font-body);\n        font-size: 1rem;\n        font-weight: 600;\n        border-radius: 12px;\n        padding: 13px 22px;\n        text-decoration: none;\n        cursor: pointer;\n        transition: all .3s ease;\n        border: none;\n        outline: none;\n        width: 100%;\n    }\n\n    \/* Outline \u2014 Ghost *\/\n    .sp-btn-outline {\n        background: transparent;\n        color: var(--lf-ink);\n        border: 1px solid var(--lf-ink);\n    }\n\n    .sp-btn-outline::after {\n        content: '\u203a';\n        font-size: 1.3rem;\n        line-height: 1;\n        transition: transform .2s ease;\n    }\n\n    .sp-btn-outline:hover,\n    .sp-btn-outline:active {\n        border-color: var(--lf-blue);\n        color: var(--lf-pure);\n        background: var(--lf-blue);\n        transform: none;\n    }\n\n    .sp-btn-outline:hover::after,\n    .sp-btn-outline:active::after {\n        transform: translateX(4px);\n    }\n\n    \/* S\u00f3lido \u2014 Naranja Lafao (Tarjeta Popular) *\/\n    .sp-btn-solid {\n        background: var(--lf-orange);\n        color: var(--lf-pure);\n        box-shadow: 0 4px 24px rgba(255, 122, 0, 0.25);\n    }\n\n    .sp-btn-solid:hover {\n        background: var(--lf-orange-deep);\n        color: var(--lf-pure);\n        box-shadow: 0 8px 32px rgba(254, 90, 3, 0.35);\n        transform: translateY(-2px);\n    }\n\n    .sp-btn-solid svg {\n        width: 18px; height: 18px;\n        transition: transform 0.3s ease;\n    }\n\n    .sp-btn-solid:hover svg {\n        transform: translateX(4px);\n    }\n\n    \/* ---- Badge \"M\u00e1s popular\" en Tarjeta ---- *\/\n    .sp-tag-popular {\n        position: absolute;\n        top: 0;\n        left: 50%;\n        transform: translateX(-50%);\n        background: var(--lf-orange);\n        color: #fff;\n        font-family: var(--sp-font-body);\n        font-size: .7rem;\n        font-weight: 700;\n        padding: 5px 18px;\n        border-radius: 0 0 12px 12px;\n        text-transform: uppercase;\n        letter-spacing: .06em;\n        z-index: 10;\n        box-shadow: 0 4px 12px rgba(255,122,0,.3);\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        pointer-events: none;\n        white-space: nowrap; \/* Fuerza a que el texto siempre est\u00e9 en 1 sola l\u00ednea *\/\n    }\n\n    .sp-tag-popular svg {\n        width: 12px;\n        height: 12px;\n    }\n\n    \/* ---- CTA link inferior ---- *\/\n    .sp-footer-cta {\n        position: relative;\n        z-index: 1;\n        margin-top: 52px;\n        display: flex;\n        justify-content: center;\n        animation: sp-fadeUp .75s .62s ease both;\n    }\n\n    .sp-cta-link {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        color: var(--lf-ink);\n        font-family: var(--sp-font-body);\n        font-size: 1.05rem;\n        font-weight: 600;\n        text-decoration: none;\n        padding-bottom: 4px;\n        border-bottom: 2px solid rgba(14, 26, 43, 0.2);\n        transition: color 0.3s ease, border-color 0.3s ease;\n    }\n\n    .sp-cta-link:hover {\n        color: var(--lf-orange);\n        border-bottom-color: var(--lf-orange);\n    }\n\n    .sp-cta-link svg {\n        width: 20px;\n        height: 20px;\n        transition: transform 0.2s;\n    }\n\n    .sp-cta-link:hover svg {\n        transform: translateX(6px);\n    }\n\n    \/* ---- Keyframes ---- *\/\n    @keyframes sp-fadeUp {\n        from { opacity: 0; transform: translateY(18px); }\n        to   { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* ---- Responsive ---- *\/\n    @media (max-width: 1024px) {\n        .sp-grid {\n            grid-template-columns: repeat(2, 1fr);\n            max-width: 720px;\n        }\n        .sp-connector { display: none; }\n    }\n\n    @media (max-width: 580px) {\n        .sp-grid {\n            grid-template-columns: 1fr;\n            max-width: 400px;\n        }\n        .sp-dots { display: none; }\n        .sp-bg-shape { display: none; }\n    }\n    <\/style>\n\n    <section class=\"sp-section\">\n\n        <!-- Background decorations -->\n\n        <div class=\"sp-dots\">\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                            <div class=\"sp-dot\"><\/div>\n                    <\/div>\n\n        <!-- Header -->\n        <div class=\"sp-header\">\n            <svg class=\"sp-bg-shape\" viewBox=\"0 0 780 440\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M 390 436 C 390 425, 360 410, 100 400 C 0 380, 0 20, 390 20 C 780 20, 780 380, 680 400 C 420 410, 390 425, 390 436 Z\" stroke=\"rgba(27, 143, 245, 0.18)\" stroke-width=\"1.5\"\/>\n            <\/svg>\n            <div class=\"sp-badge\">Servicios Premium<\/div>\n            <h2 class=\"sp-title\">\n                Lo que construimos<br>\n                <span class=\"sp-highlight\">para ti<\/span>\n            <\/h2>\n            <p class=\"sp-subtitle\">Cada proyecto incluye panel de administraci\u00f3n, versi\u00f3n m\u00f3vil y 30 d\u00edas de soporte t\u00e9cnico especializado.<\/p>\n        <\/div>\n\n        <!-- Connector SVG -->\n        <svg class=\"sp-connector\" viewBox=\"0 0 1160 70\" preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <circle cx=\"580\" cy=\"8\" r=\"6\" fill=\"var(--lf-blue)\"\/>\n            <path d=\"M580 8 Q580 55 148 70\"  stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.4\"\/>\n            <path d=\"M580 8 Q580 55 435 70\"  stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.4\"\/>\n            <path d=\"M580 8 Q580 55 725 70\"  stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.4\"\/>\n            <path d=\"M580 8 Q580 55 1012 70\" stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.4\"\/>\n        <\/svg>\n\n        <!-- Cards -->\n        <div class=\"sp-grid\">\n\n            <!-- Card 1: Web de negocio -->\n            <div class=\"sp-card\">\n                <div class=\"sp-img-wrap\">\n                    <svg class=\"sp-card-img-svg\" viewBox=\"0 0 300 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"300\" height=\"160\" fill=\"#F7F8FA\"\/>\n                        <rect x=\"20\" y=\"16\" width=\"260\" height=\"130\" rx=\"10\" fill=\"white\" opacity=\"0.9\"\/>\n                        <rect x=\"20\" y=\"16\" width=\"260\" height=\"28\" rx=\"10\" fill=\"#E7ECF2\"\/>\n                        <rect x=\"20\" y=\"32\" width=\"260\" height=\"12\" fill=\"#E7ECF2\"\/>\n                        <circle cx=\"36\" cy=\"30\" r=\"5\" fill=\"#FF6B6B\" opacity=\"0.8\"\/>\n                        <circle cx=\"52\" cy=\"30\" r=\"5\" fill=\"#FFD93D\" opacity=\"0.8\"\/>\n                        <circle cx=\"68\" cy=\"30\" r=\"5\" fill=\"#6BCB77\" opacity=\"0.8\"\/>\n                        <rect x=\"90\" y=\"23\" width=\"130\" height=\"14\" rx=\"7\" fill=\"white\" opacity=\"0.8\"\/>\n                        <rect x=\"36\" y=\"56\" width=\"228\" height=\"6\" rx=\"3\" fill=\"#D6EBFF\" opacity=\"0.8\"\/>\n                        <rect x=\"36\" y=\"72\" width=\"100\" height=\"12\" rx=\"3\" fill=\"#1B8FF5\" opacity=\"0.8\"\/>\n                        <rect x=\"36\" y=\"90\" width=\"160\" height=\"6\" rx=\"3\" fill=\"#D6EBFF\" opacity=\"0.7\"\/>\n                        <rect x=\"36\" y=\"102\" width=\"140\" height=\"6\" rx=\"3\" fill=\"#D6EBFF\" opacity=\"0.5\"\/>\n                        <rect x=\"36\" y=\"118\" width=\"60\" height=\"20\" rx=\"8\" fill=\"#1B8FF5\" opacity=\"0.9\"\/>\n                        <rect x=\"178\" y=\"70\" width=\"86\" height=\"68\" rx=\"8\" fill=\"#D6EBFF\" opacity=\"0.5\"\/>\n                        <rect x=\"190\" y=\"82\" width=\"62\" height=\"4\" rx=\"2\" fill=\"#25AEFC\"\/>\n                        <rect x=\"190\" y=\"92\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#25AEFC\" opacity=\"0.6\"\/>\n                        <circle cx=\"210\" cy=\"114\" r=\"12\" fill=\"#D6EBFF\" opacity=\"0.8\"\/>\n                        <polyline points=\"186,130 200,118 215,124 230,110 245,122 260,108\" stroke=\"#1B8FF5\" stroke-width=\"2\" fill=\"none\" opacity=\"0.6\"\/>\n                    <\/svg>\n                    <div class=\"sp-img-fade\"><\/div>\n                <\/div>\n                <div class=\"sp-body\">\n                    <div class=\"sp-card-title-group\">\n                        <div class=\"sp-icon-wrap\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                                <path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20\"\/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"sp-card-title\">Web de negocio<\/h3>\n                    <\/div>\n                    <div class=\"sp-divider\" style=\"background: var(--lf-gradient) !important;\"><\/div>\n                    <p class=\"sp-card-desc\">Tu primera vendedora disponible las 24 horas. Una web que no solo se ve bien \u2014 trabaja por ti mientras duermes.<\/p>\n                    <a href=\"https:\/\/lafao.dev\/servicios\/#web\" class=\"sp-btn sp-btn-outline\">\u00bfQu\u00e9 incluye?<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Card 2: Tienda online -->\n            <div class=\"sp-card\">\n                <div class=\"sp-img-wrap\">\n                    <svg class=\"sp-card-img-svg\" viewBox=\"0 0 300 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"300\" height=\"160\" fill=\"#F7F8FA\"\/>\n                        <rect x=\"20\" y=\"12\" width=\"260\" height=\"136\" rx=\"10\" fill=\"white\" opacity=\"0.85\"\/>\n                        <rect x=\"20\" y=\"12\" width=\"260\" height=\"24\" rx=\"10\" fill=\"#E7ECF2\" opacity=\"0.9\"\/>\n                        <rect x=\"20\" y=\"24\" width=\"260\" height=\"12\" fill=\"#E7ECF2\" opacity=\"0.9\"\/>\n                        <rect x=\"34\" y=\"18\" width=\"50\" height=\"12\" rx=\"4\" fill=\"#FF9505\" opacity=\"0.7\"\/>\n                        <rect x=\"210\" y=\"18\" width=\"56\" height=\"12\" rx=\"6\" fill=\"white\"\/>\n                        <rect x=\"28\" y=\"46\" width=\"70\" height=\"80\" rx=\"8\" fill=\"#F7F8FA\"\/>\n                        <rect x=\"38\" y=\"54\" width=\"50\" height=\"44\" rx=\"6\" fill=\"#FFE6CC\" opacity=\"0.6\"\/>\n                        <rect x=\"38\" y=\"104\" width=\"36\" height=\"5\" rx=\"2\" fill=\"#FF7A00\" opacity=\"0.7\"\/>\n                        <rect x=\"38\" y=\"114\" width=\"26\" height=\"5\" rx=\"2\" fill=\"#FF9505\" opacity=\"0.5\"\/>\n                        <rect x=\"108\" y=\"46\" width=\"70\" height=\"80\" rx=\"8\" fill=\"#F7F8FA\"\/>\n                        <rect x=\"118\" y=\"54\" width=\"50\" height=\"44\" rx=\"6\" fill=\"#FFE6CC\" opacity=\"0.7\"\/>\n                        <rect x=\"118\" y=\"104\" width=\"36\" height=\"5\" rx=\"2\" fill=\"#FF7A00\" opacity=\"0.7\"\/>\n                        <rect x=\"118\" y=\"114\" width=\"26\" height=\"5\" rx=\"2\" fill=\"#FF9505\" opacity=\"0.5\"\/>\n                        <rect x=\"188\" y=\"46\" width=\"76\" height=\"80\" rx=\"8\" fill=\"#FF7A00\" opacity=\"0.08\"\/>\n                        <rect x=\"196\" y=\"52\" width=\"60\" height=\"52\" rx=\"6\" fill=\"#FFE6CC\" opacity=\"0.5\"\/>\n                        <rect x=\"196\" y=\"110\" width=\"36\" height=\"5\" rx=\"2\" fill=\"#FF7A00\" opacity=\"0.7\"\/>\n                        <rect x=\"196\" y=\"120\" width=\"26\" height=\"5\" rx=\"2\" fill=\"#FF9505\" opacity=\"0.5\"\/>\n                        <circle cx=\"258\" cy=\"21\" r=\"8\" fill=\"white\"\/>\n                        <text x=\"258\" y=\"25\" text-anchor=\"middle\" font-size=\"10\" fill=\"#FF7A00\">\ud83d\udecd<\/text>\n                        <circle cx=\"264\" cy=\"15\" r=\"4\" fill=\"#FF7A00\"\/>\n                        <text x=\"264\" y=\"18\" text-anchor=\"middle\" font-size=\"6\" fill=\"white\" font-weight=\"bold\">3<\/text>\n                    <\/svg>\n                    <div class=\"sp-img-fade\"><\/div>\n                <\/div>\n                <div class=\"sp-body\">\n                    <div class=\"sp-card-title-group\">\n                        <div class=\"sp-icon-wrap\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <circle cx=\"8\" cy=\"21\" r=\"1\"\/>\n                                <circle cx=\"19\" cy=\"21\" r=\"1\"\/>\n                                <path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\"\/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"sp-card-title\">Tienda online<\/h3>\n                    <\/div>\n                    <div class=\"sp-divider\" style=\"background: var(--lf-gradient) !important;\"><\/div>\n                    <p class=\"sp-card-desc\">Abre tu negocio al mundo sin intermediarios. Gestiona pagos, productos y clientes desde un solo lugar.<\/p>\n                    <a href=\"https:\/\/lafao.dev\/servicios\/#tienda\" class=\"sp-btn sp-btn-outline\">\u00bfQu\u00e9 incluye?<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Card 3: Landing page (POPULAR) -->\n            <div class=\"sp-card sp-popular\">\n                <div class=\"sp-tag-popular\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/>\n                    <\/svg>\n                    M\u00c1S POPULAR\n                <\/div>\n                <div class=\"sp-img-wrap\">\n                    <svg class=\"sp-card-img-svg\" viewBox=\"0 -30 300 202\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <defs>\n                            <linearGradient id=\"featGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n                                <stop offset=\"0%\" stop-color=\"#FFE6CC\"\/>\n                                <stop offset=\"100%\" stop-color=\"#FFFFFF\"\/>\n                            <\/linearGradient>\n                            <linearGradient id=\"barGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                                <stop offset=\"0%\" stop-color=\"#FF9505\"\/>\n                                <stop offset=\"100%\" stop-color=\"#FF7A00\"\/>\n                            <\/linearGradient>\n                        <\/defs>\n                        <!-- Fondo expandido hacia arriba para dar espacio a la etiqueta -->\n                        <rect x=\"0\" y=\"-30\" width=\"300\" height=\"202\" fill=\"url(#featGrad)\"\/>\n                        <rect x=\"30\" y=\"18\" width=\"180\" height=\"16\" rx=\"5\" fill=\"#FE5A03\" opacity=\"0.15\"\/>\n                        <rect x=\"30\" y=\"40\" width=\"240\" height=\"10\" rx=\"4\" fill=\"#FF7A00\" opacity=\"0.12\"\/>\n                        <rect x=\"30\" y=\"56\" width=\"200\" height=\"10\" rx=\"4\" fill=\"#FF7A00\" opacity=\"0.08\"\/>\n                        <rect x=\"30\" y=\"76\" width=\"90\" height=\"26\" rx=\"13\" fill=\"url(#barGrad)\" opacity=\"0.9\"\/>\n                        <rect x=\"130\" y=\"76\" width=\"70\" height=\"26\" rx=\"13\" fill=\"none\" stroke=\"#FF7A00\" stroke-width=\"1.5\" opacity=\"0.4\"\/>\n                        <rect x=\"24\" y=\"116\" width=\"252\" height=\"44\" rx=\"10\" fill=\"white\" opacity=\"0.7\"\/>\n                        <rect x=\"34\" y=\"126\" width=\"18\" height=\"24\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.7\"\/>\n                        <rect x=\"58\" y=\"132\" width=\"18\" height=\"18\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.5\"\/>\n                        <rect x=\"82\" y=\"122\" width=\"18\" height=\"28\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.8\"\/>\n                        <rect x=\"106\" y=\"128\" width=\"18\" height=\"22\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.6\"\/>\n                        <rect x=\"130\" y=\"118\" width=\"18\" height=\"32\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.9\"\/>\n                        <rect x=\"154\" y=\"124\" width=\"18\" height=\"26\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.7\"\/>\n                        <rect x=\"178\" y=\"120\" width=\"18\" height=\"30\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.85\"\/>\n                        <rect x=\"202\" y=\"126\" width=\"18\" height=\"24\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.65\"\/>\n                        <rect x=\"226\" y=\"116\" width=\"18\" height=\"34\" rx=\"3\" fill=\"url(#barGrad)\" opacity=\"0.95\"\/>\n                        <rect x=\"186\" y=\"72\" width=\"88\" height=\"36\" rx=\"10\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"196\" y=\"88\" font-family=\"sans-serif\" font-size=\"9\" fill=\"#FE5A03\" font-weight=\"700\" opacity=\"0.9\">Conversion<\/text>\n                        <text x=\"196\" y=\"101\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#FF7A00\" font-weight=\"800\" opacity=\"0.9\">+340%<\/text>\n                    <\/svg>\n                    <div class=\"sp-img-fade\"><\/div>\n                <\/div>\n                <div class=\"sp-body\">\n                    <div class=\"sp-card-title-group\">\n                        <div class=\"sp-icon-wrap\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"var(--lf-orange)\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 19v-6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2zm6 0v-9a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2zm5 0V8a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2z\"\/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"sp-card-title\">Landing page<\/h3>\n                    <\/div>\n                    <div class=\"sp-divider\" style=\"background: var(--lf-gradient) !important;\"><\/div>\n                    <p class=\"sp-card-desc\">Transformamos el tr\u00e1fico existente en ventas reales. Cada visita tiene una raz\u00f3n para quedarse \u2014 y una raz\u00f3n para comprar.<\/p>\n                    <a href=\"https:\/\/lafao.dev\/servicios\/#landing\" class=\"sp-btn sp-btn-solid\">\n                        \u00bfQu\u00e9 incluye?\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"><\/path><path d=\"m12 5 7 7-7 7\"><\/path><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Card 4: Sistema reservas -->\n            <div class=\"sp-card\">\n                <div class=\"sp-img-wrap\">\n                    <svg class=\"sp-card-img-svg\" viewBox=\"0 0 300 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"300\" height=\"160\" fill=\"#F7F8FA\"\/>\n                        <rect x=\"20\" y=\"14\" width=\"150\" height=\"132\" rx=\"10\" fill=\"white\" opacity=\"0.9\"\/>\n                        <rect x=\"20\" y=\"14\" width=\"150\" height=\"28\" rx=\"10\" fill=\"#D6EBFF\" opacity=\"0.9\"\/>\n                        <rect x=\"20\" y=\"30\" width=\"150\" height=\"12\" fill=\"#D6EBFF\" opacity=\"0.9\"\/>\n                        <text x=\"95\" y=\"32\" text-anchor=\"middle\" font-family=\"sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#1B8FF5\">Abril 2025<\/text>\n                        <text x=\"33\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Lu<\/text>\n                        <text x=\"52\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Ma<\/text>\n                        <text x=\"71\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Mi<\/text>\n                        <text x=\"89\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Ju<\/text>\n                        <text x=\"107\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Vi<\/text>\n                        <text x=\"124\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Sa<\/text>\n                        <text x=\"141\" y=\"52\" font-size=\"8\" fill=\"#25AEFC\" font-family=\"sans-serif\">Do<\/text>\n                        <text x=\"33\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">1<\/text>\n                        <text x=\"52\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">2<\/text>\n                        <text x=\"71\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">3<\/text>\n                        <text x=\"89\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">4<\/text>\n                        <text x=\"107\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">5<\/text>\n                        <text x=\"124\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">6<\/text>\n                        <text x=\"141\" y=\"68\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">7<\/text>\n                        <circle cx=\"75\" cy=\"82\" r=\"10\" fill=\"#1B8FF5\" opacity=\"0.9\"\/>\n                        <text x=\"75\" y=\"86\" text-anchor=\"middle\" font-size=\"9\" fill=\"white\" font-family=\"sans-serif\" font-weight=\"bold\">10<\/text>\n                        <text x=\"33\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">8<\/text>\n                        <text x=\"52\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">9<\/text>\n                        <text x=\"89\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">11<\/text>\n                        <text x=\"107\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">12<\/text>\n                        <text x=\"124\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">13<\/text>\n                        <text x=\"141\" y=\"86\" font-size=\"9\" fill=\"#374151\" font-family=\"sans-serif\">14<\/text>\n                        <rect x=\"28\" y=\"100\" width=\"114\" height=\"14\" rx=\"5\" fill=\"#D6EBFF\"\/>\n                        <text x=\"36\" y=\"111\" font-size=\"9\" fill=\"#1B8FF5\" font-family=\"sans-serif\" font-weight=\"600\">9:00 AM \u2014 Disponible<\/text>\n                        <rect x=\"28\" y=\"118\" width=\"114\" height=\"14\" rx=\"5\" fill=\"#D6EBFF\" opacity=\"0.6\"\/>\n                        <text x=\"36\" y=\"129\" font-size=\"9\" fill=\"#0560CE\" font-family=\"sans-serif\" font-weight=\"600\">11:00 AM \u2014 Ocupado<\/text>\n                        <rect x=\"182\" y=\"14\" width=\"98\" height=\"132\" rx=\"10\" fill=\"white\" opacity=\"0.85\"\/>\n                        <rect x=\"192\" y=\"26\" width=\"78\" height=\"10\" rx=\"4\" fill=\"#D6EBFF\"\/>\n                        <rect x=\"192\" y=\"42\" width=\"78\" height=\"36\" rx=\"6\" fill=\"#F7F8FA\"\/>\n                        <circle cx=\"206\" cy=\"60\" r=\"10\" fill=\"#D6EBFF\"\/>\n                        <rect x=\"220\" y=\"52\" width=\"40\" height=\"5\" rx=\"2\" fill=\"#25AEFC\" opacity=\"0.7\"\/>\n                        <rect x=\"220\" y=\"62\" width=\"30\" height=\"5\" rx=\"2\" fill=\"#D6EBFF\" opacity=\"0.5\"\/>\n                        <rect x=\"192\" y=\"84\" width=\"78\" height=\"36\" rx=\"6\" fill=\"#F7F8FA\"\/>\n                        <circle cx=\"206\" cy=\"102\" r=\"10\" fill=\"#25AEFC\" opacity=\"0.7\"\/>\n                        <rect x=\"220\" y=\"94\" width=\"40\" height=\"5\" rx=\"2\" fill=\"#25AEFC\" opacity=\"0.7\"\/>\n                        <rect x=\"220\" y=\"104\" width=\"30\" height=\"5\" rx=\"2\" fill=\"#D6EBFF\" opacity=\"0.5\"\/>\n                        <rect x=\"192\" y=\"126\" width=\"78\" height=\"14\" rx=\"6\" fill=\"#1B8FF5\" opacity=\"0.85\"\/>\n                        <text x=\"231\" y=\"136\" text-anchor=\"middle\" font-size=\"9\" fill=\"white\" font-family=\"sans-serif\" font-weight=\"700\">Confirmar<\/text>\n                    <\/svg>\n                    <div class=\"sp-img-fade\"><\/div>\n                <\/div>\n                <div class=\"sp-body\">\n                    <div class=\"sp-card-title-group\">\n                        <div class=\"sp-icon-wrap\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"sp-card-title\">Sistema de reservas<\/h3>\n                    <\/div>\n                    <div class=\"sp-divider\" style=\"background: var(--lf-gradient) !important;\"><\/div>\n                    <p class=\"sp-card-desc\">Deja de perder clientes por falta de respuesta. Tu agenda trabaja sola \u2014 t\u00fa solo confirmas.<\/p>\n                    <a href=\"https:\/\/lafao.dev\/servicios\/#reservas\" class=\"sp-btn sp-btn-outline\">\u00bfQu\u00e9 incluye?<\/a>\n                <\/div>\n            <\/div>\n\n        <\/div><!-- \/.sp-grid -->\n\n        <!-- Enlace a medida -->\n        <div class=\"sp-footer-cta\">\n            <a href=\"https:\/\/lafao.dev\/servicios\/#a-medida\" class=\"sp-cta-link\" aria-label=\"Cotizar proyecto a medida\">\n                \u00bfTienes una idea diferente?\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline>\n                <\/svg>\n            <\/a>\n        <\/div>\n\n    <\/section><!-- \/.sp-section -->\n    \n\n\n    <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700&display=swap');\n\n    .cta-section *, .cta-section *::before, .cta-section *::after {\n        box-sizing: border-box; margin: 0; padding: 0;\n    }\n\n    .cta-section {\n        width: 100vw;\n        max-width: 100vw;\n        position: relative;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #f8faff;\n        font-family: 'Inter', sans-serif;\n        padding: 70px 20px;\n        overflow: hidden;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        z-index: 1;\n    }\n\n    .cta-top-divider {\n        width: 100%;\n        height: 1px;\n        background: rgba(41, 121, 255, 0.1);\n        margin-bottom: 0;\n    }\n\n    \/* ---- Decoraciones de Fondo ---- *\/\n    .cta-dot-matrix {\n        position: absolute;\n        width: 80px;\n        height: 80px;\n        background-image: radial-gradient(#d0d5ff 2px, transparent 2px);\n        background-size: 20px 20px;\n        z-index: 1; \/* Por encima de las l\u00edneas SVG, pero debajo del contenido *\/\n        opacity: 0.7;\n        pointer-events: none; \/* Evita que bloqueen clics en m\u00f3viles *\/\n    }\n    .cta-dot-matrix.left { top: 40px; left: 5%; }\n    .cta-dot-matrix.right { bottom: 40px; right: 5%; }\n\n    .cta-bg-lines-container {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0; \/* Al fondo del todo *\/\n        pointer-events: none;\n        display: flex; justify-content: center;\n        align-items: center;\n    }\n    .cta-bg-lines-svg {\n        width: 100%; max-width: 100%; height: 100%;\n    }\n\n    .cta-inner {\n        position: relative; \n        z-index: 2; \/* El contenido siempre arriba *\/\n        max-width: 640px;\n        margin: 0 auto;\n    }\n\n    \/* ---- Badge ---- *\/\n    .cta-badge {\n        display: inline-flex; align-items: center;\n        background-color: #fff; color: #2979FF;\n        padding: 8px 22px; border-radius: 50px;\n        font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;\n        border: 1px solid rgba(41, 121, 255, 0.2);\n        box-shadow: 0 4px 15px rgba(41, 121, 255, 0.08);\n        margin-bottom: 24px;\n        animation: cta-fadeUp .7s .05s ease both;\n    }\n    .cta-badge-dot {\n        width: 8px; height: 8px; border-radius: 50%;\n        background-color: #2979FF;\n        margin-right: 10px;\n        box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.2);\n        animation: cta-pulse-dot 2s infinite;\n    }\n\n    .cta-title {\n        font-family: 'Playfair Display', serif;\n        font-size: clamp(2.4rem, 5vw, 3.2rem);\n        font-weight: 700;\n        color: #1a1a2e;\n        line-height: 1.1;\n        letter-spacing: -0.5px;\n        margin-bottom: 18px;\n        animation: cta-fadeUp .75s .15s ease both;\n    }\n\n    .cta-subtitle {\n        font-family: 'Inter', sans-serif;\n        font-size: 1.05rem;\n        font-weight: 400;\n        color: #6a6c82;\n        line-height: 1.6;\n        max-width: 480px;\n        margin: 0 auto 35px;\n        animation: cta-fadeUp .75s .28s ease both;\n    }\n\n    .cta-buttons {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 14px;\n        flex-wrap: wrap;\n        animation: cta-fadeUp .75s .42s ease both;\n    }\n\n    .cta-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        font-family: 'Inter', sans-serif;\n        font-size: .95rem;\n        font-weight: 600;\n        border-radius: 50px;\n        padding: 14px 28px;\n        text-decoration: none;\n        cursor: pointer;\n        transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;\n        border: none; outline: none;\n    }\n\n    .cta-btn-primary {\n        background: #2979FF;\n        color: #ffffff !important;\n        box-shadow: 0 4px 20px rgba(41, 121, 255, 0.25);\n    }\n    .cta-btn-primary:hover {\n        background: #1a1a2e;\n        color: #ffffff !important;\n        transform: translateY(-2px);\n        box-shadow: 0 8px 30px rgba(26, 26, 46, 0.32);\n    }\n    .cta-btn-primary .cta-arrow { transition: transform .2s ease; }\n    .cta-btn-primary:hover .cta-arrow { transform: translateX(5px); }\n\n    .cta-btn-secondary {\n        background: transparent;\n        color: #1a1a2e;\n        border: 1.5px solid rgba(26, 26, 46, 0.2);\n    }\n    .cta-btn-secondary:hover {\n        border-color: #2979FF;\n        color: #2979FF;\n        transform: translateY(-2px);\n        background: rgba(41, 121, 255, 0.05);\n    }\n\n    @keyframes cta-pulse-dot {\n        0% { box-shadow: 0 0 0 0 rgba(41, 121, 255, 0.4); }\n        70% { box-shadow: 0 0 0 6px rgba(41, 121, 255, 0); }\n        100% { box-shadow: 0 0 0 0 rgba(41, 121, 255, 0); }\n    }\n\n    @keyframes cta-fadeUp {\n        from { opacity: 0; transform: translateY(18px); }\n        to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @media (max-width: 580px) {\n        .cta-dot-matrix,\n        .cta-bg-lines-container { display: none; }\n        .cta-section { padding: 60px 16px 60px; }\n        .cta-buttons { flex-direction: column; align-items: stretch; }\n        .cta-btn { justify-content: center; }\n    }\n    <\/style>\n\n    <div class=\"cta-top-divider\"><\/div>\n\n    <section class=\"cta-section\">\n\n        <!-- Dots decorativos -->\n        <div class=\"cta-dot-matrix left\"><\/div>\n        <div class=\"cta-dot-matrix right\"><\/div>\n\n        <!-- Geometr\u00eda decorativa SVG -->\n        <div class=\"cta-bg-lines-container\">\n            <svg class=\"cta-bg-lines-svg\" viewBox=\"0 0 1440 300\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <!-- Geometr\u00eda Izquierda -->\n                <circle cx=\"150\" cy=\"150\" r=\"100\" stroke=\"#d0d5ff\" stroke-width=\"1.2\" fill=\"none\" opacity=\"0.7\" \/>\n                <circle cx=\"150\" cy=\"150\" r=\"140\" stroke=\"#d0d5ff\" stroke-width=\"1.2\" stroke-dasharray=\"6 6\" fill=\"none\" opacity=\"0.4\" \/>\n                <circle cx=\"150\" cy=\"150\" r=\"5\" fill=\"#2979FF\" \/>\n\n                <!-- Geometr\u00eda Derecha -->\n                <circle cx=\"1290\" cy=\"150\" r=\"100\" stroke=\"#d0d5ff\" stroke-width=\"1.2\" fill=\"none\" opacity=\"0.7\" \/>\n                <circle cx=\"1290\" cy=\"150\" r=\"140\" stroke=\"#d0d5ff\" stroke-width=\"1.2\" stroke-dasharray=\"6 6\" fill=\"none\" opacity=\"0.4\" \/>\n                <circle cx=\"1290\" cy=\"150\" r=\"5\" fill=\"#2979FF\" \/>\n            <\/svg>\n        <\/div>\n\n        <!-- Contenido -->\n        <div class=\"cta-inner\">\n\n            <h2 class=\"cta-title\">\u00bfTienes un proyecto en mente?<\/h2>\n\n            <p class=\"cta-subtitle\">\n                Cu\u00e9ntanoslo. Te diremos honestamente si podemos ayudarte \u2014 o no.\n            <\/p>\n\n            <div class=\"cta-buttons\">\n                <a href=\"https:\/\/lafao.dev\/contacto\/\" class=\"cta-btn cta-btn-primary\">\n                    Quiero saber si aplico <span class=\"cta-arrow\">\u2192<\/span>\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-377","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Desarrollo Web a Medida: P\u00e1ginas que Venden<\/title>\n<meta name=\"description\" content=\"Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lafao.dev\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:locale:alternate\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desarrollo Web a Medida: P\u00e1ginas que Venden\" \/>\n<meta property=\"og:description\" content=\"Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lafao.dev\/en\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T21:23:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lafao.dev\\\/\",\"url\":\"https:\\\/\\\/lafao.dev\\\/\",\"name\":\"Desarrollo Web a Medida: P\u00e1ginas que Venden\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lafao.dev\\\/#website\"},\"datePublished\":\"2026-04-26T18:02:59+00:00\",\"dateModified\":\"2026-05-13T21:23:12+00:00\",\"description\":\"Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lafao.dev\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lafao.dev\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lafao.dev\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/lafao.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inicio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/lafao.dev\\\/#website\",\"url\":\"https:\\\/\\\/lafao.dev\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/lafao.dev\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Desarrollo Web a Medida: P\u00e1ginas que Venden","description":"Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lafao.dev\/en\/","og_locale":"en_US","og_type":"article","og_title":"[:es]Desarrollo Web a Medida: P\u00e1ginas que Venden[:]","og_description":"[:es]Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.[:]","og_url":"https:\/\/lafao.dev\/en\/","article_modified_time":"2026-05-13T21:23:12+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lafao.dev\/","url":"https:\/\/lafao.dev\/","name":"Desarrollo Web a Medida: P\u00e1ginas que Venden","isPartOf":{"@id":"https:\/\/lafao.dev\/#website"},"datePublished":"2026-04-26T18:02:59+00:00","dateModified":"2026-05-13T21:23:12+00:00","description":"Desarrollamos sitios web a medida que generan ventas. Tiendas online y landing pages sin plantillas gen\u00e9ricas ni costos ocultos.","breadcrumb":{"@id":"https:\/\/lafao.dev\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lafao.dev\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lafao.dev\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/lafao.dev\/"},{"@type":"ListItem","position":2,"name":"Inicio"}]},{"@type":"WebSite","@id":"https:\/\/lafao.dev\/#website","url":"https:\/\/lafao.dev\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lafao.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages\/377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":27,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages\/377\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages\/377\/revisions\/445"}],"wp:attachment":[{"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/media?parent=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}