{"id":8479,"date":"2026-06-01T18:15:49","date_gmt":"2026-06-01T18:15:49","guid":{"rendered":"https:\/\/voicit.com\/?page_id=8479"},"modified":"2026-06-01T18:15:49","modified_gmt":"2026-06-01T18:15:49","slug":"modelos-de-relatorio-de-candidato","status":"publish","type":"page","link":"https:\/\/voicit.com\/pt\/plantillas-informes-candidatos\/","title":{"rendered":"Gerador de modelos de relat\u00f3rios de candidatos"},"content":{"rendered":"\n<!--\n  VOICIT \u2014 Landing: Generador de plantillas de informes de candidatos (RRHH)\n  URL: \/plantillas-informes-candidatos\/\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-8479 > .entry-content > .vl-landing *\/\n  body.page-id-8479 div#page.hfeed.site,\n  body.page-id-8479 div#content.site-content,\n  body.page-id-8479 div#content,\n  body.page-id-8479 .ast-container,\n  body.page-id-8479 div#primary.content-area,\n  body.page-id-8479 main#main.site-main,\n  body.page-id-8479 article#post-8479,\n  body.page-id-8479 article.page,\n  body.page-id-8479 .entry-content,\n  body.page-id-8479 .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-8479 {\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-8479 .wp-block-html,\n  body.page-id-8479 .wp-site-blocks,\n  body.page-id-8479 .is-layout-flow,\n  body.page-id-8479 .is-layout-constrained,\n  body.page-id-8479 .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-8479 .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-8479 .entry-header,\n  body.page-id-8479 .ast-page-title-wrapper,\n  body.page-id-8479 .ast-archive-description,\n  body.page-id-8479 .entry-title,\n  body.page-id-8479 h1.entry-title,\n  body.page-id-8479 .page-title {\n    display: none !important;\n  }\n  body.page-id-8479 .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\/* BALANCE GLOBAL DE T\u00cdTULOS: todos los h1\/h2\/h3 reparten sus l\u00edneas de forma\n   equilibrada para que nunca quede una palabra hu\u00e9rfana sola en la \u00faltima l\u00ednea\n   (sobre todo en tablet\/m\u00f3vil). En desktop, los que caben en una l\u00ednea no se ven\n   afectados (balance es no-op). Se aplica SIEMPRE, sin necesidad de clases. *\/\n.vl-landing h1,\n.vl-landing h2,\n.vl-landing h3 {\n  text-wrap: pretty;\n  text-wrap: balance;\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  line-height: 1;\n}\n\/* Alinear verticalmente el n\u00famero del paso con su t\u00edtulo (Astra mete margin al h3) *\/\n.vl-step-row .vl-step-number + h3,\n.vl-landing .vl-step-row h3 {\n  margin: 0 !important;\n  padding: 0 !important;\n  line-height: 1.25;\n  display: flex;\n  align-items: center;\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: #ECECEC;\n  color: #2A2A2A;\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: #E0A100;\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\/* Config de cada secci\u00f3n (formato + longitud) a la derecha \u2014 estilo paso 3 *\/\n.vl-mk-cfg {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  opacity: 0;\n  animation: vl-cfg-fade 0.4s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-cfg { animation-delay: 3.55s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-cfg { animation-delay: 4.15s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-cfg { animation-delay: 4.75s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-cfg { animation-delay: 5.35s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-cfg { animation-delay: 5.95s; }\n@keyframes vl-cfg-fade {\n  from { opacity: 0; transform: scale(0.85); }\n  to   { opacity: 1; transform: scale(1); }\n}\n.vl-mk-cfg-ico {\n  width: 24px; height: 24px;\n  display: inline-flex; align-items: center; justify-content: center;\n  border-radius: 6px;\n  background: #F2F2F2;\n  color: #6E6E6E;\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: 560px;\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  border-top-left-radius: 14px;\n  border-top-right-radius: 14px;\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  min-width: 0;        \/* permite que el item del grid se encoja y el nombre haga ellipsis *\/\n  overflow: hidden;\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: 11px;\n  font-weight: 600;\n  color: #2A2A2A;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1 1 auto;\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\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 CON SCROLL CONGELADO\n   \"Antes\" visible primero; \"Ahora\" (flecha + card) entra al hacer 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.vl-cmp-section { position: relative; }\n.vl-cmp-track { position: relative; height: 200vh; }\n.vl-cmp-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 40px 0;\n}\n\/* La parte \"Ahora\" arranca oculta y entra de izquierda a derecha *\/\n.vl-cmp-after {\n  opacity: 0;\n  transform: translateX(-48px);\n  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);\n}\n.vl-compare-arrow.vl-cmp-after { transition-delay: 0.04s; }\n.vl-cmp-section.is-after-visible .vl-cmp-after { opacity: 1; transform: none; }\n\n@media (max-width: 1024px) {\n  \/* En tablet\/m\u00f3vil no congelamos: ambas tablas visibles y apiladas *\/\n  .vl-cmp-track { height: auto; }\n  .vl-cmp-sticky { position: static; height: auto; padding: 0; }\n  .vl-cmp-after { opacity: 1 !important; transform: none !important; }\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@media (max-width: 900px) {\n  \/* NORMA BALANCE: ocultar <br> de t\u00edtulos en pantallas estrechas *\/\n  .vl-landing h1 br, .vl-landing h2 br, .vl-landing h3 br { display: none !important; }\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   SCROLL CONGELADO DE LOS 3 PASOS (sticky-steps)\n   La secci\u00f3n se \"pega\" y van pasando los pasos uno a uno.\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-ssteps { position: relative; }\n\/* Esta secci\u00f3n usa un contenedor m\u00e1s ancho para dar aire a las animaciones *\/\n.vl-ssteps .vl-container { max-width: 1340px; width: 100%; }\n\/* Track: da el \"recorrido\" de scroll. ~135vh por paso. *\/\n.vl-ssteps-track { position: relative; height: 320vh; }\n\/* Lo que se queda fijo en pantalla mientras dura el track *\/\n.vl-ssteps-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;   \/* cabecera arriba, no centrada *\/\n  background: #F8F8F8;\n  box-sizing: border-box;\n  padding: 56px 0 32px;\n}\n\/* Indicador de progreso (3 barritas) *\/\n.vl-ssteps-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 56px; }\n.vl-ssteps-progress span {\n  width: 32px; height: 4px; border-radius: 2px;\n  background: #DADADA;\n  transition: background 0.35s ease, width 0.35s ease;\n}\n.vl-ssteps-progress span.is-active { background: #161616; width: 44px; }\n\/* Escenario donde se apilan los 3 paneles *\/\n.vl-ssteps-stage { position: relative; min-height: 500px; }\n\/* Cada paso ocupa todo el escenario; solo el activo se ve *\/\n.vl-sstep {\n  position: absolute; inset: 0;\n  display: flex !important;\n  flex-direction: row !important;  \/* SIEMPRE texto izquierda, animaci\u00f3n derecha *\/\n  align-items: center;\n  gap: 64px;\n  opacity: 0;\n  transform: translateY(24px);\n  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);\n  pointer-events: none;\n}\n.vl-sstep.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }\n.vl-sstep > div { min-width: 0; }\n\/* Texto algo m\u00e1s estrecho, animaci\u00f3n m\u00e1s ancha para no crecer en vertical *\/\n.vl-sstep > div:first-child { flex: 0 1 46% !important; }\n.vl-sstep > div:last-child  { flex: 1 1 54% !important; }\n\/* Texto siempre alineado a la izquierda *\/\n.vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: left; }\n\n@media (max-width: 1024px) {\n  \/* En tablet\/m\u00f3vil: apilar texto arriba, animaci\u00f3n abajo, y no congelar tan alto *\/\n  .vl-ssteps .vl-container { padding-left: 32px; padding-right: 32px; }\n  .vl-ssteps-track { height: auto; }\n  .vl-ssteps-sticky { position: static; height: auto; min-height: 0; padding: 64px 0; }\n  .vl-ssteps-stage { min-height: 0; }\n  .vl-sstep {\n    position: relative; inset: auto;\n    flex-direction: column !important;\n    opacity: 1; transform: none; pointer-events: auto;\n    gap: 28px;\n    margin-bottom: 64px;\n    text-align: center;\n  }\n  .vl-sstep:last-child { margin-bottom: 0; }\n  .vl-sstep > div:first-child, .vl-sstep > div:last-child { flex: 1 1 auto !important; }\n  .vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: center; }\n  .vl-ssteps-progress { display: none; }  \/* sin scroll congelado en pantallas estrechas *\/\n}\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 de candidato, lista en segundos.<br>\n            <span style=\"color:#6E6E6E;\">Parte de un informe de ejemplo 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            Sube un informe de candidato que ya te guste y la IA crea la plantilla con todas las instrucciones, para generar tras cada entrevista el informe del candidato replicando tu estilo.\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:#2A2A2A !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>\n                  <span class=\"vl-mk-section-text\">Datos del candidato<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <span class=\"vl-mk-cfg-ico\" title=\"Formato: bullet points\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                    <span class=\"vl-mk-cfg-ico\" title=\"Longitud: corta\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Trayectoria profesional<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <span class=\"vl-mk-cfg-ico\" title=\"Formato: redactado\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                    <span class=\"vl-mk-cfg-ico\" title=\"Longitud: media\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Competencias evaluadas<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <span class=\"vl-mk-cfg-ico\" title=\"Formato: bullet points\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                    <span class=\"vl-mk-cfg-ico\" title=\"Longitud: larga\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Rango salarial<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <span class=\"vl-mk-cfg-ico\" title=\"Formato: hashtag\"><span style=\"font-weight:800;font-size:14px;line-height:1;\">#<\/span><\/span>\n                    <span class=\"vl-mk-cfg-ico\" title=\"Longitud: corta\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Conclusiones<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <span class=\"vl-mk-cfg-ico\" title=\"Formato: redactado\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                    <span class=\"vl-mk-cfg-ico\" title=\"Longitud: corta\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" 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><\/span>\n                  <\/span>\n                <\/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\" style=\"max-width:920px;margin-left:auto;margin-right:auto;\">Crear tu plantilla para informes autom\u00e1ticos de candidatos no deber\u00eda ser tan dif\u00edcil<\/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\">Configurar tu plantilla lleva horas<\/h3>\n          <p class=\"text-small\">Decidir qu\u00e9 secciones incluir y c\u00f3mo redactarlas es una tarea lenta y tediosa.<\/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\">La IA no escribe como t\u00fa lo har\u00edas<\/h3>\n          <p class=\"text-small\">Sin las indicaciones adecuadas, el informe no refleja tu criterio.<\/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 proceso<\/h3>\n          <p class=\"text-small\">Cada nuevo proceso te obliga a modificar tu plantilla otra vez.<\/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--alt vl-ssteps\">\n    <div class=\"vl-ssteps-track\">\n      <div class=\"vl-ssteps-sticky\">\n        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center vl-mb-32\">\n            <h2 style=\"margin:0 auto;\">Tu plantilla 100 % configurada en 3 pasos<\/h2>\n          <\/div>\n\n          <!-- Indicador de progreso de los pasos -->\n          <div class=\"vl-ssteps-progress\">\n            <span data-sstep-dot=\"0\"><\/span><span data-sstep-dot=\"1\"><\/span><span data-sstep-dot=\"2\"><\/span>\n          <\/div>\n\n          <!-- Escenario: los 3 pasos apilados, solo uno visible seg\u00fan el scroll -->\n          <div class=\"vl-ssteps-stage\">\n\n      <!-- Paso 1 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"0\">\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 ejemplo<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Sube un PDF de un informe de candidato que ya hayas redactado y la IA lo tomar\u00e1 como referencia.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">No importa lo largo o complejo que sea el informe: cuanto m\u00e1s detallado sea el ejemplo, m\u00e1s fiel ser\u00e1 la plantilla que obtengas.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 1: File picker estilo Voicit -->\n          <div class=\"vl-mk-filepicker\">\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\">informe_candidato.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\">informe_por_competencias.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_perfil_senior.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\">entrevista_final.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 class=\"vl-step-row vl-sstep\" data-sstep=\"1\">\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 entiende tu formato y estilo<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Voicit analiza el documento de referencia, identifica cada secci\u00f3n, interpreta qu\u00e9 informaci\u00f3n se extrae en cada una y genera instrucciones precisas.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Antes de generarla, te ense\u00f1a las secciones que ha detectado y te consulta las dudas para ajustar cada detalle. La \u00faltima palabra siempre es tuya.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 2: Chat con el agente -->\n          <div class=\"vl-mk-chat\">\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 class=\"vl-step-row vl-sstep\" data-sstep=\"2\">\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>Aj\u00fastala y \u00fasala tras cada entrevista<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Retoca las secciones que quieras y guarda tu plantilla definitiva. Cada informe combina el an\u00e1lisis de la entrevista con la documentaci\u00f3n del candidato: CV, notas, tests y puesto.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Cada informe de candidato sale con tu mismo nivel de detalle, pero generado en segundos en vez de escribirlo entero a mano.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 3: Editor de plantilla INTERACTIVO -->\n          <div class=\"vl-mk-editor\">\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><!-- \/vl-ssteps-stage -->\n        <\/div><!-- \/vl-container -->\n      <\/div><!-- \/vl-ssteps-sticky -->\n    <\/div><!-- \/vl-ssteps-track -->\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\" style=\"background:#F8F8F8;\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Plantillas para cualquier etapa del proceso de selecci\u00f3n<\/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;\">Informe de candidato<\/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;\">Generado a partir de toda la documentaci\u00f3n del perfil, las conversaciones y la descripci\u00f3n del puesto<\/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;\">Executive search<\/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 ejecutivos para posiciones de direcci\u00f3n<\/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;\">Entrevistas por competencias<\/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;\">Evaluaci\u00f3n estructurada de cada competencia clave<\/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;\">Criba telef\u00f3nica<\/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;\">Res\u00famenes de las primeras llamadas de screening<\/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;\">Informe para el 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;\">El entregable de cada candidato presentado al cliente<\/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;\">Informe de requerimientos<\/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;\">Requisitos del perfil, competencias ideales, descripci\u00f3n del puesto y contexto de la empresa<\/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;background:#F8F8F8;\">\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: I\u00f1aki Goyeneche \u2014 ieTeam -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"1\">\n              <p class=\"vl-testimonial-text\">\n                Cada consultor de mi equipo redactaba los informes a su manera. Subimos uno de referencia y ahora todos generan el informe de cada candidato con el mismo nivel de detalle y nuestro estilo, en una fracci\u00f3n del tiempo.\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\/inaki-goyeneche.webp\" alt=\"I\u00f1aki Goyeneche\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">I\u00f1aki Goyeneche<\/div>\n                  <div class=\"vl-testimonial-role\">Talent Area Manager \u00b7 ieTeam<br>+24 a\u00f1os en consultor\u00eda de talento<\/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 vl-cmp-section\">\n   <div class=\"vl-cmp-track\">\n    <div class=\"vl-cmp-sticky\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48\">\n        <h2 class=\"vl-mb-16\">Un verdadero cambio en tu d\u00eda a d\u00eda<\/h2>\n      <\/div>\n\n\n      <div class=\"vl-compare-grid\">\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\">Redactando cada informe a mano<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Escribes el informe de cada candidato tras cada entrevista<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Cada miembro del equipo entrega un informe con su propio formato<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Horas frente al folio en blanco en lugar de cerrar procesos<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Flecha de transformaci\u00f3n (visible solo en desktop) -->\n        <div class=\"vl-compare-arrow vl-cmp-after\" 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 vl-cmp-after\">\n          <span class=\"vl-compare-label\">Ahora<\/span>\n          <h3 class=\"vl-compare-title\">Con tu plantilla trabajando por ti<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>El informe se genera solo tras cada entrevista<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Informes estandarizados con la imagen de marca de la empresa<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Dedicas el tiempo ahorrado a cerrar procesos de selecci\u00f3n m\u00e1s r\u00e1pido<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n    <\/div><!-- \/vl-cmp-sticky -->\n   <\/div><!-- \/vl-cmp-track -->\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;\">Crea tu primera plantilla 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 PDF que represente el tipo de informe de selecci\u00f3n que quieres generar: un informe de candidato, una evaluaci\u00f3n de competencias, un resumen para el cliente, un informe de entrevista final&#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 cualquier tipo de proceso de selecci\u00f3n?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Funciona para headhunting, executive search, RPO, perfiles tech, comerciales, directivos&#8230; Cualquier proceso de selecci\u00f3n, sea cual sea el sector o el tipo de perfil que eval\u00faes.<\/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 de candidatos con IA \u2014 Voicit\",\n  \"description\": \"Sube un informe de candidato de ejemplo y la IA crea la plantilla para tus informes de selecci\u00f3n, replicando tu estilo en cada entrevista. Sin configuraci\u00f3n manual.\",\n  \"url\": \"https:\/\/voicit.com\/plantillas-informes-candidatos\/\",\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 PDF que represente el informe de selecci\u00f3n que quieres generar: un informe de candidato, una evaluaci\u00f3n de competencias, un resumen para cliente o un informe de entrevista final.\"\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 cualquier tipo de proceso de selecci\u00f3n?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"S\u00ed. Funciona para headhunting, executive search, RPO y cualquier proceso de selecci\u00f3n, sea cual sea el sector o el perfil que eval\u00faes.\"\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  \/\/ Textos del chat seg\u00fan idioma (TranslatePress cambia <html lang>). No depende de TranslatePress.\n  var VLI18N = (function(){\n    var d = {\n      es:{gen:'Generando plantilla\u2026',done:'Borrador de plantilla generado'},\n      en:{gen:'Generating template\u2026',done:'Template draft generated'},\n      fr:{gen:'G\u00e9n\u00e9ration du mod\u00e8le\u2026',done:'Brouillon de mod\u00e8le g\u00e9n\u00e9r\u00e9'},\n      de:{gen:'Vorlage wird erstellt\u2026',done:'Vorlagenentwurf erstellt'},\n      it:{gen:'Generazione del modello\u2026',done:'Bozza del modello generata'},\n      pt:{gen:'A gerar modelo\u2026',done:'Rascunho do modelo gerado'},\n      ca:{gen:'Generant plantilla\u2026',done:'Esborrany de plantilla generat'}\n    };\n    var l = (document.documentElement.lang||'es').slice(0,2).toLowerCase();\n    return d[l] || d.es;\n  })();\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\">${VLI18N.gen}<\/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>' + VLI18N.done + '<\/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<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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     SCROLL CONGELADO DE LOS 3 PASOS \u2014 control por 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<script>\n(function () {\n  'use strict';\n  var track = document.querySelector('.vl-ssteps-track');\n  if (!track) return;\n  var steps = [].slice.call(document.querySelectorAll('.vl-sstep'));\n  var dots  = [].slice.call(document.querySelectorAll('[data-sstep-dot]'));\n  if (!steps.length) return;\n\n  var seen = {};       \/\/ mockups cuya animaci\u00f3n ya se dispar\u00f3\n  var current = -1;\n\n  function isMobile(){ return window.matchMedia('(max-width: 900px)').matches; }\n\n  function fireMockup(i){\n    var m = steps[i] && steps[i].querySelector('.vl-mk-filepicker, .vl-mk-chat, .vl-mk-editor');\n    if (m && !seen[i]) { seen[i] = true; m.classList.add('is-visible'); }\n  }\n\n  function activate(i){\n    if (i === current) return;\n    current = i;\n    for (var s = 0; s < steps.length; s++) steps[s].classList.toggle('is-active', s === i);\n    for (var d = 0; d < dots.length; d++) dots[d].classList.toggle('is-active', d === i);\n    fireMockup(i);\n  }\n\n  function onScroll(){\n    if (isMobile()) return;  \/\/ en m\u00f3vil no hay congelado, se ven apilados\n    var rect = track.getBoundingClientRect();\n    var scrollable = track.offsetHeight - window.innerHeight;\n    if (scrollable <= 0) return;\n    var prog = (-rect.top) \/ scrollable;          \/\/ 0 al entrar, 1 al salir\n    prog = Math.max(0, Math.min(0.9999, prog));\n    activate(Math.floor(prog * steps.length));\n  }\n\n  function initMobile(){\n    if (isMobile()) {\n      \/\/ todos los pasos visibles \u2192 disparar todas las animaciones\n      for (var i = 0; i < steps.length; i++) fireMockup(i);\n    }\n  }\n\n  activate(0);\n  initMobile();\n\n  var ticking = false;\n  window.addEventListener('scroll', function () {\n    if (!ticking) { requestAnimationFrame(function () { onScroll(); ticking = false; }); ticking = true; }\n  }, { passive: true });\n  window.addEventListener('resize', function () { initMobile(); current = -1; onScroll(); });\n  onScroll();\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     COMPARATIVA \"Antes \/ Ahora\" \u2014 control por 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<script>\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-cmp-section');\n  if (!section) return;\n  var track = section.querySelector('.vl-cmp-track');\n  if (!track) return;\n\n  function isStacked(){ return window.matchMedia('(max-width: 1024px)').matches; }\n\n  function onScroll(){\n    if (isStacked()) { section.classList.add('is-after-visible'); return; }\n    var rect = track.getBoundingClientRect();\n    var scrollable = track.offsetHeight - window.innerHeight;\n    if (scrollable <= 0) return;\n    var prog = (-rect.top) \/ scrollable;          \/\/ 0 al entrar, 1 al salir\n    section.classList.toggle('is-after-visible', prog > 0.28);\n  }\n\n  var ticking = false;\n  window.addEventListener('scroll', function () {\n    if (!ticking) { requestAnimationFrame(function () { onScroll(); ticking = false; }); ticking = true; }\n  }, { passive: true });\n  window.addEventListener('resize', onScroll);\n  onScroll();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Sube un informe de candidato de ejemplo y la IA genera la plantilla de tus informes de selecci\u00f3n replicando tu estilo.<\/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 de informes de candidatos con IA | Voicit","rank_math_description":"Sube un informe de candidato de ejemplo y la IA crea la plantilla para tus informes de selecci\u00f3n. Replica tu estilo en cada entrevista, sin configurar nada a mano.","rank_math_focus_keyword":"plantilla informe de candidato"},"class_list":["post-8479","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/pages\/8479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/comments?post=8479"}],"version-history":[{"count":52,"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/pages\/8479\/revisions"}],"predecessor-version":[{"id":8548,"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/pages\/8479\/revisions\/8548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/media\/7980"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/pt\/wp-json\/wp\/v2\/media?parent=8479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}