{"id":393,"date":"2026-05-24T13:38:43","date_gmt":"2026-05-24T18:38:43","guid":{"rendered":"http:\/\/localhost\/mkt\/?page_id=393"},"modified":"2026-05-24T13:39:04","modified_gmt":"2026-05-24T18:39:04","slug":"landing-page-de-alta-conversion","status":"publish","type":"page","link":"https:\/\/jorgealvarez.me\/en\/landing-page-de-alta-conversion\/","title":{"rendered":"Landing Page de Alta Conversi\u00f3n"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Landing Page de Alta Conversi\u00f3n - Jorge Antonio<\/title>\n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brandBg: '#FFFFFF',\n brandText: '#111827',\n brandAccent: '#FF8A00',\n brandSecondary: '#6B7280',\n brandMuted: '#F3F4F6'\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n title: ['Manrope', 'sans-serif']\n }\n }\n }\n }\n <\/script>\n <!-- Google Fonts: Inter, Manrope & Playfair Display (para fallback serif de logo) -->\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&family=Manrope:wght@700;800&family=Playfair+Display:ital,wght@0,600;0,800;1,600&display=swap\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #0b0f19;\n color: #f3f4f6;\n }\n .title-font {\n font-family: 'Manrope', sans-serif;\n font-weight: 800;\n }\n .logo-font {\n font-family: 'Playfair Display', Georgia, serif;\n }\n \/* Page aspect ratio simulation (1080x1920) *\/\n .editorial-page {\n width: 540px;\n height: 960px;\n background-color: #FFFFFF;\n color: #111827;\n position: relative;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n page-break-after: always;\n }\n \/* Custom scrollbar for control panel *\/\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: #111827;\n }\n ::-webkit-scrollbar-thumb {\n background: #374151;\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #4B5563;\n }\n \/* CSS print configurations for seamless PDF generation *\/\n @media print {\n body {\n background: none !important;\n color: #111827 !important;\n }\n .no-print {\n display: none !important;\n }\n .print-container {\n display: block !important;\n padding: 0 !important;\n margin: 0 !important;\n background: white !important;\n }\n .editorial-page {\n width: 100vw !important;\n height: 100vh !important;\n box-shadow: none !important;\n margin: 0 !important;\n page-break-after: always !important;\n page-break-inside: avoid !important;\n display: flex !important;\n flex-direction: column !important;\n justify-content: space-between !important;\n }\n @page {\n size: portrait;\n margin: 0;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col lg:flex-row overflow-x-hidden antialiased\">\n\n <!-- LEFT SIDE: Interactivity Panel & Guide Info (No-Print) -->\n <aside class=\"no-print lg:w-96 w-full bg-[#111827] border-b lg:border-b-0 lg:border-r border-gray-800 p-8 flex flex-col justify-between shrink-0 z-10\">\n <div>\n <!-- Main Sidebar Logo with white text inversion filters -->\n <div class=\"mb-8\">\n <img decoding=\"async\" src=\"logo-jorge-antonio.png\" alt=\"Jorge Antonio Logo\" class=\"h-8 w-auto object-contain block brightness-0 invert\" onerror=\"this.style.display='none'; document.getElementById('logo-fallback-sidebar').classList.remove('hidden');\">\n <!-- Typographic Clever Fallback (White version) -->\n <div id=\"logo-fallback-sidebar\" class=\"hidden flex items-center select-none\">\n <span class=\"text-xl font-bold logo-font text-white tracking-tight\">JORG<\/span>\n <div class=\"inline-flex gap-[2px] rotate-[35deg] mx-1.5 -translate-y-[1px] shrink-0\">\n <span class=\"w-[4px] h-[18px] bg-[#FF8A00] rounded-full\"><\/span>\n <span class=\"w-[4px] h-[18px] bg-[#FF8A00] rounded-full\"><\/span>\n <span class=\"w-[4px] h-[18px] bg-[#FF8A00] rounded-full\"><\/span>\n <\/div>\n <span class=\"text-xl font-bold logo-font text-white tracking-tight\">ANTONIO<\/span>\n <\/div>\n <\/div>\n\n <!-- Badge -->\n <div class=\"inline-flex items-center gap-2 bg-gray-800 text-gray-300 text-xs px-3 py-1.5 rounded-full mb-6 font-medium\">\n <span class=\"w-2 h-2 rounded-full bg-[#FF8A00] animate-pulse\"><\/span>\n PREVIEW INTERACTIVO\n <\/div>\n \n <h1 class=\"title-font text-2xl font-bold text-white mb-2 leading-tight\">\n Landing Page Premium Guide\n <\/h1>\n <p class=\"text-gray-400 text-sm mb-6 leading-relaxed\">\n Checklist interactivo y exportable a PDF con dise\u00f1o optimizado para m\u00f3vil y lectura editorial digital de alta gama.\n <\/p>\n\n <!-- Progress Tracker -->\n <div class=\"bg-gray-900\/60 border border-gray-800 rounded-xl p-5 mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <span class=\"text-xs font-semibold uppercase tracking-wider text-gray-400\">Progreso Checklist<\/span>\n <span id=\"progress-percent\" class=\"text-sm font-bold text-[#FF8A00] title-font\">0%<\/span>\n <\/div>\n <!-- Progress bar -->\n <div class=\"w-full bg-gray-800 h-2 rounded-full overflow-hidden\">\n <div id=\"progress-bar\" class=\"bg-[#FF8A00] h-full rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-xs text-gray-500 mt-3 leading-normal\">\n Interact\u00faa directamente en la **P\u00e1gina 3**. Haz clic en los checks para calcular tu optimizaci\u00f3n de conversi\u00f3n.\n <\/p>\n <\/div>\n\n <!-- Features Info -->\n <div class=\"space-y-4 mb-8\">\n <div class=\"flex gap-3 items-start text-xs text-gray-400\">\n <svg class=\"w-4 h-4 text-[#FF8A00] shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n <span><strong>Ratio 1080x1920:<\/strong> Proporci\u00f3n vertical optimizada para pantallas y formatos editoriales modernos.<\/span>\n <\/div>\n <div class=\"flex gap-3 items-start text-xs text-gray-400\">\n <svg class=\"w-4 h-4 text-[#FF8A00] shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"><\/path><\/svg>\n <span><strong>Marca unificada:<\/strong> Configurado bajo el dominio oficial jorgealvarez.me.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Action Area -->\n <div class=\"space-y-3\">\n <button onclick=\"window.print()\" class=\"w-full bg-white hover:bg-gray-100 text-[#111827] transition-all py-3.5 px-4 rounded-lg font-semibold text-sm flex items-center justify-center gap-2.5 shadow-xl\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z\"><\/path><\/svg>\n Exportar PDF de Gu\u00eda\n <\/button>\n <p class=\"text-[10px] text-gray-500 text-center\">\n Para guardar el PDF de alta resoluci\u00f3n, selecciona <br><strong>\"Guardar como PDF\"<\/strong> en la ventana de impresi\u00f3n.\n <\/p>\n <\/div>\n <\/aside>\n\n <!-- RIGHT SIDE: Document Pages Grid -->\n <main class=\"print-container flex-1 overflow-y-auto flex flex-col items-center gap-12 py-12 px-4 bg-[#0e131f] select-none\">\n \n <!-- ==================== P\u00c1GINA 1: PORTADA ==================== -->\n <section id=\"page-1\" class=\"editorial-page flex flex-col justify-between p-16 overflow-hidden\">\n <!-- Grid decorative light line -->\n <div class=\"absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF8A00] to-transparent opacity-80\"><\/div>\n \n <!-- Cover Top Meta -->\n <div class=\"flex justify-between items-center\">\n <span class=\"text-[10px] uppercase tracking-[0.25em] font-semibold text-brandSecondary\">EDICI\u00d3N 2026<\/span>\n <span class=\"text-[10px] font-bold text-brandAccent bg-orange-50\/50 px-2.5 py-1 rounded\">ESTRATEGIA VISUAL<\/span>\n <\/div>\n\n <!-- Main Hero Block -->\n <div class=\"my-auto space-y-8\">\n <!-- Abstract Wireframe Icon (Stripe-like) -->\n <div class=\"w-16 h-16 rounded-xl border border-gray-200 flex items-center justify-center relative overflow-hidden bg-gradient-to-tr from-white to-orange-50\/30\">\n <div class=\"absolute inset-2 border border-dashed border-gray-200 rounded-lg flex flex-col justify-between p-1.5\">\n <div class=\"w-full h-1 bg-brandAccent\/30 rounded-full\"><\/div>\n <div class=\"w-1\/2 h-1 bg-brandSecondary\/20 rounded-full\"><\/div>\n <div class=\"w-4 h-4 rounded-md border border-brandAccent\/50 self-end flex items-center justify-center\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"space-y-4\">\n <h1 class=\"title-font text-[42px] leading-[1.1] text-brandText tracking-tight font-extrabold\">\n Landing Page<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brandText via-brandText to-brandSecondary\/80\">de Alta Conversi\u00f3n<\/span>\n <\/h1>\n <div class=\"w-12 h-1 bg-brandAccent\"><\/div>\n <\/div>\n\n <p class=\"text-sm text-brandSecondary leading-relaxed max-w-sm font-light\">\n Checklist estrat\u00e9gico estructurado para auditar y optimizar flujo visual, UX m\u00f3vil, velocidad de carga y detonadores de conversi\u00f3n.\n <\/p>\n <\/div>\n\n <!-- Cover Footer Brand info (Your Custom Logo + Web) -->\n <div class=\"border-t border-gray-100 pt-8 flex items-end justify-between\">\n <div class=\"space-y-3\">\n <!-- Jorge Antonio Logo Container -->\n <div class=\"relative\">\n <img decoding=\"async\" src=\"logo-jorge-antonio.png\" alt=\"Jorge Antonio Logo\" class=\"h-8 w-auto object-contain block\" onerror=\"this.style.display='none'; document.getElementById('logo-fallback-cover').classList.remove('hidden');\">\n <!-- Typographic Clever Fallback (Dark Text version) -->\n <div id=\"logo-fallback-cover\" class=\"hidden flex items-center select-none\">\n <span class=\"text-lg font-bold logo-font text-brandText tracking-tight\">JORG<\/span>\n <div class=\"inline-flex gap-[2px] rotate-[35deg] mx-1 -translate-y-[1px] shrink-0\">\n <span class=\"w-[3px] h-[14px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[3px] h-[14px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[3px] h-[14px] bg-brandAccent rounded-full\"><\/span>\n <\/div>\n <span class=\"text-lg font-bold logo-font text-brandText tracking-tight\">ANTONIO<\/span>\n <\/div>\n <\/div>\n <a href=\"https:\/\/jorgealvarez.me\" target=\"_blank\" class=\"block text-xs font-semibold tracking-wide text-brandText hover:text-brandAccent transition-colors\">\n jorgealvarez.me\n <\/a>\n <\/div>\n <div class=\"text-right space-y-1\">\n <span class=\"inline-block text-[10px] font-bold text-brandAccent uppercase tracking-[0.15em] bg-orange-50 px-2.5 py-1 rounded\">Recurso Gratuito<\/span>\n <span class=\"block text-[9px] text-brandSecondary\">\u00a9 2026 Jorge Antonio.<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- ==================== P\u00c1GINA 2: INTRODUCCI\u00d3N ==================== -->\n <section id=\"page-2\" class=\"editorial-page flex flex-col justify-between p-16\">\n <!-- Header -->\n <div class=\"flex justify-between items-center border-b border-gray-100 pb-5\">\n <span class=\"text-[10px] uppercase tracking-[0.25em] font-bold text-brandSecondary\">01 \/ MARCO ESTRAT\u00c9GICO<\/span>\n <!-- Small branding logo -->\n <div class=\"h-5 flex items-center\">\n <img decoding=\"async\" src=\"logo-jorge-antonio.png\" alt=\"Jorge Antonio Logo\" class=\"h-4.5 w-auto object-contain block\" onerror=\"this.style.display='none'; document.getElementById('logo-fallback-header-2').classList.remove('hidden');\">\n <div id=\"logo-fallback-header-2\" class=\"hidden flex items-center select-none\">\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">JORG<\/span>\n <div class=\"inline-flex gap-[1px] rotate-[35deg] mx-0.5 -translate-y-[0.5px] shrink-0\">\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <\/div>\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">ANTONIO<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Intro Content Body -->\n <div class=\"my-auto space-y-10\">\n <div class=\"space-y-3\">\n <span class=\"text-[10px] font-bold uppercase tracking-widest text-brandAccent\">El diagn\u00f3stico<\/span>\n <h2 class=\"title-font text-3xl font-extrabold text-brandText tracking-tight\">\n \u00bfPor qu\u00e9 una landing page no convierte?\n <\/h2>\n <\/div>\n\n <!-- Block 1 -->\n <div class=\"space-y-3\">\n <div class=\"flex items-center gap-2.5\">\n <span class=\"text-xs font-mono font-bold text-brandText\">01.<\/span>\n <h3 class=\"text-xs font-bold uppercase tracking-wider text-brandText\">La Fricci\u00f3n Cognitiva<\/h3>\n <\/div>\n <p class=\"text-xs text-brandSecondary leading-relaxed pl-6\">\n La mayor\u00eda de las visitas se pierden en los primeros 3 segundos. No es por falta de tr\u00e1fico cualificado, sino por una sobrecarga informativa o falta de un mensaje claro inmediatamente visible. Si el usuario debe esforzarse en comprender, decide marcharse.\n <\/p>\n <\/div>\n\n <!-- Block 2 -->\n <div class=\"space-y-3\">\n <div class=\"flex items-center gap-2.5\">\n <span class=\"text-xs font-mono font-bold text-brandText\">02.<\/span>\n <h3 class=\"text-xs font-bold uppercase tracking-wider text-brandText\">La Desconexi\u00f3n del Flujo<\/h3>\n <\/div>\n <p class=\"text-xs text-brandSecondary leading-relaxed pl-6\">\n Un embudo digital optimizado no depende de un solo elemento estrella. Funciona mediante un equilibrio sin\u00e9rgico y riguroso de seis pilares fundamentales:\n <\/p>\n <\/div>\n\n <!-- Six Pillars Grid Icons -->\n <div class=\"grid grid-cols-2 gap-3 pt-4 pl-6\">\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">Experiencia UX<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">Claridad Radical<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">Velocidad Pura<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">CTA Estrat\u00e9gico<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">Prueba Social<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-gray-50 border border-gray-100\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brandAccent\"><\/span>\n <span class=\"text-[11px] font-medium text-brandText\">Dise\u00f1o Mobile-First<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <div class=\"border-t border-gray-100 pt-6 flex justify-between items-center text-[10px] text-brandSecondary\">\n <span>02 \/ P\u00c1GINA DE INTRODUCCI\u00d3N<\/span>\n <a href=\"https:\/\/jorgealvarez.me\" target=\"_blank\" class=\"font-bold hover:text-brandAccent transition-colors\">jorgealvarez.me<\/a>\n <\/div>\n <\/section>\n\n\n <!-- ==================== P\u00c1GINA 3: CHECKLIST ==================== -->\n <section id=\"page-3\" class=\"editorial-page flex flex-col justify-between p-16\">\n <!-- Header -->\n <div class=\"flex justify-between items-center border-b border-gray-100 pb-5\">\n <span class=\"text-[10px] uppercase tracking-[0.25em] font-bold text-brandSecondary\">02 \/ COMPONENTES DE DISE\u00d1O<\/span>\n <!-- Small branding logo -->\n <div class=\"h-5 flex items-center\">\n <img decoding=\"async\" src=\"logo-jorge-antonio.png\" alt=\"Jorge Antonio Logo\" class=\"h-4.5 w-auto object-contain block\" onerror=\"this.style.display='none'; document.getElementById('logo-fallback-header-3').classList.remove('hidden');\">\n <div id=\"logo-fallback-header-3\" class=\"hidden flex items-center select-none\">\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">JORG<\/span>\n <div class=\"inline-flex gap-[1px] rotate-[35deg] mx-0.5 -translate-y-[0.5px] shrink-0\">\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <\/div>\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">ANTONIO<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Checklist Premium Content Grid -->\n <div class=\"my-auto space-y-7\">\n <div class=\"space-y-1\">\n <span class=\"text-[10px] font-bold uppercase tracking-widest text-brandAccent\">Auditor\u00eda en Acci\u00f3n<\/span>\n <h2 class=\"title-font text-2xl font-extrabold text-brandText tracking-tight\">Checklist Estrat\u00e9gico<\/h2>\n <\/div>\n\n <!-- Main Checklist Container -->\n <div class=\"grid grid-cols-2 gap-x-6 gap-y-5\">\n \n <!-- SECTION A: ESTRUCTURA -->\n <div class=\"space-y-3\">\n <h3 class=\"text-[11px] font-bold uppercase tracking-wider text-brandSecondary border-b border-gray-100 pb-1.5\">01 \/ Estructura<\/h3>\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Headline claro y conciso<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Subheadline a beneficio<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">CTA principal visible (Above)<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Jerarqu\u00eda visual correcta<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <!-- SECTION B: UX\/UI -->\n <div class=\"space-y-3\">\n <h3 class=\"text-[11px] font-bold uppercase tracking-wider text-brandSecondary border-b border-gray-100 pb-1.5\">02 \/ UX & UI<\/h3>\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Layout responsive mobile<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Espaciado generoso (Aire)<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Contraste crom\u00e1tico alto<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Dise\u00f1o limpio sin ruido<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <!-- SECTION C: PERFORMANCE -->\n <div class=\"space-y-3\">\n <h3 class=\"text-[11px] font-bold uppercase tracking-wider text-brandSecondary border-b border-gray-100 pb-1.5\">03 \/ Rendimiento<\/h3>\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Optimizaci\u00f3n de im\u00e1genes<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Lazy load en elementos<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Compresi\u00f3n Gzip \/ Brotli<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Core Web Vitals \u00f3ptimos<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <!-- SECTION D: CONVERSION -->\n <div class=\"space-y-3\">\n <h3 class=\"text-[11px] font-bold uppercase tracking-wider text-brandSecondary border-b border-gray-100 pb-1.5\">04 \/ Conversi\u00f3n<\/h3>\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Formularios ultra simples<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">CTA repetido estrat\u00e9gicamente<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Prueba social (Logos \/ Reviews)<\/span>\n <\/label>\n <label class=\"flex items-start gap-2.5 cursor-pointer group\">\n <input type=\"checkbox\" name=\"checklist-item\" class=\"item-checkbox mt-0.5 w-3.5 h-3.5 rounded border-gray-300 text-brandAccent focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer accent-orange-500\">\n <span class=\"text-[11px] text-brandText leading-snug group-hover:text-brandAccent transition-colors\">Seguridad visual y garant\u00edas<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <div class=\"border-t border-gray-100 pt-6 flex justify-between items-center text-[10px] text-brandSecondary\">\n <span>03 \/ AUTO-AUDITOR\u00cdA INTEGRAL<\/span>\n <a href=\"https:\/\/jorgealvarez.me\" target=\"_blank\" class=\"font-bold hover:text-brandAccent transition-colors\">jorgealvarez.me<\/a>\n <\/div>\n <\/section>\n\n\n <!-- ==================== P\u00c1GINA 4: CONTACTO \/ CTA ==================== -->\n <section id=\"page-4\" class=\"editorial-page flex flex-col justify-between p-16\">\n <!-- Header -->\n <div class=\"flex justify-between items-center border-b border-gray-100 pb-5\">\n <span class=\"text-[10px] uppercase tracking-[0.25em] font-bold text-brandSecondary\">03 \/ EL SIGUIENTE NIVEL<\/span>\n <!-- Small branding logo -->\n <div class=\"h-5 flex items-center\">\n <img decoding=\"async\" src=\"logo-jorge-antonio.png\" alt=\"Jorge Antonio Logo\" class=\"h-4.5 w-auto object-contain block\" onerror=\"this.style.display='none'; document.getElementById('logo-fallback-header-4').classList.remove('hidden');\">\n <div id=\"logo-fallback-header-4\" class=\"hidden flex items-center select-none\">\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">JORG<\/span>\n <div class=\"inline-flex gap-[1px] rotate-[35deg] mx-0.5 -translate-y-[0.5px] shrink-0\">\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <span class=\"w-[2px] h-[10px] bg-brandAccent rounded-full\"><\/span>\n <\/div>\n <span class=\"text-[10px] font-bold logo-font text-brandText tracking-tight\">ANTONIO<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- CTA Center Area -->\n <div class=\"my-auto text-center space-y-10 max-w-sm mx-auto\">\n <div class=\"space-y-4\">\n <span class=\"text-[10px] font-bold uppercase tracking-widest text-brandAccent bg-orange-50 px-3.5 py-1.5 rounded-full\">DISE\u00d1O DE CLASE MUNDIAL<\/span>\n <h2 class=\"title-font text-[32px] font-extrabold text-brandText leading-[1.15] tracking-tight\">\n \u00bfNecesitas optimizar tu landing page?\n <\/h2>\n <\/div>\n \n <p class=\"text-xs text-brandSecondary leading-relaxed\">\n Ayudo a marcas y profesionales a convertir su visi\u00f3n y su tr\u00e1fico en un flujo constante de clientes a trav\u00e9s de interfaces precisas, veloces y memorables. No dise\u00f1o p\u00e1ginas; construyo ventajas competitivas.\n <\/p>\n\n <!-- Minimal Action Grid buttons (With your Domain) -->\n <div class=\"grid grid-cols-3 gap-3 pt-4\">\n <a href=\"https:\/\/jorgealvarez.me\" target=\"_blank\" class=\"flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-100 hover:border-brandAccent transition-all group bg-gray-50\/50\">\n <svg class=\"w-5 h-5 text-brandText group-hover:text-brandAccent transition-colors\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"><\/path><\/svg>\n <span class=\"text-[10px] font-bold tracking-wider text-brandText group-hover:text-brandAccent transition-colors uppercase\">Sitio Web<\/span>\n <\/a>\n <a href=\"https:\/\/linkedin.com\" target=\"_blank\" class=\"flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-100 hover:border-brandAccent transition-all group bg-gray-50\/50\" rel=\"noopener\">\n <svg class=\"w-5 h-5 text-brandText group-hover:text-brandAccent transition-colors\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\"\/><\/svg>\n <span class=\"text-[10px] font-bold tracking-wider text-brandText group-hover:text-brandAccent transition-colors uppercase\">LinkedIn<\/span>\n <\/a>\n <a href=\"mailto:hola@jorgealvarez.me\" class=\"flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-100 hover:border-brandAccent transition-all group bg-gray-50\/50\">\n <svg class=\"w-5 h-5 text-brandText group-hover:text-brandAccent transition-colors\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg>\n <span class=\"text-[10px] font-bold tracking-wider text-brandText group-hover:text-brandAccent transition-colors uppercase\">Contacto<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <div class=\"border-t border-gray-100 pt-6 flex justify-between items-center text-[10px] text-brandSecondary\">\n <span>04 \/ ALTA CONVERSI\u00d3N<\/span>\n <a href=\"https:\/\/jorgealvarez.me\" target=\"_blank\" class=\"font-bold hover:text-brandAccent transition-colors uppercase\">jorgealvarez.me<\/a>\n <\/div>\n <\/section>\n\n <\/main>\n\n <!-- Interactive script to compute and animate checklist completion on the sidebar -->\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const checkboxes = document.querySelectorAll('.item-checkbox');\n const progressBar = document.getElementById('progress-bar');\n const progressPercent = document.getElementById('progress-percent');\n\n function updateProgress() {\n const total = checkboxes.length;\n const checked = document.querySelectorAll('.item-checkbox:checked').length;\n const percentage = total > 0 ? Math.round((checked \/ total) * 100) : 0;\n\n progressBar.style.width = `${percentage}%`;\n progressPercent.textContent = `${percentage}%`;\n }\n\n checkboxes.forEach(checkbox => {\n checkbox.addEventListener('change', updateProgress);\n });\n\n \/\/ Initialize progress tracker\n updateProgress();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Landing Page de Alta Conversi\u00f3n – Jorge Antonio JORG ANTONIO PREVIEW INTERACTIVO Landing Page Premium Guide Checklist interactivo y exportable a PDF con dise\u00f1o optimizado para m\u00f3vil y lectura editorial digital de alta gama. Progreso Checklist 0% Interact\u00faa directamente en la **P\u00e1gina 3**. Haz clic en los checks para calcular tu optimizaci\u00f3n de conversi\u00f3n. Ratio … <a title=\"Landing Page de Alta Conversi\u00f3n\" class=\"read-more\" href=\"https:\/\/jorgealvarez.me\/en\/landing-page-de-alta-conversion\/\" aria-label=\"Read more about Landing Page de Alta Conversi\u00f3n\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-393","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/pages\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":5,"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/pages\/393\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/pages\/393\/revisions\/398"}],"wp:attachment":[{"href":"https:\/\/jorgealvarez.me\/en\/wp-json\/wp\/v2\/media?parent=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}