{"id":8369,"date":"2026-05-28T17:44:52","date_gmt":"2026-05-28T17:44:52","guid":{"rendered":"https:\/\/voicit.com\/?page_id=8369"},"modified":"2026-05-29T15:27:57","modified_gmt":"2026-05-29T15:27:57","slug":"generador-plantilles-amb-ia","status":"publish","type":"page","link":"https:\/\/voicit.com\/ca\/generador-plantillas-con-ia\/","title":{"rendered":"Generador de plantilles amb IA"},"content":{"rendered":"\n<!--\n  VOICIT \u2014 Landing: Generador de Plantillas con IA\n  URL: \/generador-plantillas-con-ia\/\n  Embebida como Custom HTML en Gutenberg.\n-->\n\n<!-- Overrides para forzar full-width en la p\u00e1gina de WP (Astra), ocultar el page title generado por el tema, y resetear botones que el tema styliza con el color de marca -->\n<style id=\"vl-wp-overrides\">\n  \/* \u2500\u2500 1) FULL-WIDTH: anular TODOS los wrappers de Astra incluidos los IDs espec\u00edficos \u2500\u2500\n        Jerarqu\u00eda real: body > #page > #content > .ast-container > #primary > main#main > article#post-8369 > .entry-content > .vl-landing *\/\n  body.page-id-8369 div#page.hfeed.site,\n  body.page-id-8369 div#content.site-content,\n  body.page-id-8369 div#content,\n  body.page-id-8369 .ast-container,\n  body.page-id-8369 div#primary.content-area,\n  body.page-id-8369 main#main.site-main,\n  body.page-id-8369 article#post-8369,\n  body.page-id-8369 article.page,\n  body.page-id-8369 .entry-content,\n  body.page-id-8369 .entry-content.clear {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n\n  \/* Variables WordPress de padding global *\/\n  body.page-id-8369 {\n    --wp--style--root--padding-top: 0 !important;\n    --wp--style--root--padding-right: 0 !important;\n    --wp--style--root--padding-bottom: 0 !important;\n    --wp--style--root--padding-left: 0 !important;\n  }\n\n  \/* Bloques Gutenberg envolventes *\/\n  body.page-id-8369 .wp-block-html,\n  body.page-id-8369 .wp-site-blocks,\n  body.page-id-8369 .is-layout-flow,\n  body.page-id-8369 .is-layout-constrained,\n  body.page-id-8369 .has-global-padding {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n    width: 100% !important;\n  }\n\n  \/* El .vl-landing fuerza ancho viewport usando transform \u2014 m\u00e9todo bulletproof *\/\n  body.page-id-8369 .vl-landing {\n    width: 100vw !important;\n    max-width: 100vw !important;\n    position: relative !important;\n    left: 50% !important;\n    transform: translateX(-50%) !important;\n    margin: 0 !important;\n  }\n\n  \/* \u2500\u2500 3) Ocultar t\u00edtulo de p\u00e1gina del tema \u2500\u2500 *\/\n  body.page-id-8369 .entry-header,\n  body.page-id-8369 .ast-page-title-wrapper,\n  body.page-id-8369 .ast-archive-description,\n  body.page-id-8369 .entry-title,\n  body.page-id-8369 h1.entry-title,\n  body.page-id-8369 .page-title {\n    display: none !important;\n  }\n  body.page-id-8369 .entry-content > *:not(.vl-landing) { display: none; }\n\n  \/* \u2500\u2500 4) RESET BOTONES \u2014 Astra pinta TODOS los <button> con el color de marca (#E7FE15).\n        Hay que forzar nuestros colores espec\u00edficos en cada bot\u00f3n del mockup. \u2500\u2500 *\/\n  .vl-landing button,\n  .vl-landing .vl-btn {\n    box-shadow: none !important;\n    text-transform: none !important;\n    letter-spacing: normal !important;\n    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;\n  }\n\n  \/* File picker (Paso 1) \u2014 bot\u00f3n \"Subir informe\" *\/\n  .vl-landing .vl-mk-fp-btn {\n    background: #ECECEC !important;\n    color: #9A9A9A !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-filepicker.is-visible .vl-mk-fp-btn.is-enabled,\n  .vl-landing .vl-mk-fp-btn.is-enabled {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n  }\n\n  \/* Chat (Paso 2) \u2014 botones \"S\u00ed, generar\" \/ \"Ajustar\" \/ \u2715 *\/\n  .vl-landing .vl-mk-chat-btn {\n    background: #F2F2F2 !important;\n    color: #424242 !important;\n    border: 1px solid #E5E5E5 !important;\n  }\n  .vl-landing .vl-mk-chat-btn:hover {\n    background: #E5E5E5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete {\n    background: rgba(0,0,0,0.06) !important;\n    color: #161616 !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete:hover {\n    background: #FCEAEA !important;\n    color: #DC2626 !important;\n  }\n\n  \/* Editor (Paso 3) \u2014 botones de iconos formato\/longitud + acci\u00f3n \"Guardar plantilla\" *\/\n  .vl-landing .vl-mk-editor-icon-btn {\n    background: transparent !important;\n    color: #4B4B4B !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-editor-icon-btn:hover { background: #F0F0F0 !important; }\n  .vl-landing .vl-mk-editor-icon-btn.is-active {\n    background: #E5E5E5 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action {\n    background: #FFFFFF !important;\n    color: #424242 !important;\n    border: 1px solid #DDDDDD !important;\n  }\n  .vl-landing .vl-mk-editor-action:hover {\n    background: #F5F5F5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n<\/style>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VOICIT LANDING \u2014 Design System\n   Basado en gu\u00eda de marca oficial\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');\n\n\/* Reset dentro del contenedor *\/\n.vl-landing *, .vl-landing *::before, .vl-landing *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.vl-landing {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;\n  color: #161616;\n  line-height: 1.6;\n  \/* overflow-x: clip evita scroll horizontal SIN romper position:sticky de los descendientes *\/\n  overflow-x: clip;\n  \/* Full-width breakout robusto: funciona si el parent es boxed (1200px) o ya es full-width.\n     calc(50% - 50vw) da un margin negativo solo cuando el parent es m\u00e1s estrecho que el viewport. *\/\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500 Tipograf\u00eda \u2500\u2500\u2500 *\/\n.vl-landing h1 {\n  font-size: clamp(36px, 5vw, 56px);\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: #161616;\n}\n\n.vl-landing h2 {\n  font-size: clamp(28px, 3.5vw, 42px);\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: #161616;\n}\n\n.vl-landing h3 {\n  font-size: clamp(20px, 2.5vw, 28px);\n  font-weight: 700;\n  line-height: 1.3;\n  color: #161616;\n}\n\n.vl-landing h4 {\n  font-size: 18px;\n  font-weight: 600;\n  color: #161616;\n}\n\n.vl-landing p {\n  font-size: 18px;\n  line-height: 1.7;\n  color: #424242;\n}\n\n.vl-landing .text-secondary {\n  color: #6E6E6E;\n}\n\n.vl-landing .text-small {\n  font-size: 15px;\n}\n\n\/* \u2500\u2500\u2500 Layout \u2500\u2500\u2500 *\/\n.vl-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.vl-container--narrow {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.vl-section {\n  padding: 100px 0;\n}\n\n.vl-section--alt {\n  background: #F2F2F2;\n}\n\n.vl-section--dark {\n  background: #000000;\n  color: #FFFFFF;\n}\n\n\/* P\u00edldora del CTA final \u2014 contenedor gris claro estilo c\u00e1psula (stadium shape) sobre fondo blanco *\/\n.vl-cta-pill {\n  background: #F2F2F2;\n  border-radius: 9999px;          \/* el browser clampea a la mitad del lado menor \u2192 forma c\u00e1psula *\/\n  padding: 56px 80px;\n  max-width: 980px;\n  margin: 0 auto;\n  color: #161616;\n}\n\/* Botones dentro de la p\u00edldora ajustados al fondo claro *\/\n.vl-cta-pill .vl-btn--brand {\n  background: #161616 !important;\n  color: #FFFFFF !important;\n}\n.vl-cta-pill .vl-btn--brand:hover {\n  background: #2C2C2C !important;\n}\n.vl-cta-pill .vl-btn--secondary {\n  background: transparent !important;\n  border-color: #161616 !important;\n  color: #161616 !important;\n}\n.vl-cta-pill .vl-btn--secondary:hover {\n  border-color: #161616 !important;\n  background: rgba(0,0,0,0.04) !important;\n}\n@media (max-width: 768px) {\n  .vl-cta-pill {\n    padding: 56px 28px;\n    border-radius: 36px;\n  }\n}\n@media (max-width: 480px) {\n  .vl-cta-pill {\n    padding: 48px 22px;\n    border-radius: 28px;\n  }\n}\n\n.vl-section--dark h2,\n.vl-section--dark h3,\n.vl-section--dark h4 {\n  color: #FFFFFF;\n}\n\n.vl-section--dark p {\n  color: #B0B0B0;\n}\n\n\/* \u2500\u2500\u2500 Botones \u2500\u2500\u2500 *\/\n.vl-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 32px;\n  font-family: 'Manrope', sans-serif;\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 12px;\n  text-decoration: none !important;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  border: none;\n}\n\n.vl-btn--primary {\n  background: #161616 !important;\n  color: #FFFFFF !important;\n}\n\n.vl-btn--primary:hover {\n  background: #2C2C2C !important;\n}\n\n.vl-btn--secondary {\n  background: transparent !important;\n  color: #161616 !important;\n  border: 2px solid #DCDCDC;\n}\n\n.vl-btn--secondary:hover {\n  border-color: #161616;\n}\n\n.vl-btn--brand {\n  background: #E7FE15 !important;\n  color: #161616 !important;\n  font-weight: 700;\n}\n\n.vl-btn--brand:hover {\n  background: #CDE213 !important;\n}\n\n\/* \u2500\u2500\u2500 Badge \u2500\u2500\u2500 *\/\n.vl-badge {\n  display: inline-block;\n  padding: 6px 16px;\n  border-radius: 100px;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n\n.vl-badge--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-badge--green {\n  background: #DBF0DE;\n  color: #29A63B;\n}\n\n.vl-badge--blue {\n  background: #E5F5FC;\n  color: #63C2ED;\n}\n\n.vl-badge--orange {\n  background: #FCE9DF;\n  color: #ED7840;\n}\n\n\/* \u2500\u2500\u2500 Cards \u2500\u2500\u2500 *\/\n.vl-card {\n  background: #FFFFFF;\n  border: 1px solid #DCDCDC;\n  border-radius: 16px;\n  padding: 36px;\n  transition: all 0.3s ease;\n}\n\n.vl-card:hover {\n  box-shadow: 0 8px 32px rgba(0,0,0,0.08);\n  transform: translateY(-4px);\n}\n\n.vl-card--dark {\n  background: #161616;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n.vl-card--dark h3, .vl-card--dark h4 {\n  color: #FFFFFF;\n}\n\n.vl-card--dark p {\n  color: #9A9A9A;\n}\n\n\/* \u2500\u2500\u2500 Grid \u2500\u2500\u2500 *\/\n.vl-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 32px;\n}\n\n.vl-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n\/* \u2500\u2500\u2500 Screenshot mock \u2500\u2500\u2500 *\/\n.vl-screenshot {\n  width: 100%;\n  border-radius: 16px;\n  border: 1px solid #DCDCDC;\n  box-shadow: 0 16px 48px rgba(0,0,0,0.1);\n  overflow: hidden;\n}\n\n.vl-screenshot img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Placeholder para screenshots (reemplazar con img reales) *\/\n.vl-screenshot-placeholder {\n  width: 100%;\n  aspect-ratio: 16\/10;\n  border-radius: 16px;\n  border: 2px dashed #DCDCDC;\n  background: #FAFAFA;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #9A9A9A;\n  text-align: center;\n  padding: 20px;\n}\n\n\/* \u2500\u2500\u2500 Iconos decorativos \u2500\u2500\u2500 *\/\n.vl-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 24px;\n  flex-shrink: 0;\n}\n\n.vl-icon--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-icon--light {\n  background: #F2F2F2;\n  color: #161616;\n}\n\n.vl-icon img {\n  width: 32px;\n  height: 32px;\n  object-fit: contain;\n}\n\n.vl-icon img.vl-icon-invert {\n  filter: invert(1);\n}\n\n\/* \u2500\u2500\u2500 Tooltip info icon \u2500\u2500\u2500 *\/\n.vl-info-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: default;\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n.vl-info-tooltip .vl-info-icon {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: #E8E8E8;\n  color: #777;\n  font-size: 12px;\n  font-weight: 700;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  flex-shrink: 0;\n  transition: background 0.2s;\n}\n\n.vl-info-tooltip:hover .vl-info-icon {\n  background: #D0D0D0;\n  color: #444;\n}\n\n.vl-info-tooltip .vl-info-text {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #161616;\n  color: #FFFFFF;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n  padding: 12px 16px;\n  border-radius: 10px;\n  width: 320px;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s, visibility 0.25s;\n  pointer-events: none;\n  z-index: 10;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n}\n\n.vl-info-tooltip .vl-info-text::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #161616;\n}\n\n.vl-info-tooltip:hover .vl-info-text {\n  opacity: 1;\n  visibility: visible;\n}\n\n\/* \u2500\u2500 Card flip on hover \u2500\u2500 *\/\n.vl-card--flip {\n  position: relative;\n  min-height: 120px;\n  cursor: default;\n}\n.vl-card-flip-front {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 20px;\n}\n.vl-card-flip-front h4 {\n  font-size: 20px;\n  margin: 0;\n}\n.vl-card-flip-back {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 32px;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  z-index: 2;\n}\n.vl-card--flip:hover .vl-card-flip-back {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* \u2500\u2500\u2500 Separador gradiente Voicit \u2500\u2500\u2500 *\/\n.vl-gradient-bar {\n  height: 4px;\n  background: linear-gradient(90deg, #E7FE15 0%, #B8CC76 50%, #56AB91 100%);\n  border-radius: 2px;\n}\n\n\/* \u2500\u2500\u2500 Step indicator \u2500\u2500\u2500 *\/\n.vl-step-number {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  font-weight: 800;\n  flex-shrink: 0;\n}\n\n\/* \u2500\u2500\u2500 Animaciones (scroll reveal) \u2500\u2500\u2500 *\/\n.vl-reveal {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.vl-reveal.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.vl-reveal-delay-1 { transition-delay: 0.1s; }\n.vl-reveal-delay-2 { transition-delay: 0.2s; }\n.vl-reveal-delay-3 { transition-delay: 0.3s; }\n\n\/* Animaci\u00f3n float suave para screenshots *\/\n@keyframes vl-float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n\n.vl-float {\n  animation: vl-float 4s ease-in-out infinite;\n}\n\n\/* Pulse para CTAs *\/\n@keyframes vl-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 rgba(231,254,21,0.4); }\n  50% { box-shadow: 0 0 0 12px rgba(231,254,21,0); }\n}\n\n.vl-pulse {\n  animation: vl-pulse 2.5s ease-in-out infinite;\n}\n\n\/* Gradiente de fondo animado (hero) *\/\n@keyframes vl-gradient-move {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n\/* Ticker \/ marquee logos *\/\n@keyframes vl-scroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\/* \u2500\u2500\u2500 Testimonial \u2500\u2500\u2500 *\/\n.vl-testimonial {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px;\n  border: 1px solid #DCDCDC;\n  position: relative;\n}\n\n.vl-testimonial::before {\n  content: '\"';\n  font-size: 80px;\n  font-weight: 800;\n  color: #E7FE15;\n  position: absolute;\n  top: 12px;\n  left: 28px;\n  line-height: 1;\n}\n\n.vl-testimonial-text {\n  font-size: 17px;\n  line-height: 1.7;\n  color: #424242;\n  font-style: italic;\n  padding-top: 28px;\n}\n\n.vl-testimonial-author {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-top: 24px;\n}\n\n.vl-testimonial-avatar {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: #F2F2F2;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.vl-testimonial-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.vl-testimonial-name {\n  font-size: 15px;\n  font-weight: 700;\n  color: #161616;\n}\n\n.vl-testimonial-role {\n  font-size: 13px;\n  color: #6E6E6E;\n  line-height: 1.4;\n}\n\n.vl-testimonials-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 24px;\n}\n\n@media (max-width: 900px) {\n  .vl-testimonials-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Testimonial sticky-stack \u2500\u2500\u2500 *\/\n.vl-tstack-section { position: relative; }\n\n\/* Track de scroll: 3 viewports de altura = espacio para mostrar las 3 tarjetas *\/\n.vl-tstack-track {\n  position: relative;\n  height: 300vh;\n}\n\n\/* El contenido se queda fijo mientras dura el track *\/\n.vl-tstack-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  overflow: hidden;\n  padding: 60px 0;\n  box-sizing: border-box;\n}\n\n\/* Contenedor de las cards (apiladas en absoluto) *\/\n.vl-tstack-cards {\n  position: relative;\n  width: 100%;\n  max-width: 620px;\n  margin: 0 auto;\n  min-height: 280px;\n}\n\n\/* Cada card empieza fuera de pantalla (abajo) y entra al llegar su turno *\/\n.vl-tstack-card {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  margin: 0;\n  transform: translateY(120vh);\n  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);\n  background: #FFFFFF;\n  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.15);\n}\n.vl-tstack-card[data-tstack-idx=\"0\"] { z-index: 1; }\n.vl-tstack-card[data-tstack-idx=\"1\"] { z-index: 2; }\n.vl-tstack-card[data-tstack-idx=\"2\"] { z-index: 3; }\n\n.vl-tstack-card.is-visible {\n  transform: translateY(0);\n}\n\n\/* Las cards detr\u00e1s se mueven ligeramente arriba con cada nueva,\n   creando sensaci\u00f3n de \"pila de cartas\" *\/\n.vl-tstack-card.is-behind-1 { transform: translateY(-14px) scale(0.97); }\n.vl-tstack-card.is-behind-2 { transform: translateY(-26px) scale(0.94); }\n.vl-tstack-card.is-behind-3 { transform: translateY(-36px) scale(0.91); }\n\n\/* En m\u00f3vil el sticky-stack se mantiene activo (queremos la animaci\u00f3n apilada tambi\u00e9n en vertical).\n   Ajustes espec\u00edficos para m\u00f3vil est\u00e1n en el bloque de auditor\u00eda @media al final del CSS. *\/\n\n.vl-testimonial--compact {\n  padding: 32px 32px 28px;\n}\n\n.vl-testimonial-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #161616;\n  color: #FFFFFF;\n  border-radius: 100px;\n  padding: 10px 18px;\n  font-size: 14px;\n  font-weight: 600;\n  margin-bottom: 16px;\n}\n\n.vl-testimonial-rating .vl-stars {\n  color: #E7FE15;\n  letter-spacing: 1px;\n}\n\n.vl-testimonial-avatar--initials {\n  background: linear-gradient(135deg, #1F1F1F 0%, #3A3A3A 100%);\n  color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 16px;\n  letter-spacing: 0.5px;\n}\n\n\/* \u2500\u2500\u2500 FAQ (estilo minimalista, chevron a la izquierda) \u2500\u2500\u2500 *\/\n.vl-faq details {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #ECECEC;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.vl-faq details:last-child {\n  border-bottom: none;\n}\n\n.vl-faq summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 20px 0 20px 36px;\n  font-size: 17px;\n  font-weight: 500;\n  color: #161616;\n  display: block;\n  position: relative;\n  transition: color 0.2s;\n}\n.vl-faq summary:hover {\n  color: #424242;\n}\n\n.vl-faq summary::-webkit-details-marker { display: none; }\n\n\/* Chevron a la izquierda del texto, construido con bordes CSS (sin imagen) *\/\n.vl-faq summary::before {\n  content: \"\";\n  position: absolute;\n  left: 8px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #161616;\n  border-bottom: 2px solid #161616;\n  transform: translateY(-75%) rotate(45deg);\n  transition: transform 0.25s ease;\n}\n.vl-faq details[open] summary::before {\n  transform: translateY(-25%) rotate(-135deg);\n}\n\n.vl-faq .vl-faq-answer {\n  padding: 0 0 20px 36px;\n  font-size: 15.5px;\n  line-height: 1.65;\n  color: #6E6E6E;\n}\n\n\/* \u2500\u2500\u2500 Logos marquee \u2500\u2500\u2500 *\/\n.vl-logos-track {\n  display: flex;\n  align-items: center;\n  width: max-content;\n  animation: vl-scroll 33s linear infinite;\n}\n\n.vl-logos-track img {\n  height: 32px;\n  width: auto;\n  max-width: 150px;\n  object-fit: contain;\n  margin-right: 72px;\n  flex-shrink: 0;\n  opacity: 0.6;\n  filter: grayscale(100%);\n  transition: opacity 0.3s, filter 0.3s;\n}\n\n\/* Override espec\u00edfico: el logo de ieTeam tiene mucho aire transparente\n   alrededor de su PNG y queda visualmente peque\u00f1o. Le subimos altura. *\/\n.vl-logos-track img[alt=\"ieTeam\"] {\n  height: 60px;\n  max-width: 210px;\n}\n\n.vl-logos-track img:hover {\n  opacity: 1;\n  filter: grayscale(0%);\n}\n\n\/* \u2500\u2500\u2500 Google rating \u2500\u2500\u2500 *\/\n.vl-google-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  background: #161616;\n  color: #FFFFFF;\n  padding: 12px 24px;\n  border-radius: 100px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.vl-google-badge svg {\n  width: 20px;\n  height: 20px;\n}\n\n.vl-stars {\n  color: #FFE14C;\n  letter-spacing: 2px;\n}\n\n\/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .vl-grid-2, .vl-grid-3 {\n    grid-template-columns: 1fr;\n  }\n\n  .vl-section {\n    padding: 64px 0;\n  }\n\n  .vl-hero-flex {\n    flex-direction: column;\n    text-align: center;\n  }\n\n  .vl-hero-actions {\n    justify-content: center;\n  }\n\n  .vl-step-row {\n    flex-direction: column;\n  }\n}\n\n@media (max-width: 600px) {\n  .vl-landing h1 {\n    font-size: 32px;\n  }\n\n  .vl-landing h2 {\n    font-size: 26px;\n  }\n\n  .vl-btn {\n    padding: 14px 24px;\n    font-size: 15px;\n    width: 100%;\n    justify-content: center;\n  }\n\n  .vl-hero-actions {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .vl-card {\n    padding: 28px 24px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Utilidades \u2500\u2500\u2500 *\/\n.vl-text-center { text-align: center; }\n\/* \u2500\u2500\u2500 Mockup Hero: PDF \u2192 IA \u2192 Plantilla \u2500\u2500\u2500 *\/\n.vl-hero-mockup {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0;\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 DROPZONE (siempre visible al inicio) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.vl-mk-dropzone {\n  position: relative;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 96px;\n  padding: 16px;\n  border: 2px dashed #C5C5C5;\n  border-radius: 12px;\n  background: rgba(255,255,255,0.5);\n  margin-bottom: 4px;\n  transition: border-color 0.4s ease, background 0.4s ease;\n  animation: vl-dropzone-soften 0.5s ease-out 1.4s forwards;\n}\n@keyframes vl-dropzone-soften {\n  to {\n    border-color: #ECECEC;\n    background: transparent;\n  }\n}\n\n\/* Hint inicial dentro del dropzone *\/\n.vl-mk-dropzone-hint {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  color: #9A9A9A;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.2px;\n  pointer-events: none;\n  animation: vl-hint-out 0.4s ease-out 1.0s forwards;\n}\n@keyframes vl-hint-out {\n  to { opacity: 0; visibility: hidden; }\n}\n\n\/* PDF que entra desde fuera *\/\n.vl-mk-pdf-wrapper {\n  position: relative;\n  opacity: 0;\n  transform: translate(70px, -50px);\n  animation: vl-pdf-drop 1.0s cubic-bezier(0.34, 1.15, 0.64, 1) 0.45s forwards;\n}\n@keyframes vl-pdf-drop {\n  0%   { opacity: 0; transform: translate(70px, -50px); }\n  30%  { opacity: 1; }\n  100% { opacity: 1; transform: translate(0, 0); }\n}\n.vl-mk-pdf {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 12px 16px 12px 12px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);\n  transform: rotate(-2deg);\n}\n.vl-mk-pdf-icon { flex-shrink: 0; }\n.vl-mk-pdf-name {\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.2;\n}\n.vl-mk-pdf-size {\n  font-size: 11px;\n  color: #9A9A9A;\n  margin-top: 2px;\n}\n.vl-mk-cursor {\n  position: absolute;\n  bottom: -10px;\n  right: -6px;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\n  opacity: 0;\n  animation: vl-cursor-show 0.3s ease-out 0.45s forwards, vl-cursor-bob 2.6s ease-in-out 1.5s infinite;\n}\n@keyframes vl-cursor-show {\n  to { opacity: 1; }\n}\n@keyframes vl-cursor-bob {\n  0%, 100% { transform: translate(0,0); }\n  50%      { transform: translate(-4px,-3px); }\n}\n\n\/* Flechas conectoras \u2014 aparecen despu\u00e9s de la fase anterior *\/\n.vl-mk-arrow {\n  align-self: center;\n  display: flex;\n  justify-content: center;\n  height: 28px;\n  margin: 10px 0;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.35s ease-out forwards;\n}\n.vl-mk-arrow--1 { animation-delay: 1.55s; }\n.vl-mk-arrow--2 { animation-delay: 2.45s; }\n@keyframes vl-fade-down {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* M\u00e1quina Voicit \u2014 aparece despu\u00e9s de la flecha 1 *\/\n.vl-mk-machine {\n  position: relative;\n  align-self: center;\n  background: #161616;\n  border-radius: 12px;\n  padding: 14px 20px;\n  min-width: 220px;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 1.85s forwards;\n}\n.vl-mk-machine-pulse {\n  display: none;\n}\n.vl-mk-machine-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.vl-mk-machine-logo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #FFFFFF;\n}\n.vl-mk-machine-logo .vl-mk-gear path { fill: #E7FE15; }\n\n\/* Engranaje girando sobre su propio eje *\/\n.vl-mk-gear {\n  transform-origin: center;\n  transform-box: fill-box;\n  animation: vl-spin 7s linear infinite;\n}\n@keyframes vl-spin {\n  to { transform: rotate(360deg); }\n}\n\n.vl-mk-machine-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n}\n.vl-mk-dot {\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.vl-mk-dot::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #E7FE15;\n  animation: vl-blink 1.4s ease-in-out infinite;\n}\n@keyframes vl-blink {\n  0%, 100% { opacity: 1; }\n  50%      { opacity: 0.3; }\n}\n\n\/* Shimmer en el texto \"Analizando estructura...\" \u2014 estilo ChatGPT\/Claude *\/\n.vl-mk-shimmer {\n  background: linear-gradient(\n    90deg,\n    rgba(154,154,154,1) 0%,\n    rgba(154,154,154,1) 35%,\n    rgba(255,255,255,1) 50%,\n    rgba(154,154,154,1) 65%,\n    rgba(154,154,154,1) 100%\n  );\n  background-size: 250% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: vl-shimmer 2.2s linear infinite;\n}\n@keyframes vl-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\/* Plantilla generada *\/\n.vl-mk-template {\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 16px 18px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.08);\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 2.75s forwards;\n}\n.vl-mk-template-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding-bottom: 10px;\n  margin-bottom: 10px;\n  border-bottom: 1px solid #F0F0F0;\n}\n.vl-mk-template-title {\n  font-size: 12.5px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.3;\n}\n.vl-mk-badge-ok {\n  flex-shrink: 0;\n  background: #E7FE15;\n  color: #161616;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 100px;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.vl-mk-section-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.vl-mk-section-list li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12.5px;\n  color: #424242;\n  font-weight: 500;\n  opacity: 0;\n  animation: vl-li-fade 0.45s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) { animation-delay: 3.1s; }\n.vl-mk-section-list li:nth-child(2) { animation-delay: 3.7s; }\n.vl-mk-section-list li:nth-child(3) { animation-delay: 4.3s; }\n.vl-mk-section-list li:nth-child(4) { animation-delay: 4.9s; }\n.vl-mk-section-list li:nth-child(5) { animation-delay: 5.5s; }\n@keyframes vl-li-fade {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Texto de cada secci\u00f3n: efecto typewriter de izquierda a derecha *\/\n.vl-mk-section-text {\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 0;\n  animation: vl-typewriter 0.55s steps(24, end) forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-section-text { animation-delay: 3.15s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-section-text { animation-delay: 3.75s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-section-text { animation-delay: 4.35s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-section-text { animation-delay: 4.95s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-section-text { animation-delay: 5.55s; }\n@keyframes vl-typewriter {\n  to { max-width: 260px; }\n}\n\n.vl-mk-check {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  font-size: 9px;\n  font-weight: 800;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  opacity: 0;\n  transform: scale(0.4);\n  animation: vl-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-check { animation-delay: 3.70s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-check { animation-delay: 4.30s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-check { animation-delay: 4.90s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-check { animation-delay: 5.50s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-check { animation-delay: 6.10s; }\n@keyframes vl-check-pop {\n  to { opacity: 1; transform: scale(1); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 1 \u2014 File picker\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-filepicker {\n  position: relative;\n  background: #FFFFFF;\n  border-radius: 14px;\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\n  border: 1px solid #E8E8E8;\n  max-width: 480px;\n  margin: 0 auto;\n}\n.vl-mk-fp-header {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 16px;\n  border-bottom: 1px solid #EEEEEE;\n  background: #FAFAFA;\n}\n.vl-mk-fp-dots { display: flex; gap: 6px; }\n.vl-mk-fp-dots span {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #D8D8D8;\n}\n.vl-mk-fp-dots span:nth-child(1) { background: #FF5F57; }\n.vl-mk-fp-dots span:nth-child(2) { background: #FEBC2E; }\n.vl-mk-fp-dots span:nth-child(3) { background: #28C840; }\n.vl-mk-fp-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n.vl-mk-fp-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  padding: 18px;\n}\n.vl-mk-fp-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border-radius: 10px;\n  background: #F7F7F7;\n  border: 2px solid transparent;\n  cursor: pointer;\n  user-select: none;\n  transition: border-color 0.25s ease, background 0.25s ease;\n}\n.vl-mk-fp-file:hover {\n  background: #F0F0F0;\n}\n.vl-mk-fp-file.is-selected {\n  background: #EAEAEA;\n  border-color: #161616;\n}\n.vl-mk-fp-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #2A2A2A;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.vl-mk-fp-actions {\n  padding: 14px 18px 18px;\n  display: flex;\n  justify-content: flex-end;\n}\n.vl-mk-fp-btn {\n  background: #ECECEC;\n  color: #9A9A9A;\n  border: none;\n  border-radius: 8px;\n  padding: 10px 18px;\n  font-size: 13px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: default;\n  transition: background 0.3s ease, color 0.3s ease;\n}\n.vl-mk-fp-btn.is-enabled {\n  background: #161616;\n  color: #FFFFFF;\n  cursor: pointer;\n}\n.vl-mk-fp-btn.is-enabled:hover {\n  background: #2C2C2C;\n}\n\n\/* Toast del Paso 1 \u2014 pop-up desde arriba *\/\n.vl-mk-fp-toast {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background: #FFFFFF;\n  border: 1px solid #E0E0E0;\n  border-left: 4px solid #E7FE15;\n  border-radius: 10px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 10;\n}\n.vl-mk-fp-toast.is-showing {\n  animation: vl-fp-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n}\n.vl-mk-fp-toast.is-hiding {\n  animation: vl-fp-toast-out 0.4s ease-in forwards;\n}\n@keyframes vl-fp-toast-in {\n  from { opacity: 0; transform: translate(-50%, -100%); }\n  to   { opacity: 1; transform: translate(-50%, 0); }\n}\n@keyframes vl-fp-toast-out {\n  from { opacity: 1; transform: translate(-50%, 0); }\n  to   { opacity: 0; transform: translate(-50%, -100%); }\n}\n\n\/* Animaciones \u2014 se disparan al entrar en viewport (.is-visible) *\/\n.vl-mk-filepicker.is-visible .vl-mk-fp-file {\n  opacity: 0;\n  animation: vl-fp-file-in 0.4s ease-out forwards;\n}\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(1) { animation-delay: 0.2s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(2) { animation-delay: 0.35s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(3) { animation-delay: 0.50s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(4) { animation-delay: 0.65s; }\n@keyframes vl-fp-file-in {\n  from { opacity: 0; transform: translateY(6px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* La selecci\u00f3n de archivo y la activaci\u00f3n del bot\u00f3n ahora son manuales\n   (gestionadas por JS al hacer click). No hay animaciones autom\u00e1ticas. *\/\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 2 \u2014 Chat con el agente\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-chat {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  max-width: 560px;\n  margin: 0 auto;\n}\n.vl-mk-chat-row {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n  opacity: 0;\n}\n.vl-mk-chat-row--user { justify-content: flex-end; }\n.vl-mk-chat-row--ai   { justify-content: flex-start; }\n\n.vl-mk-chat-avatar {\n  flex-shrink: 0;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  background: #161616;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 2px;\n}\n.vl-mk-chat-avatar svg {\n  display: block;\n  transform: translateY(1.5px);\n}\n.vl-mk-chat-bubble {\n  background: #FFFFFF;\n  border: 1px solid #E8E8E8;\n  border-radius: 14px;\n  padding: 16px 18px;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #2A2A2A;\n  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06);\n  max-width: 88%;\n}\n.vl-mk-chat-bubble--user {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n  border-bottom-right-radius: 4px;\n}\n.vl-mk-chat-bubble--ai {\n  border-bottom-left-radius: 4px;\n}\n\n.vl-mk-chat-pdf-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255,255,255,0.08);\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12.5px;\n  font-weight: 600;\n  color: #FFFFFF;\n}\n\n.vl-mk-chat-intro,\n.vl-mk-chat-question {\n  margin: 0 0 10px;\n  font-weight: 600;\n  color: #161616;\n}\n.vl-mk-chat-question { margin-top: 14px; margin-bottom: 12px; }\n.vl-mk-chat-sections {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n}\n.vl-mk-chat-sections li {\n  position: relative;\n  padding-left: 18px;\n  font-size: 13.5px;\n  font-weight: 600;\n  color: #161616;\n  opacity: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  overflow: hidden;\n}\n.vl-mk-chat-sections li::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 9px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #E7FE15;\n}\n.vl-mk-chat-section-name {\n  flex: 1;\n}\n\n\/* Bot\u00f3n \u2715 para eliminar secci\u00f3n \u2014 oculto por defecto, visible en modo edici\u00f3n *\/\n.vl-mk-chat-li-delete {\n  display: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(0,0,0,0.06);\n  color: #161616;\n  font-size: 11px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  padding: 0;\n  transition: background 0.2s, color 0.2s, transform 0.2s;\n}\n.vl-mk-chat.is-editing .vl-mk-chat-li-delete {\n  display: inline-flex;\n  animation: vl-chat-x-in 0.3s ease-out forwards;\n}\n.vl-mk-chat-li-delete:hover {\n  background: #FCEAEA;\n  color: #DC2626;\n}\n@keyframes vl-chat-x-in {\n  from { opacity: 0; transform: scale(0.5); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\n\/* Animaci\u00f3n al borrar una secci\u00f3n *\/\n.vl-mk-chat-sections li.is-removing {\n  animation: vl-chat-li-remove 0.32s ease-in forwards;\n}\n@keyframes vl-chat-li-remove {\n  to {\n    opacity: 0;\n    max-height: 0;\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    transform: translateX(20px);\n  }\n}\n\n.vl-mk-chat-buttons {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n  flex-wrap: wrap;\n}\n.vl-mk-chat-btn {\n  background: #F2F2F2;\n  color: #424242;\n  border: 1px solid #E5E5E5;\n  border-radius: 100px;\n  padding: 7px 14px;\n  font-size: 12px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n}\n.vl-mk-chat-btn:hover {\n  background: #E5E5E5;\n  border-color: #161616;\n  color: #161616;\n}\n.vl-mk-chat-btn--primary {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n}\n.vl-mk-chat-btn--primary:hover {\n  background: #2C2C2C;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n.vl-mk-chat-btn[disabled],\n.vl-mk-chat-btn:disabled {\n  cursor: default;\n}\n\n\/* Mensaje final \"\u2713 Borrador de plantilla generado\" *\/\n.vl-mk-chat-done {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: #161616;\n  font-weight: 700;\n  font-size: 14px;\n}\n.vl-mk-chat-done svg { flex-shrink: 0; }\n\n\/* Animaciones \u2014 disparadas con .is-visible *\/\n.vl-mk-chat.is-visible .vl-mk-chat-row--user {\n  animation: vl-chat-in-right 0.45s ease-out 0.15s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-response {\n  animation: vl-chat-in-left 0.45s ease-out 2.6s forwards;\n}\n\/* La burbuja de \"pensando\" se desvanece justo antes de aparecer la respuesta *\/\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards,\n             vl-chat-fade-out 0.4s ease-in 2.3s forwards;\n}\n@keyframes vl-chat-in-right {\n  from { opacity: 0; transform: translateX(20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes vl-chat-in-left {\n  from { opacity: 0; transform: translateX(-20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes vl-chat-fade-out {\n  to { opacity: 0; height: 0; margin: 0; padding: 0; transform: scaleY(0); transform-origin: top; }\n}\n\n\/* Lista de secciones \u2014 typewriter staggered *\/\n.vl-mk-chat.is-visible .vl-mk-chat-sections li {\n  animation: vl-chat-li-in 0.4s ease-out forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(1) { animation-delay: 3.2s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(2) { animation-delay: 3.6s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(3) { animation-delay: 4.0s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(4) { animation-delay: 4.4s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(5) { animation-delay: 4.8s; }\n@keyframes vl-chat-li-in {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* La pregunta y los botones aparecen al final *\/\n.vl-mk-chat-question {\n  opacity: 0;\n}\n.vl-mk-chat-buttons {\n  opacity: 0;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-question {\n  animation: vl-chat-fade-up 0.4s ease-out 5.3s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-buttons {\n  animation: vl-chat-fade-up 0.4s ease-out 5.6s forwards;\n}\n@keyframes vl-chat-fade-up {\n  from { opacity: 0; transform: translateY(4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* La intro \"He detectado...\" aparece justo cuando la respuesta entra *\/\n.vl-mk-chat-intro {\n  opacity: 0;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-intro {\n  animation: vl-chat-fade-up 0.4s ease-out 2.9s forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 3 \u2014 Editor de plantilla\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-editor {\n  position: relative;\n  background: #FFFFFF;\n  border-radius: 14px;\n  border: 1px solid #E8E8E8;\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\n  max-width: 540px;\n  margin: 0 auto;\n}\n\n\/* Cabecera del editor *\/\n.vl-mk-editor-head {\n  padding: 12px 18px;\n  border-bottom: 1px solid #EEEEEE;\n  background: #FAFAFA;\n  border-radius: 14px 14px 0 0;\n}\n.vl-mk-editor-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n}\n\n\/* Cuerpo con secciones *\/\n.vl-mk-editor-body {\n  padding: 14px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n\/* Secci\u00f3n (estado base = colapsada) *\/\n.vl-mk-editor-section {\n  background: #F7F7F7;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  opacity: 0;\n  transform: translateX(-6px);\n  overflow: hidden;\n  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n}\n.vl-mk-editor-section-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 11px 14px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.2s ease;\n}\n.vl-mk-editor-section-head:hover {\n  background: rgba(0,0,0,0.03);\n}\n.vl-mk-editor-drag {\n  color: #B0B0B0;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: -2px;\n  line-height: 1;\n  user-select: none;\n  cursor: grab;\n  padding: 0 4px;\n  touch-action: none;\n  transition: color 0.2s ease;\n}\n.vl-mk-editor-drag:hover {\n  color: #4B4B4B;\n}\n.vl-mk-editor-section--dragging .vl-mk-editor-drag,\n.vl-mk-editor--is-dragging .vl-mk-editor-drag {\n  cursor: grabbing;\n}\n\n\/* Secci\u00f3n durante el arrastre \u2014 flota con sombra y leve transparencia *\/\n.vl-mk-editor-section--dragging {\n  position: relative;\n  z-index: 50;\n  box-shadow: 0 14px 32px -4px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);\n  opacity: 0.96;\n  cursor: grabbing;\n  transition: box-shadow 0.15s ease, opacity 0.15s ease;\n}\n.vl-mk-editor--is-dragging {\n  cursor: grabbing;\n}\n.vl-mk-editor-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: #2A2A2A;\n}\n.vl-mk-editor-caret {\n  margin-left: auto;\n  color: #888;\n  font-size: 12px;\n  transition: transform 0.25s ease;\n  transform: rotate(-90deg);\n}\n\n\/* Secci\u00f3n abierta *\/\n.vl-mk-editor-section--open {\n  background: #FFFFFF;\n  border-color: #161616;\n  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15), 0 0 0 1px #161616;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-head {\n  background: #F2F2F2;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-head:hover {\n  background: #ECECEC;\n}\n.vl-mk-editor-section--open .vl-mk-editor-caret {\n  transform: rotate(0deg);\n}\n\n\/* Cuerpo de la secci\u00f3n \u2014 controlado por transition *\/\n.vl-mk-editor-section-body {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  max-height: 0;\n  opacity: 0;\n  padding: 0 14px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-body {\n  max-height: 400px;\n  opacity: 1;\n  padding: 14px;\n}\n\n\/* Caja de instrucciones editable *\/\n.vl-mk-editor-instructions {\n  background: #FAFAFA;\n  border: 1px solid #EEEEEE;\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 12.5px;\n  line-height: 1.55;\n  color: #424242;\n  font-style: italic;\n}\n\n\/* Controles Formato \/ Longitud *\/\n.vl-mk-editor-controls {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n  opacity: 1;\n}\n.vl-mk-editor-ctrl-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.vl-mk-editor-ctrl-label {\n  font-size: 12px;\n  color: #6E6E6E;\n  font-weight: 500;\n}\n.vl-mk-editor-btn-group {\n  display: flex;\n  gap: 4px;\n}\n.vl-mk-editor-icon-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 7px;\n  color: #4B4B4B;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease;\n  padding: 0;\n  font-family: inherit;\n}\n.vl-mk-editor-icon-btn:hover {\n  background: #F0F0F0;\n}\n.vl-mk-editor-icon-btn.is-active {\n  background: #E5E5E5;\n  color: #161616;\n}\n.vl-mk-editor-icon-btn.is-active:hover {\n  background: #DBDBDB;\n}\n.vl-mk-editor-hash {\n  font-size: 18px;\n  font-weight: 800;\n  font-family: inherit;\n  line-height: 1;\n}\n\n\/* Footer *\/\n.vl-mk-editor-footer {\n  display: flex;\n  gap: 8px;\n  padding: 14px 18px;\n  border-top: 1px solid #EEEEEE;\n  background: #FAFAFA;\n  justify-content: flex-end;\n  border-radius: 0 0 14px 14px;\n}\n.vl-mk-editor-action {\n  background: #FFFFFF;\n  color: #424242;\n  border: 1px solid #DDDDDD;\n  border-radius: 8px;\n  padding: 8px 14px;\n  font-size: 12.5px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n}\n.vl-mk-editor-action:hover {\n  background: #F5F5F5;\n  border-color: #161616;\n  color: #161616;\n}\n.vl-mk-editor-action--primary {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n}\n.vl-mk-editor-action--primary:hover {\n  background: #2C2C2C;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n\/* Toast \u2014 pop-up que entra desde arriba *\/\n.vl-mk-editor-toast {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background: #FFFFFF;\n  border: 1px solid #E0E0E0;\n  border-left: 4px solid #E7FE15;\n  border-radius: 10px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n\/* \u2550\u2550\u2550 ANIMACIONES INICIALES (entrada) \u2014 disparadas con .is-visible \u2550\u2550\u2550 *\/\n\n\/* Las 5 secciones aparecen escalonadas al hacer scroll *\/\n.vl-mk-editor.is-visible .vl-mk-editor-section {\n  animation: vl-ed-section-in 0.4s ease-out forwards;\n}\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(1) { animation-delay: 0.20s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(2) { animation-delay: 0.35s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(3) { animation-delay: 0.50s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(4) { animation-delay: 0.65s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(5) { animation-delay: 0.80s; }\n@keyframes vl-ed-section-in {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Bot\u00f3n \"Guardar plantilla\" \u2014 pulso al hacer click (controlado por JS) *\/\n\n\/* Toast \u2014 visible cuando tiene .is-showing (controlado por JS) *\/\n@keyframes vl-ed-toast-in {\n  from { opacity: 0; transform: translate(-50%, -100%); }\n  to   { opacity: 1; transform: translate(-50%, 0); }\n}\n@keyframes vl-ed-toast-out {\n  from { opacity: 1; transform: translate(-50%, 0); }\n  to   { opacity: 0; transform: translate(-50%, -100%); }\n}\n.vl-mk-editor-toast.is-showing {\n  animation: vl-ed-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n}\n.vl-mk-editor-toast.is-hiding {\n  animation: vl-ed-toast-out 0.4s ease-in forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PAIN CARDS \u2014 Colores e iconos animados en hover\n   Estado base = blanco\/negro. Solo se activa al pasar el rat\u00f3n.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-card--pain {\n  transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;\n}\n.vl-card--pain .vl-icon {\n  transition: background-color 0.4s ease;\n}\n\n\/* Hourglass \u2014 amarillo p\u00e1lido + flip 180\u00b0 *\/\n.vl-card--pain-1 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);\n}\n.vl-card--pain-1:hover {\n  background-color: #FFF9DB;\n}\n.vl-card--pain-1:hover .vl-icon {\n  background-color: #FCE899;\n}\n.vl-card--pain-1:hover .vl-pain-icon-svg {\n  transform: rotate(180deg);\n}\n\n\/* X mark \u2014 rojo p\u00e1lido + vaiv\u00e9n *\/\n.vl-card--pain-2 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n}\n.vl-card--pain-2:hover {\n  background-color: #FCEAEA;\n}\n.vl-card--pain-2:hover .vl-icon {\n  background-color: #F5BABA;\n}\n.vl-card--pain-2:hover .vl-pain-icon-svg {\n  animation: vl-pain-wobble 0.55s ease-in-out;\n}\n@keyframes vl-pain-wobble {\n  0%, 100% { transform: rotate(0deg); }\n  20%      { transform: rotate(-14deg); }\n  50%      { transform: rotate(12deg); }\n  75%      { transform: rotate(-6deg); }\n}\n\n\/* Gear \u2014 azul p\u00e1lido + giro continuo (al mismo ritmo que el del hero) *\/\n.vl-card--pain-3 .vl-pain-icon-img {\n  transform-origin: center;\n  animation: vl-pain-spin 7s linear infinite;\n  animation-play-state: paused;\n}\n.vl-card--pain-3:hover {\n  background-color: #EEF5FE;\n}\n.vl-card--pain-3:hover .vl-icon {\n  background-color: #C9DEFC;\n}\n.vl-card--pain-3:hover .vl-pain-icon-img {\n  animation-play-state: running;\n}\n@keyframes vl-pain-spin {\n  to { transform: rotate(360deg); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMPARATIVA \"Un cambio que notar\u00e1s\"\n   Estilo monocrom\u00e1tico, alineado con el lenguaje de Voicit\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-compare-grid {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 28px;\n  align-items: stretch;\n  max-width: 980px;\n  margin: 0 auto;\n}\n\n.vl-compare-card {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px 36px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.vl-compare-card--before {\n  border: 1px solid #E5E5E5;\n  background: #FAFAFA;\n}\n.vl-compare-card--after {\n  border: 1.5px solid #161616;\n  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.08);\n}\n\n\/* Etiqueta \"ANTES\" \/ \"AHORA\" en may\u00fasculas *\/\n.vl-compare-label {\n  display: inline-block;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: #9A9A9A;\n  margin-bottom: 14px;\n}\n.vl-compare-card--after .vl-compare-label {\n  color: #161616;\n}\n\n\/* T\u00edtulo descriptivo *\/\n.vl-compare-title {\n  font-size: 18px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.35;\n  margin: 0 0 22px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #ECECEC;\n}\n.vl-compare-card--after .vl-compare-title {\n  border-bottom-color: #E0E0E0;\n}\n\n\/* Lista de items *\/\n.vl-compare-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.vl-compare-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  font-size: 16px;\n  line-height: 1.55;\n}\n.vl-compare-card--before .vl-compare-list li {\n  color: #6E6E6E;\n}\n.vl-compare-card--after .vl-compare-list li {\n  color: #161616;\n  font-weight: 500;\n}\n\n\/* Guion (em-dash) en la card \"Antes\" \u2014 gris claro *\/\n.vl-compare-dash {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 2px;\n}\n.vl-compare-dash::before {\n  content: '';\n  display: block;\n  width: 12px;\n  height: 2px;\n  background: #C5C5C5;\n  border-radius: 1px;\n}\n\n\/* Check en la card \"Ahora\" \u2014 c\u00edrculo negro con \u2713 amarillo de marca\n   Mismo lenguaje que el check del mockup del Hero *\/\n.vl-compare-check {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 800;\n  line-height: 1;\n  margin-top: 2px;\n}\n\n\/* Flecha de transformaci\u00f3n entre las dos cards *\/\n.vl-compare-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n\/* Responsive: en pantallas peque\u00f1as, apilamos vertical y rotamos la flecha *\/\n@media (max-width: 900px) {\n  .vl-compare-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n    max-width: 540px;\n  }\n  .vl-compare-arrow svg {\n    transform: rotate(90deg);\n  }\n}\n\n.vl-mb-8 { margin-bottom: 8px; }\n.vl-mb-12 { margin-bottom: 12px; }\n.vl-mb-16 { margin-bottom: 16px; }\n.vl-mb-24 { margin-bottom: 24px; }\n.vl-mb-32 { margin-bottom: 32px; }\n.vl-mb-48 { margin-bottom: 48px; }\n.vl-mb-64 { margin-bottom: 64px; }\n.vl-mt-32 { margin-top: 32px; }\n.vl-mt-48 { margin-top: 48px; }\n.vl-mt-64 { margin-top: 64px; }\n.vl-gap-16 { gap: 16px; }\n.vl-gap-24 { gap: 24px; }\n.vl-flex { display: flex; }\n.vl-flex-col { flex-direction: column; }\n.vl-items-center { align-items: center; }\n.vl-justify-center { justify-content: center; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUDITOR\u00cdA RESPONSIVE \u2014 tablet vertical y m\u00f3vil\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* \u2500\u2500 TABLET VERTICAL Y M\u00d3VIL (\u2264900px) \u2500\u2500 *\/\n@media (max-width: 900px) {\n  \/* Hero: reducir padding *\/\n  .vl-landing section[style*=\"padding-top:60px\"] {\n    padding-top: 48px !important;\n    padding-bottom: 56px !important;\n  }\n\n  \/* HERO: REORDENAR a vertical (H1 \u2192 p\u00e1rrafo \u2192 mockup \u2192 CTAs \u2192 badge) *\/\n  .vl-hero-flex {\n    flex-direction: column !important;\n    align-items: center !important;\n    text-align: center !important;\n    gap: 28px !important;\n  }\n  \/* Las \"columnas\" inline-styled del hero se aplanan en m\u00f3vil con display:contents,\n     as\u00ed sus hijos pasan a ser flex-items directos de vl-hero-flex y podemos\n     reordenarlos con `order`. *\/\n  .vl-hero-flex > div[style*=\"flex:1.8\"],\n  .vl-hero-flex > div[style*=\"flex:1;min-width:0\"] {\n    display: contents;\n  }\n  \/* Orden visual en m\u00f3vil *\/\n  .vl-hero-flex h1 { order: 1; margin: 0; }\n  .vl-hero-flex p[style*=\"font-size:20px\"] { order: 2; margin: 0; max-width: 560px; }\n  .vl-hero-mockup { order: 3; margin: 0 auto; max-width: 460px; width: 100%; }\n  .vl-hero-flex .vl-hero-actions { order: 4; margin: 0; justify-content: center; }\n  \/* El contenedor del badge Google (el div con margin-top:32px que envuelve el badge) *\/\n  .vl-hero-flex > div > div[style*=\"margin-top:32px\"] {\n    order: 5;\n    margin-top: 0 !important;\n    justify-content: center !important;\n    width: 100%;\n  }\n\n  \/* Carrusel de logos: tama\u00f1os algo menores *\/\n  .vl-logos-track img {\n    height: 28px;\n    max-width: 130px;\n    margin-right: 56px;\n  }\n  .vl-logos-track img[alt=\"ieTeam\"] {\n    height: 50px;\n    max-width: 170px;\n  }\n\n  \/* STEP ROWS \u2014 centrados verticalmente, orden: t\u00edtulo+n\u00ba \u2192 p\u00e1rrafo \u2192 mockup *\/\n  .vl-step-row {\n    flex-direction: column !important;\n    text-align: center !important;\n    align-items: center !important;\n    gap: 28px !important;\n  }\n  .vl-step-row[style*=\"row-reverse\"] { flex-direction: column !important; }\n  .vl-step-row > div { flex: 1 1 100% !important; width: 100%; }\n  \/* La cabecera del paso: n\u00famero ARRIBA, t\u00edtulo DEBAJO (apilados, no en l\u00ednea) *\/\n  .vl-step-row > div > div[style*=\"align-items:center\"][style*=\"gap:16px\"] {\n    flex-direction: column !important;\n    justify-content: center !important;\n    align-items: center !important;\n    gap: 14px !important;\n  }\n  \/* El mockup del paso va al final, debajo del p\u00e1rrafo *\/\n  .vl-step-row > div:has(.vl-mk-filepicker),\n  .vl-step-row > div:has(.vl-mk-chat),\n  .vl-step-row > div:has(.vl-mk-editor) {\n    order: 2;\n  }\n\n  \/* Casos de uso: tablet \u2192 grid de 2 columnas (no 1) para aprovechar mejor el ancho *\/\n  .vl-grid-3 {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n  \/* EXCEPCI\u00d3N: el grid de pain points (3 tarjetas) NO debe ir a 2 columnas en\n     tablet \u2014 quedar\u00eda 2+1 con un hueco hu\u00e9rfano. Lo mantenemos en 3 columnas\n     horizontales (como en desktop), que caben bien en iPad vertical. *\/\n  .vl-grid-3:has(.vl-card--pain) {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n\n  \/* Comparativa Antes\/Ahora: ya pasa a 1 columna, flecha rotada *\/\n  .vl-compare-card { padding: 28px 28px 32px; }\n\n  \/* IMPORTANTE: Mantenemos el STICKY-STACK de testimonios activo en m\u00f3vil\/tablet\n     porque queremos que la animaci\u00f3n funcione en vertical tambi\u00e9n *\/\n  \/* (no se desactiva como antes) *\/\n  .vl-tstack-cards { max-width: 540px; }\n}\n\n\/* \u2500\u2500 M\u00d3VIL (\u2264600px) \u2500\u2500 *\/\n@media (max-width: 600px) {\n  \/* Hero: padding a\u00fan menor *\/\n  .vl-landing section[style*=\"padding-top:60px\"] {\n    padding-top: 36px !important;\n    padding-bottom: 48px !important;\n  }\n\n  \/* H1: m\u00e1s grande de lo que estaba (32 \u2192 36) *\/\n  .vl-landing h1 {\n    font-size: 36px;\n  }\n  .vl-landing h1 br { display: none; }\n\n  \/* P\u00e1rrafo del hero: m\u00e1s peque\u00f1o para crear contraste con H1 *\/\n  .vl-hero-flex p[style*=\"font-size:20px\"] {\n    font-size: 16px !important;\n    line-height: 1.55 !important;\n  }\n\n  \/* Botones: NO full-width \u2014 que tengan su tama\u00f1o natural y queden centrados *\/\n  .vl-btn {\n    width: auto !important;\n    padding: 14px 28px !important;\n  }\n  .vl-hero-actions {\n    flex-direction: row !important;\n    width: auto !important;\n    flex-wrap: wrap;\n    gap: 12px !important;\n    justify-content: center !important;\n  }\n\n  \/* Badge Google: centrado y con padding reducido *\/\n  .vl-google-badge {\n    padding: 11px 18px;\n    font-size: 13.5px;\n  }\n\n  \/* Casos de uso: en m\u00f3vil s\u00ed 1 columna *\/\n  .vl-grid-3 {\n    grid-template-columns: 1fr !important;\n  }\n  \/* Pain points: en m\u00f3vil tambi\u00e9n 1 columna (el :has tiene m\u00e1s especificidad\n     que .vl-grid-3, as\u00ed que hay que sobreescribirlo expl\u00edcitamente aqu\u00ed). *\/\n  .vl-grid-3:has(.vl-card--pain) {\n    grid-template-columns: 1fr !important;\n  }\n\n  \/* Pain points \/ Ventajas grid de 2 \u2192 1 columna ya viene desde 900px *\/\n  .vl-grid-2 {\n    grid-template-columns: 1fr !important;\n  }\n\n  \/* Container: padding lateral m\u00e1s generoso *\/\n  .vl-container, .vl-container--narrow {\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n  \/* Hero mockup: 100% del ancho disponible *\/\n  .vl-hero-mockup { max-width: 100%; }\n  .vl-mk-machine { min-width: 200px; padding: 12px 16px; }\n  .vl-mk-template-title { font-size: 12px; }\n\n  \/* Carrusel logos: tama\u00f1os m\u00f3vil *\/\n  .vl-logos-track img {\n    height: 24px;\n    max-width: 110px;\n    margin-right: 40px;\n  }\n  .vl-logos-track img[alt=\"ieTeam\"] {\n    height: 42px;\n    max-width: 140px;\n  }\n\n  \/* File picker (Paso 1): grid 1 col en m\u00f3vil para que los nombres se lean *\/\n  .vl-mk-fp-grid {\n    grid-template-columns: 1fr;\n    padding: 14px;\n  }\n  .vl-mk-fp-file { padding: 10px; }\n  .vl-mk-fp-name { font-size: 11.5px; }\n\n  \/* Chat mockup (Paso 2): burbujas m\u00e1s anchas, menos padding *\/\n  .vl-mk-chat-bubble {\n    padding: 12px 14px;\n    font-size: 13px;\n    max-width: 92%;\n  }\n  .vl-mk-chat-sections li { font-size: 12.5px; }\n\n  \/* Editor (Paso 3): controles apilan verticalmente *\/\n  .vl-mk-editor { max-width: 100%; }\n  .vl-mk-editor-section-head { padding: 10px 12px; }\n  .vl-mk-editor-name { font-size: 12.5px; }\n  .vl-mk-editor-controls {\n    flex-direction: column;\n    gap: 14px;\n  }\n  .vl-mk-editor-action { width: auto; }\n  .vl-mk-editor-toast { font-size: 12px; padding: 9px 14px; }\n\n  \/* Comparativa: padding compacto *\/\n  .vl-compare-card { padding: 24px 22px 28px; }\n  .vl-compare-title { font-size: 16px; padding-bottom: 16px; margin-bottom: 18px; }\n  .vl-compare-list li { font-size: 14.5px; }\n\n  \/* Testimonios: padding compacto en m\u00f3vil\n     (el sticky-stack sigue activo, ver el bloque de 900px) *\/\n  .vl-testimonial--compact { padding: 24px 22px 22px; }\n  .vl-testimonial-text { font-size: 15px; line-height: 1.6; padding-top: 22px; }\n  .vl-tstack-track { height: 280vh; }    \/* algo menos que 300vh en m\u00f3vil para que sea m\u00e1s r\u00e1pido *\/\n  .vl-tstack-cards { min-height: 320px; }\n\n  \/* CTA final: padding y h2 *\/\n  .vl-landing section[style*=\"background:#161616\"] { padding: 56px 0 !important; }\n\n  \/* Iconos pain points: tama\u00f1o cuadrado m\u00e1s peque\u00f1o *\/\n  .vl-icon { width: 50px; height: 50px; }\n  .vl-icon svg { width: 28px; height: 28px; }\n  .vl-icon img { width: 28px; height: 28px; }\n\n  \/* Avatares de testimonios un pel\u00edn menores *\/\n  .vl-testimonial-avatar { width: 48px; height: 48px; }\n\n  \/* CTA final (p\u00edldora): en m\u00f3vil el H2 (\"Tu primera plantilla, lista en 2 minutos\")\n     y el subt\u00edtulo (\"Empieza gratis\u2026 Sin tarjeta de cr\u00e9dito.\") quedaban con palabras\n     hu\u00e9rfanas en la \u00faltima l\u00ednea (ej.: \"minutos\" o \"cr\u00e9dito\" solas). Reducimos\n     tama\u00f1o y aplicamos text-wrap:balance para conseguir 2 l\u00edneas equilibradas\n     en el H2 y 1 l\u00ednea (o 2 balanceadas en pantallas estrechas) en el subt\u00edtulo.\n     DESKTOP NO CAMBIA. *\/\n  .vl-cta-pill h2 {\n    font-size: 22px !important;\n    line-height: 1.25 !important;\n    text-wrap: pretty;\n    text-wrap: balance;\n  }\n  .vl-cta-pill p {\n    font-size: 15px !important;\n    line-height: 1.45 !important;\n    text-wrap: pretty;\n    text-wrap: balance;\n  }\n}\n\n\/* \u2500\u2500 M\u00d3VIL ESTRECHO (\u2264375px) \u2500\u2500 *\/\n@media (max-width: 375px) {\n  .vl-landing h1 { font-size: 32px; }\n  .vl-landing h2 { font-size: 24px; }\n  .vl-landing h3 { font-size: 19px; }\n  .vl-mk-fp-name { font-size: 10.5px; }\n  .vl-mk-chat-bubble { font-size: 12.5px; padding: 10px 12px; }\n  .vl-btn { padding: 13px 22px !important; font-size: 14px !important; }\n\n  \/* CTA final en m\u00f3vil estrecho: a\u00fan m\u00e1s compacto *\/\n  .vl-cta-pill h2 { font-size: 20px !important; }\n  .vl-cta-pill p  { font-size: 14px !important; }\n}\n<\/style>\n\n<div class=\"vl-landing\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       HERO SECTION\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\" style=\"padding-top:60px;padding-bottom:80px;background:#F8F8F8;\">\n    <div class=\"vl-container\">\n\n      <div style=\"display:flex;align-items:center;gap:40px;\" class=\"vl-hero-flex\">\n        <!-- Columna izquierda: texto -->\n        <div style=\"flex:1.8;min-width:0;\">\n\n          <h1 class=\"vl-mb-24\">\n            Tu plantilla de informe, lista en segundos.<br>\n            <span style=\"color:#6E6E6E;\">Sube un PDF de referencia y la IA har\u00e1 el resto.<\/span>\n          <\/h1>\n\n          <p style=\"font-size:20px;color:#424242;max-width:620px;\" class=\"vl-mb-32\">\n            Deja de configurar secciones manualmente. Sube un informe de ejemplo y la IA crea autom\u00e1ticamente la plantilla con todas las instrucciones que replicar\u00e1n tu estilo de redacci\u00f3n.\n          <\/p>\n\n          <div style=\"display:flex;gap:16px;flex-wrap:wrap;\" class=\"vl-hero-actions\">\n            <a href=\"https:\/\/app.voicit.com\/signup\" class=\"vl-btn vl-btn--primary\">\n              Crear plantilla\n            <\/a>\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" class=\"vl-btn vl-btn--secondary\" rel=\"nofollow noopener\" target=\"_blank\">\n              Solicitar demo\n            <\/a>\n          <\/div>\n\n          <div style=\"display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;\">\n            <a href=\"https:\/\/chromewebstore.google.com\/detail\/voicit-resumen-reuni%C3%B3n-ia\/lekjojhflheocafafpmiiemdiechdnkm\" target=\"_blank\" rel=\"noopener nofollow\" class=\"vl-google-badge\" style=\"text-decoration:none !important;color:#FFFFFF !important;\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"\/><path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"\/><path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\"\/><path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"\/><\/svg>\n              4.8 de 5 <span class=\"vl-stars\">\u2605\u2605\u2605\u2605\u2605<\/span> +350 rese\u00f1as\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Columna derecha: mockup del flujo PDF \u2192 IA \u2192 Plantilla -->\n        <div style=\"flex:1;min-width:0;\">\n          <div class=\"vl-hero-mockup\">\n\n            <!-- FASE 1: Dropzone con borde discontinuo. El PDF entra desde fuera. -->\n            <div class=\"vl-mk-dropzone\">\n              <!-- Mensaje inicial (visible hasta que llega el PDF) -->\n              <div class=\"vl-mk-dropzone-hint\">\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M12 3v13m0-13l-5 5m5-5l5 5M4 21h16\" stroke=\"#9A9A9A\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n                <span>Arrastra tu informe aqu\u00ed<\/span>\n              <\/div>\n              <!-- PDF + cursor (entra desde fuera y aterriza dentro del dropzone) -->\n              <div class=\"vl-mk-pdf-wrapper\">\n                <div class=\"vl-mk-pdf\">\n                  <div class=\"vl-mk-pdf-icon\">\n                    <svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" fill=\"none\">\n                      <path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/>\n                      <path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/>\n                      <text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text>\n                    <\/svg>\n                  <\/div>\n                  <div class=\"vl-mk-pdf-meta\">\n                    <div class=\"vl-mk-pdf-name\">informe_candidato.pdf<\/div>\n                    <div class=\"vl-mk-pdf-size\">128 KB<\/div>\n                  <\/div>\n                <\/div>\n                <svg class=\"vl-mk-cursor\" width=\"22\" height=\"26\" viewBox=\"0 0 22 26\" fill=\"none\">\n                  <path d=\"M2 2L20 14L11.5 15L8 23L2 2Z\" fill=\"#161616\" stroke=\"#FFFFFF\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/div>\n            <\/div>\n\n            <!-- Conector entre PDF y m\u00e1quina -->\n            <div class=\"vl-mk-arrow vl-mk-arrow--1\">\n              <svg width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\">\n                <path d=\"M8 0v26m-5-6l5 6 5-6\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n              <\/svg>\n            <\/div>\n\n            <!-- \"M\u00e1quina\" Voicit procesando -->\n            <div class=\"vl-mk-machine\">\n              <div class=\"vl-mk-machine-pulse\"><\/div>\n              <div class=\"vl-mk-machine-content\">\n                <div class=\"vl-mk-machine-logo\">\n                  <svg class=\"vl-mk-gear\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"#E7FE15\"><path d=\"M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9.4 5.5l-2-1.2c.1-.4.1-.9.1-1.3s0-.9-.1-1.3l2-1.2c.2-.1.3-.4.2-.6L19.6 5c-.1-.2-.3-.3-.5-.2l-2.4.8c-.6-.5-1.4-.9-2.2-1.2L14.1 2c0-.2-.2-.4-.5-.4h-3.2c-.2 0-.4.2-.5.4l-.4 2.4c-.8.3-1.5.7-2.2 1.2l-2.4-.8c-.2-.1-.5 0-.6.2L2.4 7.9c-.1.2 0 .5.2.6l2 1.2c-.1.4-.1.9-.1 1.3s0 .9.1 1.3l-2 1.2c-.2.1-.3.4-.2.6L4.4 19c.1.2.3.3.5.2l2.4-.8c.6.5 1.4.9 2.2 1.2l.4 2.4c0 .2.2.4.5.4h3.2c.2 0 .4-.2.5-.4l.4-2.4c.8-.3 1.5-.7 2.2-1.2l2.4.8c.2.1.5 0 .6-.2l1.8-2.8c.1-.2 0-.5-.2-.6z\"\/><\/svg>\n                  <span>Agente IA de plantillas<\/span>\n                <\/div>\n                <div class=\"vl-mk-machine-status\">\n                  <span class=\"vl-mk-dot\"><\/span>\n                  <span class=\"vl-mk-shimmer\">Analizando estructura\u2026<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Conector entre m\u00e1quina y plantilla -->\n            <div class=\"vl-mk-arrow vl-mk-arrow--2\">\n              <svg width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\">\n                <path d=\"M8 0v26m-5-6l5 6 5-6\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n              <\/svg>\n            <\/div>\n\n            <!-- FASE 2: Plantilla generada -->\n            <div class=\"vl-mk-template\">\n              <div class=\"vl-mk-template-head\">\n                <div class=\"vl-mk-template-title\">Plantilla \u2014 Entrevista de selecci\u00f3n<\/div>\n                <span class=\"vl-mk-badge-ok\">\u2713 Generada<\/span>\n              <\/div>\n              <ul class=\"vl-mk-section-list\">\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Datos del candidato<\/span><\/li>\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Trayectoria profesional<\/span><\/li>\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Competencias evaluadas<\/span><\/li>\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Motivaci\u00f3n por el cambio<\/span><\/li>\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Conclusiones<\/span><\/li>\n              <\/ul>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       LOGOS DE CONFIANZA\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section style=\"padding:32px 0;border-top:1px solid #F2F2F2;border-bottom:1px solid #F2F2F2;overflow:hidden;\">\n    <div class=\"vl-container vl-text-center\">\n      <p class=\"text-small text-secondary vl-mb-16\" style=\"font-size:14px;color:#9A9A9A;\">Elegida por +1.000 empresas para documentar sus entrevistas<\/p>\n      <div style=\"overflow:hidden;\">\n        <div class=\"vl-logos-track\">\n          <!-- 6 logos de clientes reales (cabecera de voicit.com) -->\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n          <!-- Duplicados para loop continuo -->\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PROBLEMA \/ PAIN POINTS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-64 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Configurar la plantilla de tu informe IA<br>no deber\u00eda ser tan complicado<\/h2>\n        <!-- P\u00e1rrafo eliminado (backup): \"Hasta ahora, adaptar un sistema de IA a tu forma de trabajar significaba horas de configuraci\u00f3n manual. Eso se acab\u00f3.\" -->\n      <\/div>\n\n      <div class=\"vl-grid-3\">\n        <!-- Pain 1 -->\n        <div class=\"vl-card vl-card--pain vl-card--pain-1 vl-reveal vl-reveal-delay-1\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><svg class=\"vl-pain-icon-svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"4\" y=\"2\" width=\"24\" height=\"4\" rx=\"1\" fill=\"#1A171B\"\/><rect x=\"4\" y=\"26\" width=\"24\" height=\"4\" rx=\"1\" fill=\"#1A171B\"\/><path d=\"M8 6h16v4l-5.5 6L24 22v4H8v-4l5.5-6L8 10V6z\" fill=\"#1A171B\"\/><rect x=\"11\" y=\"22\" width=\"10\" height=\"3\" rx=\"0.5\" fill=\"#F2F2F2\"\/><\/svg><\/div>\n          <h3 class=\"vl-mb-8\">Horas configurando secciones<\/h3>\n          <p class=\"text-small\">Definir cada secci\u00f3n e instrucci\u00f3n a mano puede ser un dolor de cabeza.<\/p>\n        <\/div>\n\n        <!-- Pain 2 -->\n        <div class=\"vl-card vl-card--pain vl-card--pain-2 vl-reveal vl-reveal-delay-2\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><svg class=\"vl-pain-icon-svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.5 3.5L16 12l8.5-8.5L28.5 7.5 20 16l8.5 8.5-4 4L16 20l-8.5 8.5-4-4L12 16 3.5 7.5l4-4z\" fill=\"#1A171B\"\/><\/svg><\/div>\n          <h3 class=\"vl-mb-8\">Instrucciones que no capturan tu estilo<\/h3>\n          <p class=\"text-small\">La IA no siempre interpreta bien el resultado que quieres obtener.<\/p>\n        <\/div>\n\n        <!-- Pain 3 -->\n        <div class=\"vl-card vl-card--pain vl-card--pain-3 vl-reveal vl-reveal-delay-3\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><img decoding=\"async\" class=\"vl-pain-icon-img\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcgAAAHHCAMAAAAMKTgNAAAAM1BMVEVHcEwaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxsaFxvHNkjaAAAAEHRSTlMA8DBg0MBAgKAQIOBwkFCw8zDaSgAAAAlwSFlzAAAhNwAAITcBM1ifegAAD0dJREFUeJztnQd24zAMRG3LRe65\/2n3pWziItkSiQEGfPMvkDF+KFGsi9RsPwzZ5a5FaiSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESSyESTSiX69h\/6hTCI7cC2Q9B8f2PSJRHboWgDpP8sDTZ9HZAevBY7+uz7I9GlEdvhawOj\/FwiYPovIzqEWKPq\/CuHSJxHZ\/f2RdCb72xLB0ucQ2d3+lWQm+\/saodKnENnd\/5lUJvvHIoHSZxDZPf6dRCafPKLSJxD55DGRyQGPoPT8Igc8pjE56BGTnl7koMckJkc8QtKzixzxmMLkqEdEenKRox4TmHzhEZCeW+QLj\/QmX3q0T08t8qVHcpNvPJqnZxb5xiO1ybcerdMTi3zrkdjkBI\/G6XlFTvBIa3KSR9v0tCIneSQ1OdGjaXpWkRM9Upqc7NEyPanIyR4JTc7waJieU+QMj3QmZ3m0S08pcpZHMpMzPZqlZxQ50yOVydkerdITipztkchkgUej9HwiCzzSmCzyaJOeTmSRRxKThR5N0rOJLPRIYbLYo0V6MpHFHglMVng0SM8lssJjuMkqj\/XpqURWeQw2WemxOj2TyEqPoSarPdamJxJZ7THQpIHHyvQ8Ig08hpk08ViXnkakiccgk0Yeq9KziDTyGGLSzGNNehKRZh4DTBp6rEjPIdLQo7tJU4\/l6SlEmnp0NmnssTg9g0hjj64mzT2WpicQae7R0STAY0n61W5jG+F4vswOAfDoZhLicW76S7+EpLieDnNiQDw6mQR5nJF+311RGb5yTHcJ8uhiEuZxanqsxZ8k01zCPDqYBHqckn4LeqI+s+nehgF6hJuEenyXfn86Yv\/8Pct+9bIWUI9gk2CPL9Nv4X98IM6LZgn2CDXpUMqx9J1rY\/xjeR55W8I9Ak26NImh9Pud15txiH4b4xFm0unR9pT+4NbBGWPzpNLFI8ik2yvqPv0h4NX4zINKJ48Qk471vEnPofHjQaWbR4RJz4r+T7+n0fhxq9LR48fy9SdQCpOxXZwhNocGPLqb7Ng0ftLv83t0Nrl2\/GMzWHoWAeTR16TAeZRJV4AeZdIRqEeZdAPsUSadgHuUSRccPMqkAy4eZRKOk0eZBOPmUSahOHqUSSCuHmUShrNHmQTh7lEmIQR4lEkAIR5l0pwgjzJpTJhHmTQl0KNMGhLqUSbNCPYok0aEe5RJEwg8yqQBFB5lshoSjzJZCY1HmayCyKNMVkDlUSaLIfMok4XQeZTJIgg9ymQBlB5lcjakHmVyJrQeZXIWxB5lcgbUHmVyMuQeZXIi9B5lchIJPMrkBFJ4lMm3JPEok29I41EmX5LIo0y+IJVHmRwlmUeZHCGdR5kcJKFHmRwgpUeZfCKpR5l8IK1HmbwjsUeZvCG1R5n8JblHmfwhvUeZ\/KIBjxL5ydLrRnocW4IyEnBOL3ITWsTj5o9Ym7NuxSfkElO25eZ82j69lw7bbncNuhq2Ty4yoGzr8+X1v\/92dw24d2voXtg8eN4I9smxv0zrVqx23pdvbVKLdG2Qx\/OsTv6h831tZm6Sjg1yOXin9RsOJ8f\/tMxN0q1Mx670Q2179cqYuEl6NcjNpSal2z3OeZukT4N8vlx+LoedS9C0TdKlQdZrXLi1yqxN0qFBHjursAePLmzO4R2HUdad5Vj0Bf+Pl3N4B\/4vvjaeG9qf0Yk\/Mk6CHNBF2dln3qIbJSAzHHD3wbo5frMHp16SSZrAHjsu3aMeUh02t1nnzA3stwewHivoaHq+LxBkObArYPbQXlq2L5AVsBZrdDGQL8psaz6AtVjj+\/AnXPpk3R1gVwfWzbkF+IavGuB3B1cIp8ER3A+4Mnl6C2ySz22QC2cyU3dnjyqC42AlzOTJ7zdUg+osuD6WUCbXnj+iEtBHpEN\/9RbUv2OeZytovPzoPXcA+obK82zFPJQCdjRhxnjyPFsxfdaAD7A9Zlory7MV02cNmcpbQQY2sjxbIU\/WoGkDyG\/JMiaA6COE7RSFvCaSrPhAPI7CRighr8kc462IGazAhxFiMWCO1XSA7+jQLfiAtXXHwJ8zHcDHV+ijCDEl122tWThte6gieKGL927dIlKIjP6ADj5HYhIZRIYvc8lwxEwCkQSHDSU49CmBSIJl9vDtD\/Xwi6Q4\/Yu\/SfKLpNj3wt8k6UWSHMdH3yTpRZKszEaunDeBXiTLJCz7tyS7SJqpO\/bhHXaRPBM+AecQzoFcJNE0Af6AgSrIRRJtQiPv7pCLZDrT3ftc0Hlwi6SagAVumjSAWyTV9l7uZyu3SK7bMoJOQ58GtUiybdrU\/VZqkWSLzYJuTJgGtUiy04Vg23ctoBbJdqEU8wcIs0i6k0yYX5LMIumO+2J+STKLpDsTk3mdALNIvq0uBEUZg1kk36H8xLPLzCIJzD1AvHKHWCThliXm\/3rebIRn1BJ3W4lFEu60J94EQiyS8ER+4u8PiZwFQVlGIBbJeBoNQVlGIBbJeLcb79yyRM6Cd0RAIiUSjUTOQSJnIZEFSOQcJHIWElmARM6BWCTjDX0EZRlBQ3SzICjLCBIpkWgIL+jTNFYJhBPLElkC4fUYxFsktfhqDlqzUwTfPSdaDlkE34gA8VZXbRmYA0FRxmAWSXepAvNJyswi6bqtzOd6UG90Zbt5CHZztAHUItm2YzEfR0ctkmyQjvqgHWqRZC9J6qOvuA9M4npJMr8iyUVSzS1Tn85CLpJqQxb1eUnsx3wyPVu5LxogF0n0bEXcPmgIuUiiZyv56fTsh9PzTGWR3xfBLpJmBoT9UiV2kTRHe5BfMsB\/Ew9Jd4e8q5NAJMlaOvp7lvmvHeRY8EF9nvlHCpEUTZL\/4vMEV\/MyNEn6BplBJEGT5G+QKa6vD2+Se\/4GmUJk+LdkghqlEBl9BtaB\/Rvyk0W3scb+ZwdfmA1YGdDvrAH8bsBgVugkCGJZcuTvmQxiJj1wYSSip0O49XMAxNqWwIcrYrSc8eDLARAzd2EPV8hKHba7okaArP8MmgWBzHoQHrs\/CGRF9jLmvxiyLoDwmIthIAMh64jXJGY6me+KoREwPz\/gNYkZY6W7hW8U0IZQ9yfSCjOkQ7eBdxzQmJZzhwc1NJfmyYpblO1qcg+6wDXPkxW3k9Cz64rymOnJiptR9zMJ80h5Du0osFWgXiZxHrOMBnyDW5ftYxLnkfL00hfgCrF06PEAPRIezPYS5HIluMkVcI1OjhmsP6BL7MEjA1tkdsaT2l8C3d97RY67Qtc+ZvqI\/AZ7KM0a1uXZY3eYp5n4+APYX\/j8zwZNsq+wsbN1dRYOq7Mhj9cTeOVjtq7OF+jVoEvzwecDfHt5qlGd\/+CXPhs3SnRzzDaq8x+Hk6Is35Rb8NvxI+O3xzceJwwdjR5WB4+w+b49vvE5CGNjoBL8zfGfZMOsfzgd+lWr8tD77NIJ3sJSgdvZNOuKl8\/K7Yy5tA3S8xy+467sU7vzO9Aqb4N0Pi5q082t1NbpmfpN4gbpfjTmtZveLi+974byzA0y4gS39fnyvmKrk\/+x1qkbZNBptev+tB2zuerOIec8HlM3yMgz3Jab627Xbf\/Y7fpN3PEcSQd1\/shw2IQDOUdZb8lwRo0DKac97qG+9sSL\/A0StaMpG6n2CQwhjz8kNymPv6Q2KY83JDYpj3ekNSmPDyQ1KY9PpDQpjwMkNCmPg6QzKY8jJDMpj6OkMimPL0hkUh5fksakPL4hiUl5fEsKk\/I4gQQm5XES9CblcSLkJuVxMtQm5XEGxCblcRa0JuVxJqQm5XE2lCblsQBCk\/JYBJ1JeSyEzKQ8FkNlUh4rIDIpj1XQmJTHSkhMymM1FCbl0QACk\/JoQrhJeTQi2KQ8mhFqUh4NCTQpj6aEmZRHY4JMyqM5ISblEUCASXmE4G5SHkE4m5RHGK4m5RGIo0l5hOJmUh7BOJmURzguJuXRAQeT8ugC3KQ8OgE2KY9uQE3KoyNAk\/LoCsykPDoDMunqsb9w3heyOzhcxfwLxKSvx887fPgeAP1hsdgnN+nucbHYk13H9HMFcHKTnle8\/aZ3uYt8In83ObuaNL8czTH97X8hi8q7C7mDapHN5EN2BpWP96pH1SKVyefsh+Buz8D1+GG1yGNyMPv+FPcx0g9e2xxXiyQmR7M73jN\/w3E3dqNuZC0SmHyV\/XD2fsJeL6y1qAac\/l12z2Z53L25Cj+4FpVA00\/IfvB5Wy77CXfpRteC1uTE7Ksz2OWyf\/VIpapFDbD0M7KvdrASTrYINemy+gqUfmb2w+lqn2G9W2WsRSmQ9CXZt6aj6sdu7FPjBTS1KAKQvjC7ZYRN8lpQpC\/NbpmhTCRPLRjSF2e3DFEokqYWBOnLsxuGKBbJUov49BXZzTLUiCSpRXj6muxGEb4oF8lRi+j0VdlNEvxQIZKiFsHp67IbBPilRiRDLWLTV2Y3qN4vVSIJahGavjZ7dfFuqBMZX4vI9NXZK2t3R6XI8FoEpq\/PXlW6B2pFRtciLr1B9orKPVEtMrgWYektshcXboB6kbG1qKYwvUn2wroNYiAytBb1FKW3yV5UthEsREbWwoCC9EbZC50NYiIysBYWzE5vlb3Y2gA2IuNqYcLM9GbZK7w9YSQyrBY2zEpvl73K3ANWIqNqYcSM9IbZK93dYSYyqBZWTE5vmb3a3g12ImNqYcbE9KbZDfz9YigypBZ2TEpvm93E4A+WIiNqYciE9MbZjRx+YSoyoBaWvE1vnd3MorlI\/1qY8ia9eXZike61sOVlevvszCK9a2HMi\/SA7NQinWthzWh6RHZukb61MGckPSQ7uUjXWtgzmB6TnV2kZy0ADKQHZacX6VgLBE\/pUdn5RfrVAsJDelj2BCLdaoHhLj0uewaRXrUAcZMemD2FSKdaoPhNj8yeQ6RPLWD8pIdmTyLSpRY4vtJjs2cR6VELIPs1OnsakQ61QLI\/gf9AHpH4WqQmkUjxColsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlsBIlshJ0hXd6SLBaLf8KmBq6lNLddAAAAAElFTkSuQmCC\" alt=\"Engranaje de configuraci\u00f3n\"><\/div>\n          <h3 class=\"vl-mb-8\">Empezar de cero con cada caso de uso<\/h3>\n          <p class=\"text-small\">Cada nuevo formato significa repetir todo el proceso.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SOLUCI\u00d3N \u2014 C\u00f3mo funciona (3 pasos)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt\" style=\"padding-bottom:140px;\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-64 vl-reveal\">\n        <span class=\"vl-badge vl-badge--green vl-mb-16\">La soluci\u00f3n<\/span>\n        <h2 class=\"vl-mb-16\" style=\"max-width:720px;margin:0 auto;\">De tu PDF de referencia a una plantilla perfecta en 3 pasos<\/h2>\n      <\/div>\n\n      <!-- Paso 1 -->\n      <div style=\"display:flex;align-items:center;gap:48px;margin-bottom:80px;\" class=\"vl-step-row vl-reveal\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">1<\/div>\n            <h3>Sube tu informe de referencia<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Sube un PDF de un informe que ya hayas redactado: de un candidato, de una reuni\u00f3n con cliente, de un seguimiento comercial&#8230; cualquier tipo.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">La IA acepta informes de cualquier extensi\u00f3n y complejidad. Cuanto m\u00e1s completo sea el ejemplo, mejor ser\u00e1 la plantilla generada.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 1: File picker estilo Voicit -->\n          <div class=\"vl-mk-filepicker vl-reveal\">\n            <div class=\"vl-mk-fp-header\">\n              <span class=\"vl-mk-fp-dots\"><span><\/span><span><\/span><span><\/span><\/span>\n              <span class=\"vl-mk-fp-title\">Sube tu informe<\/span>\n            <\/div>\n            <div class=\"vl-mk-fp-grid\">\n              <div class=\"vl-mk-fp-file\" data-idx=\"1\">\n                <svg width=\"22\" height=\"26\" viewBox=\"0 0 28 32\" fill=\"none\"><path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/><path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/><text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text><\/svg>\n                <span class=\"vl-mk-fp-name\">seguimiento_comercial.pdf<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"2\">\n                <svg width=\"22\" height=\"26\" viewBox=\"0 0 28 32\" fill=\"none\"><path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/><path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/><text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text><\/svg>\n                <span class=\"vl-mk-fp-name\">acta_reunion_cliente.pdf<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"3\">\n                <svg width=\"22\" height=\"26\" viewBox=\"0 0 28 32\" fill=\"none\"><path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/><path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/><text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text><\/svg>\n                <span class=\"vl-mk-fp-name\">informe_candidato.pdf<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"4\">\n                <svg width=\"22\" height=\"26\" viewBox=\"0 0 28 32\" fill=\"none\"><path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/><path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/><text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text><\/svg>\n                <span class=\"vl-mk-fp-name\">kickoff_proyecto.pdf<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"vl-mk-fp-actions\">\n              <button class=\"vl-mk-fp-btn\" type=\"button\" data-vl-upload>Subir informe<\/button>\n            <\/div>\n            <!-- Toast estilo Paso 3, aparece desde arriba al subir -->\n            <div class=\"vl-mk-fp-toast\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <span>Informe subido<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 2 -->\n      <div style=\"display:flex;align-items:center;gap:48px;margin-bottom:80px;flex-direction:row-reverse;\" class=\"vl-step-row vl-reveal\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">2<\/div>\n            <h3>La IA genera la plantilla con tu estilo<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Voicit analiza el documento, identifica cada secci\u00f3n, interpreta qu\u00e9 informaci\u00f3n se extrae en cada una y genera las instrucciones precisas para replicar tu forma de trabajar.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Antes de crear la plantilla, te muestra las secciones identificadas y te hace preguntas para afinar los detalles. Siempre tienes el control.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 2: Chat con el agente -->\n          <div class=\"vl-mk-chat vl-reveal\">\n\n            <!-- Mensaje del usuario con PDF adjunto -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--user\">\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--user\">\n                <div class=\"vl-mk-chat-pdf-tag\">\n                  <svg width=\"16\" height=\"20\" viewBox=\"0 0 28 32\" fill=\"none\"><path d=\"M2 0h16l8 8v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z\" fill=\"#E84D47\"\/><path d=\"M18 0v8h8\" fill=\"#FF7B6E\" opacity=\"0.85\"\/><text x=\"14\" y=\"22\" font-family=\"Manrope,sans-serif\" font-size=\"7\" font-weight=\"800\" fill=\"#FFFFFF\" text-anchor=\"middle\" letter-spacing=\"0.5\">PDF<\/text><\/svg>\n                  <span>informe_candidato.pdf<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Burbuja \"pensando\" del agente -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--ai vl-mk-chat-thinking\">\n              <div class=\"vl-mk-chat-avatar\">\n                <svg width=\"20\" height=\"12\" viewBox=\"0 0 90.23 54.17\" fill=\"#FFFFFF\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><\/svg>\n              <\/div>\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n                <span class=\"vl-mk-shimmer\">Analizando estructura del informe\u2026<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- Respuesta del agente con las secciones detectadas -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--ai vl-mk-chat-response\">\n              <div class=\"vl-mk-chat-avatar\">\n                <svg width=\"20\" height=\"12\" viewBox=\"0 0 90.23 54.17\" fill=\"#FFFFFF\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><\/svg>\n              <\/div>\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n                <p class=\"vl-mk-chat-intro\">He detectado estas 5 secciones:<\/p>\n                <ul class=\"vl-mk-chat-sections\">\n                  <li><span class=\"vl-mk-chat-section-name\">Datos del candidato<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar secci\u00f3n\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Trayectoria profesional<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar secci\u00f3n\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Competencias evaluadas<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar secci\u00f3n\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Motivaci\u00f3n por el cambio<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar secci\u00f3n\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Conclusiones<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar secci\u00f3n\">\u2715<\/button><\/li>\n                <\/ul>\n                <p class=\"vl-mk-chat-question\">\u00bfTe encaja esta estructura?<\/p>\n                <div class=\"vl-mk-chat-buttons\">\n                  <button class=\"vl-mk-chat-btn vl-mk-chat-btn--primary\" type=\"button\" data-vl-chat-confirm>S\u00ed, generar<\/button>\n                  <button class=\"vl-mk-chat-btn\" type=\"button\" data-vl-chat-adjust>Ajustar<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 3 -->\n      <div style=\"display:flex;align-items:center;gap:48px;\" class=\"vl-step-row vl-reveal\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">3<\/div>\n            <h3>Revisa, ajusta y aplica<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Puedes ajustar cualquier secci\u00f3n o instrucci\u00f3n. Cuando est\u00e9s conforme, guarda tu plantilla y apl\u00edcala a tus siguientes entrevistas o reuniones para generar tu informe autom\u00e1tico a medida.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">El resultado final es un informe tan preciso como si lo hubieras redactado a mano \u2014 pero en segundos, no en horas.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 3: Editor de plantilla INTERACTIVO -->\n          <div class=\"vl-mk-editor vl-reveal\">\n\n            <!-- Cabecera del editor -->\n            <div class=\"vl-mk-editor-head\">\n              <span class=\"vl-mk-editor-title\">Plantilla \u2014 Entrevista de selecci\u00f3n<\/span>\n            <\/div>\n\n            <!-- Cuerpo: secciones de la plantilla (acorde\u00f3n) -->\n            <div class=\"vl-mk-editor-body\">\n\n              <div class=\"vl-mk-editor-section\" data-vl-section data-instructions=\"Extrae los datos b\u00e1sicos del candidato: nombre, edad, ubicaci\u00f3n, formaci\u00f3n y disponibilidad.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-editor-name\">Datos del candidato<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section data-instructions=\"Resume la trayectoria del candidato destacando los 3 puestos m\u00e1s relevantes para el rol. Tono profesional.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-editor-name\">Trayectoria profesional<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section data-instructions=\"Eval\u00faa las competencias clave del rol en escala 1\u20135 con una breve justificaci\u00f3n de cada puntuaci\u00f3n.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-editor-name\">Competencias evaluadas<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section data-instructions=\"Recoge los motivos del candidato para considerar un cambio profesional y su inter\u00e9s en la oferta.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-editor-name\">Motivaci\u00f3n por el cambio<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section data-instructions=\"Cierra con una recomendaci\u00f3n clara y los pr\u00f3ximos pasos sugeridos.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-editor-name\">Conclusiones<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n            <\/div>\n\n            <!-- Pie con acci\u00f3n de guardar -->\n            <div class=\"vl-mk-editor-footer\">\n              <button type=\"button\" class=\"vl-mk-editor-action vl-mk-editor-action--primary\" data-vl-save>Guardar plantilla<\/button>\n            <\/div>\n\n            <!-- Toast de confirmaci\u00f3n -->\n            <div class=\"vl-mk-editor-toast\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <span>Plantilla guardada<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CASOS DE USO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Genera la plantilla de cualquier tipo de informe<\/h2>\n      <\/div>\n\n      <div class=\"vl-grid-3 vl-reveal\">\n        <!-- Caso 1: Selecci\u00f3n de personal \u2014 CV con avatar -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#FFE8D6;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"5\" y=\"3\" width=\"22\" height=\"26\" rx=\"2\" fill=\"#1A171B\"\/><circle cx=\"11\" cy=\"11\" r=\"2.5\" fill=\"#FFE8D6\"\/><path d=\"M7 17.5c0-2 1.8-3.5 4-3.5s4 1.5 4 3.5V19H7v-1.5z\" fill=\"#FFE8D6\"\/><rect x=\"17\" y=\"9\" width=\"7\" height=\"1.8\" fill=\"#FFE8D6\"\/><rect x=\"17\" y=\"13\" width=\"7\" height=\"1.8\" fill=\"#FFE8D6\"\/><rect x=\"8\" y=\"22\" width=\"16\" height=\"1.8\" fill=\"#FFE8D6\"\/><rect x=\"8\" y=\"25.5\" width=\"11\" height=\"1.8\" fill=\"#FFE8D6\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Selecci\u00f3n de personal<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Informes de candidatos, evaluaciones de competencias, res\u00famenes para clientes<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Caso 2: Ventas \u2014 malet\u00edn -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#E1F4E4;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2\" stroke=\"#1A171B\" stroke-width=\"2.5\" fill=\"none\"\/><rect x=\"3\" y=\"9\" width=\"26\" height=\"18\" rx=\"2\" fill=\"#1A171B\"\/><rect x=\"13\" y=\"16\" width=\"6\" height=\"3\" rx=\"0.5\" fill=\"#E1F4E4\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Ventas<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Informes de seguimiento comercial, res\u00famenes de reuniones con clientes, propuestas<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Caso 3: Reuniones de equipo \u2014 tres personas -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#EEE3F7;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"16\" cy=\"11\" r=\"4.5\" fill=\"#1A171B\"\/><path d=\"M7 27c0-4.5 4-8 9-8s9 3.5 9 8v1H7v-1z\" fill=\"#1A171B\"\/><circle cx=\"5.5\" cy=\"13.5\" r=\"3.2\" fill=\"#1A171B\"\/><path d=\"M0.5 25c0-2.8 2.3-5 5-5h2.5v8H0.5v-3z\" fill=\"#1A171B\"\/><circle cx=\"26.5\" cy=\"13.5\" r=\"3.2\" fill=\"#1A171B\"\/><path d=\"M24 20h2.5c2.7 0 5 2.2 5 5v3H24v-8z\" fill=\"#1A171B\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Reuniones de equipo<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Actas de reuniones, retrospectivas, seguimiento de proyectos, formaciones<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Caso 4: Atenci\u00f3n al cliente \u2014 auriculares con micro -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#FFF6CC;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4 18v-2C4 9.5 9.5 4 16 4s12 5.5 12 12v2\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/><rect x=\"2\" y=\"16\" width=\"6.5\" height=\"11\" rx=\"2\" fill=\"#1A171B\"\/><rect x=\"23.5\" y=\"16\" width=\"6.5\" height=\"11\" rx=\"2\" fill=\"#1A171B\"\/><path d=\"M26.5 27v2.5h-6\" stroke=\"#1A171B\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\"\/><circle cx=\"19\" cy=\"29.5\" r=\"1.5\" fill=\"#1A171B\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Atenci\u00f3n al cliente<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Llamadas de soporte, escalado de incidencias, seguimiento de onboarding<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Caso 5: Consultor\u00eda \u2014 gr\u00e1fico de barras -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#DEEBFD;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"3\" y=\"3\" width=\"26\" height=\"20\" rx=\"2\" fill=\"#1A171B\"\/><rect x=\"7\" y=\"15\" width=\"3.5\" height=\"5\" fill=\"#DEEBFD\"\/><rect x=\"12.5\" y=\"11\" width=\"3.5\" height=\"9\" fill=\"#DEEBFD\"\/><rect x=\"18\" y=\"13\" width=\"3.5\" height=\"7\" fill=\"#DEEBFD\"\/><rect x=\"23.5\" y=\"8\" width=\"3\" height=\"12\" fill=\"#DEEBFD\"\/><rect x=\"14\" y=\"23\" width=\"4\" height=\"4\" fill=\"#1A171B\"\/><rect x=\"9\" y=\"27\" width=\"14\" height=\"2.5\" rx=\"0.5\" fill=\"#1A171B\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Consultor\u00eda<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Reuniones con clientes, kickoffs de proyecto, planes de acci\u00f3n, entregables<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Caso 6: Investigaci\u00f3n de usuarios \u2014 lupa -->\n        <div class=\"vl-card vl-card--flip\" style=\"text-align:center;\">\n          <div class=\"vl-card-flip-front\" style=\"flex-direction:column;align-items:center;justify-content:center;gap:16px;\">\n            <div class=\"vl-icon vl-icon--light\" style=\"background:#FBE0E8;\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"13\" cy=\"13\" r=\"8.5\" stroke=\"#1A171B\" stroke-width=\"3\" fill=\"none\"\/><path d=\"M19.5 19.5l9 9\" stroke=\"#1A171B\" stroke-width=\"3.5\" stroke-linecap=\"round\"\/><\/svg><\/div>\n            <h4 style=\"font-size:20px;margin:0;\">Investigaci\u00f3n de usuarios<\/h4>\n          <\/div>\n          <div class=\"vl-card-flip-back\" style=\"justify-content:center;text-align:center;\">\n            <p class=\"text-small\" style=\"margin:0;\">Entrevistas con usuarios, sesiones de descubrimiento, focus groups<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIAL\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIOS (4 clientes reales RRHH)\n       Las fotos est\u00e1n como iniciales \u2014 sustituir por LinkedIn \/ Google\n       cuando el cliente d\u00e9 permiso. URLs LinkedIn al final de cada bloque.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt vl-tstack-section\" style=\"padding:0;\">\n    <div class=\"vl-tstack-track\">\n      <div class=\"vl-tstack-sticky\">\n        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center\" style=\"margin-bottom:90px;\">\n            <h2 class=\"vl-mb-16\">Ellos ya lo han probado<\/h2>\n          <\/div>\n\n          <div class=\"vl-tstack-cards\">\n\n            <!-- Testimonio 1: H\u00e9ctor Huertas \u2014 Buenpuerto -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"0\">\n              <p class=\"vl-testimonial-text\">\n                Llevo m\u00e1s de 25 a\u00f1os redactando informes de candidatos con mi propia metodolog\u00eda. Sub\u00ed uno al generador y, en cuesti\u00f3n de minutos, ten\u00eda una plantilla que replicaba mi estilo casi sin retoques.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/hector-huertas.webp\" alt=\"H\u00e9ctor Huertas\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">H\u00e9ctor Huertas<\/div>\n                  <div class=\"vl-testimonial-role\">Socio Director \u00b7 Buenpuerto<br>+25 a\u00f1os en RRHH<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Testimonio 2: Roberto Lifante \u2014 TK Analytics Group -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"1\">\n              <p class=\"vl-testimonial-text\">\n                En consultor\u00eda de tecnolog\u00eda, cada cliente y cada proyecto exige un informe distinto. Subir un documento de referencia y obtener la plantilla en minutos nos permite estandarizar entregables sin perder el matiz de cada caso.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/roberto-lifante.webp\" alt=\"Roberto Lifante\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">Roberto Lifante<\/div>\n                  <div class=\"vl-testimonial-role\">CEO \u00b7 TK Analytics Group<br>Consultor\u00eda tecnol\u00f3gica<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Testimonio 3: Cristina Muler \u2014 Brandty -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"2\">\n              <p class=\"vl-testimonial-text\">\n                Tenemos un formato muy concreto para nuestros informes de selecci\u00f3n. Pasamos un PDF de muestra al generador y la plantilla sali\u00f3 calcada a nuestro estilo. Ahora cada proceso parte de esa base sin reconfigurar nada.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/cristina-muler.webp\" alt=\"Cristina Muler\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">Cristina Muler<\/div>\n                  <div class=\"vl-testimonial-role\">CEO \u00b7 Brandty<br>Consultora de Selecci\u00f3n<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       EL ANTES Y EL DESPU\u00c9S (comparativa)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Un cambio que notar\u00e1s<\/h2>\n      <\/div>\n\n\n      <div class=\"vl-compare-grid vl-reveal\">\n\n        <!-- Card \"Antes\" -->\n        <div class=\"vl-compare-card vl-compare-card--before\">\n          <span class=\"vl-compare-label\">Antes<\/span>\n          <h3 class=\"vl-compare-title\">Sin partir de un informe de referencia<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Crear cada secci\u00f3n del informe una a una<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Redactar instrucciones para cada secci\u00f3n<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Repetir todo el proceso para cada caso<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Flecha de transformaci\u00f3n (visible solo en desktop) -->\n        <div class=\"vl-compare-arrow\" aria-hidden=\"true\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\n            <path d=\"M6 16h20m-6-6l6 6-6 6\" stroke=\"#9A9A9A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Card \"Ahora\" -->\n        <div class=\"vl-compare-card vl-compare-card--after\">\n          <span class=\"vl-compare-label\">Ahora<\/span>\n          <h3 class=\"vl-compare-title\">Partiendo de un informe de referencia<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Sube un PDF y la IA crea todas las secciones<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Instrucciones generadas autom\u00e1ticamente<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Un PDF nuevo = una plantilla nueva<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CTA FINAL (p\u00edldora gris claro sobre fondo blanco)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\" style=\"background:#FFFFFF;text-align:center;padding:80px 0 100px;\">\n    <div class=\"vl-container\">\n      <div class=\"vl-cta-pill vl-reveal\">\n\n        <h2 class=\"vl-mb-16\" style=\"color:#161616;\">Tu primera plantilla, lista en 2 minutos<\/h2>\n        <p style=\"font-size:18px;color:#424242;max-width:560px;margin:0 auto 28px;\">\n          Empieza gratis. Sin compromiso. Sin tarjeta de cr\u00e9dito.\n        <\/p>\n\n        <div style=\"display:flex;gap:16px;justify-content:center;flex-wrap:wrap;\">\n          <a href=\"https:\/\/app.voicit.com\/signup\" class=\"vl-btn vl-btn--brand\">\n            Crear plantilla\n          <\/a>\n          <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" class=\"vl-btn vl-btn--secondary\" rel=\"nofollow noopener\" target=\"_blank\">\n            Solicitar demo\n          <\/a>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FAQ\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\">\n    <div class=\"vl-container--narrow\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2>Preguntas frecuentes<\/h2>\n      <\/div>\n\n      <div class=\"vl-faq vl-reveal\">\n        <details>\n          <summary>\u00bfQu\u00e9 tipo de documentos puedo subir como referencia?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Puedes subir cualquier documento PDF que represente el tipo de informe que quieres generar autom\u00e1ticamente. Puede ser un informe de candidato, un acta de reuni\u00f3n, un resumen comercial, una evaluaci\u00f3n de competencias&#8230; Si lo has redactado alguna vez, Voicit puede aprender de \u00e9l.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfLa IA replica exactamente mi formato y estilo?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>La IA analiza la estructura, el tono, la extensi\u00f3n y los detalles de cada secci\u00f3n de tu documento. Antes de crear la plantilla, te muestra lo que ha interpretado y te hace preguntas para confirmar. El resultado final se ajusta a tu forma de trabajar, no al rev\u00e9s.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfPuedo editar la plantilla despu\u00e9s de generarla?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed, por supuesto. La plantilla generada es un punto de partida que puedes modificar libremente. Puedes a\u00f1adir secciones, cambiar instrucciones, reordenar apartados o ajustar cualquier detalle directamente en el editor de plantillas de Voicit.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfFunciona para informes que no son de recursos humanos?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Absolutamente. Aunque muchos de nuestros usuarios son profesionales de RRHH, el generador funciona para cualquier tipo de informe: ventas, consultor\u00eda, reuniones internas, formaciones, seguimiento de proyectos&#8230; Si necesitas documentar una conversaci\u00f3n, Voicit puede generar la plantilla.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfCu\u00e1nto tiempo tarda en generar una plantilla?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>El proceso completo \u2014 subir el PDF, revisar las secciones identificadas y confirmar \u2014 lleva aproximadamente 2 minutos. Comp\u00e1ralo con las 2-4 horas que puede llevar configurar una plantilla manualmente, secci\u00f3n por secci\u00f3n.<\/p>\n          <\/div>\n        <\/details>\n      <\/div>\n\n      <div style=\"text-align:center;margin-top:48px;\">\n        <a href=\"https:\/\/voicit.com\/voicit-faqs\/\" class=\"vl-btn\" style=\"background:#161616 !important;color:#FFFFFF !important;border:none;border-radius:100px;padding:14px 32px;font-weight:700;font-size:15px;text-decoration:none !important;display:inline-flex;align-items:center;\">\n          M\u00e1s dudas aqu\u00ed\n        <\/a>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCHEMA JSON-LD\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"name\": \"Generador de Plantillas de Informes con IA \u2014 Voicit\",\n  \"description\": \"Sube un PDF de referencia y genera autom\u00e1ticamente plantillas de informes con IA. Para entrevistas de selecci\u00f3n, reuniones comerciales y m\u00e1s. Sin configuraci\u00f3n manual.\",\n  \"url\": \"https:\/\/voicit.com\/soluciones\/generador-plantillas-informes\/\",\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Voicit\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/voicit.com\/wp-content\/uploads\/2024\/01\/voicit-logo.png\"\n    }\n  }\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQu\u00e9 tipo de documentos puedo subir como referencia?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Puedes subir cualquier documento PDF que represente el tipo de informe que quieres generar autom\u00e1ticamente. Puede ser un informe de candidato, un acta de reuni\u00f3n, un resumen comercial, una evaluaci\u00f3n de competencias.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfLa IA replica exactamente mi formato y estilo?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"La IA analiza la estructura, el tono, la extensi\u00f3n y los detalles de cada secci\u00f3n de tu documento. Antes de crear la plantilla, te muestra lo que ha interpretado y te hace preguntas para confirmar.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfPuedo editar la plantilla despu\u00e9s de generarla?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"S\u00ed. La plantilla generada es un punto de partida que puedes modificar libremente. Puedes a\u00f1adir secciones, cambiar instrucciones, reordenar apartados o ajustar cualquier detalle.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfFunciona para informes que no son de recursos humanos?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Absolutamente. El generador funciona para cualquier tipo de informe: ventas, consultor\u00eda, reuniones internas, formaciones, seguimiento de proyectos.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCu\u00e1nto tiempo tarda en generar una plantilla?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"El proceso completo lleva aproximadamente 2 minutos. Comp\u00e1ralo con las 2-4 horas que puede llevar configurar una plantilla manualmente.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JavaScript \u2014 Scroll Animations\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function() {\n  'use strict';\n\n  \/\/ Intersection Observer para reveal on scroll\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        observer.unobserve(entry.target);\n      }\n    });\n  }, {\n    threshold: 0.1,\n    rootMargin: '0px 0px -50px 0px'\n  });\n\n  \/\/ Observar todos los elementos .vl-reveal EXCEPTO los mockups\n  document.querySelectorAll('.vl-reveal:not(.vl-mk-filepicker):not(.vl-mk-chat):not(.vl-mk-editor)').forEach(el => {\n    observer.observe(el);\n  });\n\n  \/\/ Observador espec\u00edfico para mockups con trigger m\u00e1s estricto\n  \/\/ (solo dispara cuando el mockup est\u00e1 bien dentro del viewport)\n  const mockupObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        mockupObserver.unobserve(entry.target);\n\n        \/\/ Editor del Paso 3: abrir autom\u00e1ticamente \"Trayectoria profesional\" tras la intro\n        if (entry.target.classList.contains('vl-mk-editor')) {\n          setTimeout(() => {\n            const sections = entry.target.querySelectorAll('[data-vl-section]');\n            \/\/ Secci\u00f3n 2 = Trayectoria profesional (\u00edndice 1)\n            if (sections[1]) vlEditorOpenSection(sections[1]);\n          }, 1100);\n        }\n      }\n    });\n  }, {\n    threshold: 0.45,\n    rootMargin: '0px 0px -15% 0px'\n  });\n  document.querySelectorAll('.vl-mk-filepicker, .vl-mk-chat, .vl-mk-editor').forEach(el => {\n    mockupObserver.observe(el);\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOCKUP PASO 3 \u2014 L\u00f3gica interactiva del editor\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  \/\/ HTML reutilizable de los controles (instrucciones + Formato + Longitud)\n  function vlEditorControlsHtml(instructions) {\n    return `\n      <div class=\"vl-mk-editor-instructions\">${instructions}<\/div>\n      <div class=\"vl-mk-editor-controls\">\n        <div class=\"vl-mk-editor-ctrl-group\">\n          <label class=\"vl-mk-editor-ctrl-label\">Formato<\/label>\n          <div class=\"vl-mk-editor-btn-group\" data-vl-ctrl=\"formato\">\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn is-active\" data-vl-val=\"redactado\" title=\"Redactado\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"4\" y=\"11\" width=\"14\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"4\" y=\"16\" width=\"10\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"bullets\" title=\"Bullet points\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><circle cx=\"5.5\" cy=\"7.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"6\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><circle cx=\"5.5\" cy=\"12.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"11\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><circle cx=\"5.5\" cy=\"17.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"16\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"hashtag\" title=\"Hashtag\">\n              <span class=\"vl-mk-editor-hash\">#<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n        <div class=\"vl-mk-editor-ctrl-group\">\n          <label class=\"vl-mk-editor-ctrl-label\">Longitud<\/label>\n          <div class=\"vl-mk-editor-btn-group\" data-vl-ctrl=\"longitud\">\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"larga\" title=\"Larga\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"9\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"13\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"17\" width=\"11\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"media\" title=\"Media\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"12\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"16\" width=\"11\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn is-active\" data-vl-val=\"corta\" title=\"Corta\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"15\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    `;\n  }\n\n  \/\/ Abrir una secci\u00f3n \u2014 primero cierra la anterior, luego abre la nueva (secuencial)\n  function vlEditorOpenSection(section) {\n    const editor = section.closest('.vl-mk-editor');\n    if (!editor) return;\n\n    \/\/ Inyectamos contenido si todav\u00eda no lo tiene\n    const body = section.querySelector('.vl-mk-editor-section-body');\n    if (body && !body.dataset.vlPopulated) {\n      const instructions = section.dataset.instructions || '';\n      body.innerHTML = vlEditorControlsHtml(instructions);\n      body.dataset.vlPopulated = '1';\n    }\n\n    const openOnes = Array.from(editor.querySelectorAll('.vl-mk-editor-section--open'))\n      .filter(s => s !== section);\n\n    if (openOnes.length > 0) {\n      \/\/ 1) Cerrar la(s) que est\u00e9n abiertas\n      openOnes.forEach(s => s.classList.remove('vl-mk-editor-section--open'));\n      \/\/ 2) Esperar a que termine la transici\u00f3n de colapso, luego abrir la nueva\n      clearTimeout(editor._vlOpenTimer);\n      editor._vlOpenTimer = setTimeout(() => {\n        section.classList.add('vl-mk-editor-section--open');\n      }, 420);\n    } else {\n      \/\/ Nada estaba abierto \u2192 abrir directamente\n      section.classList.add('vl-mk-editor-section--open');\n    }\n  }\n\n  \/\/ Cerrar una secci\u00f3n\n  function vlEditorCloseSection(section) {\n    section.classList.remove('vl-mk-editor-section--open');\n  }\n\n  \/\/ Toggle del head: si la secci\u00f3n clicada est\u00e1 abierta la cerramos, si no la abrimos\n  document.addEventListener('click', (e) => {\n    \/\/ 1) Click en la cabecera de una secci\u00f3n \u2192 toggle accordion\n    const head = e.target.closest('[data-vl-toggle]');\n    if (head) {\n      const section = head.closest('[data-vl-section]');\n      if (section.classList.contains('vl-mk-editor-section--open')) {\n        vlEditorCloseSection(section);\n      } else {\n        vlEditorOpenSection(section);\n      }\n      return;\n    }\n\n    \/\/ 2) Click en un bot\u00f3n de Formato\/Longitud \u2192 cambiar selecci\u00f3n\n    const iconBtn = e.target.closest('.vl-mk-editor-icon-btn');\n    if (iconBtn) {\n      const group = iconBtn.parentElement;\n      group.querySelectorAll('.vl-mk-editor-icon-btn').forEach(b => b.classList.remove('is-active'));\n      iconBtn.classList.add('is-active');\n      return;\n    }\n\n    \/\/ 3) Click en \"Guardar plantilla\" \u2192 pulso + toast\n    const saveBtn = e.target.closest('[data-vl-save]');\n    if (saveBtn) {\n      const editor = saveBtn.closest('.vl-mk-editor');\n      const toast = editor.querySelector('.vl-mk-editor-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      return;\n    }\n  });\n\n  \/\/ Filtrar click en el handle del drag para que no dispare el toggle de la secci\u00f3n\n  document.addEventListener('click', (e) => {\n    if (e.target.closest('.vl-mk-editor-drag')) {\n      e.stopPropagation();\n    }\n  }, true);\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOCKUP PASO 1 \u2014 File picker interactivo\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  document.addEventListener('click', (e) => {\n    \/\/ Click en un archivo PDF \u2192 seleccionarlo\n    const file = e.target.closest('.vl-mk-fp-file');\n    if (file) {\n      const picker = file.closest('.vl-mk-filepicker');\n      if (picker) {\n        picker.querySelectorAll('.vl-mk-fp-file').forEach(f => f.classList.remove('is-selected'));\n        file.classList.add('is-selected');\n        const btn = picker.querySelector('.vl-mk-fp-btn');\n        if (btn) btn.classList.add('is-enabled');\n      }\n      return;\n    }\n\n    \/\/ Click en \"Subir informe\" \u2192 toast desde arriba\n    const upBtn = e.target.closest('[data-vl-upload]');\n    if (upBtn && upBtn.classList.contains('is-enabled')) {\n      const picker = upBtn.closest('.vl-mk-filepicker');\n      const toast = picker?.querySelector('.vl-mk-fp-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      return;\n    }\n\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MOCKUP PASO 2 \u2014 Chat interactivo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    \/\/ Click en \"Ajustar\" \u2192 modo edici\u00f3n (aparecen las X en cada secci\u00f3n)\n    const adjustBtn = e.target.closest('[data-vl-chat-adjust]');\n    if (adjustBtn) {\n      const chat = adjustBtn.closest('.vl-mk-chat');\n      if (chat) chat.classList.add('is-editing');\n      return;\n    }\n\n    \/\/ Click en una \u2715 \u2192 eliminar esa secci\u00f3n con animaci\u00f3n\n    const delBtn = e.target.closest('[data-vl-delete-section]');\n    if (delBtn) {\n      const li = delBtn.closest('li');\n      if (li) {\n        \/\/ Fijamos su altura actual para que la animaci\u00f3n de max-height funcione\n        li.style.maxHeight = li.offsetHeight + 'px';\n        void li.offsetWidth;\n        li.classList.add('is-removing');\n        setTimeout(() => li.remove(), 340);\n      }\n      return;\n    }\n\n    \/\/ Click en \"S\u00ed, generar\" \u2192 a\u00f1adir burbuja \"Generando...\" con shimmer permanente\n    const confirmBtn = e.target.closest('[data-vl-chat-confirm]');\n    if (confirmBtn) {\n      const chat = confirmBtn.closest('.vl-mk-chat');\n      if (!chat || chat.dataset.vlGenerating === '1') return;\n      chat.dataset.vlGenerating = '1';\n      chat.classList.remove('is-editing');\n\n      \/\/ Deshabilitamos los botones para que no se pueda volver a pulsar\n      chat.querySelectorAll('.vl-mk-chat-btn').forEach(b => {\n        b.disabled = true;\n        b.style.opacity = '0.5';\n        b.style.cursor = 'default';\n        b.style.pointerEvents = 'none';\n      });\n\n      \/\/ Creamos la nueva burbuja con shimmer \"Generando\u2026\"\n      const row = document.createElement('div');\n      row.className = 'vl-mk-chat-row vl-mk-chat-row--ai';\n      row.style.opacity = '0';\n      row.innerHTML = `\n        <div class=\"vl-mk-chat-avatar\">\n          <svg width=\"20\" height=\"12\" viewBox=\"0 0 90.23 54.17\" fill=\"#FFFFFF\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><\/svg>\n        <\/div>\n        <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n          <span class=\"vl-mk-shimmer\">Generando plantilla\u2026<\/span>\n        <\/div>\n      `;\n      chat.appendChild(row);\n      \/\/ Forzar reflow y animar entrada\n      void row.offsetWidth;\n      row.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\n      row.style.opacity = '1';\n\n      \/\/ Tras un peque\u00f1o delay, sustituir \"Generando...\" por el check de finalizado\n      setTimeout(() => {\n        const bubble = row.querySelector('.vl-mk-chat-bubble');\n        if (!bubble) return;\n        bubble.style.transition = 'opacity 0.3s ease';\n        bubble.style.opacity = '0';\n        setTimeout(() => {\n          bubble.innerHTML = '<span class=\"vl-mk-chat-done\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>Borrador de plantilla generado<\/span>';\n          bubble.style.opacity = '1';\n        }, 320);\n      }, 2400);\n      return;\n    }\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ DRAG & DROP para reordenar secciones del editor\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  let vlDrag = null;\n\n  document.addEventListener('pointerdown', (e) => {\n    const handle = e.target.closest('.vl-mk-editor-drag');\n    if (!handle) return;\n    const editor = handle.closest('.vl-mk-editor');\n    if (!editor) return;\n\n    e.preventDefault();\n    handle.setPointerCapture?.(e.pointerId);\n\n    const section = handle.closest('[data-vl-section]');\n    vlDrag = {\n      section,\n      editor,\n      container: section.parentElement,\n      handle,\n      pointerLastY: e.clientY,\n      currentTranslateY: 0,\n      pointerId: e.pointerId,\n    };\n\n    section.classList.add('vl-mk-editor-section--dragging');\n    editor.classList.add('vl-mk-editor--is-dragging');\n    document.body.style.cursor = 'grabbing';\n    document.body.style.userSelect = 'none';\n  });\n\n  document.addEventListener('pointermove', (e) => {\n    if (!vlDrag || e.pointerId !== vlDrag.pointerId) return;\n\n    \/\/ 1) Actualizamos el translate bas\u00e1ndonos en cu\u00e1nto se ha movido el puntero\n    const deltaY = e.clientY - vlDrag.pointerLastY;\n    vlDrag.currentTranslateY += deltaY;\n    vlDrag.pointerLastY = e.clientY;\n    vlDrag.section.style.transform = `translateY(${vlDrag.currentTranslateY}px)`;\n\n    \/\/ 2) Buscamos d\u00f3nde deber\u00eda insertarse seg\u00fan la posici\u00f3n del cursor\n    const cursorY = e.clientY;\n    const siblings = Array.from(vlDrag.container.querySelectorAll('[data-vl-section]'))\n      .filter(s => s !== vlDrag.section);\n\n    let insertBefore = null;\n    for (const sib of siblings) {\n      const rect = sib.getBoundingClientRect();\n      const midY = rect.top + rect.height \/ 2;\n      if (cursorY < midY) {\n        insertBefore = sib;\n        break;\n      }\n    }\n\n    const shouldReorder = insertBefore !== null\n      ? vlDrag.section.nextElementSibling !== insertBefore\n      : vlDrag.section !== vlDrag.container.lastElementChild;\n\n    if (shouldReorder) {\n      \/\/ Antes de reordenar guardamos d\u00f3nde est\u00e1 visualmente la secci\u00f3n\n      const rectBefore = vlDrag.section.getBoundingClientRect();\n\n      \/\/ Quitamos el transform para medir su posici\u00f3n natural\n      vlDrag.section.style.transform = '';\n\n      if (insertBefore) {\n        vlDrag.container.insertBefore(vlDrag.section, insertBefore);\n      } else {\n        vlDrag.container.appendChild(vlDrag.section);\n      }\n\n      \/\/ Medimos su nueva posici\u00f3n natural tras el reorder\n      const rectAfter = vlDrag.section.getBoundingClientRect();\n\n      \/\/ Aplicamos un offset para que visualmente quede donde estaba antes\n      vlDrag.currentTranslateY = rectBefore.top - rectAfter.top;\n      vlDrag.section.style.transform = `translateY(${vlDrag.currentTranslateY}px)`;\n    }\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ TESTIMONIOS \u2014 Sticky stack scroll\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  (function () {\n    const section = document.querySelector('.vl-tstack-section');\n    if (!section) return;\n    const track = section.querySelector('.vl-tstack-track');\n    const cards = section.querySelectorAll('.vl-tstack-card');\n    if (!track || cards.length === 0) return;\n\n    function updateStack() {\n      const rect = track.getBoundingClientRect();\n      const trackHeight = track.offsetHeight - window.innerHeight;\n      if (trackHeight <= 0) return;\n      let progress = -rect.top \/ trackHeight;\n      progress = Math.max(0, Math.min(1, progress));\n\n      \/\/ El track se divide en N segmentos (uno por card)\n      \/\/ Card N aparece cuando progress >= N\/totalCards\n      \/\/ Card N va a \"estar detr\u00e1s\" cuando hay cards superiores visibles\n      const N = cards.length;\n      \/\/ \u00daltima card visible seg\u00fan progreso\n      \/\/ progress 0    \u2192 1 card visible (H\u00e9ctor)\n      \/\/ progress 0.25 \u2192 2 (H\u00e9ctor + Cristina)\n      \/\/ progress 0.50 \u2192 3 (+ Roberto)\n      \/\/ progress 0.75 \u2192 4 (+ Javier)\n      const topIdx = Math.min(N - 1, Math.floor(progress * N));\n\n      cards.forEach((card, idx) => {\n        card.classList.remove('is-behind-1', 'is-behind-2', 'is-behind-3');\n        if (idx <= topIdx) {\n          card.classList.add('is-visible');\n          \/\/ Si esta card NO es la \u00faltima visible, est\u00e1 detr\u00e1s\n          const depth = topIdx - idx;\n          if (depth === 1) card.classList.add('is-behind-1');\n          else if (depth === 2) card.classList.add('is-behind-2');\n          else if (depth >= 3) card.classList.add('is-behind-3');\n        } else {\n          card.classList.remove('is-visible');\n        }\n      });\n    }\n\n    \/\/ RAF throttle para suavidad\n    let ticking = false;\n    function onScroll() {\n      if (!ticking) {\n        requestAnimationFrame(() => { updateStack(); ticking = false; });\n        ticking = true;\n      }\n    }\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onScroll);\n    \/\/ Estado inicial: la primera card visible al menos\n    updateStack();\n    \/\/ Aseguramos que la primera siempre est\u00e1 visible (estado base)\n    cards[0].classList.add('is-visible');\n  })();\n\n  const vlDragEnd = (e) => {\n    if (!vlDrag) return;\n    if (e && e.pointerId !== vlDrag.pointerId) return;\n\n    const section = vlDrag.section;\n    const editor = vlDrag.editor;\n\n    section.classList.remove('vl-mk-editor-section--dragging');\n    editor.classList.remove('vl-mk-editor--is-dragging');\n\n    \/\/ Snap suave a su posici\u00f3n natural\n    section.style.transition = 'transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1)';\n    section.style.transform = '';\n    setTimeout(() => {\n      section.style.transition = '';\n    }, 240);\n\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    vlDrag = null;\n  };\n  document.addEventListener('pointerup', vlDragEnd);\n  document.addEventListener('pointercancel', vlDragEnd);\n\n  \/\/ Smooth scroll para anclas internas\n  document.querySelectorAll('.vl-landing a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function(e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Sube un PDF de referencia y la IA crea autom\u00e1ticamente la plantilla de informe con tu estilo. Sin configuraci\u00f3n manual, lista en segundos.<\/p>","protected":false},"author":1,"featured_media":7980,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":"","rank_math_title":"Generador de plantillas para informes con IA | Voicit","rank_math_description":"Sube un PDF de referencia y la IA crea la plantilla de informe con tu estilo. Adapta a candidatos, ventas, clientes, equipos. Sin configuraci\u00f3n manual.","rank_math_focus_keyword":"generador de plantillas IA"},"class_list":["post-8369","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/8369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/comments?post=8369"}],"version-history":[{"count":15,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/8369\/revisions"}],"predecessor-version":[{"id":8445,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/8369\/revisions\/8445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/media\/7980"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/media?parent=8369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}