{"id":433,"date":"2026-05-02T17:54:52","date_gmt":"2026-05-02T17:54:52","guid":{"rendered":"https:\/\/lafao.dev\/?page_id=433"},"modified":"2026-05-13T21:36:19","modified_gmt":"2026-05-13T21:36:19","slug":"portafolio","status":"publish","type":"page","link":"https:\/\/lafao.dev\/en\/portafolio\/","title":{"rendered":"portafolio"},"content":{"rendered":"\n    <!-- ======================================================\n         ESTILOS CSS\n    ====================================================== -->\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@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n    <style>\n\n    \/* Variables globales \u2014 necesarias para que los botones de filtro conserven\n       su estilo cuando el wrapper se mueve a <body> en modo sticky *\/\n    :root {\n        --azul:       #2979FF;\n        --azul-hover: #1d4ed8;\n        --azul-light: #EFF6FF;\n        --azul-mid:   #DBEAFE;\n        --texto:      #0f172a;\n        --texto-2:    #1a1a2e;\n        --gris:       #64748b;\n        --borde:      #e2e8f0;\n        --blanco:     #ffffff;\n    }\n\n    \/* \u2500\u2500 Reset & Variables \u2500\u2500 *\/\n    .lf3-wrap *, .lf3-wrap *::before, .lf3-wrap *::after { box-sizing: border-box; }\n    .lf3-wrap a { text-decoration: none; }\n    .lf3-wrap button { font-family: inherit; }\n\n    .lf3-wrap {\n        --azul:        #2979FF;\n        --azul-hover:  #1d4ed8;\n        --azul-light:  #EFF6FF;\n        --azul-mid:    #DBEAFE;\n        --verde:       #16a34a;\n        --texto:       #0f172a;\n        --texto-2:     #1a1a2e;\n        --gris:        #64748b;\n        --gris-claro:  #f1f5f9;\n        --borde:       #e2e8f0;\n        --amarillo:    #f59e0b;\n        --blanco:      #ffffff;\n        --radio:       14px;\n        --radio-lg:    20px;\n        --radio-xl:    28px;\n        --sombra:      0 2px 16px rgba(30,41,59,.07);\n        --sombra-md:   0 4px 24px rgba(30,41,59,.09);\n        --sombra-lg:   0 8px 40px rgba(30,41,59,.13);\n\n        font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;\n        color: var(--texto);\n        background: #F2F5FC;\n        width: 100vw;\n        max-width: 100vw;\n        position: relative;\n        left: 50%;\n        transform: translateX(-50%);\n        overflow-x: hidden;\n    }\n\n    \/* \u2500\u2500 Fondo Global \u2500\u2500 *\/\n    .lf3-global-bg {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        overflow: hidden; z-index: 0; pointer-events: none;\n    }\n    .lf3-bg-shape { position: absolute; }\n    .lf3-bg-top-left  { top: 40px; left: -80px; width: 350px; height: 350px; }\n    .lf3-bg-top-right { top: 20px; right: -50px; width: 450px; height: 450px; }\n    .lf3-bg-dots {\n        position: absolute;\n        background-image: radial-gradient(#cad4eb 2px, transparent 2px);\n        background-size: 24px 24px; opacity: 0.8;\n    }\n    .lf3-dots-tr { top: 80px; right: 5%; width: 168px; height: 120px; }\n    .lf3-dots-ml { top: 450px; left: 3%; width: 96px; height: 168px; }\n    .lf3-dots-br { top: 580px; right: 2%; width: 120px; height: 96px; }\n\n    \/* \u2500\u2500 Container \u2500\u2500 *\/\n    .lf3-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }\n\n    \/* \u2500\u2500 Secciones \u2500\u2500 *\/\n    .lf3-section {\n        background: transparent; border-radius: 0;\n        padding: 40px 44px 50px; max-width: 1160px;\n        margin: 0 auto 24px; box-shadow: none;\n        position: relative; z-index: 2;\n    }\n    .lf3-section:last-of-type { margin-bottom: 0; }\n\n    .lf3-sections-wrap { padding: 80px 20px 48px; position: relative; z-index: 1; }\n\n    \/* \u2500\u2500 Badge \u2500\u2500 *\/\n    .lf3-badge {\n        display: inline-flex; align-items: center; gap: 8px;\n        background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px);\n        border: 1px solid rgba(27, 143, 245, 0.25);\n        color: var(--lf-ink) !important;\n        font-family: 'JetBrains Mono', monospace, 'Inter', sans-serif;\n        font-size: 12px; font-weight: 600; letter-spacing: 0.08em;\n        text-transform: uppercase; padding: 6px 16px; border-radius: 100px;\n        margin-bottom: 24px;\n    }\n    .lf3-badge::before { content: '\u2014'; color: var(--lf-orange); font-weight: 700; }\n    .lf3-badge-dot { display: none; }\n\n    \/* \u2500\u2500 Row titular \u2500\u2500 *\/\n    .lf3-section-row {\n        display: flex; align-items: center; justify-content: space-between;\n        flex-wrap: wrap; gap: 12px; margin-bottom: 28px;\n    }\n    .lf3-section-row h2, .lf3-section-row-top h2 {\n        font-family: 'Sora', sans-serif;\n        font-size: clamp(2.8rem, 5.5vw, 4.2rem);\n        font-weight: 700; line-height: 1.1; color: var(--lf-ink); margin: 0; letter-spacing: -0.02em;\n    }\n    .lf3-section-row h2 .accent, .lf3-section-row-top h2 .accent { color: #3b82f6; }\n\n    .lf3-section-link {\n        color: var(--azul); font-size: 14px; font-weight: 600;\n        display: inline-flex; align-items: center; gap: 5px;\n        transition: gap .2s; white-space: nowrap;\n    }\n    .lf3-section-link:hover { gap: 9px; color: var(--azul-hover); }\n\n    \/* \u2500\u2500 Row con filtros \u2500\u2500 *\/\n    .lf3-section-row-top {\n        display: flex; flex-direction: column; align-items: flex-start;\n        gap: 16px; margin-bottom: 28px; width: 100%;\n    }\n\n    \/* \u2500\u2500 Filtros \u2500\u2500 *\/\n    .lf3-filters-wrapper {\n        display: flex; align-items: center; gap: 12px; width: 100%;\n        max-width: 100%; overflow: hidden; position: relative;\n    }\n    .lf3-filters {\n        display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;\n        scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;\n        flex: 1; padding-bottom: 2px;\n    }\n    .lf3-filters::-webkit-scrollbar { display: none; }\n    .lf3-filter-btn {\n        padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 600;\n        cursor: pointer; border: 1.5px solid var(--borde);\n        background: var(--blanco); color: var(--texto-2);\n        transition: background 0.2s, border-color 0.2s, color 0.2s;\n        -webkit-tap-highlight-color: transparent; white-space: nowrap; flex-shrink: 0;\n    }\n    .lf3-filter-btn:hover { border-color: var(--azul); color: var(--azul); }\n    .lf3-filter-btn.active { background: var(--azul); border-color: var(--azul); color: var(--blanco); }\n\n    .lf3-filter-arrow {\n        display: flex; align-items: center; justify-content: center;\n        width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;\n        border: 1.5px solid rgba(41,121,255,0.25); background: #ffffff;\n        cursor: pointer; box-shadow: 0 2px 8px rgba(41,121,255,0.05);\n        transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.25s ease;\n        -webkit-tap-highlight-color: transparent; outline: none; z-index: 2;\n    }\n    .lf3-filter-arrow svg { width: 16px !important; height: 16px !important; stroke: #2979FF !important; fill: none !important; transition: stroke 0.22s ease; flex-shrink: 0; display: block; }\n    .lf3-filter-arrow svg path, .lf3-filter-arrow svg polyline { stroke: #2979FF !important; fill: none !important; }\n    .lf3-filter-arrow:hover:not(:disabled) { background: #FF7A00; border-color: #FF7A00; box-shadow: 0 4px 12px rgba(255,122,0,0.2); }\n    .lf3-filter-arrow:hover:not(:disabled) svg, .lf3-filter-arrow:hover:not(:disabled) svg path, .lf3-filter-arrow:hover:not(:disabled) svg polyline { stroke: #ffffff !important; }\n    .lf3-filter-arrow:active:not(:disabled) { transform: scale(0.95); }\n    .lf3-filter-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }\n\n    \/* \u2500\u2500 Grid de proyectos \u2500\u2500 *\/\n    .lf3-projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n\n    .lf3-project-card {\n        display: block; text-decoration: none;\n        position: relative; border-radius: var(--radio); overflow: hidden;\n        aspect-ratio: 4\/3; \n        background: linear-gradient(145deg, #0E1A2B 35%, rgba(255, 122, 0, 0.35) 100%); \n        cursor: pointer;\n        transition: transform 0.25s ease, box-shadow 0.25s ease;\n        \/* Forzar que las esquinas se mantengan redondeadas sin deformarse *\/\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n    }\n\n    \/* Franja izquierda animada con intercambio de colores Naranja\/Azul *\/\n    .lf3-project-card::before {\n        content: ''; position: absolute;\n        top: 0; left: 0; bottom: 0; width: 5px;\n        background: linear-gradient(180deg, var(--lf-orange) 0%, var(--lf-blue) 50%, var(--lf-orange) 100%);\n        background-size: 100% 200%;\n        animation: lf3-border-color-swap 1.2s ease-in-out infinite alternate;\n        z-index: 15;\n    }\n\n    .lf3-project-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }\n    .lf3-project-card img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; transition: transform 0.45s ease; background: transparent; }\n    .lf3-project-card:hover img { transform: scale(1.06); }\n    .lf3-project-overlay {\n        position: absolute; inset: 0;\n        background: linear-gradient(\n            to top,\n            rgba(0,0,0,0.82) 0%,\n            rgba(0,0,0,0.72) 12%,\n            rgba(0,0,0,0.54) 26%,\n            rgba(0,0,0,0.35) 42%,\n            rgba(0,0,0,0.16) 60%,\n            rgba(0,0,0,0.04) 78%,\n            transparent 100%\n        );\n    }\n\n    .lf3-project-ext {\n        position: absolute; top: 5px; right: 5px; z-index: 10;\n        width: 26px; height: 26px; border-radius: 50%;\n        background: rgba(249,115,22,0.65); backdrop-filter: blur(6px);\n        border: 1.5px solid rgba(255,140,40,0.85);\n        display: flex; align-items: center; justify-content: center;\n        pointer-events: none; opacity: 1;\n    }\n    .lf3-project-ext svg { width: 11px; height: 11px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n    .lf3-project-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; }\n    .lf3-project-name { font-size: 15px; font-weight: 700; color: white; margin: 0 0 3px; line-height: 1.2; }\n    .lf3-project-cat  { font-size: 11.5px; color: rgba(255,255,255,0.6); font-weight: 500; }\n\n    .lf3-partner-badge {\n        position: absolute; top: 12px; left: 12px; z-index: 20;\n        background: linear-gradient(90deg, #f59e0b, #d97706);\n        color: #fff; font-size: 9px; font-weight: 700;\n        letter-spacing: .09em; text-transform: uppercase;\n        padding: 4px 10px; border-radius: 50px;\n        box-shadow: 0 2px 10px rgba(0,0,0,.35);\n        pointer-events: none;\n    }\n\n    .lf3-ver-mas { text-align: center; margin-top: 28px; }\n    .lf3-ver-mas a {\n        display: inline-flex; align-items: center; gap: 7px; color: var(--azul);\n        font-size: 14px; font-weight: 700; padding: 11px 28px;\n        border: 1.5px solid var(--azul-mid); border-radius: 50px;\n        background: var(--azul-light); transition: background 0.2s, border-color 0.2s, gap 0.2s;\n    }\n    .lf3-ver-mas a:hover { background: var(--azul-mid); border-color: var(--azul); gap: 11px; }\n\n    \/* \u2500\u2500 Opiniones (Carousel) \u2500\u2500 *\/\n    .lf3-carousel-container {\n        position: relative; width: 100%; display: flex; align-items: center; padding: 10px 0 40px;\n    }\n    .lf3-carousel-track {\n        display: flex; gap: 20px; overflow-x: auto;\n        scroll-snap-type: x mandatory; scroll-behavior: smooth;\n        scrollbar-width: none; -ms-overflow-style: none;\n        padding: 20px 0; width: 100%;\n        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);\n        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);\n    }\n    .lf3-carousel-track::-webkit-scrollbar { display: none; }\n    .lf3-carousel-track.no-transition {\n        scroll-behavior: auto !important; scroll-snap-type: none !important;\n    }\n    .lf3-carousel-track.no-transition .lf3-review-card { transition: none !important; }\n\n    .lf3-review-card {\n        flex: 0 0 calc(33.333% - 14px); max-width: 420px; min-width: 280px;\n        scroll-snap-align: center; scroll-snap-stop: always;\n        background: var(--gris-claro); border-radius: var(--radio);\n        padding: 22px 20px 18px; display: flex; flex-direction: column;\n        gap: 11px; transition: box-shadow .5s ease, transform .5s ease, opacity .5s ease, filter .5s ease;\n        opacity: 0.35; filter: blur(3.5px); transform: scale(0.85);\n    }\n    \n    .lf3-review-card.focused { opacity: 1; filter: blur(0px); transform: scale(1); box-shadow: var(--sombra-md); }\n    .lf3-review-card:hover { box-shadow: var(--sombra-lg); opacity: 1; filter: blur(0px); transform: scale(1); }\n\n    .lf3-carousel-btn {\n        position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;\n        width: 54px; height: 54px; border-radius: 50%; background: #ffffff;\n        border: 1.5px solid rgba(41, 121, 255, 0.25); box-shadow: 0 4px 16px rgba(41, 121, 255, 0.1);\n        display: flex; align-items: center; justify-content: center;\n        cursor: pointer; color: var(--azul); transition: all 0.2s ease; outline: none;\n    }\n    .lf3-carousel-btn:hover { background: #FF7A00; color: var(--blanco); border-color: #FF7A00; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 24px rgba(255, 122, 0, 0.32); }\n    .lf3-carousel-btn:active { transform: translateY(-50%) scale(0.95); }\n    .lf3-carousel-btn svg { width: 22px !important; height: 22px !important; stroke: #2979FF !important; fill: none !important; transition: stroke 0.2s ease; display: block; flex-shrink: 0; }\n    .lf3-carousel-btn svg path, .lf3-carousel-btn svg polyline { stroke: #2979FF !important; fill: none !important; }\n    .lf3-carousel-btn:hover svg, .lf3-carousel-btn:hover svg path, .lf3-carousel-btn:hover svg polyline { stroke: #ffffff !important; }\n    .lf3-carousel-btn.prev { left: -27px; }\n    .lf3-carousel-btn.next { right: -27px; }\n\n    .lf3-quote-icon { color: var(--azul); font-size: 28px; font-weight: 900; line-height: 1; }\n    .lf3-review-text { font-size: 13px; color: var(--texto); line-height: 1.65; flex: 1; }\n\n    .lf3-stars { display: flex; gap: 3px; }\n    .lf3-star  { color: var(--amarillo); font-size: 15px; }\n    .lf3-star.empty { color: #d1d5db; }\n\n    .lf3-btn-visit {\n        background: var(--azul); color: var(--blanco); font-size: 11px; font-weight: 700;\n        padding: 7px 12px; border-radius: 8px; text-decoration: none;\n        display: inline-flex; align-items: center; gap: 5px;\n        width: fit-content; transition: background .2s;\n    }\n    .lf3-btn-visit:hover { background: var(--azul-hover); color: #fff; }\n\n    .lf3-reviewer {\n        display: flex; align-items: center; gap: 10px;\n        border-top: 1px solid var(--borde); padding-top: 12px;\n    }\n    .lf3-reviewer img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }\n    .lf3-reviewer-name    { font-size: 13px; font-weight: 700; color: var(--texto); }\n    .lf3-reviewer-country { font-size: 11px; color: var(--gris); }\n    .lf3-reviewer-fi {\n        width: 22px; height: 22px; background: #16a34a; border-radius: 50%;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 10px; font-weight: 800; color: #fff;\n        margin-left: auto; flex-shrink: 0;\n    }\n\n    .lf3-fiverr-link { text-align: center; margin-top: 26px; }\n    .lf3-fiverr-link a {\n        color: var(--verde); font-size: 14px; font-weight: 700;\n        text-decoration: none; display: inline-flex; align-items: center;\n        gap: 8px; transition: gap .2s;\n    }\n    .lf3-fiverr-link a:hover { gap: 12px; }\n    .lf3-fi-icon {\n        width: 24px; height: 24px; background: var(--verde); border-radius: 50%;\n        display: flex; align-items: center; justify-content: center;\n        color: #fff; font-size: 11px; font-weight: 900;\n    }\n\n    \/* \u2500\u2500 CTA Banner \u2500\u2500 *\/\n    .lf3-cta-top-divider { width: 100%; height: 1px; background: rgba(41,121,255,0.1); margin-bottom: 0; }\n\n    .lf3-cta-section {\n        width: 100%; position: relative; background-color: #f8faff;\n        padding: 70px 20px; overflow: hidden; text-align: center;\n        display: flex; flex-direction: column; align-items: center; z-index: 1;\n    }\n\n    .lf3-cta-dot-matrix {\n        position: absolute; width: 80px; height: 80px;\n        background-image: radial-gradient(#cad4eb 2px, transparent 2px);\n        background-size: 20px 20px; z-index: 1; opacity: 0.7; pointer-events: none;\n    }\n    .lf3-cta-dot-matrix.left  { top: 40px; left: 5%; }\n    .lf3-cta-dot-matrix.right { bottom: 40px; right: 5%; }\n\n    .lf3-cta-bg-lines-container {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0;\n        pointer-events: none;\n        display: flex; justify-content: center;\n        align-items: center;\n    }\n    .lf3-cta-bg-lines-svg { width: 100%; max-width: 100%; height: 100%; }\n\n    .lf3-cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }\n\n    .lf3-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: lf3-cta-fadeUp .7s .05s ease both;\n    }\n    .lf3-cta-badge-dot {\n        width: 8px; height: 8px; border-radius: 50%;\n        background-color: #2979FF; margin-right: 10px;\n        box-shadow: 0 0 0 3px rgba(41,121,255,0.2);\n        animation: lf3-cta-pulse-dot 2s infinite;\n    }\n\n    .lf3-cta-title {\n        font-family: 'Playfair Display', serif;\n        font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700;\n        color: var(--texto-2); line-height: 1.1; letter-spacing: -0.5px;\n        margin-bottom: 18px; animation: lf3-cta-fadeUp .75s .15s ease both;\n    }\n    .lf3-cta-subtitle {\n        font-family: 'Inter', sans-serif;\n        font-size: 1.05rem; font-weight: 400; color: #6a6c82;\n        line-height: 1.6; max-width: 480px; margin: 0 auto 35px;\n        animation: lf3-cta-fadeUp .75s .28s ease both;\n    }\n    .lf3-cta-buttons {\n        display: flex; align-items: center; justify-content: center;\n        gap: 14px; flex-wrap: wrap; animation: lf3-cta-fadeUp .75s .42s ease both;\n    }\n    .lf3-cta-btn {\n        display: inline-flex; align-items: center; gap: 8px;\n        font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600;\n        border-radius: 50px; padding: 14px 28px; text-decoration: none;\n        cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;\n        border: none; outline: none;\n    }\n    .lf3-cta-btn-primary { background: #2979FF; color: #ffffff !important; box-shadow: 0 4px 20px rgba(41,121,255,0.25); }\n    .lf3-cta-btn-primary:hover { background: var(--texto-2); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26,26,46,0.32); }\n    .lf3-cta-btn-primary .lf3-cta-arrow { transition: transform .2s ease; }\n    .lf3-cta-btn-primary:hover .lf3-cta-arrow { transform: translateX(5px); }\n    .lf3-cta-btn-secondary { background: transparent; color: var(--texto-2); border: 1.5px solid rgba(26,26,46,0.2); }\n    .lf3-cta-btn-secondary:hover { border-color: #2979FF; color: #2979FF; transform: translateY(-2px); background: rgba(41,121,255,0.05); }\n\n    @keyframes lf3-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    @keyframes lf3-cta-fadeUp {\n        from { opacity: 0; transform: translateY(18px); }\n        to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes lf3-border-color-swap {\n        0%   { background-position: 0% 0; }\n        100% { background-position: 0% 100%; }\n    }\n\n    \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n    @media (max-width: 1024px) { .lf3-projects-grid { grid-template-columns: repeat(3, 1fr); } }\n    @media (max-width: 960px)  { \n        .lf3-projects-grid { grid-template-columns: repeat(2, 1fr); } \n        .lf3-review-card { flex: 0 0 calc(60% - 10px); }\n    }\n    @media (max-width: 768px) {\n        .lf3-section { padding: 28px 22px 36px; }\n        .lf3-section-row, .lf3-section-row-top { flex-direction: column; align-items: flex-start; gap: 14px; }\n        .lf3-section-row h2, .lf3-section-row-top h2 { font-size: 30px !important; line-height: 1.2; }\n        .lf3-bg-shape { display: none; }\n        .lf3-sections-wrap { padding-top: 60px; }\n        .lf3-review-card { flex: 0 0 68%; min-width: 220px; padding: 20px 16px; gap: 10px; }\n        .lf3-carousel-btn { width: 44px; height: 44px; }\n        .lf3-carousel-btn svg { width: 18px !important; height: 18px !important; }\n        .lf3-carousel-btn.prev { left: -6px; }\n        .lf3-carousel-btn.next { right: -6px; }\n        .lf3-carousel-track { padding: 20px 0; scroll-padding-left: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }\n    }\n    @media (max-width: 640px) {\n        .lf3-filter-btn { padding: 7px 16px; font-size: 13px; }\n    }\n    @media (max-width: 580px) {\n        .lf3-cta-dot-matrix,\n        .lf3-cta-bg-lines-container { display: none; }\n        .lf3-cta-section { padding: 50px 16px 50px; }\n        .lf3-cta-title { font-size: clamp(2rem, 8vw, 2.4rem); }\n        .lf3-cta-buttons { flex-direction: column; align-items: stretch; }\n        .lf3-cta-btn { justify-content: center; width: 100%; }\n    }\n    @media (max-width: 480px) {\n        .lf3-projects-grid { grid-template-columns: 1fr; }\n        .lf3-section { padding: 24px 16px 30px; }\n        .lf3-review-card { padding: 18px 14px 14px; }\n        .lf3-review-text { font-size: 11.5px; line-height: 1.5; }\n        .lf3-reviewer-name { font-size: 11.5px; }\n        .lf3-reviewer-country { font-size: 9px; }\n        .lf3-reviewer img { width: 28px; height: 28px; }\n        .lf3-btn-visit { font-size: 10px; padding: 6px 10px; }\n        .lf3-section-row h2, .lf3-section-row-top h2 { font-size: 26px !important; }\n    }\n\n    .lf3-project-card.hidden { display: none; }\n\n    \/* \u2500\u2500 Separador de categor\u00edas \u2500\u2500 *\/\n    .lf3-cat-separator {\n        grid-column: 1 \/ -1;\n        display: flex; align-items: center; gap: 14px;\n        padding: 10px 0 2px;\n    }\n    .lf3-cat-separator::before,\n    .lf3-cat-separator::after {\n        content: ''; flex: 1; height: 1px; background: var(--borde);\n    }\n    .lf3-cat-separator span {\n        display: inline-flex; align-items: center; gap: 7px;\n        font-size: 11px; font-weight: 700; letter-spacing: 0.12em;\n        text-transform: uppercase; color: var(--gris);\n        white-space: nowrap; padding: 5px 14px;\n        background: var(--blanco); border-radius: 50px;\n        border: 1px solid var(--borde);\n    }\n    .lf3-cat-separator span::before {\n        content: ''; width: 6px; height: 6px; border-radius: 50%;\n        background: var(--azul); flex-shrink: 0;\n    }\n    .lf3-cat-separator.hidden { display: none; }\n\n    \/* \u2500\u2500 Barra de filtros flotante (sticky) \u2500\u2500 *\/\n    .lf3-filters-wrapper.lf3-filters-sticky {\n        position: fixed;\n        left: 0;\n        width: 100%;\n        z-index: 9998;\n        background: rgba(242, 245, 252, 0.97);\n        backdrop-filter: blur(18px);\n        -webkit-backdrop-filter: blur(18px);\n        \/* padding-left\/right se calculan v\u00eda JS para alinearse exactamente\n           con el \u00e1rea de contenido de .lf3-section *\/\n        padding-top: 10px;\n        padding-bottom: 10px;\n        box-shadow: 0 4px 24px rgba(30,41,59,0.08), 0 1px 0 rgba(226,232,240,0.9);\n        border-bottom: 1px solid rgba(226,232,240,0.7);\n        overflow: visible;\n        transition: box-shadow 0.2s ease;\n    }\n    .lf3-filters-wrapper.lf3-filters-sticky .lf3-filters {\n        flex: 1;\n        margin: 0;\n    }\n\n    <\/style>\n\n    <!-- ======================================================\n         ESTRUCTURA HTML\n    ====================================================== -->\n    <div class=\"lf3-wrap\">\n\n        <!-- Fondo Global SVG -->\n        <div class=\"lf3-global-bg\">\n            <svg class=\"lf3-bg-shape lf3-bg-top-left\" viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <circle cx=\"0\" cy=\"200\" r=\"190\" stroke=\"#D3DCF2\" stroke-width=\"1.5\" \/>\n                <circle cx=\"0\" cy=\"200\" r=\"140\" stroke=\"#D3DCF2\" stroke-width=\"1.5\" \/>\n                <circle cx=\"85\" cy=\"85\" r=\"8\" fill=\"#2979FF\" \/>\n                <path d=\"M 0 50 Q 150 50 150 200\" stroke=\"#D3DCF2\" stroke-width=\"1.5\" fill=\"none\"\/>\n            <\/svg>\n            <svg class=\"lf3-bg-shape lf3-bg-top-right\" viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M 400 0 Q 200 150 400 350\" stroke=\"#D3DCF2\" stroke-width=\"1.5\" fill=\"none\"\/>\n                <path d=\"M 400 50 Q 250 150 400 300\" stroke=\"#D3DCF2\" stroke-width=\"1.5\" stroke-dasharray=\"6 6\" fill=\"none\"\/>\n            <\/svg>\n            <div class=\"lf3-bg-dots lf3-dots-tr\"><\/div>\n            <div class=\"lf3-bg-dots lf3-dots-ml\"><\/div>\n            <div class=\"lf3-bg-dots lf3-dots-br\"><\/div>\n        <\/div>\n\n        <!-- \u2500\u2500 CASOS DESTACADOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        \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    <style>\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 70px;\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; 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; opacity: 0.7;\n    }\n    .dot-matrix.left  { top: 80px; left: 2%; }\n    .dot-matrix.right { top: 160px; right: 2%; }\n\n    .bg-lines-container {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0; pointer-events: none; display: flex; justify-content: center;\n    }\n    .bg-lines-svg { width: 100%; max-width: 100%; height: 100%; overflow: visible; }\n\n\n    \/* \u2500\u2500 Cabecera \u2500\u2500 *\/\n    .ppv2-header {\n        position: relative; z-index: 2; text-align: left;\n        margin-bottom: 32px; padding: 0 44px;\n        max-width: 1160px; width: 100%;\n    }\n\n    .ln-hero-badge {\n        display: inline-flex; align-items: center; gap: 8px;\n        background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px);\n        border: 1px solid rgba(27, 143, 245, 0.25);\n        color: var(--lf-ink) !important;\n        font-family: 'JetBrains Mono', monospace, 'Inter', sans-serif;\n        font-size: 12px; font-weight: 600; letter-spacing: 0.08em;\n        text-transform: uppercase; padding: 6px 16px; border-radius: 100px;\n        margin-bottom: 28px;\n    }\n    .ln-hero-badge::before {\n        content: '\u2014'; color: var(--lf-orange); font-weight: 700; background: transparent; width: auto; height: auto; display: inline; border-radius: 0;\n    }\n\n    .ppv2-title {\n        font-family: 'Sora', sans-serif;\n        font-size: clamp(2.8rem, 5.5vw, 4.2rem);\n        font-weight: 700; line-height: 1.1;\n        color: var(--lf-ink) !important; margin: 0 0 22px; letter-spacing: -0.02em;\n    }\n    .ppv2-title .accent { color: var(--lf-orange) !important; }\n\n    \/* \u2500\u2500 \u00c1rea de tarjetas \u2500\u2500 *\/\n    .ppv2-cards-area { position: relative; z-index: 2; width: 100%; padding: 0 32px; }\n\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: 440px; 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 1px rgba(224,82,154,0.4), 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    .ppv2-card[data-accent=\"teal\"] { box-shadow: 0 0 0 1px rgba(45,212,191,0.4), 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 (solo m\u00f3vil) \u2500\u2500 *\/\n    .ppv2-nav-arrows { display: none; }\n\n    \/* \u2500\u2500 Dots \u2500\u2500 *\/\n    .ppv2-dots {\n        display: none; justify-content: center; align-items: center;\n        gap: 8px; margin-top: 18px;\n    }\n    .ppv2-dot {\n        width: 7px; height: 7px; border-radius: 50%; background: #c8cfee;\n        transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;\n        flex-shrink: 0;\n    }\n    .ppv2-dot.active {\n        background: #3b82f6; width: 22px; border-radius: 4px; transform: scaleY(1);\n    }\n\n    \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n    @media (max-width: 1024px) { .bg-lines-svg { display: none; } }\n    @media (max-width: 880px) { .ppv2-cards-area { padding: 0 20px; } .ppv2-header { padding: 0 20px; } }\n    @media (max-width: 768px) { .dot-matrix { display: none; } .ppv2-title { font-size: 30px; line-height: 1.2; } .ppv2-wrap { padding-top: 84px; } .ppv2-header { margin-bottom: 24px; } }\n    @media (max-width: 480px) { .ppv2-title { font-size: 26px; } }\n    @media (min-width: 1024px) { .ppv2-wrap { padding-bottom: calc(70px * 1.05); } }\n\n    @media (max-width: 660px) {\n        .ppv2-track {\n            flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;\n            justify-content: flex-start; padding-bottom: 8px;\n            scrollbar-width: none; -ms-overflow-style: none;\n            padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px;\n        }\n        .ppv2-track::-webkit-scrollbar { display: none; }\n        .ppv2-card {\n            scroll-snap-align: center; flex: 0 0 82vw; max-width: 82vw;\n            height: 74vw; min-height: 420px;\n        }\n        .ppv2-cards-area { padding: 0; }\n        .ppv2-nav-arrows {\n            display: flex; align-items: center; justify-content: center;\n            gap: 16px; margin-top: 22px; position: relative; z-index: 5;\n        }\n        .ppv2-arrow-btn {\n            display: flex; align-items: center; justify-content: center;\n            width: 48px; height: 48px; border-radius: 50%;\n            border: 1.5px solid rgba(41,121,255,0.25); background: #ffffff;\n            cursor: pointer; box-shadow: 0 4px 16px rgba(41,121,255,0.1);\n            transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, opacity 0.25s ease;\n            -webkit-tap-highlight-color: transparent; outline: none;\n        }\n        .ppv2-arrow-btn svg { width: 20px; height: 20px; stroke: #2979FF; transition: stroke 0.22s ease; flex-shrink: 0; }\n        .ppv2-arrow-btn:hover:not(:disabled) { background: #FF7A00; border-color: #FF7A00; box-shadow: 0 6px 24px rgba(255,122,0,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\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 \u2014 LAFAO v4.1 (FIXED)\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\n    \/* Importante: el modal se mueve al <body> via JS para evitar\n       conflictos de z-index con el tema de WordPress *\/\n\n    #ppv2-modal-overlay {\n        position: fixed;\n        inset: 0;\n        \/* z-index alt\u00edsimo para estar por encima del men\u00fa de WP y cualquier plugin *\/\n        z-index: 2147483647;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(5, 15, 50, 0.80);\n        backdrop-filter: blur(20px) saturate(1.5);\n        -webkit-backdrop-filter: blur(20px) saturate(1.5);\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n        transition: opacity 0.38s cubic-bezier(.4,0,.2,1), visibility 0.38s cubic-bezier(.4,0,.2,1);\n        \/* Sin transform en el overlay para evitar crear un nuevo stacking context que limite a los hijos *\/\n    }\n\n    \/* Luz azul de fondo *\/\n    #ppv2-modal-overlay::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(41,121,255,0.20) 0%, transparent 70%);\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    \/* Part\u00edculas decorativas *\/\n    #ppv2-modal-overlay::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-image:\n            radial-gradient(circle 1.5px at 20% 30%, rgba(100,160,255,0.5) 0%, transparent 100%),\n            radial-gradient(circle 1px   at 80% 20%, rgba(100,160,255,0.4) 0%, transparent 100%),\n            radial-gradient(circle 2px   at 15% 70%, rgba(100,160,255,0.35) 0%, transparent 100%),\n            radial-gradient(circle 1px   at 85% 75%, rgba(100,160,255,0.45) 0%, transparent 100%),\n            radial-gradient(circle 1.5px at 50% 10%, rgba(100,160,255,0.3) 0%, transparent 100%),\n            radial-gradient(circle 1px   at 65% 85%, rgba(100,160,255,0.4) 0%, transparent 100%);\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    #ppv2-modal-overlay.active {\n        opacity: 1;\n        visibility: visible;\n        pointer-events: auto;\n    }\n\n    \/* \u2500\u2500 Contenedor del modal \u2500\u2500 *\/\n    #ppv2-modal-box {\n        position: relative;\n        z-index: 10; \/* Alto dentro del overlay *\/\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 16px;\n        transform: scale(0.88) translateY(28px);\n        transition: transform 0.42s cubic-bezier(.34,1.56,.64,1);\n    }\n\n    #ppv2-modal-overlay.active #ppv2-modal-box {\n        transform: scale(1) translateY(0);\n    }\n\n    \/* \u2500\u2500 Marco del video \u2500\u2500 *\/\n    #ppv2-modal-frame {\n        position: relative;\n        width: min(72vh, 420px);\n        aspect-ratio: 4 \/ 5;\n        border-radius: 28px;\n        overflow: hidden;\n        background: #000;\n        \/* El glow ahora es solo box-shadow, sin ::before animado que cause problemas de z-index *\/\n        box-shadow:\n            0 0 0 1.5px rgba(41,121,255,0.6),\n            0 0 0 5px rgba(41,121,255,0.15),\n            0 30px 80px rgba(0,0,0,0.6),\n            0 0 60px rgba(41,121,255,0.25),\n            inset 0 0 0 1px rgba(255,255,255,0.06);\n    }\n\n    \/* Glow animado \u2014 ahora como elemento externo al frame para no afectar z-index interno *\/\n    #ppv2-modal-glow {\n        position: absolute;\n        \/* Coincide exactamente con el frame *\/\n        border-radius: 31px;\n        pointer-events: none;\n        z-index: 11; \/* justo encima del box pero detr\u00e1s del frame *\/\n        opacity: 0;\n        transition: opacity 0.4s;\n        overflow: hidden;\n    }\n    #ppv2-modal-overlay.active #ppv2-modal-glow { opacity: 1; }\n    #ppv2-modal-glow::after {\n        content: '';\n        position: absolute;\n        inset: -3px;\n        border-radius: 31px;\n        background: conic-gradient(\n            from 0deg,\n            rgba(41,121,255,0)    0deg,\n            rgba(41,121,255,0.55) 90deg,\n            rgba(100,180,255,0.7) 180deg,\n            rgba(41,121,255,0.55) 270deg,\n            rgba(41,121,255,0)    360deg\n        );\n        animation: ppv2-spin-glow 4s linear infinite;\n    }\n    @keyframes ppv2-spin-glow {\n        from { transform: rotate(0deg); }\n        to   { transform: rotate(360deg); }\n    }\n\n    \/* \u2500\u2500 Video dentro del modal \u2500\u2500 *\/\n    #ppv2-modal-video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        z-index: 1; \/* Visible sobre el fondo negro del frame *\/\n        border-radius: 0; \/* El border-radius lo aplica el overflow:hidden del frame *\/\n    }\n    \/* Ocultar controles nativos en todos los navegadores *\/\n    #ppv2-modal-video::-webkit-media-controls,\n    #ppv2-modal-video::-webkit-media-controls-enclosure,\n    #ppv2-modal-video::-webkit-media-controls-panel,\n    #ppv2-modal-video::-webkit-media-controls-play-button,\n    #ppv2-modal-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }\n\n    \/* \u2500\u2500 Controles personalizados sobre el video \u2500\u2500 *\/\n    #ppv2-modal-controls {\n        position: absolute;\n        bottom: 0; left: 0; right: 0;\n        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;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 12px;\n        z-index: 5; \/* Encima del video *\/\n        border-radius: 0 0 28px 28px;\n        transition: opacity 0.3s;\n    }\n    #ppv2-modal-controls.hidden { opacity: 0; pointer-events: none; }\n\n    .ppv2-modal-info { flex: 1; }\n    .ppv2-modal-badge {\n        display: inline-block; font-size: 10px; font-weight: 700;\n        letter-spacing: 0.1em; text-transform: uppercase;\n        color: rgba(255,255,255,0.6); margin-bottom: 5px;\n    }\n    .ppv2-modal-name { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; letter-spacing: -0.2px; }\n\n    \/* \u2500\u2500 Bot\u00f3n play\/pausa en modal \u2500\u2500 *\/\n    #ppv2-modal-playpause {\n        width: 52px; height: 52px; border-radius: 50%; border: none;\n        background: rgba(255,255,255,0.18); backdrop-filter: blur(10px);\n        cursor: pointer; flex-shrink: 0;\n        display: flex; align-items: center; justify-content: center;\n        transition: transform 0.2s, background 0.2s;\n        -webkit-tap-highlight-color: transparent;\n        z-index: 6;\n        padding: 0;\n    }\n    #ppv2-modal-playpause:hover { transform: scale(1.12); background: rgba(255,255,255,0.28); }\n    #ppv2-modal-playpause:active { transform: scale(0.93); }\n    #ppv2-modal-playpause svg { \n        width: 24px; \n        height: 24px; \n        fill: #ffffff !important; \n        stroke: none !important;\n        pointer-events: none; \n        display: block;\n    }\n    #ppv2-modal-playpause svg path { \n        fill: #ffffff !important; \n    }\n\n    \/* \u2500\u2500 Barra de progreso \u2500\u2500 *\/\n    #ppv2-modal-progress-wrap {\n        position: absolute;\n        bottom: 0; left: 0; right: 0; height: 4px;\n        background: rgba(255,255,255,0.15);\n        cursor: pointer;\n        z-index: 7;\n    }\n    #ppv2-modal-progress-bar {\n        height: 100%; width: 0%;\n        background: linear-gradient(90deg, #2979FF, #60a5fa);\n        transition: width 0.2s linear;\n        pointer-events: none;\n    }\n\n    \/* \u2500\u2500 Bot\u00f3n cerrar modal \u2500\u2500 *\/\n    #ppv2-modal-close {\n        position: absolute;\n        top: 14px; right: 14px;\n        z-index: 20; \/* Siempre visible, encima de todo dentro del frame *\/\n        width: 36px; height: 36px; border-radius: 50%;\n        border: 1px solid rgba(255,255,255,0.3);\n        background: rgba(0,0,0,0.55);\n        backdrop-filter: blur(8px);\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: background 0.2s, transform 0.2s, border-color 0.2s;\n        -webkit-tap-highlight-color: transparent;\n        outline: none;\n        padding: 0;\n    }\n    #ppv2-modal-close:hover { background: rgba(255,80,80,0.5); border-color: rgba(255,100,100,0.5); transform: scale(1.1); }\n    #ppv2-modal-close:active { transform: scale(0.93); }\n    #ppv2-modal-close svg { \n        width: 18px; \n        height: 18px; \n        stroke: #ffffff !important; \n        fill: none !important; \n        pointer-events: none; \n        display: block;\n    }\n    #ppv2-modal-close svg line { \n        stroke: #ffffff !important; \n        stroke-width: 2px !important; \n        stroke-linecap: round !important;\n        stroke-linejoin: round !important;\n    }\n\n    \/* \u2500\u2500 Info inferior (cliente + bot\u00f3n sitio) \u2500\u2500 *\/\n    #ppv2-modal-footer {\n        display: flex;\n        align-items: center; justify-content: space-between;\n        width: min(72vh, 420px);\n        gap: 12px; padding: 0 4px;\n    }\n\n    #ppv2-modal-footer-name { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: -0.2px; }\n    #ppv2-modal-footer-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-top: 3px; }\n\n    #ppv2-modal-site-btn {\n        display: inline-flex; align-items: center; gap: 7px;\n        padding: 10px 20px; border-radius: 50px;\n        border: 1.5px solid rgba(255,255,255,0.25);\n        background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);\n        color: white; font-size: 13px; font-weight: 600;\n        white-space: nowrap; text-decoration: none;\n        transition: background 0.2s, border-color 0.2s;\n        -webkit-tap-highlight-color: transparent; flex-shrink: 0;\n    }\n    #ppv2-modal-site-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: #fff; }\n    #ppv2-modal-site-btn svg { width: 12px; height: 12px; fill: currentColor; }\n\n    \/* \u2500\u2500 Responsive modal \u2500\u2500 *\/\n    @media (max-width: 540px) {\n        #ppv2-modal-frame,\n        #ppv2-modal-footer { width: 88vw; }\n        #ppv2-modal-frame { aspect-ratio: 3 \/ 4; border-radius: 22px; }\n        #ppv2-modal-close { top: 10px; right: 10px; }\n        #ppv2-modal-footer-desc { display: none; }\n    }\n    <\/style>\n\n    <!-- \u2550\u2550 MODAL FLOTANTE GLOBAL \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    <!-- Se mover\u00e1 al <body> via JS para evitar conflictos de z-index con WP -->\n    <div id=\"ppv2-modal-overlay\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Reproductor de video\">\n        <div id=\"ppv2-modal-box\">\n\n            <!-- Marco del video -->\n            <div id=\"ppv2-modal-frame\">\n\n                <!-- Video \u2014 posici\u00f3n absoluta para llenar el frame -->\n                <video id=\"ppv2-modal-video\"\n                       playsinline\n                       webkit-playsinline\n                       x-webkit-airplay=\"deny\"\n                       disablePictureInPicture\n                       controlsList=\"nodownload nofullscreen noremoteplayback\"\n                       preload=\"none\">\n                <\/video>\n\n                <!-- Controles sobre el video -->\n                <div id=\"ppv2-modal-controls\">\n                    <div class=\"ppv2-modal-info\">\n                        <div class=\"ppv2-modal-badge\" id=\"ppv2-modal-badge-text\"><\/div>\n                        <p class=\"ppv2-modal-name\" id=\"ppv2-modal-client-name\"><\/p>\n                    <\/div>\n                    <button id=\"ppv2-modal-playpause\" aria-label=\"Reproducir o pausar\">\n                        <svg id=\"ppv2-pp-icon-play\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#ffffff\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n                        <svg id=\"ppv2-pp-icon-pause\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#ffffff\" style=\"display:none\" aria-hidden=\"true\"><path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/><\/svg>\n                    <\/button>\n                <\/div>\n\n                <!-- Barra de progreso -->\n                <div id=\"ppv2-modal-progress-wrap\">\n                    <div id=\"ppv2-modal-progress-bar\"><\/div>\n                <\/div>\n\n                <!-- \u2715 Bot\u00f3n cerrar \u2014 dentro del frame, z-index 20 -->\n                <button id=\"ppv2-modal-close\" aria-label=\"Cerrar video\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\n                        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\n                    <\/svg>\n                <\/button>\n\n            <\/div><!-- \/#ppv2-modal-frame -->\n\n            <!-- Footer: nombre + bot\u00f3n sitio -->\n            <div id=\"ppv2-modal-footer\">\n                <div>\n                    <div id=\"ppv2-modal-footer-name\"><\/div>\n                    <div id=\"ppv2-modal-footer-desc\"><\/div>\n                <\/div>\n                <a id=\"ppv2-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\n        <\/div><!-- \/#ppv2-modal-box -->\n    <\/div><!-- \/#ppv2-modal-overlay -->\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\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 id=\"ppv2-bg-lines\" class=\"bg-lines-svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\n        <\/div>\n\n        <!-- Cabecera -->\n        <div class=\"ppv2-header\">\n            <div class=\"ln-hero-badge\">Casos Destacados<\/div>\n            <h2 class=\"ppv2-title\">Proyectos que <span class=\"accent\">marcan la diferencia<\/span><\/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\"\n                         style=\"background-image:url('https:\/\/lafao.dev\/wp-content\/uploads\/2026\/01\/didier-foto.png');\"><\/div>\n\n                    <!-- Logo -->\n                                        <div class=\"ppv2-logo\">\n                        <img src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2025\/12\/cropped-Logo-definitivo-3.png\"\n                             alt=\"Logo Tailandia Cream\" loading=\"lazy\" decoding=\"async\">\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                        <div class=\"ppv2-actions\">\n                            <div class=\"ppv2-actions-left\">\n                                <a href=\"https:\/\/tailandiacream.com\"\n                                   target=\"_blank\" rel=\"noopener noreferrer\"\n                                   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\"\n                                    style=\"border-color:#e0529a;\"\n                                    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\"\n                         style=\"background-image:url('https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/Sonador-Thomas-BRAUN-.jpg');\"><\/div>\n\n                    <!-- Logo -->\n                                        <div class=\"ppv2-logo ppv2-logo-wide\">\n                        <img src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/03\/QuipEcos-logo.webp\"\n                             alt=\"Logo QuipEcos\" loading=\"lazy\" decoding=\"async\">\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                        <div class=\"ppv2-actions\">\n                            <div class=\"ppv2-actions-left\">\n                                <a href=\"https:\/\/quipecos.com\"\n                                   target=\"_blank\" rel=\"noopener noreferrer\"\n                                   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\"\n                                    style=\"border-color:#2dd4bf;\"\n                                    aria-label=\"Reproducir video\"><\/button>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                \n            <\/div><!-- \/.ppv2-track -->\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\">\n                        <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n                    <\/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\">\n                        <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                    <\/svg>\n                <\/button>\n            <\/div>\n\n        <\/div><!-- \/.ppv2-cards-area -->\n\n    <\/div><!-- \/.ppv2-wrap -->\n\n    <script>\n    (function(){\n        'use strict';\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\n           PASO 1: Mover el modal al <body> para evitar\n           conflictos de z-index con cualquier contenedor WP\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 *\/\n        var overlay = document.getElementById('ppv2-modal-overlay');\n        if (overlay && overlay.parentNode !== document.body) {\n            document.body.appendChild(overlay);\n        }\n\n        \/* \u2500\u2500 Elementos del modal \u2500\u2500 *\/\n        var modalVideo    = document.getElementById('ppv2-modal-video');\n        var modalClose    = document.getElementById('ppv2-modal-close');\n        var modalPP       = document.getElementById('ppv2-modal-playpause');\n        var iconPlay      = document.getElementById('ppv2-pp-icon-play');\n        var iconPause     = document.getElementById('ppv2-pp-icon-pause');\n        var progressBar   = document.getElementById('ppv2-modal-progress-bar');\n        var progressWrap  = document.getElementById('ppv2-modal-progress-wrap');\n        var modalBadge    = document.getElementById('ppv2-modal-badge-text');\n        var modalName     = document.getElementById('ppv2-modal-client-name');\n        var footerName    = document.getElementById('ppv2-modal-footer-name');\n        var footerDesc    = document.getElementById('ppv2-modal-footer-desc');\n        var footerSite    = document.getElementById('ppv2-modal-site-btn');\n        var controls      = document.getElementById('ppv2-modal-controls');\n        var modalPiP      = document.getElementById('ppv2-modal-pip');\n\n        var hideControlsTimer = null;\n\n        \/* \u2500\u2500 Bloquear scroll del body al abrir modal \u2500\u2500 *\/\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        \/* \u2500\u2500 Abrir modal \u2500\u2500 *\/\n        function openModal(caseData) {\n            \/* Rellenar datos *\/\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            \/* Resetear barra *\/\n            progressBar.style.width = '0%';\n            progressBar.style.transition = 'none';\n\n            \/* Asignar src del video *\/\n            modalVideo.pause();\n            modalVideo.removeAttribute('src');\n            modalVideo.load(); \/* Limpiar buffer anterior *\/\n\n            \/* Peque\u00f1o delay para evitar race condition en algunos navegadores *\/\n            setTimeout(function(){\n                modalVideo.src    = caseData.video_url  || '';\n                modalVideo.poster = caseData.poster_url || '';\n                modalVideo.load();\n\n                \/* Mostrar overlay *\/\n                overlay.classList.add('active');\n                lockScroll();\n                controls.classList.remove('hidden');\n\n                \/* Reproducir *\/\n                var playPromise = modalVideo.play();\n                if (playPromise !== undefined) {\n                    playPromise\n                        .then(function(){\n                            modalVideo.muted = false;\n                            updatePPIcon();\n                            showControls();\n                        })\n                        .catch(function(){\n                            \/* Si autoplay est\u00e1 bloqueado, intentar con mute *\/\n                            modalVideo.muted = true;\n                            modalVideo.play()\n                                .then(function(){ updatePPIcon(); showControls(); })\n                                .catch(function(){ updatePPIcon(); });\n                        });\n                }\n                updatePPIcon();\n\n                \/* Restaurar transition de la barra *\/\n                setTimeout(function(){\n                    progressBar.style.transition = 'width 0.2s linear';\n                }, 50);\n            }, 20);\n        }\n\n        \/* \u2500\u2500 Cerrar modal \u2500\u2500 *\/\n        function closeModal() {\n            overlay.classList.remove('active');\n            unlockScroll();\n            \/* Pausar y limpiar video *\/\n            modalVideo.pause();\n            modalVideo.removeAttribute('src');\n            modalVideo.load();\n            progressBar.style.width = '0%';\n            clearTimeout(hideControlsTimer);\n            controls.classList.remove('hidden');\n        }\n\n        \/* \u2500\u2500 Actualizar \u00edcono play\/pause \u2500\u2500 *\/\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        \/* \u2500\u2500 Mostrar controles y auto-ocultar \u2500\u2500 *\/\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) {\n            modalClose.addEventListener('click', function(e){\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        \/* Cerrar al clicar backdrop *\/\n        if (overlay) {\n            overlay.addEventListener('click', function(e){\n                if (e.target === overlay) closeModal();\n            });\n        }\n\n        \/* Escape key *\/\n        document.addEventListener('keydown', function(e){\n            if (e.key === 'Escape' && overlay && overlay.classList.contains('active')) closeModal();\n        });\n\n        \/* Play\/pausa \u2014 bot\u00f3n *\/\n        if (modalPP) {\n            modalPP.addEventListener('click', function(e){\n                e.stopPropagation();\n                if (modalVideo.paused) { modalVideo.play(); }\n                else { modalVideo.pause(); }\n                updatePPIcon();\n                showControls();\n            });\n        }\n\n        \/* Play\/pausa \u2014 clic en video *\/\n        if (modalVideo) {\n            modalVideo.addEventListener('click', function(e){\n                e.stopPropagation();\n                if (modalVideo.paused) { modalVideo.play(); }\n                else { modalVideo.pause(); }\n                updatePPIcon();\n                showControls();\n            });\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(){\n                updatePPIcon();\n                if(controls) controls.classList.remove('hidden');\n                if(progressBar) progressBar.style.width = '100%';\n            });\n\n            \/* Barra de progreso *\/\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        \/* Mostrar controles al mover o tocar el frame *\/\n        var frame = document.getElementById('ppv2-modal-frame');\n        if (frame) {\n            frame.addEventListener('mousemove',  showControls);\n            frame.addEventListener('touchstart', showControls, { passive: true });\n        }\n\n        \/* Scrubbing en la barra de progreso *\/\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) {\n                    modalVideo.currentTime = ratio * modalVideo.duration;\n                }\n            });\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\n           PASO 2: Eventos de las tarjetas\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 *\/\n        function initCards() {\n            var cards = document.querySelectorAll('.ppv2-card');\n\n            cards.forEach(function(card){\n                var playBtn = card.querySelector('.js-ppv2-play');\n                var poster  = card.querySelector('.js-ppv2-poster');\n\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) {\n                    if (e) { e.stopPropagation(); e.preventDefault(); }\n                    openModal(caseData);\n                }\n\n                if (poster)  poster.addEventListener('click', triggerModal);\n                if (playBtn) playBtn.addEventListener('click', triggerModal);\n                \/* Tambi\u00e9n toda la tarjeta es clickeable *\/\n                card.addEventListener('click', function(e){\n                    \/* Evitar doble disparo si el clic fue en el poster o play btn *\/\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\n        \/* \u2500\u2500 Flechas de navegaci\u00f3n m\u00f3vil \u2500\u2500 *\/\n        function initNav() {\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 scrollToCard(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)\n                              - (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(){\n                        if (isMobile()) updateUI(getVisibleIndex());\n                    }, 80);\n                }, { passive: true });\n            }\n\n            if (prevBtn) {\n                prevBtn.addEventListener('click', function(){\n                    if (!isMobile()) return;\n                    var idx = Math.max(0, getVisibleIndex() - 1);\n                    scrollToCard(idx); updateUI(idx);\n                });\n            }\n            if (nextBtn) {\n                nextBtn.addEventListener('click', function(){\n                    if (!isMobile()) return;\n                    var idx = Math.min(total - 1, getVisibleIndex() + 1);\n                    scrollToCard(idx); updateUI(idx);\n                });\n            }\n            dots.forEach(function(dot, i){\n                dot.addEventListener('click', function(){\n                    if (!isMobile()) return;\n                    scrollToCard(i); updateUI(i);\n                });\n            });\n\n            updateUI(0);\n        }\n\n        \/* \u2500\u2500 L\u00edneas decorativas din\u00e1micas \u2500\u2500 *\/\n        function ppv2UpdateBgLines() {\n            var wrap  = document.querySelector('.ppv2-wrap');\n            var svg   = document.getElementById('ppv2-bg-lines');\n            var trk   = document.getElementById('ppv2-track');\n            if (!wrap || !svg || !trk) return;\n            if (window.innerWidth <= 1024) { svg.innerHTML = ''; return; }\n            var cds = trk.querySelectorAll('.ppv2-card');\n            if (!cds.length) return;\n            var wr = wrap.getBoundingClientRect();\n            var fr = cds[0].getBoundingClientRect();\n            var lr = cds[cds.length - 1].getBoundingClientRect();\n            var W  = wr.width;\n            var H  = wr.height;\n            var lx = fr.left - wr.left - 22;\n            var rx = lr.right - wr.left + 22;\n            var cy = (fr.top + fr.bottom) \/ 2 - wr.top;\n            svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);\n            svg.innerHTML =\n                '<path d=\"M-60,' + H + ' C' + (lx*0.35) + ',' + (H*0.75) + ' ' + (lx*0.65) + ',' + (cy+20) + ' ' + lx + ',' + cy + '\" stroke=\"var(--lf-mist)\" stroke-width=\"1.5\" fill=\"none\"\/>' +\n                '<circle cx=\"' + lx + '\" cy=\"' + cy + '\" r=\"7\" fill=\"var(--lf-blue)\"\/>' +\n                '<path d=\"M' + (W+60) + ',50 C' + (rx+(W-rx)*0.65) + ',' + (H*0.25) + ' ' + (rx+(W-rx)*0.35) + ',' + (cy-20) + ' ' + rx + ',' + cy + '\" stroke=\"var(--lf-mist)\" stroke-width=\"1.5\" fill=\"none\"\/>' +\n                '<circle cx=\"' + rx + '\" cy=\"' + cy + '\" r=\"6.5\" stroke=\"var(--lf-blue)\" stroke-width=\"1.5\" fill=\"var(--lf-bone)\"\/>' +\n                '<path d=\"M' + rx + ',' + (cy-6.5) + ' A6.5,6.5 0 0,1 ' + rx + ',' + (cy+6.5) + ' Z\" fill=\"var(--lf-blue)\"\/>';\n        }\n\n        \/* \u2500\u2500 Alinear cabecera con el primer video \u2500\u2500 *\/\n        function ppv2AlignHeader() {\n            var header = document.querySelector('.ppv2-header');\n            var trk    = document.getElementById('ppv2-track');\n            if (!header || !trk) return;\n            if (window.innerWidth <= 660) { header.style.paddingLeft = ''; return; }\n            var cds = trk.querySelectorAll('.ppv2-card');\n            if (!cds.length) return;\n            header.style.paddingLeft = '';\n            var hr = header.getBoundingClientRect();\n            var fr = cds[0].getBoundingClientRect();\n            header.style.paddingLeft = Math.max(16, fr.left - hr.left) + 'px';\n        }\n\n        \/* \u2500\u2500 Inicializaci\u00f3n \u2500\u2500 *\/\n        function init() {\n            initCards();\n            initNav();\n            ppv2UpdateBgLines();\n            ppv2AlignHeader();\n            window.addEventListener('resize', ppv2UpdateBgLines);\n            window.addEventListener('resize', ppv2AlignHeader);\n            setTimeout(function(){ ppv2UpdateBgLines(); ppv2AlignHeader(); }, 300);\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n        } else {\n            init();\n        }\n\n    })();\n    <\/script>\n\n    \n        <!-- \u2550\u2550 SECCIONES \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        <div class=\"lf3-sections-wrap\">\n\n            <!-- \u2500\u2500 M\u00c1S PROYECTOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <div class=\"lf3-section\" id=\"mas-proyectos\">\n\n                <div class=\"lf3-badge\">\n                    <span class=\"lf3-badge-dot\"><\/span>\n                    M\u00e1s Proyectos\n                <\/div>\n\n                <div class=\"lf3-section-row-top\">\n                    <h2>Explora m\u00e1s proyectos<\/h2>\n                    <div class=\"lf3-filters-wrapper\">\n                        <button class=\"lf3-filter-arrow\" id=\"lf3-filter-prev\" aria-label=\"Filtros anteriores\" disabled>\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18L9 12L15 6\" fill=\"none\" \/><\/svg>\n                        <\/button>\n                        <div class=\"lf3-filters\" id=\"lf3-filters\">\n                            <button class=\"lf3-filter-btn active\" data-filter=\"todos\">Todos<\/button>\n                            <button class=\"lf3-filter-btn\" data-filter=\"ecommerce\">Tienda Online<\/button>\n                            <button class=\"lf3-filter-btn\" data-filter=\"landing\">Landing Page<\/button>\n                            <button class=\"lf3-filter-btn\" data-filter=\"servicios\">Servicios<\/button>\n                            <button class=\"lf3-filter-btn\" data-filter=\"donacion\">Donaci\u00f3n<\/button>\n                        <\/div>\n                        <button class=\"lf3-filter-arrow\" id=\"lf3-filter-next\" aria-label=\"Siguientes filtros\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18L15 12L9 6\" fill=\"none\" \/><\/svg>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lf3-projects-grid\" id=\"lf3-projects-grid\">\n                                        <div class=\"lf3-cat-separator\" data-cat=\"ecommerce\">\n                        <span>Tienda Online<\/span>\n                    <\/div>\n                                        <a class=\"lf3-project-card\" data-cat=\"ecommerce\"\n                       href=\"https:\/\/tailandiacream.com\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver TailandiaCream\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/tailandiacream.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/tailandiacream.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">TailandiaCream<\/div>\n                            <div class=\"lf3-project-cat\">Tienda Online \u00b7 Cosm\u00e9tica<\/div>\n                        <\/div>\n                    <\/a>\n                                        <a class=\"lf3-project-card\" data-cat=\"ecommerce\"\n                       href=\"https:\/\/invitingall.com\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver InvitingAll\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/invitingall.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/invitingall.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">InvitingAll<\/div>\n                            <div class=\"lf3-project-cat\">Tienda Online \u00b7 Invitaciones Digitales<\/div>\n                        <\/div>\n                    <\/a>\n                                                            <div class=\"lf3-cat-separator\" data-cat=\"landing\">\n                        <span>Landing Page<\/span>\n                    <\/div>\n                                        <a class=\"lf3-project-card\" data-cat=\"landing\"\n                       href=\"https:\/\/quipecos.com\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver QuipEcos\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/quipecos.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/quipecos.2.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">QuipEcos<\/div>\n                            <div class=\"lf3-project-cat\">Landing Page \u00b7 Recaudaci\u00f3n<\/div>\n                        <\/div>\n                    <\/a>\n                                        <a class=\"lf3-project-card\" data-cat=\"landing\"\n                       href=\"https:\/\/e99.mx\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver e99 Branding\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/e99.mx_.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/e99.mx_.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-partner-badge\">Socio<\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">e99 Branding<\/div>\n                            <div class=\"lf3-project-cat\">Landing Page \u00b7 Agencia de Contenido<\/div>\n                        <\/div>\n                    <\/a>\n                                        <a class=\"lf3-project-card\" data-cat=\"landing\"\n                       href=\"https:\/\/multycon.mx\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver Multycon\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/multycon.mx_.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/multycon.mx_.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">Multycon<\/div>\n                            <div class=\"lf3-project-cat\">Landing Page \u00b7 Construcci\u00f3n Industrial<\/div>\n                        <\/div>\n                    <\/a>\n                                                            <div class=\"lf3-cat-separator\" data-cat=\"servicios\">\n                        <span>Servicios<\/span>\n                    <\/div>\n                                        <a class=\"lf3-project-card\" data-cat=\"servicios\"\n                       href=\"https:\/\/embarquesrd.com\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver Embarques RD\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/embarquesrd.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/embarquesrd.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">Embarques RD<\/div>\n                            <div class=\"lf3-project-cat\">Web \u00b7 Panel de Administraci\u00f3n<\/div>\n                        <\/div>\n                    <\/a>\n                                        <a class=\"lf3-project-card\" data-cat=\"servicios\"\n                       href=\"https:\/\/twinadvisorsgroup.com\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver Twin Advisors\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/twinadvisorsgroup.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/twinadvisorsgroup.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">Twin Advisors<\/div>\n                            <div class=\"lf3-project-cat\">Web Informativa \u00b7 Consultor\u00eda<\/div>\n                        <\/div>\n                    <\/a>\n                                        <a class=\"lf3-project-card\" data-cat=\"servicios\"\n                       href=\"https:\/\/dortega.mx\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver D&#039;Ortega\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/dortega.mx_.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/dortega.mx_.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">D&#039;Ortega<\/div>\n                            <div class=\"lf3-project-cat\">Web de Negocio \u00b7 Manufactura<\/div>\n                        <\/div>\n                    <\/a>\n                                                            <div class=\"lf3-cat-separator\" data-cat=\"donacion\">\n                        <span>Donaci\u00f3n<\/span>\n                    <\/div>\n                                        <a class=\"lf3-project-card\" data-cat=\"donacion\"\n                       href=\"https:\/\/theliffoundation.org\"\n                       target=\"_blank\" rel=\"noopener noreferrer\"\n                       aria-label=\"Ver The Lif Foundation\">\n                                                <video data-src=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/theliffoundation.webm\"\n                               poster=\"https:\/\/lafao.dev\/wp-content\/uploads\/2026\/05\/theliffoundation.png\"\n                               loop muted playsinline preload=\"none\"\n                               style=\"width:100%;height:100%;object-fit:contain;object-position:top center;display:block;background:transparent;\"><\/video>\n                                                <div class=\"lf3-project-overlay\"><\/div>\n                        <div class=\"lf3-project-ext\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n                                <polyline points=\"15 3 21 3 21 9\"\/>\n                                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n                            <\/svg>\n                        <\/div>\n                                                <div class=\"lf3-project-info\">\n                            <div class=\"lf3-project-name\">The Lif Foundation<\/div>\n                            <div class=\"lf3-project-cat\">Web de Donaci\u00f3n \u00b7 ONG<\/div>\n                        <\/div>\n                    <\/a>\n                                                        <\/div>\n\n            <\/div><!-- \/.lf3-section M\u00c1S PROYECTOS -->\n\n\n            <!-- \u2500\u2500 OPINIONES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <div class=\"lf3-section lf3-section-reviews\">\n\n                <div class=\"lf3-badge\">\n                    <span class=\"lf3-badge-dot\"><\/span>\n                    Resultados y Experiencias Reales\n                <\/div>\n\n                <div class=\"lf3-section-row\">\n                    <h2>Lo que dicen nuestros clientes<\/h2>\n                <\/div>\n\n                <div class=\"lf3-carousel-container\">\n                    <button class=\"lf3-carousel-btn prev\" id=\"lf3-review-prev\" aria-label=\"Anterior\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18L9 12L15 6\" \/><\/svg>\n                    <\/button>\n\n                    <div class=\"lf3-carousel-track\" id=\"lf3-review-track\">\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">Hizo un gran trabajo comunic\u00e1ndose durante todo el proyecto y lo volver\u00eda a contratar. La \u00fanica novedad es que no habla ingl\u00e9s, aunque su perfil dec\u00eda que era fluido, y creo que usa un traductor de IA para comunicarse por mensajes.<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/twinadvisorsgroup.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=11\"\n                                 alt=\"erikschweiss\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">erikschweiss<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Muy educado y atento, con mucho conocimiento.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/embarquesrd.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=22\"\n                                 alt=\"bestmoving\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">bestmoving<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente Lafao es un crack!! El mejor para dise\u00f1o web 100% recomendado. Muy profesional. Muy r\u00e1pido y muy buena persona&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/innomundoautomotriz.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=33\"\n                                 alt=\"psdg2197\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">psdg2197<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddea\ud83c\udde8 Ecuador<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente trabajo de Johao en el desarrollo y finalizaci\u00f3n de nuestra p\u00e1gina web. Siempre mostr\u00f3 profesionalismo, gran disposici\u00f3n para resolver detalles t\u00e9cnicos y un seguimiento constante hasta lograr el resultado final. Muy recomendable.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/dortega.mx\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=44\"\n                                 alt=\"luislozano\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">luislozano<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">Hizo un gran trabajo comunic\u00e1ndose durante todo el proyecto y lo volver\u00eda a contratar. La \u00fanica novedad es que no habla ingl\u00e9s, aunque su perfil dec\u00eda que era fluido, y creo que usa un traductor de IA para comunicarse por mensajes.<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/twinadvisorsgroup.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=11\"\n                                 alt=\"erikschweiss\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">erikschweiss<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Muy educado y atento, con mucho conocimiento.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/embarquesrd.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=22\"\n                                 alt=\"bestmoving\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">bestmoving<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente Lafao es un crack!! El mejor para dise\u00f1o web 100% recomendado. Muy profesional. Muy r\u00e1pido y muy buena persona&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/innomundoautomotriz.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=33\"\n                                 alt=\"psdg2197\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">psdg2197<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddea\ud83c\udde8 Ecuador<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente trabajo de Johao en el desarrollo y finalizaci\u00f3n de nuestra p\u00e1gina web. Siempre mostr\u00f3 profesionalismo, gran disposici\u00f3n para resolver detalles t\u00e9cnicos y un seguimiento constante hasta lograr el resultado final. Muy recomendable.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/dortega.mx\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=44\"\n                                 alt=\"luislozano\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">luislozano<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">Hizo un gran trabajo comunic\u00e1ndose durante todo el proyecto y lo volver\u00eda a contratar. La \u00fanica novedad es que no habla ingl\u00e9s, aunque su perfil dec\u00eda que era fluido, y creo que usa un traductor de IA para comunicarse por mensajes.<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/twinadvisorsgroup.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=11\"\n                                 alt=\"erikschweiss\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">erikschweiss<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Muy educado y atento, con mucho conocimiento.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/embarquesrd.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=22\"\n                                 alt=\"bestmoving\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">bestmoving<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente Lafao es un crack!! El mejor para dise\u00f1o web 100% recomendado. Muy profesional. Muy r\u00e1pido y muy buena persona&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/innomundoautomotriz.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=33\"\n                                 alt=\"psdg2197\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">psdg2197<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddea\ud83c\udde8 Ecuador<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente trabajo de Johao en el desarrollo y finalizaci\u00f3n de nuestra p\u00e1gina web. Siempre mostr\u00f3 profesionalismo, gran disposici\u00f3n para resolver detalles t\u00e9cnicos y un seguimiento constante hasta lograr el resultado final. Muy recomendable.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/dortega.mx\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=44\"\n                                 alt=\"luislozano\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">luislozano<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">Hizo un gran trabajo comunic\u00e1ndose durante todo el proyecto y lo volver\u00eda a contratar. La \u00fanica novedad es que no habla ingl\u00e9s, aunque su perfil dec\u00eda que era fluido, y creo que usa un traductor de IA para comunicarse por mensajes.<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/twinadvisorsgroup.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=11\"\n                                 alt=\"erikschweiss\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">erikschweiss<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Muy educado y atento, con mucho conocimiento.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/embarquesrd.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=22\"\n                                 alt=\"bestmoving\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">bestmoving<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente Lafao es un crack!! El mejor para dise\u00f1o web 100% recomendado. Muy profesional. Muy r\u00e1pido y muy buena persona&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/innomundoautomotriz.com\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=33\"\n                                 alt=\"psdg2197\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">psdg2197<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddea\ud83c\udde8 Ecuador<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <div class=\"lf3-review-card\">\n                        <div class=\"lf3-quote-icon\">\"<\/div>\n                        <p class=\"lf3-review-text\">&quot;Excelente trabajo de Johao en el desarrollo y finalizaci\u00f3n de nuestra p\u00e1gina web. Siempre mostr\u00f3 profesionalismo, gran disposici\u00f3n para resolver detalles t\u00e9cnicos y un seguimiento constante hasta lograr el resultado final. Muy recomendable.&quot;<\/p>\n                        <div class=\"lf3-stars\">\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star \">\u2605<\/span>\n                                                        <span class=\"lf3-star empty\">\u2605<\/span>\n                                                    <\/div>\n                        <a href=\"https:\/\/dortega.mx\/\" target=\"_blank\" class=\"lf3-btn-visit\">\n                            Visitar web\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\"\/>\n                            <\/svg>\n                        <\/a>\n                        <div class=\"lf3-reviewer\">\n                            <img src=\"https:\/\/i.pravatar.cc\/80?img=44\"\n                                 alt=\"luislozano\" loading=\"lazy\" decoding=\"async\">\n                            <div>\n                                <div class=\"lf3-reviewer-name\">luislozano<\/div>\n                                <div class=\"lf3-reviewer-country\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/div>\n                            <\/div>\n                            <div class=\"lf3-reviewer-fi\" title=\"Fiverr\">fi<\/div>\n                        <\/div>\n                    <\/div>\n                                            <\/div>\n\n                    <button class=\"lf3-carousel-btn next\" id=\"lf3-review-next\" aria-label=\"Siguiente\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18L15 12L9 6\" \/><\/svg>\n                    <\/button>\n                <\/div>\n\n                <div class=\"lf3-fiverr-link\">\n                    <a href=\"https:\/\/www.fiverr.com\/s\/m5lleP8\" target=\"_blank\" rel=\"noopener\">\n                        <span class=\"lf3-fi-icon\">fi<\/span>\n                        Ver perfil completo en Fiverr \u2192\n                    <\/a>\n                <\/div>\n\n            <\/div><!-- \/.lf3-section OPINIONES -->\n\n        <\/div><!-- \/.lf3-sections-wrap -->\n\n\n        <!-- \u2550\u2550 CTA BANNER \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        <div class=\"lf3-cta-top-divider\"><\/div>\n        <section class=\"lf3-cta-section\">\n\n            <div class=\"lf3-cta-dot-matrix left\"><\/div>\n            <div class=\"lf3-cta-dot-matrix right\"><\/div>\n\n            <!-- Geometr\u00eda decorativa SVG -->\n            <div class=\"lf3-cta-bg-lines-container\">\n                <svg class=\"lf3-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                    <!-- 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            <div class=\"lf3-cta-inner\">\n\n                <h2 class=\"lf3-cta-title\">\u00bfTienes un proyecto en mente?<\/h2>\n\n                <p class=\"lf3-cta-subtitle\">\n                    Cu\u00e9ntanoslo. Te diremos honestamente si podemos ayudarte \u2014 o no.\n                <\/p>\n\n                <div class=\"lf3-cta-buttons\">\n                    <a href=\"https:\/\/lafao.dev\/contacto\/\"\n                       class=\"lf3-cta-btn lf3-cta-btn-primary\">\n                        Quiero saber si aplico <span class=\"lf3-cta-arrow\">\u2192<\/span>\n                    <\/a>\n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n    <\/div><!-- \/.lf3-wrap -->\n\n    <!-- ======================================================\n         JAVASCRIPT\n    ====================================================== -->\n    <script>\n    (function(){\n        'use strict';\n\n        document.addEventListener('DOMContentLoaded', function(){\n\n            \/* \u2500\u2500 Lazy loading de videos (IntersectionObserver) \u2500\u2500 *\/\n            function initLazyVideos() {\n                var gridVideos = document.querySelectorAll('.lf3-project-card video[data-src]');\n                if ('IntersectionObserver' in window && gridVideos.length) {\n                    var vidObs = new IntersectionObserver(function(entries) {\n                        entries.forEach(function(entry) {\n                            var v = entry.target;\n                            if (entry.isIntersecting) {\n                                if (v.dataset.src && !v.getAttribute('src')) {\n                                    v.src = v.dataset.src;\n                                }\n                                v.play().catch(function(){});\n                            } else {\n                                v.pause();\n                            }\n                        });\n                    }, { rootMargin: '200px 0px', threshold: 0.1 });\n                    gridVideos.forEach(function(v){ vidObs.observe(v); });\n                } else {\n                    gridVideos.forEach(function(v){\n                        if (v.dataset.src) { v.src = v.dataset.src; }\n                        v.play().catch(function(){});\n                    });\n                }\n            }\n            \n            if (window.requestIdleCallback) {\n                requestIdleCallback(initLazyVideos);\n            } else {\n                setTimeout(initLazyVideos, 300);\n            }\n\n            \/* \u2500\u2500 Filtros de proyectos \u2500\u2500 *\/\n            var filterBtns   = document.querySelectorAll('.lf3-filter-btn');\n            var projectCards = document.querySelectorAll('.lf3-project-card');\n            var isFiltering  = false;\n            var filterTimeout = null;\n\n            \/\/ Funci\u00f3n para centrar el filtro activo\n            function centerActiveFilter(smooth) {\n                var container = document.getElementById('lf3-filters');\n                var activeBtn = document.querySelector('.lf3-filter-btn.active');\n                if (container && activeBtn) {\n                    var cR = container.getBoundingClientRect();\n                    var bR = activeBtn.getBoundingClientRect();\n                    var offset = bR.left - cR.left - (cR.width \/ 2) + (bR.width \/ 2);\n                    if (smooth && 'scrollBehavior' in document.documentElement.style) {\n                        container.scrollBy({ left: offset, behavior: 'smooth' });\n                    } else {\n                        container.scrollLeft += offset;\n                    }\n                }\n            }\n\n            filterBtns.forEach(function(btn){\n                btn.addEventListener('click', function(){\n                    isFiltering = true; \/\/ Bloquea temporalmente el detector de scroll\n                    clearTimeout(filterTimeout);\n                    var filter = btn.getAttribute('data-filter');\n                    filterBtns.forEach(function(b){ b.classList.remove('active'); });\n                    btn.classList.add('active');\n                    projectCards.forEach(function(card){\n                        if (filter === 'todos' || card.getAttribute('data-cat') === filter) {\n                            card.classList.remove('hidden');\n                        } else {\n                            card.classList.add('hidden');\n                        }\n                    });\n                    document.querySelectorAll('.lf3-cat-separator').forEach(function(sep){\n                        if (filter === 'todos') {\n                            sep.classList.remove('hidden');\n                        } else {\n                            sep.classList.add('hidden');\n                        }\n                    });\n\n                    \/\/ Centrar suavemente la categor\u00eda seleccionada para que siempre sea visible\n                    centerActiveFilter(true);\n                    updateFilterArrows();\n\n                    \/\/ Hacer scroll autom\u00e1tico al primer proyecto\/categor\u00eda de la selecci\u00f3n\n                    setTimeout(function() {\n                        var grid = document.getElementById('lf3-projects-grid');\n                        if (grid) {\n                            var headerOffset = 0;\n                            \/\/ Buscar la altura de elementos fijos en pantalla (men\u00fa, admin bar, etc)\n                            var fixedEls = document.querySelectorAll('#wpadminbar, header, nav, .site-header, .lf3-filters-sticky');\n                            fixedEls.forEach(function(el) {\n                                var pos = window.getComputedStyle(el).position;\n                                if (pos === 'fixed' || pos === 'sticky') {\n                                    var b = el.getBoundingClientRect().bottom;\n                                    if (b > headerOffset) headerOffset = b;\n                                }\n                            });\n\n                            \/\/ Compensar por la barra de filtros si a\u00fan no est\u00e1 sticky\n                            var filtersWrap = document.querySelector('.lf3-filters-wrapper');\n                            if (filtersWrap && !filtersWrap.classList.contains('lf3-filters-sticky')) {\n                                headerOffset += filtersWrap.offsetHeight;\n                            }\n\n                            var target = document.querySelector('.lf3-cat-separator:not(.hidden)') || document.querySelector('.lf3-project-card:not(.hidden)') || grid;\n                            var yPos = target.getBoundingClientRect().top + window.pageYOffset - headerOffset - 24;\n                            \n                            window.scrollTo({ top: yPos, behavior: 'smooth' });\n                            \n                            \/\/ Desbloquea el detector tras finalizar el scroll suave\n                            filterTimeout = setTimeout(function() { isFiltering = false; }, 800);\n                        } else {\n                            isFiltering = false;\n                        }\n                    }, 60);\n                });\n            });\n\n            \/* \u2500\u2500 Navegaci\u00f3n de Filtros de proyectos (Flechas) \u2500\u2500 *\/\n            var filterPrev = document.getElementById('lf3-filter-prev');\n            var filterNext = document.getElementById('lf3-filter-next');\n\n            function updateFilterArrows() {\n                var activeBtn = document.querySelector('.lf3-filter-btn.active');\n                if (!activeBtn) return;\n                if (filterPrev) filterPrev.disabled = !activeBtn.previousElementSibling;\n                if (filterNext) filterNext.disabled = !activeBtn.nextElementSibling;\n            }\n\n            updateFilterArrows();\n\n            if (filterPrev) filterPrev.addEventListener('click', function() { var activeBtn = document.querySelector('.lf3-filter-btn.active'); if (activeBtn && activeBtn.previousElementSibling) activeBtn.previousElementSibling.click(); });\n            if (filterNext) filterNext.addEventListener('click', function() { var activeBtn = document.querySelector('.lf3-filter-btn.active'); if (activeBtn && activeBtn.nextElementSibling) activeBtn.nextElementSibling.click(); });\n\n            \/* \u2500\u2500 Barra de filtros flotante (optimizada) \u2500\u2500 *\/\n            var stickyWrapper        = document.querySelector('.lf3-filters-wrapper');\n            var masProyectosSection  = document.getElementById('mas-proyectos');\n            var stickyPlaceholder    = null;\n            var stickyOriginalParent = null;\n            var stickyActive         = false;\n            var cachedNavH           = -1;   \/\/ se calcula una vez y se invalida en resize\n            var cachedPads           = null; \/\/ idem\n            var rafPending           = false;\n\n            function computeNavH() {\n                var max = 0;\n                var els = document.querySelectorAll(\n                    '#wpadminbar, header, nav, #masthead, .site-header, ' +\n                    '.ast-header-wrap, .header-wrap, [class*=\"sticky-header\"], [class*=\"fixed-header\"]'\n                );\n                for (var i = 0; i < els.length; i++) {\n                    var pos = window.getComputedStyle(els[i]).position;\n                    if (pos !== 'fixed' && pos !== 'sticky') continue;\n                    var b = els[i].getBoundingClientRect().bottom;\n                    if (b > max) max = b;\n                }\n                return max;\n            }\n\n            function computePads() {\n                var rect = masProyectosSection.getBoundingClientRect();\n                var cs   = window.getComputedStyle(masProyectosSection);\n                return {\n                    left:  Math.max(16, rect.left + (parseFloat(cs.paddingLeft)  || 0)),\n                    right: Math.max(16, window.innerWidth - rect.right + (parseFloat(cs.paddingRight) || 0))\n                };\n            }\n\n            function activateSticky() {\n                if (stickyActive) return;\n                stickyOriginalParent = stickyWrapper.parentNode;\n                var wh            = stickyWrapper.offsetHeight;\n                stickyPlaceholder = document.createElement('div');\n                stickyPlaceholder.style.height = wh + 'px';\n                stickyOriginalParent.insertBefore(stickyPlaceholder, stickyWrapper);\n                document.body.appendChild(stickyWrapper);\n                if (!cachedPads) cachedPads = computePads();\n                stickyWrapper.classList.add('lf3-filters-sticky');\n                stickyWrapper.style.top          = cachedNavH + 'px';\n                stickyWrapper.style.paddingLeft  = cachedPads.left  + 'px';\n                stickyWrapper.style.paddingRight = cachedPads.right + 'px';\n                stickyActive = true;\n\n                \/\/ Forzar centrado de la selecci\u00f3n al mover el DOM\n                centerActiveFilter(false);\n            }\n\n            function deactivateSticky() {\n                if (!stickyActive) return;\n                stickyWrapper.classList.remove('lf3-filters-sticky');\n                stickyWrapper.style.top = stickyWrapper.style.paddingLeft = stickyWrapper.style.paddingRight = '';\n                stickyOriginalParent.insertBefore(stickyWrapper, stickyPlaceholder);\n                stickyPlaceholder.parentNode.removeChild(stickyPlaceholder);\n                stickyPlaceholder = stickyOriginalParent = null;\n                stickyActive = false;\n\n                \/\/ Forzar centrado de la selecci\u00f3n al mover el DOM\n                centerActiveFilter(false);\n            }\n\n            \/\/ Funci\u00f3n para detectar la categor\u00eda activa al hacer scroll\n            function updateActiveCategoryOnScroll() {\n                if (isFiltering) return;\n                var grid = document.getElementById('lf3-projects-grid');\n                if (!grid) return;\n\n                var separators = grid.querySelectorAll('.lf3-cat-separator:not(.hidden)');\n                if (separators.length === 0) return;\n\n                var headerOffset = 0;\n                var fixedEls = document.querySelectorAll('#wpadminbar, header, nav, .site-header, .lf3-filters-sticky');\n                fixedEls.forEach(function(el) {\n                    var pos = window.getComputedStyle(el).position;\n                    if (pos === 'fixed' || pos === 'sticky') {\n                        var b = el.getBoundingClientRect().bottom;\n                        if (b > headerOffset) headerOffset = b;\n                    }\n                });\n\n                var threshold = headerOffset + 150; \n                var currentCat = null;\n                var gridRect = grid.getBoundingClientRect();\n\n                if (gridRect.top > threshold) {\n                    currentCat = (separators.length > 1) ? 'todos' : separators[0].getAttribute('data-cat');\n                } else {\n                    for (var i = 0; i < separators.length; i++) {\n                        if (separators[i].getBoundingClientRect().top <= threshold) {\n                            currentCat = separators[i].getAttribute('data-cat');\n                        } else { break; }\n                    }\n                    if (!currentCat && separators.length > 0) currentCat = separators[0].getAttribute('data-cat');\n                }\n\n                if (currentCat) {\n                    var activeBtn = document.querySelector('.lf3-filter-btn.active');\n                    var targetBtn = document.querySelector('.lf3-filter-btn[data-filter=\"' + currentCat + '\"]');\n                    \n                    if (targetBtn && activeBtn !== targetBtn) {\n                        if (currentCat === 'todos' && separators.length === 1) return;\n                        \n                        \/\/ Actualiza bot\u00f3n visualmente sin ocultar las dem\u00e1s tarjetas\n                        document.querySelectorAll('.lf3-filter-btn').forEach(function(b){ b.classList.remove('active'); });\n                        targetBtn.classList.add('active');\n                        \n                        centerActiveFilter(true);\n                        updateFilterArrows();\n                    }\n                }\n            }\n\n            function checkSticky() {\n                if (!stickyWrapper || !masProyectosSection) return;\n                if (cachedNavH < 0) cachedNavH = computeNavH();\n                var wrapperH   = stickyPlaceholder\n                    ? parseFloat(stickyPlaceholder.style.height)\n                    : stickyWrapper.offsetHeight;\n                var naturalTop = (stickyActive ? stickyPlaceholder : stickyWrapper).getBoundingClientRect().top;\n                var secBottom  = masProyectosSection.getBoundingClientRect().bottom;\n                var should     = naturalTop < cachedNavH && secBottom > cachedNavH + wrapperH + 8;\n\n                if (should && !stickyActive)      activateSticky();\n                else if (!should && stickyActive) deactivateSticky();\n                else if (stickyActive)            stickyWrapper.style.top = cachedNavH + 'px';\n            }\n\n            window.addEventListener('scroll', function() {\n                if (rafPending) return;\n                rafPending = true;\n                requestAnimationFrame(function() { rafPending = false; checkSticky(); updateActiveCategoryOnScroll(); });\n            }, { passive: true });\n\n            window.addEventListener('resize', function() {\n                cachedNavH = computeNavH();\n                cachedPads = null;\n                if (stickyActive) {\n                    cachedPads = computePads();\n                    stickyWrapper.style.top          = cachedNavH + 'px';\n                    stickyWrapper.style.paddingLeft  = cachedPads.left  + 'px';\n                    stickyWrapper.style.paddingRight = cachedPads.right + 'px';\n                } else {\n                    checkSticky();\n                }\n            }, { passive: true });\n\n            cachedNavH = computeNavH();\n            setTimeout(checkSticky, 200);\n            setTimeout(function() {\n                checkSticky();\n                updateActiveCategoryOnScroll();\n            }, 200);\n\n            \/* \u2500\u2500 Carousel Infinito de Testimonios \u2500\u2500 *\/\n            var reviewTrack = document.getElementById('lf3-review-track');\n            var reviewPrev  = document.getElementById('lf3-review-prev');\n            var reviewNext  = document.getElementById('lf3-review-next');\n\n            if (reviewTrack) {\n                \/\/ Posicionar en el medio para permitir scroll en ambas direcciones\n                setTimeout(function() {\n                    var card = reviewTrack.querySelector('.lf3-review-card');\n                    if (card) {\n                        var style = window.getComputedStyle(reviewTrack);\n                        var gap = parseFloat(style.gap) || 20;\n                        reviewTrack.classList.add('no-transition');\n                        reviewTrack.scrollLeft = (card.offsetWidth + gap) * 4;\n                        reviewTrack.offsetHeight;\n                        setTimeout(function() {\n                            reviewTrack.classList.remove('no-transition');\n                        }, 50);\n                    }\n                }, 50);\n\n                \/\/ Intersection Observer para el efecto de enfoque (fade\/color)\n                var rCards = reviewTrack.querySelectorAll('.lf3-review-card');\n                if ('IntersectionObserver' in window) {\n                    var cardObs = new IntersectionObserver(function(entries) {\n                        entries.forEach(function(e) {\n                            if (e.isIntersecting) { e.target.classList.add('focused'); } \n                            else { e.target.classList.remove('focused'); }\n                        });\n                    }, { root: reviewTrack, rootMargin: '0px', threshold: 0.6 });\n                    rCards.forEach(function(c) { cardObs.observe(c); });\n                } else {\n                    rCards.forEach(function(c) { c.classList.add('focused'); });\n                }\n\n                var autoPlayInterval;\n                var scrollTimeout;\n                var userInteracted = false;\n\n                function startAutoPlay() {\n                    if (userInteracted) return;\n                    stopAutoPlay();\n                    autoPlayInterval = setInterval(function() {\n                        var card = reviewTrack.querySelector('.lf3-review-card');\n                        var style = window.getComputedStyle(reviewTrack);\n                        var gap = parseFloat(style.gap) || 20;\n                        var cardWidth = card ? (card.offsetWidth + gap) : 340;\n                        reviewTrack.scrollBy({ left: cardWidth, behavior: 'smooth' });\n                    }, 3000);\n                }\n\n                function stopAutoPlay() {\n                    if (autoPlayInterval) clearInterval(autoPlayInterval);\n                }\n\n                \/\/ Iniciar rotaci\u00f3n autom\u00e1tica al cargar\n                startAutoPlay();\n\n                if (reviewPrev) {\n                    reviewPrev.addEventListener('click', function() {\n                        userInteracted = true;\n                        stopAutoPlay();\n                        var card = reviewTrack.querySelector('.lf3-review-card');\n                        var style = window.getComputedStyle(reviewTrack);\n                        var gap = parseFloat(style.gap) || 20;\n                        var cardWidth = card ? (card.offsetWidth + gap) : 340;\n                        reviewTrack.scrollBy({ left: -cardWidth, behavior: 'smooth' });\n                    });\n                }\n                if (reviewNext) {\n                    reviewNext.addEventListener('click', function() {\n                        userInteracted = true;\n                        stopAutoPlay();\n                        var card = reviewTrack.querySelector('.lf3-review-card');\n                        var style = window.getComputedStyle(reviewTrack);\n                        var gap = parseFloat(style.gap) || 20;\n                        var cardWidth = card ? (card.offsetWidth + gap) : 340;\n                        reviewTrack.scrollBy({ left: cardWidth, behavior: 'smooth' });\n                    });\n                }\n\n                \/\/ Detener el movimiento autom\u00e1tico si el usuario toca o hace scroll manualmente\n                reviewTrack.addEventListener('touchstart', function() {\n                    userInteracted = true;\n                    stopAutoPlay();\n                }, { passive: true });\n                reviewTrack.addEventListener('mousedown', function() {\n                    userInteracted = true;\n                    stopAutoPlay();\n                }, { passive: true });\n                \/\/ Detener el movimiento autom\u00e1tico de forma permanente si el usuario interact\u00faa (toque, arrastre, clic o scroll)\n                ['touchstart', 'touchmove', 'mousedown', 'wheel'].forEach(function(evt) {\n                    reviewTrack.addEventListener(evt, function() {\n                        userInteracted = true;\n                        stopAutoPlay();\n                    }, { passive: true });\n                });\n\n                \/\/ Reanudar el movimiento al soltar el dedo o rat\u00f3n\n                reviewTrack.addEventListener('touchend', startAutoPlay, { passive: true });\n                reviewTrack.addEventListener('mouseup', startAutoPlay, { passive: true });\n                reviewTrack.addEventListener('mouseleave', startAutoPlay, { passive: true });\n\n                reviewTrack.addEventListener('scroll', function() {\n                    clearTimeout(scrollTimeout);\n                    scrollTimeout = setTimeout(function() {\n                            var card = reviewTrack.querySelector('.lf3-review-card');\n                            if (!card) return;\n                            var style = window.getComputedStyle(reviewTrack);\n                            var gap = parseFloat(style.gap) || 20;\n                            var cardWidth = card.offsetWidth + gap;\n                            var setWidth = cardWidth * 4;\n                            \n                            \/\/ Salto invisible cuando nos acercamos a los bordes para hacerlo infinito\n                            if (reviewTrack.scrollLeft >= setWidth * 2.5) {\n                                reviewTrack.classList.add('no-transition');\n                                reviewTrack.scrollLeft -= setWidth;\n                                void reviewTrack.offsetWidth; \/\/ Forzar repintado inmediato sin timer visual\n                                reviewTrack.classList.remove('no-transition');\n                            } else if (reviewTrack.scrollLeft <= cardWidth * 0.5) {\n                                reviewTrack.classList.add('no-transition');\n                                reviewTrack.scrollLeft += setWidth;\n                                void reviewTrack.offsetWidth; \/\/ Forzar repintado inmediato sin timer visual\n                                reviewTrack.classList.remove('no-transition');\n                            }\n                    }, 100);\n                }, { passive: true });\n            }\n\n        });\n\n    })();\n    <\/script>\n\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-433","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>Portafolio de Desarrollo Web: Casos de \u00c9xito Reales<\/title>\n<meta name=\"description\" content=\"Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.\" \/>\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\/portafolio\/\" \/>\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=\"Portafolio de Desarrollo Web: Casos de \u00c9xito Reales\" \/>\n<meta property=\"og:description\" content=\"Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lafao.dev\/en\/portafolio\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T21:36:19+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\\\/portafolio\\\/\",\"url\":\"https:\\\/\\\/lafao.dev\\\/portafolio\\\/\",\"name\":\"Portafolio de Desarrollo Web: Casos de \u00c9xito Reales\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lafao.dev\\\/#website\"},\"datePublished\":\"2026-05-02T17:54:52+00:00\",\"dateModified\":\"2026-05-13T21:36:19+00:00\",\"description\":\"Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lafao.dev\\\/portafolio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lafao.dev\\\/portafolio\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lafao.dev\\\/portafolio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/lafao.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"portafolio\"}]},{\"@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":"Portafolio de Desarrollo Web: Casos de \u00c9xito Reales","description":"Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.","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\/portafolio\/","og_locale":"en_US","og_type":"article","og_title":"[:es]Portafolio de Desarrollo Web: Casos de \u00c9xito Reales[:]","og_description":"[:es]Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.[:]","og_url":"https:\/\/lafao.dev\/en\/portafolio\/","article_modified_time":"2026-05-13T21:36:19+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\/portafolio\/","url":"https:\/\/lafao.dev\/portafolio\/","name":"Portafolio de Desarrollo Web: Casos de \u00c9xito Reales","isPartOf":{"@id":"https:\/\/lafao.dev\/#website"},"datePublished":"2026-05-02T17:54:52+00:00","dateModified":"2026-05-13T21:36:19+00:00","description":"Explora nuestros casos de \u00e9xito en desarrollo web. Tiendas online, landing pages y sistemas a medida respaldados por clientes internacionales.","breadcrumb":{"@id":"https:\/\/lafao.dev\/portafolio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lafao.dev\/portafolio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lafao.dev\/portafolio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/lafao.dev\/"},{"@type":"ListItem","position":2,"name":"portafolio"}]},{"@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\/433","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=433"}],"version-history":[{"count":1,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages\/433\/revisions"}],"predecessor-version":[{"id":434,"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/pages\/433\/revisions\/434"}],"wp:attachment":[{"href":"https:\/\/lafao.dev\/en\/wp-json\/wp\/v2\/media?parent=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}