CV Designer Premium - Formato A4<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&family=Lato:wght@300;400;700&family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n\n <style>\n html, body {\n\n margin: 5;\n\n padding: 5;\n\n}\n\n#preview-stage,\n\n#preview-container {\n\n margin: 0;\n\n padding: 0;\n \n\n}\n\n#cv-app-wrapper {\n\n margin: 0;\n\n padding: 0;\n\n align-items: flex-start; \/* CLAVE *\/\n\n}\n\n#cv-document {\n\n margin: 0;\n padding: 0;\n\n}\n \n #cv-app-wrapper {\n\n display: flex;\n\n flex-direction: row;\n\n width: 100%;\n\n min-height: 100%;\n\n height: auto;\n\n margin: 0;\n\n padding: 0;\n\n}\n\n aside {\n width: 420px; \n min-width: 320px;\n background: white;\n display: flex;\n flex-direction: column;\n height: 100%;\n border-right: 1px solid #e5e7eb;\n box-shadow: 10px 0 15px rgba(0,0,0,0.1);\n z-index: 20;\n }\n\n .form-container {\n flex: 1;\n overflow-y: auto;\n padding: 1.5rem;\n padding-bottom: 2rem;\n }\n\n .footer-controls {\n padding: 1rem 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n flex-shrink: 0;\n }\n\n main {\n flex: 1;\n \/* background: #2d2d2d;*\/\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n height: 100%;\n }\n\n \/* AJUSTE ESTRICTO A TAMA\u00d1O A4 (210 x 297 mm) *\/\n #cv-document {\n width: 210mm;\n height: 297mm;\n background: white;\n box-shadow: 0 0 40px rgba(0,0,0,0.4);\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n will-change: transform;\n image-rendering: optimizeQuality;\n\n}\n\n .custom-scroll::-webkit-scrollbar { width: 5px; }\n .custom-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }\n .cv-text-wrap { white-space: pre-line; word-wrap: break-word; }\n\n \n @media (max-width: 923px) { \n aside { width: 200px; min-width: 200px; } \n }\n html, body {\n display: block !important;\n align-items: flex-start !important;\n}\n <\/style>\n<\/head>\n<body x-data=\"cvApp()\" x-init=\"init()\">\n\n <div id=\"cv-app-wrapper\">\n \n\n<template x-ref=\"bloque-sidebar\">\n <section>\n <h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.idiomas\"><\/p>\n <\/section>\n\n <section>\n <h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">\n Herramientas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.herramientas\"><\/p>\n <\/section>\n<\/template>\n\n\n <aside>\n <div class=\"p-5 bg-[#353b3c] text-white flex-shrink-0\">\n <h1 class=\"font-bold text-[10px] uppercase tracking-[0.2em] text-[#2ed8cb]\">CV Designer Pro<\/h1>\n <div class=\"flex justify-between mt-3 gap-1\">\n <template x-for=\"i in 4\">\n <div class=\"h-1 flex-1 rounded-full transition-all duration-300\" \n :class=\"step >= i ? 'bg-[#f61067]' : 'bg-gray-600'\"><\/div>\n <\/template>\n <\/div>\n <\/div>\n\n <div class=\"form-container custom-scroll space-y-6\">\n \n <div x-show=\"step === 1\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">1. Estilo y Perfil<\/h2>\n <select x-model=\"datos.plantilla\" class=\"w-full p-2.5 border rounded-lg text-xs bg-gray-50 outline-none\">\n <option value=\"daniel\">Daniel (Moderno)<\/option>\n <option value=\"mateo\">Mateo (Geom\u00e9trico)<\/option>\n <option value=\"sophia\">Sophia (Minimalista)<\/option>\n <option value=\"lucas\">Lucas (Tecnol\u00f3gico)<\/option>\n <option value=\"elena\">Elena (Ejecutivo)<\/option>\n <\/select>\n <input type=\"text\" x-model=\"datos.nombre\" placeholder=\"Nombre completo\" class=\"w-full p-2 border-b text-xs outline-none focus:border-[#f61067]\">\n <input type=\"text\" x-model=\"datos.titulo\" placeholder=\"T\u00edtulo profesional\" class=\"w-full p-2 border-b text-xs outline-none focus:border-[#f61067]\">\n <div class=\"border-2 border-dashed p-4 text-center rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors\">\n <label class=\"cursor-pointer text-[10px] font-bold text-[#f61067] uppercase block\">\n \ud83d\udcf7 <span x-text=\"datos.foto ? 'Imagen Cargada' : 'Subir Foto de Perfil'\"><\/span>\n <input type=\"file\" @change=\"cargarFoto\" class=\"hidden\">\n <\/label>\n <\/div>\n <textarea x-model=\"datos.bio\" placeholder=\"Resumen profesional...\" class=\"w-full p-2.5 border rounded-xl text-xs h-24 outline-none focus:ring-2 focus:ring-[#f61067]\/20\"><\/textarea>\n <\/div>\n\n \n <div x-show=\"step === 2\" class=\"space-y-4\">\n <div class=\"flex justify-between items-center border-b pb-1\">\n <h2 class=\"font-bold text-gray-800 text-xs uppercase\">Experiencia<\/h2>\n <button @click=\"agregarItem('experiencia')\" class=\"text-[9px] bg-black text-white px-2 py-1 rounded-md\">+ A\u00f1adir<\/button>\n <\/div>\n <template x-for=\"(exp, index) in datos.experiencia\" :key=\"index\">\n <div class=\"p-3 border rounded-xl bg-gray-50 relative space-y-2 group\">\n <button @click=\"removerItem('experiencia', index)\" class=\"absolute right-2 top-2 text-red-400\">\u2715<\/button>\n <input type=\"text\" x-model=\"exp.cargo\" placeholder=\"Cargo\/Puesto\" class=\"w-full text-xs font-bold border-b bg-transparent outline-none\">\n <input type=\"text\" x-model=\"exp.empresa\" placeholder=\"Empresa y Fechas\" class=\"w-full text-[10px] border-b bg-transparent outline-none\">\n <textarea x-model=\"exp.descripcion\" placeholder=\"Responsabilidades...\" class=\"w-full text-[10px] h-16 border rounded-lg p-2 outline-none bg-white\"><\/textarea>\n <\/div>\n <\/template>\n\n <div class=\"flex justify-between items-center border-b pb-1 mt-6\">\n <h2 class=\"font-bold text-gray-800 text-xs uppercase\">Educaci\u00f3n<\/h2>\n <button @click=\"agregarItem('educacion')\" class=\"text-[9px] bg-black text-white px-2 py-1 rounded-md\">+ A\u00f1adir<\/button>\n <\/div>\n <template x-for=\"(edu, index) in datos.educacion\" :key=\"index\">\n <div class=\"p-3 border rounded-xl bg-gray-50 relative space-y-2\">\n <button @click=\"removerItem('educacion', index)\" class=\"absolute right-2 top-2 text-red-400\">\u2715<\/button>\n <input type=\"text\" x-model=\"edu.titulo\" placeholder=\"T\u00edtulo obtenido\" class=\"w-full text-xs font-bold border-b bg-transparent outline-none\">\n <input type=\"text\" x-model=\"edu.inst\" placeholder=\"Instituci\u00f3n y A\u00f1o\" class=\"w-full text-[10px] border-b bg-transparent outline-none\">\n <\/div>\n <\/template>\n <\/div>\n\n \n <div x-show=\"step === 3\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">Habilidades & Herramientas<\/h2>\n <textarea x-model=\"datos.habilidades\" placeholder=\"Habilidades (Soft\/Hard)...\" class=\"w-full p-2.5 border rounded-xl text-xs h-20 outline-none\"><\/textarea>\n <textarea x-model=\"datos.herramientas\" placeholder=\"Herramientas & Software...\" class=\"w-full p-2.5 border rounded-xl text-xs h-20 outline-none\"><\/textarea>\n <input type=\"text\" x-model=\"datos.idiomas\" placeholder=\"Idiomas (Ej: Ingl\u00e9s C1)\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <\/div>\n\n \n <div x-show=\"step === 4\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">Contacto<\/h2>\n <input type=\"email\" x-model=\"datos.email\" placeholder=\"Correo electr\u00f3nico\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <input type=\"text\" x-model=\"datos.telefono\" placeholder=\"WhatsApp \/ Celular\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <input type=\"text\" x-model=\"datos.web\" placeholder=\"LinkedIn o Portfolio\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <\/div>\n <\/div>\n\n <div class=\"footer-controls\">\n <div class=\"flex gap-3\">\n <button x-show=\"step > 1\" @click=\"step--\" class=\"flex-1 py-3 border rounded-xl font-bold text-[10px] text-gray-400 uppercase tracking-widest\">Atr\u00e1s<\/button>\n <button x-show=\"step < 4\" @click=\"step++\" class=\"flex-[2] py-4 bg-[#f61067] text-white font-bold text-[10px] rounded-xl shadow-lg hover:brightness-110 uppercase tracking-[0.2em] transition-all\">Siguiente<\/button>\n <button x-show=\"step === 4\" @click=\"descargarPDF\" class=\"flex-[2] py-4 bg-[#f61067] text-white font-bold text-[10px] rounded-xl shadow-lg hover:brightness-110 uppercase tracking-[0.2em] transition-all\">Descargar PDF (A4)<\/button>\n <\/div>\n <\/div>\n <\/aside>\n\n <main id=\"preview-stage\">\n <div id=\"cv-document\">\n \n \n <template x-if=\"datos.plantilla === 'daniel'\">\n <div class=\"h-full flex flex-col font-['Montserrat'] bg-white\">\n <div class=\"h-[20%] bg-[#353b3c] text-white flex items-center px-12 gap-8 relative overflow-hidden\">\n <div class=\"w-32 h-32 rounded-full border-4 border-[#f61067] overflow-hidden bg-white z-10 shrink-0 shadow-xl\">\n <img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\">\n <\/div>\n <div class=\"z-10\">\n <h1 class=\"text-4xl font-bold uppercase tracking-tighter\" x-text=\"datos.nombre\"><\/h1>\n <p class=\"text-[#f61067] font-bold text-lg uppercase mt-1\" x-text=\"datos.titulo\"><\/p>\n <\/div>\n <\/div>\n <div class=\"flex-1 flex px-12 py-10 gap-10 overflow-hidden\">\n <div class=\"w-[35%] space-y-8 text-[10px] text-gray-600\">\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Contacto<\/h3>\n <p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p><p x-text=\"datos.web\"><\/p><\/section>\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Habilidades<\/h3><p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.habilidades\"><\/p><\/section>\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Herramientas<\/h3><p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.herramientas\"><\/p>\n <section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n \n <\/section>\n <\/div>\n <div class=\"w-[65%] space-y-8\">\n <section x-show=\"datos.bio\"><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-2 uppercase text-gray-800\">Perfil<\/h3><p class=\"text-[10px] text-gray-600 cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/section>\n <section><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-4 uppercase text-gray-800\">Experiencia<\/h3>\n <template x-for=\"exp in datos.experiencia\"><div class=\"mb-5\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-xs uppercase\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[9px] text-[#f61067] font-bold\" x-text=\"exp.empresa\"><\/p><p class=\"text-[10px] text-gray-500 mt-1 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p><\/div><\/template><\/section>\n <section><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-4 uppercase text-gray-800\">Educaci\u00f3n<\/h3>\n <template x-for=\"edu in datos.educacion\"><div class=\"mb-3\" x-show=\"edu.titulo\"><h4 class=\"font-bold text-xs\" x-text=\"edu.titulo\"><\/h4><p class=\"text-[10px] text-gray-500\" x-text=\"edu.inst\"><\/p><\/div><\/template><\/section>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n\n \n <template x-if=\"datos.plantilla === 'mateo'\">\n <div class=\"h-full flex font-['Lato'] bg-white\">\n <div class=\"w-[35%] bg-gray-50 p-10 flex flex-col border-r\"><div class=\"w-32 h-32 rounded-xl bg-white shadow-xl overflow-hidden mb-8 border-2 border-white\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div>\n <div class=\"w-full space-y-8 text-[10px]\"><section><h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">Contacto<\/h3><p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p>\n <p x-text=\"datos.web\"><\/p> \n <\/section>\n <section><h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">Habilidades<\/h3><p class=\"cv-text-wrap\" x-text=\"datos.habilidades\"><\/p><\/section>\n <div x-html=\"$refs['bloque-sidebar'].innerHTML\"><\/div> \n <\/div><\/div>\n \n\n <div class=\"w-[65%] p-14\"><h1 class=\"text-5xl font-black text-blue-900 uppercase tracking-tighter\" x-text=\"datos.titulo\"><\/h1><p class=\"text-2xl text-gray-300 font-light mt-2 mb-6\" x-text=\"datos.nombre\"><\/p>\n <p class=\"text-[11px] text-gray-600 mb-8 cv-text-wrap\" x-text=\"datos.bio\"><\/p>\n <h3 class=\"font-bold text-xs text-blue-900 mb-6 uppercase tracking-[0.3em] border-b pb-2\">Experiencia<\/h3>\n <template x-for=\"exp in datos.experiencia\"><div class=\"mb-8\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-sm text-gray-800\" x-text=\"exp.cargo\"><\/h4><p class=\"text-[10px] text-blue-500 font-bold mb-2\" x-text=\"exp.empresa\"><\/p><p class=\"text-[11px] text-gray-500 cv-text-wrap leading-relaxed\" x-text=\"exp.descripcion\"><\/p><\/div><\/template>\n \n<div x-show=\"datos.educacion && datos.educacion.length\">\n <h3 class=\"font-bold text-xs text-blue-900 mb-6 uppercase tracking-[0.3em] border-b pb-2\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\" :key=\"edu.id || edu.titulo\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <h4 class=\"font-bold text-sm text-gray-800\" x-text=\"edu.titulo\"><\/h4>\n <p class=\"text-[10px] text-blue-500 font-bold\" x-text=\"edu.inst\"><\/p>\n <\/div> <\/div>\n <\/template>\n<\/div>\n\n\n \n <\/div>\n <\/template>\n \n\n <template x-if=\"datos.plantilla === 'sophia'\">\n <div class=\"h-full p-16 font-['Inter'] flex flex-col bg-white\">\n <div class=\"border-b pb-10 mb-8 flex justify-between items-center\"><div><h1 class=\"text-5xl font-light tracking-tighter text-gray-900\" x-text=\"datos.titulo\"><\/h1><p class=\"text-[#f61067] font-bold text-xs mt-3 uppercase tracking-[0.4em]\" x-text=\"datos.nombre\"><\/p><\/div><div class=\"w-24 h-24 border-2 rounded-full overflow-hidden grayscale\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div><\/div>\n <div class=\"mb-8\"><p class=\"text-[11px] text-gray-500 italic cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/div>\n <div class=\"flex gap-8 flex-1\">\n <div class=\"w-2\/3\">\n \n <section x-show=\"datos.email || datos.telefono || datos.web\" class=\"mb-10\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Contacto\n <\/h3>\n\n <div class=\"space-y-2 text-[11px] text-gray-600\">\n <p x-show=\"datos.email\" x-text=\"datos.email\"><\/p>\n <p x-show=\"datos.telefono\" x-text=\"datos.telefono\"><\/p>\n <p x-show=\"datos.web\" x-text=\"datos.web\"><\/p>\n <\/div>\n <\/section> \n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">Trayectoria<\/h3><template x-for=\"exp in datos.experiencia\"><div class=\"mb-10 border-l-2 border-gray-100 pl-6\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-xs text-gray-800\" x-text=\"exp.cargo\"><\/h4><p class=\"text-[10px] text-gray-400 mt-1\" x-text=\"exp.empresa\"><\/p><p class=\"text-[11px] text-gray-500 mt-3 cv-text-wrap leading-relaxed\" x-text=\"exp.descripcion\"><\/p><\/div><\/template><\/div><div class=\"w-1\/3 text-[10px] space-y-10\"><section><h3 class=\"font-bold uppercase text-[#f61067] mb-3\">Habilidades<\/h3><p class=\"cv-text-wrap leading-loose\" x-text=\"datos.habilidades\"><\/p> <\/section>\n \n<section x-show=\"datos.herramientas\" class=\"mt-10\">\n<h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Herramientas\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.herramientas\"><\/p>\n<\/section>\n \n <section x-show=\"datos.educacion && datos.educacion.length\" class=\"mt-10\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <p class=\"font-bold text-xs text-gray-800\" x-text=\"edu.titulo\"><\/p>\n <p class=\"text-[10px] text-gray-400\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n<\/section>\n<section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Idioma\n <\/h3>\n <p class=\"cv-text-wrap leading-loose\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n\n <\/div><\/div>\n <\/div>\n <\/template>\n\n <template x-if=\"datos.plantilla === 'lucas'\">\n <div class=\"h-full flex font-['Montserrat'] bg-white\">\n <div class=\"w-[32%] bg-[#1a202c] text-white p-10 flex flex-col\"><div class=\"w-full aspect-square rounded-2xl border-4 border-gray-700 overflow-hidden mb-10\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div><section><h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">Contacto<\/h3><div class=\"text-[10px] space-y-3 opacity-80\"><p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p>\n<p x-text=\"datos.web\"><\/p> \n <\/div>\n \n<section x-show=\"datos.habilidades\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Habilidades\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.habilidades\"><\/p>\n<\/section>\n\n\n<section x-show=\"datos.herramientas\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Herramientas\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.herramientas\"><\/p>\n<\/section>\n\n\n\n <section x-show=\"datos.idiomas\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Idioma\n <\/h3>\n <p class=\"text-[10px] opacity-80\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n\n <\/section><\/div>\n <div class=\"w-[68%] p-16\"><h1 class=\"text-6xl font-black text-gray-900 tracking-tighter\" x-text=\"datos.titulo\"><\/h1><p class=\"text-2xl text-blue-600 font-bold mt-4 mb-6\" x-text=\"datos.nombre\"><\/p>\n <p class=\"text-[11px] text-gray-500 mb-10 cv-text-wrap\" x-text=\"datos.bio\"><\/p>\n <h3 class=\"text-xs font-black bg-gray-50 border p-2.5 inline-block mb-8 uppercase\">\n Experiencia\n<\/h3>\n\n<template x-for=\"exp in datos.experiencia\">\n <div x-show=\"exp.cargo\" class=\"mb-8\">\n <h4 class=\"font-bold text-sm text-gray-800\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[10px] text-blue-600 font-bold\" x-text=\"exp.empresa\"><\/p>\n <p class=\"text-[11px] text-gray-500 mt-3 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p>\n <\/div>\n<\/template>\n\n\n<section x-show=\"datos.educacion && datos.educacion.length\" class=\"mt-10\">\n <h3 class=\"text-xs font-black bg-gray-50 border p-2.5 inline-block mb-8 uppercase\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <p class=\"font-bold text-sm text-gray-800\" x-text=\"edu.titulo\"><\/p>\n <p class=\"text-[10px] text-blue-600 font-bold\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n<\/section>\n<\/div> \n<\/div> \n<\/template>\n\n <template x-if=\"datos.plantilla === 'elena'\">\n <div class=\"h-full p-14 font-['Playfair_Display'] flex flex-col bg-white border-[20px] border-gray-50\">\n <div class=\"text-center border-b-2 border-gray-900 pb-8 mb-10\">\n\n \n <template x-if=\"datos.foto\">\n <img :src=\"datos.foto\"\n class=\"w-28 h-28 rounded-full object-cover mx-auto mb-6 border-4 border-gray-200\">\n <\/template>\n\n <h1 class=\"text-5xl font-bold text-gray-900\" x-text=\"datos.titulo\"><\/h1>\n\n <p class=\"font-sans text-xs uppercase tracking-[0.5em] mt-4 text-gray-400 font-semibold\"\n x-text=\"datos.nombre\"><\/p>\n<\/div>\n\n <div class=\"text-center px-10 mb-10\"><p class=\"font-sans text-[11px] text-gray-600 italic cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/div>\n <div class=\"flex-1 flex gap-14 font-sans\">\n\n \n <div class=\"w-2\/3 space-y-10\">\n\n \n <section>\n <h3 class=\"font-bold text-xs border-b-2 border-gray-900 inline-block mb-6 uppercase tracking-widest\">\n Trayectoria\n <\/h3>\n\n <template x-for=\"exp in datos.experiencia\">\n <div class=\"mb-8\" x-show=\"exp.cargo\">\n <h4 class=\"font-bold text-xs uppercase text-gray-800\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[10px] text-gray-400 italic mt-1\" x-text=\"exp.empresa\"><\/p>\n <p class=\"text-[11px] text-gray-600 mt-3 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p>\n <\/div>\n <\/template>\n <\/section>\n\n \n <section>\n <h3 class=\"font-bold text-xs border-b-2 border-gray-900 inline-block mb-6 uppercase tracking-widest\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo || edu.inst\">\n <h4 class=\"font-bold text-xs uppercase text-gray-800\" x-text=\"edu.titulo\"><\/h4>\n <p class=\"text-[10px] text-gray-400 italic mt-1\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n <\/section>\n\n <\/div>\n\n \n <div class=\"w-1\/3 text-[11px] space-y-10\">\n \n <section><h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">Contacto<\/h3><p x-text=\"datos.email\"><\/p>\n<p x-text=\"datos.telefono\"><\/p>\n <p x-text=\"datos.web\"><\/p> \n <\/section>\n \n<section x-show=\"datos.habilidades\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n HABILIDADES\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.habilidades\"><\/p>\n<\/section>\n\n<section x-show=\"datos.herramientas\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n Herramientas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.herramientas\"><\/p>\n<\/section>\n\n\n<section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n \n <\/div><\/div>\n <\/div>\n <\/template>\n\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n function cvApp() {\n return {\n step: 1,\n datos: {\n plantilla: 'daniel',\n nombre: 'ANDREA MARIN',\n titulo: 'Asistente Virtual Proactiva',\n foto: '',\n bio: 'Optimiza tu tiempo y procesos delegando tareas clave...',\n email: 'annmarin0318@hotmail.com',\n telefono: '+57 3042108909',\n web: 'linkedin.com\/in\/andreamarin',\n habilidades: 'Gesti\u00f3n Administrativa, Atenci\u00f3n al Cliente, Resoluci\u00f3n de Problemas.',\n herramientas: 'Google Workspace, CRM, Trello.',\n idiomas: 'Espa\u00f1ol (Nativo)',\n experiencia: [{ cargo: 'Project Manager', empresa: 'Remoto Inc | 2021-2024', descripcion: 'Liderar el equipo acad\u00e9mico, velar por la cualificaci\u00f3n del proceso...' }],\n educacion: [{ titulo: 'Administraci\u00f3n de Empresas', inst: 'U. Diversia | 2020' }]\n },\n init() {\n this.adjustAppHeight();\n this.resizePreview();\n window.addEventListener('resize', () => {\n this.adjustAppHeight();\n this.resizePreview();\n });\n this.$watch('datos', () => this.$nextTick(() => this.resizePreview()), { deep: true });\n this.$watch('step', () => this.$nextTick(() => this.resizePreview()));\n setTimeout(() => this.resizePreview(), 500);\n },\n adjustAppHeight() {\n const wrapper = document.getElementById('cv-app-wrapper');\n if (!wrapper) return;\n\n const rect = wrapper.getBoundingClientRect();\n const availableHeight = window.innerHeight - rect.top;\n\n wrapper.style.height = availableHeight + 'px';\n},\n resizePreview() {\n const stage = document.getElementById('preview-stage');\n const doc = document.getElementById('cv-document');\n if (!stage || !doc) return;\n\n const padding = 0;\n\n const stageWidth = stage.clientWidth - padding;\n const stageHeight = stage.clientHeight - padding;\n\n const scaleX = stageWidth \/ doc.offsetWidth;\n const scaleY = stageHeight \/ doc.offsetHeight;\n\n let scale = scaleX;\n if (doc.offsetHeight * scale > stageHeight) {\n scale = scaleY;\n }\n\n doc.style.transform = `scale(${scale})`;\n \n \n},\n\n cargarFoto(e) {\n const reader = new FileReader();\n reader.onload = (f) => this.datos.foto = f.target.result;\n reader.readAsDataURL(e.target.files[0]);\n },\n agregarItem(tipo) {\n this.datos[tipo].push(tipo === 'experiencia' ? { cargo: '', empresa: '', descripcion: '' } : { titulo: '', inst: '' });\n },\n removerItem(tipo, index) { this.datos[tipo].splice(index, 1); },\n descargarPDF() {\n const element = document.getElementById('cv-document');\n\n \/\/ Guardar estado del preview\n const originalTransform = element.style.transform;\n const originalOrigin = element.style.transformOrigin;\n const originalOverflow = element.style.overflow;\n\n \/\/ Preparar para exportar\n element.style.transform = 'scale(1)';\n element.style.transformOrigin = 'top left';\n element.style.overflow = 'hidden';\n\n const opt = {\n margin: 0,\n filename: `CV_${this.datos.nombre.replace(\/\\s+\/g, '_')}.pdf`,\n image: { type: 'jpeg', quality: 1 },\n html2canvas: {\n scale: 3,\n useCORS: true,\n backgroundColor: '#ffffff'\n },\n jsPDF: {\n unit: 'mm',\n format: 'a4',\n orientation: 'portrait'\n }\n };\n\n html2pdf()\n .set(opt)\n .from(element)\n .toPdf()\n .get('pdf')\n .then((pdf) => {\n const totalPages = pdf.getNumberOfPages();\n if (totalPages > 1) {\n pdf.deletePage(totalPages); \/\/ \u2190 ELIMINA LA HOJA VAC\u00cdA\n }\n })\n .save()\n .then(() => {\n \/\/ Restaurar preview\n element.style.transform = originalTransform;\n element.style.transformOrigin = originalOrigin;\n element.style.overflow = originalOverflow;\n });\n}\n\n }\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto<\/p>\n","protected":false},"author":1,"featured_media":5399,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_joinchat":[],"footnotes":""},"folder":[4],"class_list":["post-7025","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto\" \/>\n<meta property=\"og:description\" content=\"CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/\" \/>\n<meta property=\"og:site_name\" content=\"C\u00e1mbiate a Remoto\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-11T14:54:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"769\" \/>\n\t<meta property=\"og:image:height\" content=\"764\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\",\"name\":\"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"datePublished\":\"2025-04-17T15:50:11+00:00\",\"dateModified\":\"2026-02-11T14:54:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"contentUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"width\":769,\"height\":764},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[LP] CREADOR DE CVS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#website\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\",\"name\":\"C\u00e1mbiate a Remoto\",\"description\":\"Y transforma tu vida\",\"publisher\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#organization\",\"name\":\"C\u00e1mbiate a Remoto\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Untitled-design-22.png\",\"contentUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Untitled-design-22.png\",\"width\":800,\"height\":800,\"caption\":\"C\u00e1mbiate a Remoto\"},\"image\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","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:\/\/cambiatearemoto.com\/lp\/cv-creator\/","og_locale":"en_US","og_type":"article","og_title":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","og_description":"CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto","og_url":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","og_site_name":"C\u00e1mbiate a Remoto","article_modified_time":"2026-02-11T14:54:12+00:00","og_image":[{"width":769,"height":764,"url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","url":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","name":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","isPartOf":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage"},"image":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage"},"thumbnailUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","datePublished":"2025-04-17T15:50:11+00:00","dateModified":"2026-02-11T14:54:12+00:00","breadcrumb":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cambiatearemoto.com\/lp\/cv-creator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage","url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","contentUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","width":769,"height":764},{"@type":"BreadcrumbList","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cambiatearemoto.com\/lp\/"},{"@type":"ListItem","position":2,"name":"[LP] CREADOR DE CVS"}]},{"@type":"WebSite","@id":"https:\/\/cambiatearemoto.com\/lp\/#website","url":"https:\/\/cambiatearemoto.com\/lp\/","name":"C\u00e1mbiate a Remoto","description":"Y transforma tu vida","publisher":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cambiatearemoto.com\/lp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cambiatearemoto.com\/lp\/#organization","name":"C\u00e1mbiate a Remoto","url":"https:\/\/cambiatearemoto.com\/lp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cambiatearemoto.com\/lp\/#\/schema\/logo\/image\/","url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2023\/08\/Untitled-design-22.png","contentUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2023\/08\/Untitled-design-22.png","width":800,"height":800,"caption":"C\u00e1mbiate a Remoto"},"image":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/comments?post=7025"}],"version-history":[{"count":106,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025\/revisions"}],"predecessor-version":[{"id":11485,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025\/revisions\/11485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/media\/5399"}],"wp:attachment":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/media?parent=7025"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/folder?post=7025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n CV Designer Premium - Formato A4<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&family=Lato:wght@300;400;700&family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n\n <style>\n html, body {\n\n margin: 5;\n\n padding: 5;\n\n}\n\n#preview-stage,\n\n#preview-container {\n\n margin: 0;\n\n padding: 0;\n \n\n}\n\n#cv-app-wrapper {\n\n margin: 0;\n\n padding: 0;\n\n align-items: flex-start; \/* CLAVE *\/\n\n}\n\n#cv-document {\n\n margin: 0;\n padding: 0;\n\n}\n \n #cv-app-wrapper {\n\n display: flex;\n\n flex-direction: row;\n\n width: 100%;\n\n min-height: 100%;\n\n height: auto;\n\n margin: 0;\n\n padding: 0;\n\n}\n\n aside {\n width: 420px; \n min-width: 320px;\n background: white;\n display: flex;\n flex-direction: column;\n height: 100%;\n border-right: 1px solid #e5e7eb;\n box-shadow: 10px 0 15px rgba(0,0,0,0.1);\n z-index: 20;\n }\n\n .form-container {\n flex: 1;\n overflow-y: auto;\n padding: 1.5rem;\n padding-bottom: 2rem;\n }\n\n .footer-controls {\n padding: 1rem 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n flex-shrink: 0;\n }\n\n main {\n flex: 1;\n \/* background: #2d2d2d;*\/\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n height: 100%;\n }\n\n \/* AJUSTE ESTRICTO A TAMA\u00d1O A4 (210 x 297 mm) *\/\n #cv-document {\n width: 210mm;\n height: 297mm;\n background: white;\n box-shadow: 0 0 40px rgba(0,0,0,0.4);\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n will-change: transform;\n image-rendering: optimizeQuality;\n\n}\n\n .custom-scroll::-webkit-scrollbar { width: 5px; }\n .custom-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }\n .cv-text-wrap { white-space: pre-line; word-wrap: break-word; }\n\n \n @media (max-width: 923px) { \n aside { width: 200px; min-width: 200px; } \n }\n html, body {\n display: block !important;\n align-items: flex-start !important;\n}\n <\/style>\n<\/head>\n<body x-data=\"cvApp()\" x-init=\"init()\">\n\n <div id=\"cv-app-wrapper\">\n \n\n<template x-ref=\"bloque-sidebar\">\n <section>\n <h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.idiomas\"><\/p>\n <\/section>\n\n <section>\n <h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">\n Herramientas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.herramientas\"><\/p>\n <\/section>\n<\/template>\n\n\n <aside>\n <div class=\"p-5 bg-[#353b3c] text-white flex-shrink-0\">\n <h1 class=\"font-bold text-[10px] uppercase tracking-[0.2em] text-[#2ed8cb]\">CV Designer Pro<\/h1>\n <div class=\"flex justify-between mt-3 gap-1\">\n <template x-for=\"i in 4\">\n <div class=\"h-1 flex-1 rounded-full transition-all duration-300\" \n :class=\"step >= i ? 'bg-[#f61067]' : 'bg-gray-600'\"><\/div>\n <\/template>\n <\/div>\n <\/div>\n\n <div class=\"form-container custom-scroll space-y-6\">\n \n <div x-show=\"step === 1\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">1. Estilo y Perfil<\/h2>\n <select x-model=\"datos.plantilla\" class=\"w-full p-2.5 border rounded-lg text-xs bg-gray-50 outline-none\">\n <option value=\"daniel\">Daniel (Moderno)<\/option>\n <option value=\"mateo\">Mateo (Geom\u00e9trico)<\/option>\n <option value=\"sophia\">Sophia (Minimalista)<\/option>\n <option value=\"lucas\">Lucas (Tecnol\u00f3gico)<\/option>\n <option value=\"elena\">Elena (Ejecutivo)<\/option>\n <\/select>\n <input type=\"text\" x-model=\"datos.nombre\" placeholder=\"Nombre completo\" class=\"w-full p-2 border-b text-xs outline-none focus:border-[#f61067]\">\n <input type=\"text\" x-model=\"datos.titulo\" placeholder=\"T\u00edtulo profesional\" class=\"w-full p-2 border-b text-xs outline-none focus:border-[#f61067]\">\n <div class=\"border-2 border-dashed p-4 text-center rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors\">\n <label class=\"cursor-pointer text-[10px] font-bold text-[#f61067] uppercase block\">\n \ud83d\udcf7 <span x-text=\"datos.foto ? 'Imagen Cargada' : 'Subir Foto de Perfil'\"><\/span>\n <input type=\"file\" @change=\"cargarFoto\" class=\"hidden\">\n <\/label>\n <\/div>\n <textarea x-model=\"datos.bio\" placeholder=\"Resumen profesional...\" class=\"w-full p-2.5 border rounded-xl text-xs h-24 outline-none focus:ring-2 focus:ring-[#f61067]\/20\"><\/textarea>\n <\/div>\n\n \n <div x-show=\"step === 2\" class=\"space-y-4\">\n <div class=\"flex justify-between items-center border-b pb-1\">\n <h2 class=\"font-bold text-gray-800 text-xs uppercase\">Experiencia<\/h2>\n <button @click=\"agregarItem('experiencia')\" class=\"text-[9px] bg-black text-white px-2 py-1 rounded-md\">+ A\u00f1adir<\/button>\n <\/div>\n <template x-for=\"(exp, index) in datos.experiencia\" :key=\"index\">\n <div class=\"p-3 border rounded-xl bg-gray-50 relative space-y-2 group\">\n <button @click=\"removerItem('experiencia', index)\" class=\"absolute right-2 top-2 text-red-400\">\u2715<\/button>\n <input type=\"text\" x-model=\"exp.cargo\" placeholder=\"Cargo\/Puesto\" class=\"w-full text-xs font-bold border-b bg-transparent outline-none\">\n <input type=\"text\" x-model=\"exp.empresa\" placeholder=\"Empresa y Fechas\" class=\"w-full text-[10px] border-b bg-transparent outline-none\">\n <textarea x-model=\"exp.descripcion\" placeholder=\"Responsabilidades...\" class=\"w-full text-[10px] h-16 border rounded-lg p-2 outline-none bg-white\"><\/textarea>\n <\/div>\n <\/template>\n\n <div class=\"flex justify-between items-center border-b pb-1 mt-6\">\n <h2 class=\"font-bold text-gray-800 text-xs uppercase\">Educaci\u00f3n<\/h2>\n <button @click=\"agregarItem('educacion')\" class=\"text-[9px] bg-black text-white px-2 py-1 rounded-md\">+ A\u00f1adir<\/button>\n <\/div>\n <template x-for=\"(edu, index) in datos.educacion\" :key=\"index\">\n <div class=\"p-3 border rounded-xl bg-gray-50 relative space-y-2\">\n <button @click=\"removerItem('educacion', index)\" class=\"absolute right-2 top-2 text-red-400\">\u2715<\/button>\n <input type=\"text\" x-model=\"edu.titulo\" placeholder=\"T\u00edtulo obtenido\" class=\"w-full text-xs font-bold border-b bg-transparent outline-none\">\n <input type=\"text\" x-model=\"edu.inst\" placeholder=\"Instituci\u00f3n y A\u00f1o\" class=\"w-full text-[10px] border-b bg-transparent outline-none\">\n <\/div>\n <\/template>\n <\/div>\n\n \n <div x-show=\"step === 3\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">Habilidades & Herramientas<\/h2>\n <textarea x-model=\"datos.habilidades\" placeholder=\"Habilidades (Soft\/Hard)...\" class=\"w-full p-2.5 border rounded-xl text-xs h-20 outline-none\"><\/textarea>\n <textarea x-model=\"datos.herramientas\" placeholder=\"Herramientas & Software...\" class=\"w-full p-2.5 border rounded-xl text-xs h-20 outline-none\"><\/textarea>\n <input type=\"text\" x-model=\"datos.idiomas\" placeholder=\"Idiomas (Ej: Ingl\u00e9s C1)\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <\/div>\n\n \n <div x-show=\"step === 4\" class=\"space-y-4\">\n <h2 class=\"font-bold text-gray-800 text-xs border-b pb-1 uppercase\">Contacto<\/h2>\n <input type=\"email\" x-model=\"datos.email\" placeholder=\"Correo electr\u00f3nico\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <input type=\"text\" x-model=\"datos.telefono\" placeholder=\"WhatsApp \/ Celular\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <input type=\"text\" x-model=\"datos.web\" placeholder=\"LinkedIn o Portfolio\" class=\"w-full p-2.5 border rounded-xl text-xs outline-none\">\n <\/div>\n <\/div>\n\n <div class=\"footer-controls\">\n <div class=\"flex gap-3\">\n <button x-show=\"step > 1\" @click=\"step--\" class=\"flex-1 py-3 border rounded-xl font-bold text-[10px] text-gray-400 uppercase tracking-widest\">Atr\u00e1s<\/button>\n <button x-show=\"step < 4\" @click=\"step++\" class=\"flex-[2] py-4 bg-[#f61067] text-white font-bold text-[10px] rounded-xl shadow-lg hover:brightness-110 uppercase tracking-[0.2em] transition-all\">Siguiente<\/button>\n <button x-show=\"step === 4\" @click=\"descargarPDF\" class=\"flex-[2] py-4 bg-[#f61067] text-white font-bold text-[10px] rounded-xl shadow-lg hover:brightness-110 uppercase tracking-[0.2em] transition-all\">Descargar PDF (A4)<\/button>\n <\/div>\n <\/div>\n <\/aside>\n\n <main id=\"preview-stage\">\n <div id=\"cv-document\">\n \n \n <template x-if=\"datos.plantilla === 'daniel'\">\n <div class=\"h-full flex flex-col font-['Montserrat'] bg-white\">\n <div class=\"h-[20%] bg-[#353b3c] text-white flex items-center px-12 gap-8 relative overflow-hidden\">\n <div class=\"w-32 h-32 rounded-full border-4 border-[#f61067] overflow-hidden bg-white z-10 shrink-0 shadow-xl\">\n <img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\">\n <\/div>\n <div class=\"z-10\">\n <h1 class=\"text-4xl font-bold uppercase tracking-tighter\" x-text=\"datos.nombre\"><\/h1>\n <p class=\"text-[#f61067] font-bold text-lg uppercase mt-1\" x-text=\"datos.titulo\"><\/p>\n <\/div>\n <\/div>\n <div class=\"flex-1 flex px-12 py-10 gap-10 overflow-hidden\">\n <div class=\"w-[35%] space-y-8 text-[10px] text-gray-600\">\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Contacto<\/h3>\n <p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p><p x-text=\"datos.web\"><\/p><\/section>\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Habilidades<\/h3><p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.habilidades\"><\/p><\/section>\n <section><h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">Herramientas<\/h3><p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.herramientas\"><\/p>\n <section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold text-[#f61067] border-b mb-3 pb-1 uppercase\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap leading-relaxed\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n \n <\/section>\n <\/div>\n <div class=\"w-[65%] space-y-8\">\n <section x-show=\"datos.bio\"><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-2 uppercase text-gray-800\">Perfil<\/h3><p class=\"text-[10px] text-gray-600 cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/section>\n <section><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-4 uppercase text-gray-800\">Experiencia<\/h3>\n <template x-for=\"exp in datos.experiencia\"><div class=\"mb-5\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-xs uppercase\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[9px] text-[#f61067] font-bold\" x-text=\"exp.empresa\"><\/p><p class=\"text-[10px] text-gray-500 mt-1 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p><\/div><\/template><\/section>\n <section><h3 class=\"text-sm font-black border-l-4 border-[#f61067] pl-3 mb-4 uppercase text-gray-800\">Educaci\u00f3n<\/h3>\n <template x-for=\"edu in datos.educacion\"><div class=\"mb-3\" x-show=\"edu.titulo\"><h4 class=\"font-bold text-xs\" x-text=\"edu.titulo\"><\/h4><p class=\"text-[10px] text-gray-500\" x-text=\"edu.inst\"><\/p><\/div><\/template><\/section>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n\n \n <template x-if=\"datos.plantilla === 'mateo'\">\n <div class=\"h-full flex font-['Lato'] bg-white\">\n <div class=\"w-[35%] bg-gray-50 p-10 flex flex-col border-r\"><div class=\"w-32 h-32 rounded-xl bg-white shadow-xl overflow-hidden mb-8 border-2 border-white\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div>\n <div class=\"w-full space-y-8 text-[10px]\"><section><h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">Contacto<\/h3><p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p>\n <p x-text=\"datos.web\"><\/p> \n <\/section>\n <section><h3 class=\"font-bold text-blue-800 border-b-2 border-blue-100 uppercase mb-3 pb-1\">Habilidades<\/h3><p class=\"cv-text-wrap\" x-text=\"datos.habilidades\"><\/p><\/section>\n <div x-html=\"$refs['bloque-sidebar'].innerHTML\"><\/div> \n <\/div><\/div>\n \n\n <div class=\"w-[65%] p-14\"><h1 class=\"text-5xl font-black text-blue-900 uppercase tracking-tighter\" x-text=\"datos.titulo\"><\/h1><p class=\"text-2xl text-gray-300 font-light mt-2 mb-6\" x-text=\"datos.nombre\"><\/p>\n <p class=\"text-[11px] text-gray-600 mb-8 cv-text-wrap\" x-text=\"datos.bio\"><\/p>\n <h3 class=\"font-bold text-xs text-blue-900 mb-6 uppercase tracking-[0.3em] border-b pb-2\">Experiencia<\/h3>\n <template x-for=\"exp in datos.experiencia\"><div class=\"mb-8\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-sm text-gray-800\" x-text=\"exp.cargo\"><\/h4><p class=\"text-[10px] text-blue-500 font-bold mb-2\" x-text=\"exp.empresa\"><\/p><p class=\"text-[11px] text-gray-500 cv-text-wrap leading-relaxed\" x-text=\"exp.descripcion\"><\/p><\/div><\/template>\n \n<div x-show=\"datos.educacion && datos.educacion.length\">\n <h3 class=\"font-bold text-xs text-blue-900 mb-6 uppercase tracking-[0.3em] border-b pb-2\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\" :key=\"edu.id || edu.titulo\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <h4 class=\"font-bold text-sm text-gray-800\" x-text=\"edu.titulo\"><\/h4>\n <p class=\"text-[10px] text-blue-500 font-bold\" x-text=\"edu.inst\"><\/p>\n <\/div> <\/div>\n <\/template>\n<\/div>\n\n\n \n <\/div>\n <\/template>\n \n\n <template x-if=\"datos.plantilla === 'sophia'\">\n <div class=\"h-full p-16 font-['Inter'] flex flex-col bg-white\">\n <div class=\"border-b pb-10 mb-8 flex justify-between items-center\"><div><h1 class=\"text-5xl font-light tracking-tighter text-gray-900\" x-text=\"datos.titulo\"><\/h1><p class=\"text-[#f61067] font-bold text-xs mt-3 uppercase tracking-[0.4em]\" x-text=\"datos.nombre\"><\/p><\/div><div class=\"w-24 h-24 border-2 rounded-full overflow-hidden grayscale\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div><\/div>\n <div class=\"mb-8\"><p class=\"text-[11px] text-gray-500 italic cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/div>\n <div class=\"flex gap-8 flex-1\">\n <div class=\"w-2\/3\">\n \n <section x-show=\"datos.email || datos.telefono || datos.web\" class=\"mb-10\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Contacto\n <\/h3>\n\n <div class=\"space-y-2 text-[11px] text-gray-600\">\n <p x-show=\"datos.email\" x-text=\"datos.email\"><\/p>\n <p x-show=\"datos.telefono\" x-text=\"datos.telefono\"><\/p>\n <p x-show=\"datos.web\" x-text=\"datos.web\"><\/p>\n <\/div>\n <\/section> \n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">Trayectoria<\/h3><template x-for=\"exp in datos.experiencia\"><div class=\"mb-10 border-l-2 border-gray-100 pl-6\" x-show=\"exp.cargo\"><h4 class=\"font-bold text-xs text-gray-800\" x-text=\"exp.cargo\"><\/h4><p class=\"text-[10px] text-gray-400 mt-1\" x-text=\"exp.empresa\"><\/p><p class=\"text-[11px] text-gray-500 mt-3 cv-text-wrap leading-relaxed\" x-text=\"exp.descripcion\"><\/p><\/div><\/template><\/div><div class=\"w-1\/3 text-[10px] space-y-10\"><section><h3 class=\"font-bold uppercase text-[#f61067] mb-3\">Habilidades<\/h3><p class=\"cv-text-wrap leading-loose\" x-text=\"datos.habilidades\"><\/p> <\/section>\n \n<section x-show=\"datos.herramientas\" class=\"mt-10\">\n<h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Herramientas\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.herramientas\"><\/p>\n<\/section>\n \n <section x-show=\"datos.educacion && datos.educacion.length\" class=\"mt-10\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <p class=\"font-bold text-xs text-gray-800\" x-text=\"edu.titulo\"><\/p>\n <p class=\"text-[10px] text-gray-400\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n<\/section>\n<section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold uppercase text-[#f61067] mb-3\">\n Idioma\n <\/h3>\n <p class=\"cv-text-wrap leading-loose\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n\n <\/div><\/div>\n <\/div>\n <\/template>\n\n <template x-if=\"datos.plantilla === 'lucas'\">\n <div class=\"h-full flex font-['Montserrat'] bg-white\">\n <div class=\"w-[32%] bg-[#1a202c] text-white p-10 flex flex-col\"><div class=\"w-full aspect-square rounded-2xl border-4 border-gray-700 overflow-hidden mb-10\"><img :src=\"datos.foto\" class=\"w-full h-full object-cover\" x-show=\"datos.foto\"><\/div><section><h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">Contacto<\/h3><div class=\"text-[10px] space-y-3 opacity-80\"><p x-text=\"datos.email\"><\/p><p x-text=\"datos.telefono\"><\/p>\n<p x-text=\"datos.web\"><\/p> \n <\/div>\n \n<section x-show=\"datos.habilidades\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Habilidades\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.habilidades\"><\/p>\n<\/section>\n\n\n<section x-show=\"datos.herramientas\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Herramientas\n <\/h3>\n <p class=\"text-[10px] opacity-80 leading-relaxed\"\n x-text=\"datos.herramientas\"><\/p>\n<\/section>\n\n\n\n <section x-show=\"datos.idiomas\" class=\"mt-10\">\n <h3 class=\"text-xs font-bold text-blue-400 uppercase mb-5\">\n Idioma\n <\/h3>\n <p class=\"text-[10px] opacity-80\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n\n <\/section><\/div>\n <div class=\"w-[68%] p-16\"><h1 class=\"text-6xl font-black text-gray-900 tracking-tighter\" x-text=\"datos.titulo\"><\/h1><p class=\"text-2xl text-blue-600 font-bold mt-4 mb-6\" x-text=\"datos.nombre\"><\/p>\n <p class=\"text-[11px] text-gray-500 mb-10 cv-text-wrap\" x-text=\"datos.bio\"><\/p>\n <h3 class=\"text-xs font-black bg-gray-50 border p-2.5 inline-block mb-8 uppercase\">\n Experiencia\n<\/h3>\n\n<template x-for=\"exp in datos.experiencia\">\n <div x-show=\"exp.cargo\" class=\"mb-8\">\n <h4 class=\"font-bold text-sm text-gray-800\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[10px] text-blue-600 font-bold\" x-text=\"exp.empresa\"><\/p>\n <p class=\"text-[11px] text-gray-500 mt-3 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p>\n <\/div>\n<\/template>\n\n\n<section x-show=\"datos.educacion && datos.educacion.length\" class=\"mt-10\">\n <h3 class=\"text-xs font-black bg-gray-50 border p-2.5 inline-block mb-8 uppercase\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo\">\n <p class=\"font-bold text-sm text-gray-800\" x-text=\"edu.titulo\"><\/p>\n <p class=\"text-[10px] text-blue-600 font-bold\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n<\/section>\n<\/div> \n<\/div> \n<\/template>\n\n <template x-if=\"datos.plantilla === 'elena'\">\n <div class=\"h-full p-14 font-['Playfair_Display'] flex flex-col bg-white border-[20px] border-gray-50\">\n <div class=\"text-center border-b-2 border-gray-900 pb-8 mb-10\">\n\n \n <template x-if=\"datos.foto\">\n <img :src=\"datos.foto\"\n class=\"w-28 h-28 rounded-full object-cover mx-auto mb-6 border-4 border-gray-200\">\n <\/template>\n\n <h1 class=\"text-5xl font-bold text-gray-900\" x-text=\"datos.titulo\"><\/h1>\n\n <p class=\"font-sans text-xs uppercase tracking-[0.5em] mt-4 text-gray-400 font-semibold\"\n x-text=\"datos.nombre\"><\/p>\n<\/div>\n\n <div class=\"text-center px-10 mb-10\"><p class=\"font-sans text-[11px] text-gray-600 italic cv-text-wrap\" x-text=\"datos.bio\"><\/p><\/div>\n <div class=\"flex-1 flex gap-14 font-sans\">\n\n \n <div class=\"w-2\/3 space-y-10\">\n\n \n <section>\n <h3 class=\"font-bold text-xs border-b-2 border-gray-900 inline-block mb-6 uppercase tracking-widest\">\n Trayectoria\n <\/h3>\n\n <template x-for=\"exp in datos.experiencia\">\n <div class=\"mb-8\" x-show=\"exp.cargo\">\n <h4 class=\"font-bold text-xs uppercase text-gray-800\" x-text=\"exp.cargo\"><\/h4>\n <p class=\"text-[10px] text-gray-400 italic mt-1\" x-text=\"exp.empresa\"><\/p>\n <p class=\"text-[11px] text-gray-600 mt-3 cv-text-wrap\" x-text=\"exp.descripcion\"><\/p>\n <\/div>\n <\/template>\n <\/section>\n\n \n <section>\n <h3 class=\"font-bold text-xs border-b-2 border-gray-900 inline-block mb-6 uppercase tracking-widest\">\n Educaci\u00f3n\n <\/h3>\n\n <template x-for=\"edu in datos.educacion\">\n <div class=\"mb-6\" x-show=\"edu.titulo || edu.inst\">\n <h4 class=\"font-bold text-xs uppercase text-gray-800\" x-text=\"edu.titulo\"><\/h4>\n <p class=\"text-[10px] text-gray-400 italic mt-1\" x-text=\"edu.inst\"><\/p>\n <\/div>\n <\/template>\n <\/section>\n\n <\/div>\n\n \n <div class=\"w-1\/3 text-[11px] space-y-10\">\n \n <section><h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">Contacto<\/h3><p x-text=\"datos.email\"><\/p>\n<p x-text=\"datos.telefono\"><\/p>\n <p x-text=\"datos.web\"><\/p> \n <\/section>\n \n<section x-show=\"datos.habilidades\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n HABILIDADES\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.habilidades\"><\/p>\n<\/section>\n\n<section x-show=\"datos.herramientas\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n Herramientas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.herramientas\"><\/p>\n<\/section>\n\n\n<section x-show=\"datos.idiomas\">\n <h3 class=\"font-bold border-b border-gray-900 mb-4 uppercase\">\n Idiomas\n <\/h3>\n <p class=\"cv-text-wrap\" x-text=\"datos.idiomas\"><\/p>\n<\/section>\n \n <\/div><\/div>\n <\/div>\n <\/template>\n\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n function cvApp() {\n return {\n step: 1,\n datos: {\n plantilla: 'daniel',\n nombre: 'ANDREA MARIN',\n titulo: 'Asistente Virtual Proactiva',\n foto: '',\n bio: 'Optimiza tu tiempo y procesos delegando tareas clave...',\n email: 'annmarin0318@hotmail.com',\n telefono: '+57 3042108909',\n web: 'linkedin.com\/in\/andreamarin',\n habilidades: 'Gesti\u00f3n Administrativa, Atenci\u00f3n al Cliente, Resoluci\u00f3n de Problemas.',\n herramientas: 'Google Workspace, CRM, Trello.',\n idiomas: 'Espa\u00f1ol (Nativo)',\n experiencia: [{ cargo: 'Project Manager', empresa: 'Remoto Inc | 2021-2024', descripcion: 'Liderar el equipo acad\u00e9mico, velar por la cualificaci\u00f3n del proceso...' }],\n educacion: [{ titulo: 'Administraci\u00f3n de Empresas', inst: 'U. Diversia | 2020' }]\n },\n init() {\n this.adjustAppHeight();\n this.resizePreview();\n window.addEventListener('resize', () => {\n this.adjustAppHeight();\n this.resizePreview();\n });\n this.$watch('datos', () => this.$nextTick(() => this.resizePreview()), { deep: true });\n this.$watch('step', () => this.$nextTick(() => this.resizePreview()));\n setTimeout(() => this.resizePreview(), 500);\n },\n adjustAppHeight() {\n const wrapper = document.getElementById('cv-app-wrapper');\n if (!wrapper) return;\n\n const rect = wrapper.getBoundingClientRect();\n const availableHeight = window.innerHeight - rect.top;\n\n wrapper.style.height = availableHeight + 'px';\n},\n resizePreview() {\n const stage = document.getElementById('preview-stage');\n const doc = document.getElementById('cv-document');\n if (!stage || !doc) return;\n\n const padding = 0;\n\n const stageWidth = stage.clientWidth - padding;\n const stageHeight = stage.clientHeight - padding;\n\n const scaleX = stageWidth \/ doc.offsetWidth;\n const scaleY = stageHeight \/ doc.offsetHeight;\n\n let scale = scaleX;\n if (doc.offsetHeight * scale > stageHeight) {\n scale = scaleY;\n }\n\n doc.style.transform = `scale(${scale})`;\n \n \n},\n\n cargarFoto(e) {\n const reader = new FileReader();\n reader.onload = (f) => this.datos.foto = f.target.result;\n reader.readAsDataURL(e.target.files[0]);\n },\n agregarItem(tipo) {\n this.datos[tipo].push(tipo === 'experiencia' ? { cargo: '', empresa: '', descripcion: '' } : { titulo: '', inst: '' });\n },\n removerItem(tipo, index) { this.datos[tipo].splice(index, 1); },\n descargarPDF() {\n const element = document.getElementById('cv-document');\n\n \/\/ Guardar estado del preview\n const originalTransform = element.style.transform;\n const originalOrigin = element.style.transformOrigin;\n const originalOverflow = element.style.overflow;\n\n \/\/ Preparar para exportar\n element.style.transform = 'scale(1)';\n element.style.transformOrigin = 'top left';\n element.style.overflow = 'hidden';\n\n const opt = {\n margin: 0,\n filename: `CV_${this.datos.nombre.replace(\/\\s+\/g, '_')}.pdf`,\n image: { type: 'jpeg', quality: 1 },\n html2canvas: {\n scale: 3,\n useCORS: true,\n backgroundColor: '#ffffff'\n },\n jsPDF: {\n unit: 'mm',\n format: 'a4',\n orientation: 'portrait'\n }\n };\n\n html2pdf()\n .set(opt)\n .from(element)\n .toPdf()\n .get('pdf')\n .then((pdf) => {\n const totalPages = pdf.getNumberOfPages();\n if (totalPages > 1) {\n pdf.deletePage(totalPages); \/\/ \u2190 ELIMINA LA HOJA VAC\u00cdA\n }\n })\n .save()\n .then(() => {\n \/\/ Restaurar preview\n element.style.transform = originalTransform;\n element.style.transformOrigin = originalOrigin;\n element.style.overflow = originalOverflow;\n });\n}\n\n }\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto<\/p>\n","protected":false},"author":1,"featured_media":5399,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_joinchat":[],"footnotes":""},"folder":[4],"class_list":["post-7025","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto\" \/>\n<meta property=\"og:description\" content=\"CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/\" \/>\n<meta property=\"og:site_name\" content=\"C\u00e1mbiate a Remoto\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-11T14:54:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"769\" \/>\n\t<meta property=\"og:image:height\" content=\"764\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\",\"name\":\"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"datePublished\":\"2025-04-17T15:50:11+00:00\",\"dateModified\":\"2026-02-11T14:54:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"contentUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Diseno-sin-titulo-30.jpg\",\"width\":769,\"height\":764},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/cv-creator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[LP] CREADOR DE CVS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#website\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\",\"name\":\"C\u00e1mbiate a Remoto\",\"description\":\"Y transforma tu vida\",\"publisher\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#organization\",\"name\":\"C\u00e1mbiate a Remoto\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Untitled-design-22.png\",\"contentUrl\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Untitled-design-22.png\",\"width\":800,\"height\":800,\"caption\":\"C\u00e1mbiate a Remoto\"},\"image\":{\"@id\":\"https:\\\/\\\/cambiatearemoto.com\\\/lp\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","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:\/\/cambiatearemoto.com\/lp\/cv-creator\/","og_locale":"en_US","og_type":"article","og_title":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","og_description":"CV Designer Premium – Formato A4 Idiomas Herramientas CV Designer Pro = i ? ‘bg-[#f61067]’ : ‘bg-gray-600′”> 1. Estilo y Perfil Daniel (Moderno)Mateo (Geom\u00e9trico)Sophia (Minimalista)Lucas (Tecnol\u00f3gico)Elena (Ejecutivo) \ud83d\udcf7 Experiencia + A\u00f1adir \u2715 Educaci\u00f3n + A\u00f1adir \u2715 Habilidades & Herramientas Contacto","og_url":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","og_site_name":"C\u00e1mbiate a Remoto","article_modified_time":"2026-02-11T14:54:12+00:00","og_image":[{"width":769,"height":764,"url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","url":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/","name":"[LP] CREADOR DE CVS - C\u00e1mbiate a Remoto","isPartOf":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage"},"image":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage"},"thumbnailUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","datePublished":"2025-04-17T15:50:11+00:00","dateModified":"2026-02-11T14:54:12+00:00","breadcrumb":{"@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cambiatearemoto.com\/lp\/cv-creator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#primaryimage","url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","contentUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-30.jpg","width":769,"height":764},{"@type":"BreadcrumbList","@id":"https:\/\/cambiatearemoto.com\/lp\/cv-creator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cambiatearemoto.com\/lp\/"},{"@type":"ListItem","position":2,"name":"[LP] CREADOR DE CVS"}]},{"@type":"WebSite","@id":"https:\/\/cambiatearemoto.com\/lp\/#website","url":"https:\/\/cambiatearemoto.com\/lp\/","name":"C\u00e1mbiate a Remoto","description":"Y transforma tu vida","publisher":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cambiatearemoto.com\/lp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cambiatearemoto.com\/lp\/#organization","name":"C\u00e1mbiate a Remoto","url":"https:\/\/cambiatearemoto.com\/lp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cambiatearemoto.com\/lp\/#\/schema\/logo\/image\/","url":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2023\/08\/Untitled-design-22.png","contentUrl":"https:\/\/cambiatearemoto.com\/lp\/wp-content\/uploads\/2023\/08\/Untitled-design-22.png","width":800,"height":800,"caption":"C\u00e1mbiate a Remoto"},"image":{"@id":"https:\/\/cambiatearemoto.com\/lp\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/comments?post=7025"}],"version-history":[{"count":106,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025\/revisions"}],"predecessor-version":[{"id":11485,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/pages\/7025\/revisions\/11485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/media\/5399"}],"wp:attachment":[{"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/media?parent=7025"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/cambiatearemoto.com\/lp\/wp-json\/wp\/v2\/folder?post=7025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}